/* ═══════════════════════════════════════════════════════
   SELOXA PHARMA — ADDITIONAL CSS (condensed)
   Consolidated pass, July 3, 2026
   ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   1. GLOBAL BASE
   ═══════════════════════════════════════════════════════ */

body {
  background-color: #f2f2f0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  color: #1a1a1a;
}


/* ═══════════════════════════════════════════════════════
   2. GLOBAL HIDES — Storefront defaults we don't want
   ═══════════════════════════════════════════════════════ */

.site-title,
.site-description,
.page-title,
.entry-title,
.entry-header,
.site-search,
.widget_product_search,
.site-info,
.storefront-breadcrumb,
.woocommerce-breadcrumb,
.woocommerce-products-header,
.woocommerce-ordering,
.woocommerce-result-count {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════
   3. SITE-WIDE LAYOUT RESETS
   Kill Storefront's default paddings/margins above content;
   we add them back deliberately where needed.
   ═══════════════════════════════════════════════════════ */

.site-content,
.site-content .col-full,
.site-content #primary,
.site-content #content,
.entry-content,
.hentry,
.page .hentry {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.storefront-full-width-content .entry-content,
.storefront-full-width-content .hentry {
  padding: 0 !important;
  margin: 0 !important;
}
#masthead {
  margin-bottom: 0 !important;
}
.storefront-sorting {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Sticky footer — #page as flex column so footer pins to bottom */
#page {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}
#page .site-content {
  flex: 1 0 auto !important;
}


/* ═══════════════════════════════════════════════════════
   4. NAV ARCHITECTURE (site-wide — home + inner unified)
   .site-header collapses to a 0-height layer; the logo
   floats above the real nav bar as a 100px absolute overlay.
   Real nav bar (.storefront-primary-navigation) sits in
   normal document flow below.
   ═══════════════════════════════════════════════════════ */

.site-header {
  padding: 0 !important;
  border-bottom: none !important;
  height: 0 !important;
  overflow: visible !important;
  position: relative !important;
  background: transparent !important;
}
.site-header > .col-full {
  display: flex !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100px !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 20 !important;
  background: transparent !important;
}
.site-header > .col-full .site-branding {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.custom-logo-link {
  pointer-events: auto !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.custom-logo {
  height: 60px !important;
  width: auto !important;
  max-width: 320px !important;
}

/* Real nav bar */
.storefront-primary-navigation {
  background: #ffffff !important;
  border-bottom: 1px solid #e8e8e8 !important;
}
.main-navigation > ul > li > a {
  color: #1a1a1a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
}
.main-navigation > ul > li > a:hover {
  color: #555555 !important;
}
.main-navigation > ul > li.current-menu-item > a {
  font-weight: 700 !important;
}

/* Inner-page nav bar — auto height driven by link padding */
body:not(.home) .main-navigation > ul > li > a {
  padding: 14px 20px !important;
}

/* Nav bar — height + centering, ALL desktop pages (≥769px).
   Was .home-only, which is why inner pages collapsed to ~80px
   and the cart/search didn't vertically center. The flex-centered
   .col-full does the centering; the 100px height matches the logo
   overlay above it. Mobile (≤768px) untouched — Section 14 owns it. */
@media (min-width: 769px) {
  .storefront-primary-navigation,
  .storefront-primary-navigation .col-full {
    height: 100px !important;
  }
  .storefront-primary-navigation .col-full {
    display: flex !important;
    align-items: center !important;
  }
  /* keep the homepage link sizing so home doesn't shift at all */
  .home .main-navigation > ul > li > a {
    padding: 0 20px !important;
    line-height: 100px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   5. HOMEPAGE HERO (video cover block)
   ═══════════════════════════════════════════════════════ */

.home .entry-content .wp-block-cover:first-child,
.home .entry-content > .wp-block-cover {
  margin-left: calc(-50vw + 50% + 12px) !important;
  margin-right: calc(-50vw + 50% + 12px) !important;
  max-width: calc(100vw - 24px) !important;
  width: calc(100vw - 24px) !important;
  min-height: 660px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}
.home .entry-content .wp-block-cover:first-child .wp-block-cover__inner-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.home .entry-content .wp-block-cover:first-child .wp-block-cover__inner-container > * {
  max-width: 700px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.home .wp-block-cover h1,
.home .wp-block-cover h2 {
  color: #ffffff !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  margin-bottom: 6px !important;
  text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.8) !important;
}
.home .wp-block-cover p {
  color: rgba(255,255,255,0.85) !important;
  font-size: 18px !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.8) !important;
}
.home .wp-block-cover .wp-block-button__link {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 32px !important;
  border: none !important;
}


/* ═══════════════════════════════════════════════════════
   6. HOMEPAGE — Trust cards & section headings
   ═══════════════════════════════════════════════════════ */

.home .wp-block-group h2 {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  text-align: center !important;
  margin-bottom: 48px !important;
  letter-spacing: -0.5px !important;
}
.wp-block-columns {
  gap: 28px !important;
}
.wp-block-column {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 64px 44px !important;
  border: 1px solid #e0e0e0 !important;
  text-align: center !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07) !important;
  min-height: 300px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.wp-block-column:hover {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.13) !important;
  transform: translateY(-2px) !important;
}
.wp-block-column h3 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.3px !important;
}
.wp-block-column p {
  font-size: 16px !important;
  color: #555555 !important;
  line-height: 1.85 !important;
  margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════
   7. BUTTONS (site-wide default)
   ═══════════════════════════════════════════════════════ */

.button,
button[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.3px;
  border: none !important;
  padding: 10px 20px !important;
  transition: opacity 0.2s ease !important;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  opacity: 0.8 !important;
  background-color: #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════
   8. SHOP PAGE — product grid + cards
   (Card look + grid columns superseded by section 29.)
   ═══════════════════════════════════════════════════════ */

/* Kill Storefront's float-era ghost cells that misalign grid */
ul.products::before,
ul.products::after {
  display: none !important;
  content: none !important;
}
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}
ul.products li.product:first-child {
  grid-column-start: 1 !important;
}
ul.products li.product {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 0 !important;
  border: 1px solid #e8e8e8 !important;
  overflow: hidden !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
}
ul.products li.product:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
  transform: translateY(-3px) !important;
}
/* Full-res vial, inset from the rounded card so the cap never
   clips the corners. Card supplies the rounding + overflow. */
ul.products li.product a img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  padding: 20px 20px 0 !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
ul.products li.product .product-category-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #666666 !important;
  background: #f0f0f0 !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  margin: 14px 0 0 16px !important;
}
ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 6px 0 0 !important;
  padding: 0 16px !important;
  line-height: 1.3 !important;
}
ul.products li.product .price {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  padding: 6px 16px 0 !important;
  display: block !important;
  margin: 0 !important;
}
ul.products li.product .button {
  display: block !important;
  width: calc(100% - 32px) !important;
  margin: 12px 16px 16px !important;
  text-align: center !important;
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  padding: 12px 16px !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
}
ul.products li.product .button:hover {
  opacity: 0.8 !important;
}

/* Shop page — full-bleed container (CONTENT ONLY).
   Scoped to .site-content so it widens the product area but NOT
   the nav bar's own .col-full. The nav lives in
   .storefront-primary-navigation (a sibling of .site-content),
   so it no longer gets stretched — this is what stops the shop
   nav from spreading to the screen edges. */
body.woocommerce-shop .site-content .col-full {
  max-width: 100% !important;
  padding-top: 16px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════
   HOMEPAGE FEATURED PRODUCTS (wc-block-product-template)
   (Card look superseded by section 29.)
   Rounded image cards (vial shown whole, no crop) + centered
   name/price + full-width black Add-to-cart button.
   Scoped to the block grid ONLY — does NOT touch the classic
   /shop/ archive (ul.products) or single product pages.
   ═══════════════════════════════════════════════════════ */

/* Optional gutter — keeps the outer cards off the screen edges.
   Delete these 3 lines if you want the grid full-bleed again. */
.wc-block-product-template {
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* Rounded image "card" — contain = whole vial, never cropped */
.wc-block-product-template .wc-block-components-product-image {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
}
.wc-block-product-template .wc-block-components-product-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 416 / 624 !important;
  object-fit: cover !important;
  border-radius: 14px !important;
}

/* Product name */
.wc-block-product-template .wp-block-post-title {
  margin: 0 0 6px !important;
}
.wc-block-product-template .wp-block-post-title a {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1.3 !important;
}

/* Price — kept as its own line above the button */
.wc-block-product-template .wc-block-components-product-price {
  margin: 0 0 12px !important;
}
.wc-block-product-template .woocommerce-Price-amount {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

/* Full-width black button. Styles BOTH the in-stock "Add to cart"
   button and the out-of-stock "Read more" link (shared class). */
.wc-block-product-template .wp-block-woocommerce-product-button {
  width: 100% !important;
  margin-top: 0 !important;
}
.wc-block-product-template .wp-block-button__link {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-align: center !important;
}
.wc-block-product-template .wp-block-button__link span {
  color: #ffffff !important;   /* guarantees readable white label */
}
.wc-block-product-template .wp-block-button__link:hover {
  opacity: 0.85 !important;
  background: #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════
   9. SINGLE PRODUCT PAGE
   ═══════════════════════════════════════════════════════ */

.single-product h1.product_title {
  display: block !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 8px !important;
  line-height: 1.25 !important;
}
.single-product p.price,
.single-product span.price {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  margin-bottom: 20px !important;
  display: block !important;
}
.single-product .woocommerce-product-details__short-description {
  font-size: 15px !important;
  color: #555555 !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
  padding-bottom: 24px !important;
  border-bottom: 1px solid #e8e8e8 !important;
}
.single-product .single_add_to_cart_button.button {
  background: #1a1a1a !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  padding: 16px 32px !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  border: none !important;
}
.single-product .single_add_to_cart_button.button:hover {
  opacity: 0.82 !important;
}
.single-product .woocommerce-product-gallery {
  background: #f8f8f6 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}
.single-product .product_meta {
  font-size: 13px !important;
  color: #888888 !important;
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e8e8e8 !important;
  line-height: 2 !important;
}
.single-product .product_meta a {
  color: #333333 !important;
  font-weight: 600 !important;
}

/* Product tabs */
.woocommerce-tabs ul.tabs {
  border-bottom: 2px solid #e8e8e8 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.woocommerce-tabs ul.tabs::before {
  display: none !important;
}
.woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -2px !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.woocommerce-tabs ul.tabs li a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #888888 !important;
  background: transparent !important;
  padding: 12px 20px !important;
  border: none !important;
}
.woocommerce-tabs ul.tabs li.active {
  border-bottom: 3px solid #1a1a1a !important;
  background: transparent !important;
}
.woocommerce-tabs ul.tabs li.active a {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}
.woocommerce-tabs .panel {
  padding: 24px 0 !important;
  border: none !important;
  background: transparent !important;
}


/* ═══════════════════════════════════════════════════════
   10. INNER CONTENT PAGES (About / Contact / FAQ / legal)
   ═══════════════════════════════════════════════════════ */

body:not(.home) .entry-content {
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 60px 24px !important;
}
body:not(.home) .entry-content h1,
body:not(.home) .entry-content h2 {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 16px !important;
  margin-top: 48px !important;
}
body:not(.home) .entry-content h1:first-child,
body:not(.home) .entry-content h2:first-child {
  margin-top: 0 !important;
}
body:not(.home) .entry-content h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin-top: 40px !important;
  margin-bottom: 10px !important;
}
body:not(.home) .entry-content p {
  font-size: 16px !important;
  color: #444444 !important;
  line-height: 1.8 !important;
  margin-bottom: 16px !important;
}

/* WooCommerce pages (shop / cart / checkout / my-account) — full-width entry */
body.woocommerce-page .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
}


/* ═══════════════════════════════════════════════════════
   11. FORMS — WPForms
   ═══════════════════════════════════════════════════════ */

/* Base form styling (contact form, etc.) */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container textarea {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  width: 100% !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
}
.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container textarea:focus {
  border-color: #1a1a2e !important;
  outline: none !important;
}
.wpforms-container .wpforms-submit {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 32px !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════
   12. FOOTER
   ═══════════════════════════════════════════════════════ */

.site-footer {
  background: #1a1a1a !important;
  color: #999999 !important;
  font-size: 13px;
}
.site-footer a {
  color: #cccccc !important;
}
.site-footer a:hover {
  color: #ffffff !important;
}
.site-footer .footer-widgets {
  text-align: center !important;
  padding: 32px 0 !important;
}
.site-footer .footer-widget {
  float: none !important;
  width: 100% !important;
  margin: 0 auto !important;
}
.site-footer .widget_nav_menu ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
}
.site-footer .widget_nav_menu ul li {
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
.site-footer .widget_nav_menu ul li::before,
.site-footer .widget_nav_menu ul li::after {
  display: none !important;
  content: none !important;
}
.site-footer .widget_nav_menu ul li a {
  color: #999999 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  background: none !important;
  padding: 0 !important;
}
.site-footer .widget_nav_menu ul li a:hover {
  color: #ffffff !important;
}
.site-footer .widget_nav_menu .widgettitle {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════
   13. DESKTOP (≥769px) — reserve space below nav overlay
   .site-header is height:0, so content would slide under
   the 100px nav bar. Push .site-content down per page type.
   Inner content pages push via .entry-content instead.
   ═══════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  body.woocommerce-shop div.site-content,
  body.single-product div.site-content {
    padding-top: 120px !important;
  }
  .home div.site-content {
    padding-top: 118px !important;
  }
  body:not(.home):not(.woocommerce-shop) .entry-content {
    padding-top: 130px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   14. MOBILE (≤768px) — disable desktop overlay on ALL pages
   Storefront's native mobile header (logo + hamburger) flows
   normally. Two-up product grid.
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .site-header {
    height: auto !important;
    position: static !important;
    overflow: visible !important;
    padding: 16px 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }
  .site-header > .col-full {
    position: static !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    pointer-events: auto !important;
    z-index: auto !important;
  }
  .storefront-primary-navigation,
  .storefront-primary-navigation .col-full {
    height: auto !important;
  }
  .storefront-primary-navigation .col-full {
    display: block !important;
  }
  .main-navigation > ul > li > a {
    line-height: normal !important;
  }
  /* grid columns + card image: superseded by section 29 */
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  ul.products li.product a img {
    padding: 12px 12px 0 !important;
    height: auto !important;
  }
}

/* 15. (removed) The old parallax signup Cover's form spacing. The signup band
   is now the [seloxa_signup] shortcode, styled in section 38. */

/* 16. (removed) The old "Why choose Seloxa" checklist + cards. The section
   is now the [seloxa_why] shortcode, styled in section 37. */

/* ═══════════════════════════════════════════════════════
   17. HOMEPAGE — FAQ ACCORDION (full-width photo behind)
   Native <details>/<summary> accordion, no JS. Full-bleed
   dark photo band with overlay for legibility.
   Self-scoped under .home .seloxa-faq.
   ═══════════════════════════════════════════════════════ */

.home .seloxa-faq {
  position: relative !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  padding: 80px 24px !important;
  box-sizing: border-box !important;
  background-image: url("/wp-content/uploads/2026/07/u7378143137_modern_pharmaceutical_research_laboratory_close-u_8dbd25ee-2774-472f-9947-ec09f19e4c97_3.png") !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden !important;
}
/* Dark overlay so white text stays legible over the photo */
.home .seloxa-faq .seloxa-faq__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 20, 28, 0.82) !important;
  z-index: 0 !important;
}
.home .seloxa-faq .seloxa-faq__inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
.home .seloxa-faq .seloxa-faq__heading {
  color: #ffffff !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  text-align: center !important;
  margin: 0 0 40px !important;
}

/* Accordion item */
.home .seloxa-faq .seloxa-faq__item {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
}
.home .seloxa-faq .seloxa-faq__item summary {
  cursor: pointer !important;
  list-style: none !important;
  padding: 22px 24px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
/* Hide default marker (Safari/Chrome/FF) */
.home .seloxa-faq .seloxa-faq__item summary::-webkit-details-marker { display: none !important; }
.home .seloxa-faq .seloxa-faq__item summary::marker { content: "" !important; }
/* Plus / minus indicator */
.home .seloxa-faq .seloxa-faq__item summary::after {
  content: "+" !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  margin-left: 16px !important;
  flex-shrink: 0 !important;
}
.home .seloxa-faq .seloxa-faq__item[open] summary::after { content: "\2212" !important; } /* minus */

.home .seloxa-faq .seloxa-faq__answer {
  padding: 0 24px 22px !important;
}
.home .seloxa-faq .seloxa-faq__answer p {
  color: rgba(255,255,255,0.85) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .home .seloxa-faq { padding: 56px 18px !important; }
  .home .seloxa-faq .seloxa-faq__heading { font-size: 30px !important; }
  .home .seloxa-faq .seloxa-faq__item summary { font-size: 16px !important; padding: 18px 18px !important; }
}

/* ═══════════════════════════════════════════════════════
   17b. HOMEPAGE — remove Storefront article bottom margin
   Storefront sets article.hentry { margin-bottom: ~4.235em }.
   Section 3 only zeroed margin-TOP, never bottom. On the
   homepage the full-bleed FAQ is the last element, so that
   ~68px article bottom margin renders as a transparent strip
   (page bg #f2f2f0) inside .col-full, between the FAQ and the
   global disclaimer band. Zero the bottom spacing on the
   homepage content chain only.
   ═══════════════════════════════════════════════════════ */

.home article.hentry,
.home .entry-content,
.home .col-full,
.home #primary,
.home #main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* ═══════════════════════════════════════════════════════
   18. GLOBAL DISCLAIMER BAND (above footer, all pages)
   Injected via WPCode at storefront_before_footer.
   ═══════════════════════════════════════════════════════ */

.seloxa-disclaimer {
  background: #14161c !important;
  padding: 40px 24px !important;
  box-sizing: border-box !important;
}
.seloxa-disclaimer .seloxa-disclaimer__inner {
  max-width: 1000px !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: #9aa0a8 !important;
}
.seloxa-disclaimer .seloxa-disclaimer__inner strong {
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   19. NAV OVERHAUL — Growth-Guys-style bar
   Left: Shop (category dropdown) + Lab Results
   Center: logo (existing absolute overlay, now truly centered)
   Right: FAQ + Contact Us + search + cart
   Desktop-only (≥769px) except 19a. Mobile untouched.
   ═══════════════════════════════════════════════════════ */

/* 19a. LOGO CENTERING FIX — Storefront's clearfix ::before/
   ::after render as flex items inside the logo overlay
   (::after has content:" ", a real-width space glyph on the
   right of the logo, nudging it left). Clearfix is useless
   in a flex container — remove both. Site-wide, safe. */
.site-header > .col-full::before,
.site-header > .col-full::after {
  content: none !important;
  display: none !important;
}

@media (min-width: 769px) {


  /* 19c. SHOP DROPDOWN — white rounded card on hover */
  .main-navigation ul.menu > li.menu-item-has-children {
    position: relative !important;
  }
  /* small caret after "Shop" */
  .main-navigation > ul > li.menu-item-has-children > a::after {
    content: "▾" !important;
    font-size: 11px !important;
    margin-left: 7px !important;
    display: inline-block !important;
  }
  .main-navigation ul.menu ul.sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    background: #ffffff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14) !important;
    /* panel fits its longest item (links are nowrap) */
    width: max-content !important;
    min-width: 200px !important;
    z-index: 40 !important;
  }
  .main-navigation ul.menu li.menu-item-has-children:hover > ul.sub-menu,
  .main-navigation ul.menu li.menu-item-has-children:focus-within > ul.sub-menu {
    display: block !important;
  }
  .main-navigation ul.menu ul.sub-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .main-navigation ul.menu ul.sub-menu li a {
    display: block !important;
    /* full panel width, so the divider spans it too (Storefront sets 200px) */
    width: auto !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
    background: transparent !important;
    border-bottom: 1px solid #f0f0f0 !important;
    white-space: nowrap !important;
  }
  .main-navigation ul.menu ul.sub-menu li:last-child a {
    border-bottom: none !important;
  }
  .main-navigation ul.menu ul.sub-menu li a:hover {
    color: #555555 !important;
  }
  /* no caret on dropdown entries */
  .main-navigation ul.menu ul.sub-menu li a::after {
    content: none !important;
  }

  /* 19d. SEARCH BUTTON (details element from WPCode snippet) */
  .seloxa-nav-search {
    position: relative !important;
    margin: 0 6px 0 28px !important;
  }
  .seloxa-nav-search summary {
    list-style: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    color: #1a1a1a !important;
  }
  .seloxa-nav-search summary::-webkit-details-marker { display: none !important; }
  .seloxa-nav-search summary::marker { content: "" !important; }
  .seloxa-nav-search summary:hover { background: #f0f0f0 !important; }
  .seloxa-nav-search__panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    width: 320px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14) !important;
    padding: 16px !important;
    z-index: 40 !important;
  }
  .seloxa-nav-search .search-field {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }
  .seloxa-nav-search form button[type="submit"] {
    width: 100% !important;
  }

  /* 19e. CART — sits at the far right as a flex item */
  .storefront-primary-navigation ul.site-header-cart {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .site-header-cart .cart-contents {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #1a1a1a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    padding: 8px 0 8px 4px !important;
  }
}

/* 19f. MOBILE — hide the custom search icon ≤768px for now.
   Mobile nav is still on the verification queue; the injected
   Shop categories will nest natively in the hamburger menu. */
@media (max-width: 768px) {
  .seloxa-nav-search { display: none !important; }
}

/* 19g. LOGO NUDGE — DESKTOP ONLY (≥769px).
   Centres the logo in the gap between "Contact Us" and the
   search icon. Wrapped in the media query so it never touches
   the mobile header (where the logo flows normally).
   X = right/left, Y = down/up. Adjust to taste. */
@media (min-width: 769px) {
  .site-header > .col-full .site-branding {
    transform: translateX(60px) translateY(10px) !important;
  }
}

/* 19h. PHONES UNDER 520px — ICON-ONLY MENU BUTTON, LOGO CENTRED.
   The "Menu" text button (86px) left no room to centre the logo, so here
   the button is a 44 × 44 hamburger (same border; the "Menu" text is kept
   for screen readers with font-size 0, not clipped, because its <span>
   also draws the middle bar). The branding box spans the whole header row
   (as in 19i) so the logo centres on the viewport, sized to the largest
   that fits symmetrically: 100vw − 2 × (23px gutter + 44px button + 8px
   gap) = 100vw − 150px wide, never taller than 60px (39px tall at 320,
   52px at 375, full size from about 407px). */
@media (max-width: 519px) {
  .storefront-primary-navigation .menu-toggle {
    width: 44px !important;
    max-width: none !important;
    height: 44px !important;
    padding: 0 !important;
  }
  .storefront-primary-navigation .menu-toggle span {
    font-size: 0 !important;                 /* "Menu" stays the accessible name */
  }
  .storefront-primary-navigation .menu-toggle::before,
  .storefront-primary-navigation .menu-toggle::after,
  .storefront-primary-navigation .menu-toggle span::before {
    left: 50% !important;                    /* bars centred in the square (Storefront: 1em from the left) */
    width: 18px !important;
    margin-left: -9px !important;
  }
  .site-header > .col-full .site-branding {
    width: 100% !important;
    margin-right: -100% !important;          /* the Menu button stays on this row, on top */
    justify-content: center !important;
  }
  .custom-logo-link {
    min-width: 0 !important;
  }
  .custom-logo {
    width: auto !important;
    height: auto !important;
    max-height: 60px !important;
    max-width: calc(100vw - 150px) !important;
  }
}

/* 19i. PHONES/TABLET 520–767px — LOGO CENTRED ON THE FULL WIDTH.
   Below 768px the logo used to centre in the space left of the Menu
   button, so it sat ~50–60px left of the true centre. Where the full
   60px-tall logo fits between the true centre and the Menu button (with a
   clear gap), the branding box spans the whole header row, so the logo
   centres on the viewport; the negative right margin keeps it from
   pushing the Menu button onto the next line (the button comes later in
   the page, so it stays on top and clickable). Below 520px see 19h (icon-only
   button, logo centred the same way). */
@media (min-width: 520px) and (max-width: 767px) {
  .site-header > .col-full .site-branding {
    width: 100% !important;
    margin-right: -100% !important;
    justify-content: center !important;
  }
}

/* ═══════════════════════════════════════════════════════
   20. FOOTER — one aligned grid (all pages)
   Markup: inc/footer.php on `storefront_footer` (pri 15).
   Ink Navy band from 30g (.site-footer). Columns and the
   legal bar share the footer's .col-full, sized like the
   nav/content .col-full (Storefront sizes it in em and
   .site-footer is 13px, so it is reset to 1rem here).
     <600px     brand / Shop + Help side by side / signup /
                legal bar stacked and centred
     600–1023   brand + Shop/Help on the left, signup right
     ≥1024      brand | Shop | Help | Stay connected
   Text on Ink Navy #1A1A2E: headings #FFFFFF 17.1:1, links
   #C5CBD3 10.44:1, labels/copyright #A3AAB3 7.28:1, hover
   and focus Light Teal 13.74:1, errors #FFB4A2 9.99:1.
   Tap targets: every link is at least 44px tall.
   ═══════════════════════════════════════════════════════ */

/* Storefront's footer widget menu is replaced by the legal bar
   (.site-info is hidden by Section 2). */
.site-footer .footer-widgets { display: none !important; }

.site-footer { padding: 0 !important; }
.site-footer > .col-full { font-size: 1rem !important; }
.seloxa-footer { width: 100% !important; }

.seloxa-footer__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-areas:
    "brand  brand"
    "shop   help"
    "signup signup" !important;
  gap: 32px 24px !important;
  padding: 40px 0 36px !important;
}
.seloxa-footer__col--brand  { grid-area: brand !important; }
.seloxa-footer__col--shop   { grid-area: shop !important; }
.seloxa-footer__col--help   { grid-area: help !important; }
.seloxa-footer__col--signup { grid-area: signup !important; }
.seloxa-footer__col { min-width: 0 !important; }

/* ---- Shared link style (columns, email, legal bar) ---- */
.seloxa-footer a {
  color: #C5CBD3 !important;
  text-decoration: none !important;
  border-radius: 2px !important;
}
.seloxa-footer a:hover,
.seloxa-footer a:focus-visible {
  color: var(--seloxa-teal) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
}
.seloxa-footer a:focus {
  outline-color: var(--seloxa-teal) !important;
}
.seloxa-footer a:focus-visible {
  outline: 2px solid var(--seloxa-teal) !important;
  outline-offset: 2px !important;
}

/* ---- Column headings: small label style ---- */
.seloxa-footer__heading {
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  margin: 0 0 6px !important;
}

.seloxa-footer__links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.seloxa-footer__links li { margin: 0 !important; padding: 0 !important; }
.seloxa-footer__links a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* ---- Brand: logo tile + wordmark, email, accepted cards ----
   The icon's hands are dark navy, so it sits on a light tile
   to read at full strength on the dark band. */
.seloxa-footer .seloxa-footer__brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}
.seloxa-footer__logo-tile {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  display: block !important;
}
/* The PNG has ~13% empty margin: draw it at 50px, centred in the tile */
.seloxa-footer__logo {
  width: 50px !important;
  height: 50px !important;
  max-width: none !important;
  margin: -3px !important;
  display: block !important;
  opacity: 1 !important;
}
.seloxa-footer__brand-name {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  line-height: 1.2 !important;
}
.seloxa-footer .seloxa-footer__brand:hover .seloxa-footer__brand-name,
.seloxa-footer .seloxa-footer__brand:focus-visible .seloxa-footer__brand-name {
  color: var(--seloxa-teal) !important;
}
.seloxa-footer .seloxa-footer__brand:hover { text-decoration: none !important; }

.seloxa-footer__email {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  margin-top: 12px !important;
  font-size: 15px !important;
  overflow-wrap: anywhere !important;
}
.seloxa-footer__icon { flex: 0 0 auto !important; display: block !important; }

.seloxa-footer__pay {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 16px !important;
  margin-top: 10px !important;
}
.seloxa-footer__cards {
  display: flex !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.seloxa-footer__card {
  width: 44px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #C5CBD3 !important;
  box-sizing: border-box !important;
}
.seloxa-footer__card svg { display: block !important; height: auto !important; }
.seloxa-footer__card--visa svg             { width: 32px !important; }
.seloxa-footer__card--mastercard svg       { width: 26px !important; }
.seloxa-footer__card--american-express svg { width: 24px !important; }
.seloxa-footer__secure {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #A3AAB3 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* ---- Stay connected: email-only WPForms pill (form #539) ---- */
.seloxa-footer__col--signup .seloxa-footer__heading { margin-bottom: 14px !important; }
.seloxa-footer__signup { max-width: 100% !important; }
.seloxa-footer__signup .wpforms-container { margin: 0 !important; }
/* strip WPForms chrome we don't want in a pill */
.seloxa-footer__signup .wpforms-field-label,
.seloxa-footer__signup .wpforms-field-sublabel,
.seloxa-footer__signup .wpforms-required-label,
.seloxa-footer__signup .wpforms-field-description,
.seloxa-footer__signup .wpforms-title,
.seloxa-footer__signup .wpforms-description,
.seloxa-footer__signup .wpforms-head-container {
  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;
}
/* form becomes the flex pill */
.seloxa-footer__signup .wpforms-form {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: transparent !important;
}
.seloxa-footer__signup .wpforms-field-container { flex: 1 1 auto !important; min-width: 0 !important; }
.seloxa-footer__signup .wpforms-field { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; }
/* the email input — transparent, white text */
.seloxa-footer__signup .wpforms-container input[type="email"] {
  width: 100% !important; max-width: 100% !important;
  min-height: 46px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important; border-radius: 0 !important;
  color: #ffffff !important;
  font-size: 14px !important; letter-spacing: 0.04em !important;
  padding: 13px 16px !important; margin: 0 !important;
}
.seloxa-footer__signup .wpforms-container input[type="email"]:focus { outline: none !important; box-shadow: none !important; }
.seloxa-footer__signup .wpforms-container input[type="email"]::placeholder {
  color: #9a9a9a !important; text-transform: uppercase !important;
  letter-spacing: 0.06em !important; font-size: 13px !important;
}
/* Keyboard focus shows on the whole pill (Light Teal) */
.seloxa-footer__signup .wpforms-form:focus-within {
  border-color: var(--seloxa-teal) !important;
  box-shadow: 0 0 0 1px var(--seloxa-teal) !important;
}
/* teal arrow button — works whether WPForms outputs a <button> or an
   <input type="submit">. "Submit" text is hidden and the white arrow is
   drawn as an SVG background image (pseudo-elements don't work on inputs). */
.seloxa-footer__signup .wpforms-submit-container { margin: 0 !important; padding: 0 !important; display: flex !important; align-self: stretch !important; }
.seloxa-footer__signup .wpforms-submit-container .wpforms-submit { height: 100% !important; }
.seloxa-footer__signup .wpforms-container .wpforms-submit {
  background-color: #0A6175 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: transparent !important;
  text-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 58px !important;
  min-width: 58px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  align-self: stretch !important;
}
.seloxa-footer__signup .wpforms-container .wpforms-submit:hover {
  background-color: #074F5F !important;
  opacity: 1 !important;
}
.seloxa-footer__signup .wpforms-container .wpforms-submit:focus-visible {
  outline: 2px solid var(--seloxa-teal) !important;
  outline-offset: -4px !important;
}
/* error + success states readable on dark */
.seloxa-footer__signup .wpforms-error { color: #ffb4a2 !important; font-size: 12px !important; margin-top: 6px !important; }
.seloxa-footer__signup .wpforms-error-noscript { color: #ffb4a2 !important; font-size: 12px !important; }
.seloxa-footer .wpforms-confirmation-container-full {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 8px !important; color: #ffffff !important;
  padding: 12px 16px !important; margin: 0 !important; max-width: 100% !important;
}
.seloxa-footer .wpforms-confirmation-container-full p { color: #ffffff !important; margin: 0 !important; font-size: 14px !important; }

/* ---- Legal bar: same container edges, hairline above ---- */
.seloxa-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 4px !important;
  padding: 12px 0 20px !important;
}
.seloxa-footer__legal {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0 20px !important;
}
.seloxa-footer__legal a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  font-size: 13px !important;
}
.seloxa-footer__copyright {
  color: #A3AAB3 !important;
  font-size: 13px !important;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   20b. FOOTER — breakpoints
   ═══════════════════════════════════════════════════════ */

/* Storefront's fixed handheld bar (My Account / Search / Cart)
   shows below 768px: keep the legal bar clear of it. */
@media (max-width: 767px) {
  .seloxa-footer__bottom { padding-bottom: 84px !important; }
}

/* Tablet: brand with Shop + Help under it, signup on the right */
@media (min-width: 600px) {
  .seloxa-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-areas:
      "brand brand signup signup"
      "shop  help  signup signup" !important;
    gap: 28px 32px !important;
    padding: 48px 0 40px !important;
  }
  .seloxa-footer__bottom {
    flex-direction: row !important;
    justify-content: space-between !important;
    text-align: left !important;
    gap: 8px 24px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .seloxa-footer__legal { justify-content: flex-start !important; }
}
@media (min-width: 600px) and (max-width: 767px) {
  .seloxa-footer__bottom { padding-bottom: 76px !important; }
}

/* Desktop: 4 columns in a row */
@media (min-width: 1024px) {
  .seloxa-footer__grid {
    grid-template-columns:
      minmax(0, 1.35fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1.5fr) !important;
    grid-template-areas: "brand shop help signup" !important;
    gap: 0 40px !important;
    padding: 56px 0 48px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   21. CATEGORY PAGE FIXES (desktop only, ≥769px)
   Category pages carry body.tax-product_cat, NOT
   woocommerce-shop, so Section 8 never reaches them:
   (a) products stay clamped in Storefront's right-sidebar
       layout (cramped grid + gutter),
   (b) no top padding is reserved, so the grid slides under
       the 100px nav overlay.
   The nav is deliberately left alone here — it's already
   centered correctly on category pages. Mobile (≤768px) is
   untouched; Section 14 handles it.
   ═══════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* (a) Match the shop width — CONTENT .col-full only, so the
     category nav's .col-full is never widened. */
  body.tax-product_cat .site-content .col-full {
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  /* Kill the right-sidebar two-column layout so #primary takes
     full width (mirrors Section 8's shop treatment). #secondary
     is the empty gutter — remove it. */
  body.tax-product_cat #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  body.tax-product_cat #secondary {
    display: none !important;
  }

  /* (b) Reserve space under the 100px nav overlay so products
     don't render beneath it (matches Section 13's shop value). */
  body.tax-product_cat div.site-content {
    padding-top: 120px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   22. SINGLE PRODUCT PAGE REDESIGN (GG-style, Seloxa brand)
   Two-column buy box: gallery card left, everything else
   right (title, stock pill, price, research notice, cart,
   Details/Reconstitution/Storage as static sections — moved
   into the summary by the WPCode "Product Page Layout"
   snippet). Related products span full width below. The
   prev/next side rails are removed on ALL viewports.
   Scope: body.single-product only. Shop, home, category,
   cart/checkout untouched.
   ═══════════════════════════════════════════════════════ */

/* 22a. Side product rails — GONE, all viewports */
.storefront-product-pagination {
  display: none !important;
}

/* 22b. Kill the phantom right-sidebar layout (product pages
   carry body.right-sidebar like category pages did — this is
   the same fix as Section 21, and removes the squeezed
   #primary + empty right gutter). All viewports. */
body.single-product #primary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
body.single-product #secondary {
  display: none !important;
}

/* 22c. Stock pill (WooCommerce prints p.stock automatically) */
body.single-product p.stock {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 5px 13px !important;
  margin: 0 0 14px !important;
}
body.single-product p.stock.in-stock {
  color: #0f6e56 !important;
  background: #e1f5ee !important;
}
body.single-product p.stock.out-of-stock {
  color: #a63a3a !important;
  background: #fbe9e9 !important;
}

/* 22d. Research-use notice (frost tint, from PHP snippet) */
.seloxa-pd-notice {
  background: #E0F2F5 !important;
  border: 1px solid #bfe2ea !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin: 0 0 20px !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #0a4653 !important;
}

/* 22e. Qty + Add to cart on one row */
body.single-product form.cart {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin: 0 0 4px !important;
}
body.single-product form.cart .quantity {
  margin: 0 !important;
  float: none !important;
}
body.single-product form.cart .quantity .qty {
  height: 48px !important;
  width: 72px !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  text-align: center !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}
body.single-product form.cart .single_add_to_cart_button {
  flex: 1 !important;
  height: 48px !important;
  margin: 0 !important;
}

/* 22f. Trust microcopy under the cart row */
.seloxa-pd-secure {
  font-size: 12px !important;
  color: #888888 !important;
  margin: 10px 0 0 !important;
}

/* 22g. Gallery — white card, matches the card language */
body.single-product .woocommerce-product-gallery {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 14px !important;
  padding: 24px !important;
}

/* 22h. Tabs panel — kill Storefront's floated two-column tab
   layout (ul.tabs 30% left / .panel 65% right). That float was
   BOTH the right-indent and the dead vertical gap under the SKU.
   Panel becomes a normal full-width block in the summary. */
body.single-product .woocommerce-tabs {
  margin-top: 8px !important;
}
body.single-product .woocommerce-tabs ul.tabs {
  display: none !important;
}
body.single-product .woocommerce-tabs .panel.entry-content {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Section headings inside the description (the "Description"
   h2 + the Reconstitution/Storage headings from the old
   Bricks accordion markup) — divider line + heading, like
   the approved mockup */
body.single-product .woocommerce-Tabs-panel--description h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  letter-spacing: 0 !important;
  border-top: 1px solid #e8e8e8 !important;
  padding-top: 20px !important;
  margin: 20px 0 8px !important;
}
body.single-product .woocommerce-Tabs-panel--description p,
body.single-product .woocommerce-Tabs-panel--description .brxe-text-basic {
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  color: #444444 !important;
  margin: 0 0 10px !important;
}
/* Neutralise leftover Bricks accordion affordances */
body.single-product .accordion-title-wrapper {
  cursor: default !important;
}

/* 22i. Related products — centered heading, 3-up grid */
body.single-product .related.products > h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  text-align: center !important;
  letter-spacing: -0.5px !important;
  margin: 44px 0 26px !important;
}

/* 22j. DESKTOP (≥769px) — two-column grid, EXPLICIT placement.
   Auto-placement broke because injected elements (Stripe express
   checkout etc.) become grid children and shift everything. Each
   element is now pinned to its cell, so extra children can't
   reorder the layout — they fall into rows below the grid. */
@media (min-width: 769px) {

  /* Wider stage for the product page — content col-full only,
     nav untouched (same scoping trick as Sections 8/21). */
  body.single-product .site-content .col-full {
    max-width: 1280px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  /* The grid is .seloxa-pd-top (inc/product-page-layout.php 1b), which
     holds ONLY the gallery + summary. div.product itself is a plain block,
     so the lab card and related products stack below the wrapper and the
     sticky gallery (31l) can never reach them. */
  body.single-product div.product {
    display: block !important;
  }
  body.single-product .seloxa-pd-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas: "gallery summary" !important;
    gap: 40px !important;
    align-items: start !important;
  }

  /* Pin the two main players to their cells */
  body.single-product .seloxa-pd-top > .woocommerce-product-gallery {
    grid-area: gallery !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }
  body.single-product .seloxa-pd-top > .summary.entry-summary {
    grid-area: summary !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  /* Anything else a plugin prints inside the wrapper (e.g. a sale badge)
     gets its own full-width row instead of shifting the two columns */
  body.single-product .seloxa-pd-top > :not(.woocommerce-product-gallery):not(.summary) {
    grid-column: 1 / -1 !important;
  }
  body.single-product .related ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 22k. MOBILE (≤768px) — stack: gallery, then summary */
@media (max-width: 768px) {
  body.single-product div.product .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
    margin: 0 0 24px !important;
  }
  body.single-product div.product .summary.entry-summary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }
}

/* 22l. DETAIL PILLS — Details / Reconstitution / Storage as
   drop-down <details> accordions (built by the "Product
   Accordions" WPCode snippet). Light-theme version of the
   homepage FAQ pills: white card, +/− toggle, teal-free
   neutral chrome. All viewports. */
.seloxa-pd-acc {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 10px !important;
  margin: 0 0 12px !important;
  overflow: hidden !important;
}
.seloxa-pd-acc summary {
  cursor: pointer !important;
  list-style: none !important;
  padding: 16px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.seloxa-pd-acc summary::-webkit-details-marker { display: none !important; }
.seloxa-pd-acc summary::marker { content: "" !important; }
.seloxa-pd-acc summary::after {
  content: "+" !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #0A6175 !important;
  line-height: 1 !important;
  margin-left: 16px !important;
  flex-shrink: 0 !important;
}
.seloxa-pd-acc[open] summary::after { content: "\2212" !important; }
.seloxa-pd-acc[open] summary {
  border-bottom: 1px solid #f0f0f0 !important;
}
.seloxa-pd-acc__body {
  padding: 14px 20px 18px !important;
}
.seloxa-pd-acc__body p,
.seloxa-pd-acc__body .brxe-text-basic,
.seloxa-pd-acc__body div {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: #444444 !important;
  margin: 0 0 10px !important;
}
.seloxa-pd-acc__body > :last-child { margin-bottom: 0 !important; }

/* ═══════════════════════════════════════════════════════
   23. OUT-OF-STOCK LOOP BUTTONS — outline style
   (Superseded by section 29: now a muted grey fill.)
   Transparent background + red border + red text, using the
   same red as the out-of-stock pill (#a63a3a, Section 22c).
   Hooks on WooCommerce's `outofstock` class on li.product,
   so in-stock Add-to-cart buttons keep the solid black style.
   Covers BOTH the homepage product-collection block and the
   classic /shop/ + category grids.
   ═══════════════════════════════════════════════════════ */

/* Homepage featured products (block grid) */
.wc-block-product-template li.outofstock .wp-block-button__link {
  background: transparent !important;
  border: 1.5px solid #a63a3a !important;
  color: #a63a3a !important;
  cursor: default !important;
}
.wc-block-product-template li.outofstock .wp-block-button__link span {
  color: #a63a3a !important;   /* overrides the forced-white span rule in Section 8 */
}
.wc-block-product-template li.outofstock .wp-block-button__link:hover {
  background: transparent !important;
  opacity: 1 !important;
}

/* Classic shop / category grid (ul.products) */
ul.products li.product.outofstock .button {
  background: transparent !important;
  border: 1.5px solid #a63a3a !important;
  color: #a63a3a !important;
}
ul.products li.product.outofstock .button:hover {
  opacity: 1 !important;
  background: transparent !important;
}
/* ═══════════════════════════════════════════════════════
   24. HOMEPAGE — buffer between hero video and featured
   products. Space lives on the product-collection block
   (margin-top), NOT the hero — the hero has inline
   margin-bottom:0 and full-bleed rules we don't fight.
   Shows the page background (#f2f2f0). Homepage only.
   ═══════════════════════════════════════════════════════ */

/* Mobile-first: comfortable gap on small screens */
.home .wp-block-woocommerce-product-collection {
  margin-top: 20px !important;
}

/* Desktop: a bit more room to match the page's larger scale */
@media (min-width: 769px) {
  .home .wp-block-woocommerce-product-collection {
    margin-top: 20px !important;
  }
}
/* ═══════════════════════════════════════════════════════
   25. FEATURED PRODUCTS — equal-height cards, buttons
   (Spacing refined in section 29; the flex layout here still applies.)
   bottom-aligned. Titles wrap to different line counts, so
   buttons landed at different heights. Each li becomes a
   flex column; margin-top:auto on the button wrapper pushes
   every button to the card bottom. All viewports (the block
   is a grid on desktop AND mobile, so both benefit).
   Scoped to the homepage block grid only.
   ═══════════════════════════════════════════════════════ */

.wc-block-product-template li.wc-block-product {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Button wrapper eats the leftover space above it,
   dropping every button to the same bottom line */
.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-button {
  margin-top: auto !important;
  padding-top: 12px !important;
}

/* Title + price keep their natural height; the flexible
   space lives between price and button, not inside them */
.wc-block-product-template li.wc-block-product .wp-block-post-title,
.wc-block-product-template li.wc-block-product .wc-block-components-product-price {
  flex: 0 0 auto !important;
}
/* ═══════════════════════════════════════════════════════
   26. MOBILE — un-break the handheld footer bar search.
   Section 2 hides .site-search / .widget_product_search
   globally (correct for the desktop header), but the mobile
   footer bar's tap-to-open search panel uses those SAME
   classes, so the toggle appeared dead. Re-enable it ONLY
   inside .storefront-handheld-footer-bar when the li is
   .active. Desktop header search stays hidden.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Closed state — panel hidden (matches Storefront default) */
  .storefront-handheld-footer-bar li.search .site-search {
    display: none !important;
  }

  /* Tapped/open state — reveal the panel above the bar */
  .storefront-handheld-footer-bar li.search.active .site-search,
  .storefront-handheld-footer-bar li.search.active .site-search .widget_product_search {
    display: block !important;
  }
  .storefront-handheld-footer-bar li.search.active .site-search {
    position: absolute !important;
    bottom: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #e8e8e8 !important;
    padding: 14px 16px !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12) !important;
    z-index: 50 !important;
  }

  /* The form: input + button side by side */
  .storefront-handheld-footer-bar .woocommerce-product-search {
    display: flex !important;
    gap: 10px !important;
  }
  .storefront-handheld-footer-bar .woocommerce-product-search .search-field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;   /* 16px stops iOS auto-zoom on focus */
  }
  .storefront-handheld-footer-bar .woocommerce-product-search button[type="submit"] {
    flex: 0 0 auto !important;
  }
}
/* 26b. MOBILE SEARCH — remove Storefront's magnifier glyph.
   Storefront draws it as a ::before overlaid on the input and
   pads the input left to fit it; our 12px padding made it
   overlap the placeholder. The placeholder text already says
   what the field is — drop the icon. Footer bar only. */
@media (max-width: 768px) {
  .storefront-handheld-footer-bar .widget_product_search form::before,
  .storefront-handheld-footer-bar .woocommerce-product-search::before,
  .storefront-handheld-footer-bar .site-search .search-field::before {
    content: none !important;
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   27. FAQ ANCHOR — nav "FAQ" links to /#faq on the homepage.
   scroll-margin-top = where the section's top edge lands
   relative to the viewport top (0 = flush, per the approved
   screenshot). Smooth scroll is site-wide but only matters
   for in-page anchor jumps. Doesn't touch hero, nav, or
   inner-page rules.
   ═══════════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth !important;
}
.home .seloxa-faq {
  scroll-margin-top: 0 !important;
}


/* ═══════════════════════════════════════════════════════
   28. LAB RESULTS — product-page card + /lab-results/ grid
   Markup from inc/lab-results.php. Only printed when a
   product has BOTH a purity and a report PDF (the display
   rule), so there are no empty states to style here except
   the page's "Results are being published." line.
   The product-page card is compliance text: it is NOT in
   the scroll-motion list and must never be hidden.
   Mobile-first; wider layouts from 600px / 769px / 1024px.
   Scope: body:not(.home).
   ═══════════════════════════════════════════════════════ */

/* 28a. Shared facts list (label above value), used by both */
body:not(.home) .seloxa-lab__facts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body:not(.home) .seloxa-lab__fact {
  min-width: 0 !important;
}
body:not(.home) .seloxa-lab__fact dt {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: #888888 !important;
  margin: 0 0 3px !important;
}
body:not(.home) .seloxa-lab__fact dd {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}

/* 28b. Buttons: "View full report" (solid) + "Verify with lab" (outline) */
body:not(.home) .seloxa-lab__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  border-radius: 8px !important;
  background: #1a1a1a !important;
  border: 1.5px solid #1a1a1a !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: opacity 0.2s ease !important;
}
body:not(.home) .seloxa-lab__btn:hover {
  opacity: 0.82 !important;
  color: #ffffff !important;
}
body:not(.home) .seloxa-lab__btn--ghost {
  background: #ffffff !important;
  color: #1a1a1a !important;
}
body:not(.home) .seloxa-lab__btn--ghost:hover {
  color: #1a1a1a !important;
}

/* 28c. Product page card — full width, below the buy box,
   above related products */
body.single-product .seloxa-lab {
  clear: both !important;
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 14px !important;
  padding: 22px 20px !important;
  margin: 8px 0 40px !important;
  box-sizing: border-box !important;
}
body.single-product .seloxa-lab__title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  letter-spacing: -0.3px !important;
  margin: 0 0 18px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
body.single-product .seloxa-lab__actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 22px !important;
}
@media (min-width: 600px) {
  body.single-product .seloxa-lab__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.single-product .seloxa-lab__actions {
    flex-direction: row !important;
  }
}
@media (min-width: 769px) {
  body.single-product .seloxa-lab {
    padding: 28px 32px !important;
  }
  body.single-product .seloxa-lab__facts {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* 28d. /lab-results/ page — wider than normal inner pages
   (Section 10 caps .entry-content at 780px) */
body.seloxa-lab-results-page .entry-content {
  max-width: 1200px !important;
}
body:not(.home) .seloxa-lab-page__intro {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #555555 !important;
  margin: 0 0 32px !important;
  max-width: 640px !important;
}
body:not(.home) .seloxa-lab-page__empty {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 14px !important;
  padding: 28px 24px !important;
  color: #555555 !important;
  text-align: center !important;
}
body:not(.home) .seloxa-lab-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 20px !important;
}
@media (min-width: 600px) {
  body:not(.home) .seloxa-lab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  body:not(.home) .seloxa-lab-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 28e. Grid tiles — same card look as the shop cards */
body:not(.home) .seloxa-lab-tile {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
body:not(.home) .seloxa-lab-tile__media {
  display: block !important;
  background: #f8f8f6 !important;
  padding: 16px !important;
}
body:not(.home) .seloxa-lab-tile__media img {
  display: block !important;
  width: 100% !important;
  height: 220px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}
body:not(.home) .seloxa-lab-tile__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  flex: 1 !important;
  padding: 18px 20px 20px !important;
}
body:not(.home) .entry-content .seloxa-lab-tile__name {
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
body:not(.home) .entry-content .seloxa-lab-tile__name a {
  color: #1a1a2e !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
body:not(.home) .seloxa-lab-tile .seloxa-lab__btn {
  margin-top: auto !important;
  width: 100% !important;
}


/* ═══════════════════════════════════════════════════════
   29. PRODUCT CARDS REDESIGN — shop, category, related
   products (ul.products li.product) + homepage collection
   cards (li.wc-block-product), and the header above the
   shop grid. Markup: inc/product-cards.php.
   Supersedes the older card rules in sections 8, 14 (grid
   columns), 23 (out-of-stock buttons) and 25 (homepage
   card spacing). Those rules still load; everything here
   comes later and wins.
   Card: image panel → meta row (category + lab badge) →
   name → price → lab line → full-width button.
   Mobile-first: 2 columns <600px, 3 columns 600–1023px,
   4 columns ≥1024px.
   ═══════════════════════════════════════════════════════ */

/* 29a. Grid columns */
ul.products {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
@media (min-width: 600px) {
  ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}
@media (min-width: 1024px) {
  ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

/* Phones: slimmer page gutters on shop + category pages (content
   area only — the nav's .col-full is untouched), so two cards fit
   comfortably at 375px. */
@media (max-width: 599px) {
  body.woocommerce-shop .site-content .col-full,
  body.tax-product_cat .site-content .col-full {
    margin-left: 14px !important;
    margin-right: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  ul.products li.product .button,
  .home .wc-block-product-template .wp-block-button__link {
    font-size: 11.5px !important;
    letter-spacing: 0.4px !important;
  }
}

/* 29b. The card */
ul.products li.product,
.home .wc-block-product-template li.wc-block-product {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 16px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
}
@media (min-width: 600px) {
  ul.products li.product,
  .home .wc-block-product-template li.wc-block-product {
    padding: 8px !important;
  }
}
/* Hover lift stays, but only on devices that can hover (never
   "sticks" after a tap on a phone). */
@media (hover: none) {
  ul.products li.product:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* 29c. Image panel — 4:5. The product photos are 2:3 with the vial
   centred (checked on all 53: content sits between y=123 and y=499
   of 624), so the photo FILLS the panel (cover) and only empty
   background is trimmed top and bottom. The photo's own white
   background is what shows; the panel is white behind it.
   RULE: product photos always display in true colour — never add
   blend modes, filters, overlays or tints to product images. */
ul.products li.product .seloxa-card__media,
.home .wc-block-product-template .wc-block-components-product-image {
  display: block !important;
  position: relative !important;
  background: #ffffff !important; /* hidden behind the photo */
  border: none !important;
  border-radius: 12px !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
.home .wc-block-product-template .wc-block-components-product-image > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
ul.products li.product .seloxa-card__media img,
.home .wc-block-product-template .wc-block-components-product-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  mix-blend-mode: normal !important; /* true colour, always */
  filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

/* 29d. Text area */
ul.products li.product .seloxa-card__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 12px 6px 6px !important;
}
.home .wc-block-product-template li.wc-block-product > .seloxa-card__meta,
.home .wc-block-product-template li.wc-block-product > .wp-block-post-title,
.home .wc-block-product-template li.wc-block-product > .wp-block-woocommerce-product-price,
.home .wc-block-product-template li.wc-block-product > .seloxa-card__lab {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.home .wc-block-product-template li.wc-block-product > .seloxa-card__meta {
  margin-top: 12px !important;
}
@media (min-width: 600px) {
  ul.products li.product .seloxa-card__body {
    padding: 14px 8px 8px !important;
  }
}

/* Meta row: category left, lab badge right (stacks on phones) */
.seloxa-card__meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin: 0 0 8px !important;
}
@media (min-width: 600px) {
  .seloxa-card__meta {
    min-height: 22px !important; /* badge height: titles line up across a row */
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}
.seloxa-card__cat {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  color: #767676 !important; /* 4.54:1 on white (was #8a8a8a, 3.45:1) */
  line-height: 1.4 !important;
}
a.seloxa-card__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #0A6175 !important;        /* Deep Ocean — 5.68:1 on Light Teal */
  background: #D3EBF0 !important;   /* brand Light Teal */
  border-radius: 999px !important;
  padding: 5px 9px 5px 7px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
a.seloxa-card__badge:hover {
  background: #CAE0E5 !important;  /* Soft Line */
  color: #074F5F !important;       /* 6.68:1 */
}
.seloxa-card__check {
  flex-shrink: 0 !important;
}

/* Name — bolder, more confident, left-aligned */
ul.products li.product .woocommerce-loop-product__title,
.home .wc-block-product-template .wp-block-post-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.2px !important;
  color: #1a1a2e !important;
  text-align: left !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}
ul.products li.product .woocommerce-loop-product__title a,
.home .wc-block-product-template .wp-block-post-title a {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
}
@media (min-width: 600px) {
  ul.products li.product .woocommerce-loop-product__title,
  .home .wc-block-product-template .wp-block-post-title {
    font-size: 16px !important;
  }
}

/* Price */
ul.products li.product .price,
.home .wc-block-product-template .wc-block-components-product-price {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
}
.home .wc-block-product-template .woocommerce-Price-amount {
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Lab line — "Avg. mass … · Purity …"; the two parts stack on phones */
.seloxa-card__lab {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #1A1A2E !important; /* Ink Navy */
  margin: 0 0 4px !important;
}
.seloxa-card__sep {
  display: none !important;
}
@media (min-width: 600px) {
  .seloxa-card__lab {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 6px !important;
    font-size: 12.5px !important;
  }
  .seloxa-card__sep {
    display: inline !important;
    color: #767676 !important; /* decorative, but kept AA anyway */
  }
}

/* 29e. Button — full width, pinned to the card bottom.
   In stock: solid Deep Ocean. Out of stock: quiet logo-red tint. */
ul.products li.product .button,
.home .wc-block-product-template .wp-block-button__link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 10px 0 0 !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  background: #0A6175 !important; /* Deep Ocean — white text 7.05:1 */
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
/* Spacer before the button soaks up spare height so every button
   lines up at the card bottom, while keeping at least 10px above it. */
ul.products li.product .seloxa-card__spacer {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 10px !important;
}
ul.products li.product .seloxa-card__body > .button {
  margin-top: 0 !important;
}
.home .wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-button {
  margin-top: auto !important;
  margin-bottom: 0 !important; /* block library adds ~20px here */
  padding: 10px 6px 6px !important; /* same inset as the shop cards */
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (min-width: 600px) {
  .home .wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-button {
    padding: 10px 8px 8px !important;
  }
  .home .wc-block-product-template li.wc-block-product > .seloxa-card__meta,
  .home .wc-block-product-template li.wc-block-product > .wp-block-post-title,
  .home .wc-block-product-template li.wc-block-product > .wp-block-woocommerce-product-price,
  .home .wc-block-product-template li.wc-block-product > .seloxa-card__lab {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
.home .wc-block-product-template li.wc-block-product .wp-block-button__link {
  margin: 0 !important; /* the wrapper's padding already spaces it */
}
.home .wc-block-product-template .wp-block-button__link span {
  color: inherit !important;
}
ul.products li.product .button:hover,
.home .wc-block-product-template .wp-block-button__link:hover {
  background: #074F5F !important; /* Deep Ocean, darker */
  color: #ffffff !important;
  opacity: 1 !important;
}
/* Out of stock: quiet red, from the logo red #FD4734.
   Background = 10% logo red on white. Text = the logo red with only
   its lightness lowered (same hue) until it passes WCAG AA:
   #D81602 on #FFEDEB = 4.60:1; hover #D11602 on #FFE3E1 = 4.53:1. */
ul.products li.product.outofstock .button,
.home .wc-block-product-template li.wc-block-product.outofstock .wp-block-button__link {
  background: #FFEDEB !important;
  color: #D81602 !important;
  border: none !important;
  opacity: 1 !important;
}
ul.products li.product.outofstock .button:hover,
.home .wc-block-product-template li.wc-block-product.outofstock .wp-block-button__link:hover {
  background: #FFE3E1 !important;
  color: #D11602 !important;
  opacity: 1 !important;
}
.home .wc-block-product-template li.wc-block-product.outofstock .wp-block-button__link span {
  color: inherit !important;
}
/* "View cart" link WooCommerce adds after an AJAX add-to-cart */
ul.products li.product a.added_to_cart {
  display: block !important;
  text-align: center !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #0A6175 !important;
  padding: 8px 0 0 !important;
}

/* 29f. Above the grid: heading, intro, category pills */
.seloxa-shop-head {
  margin: 0 0 20px !important;
}
.seloxa-shop-head__title {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  color: #1a1a2e !important;
  margin: 0 0 8px !important;
}
.seloxa-shop-head__intro {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #555555 !important;
  max-width: 640px !important;
  margin: 0 0 16px !important;
}
@media (min-width: 769px) {
  .seloxa-shop-head {
    margin-bottom: 28px !important;
  }
  .seloxa-shop-head__title {
    font-size: 34px !important;
  }
  .seloxa-shop-head__intro {
    font-size: 15.5px !important;
  }
}
.seloxa-cat-pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  margin: 0 -16px !important;
  padding: 2px 16px 4px !important;
}
.seloxa-cat-pills::-webkit-scrollbar {
  display: none !important;
}
.seloxa-cat-pills__pill {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  padding: 8px 14px !important;
  border: 1px solid #e2e2de !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #1a1a2e !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.seloxa-cat-pills__count {
  color: #8a8a8a !important;
  font-weight: 500 !important;
}
.seloxa-cat-pills__pill.is-current {
  background: #1a1a2e !important;
  border-color: #1a1a2e !important;
  color: #ffffff !important;
}
.seloxa-cat-pills__pill.is-current .seloxa-cat-pills__count {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 29g. Pagination — centred numbered pills under the grid
   (the top-right copy is removed in inc/product-cards.php) */
body:not(.home) .storefront-sorting .woocommerce-pagination {
  float: none !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 32px 0 8px !important;
  padding: 0 !important;
  border: none !important;
}
body:not(.home) .woocommerce-pagination ul.page-numbers {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
body:not(.home) .woocommerce-pagination ul.page-numbers li {
  border: none !important;
  margin: 0 !important;
  display: block !important;
}
body:not(.home) .woocommerce-pagination .page-numbers li .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 1px solid #e2e2de !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1a1a2e !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
body:not(.home) .woocommerce-pagination .page-numbers li .page-numbers.current {
  background: #1a1a2e !important;
  border-color: #1a1a2e !important;
  color: #ffffff !important;
}


/* ═══════════════════════════════════════════════════════
   30. BRAND PALETTE PASS — colours + states only
   (no layout, content or nav-structure changes).
   Palette from the product label:
     Frost      #E9F5F7  light fills (table heads, notices, open states)
     Frost Mist #F4FAFB  page background (Frost halfway to white)
     Deep Ocean #0A6175  primary actions, links, focus, active states
                #074F5F  Deep Ocean hover
     Light Teal #D3EBF0  pills, badges, rings on dark
     Soft Line  #CAE0E5  hairlines, dividers, card borders
     Ink Navy   #1A1A2E  headings, product names, footer
     Logo red   #FD4734  → text-safe #D81602 / #C41402 / #B51203
     Logo green #347358  → text-safe #2B6149
   Every text/background pair here meets WCAG AA (≥4.5:1).
   Compliance text (research-use notice, disclaimer band, checkout
   acknowledgment + its error, lab result card) is kept at least as
   readable as before — every one of them got MORE contrast.
   RULE 7: never blend, filter or tint product images.
   ═══════════════════════════════════════════════════════ */

:root {
  --seloxa-frost: #E9F5F7;
  --seloxa-mist: #F4FAFB;
  --seloxa-ocean: #0A6175;
  --seloxa-ocean-dark: #074F5F;
  --seloxa-teal: #D3EBF0;
  --seloxa-line: #CAE0E5;
  --seloxa-ink: #1A1A2E;
  --seloxa-night: #0D0E12;     /* near-black: disclaimer band only */
  --seloxa-red: #D81602;       /* logo red, AA on white/tints */
  --seloxa-red-strong: #C41402;
  --seloxa-red-link: #B51203;
  --seloxa-red-tint: #FFEDEB;
  --seloxa-green: #2B6149;     /* logo green, AA on its tint */
  --seloxa-green-tint: #E7F1EC;
}

/* 30a. Page background — Frost Mist (was warm grey #f2f2f0) */
body {
  background-color: var(--seloxa-mist) !important;
}

/* 30b. Text, headings, links (replaces WooCommerce's default purple) */
h1, h2, h3, h4, h5, h6 {
  color: var(--seloxa-ink);
}
a {
  color: var(--seloxa-ocean);
}
a:hover,
a:focus {
  color: var(--seloxa-ocean-dark);
}
.woocommerce-privacy-policy-link,
.lost_password a,
.woocommerce-LostPassword a,
.shipping-calculator-button,
.woocommerce-form-login-toggle a,
.woocommerce-form-coupon-toggle a,
.showcoupon,
.showlogin,
.single-product .product_meta a {
  color: var(--seloxa-ocean) !important;
}

/* 30c. Focus: Deep Ocean outline everywhere (was purple #7f54b3) */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.button:focus,
.button.alt:focus,
.select2-container--focus .select2-selection {
  outline-color: var(--seloxa-ocean) !important;
}
body:not(.home) .wpforms-container input:focus,
body:not(.home) .wpforms-container textarea:focus,
body:not(.home) .wpforms-container select:focus {
  border-color: var(--seloxa-ocean) !important;
  box-shadow: 0 0 0 1px var(--seloxa-ocean) !important;
}
/* Footer signup field sits on a dark band: Light Teal ring */
.seloxa-footer__signup .wpforms-container input:focus {
  border-color: var(--seloxa-teal) !important;
  box-shadow: 0 0 0 1px var(--seloxa-teal) !important;
}
/* Native checkboxes/radios (research-use + terms + remember me): tick colour only */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--seloxa-ocean);
}
/* Required-field asterisks (was #e2401c / #d63637, below AA) */
.required,
abbr.required,
.woocommerce form .form-row .required,
.wpforms-container .wpforms-required-label {
  color: var(--seloxa-red-strong) !important;
  text-decoration: none !important;
}
/* Invalid / valid field markers on checkout + account */
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-container .select2-selection {
  box-shadow: inset 2px 0 0 var(--seloxa-red) !important;
}
.woocommerce form .form-row.woocommerce-validated .input-text,
.woocommerce form .form-row.woocommerce-validated select {
  box-shadow: inset 2px 0 0 var(--seloxa-green) !important;
}

/* 30d. Buttons — primary = Deep Ocean, secondary = Deep Ocean outline */
#place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.single-product div.product form.cart .single_add_to_cart_button.button,
.woocommerce form.login .woocommerce-form-login__submit,
.woocommerce form.register .woocommerce-form-register__submit,
.woocommerce .return-to-shop a.button,
.woocommerce .woocommerce-message a.button,
.widget_shopping_cart .buttons a.button,
.woocommerce-mini-cart__buttons a.button,
.woocommerce-product-search button[type="submit"],
.seloxa-nav-search__panel button[type="submit"],
body:not(.home) .entry-content .wpforms-container .wpforms-submit,
body:not(.home) .seloxa-lab__btn:not(.seloxa-lab__btn--ghost) {
  background: var(--seloxa-ocean) !important;
  background-color: var(--seloxa-ocean) !important;
  border-color: var(--seloxa-ocean) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
#place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.single-product div.product form.cart .single_add_to_cart_button.button:hover,
.woocommerce form.login .woocommerce-form-login__submit:hover,
.woocommerce form.register .woocommerce-form-register__submit:hover,
.woocommerce .return-to-shop a.button:hover,
.woocommerce .woocommerce-message a.button:hover,
.widget_shopping_cart .buttons a.button:hover,
.woocommerce-mini-cart__buttons a.button:hover,
.woocommerce-product-search button[type="submit"]:hover,
.seloxa-nav-search__panel button[type="submit"]:hover,
body:not(.home) .entry-content .wpforms-container .wpforms-submit:hover,
body:not(.home) .seloxa-lab__btn:not(.seloxa-lab__btn--ghost):hover {
  background: var(--seloxa-ocean-dark) !important;
  background-color: var(--seloxa-ocean-dark) !important;
  border-color: var(--seloxa-ocean-dark) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
/* Secondary: Update cart, Apply coupon, Update (shipping), Verify with lab */
.woocommerce-cart button[name="update_cart"],
.woocommerce button[name="apply_coupon"],
.woocommerce-shipping-calculator button[name="calc_shipping"],
body:not(.home) .seloxa-lab__btn--ghost {
  background: #ffffff !important;
  color: var(--seloxa-ocean) !important;
  border: 1.5px solid var(--seloxa-ocean) !important;
  opacity: 1 !important;
}
.woocommerce-cart button[name="update_cart"]:hover:not(:disabled),
.woocommerce button[name="apply_coupon"]:hover,
.woocommerce-shipping-calculator button[name="calc_shipping"]:hover,
body:not(.home) .seloxa-lab__btn--ghost:hover {
  background: var(--seloxa-frost) !important;
  color: var(--seloxa-ocean) !important;
}
.woocommerce-cart button[name="update_cart"]:disabled {
  opacity: 0.55 !important;
}
/* "View cart" link WooCommerce adds after an AJAX add-to-cart (Storefront paints it dark grey) */
ul.products li.product a.added_to_cart,
a.added_to_cart {
  background: transparent !important;
  color: var(--seloxa-ocean) !important;
  border: none !important;
}

/* 30e. WooCommerce notices (info/success were blue/green, error red — all below AA) */
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
p.no-comments {
  background: var(--seloxa-frost) !important;
  color: var(--seloxa-ink) !important;
  border-left: 4px solid var(--seloxa-ocean) !important;
}
.woocommerce-info::before,
.woocommerce-message::before {
  color: var(--seloxa-ocean) !important;
}
.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button) {
  color: var(--seloxa-ocean) !important;
  text-decoration: underline !important;
}
/* Error (includes the research-use checkbox message): still unmistakably
   an error (red bar + red tint), now 15:1 readable instead of 4.2:1 */
.woocommerce-error,
.woocommerce-NoticeGroup-checkout .woocommerce-error {
  background: var(--seloxa-red-tint) !important;
  color: var(--seloxa-ink) !important;
  border-left: 4px solid var(--seloxa-red) !important;
}
.woocommerce-error li,
.woocommerce-error strong {
  color: var(--seloxa-ink) !important;
}
.woocommerce-error::before {
  color: var(--seloxa-red) !important;
}
.woocommerce-error a {
  color: var(--seloxa-red-link) !important;
  text-decoration: underline !important;
}

/* 30f. Header / nav — colours and hover states only */
.storefront-primary-navigation {
  border-bottom-color: var(--seloxa-line) !important;
}
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a,
.handheld-navigation ul.menu li a,
.site-header-cart .cart-contents {
  color: var(--seloxa-ink) !important;
}
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li > a:focus,
.main-navigation ul.nav-menu > li > a:hover,
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current_page_item > a,
.main-navigation ul.menu > li.current-menu-parent > a,
.handheld-navigation ul.menu li a:hover,
.handheld-navigation ul.menu li.current-menu-item > a,
.site-header-cart .cart-contents:hover {
  color: var(--seloxa-ocean) !important;
}
.main-navigation ul.menu ul.sub-menu {
  border-color: var(--seloxa-line) !important;
}
.main-navigation ul.menu ul.sub-menu li a {
  color: var(--seloxa-ink) !important;
  border-bottom-color: var(--seloxa-line) !important;
}
.main-navigation ul.menu ul.sub-menu li a:hover,
.main-navigation ul.menu ul.sub-menu li a:focus {
  background: var(--seloxa-frost) !important;
  color: var(--seloxa-ocean) !important;
}
.seloxa-nav-search summary {
  color: var(--seloxa-ink) !important;
}
.seloxa-nav-search summary:hover {
  background: var(--seloxa-frost) !important;
  color: var(--seloxa-ocean) !important;
}
.seloxa-nav-search__panel {
  border-color: var(--seloxa-line) !important;
}
.storefront-handheld-footer-bar ul li.cart .count {
  background-color: var(--seloxa-ocean) !important;
  color: #ffffff !important;
}

/* 30g. Disclaimer band (compliance) — near-black; footer — Ink Navy
   Disclaimer text #9aa0a8 → #B4BAC3: 6.86 → 8.73:1 on Ink Navy,
   9.88:1 on near-black #0D0E12 (bold "Disclaimer:" white, 19.29:1). */
.seloxa-disclaimer {
  background: var(--seloxa-night) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.seloxa-disclaimer .seloxa-disclaimer__inner {
  color: #B4BAC3 !important;
}
.seloxa-disclaimer .seloxa-disclaimer__inner strong {
  color: #ffffff !important;
}
.site-footer {
  background: var(--seloxa-ink) !important;
}
/* Footer text colours, hover and focus: section 20. */

/* 30h. Shared hairlines → Soft Line */
ul.products li.product,
.home .wc-block-product-template li.wc-block-product,
body:not(.home) .seloxa-lab-tile,
body.single-product .seloxa-lab,
.seloxa-cat-pills__pill,
body:not(.home) .woocommerce-pagination .page-numbers li .page-numbers,
body.single-product div.product .woocommerce-product-gallery,
.seloxa-pd-acc {
  border-color: var(--seloxa-line) !important;
}
body.single-product .seloxa-lab__title,
.seloxa-pd-acc[open] summary,
.single-product .product_meta,
.single-product .woocommerce-product-details__short-description {
  border-color: var(--seloxa-line) !important;
}

/* 30i. Active states: pills + pagination → Deep Ocean */
.seloxa-cat-pills__pill.is-current,
body:not(.home) .woocommerce-pagination .page-numbers li .page-numbers.current {
  background: var(--seloxa-ocean) !important;
  border-color: var(--seloxa-ocean) !important;
  color: #ffffff !important;
}
.seloxa-cat-pills__count {
  color: #5F7479 !important;             /* 4.93:1 (was #8a8a8a, 3.45) */
}
.seloxa-cat-pills__pill.is-current .seloxa-cat-pills__count {
  color: var(--seloxa-teal) !important;  /* 5.68:1 on Deep Ocean */
}
body:not(.home) .woocommerce-pagination .page-numbers li a.page-numbers:hover {
  background: var(--seloxa-frost) !important;
  color: var(--seloxa-ocean) !important;
}

/* 30j. Homepage */
.home .wp-block-cover:not(.has-parallax) .wp-block-button__link {
  color: var(--seloxa-ink) !important;
}
.home .wp-block-cover:not(.has-parallax) .wp-block-button__link:hover {
  background: var(--seloxa-frost) !important;
  color: var(--seloxa-ink) !important;
}
.home .seloxa-faq .seloxa-faq__item summary::after {
  color: var(--seloxa-teal) !important;
}
.home .seloxa-faq .seloxa-faq__item[open] {
  border-color: rgba(211, 235, 240, 0.35) !important;
}

/* 30k. Single product */
.single-product h1.product_title,
body.single-product div.product p.price,
body.single-product div.product span.price {
  color: var(--seloxa-ink) !important;
}
body.single-product p.stock.in-stock {
  color: var(--seloxa-green) !important;        /* 6.25:1 */
  background: var(--seloxa-green-tint) !important;
}
body.single-product p.stock.out-of-stock {
  color: var(--seloxa-red) !important;          /* 4.60:1 — same red as the cards */
  background: var(--seloxa-red-tint) !important;
}
/* Research-use notice (compliance): Frost + Deep Ocean edge, 9.03 → 9.37:1.
   The edge is an inset shadow, so the box keeps its exact size. */
.seloxa-pd-notice {
  background: var(--seloxa-frost) !important;
  border-color: var(--seloxa-line) !important;
  box-shadow: inset 3px 0 0 var(--seloxa-ocean) !important;
  color: #0a4653 !important;
}
.seloxa-pd-secure,
.single-product .product_meta,
.single-product .product_meta .sku_wrapper,
.single-product .product_meta .posted_in {
  color: #555555 !important;                    /* was #888 (3.16:1) */
}
.seloxa-pd-acc[open] summary {
  background: var(--seloxa-frost) !important;
}
/* Lab result card (compliance): labels #888 (3.54) → Deep Ocean (7.05) */
body:not(.home) .seloxa-lab__fact dt {
  color: var(--seloxa-ocean) !important;
}

/* 30l. /lab-results/ tiles: photo fills the panel like the shop cards
   (1:1 keeps every vial whole — content sits y=123–499 of 624, a square
   crop keeps y=104–520). True colour, white panel, no blend. */
body:not(.home) .seloxa-lab-tile__media {
  background: #ffffff !important;
  padding: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
body:not(.home) .seloxa-lab-tile__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* 30m. Cart + checkout tables, payment box */
.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th,
.woocommerce-account table.shop_table th {
  background-color: var(--seloxa-frost) !important;
  color: var(--seloxa-ink) !important;
}
.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table td,
.woocommerce-cart table.shop_table tbody tr:nth-child(2n) td,
.woocommerce-checkout table.shop_table tbody tr:nth-child(2n) td {
  background-color: #ffffff !important;
}
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  box-shadow: inset 0 -1px 0 var(--seloxa-line) !important; /* hairline without changing row height */
}
.woocommerce a.remove,
a.remove {
  color: #767676 !important;
  background: transparent !important;
}
.woocommerce a.remove:hover,
a.remove:hover {
  color: var(--seloxa-red) !important;
  background: transparent !important;
}
#payment .payment_methods > li,
#payment .payment_methods > .wc_payment_method {
  background-color: var(--seloxa-frost) !important;
}
#payment .payment_box {
  background-color: #ffffff !important;
}
#payment .payment_box::before {
  border-bottom-color: #ffffff !important;
}


/* ═══════════════════════════════════════════════════════
   31. SINGLE PRODUCT PAGE — premium pass (supersedes the
   layout/spacing parts of sections 9 and 22; colours come
   from the section 30 palette). Mobile-first.
   Summary order (inc/product-page-layout.php): category
   label, title, lab line, price + stock row, short
   description, buy card (cart form, research notice, trust
   line), SKU/category, detail pills.
   COMPLIANCE: the research notice (.seloxa-pd-notice), the
   lab line (.seloxa-pd-lab) and the lab card (.seloxa-lab)
   are never hidden, animated or made less readable.
   RULE 7: the gallery photo is never blended, filtered or
   tinted — it only covers its panel, like the shop cards.
   ═══════════════════════════════════════════════════════ */

/* 31a. Gallery — photo covers the panel (square on mobile, 4:5 from
   769px). Every product photo is 2:3 with the vial between y=123 and
   y=499 of 624; a square crop keeps y=104–520, so no vial is trimmed. */
body.single-product div.product .woocommerce-product-gallery {
  background: #ffffff !important;
  padding: 0 !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
}
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image a {
  display: block !important;
  margin: 0 !important;
}
body.single-product .woocommerce-product-gallery__image img.wp-post-image,
body.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
body.single-product .woocommerce-product-gallery__trigger {
  top: 14px !important;
  right: 14px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid var(--seloxa-line) !important;
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
  border-radius: 8px !important;
  border: 1px solid var(--seloxa-line) !important;
}

/* 31b. Category label + title */
body.single-product .summary .seloxa-pd-cat {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #5F7479 !important;            /* 4.67:1 on Mist */
  line-height: 1.4 !important;
  margin: 0 0 8px !important;
}
body.single-product div.product .summary h1.product_title {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px !important;
  line-height: 1.15 !important;
  color: var(--seloxa-ink) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

/* 31c. Lab line — "[Lab] tested · Purity 99.21%" ↓ (links to the card).
   Deep Ocean on Light Teal = 5.68:1. Never animated. */
body.single-product .summary a.seloxa-pd-lab {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--seloxa-ocean) !important;
  background: var(--seloxa-teal) !important;
  border-radius: 999px !important;
  padding: 6px 12px 6px 9px !important;
  margin: 0 0 14px !important;
  text-decoration: none !important;
}
body.single-product .summary a.seloxa-pd-lab:hover {
  color: #ffffff !important;
  background: var(--seloxa-ocean) !important;
}
body.single-product .seloxa-pd-lab svg {
  flex-shrink: 0 !important;
}
body.single-product .seloxa-pd-lab__sep {
  opacity: 0.7 !important;
}

/* 31d. Price + stock pill on one row */
body.single-product .summary .seloxa-pd-pricerow {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
  margin: 2px 0 16px !important;
}
body.single-product div.product .summary .seloxa-pd-pricerow p.price {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
  line-height: 1.1 !important;
  color: var(--seloxa-ink) !important;
  margin: 0 !important;
}
body.single-product .summary .seloxa-pd-pricerow p.stock {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}
body.single-product .summary .seloxa-pd-pricerow p.stock::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  font-family: inherit !important;    /* Storefront puts a Font Awesome glyph here */
  margin: 0 !important;
}

/* 31e. Short description */
body.single-product div.product .summary .woocommerce-product-details__short-description {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #444444 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
}
body.single-product .woocommerce-product-details__short-description > :last-child {
  margin-bottom: 0 !important;
}

/* 31f. Buy card — cart row, research notice, trust line */
body.single-product .summary .seloxa-pd-buy {
  background: #ffffff !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin: 0 0 18px !important;
  box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 8px 24px rgba(10, 97, 117, 0.06) !important;
}
body.single-product .seloxa-pd-buy form.cart {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
/* Storefront's clearfix ::before/::after would become empty flex items
   (each taking a 10px gap), insetting the qty box and the button. */
body.single-product .seloxa-pd-buy form.cart::before,
body.single-product .seloxa-pd-buy form.cart::after {
  display: none !important;
}
body.single-product .seloxa-pd-buy form.cart .quantity .qty {
  width: 64px !important;
  height: 52px !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 10px !important;
  font-size: 16px !important;             /* 16px: no iOS zoom on focus */
  font-weight: 600 !important;
  color: var(--seloxa-ink) !important;
  background: var(--seloxa-mist) !important;
}
body.single-product .seloxa-pd-buy form.cart .single_add_to_cart_button.button {
  flex: 1 !important;
  height: 52px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  padding: 0 20px !important;
}
/* Research-use notice (compliance) — full size, same Frost + Ocean edge
   as section 30k (9.37:1). Kept visible directly under the button. */
body.single-product .seloxa-pd-buy .seloxa-pd-notice {
  margin: 0 !important;
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  border-radius: 10px !important;
}
body.single-product .seloxa-pd-buy .seloxa-pd-secure {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 12px 0 0 !important;
  font-size: 12.5px !important;
  color: #555555 !important;              /* 7.46:1 on white */
  text-align: center !important;
}
/* Out of stock: no cart form, so the notice leads the card */
body.single-product .seloxa-pd-buy > .seloxa-pd-notice:first-child {
  margin-top: 0 !important;
}

/* 31g. SKU / category — one quiet line */
body.single-product div.product .summary .product_meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 18px !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
}
body.single-product .summary .product_meta > span {
  display: inline !important;
}

/* 31h. Detail pills — one grouped card, dividers between rows.
   Content is untouched (built by inc/product-accordions.php). Never animated. */
body.single-product .woocommerce-tabs {
  margin: 0 !important;
  padding: 0 !important;
}
body.single-product .woocommerce-Tabs-panel--description {
  background: #ffffff !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
/* Before the pills are built (or with JS off): readable padded card */
body.single-product .woocommerce-Tabs-panel--description:not(:has(> .seloxa-pd-acc)) {
  padding: 4px 20px 18px !important;
}
body.single-product .woocommerce-Tabs-panel--description .seloxa-pd-acc {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
body.single-product .woocommerce-Tabs-panel--description .seloxa-pd-acc + .seloxa-pd-acc {
  border-top: 1px solid var(--seloxa-line) !important;
}
body.single-product .seloxa-pd-acc summary {
  min-height: 56px !important;
  box-sizing: border-box !important;
  padding: 16px 20px !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: var(--seloxa-ink) !important;
  background: transparent !important;
  border: 0 !important;
  transition: background-color 0.15s ease !important;
}
body.single-product .seloxa-pd-acc summary:hover {
  background: var(--seloxa-mist) !important;
}
body.single-product .seloxa-pd-acc summary:focus-visible {
  outline: 2px solid var(--seloxa-ocean) !important;
  outline-offset: -2px !important;
}
/* Chevron (replaces +/−) */
body.single-product .seloxa-pd-acc summary::after {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid var(--seloxa-ocean) !important;
  border-bottom: 2px solid var(--seloxa-ocean) !important;
  transform: translateY(-2px) rotate(45deg) !important;
  margin: 0 4px 0 16px !important;
  transition: transform 0.2s ease !important;
}
body.single-product .seloxa-pd-acc[open] summary::after {
  content: "" !important;
  transform: translateY(2px) rotate(-135deg) !important;
}
body.single-product .seloxa-pd-acc[open] {
  box-shadow: inset 3px 0 0 var(--seloxa-ocean) !important;
}
body.single-product .seloxa-pd-acc[open] summary {
  background: transparent !important;
  color: var(--seloxa-ocean) !important;   /* 7.05:1 on white */
  border: 0 !important;
}
body.single-product .seloxa-pd-acc__body {
  padding: 0 20px 20px !important;
}
body.single-product .seloxa-pd-acc__body p,
body.single-product .seloxa-pd-acc__body .brxe-text-basic,
body.single-product .seloxa-pd-acc__body div {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #3d4447 !important;               /* 9.9:1 on white */
  margin: 0 0 12px !important;
}
body.single-product .seloxa-pd-acc__body > :last-child,
body.single-product .seloxa-pd-acc__body div:last-child {
  margin-bottom: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  body.single-product .seloxa-pd-acc summary,
  body.single-product .seloxa-pd-acc summary::after {
    transition: none !important;
  }
}

/* 31i. Lab result card — tighter spacing, target of the lab line.
   Content and contrast unchanged (compliance). */
body.single-product .seloxa-lab {
  border-radius: 16px !important;
  margin: 32px 0 0 !important;
  scroll-margin-top: 24px !important;
}
body.single-product .seloxa-lab__title {
  scroll-margin-top: 24px !important;
}

/* 31j. Related products — left-aligned heading, like the shop header */
body.single-product section.related.products {
  margin-top: 48px !important;
  padding-top: 0 !important;
}
body.single-product .related.products > h2 {
  text-align: left !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  color: var(--seloxa-ink) !important;
  margin: 0 0 18px !important;
}

/* 31k. Mobile (≤768px) — tighter stack, less dead space */
@media (max-width: 768px) {
  body.single-product div.product .woocommerce-product-gallery {
    margin: 0 0 20px !important;
  }
  body.single-product .site-main {
    margin-bottom: 32px !important;
  }
}

/* 31l. Desktop (≥769px) — 4:5 photo, sticky gallery, wider buy column */
@media (min-width: 769px) {
  body.single-product .seloxa-pd-top {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    column-gap: 56px !important;
    row-gap: 0 !important;
  }
  /* Sticky is bounded by .seloxa-pd-top (gallery + summary only): it stops
     where the two columns end, and when the summary is shorter than the
     gallery the wrapper is exactly the gallery's height, so it can't move. */
  body.single-product div.product .seloxa-pd-top > .woocommerce-product-gallery {   /* beats 31a's position: relative */
    position: sticky !important;
    top: 24px !important;
    align-self: start !important;
  }
  body.single-product .woocommerce-product-gallery__image img.wp-post-image,
  body.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a > img {
    aspect-ratio: 4 / 5 !important;
  }
  body.single-product .seloxa-pd-top > .summary.entry-summary {
    padding-top: 8px !important;
  }
  body.single-product div.product .summary h1.product_title {
    font-size: 36px !important;
    letter-spacing: -0.8px !important;
  }
  body.single-product div.product .summary .seloxa-pd-pricerow p.price {
    font-size: 30px !important;
  }
  body.single-product .summary .seloxa-pd-buy {
    padding: 20px !important;
  }
  body.single-product .seloxa-lab {
    margin-top: 56px !important;
  }
  body.single-product section.related.products {
    margin-top: 64px !important;
  }
  body.single-product .related.products > h2 {
    font-size: 30px !important;
    margin-bottom: 24px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   32. CART PAGE — premium pass (classic [woocommerce_cart];
   markup unchanged except the hooks in inc/cart-layout.php).
   Mobile-first. Items become cards (CSS grid on the existing
   table rows); the totals become an "Order summary" card,
   right-hand and sticky from 1024px. Checkout is NOT styled
   here: every rule is scoped to body.woocommerce-cart, except
   32k (the header mini-cart, a global header component).
   COMPLIANCE: .seloxa-cart-note (research-use line) is never
   hidden or animated (the cart has no motion at all).
   RULE 7: thumbnails are true colour — cover only, no blend,
   filter or tint.
   ═══════════════════════════════════════════════════════ */

/* 32a. Page grid: items left, summary right (≥1024px). Only when the
   cart has items — the empty state keeps its own single column. */
body.woocommerce-cart .entry-content > .woocommerce {
  max-width: 1200px !important;
  margin: 0 auto !important;
}
@media (max-width: 768px) {
  body.woocommerce-cart .entry-content {
    padding-top: 20px !important;
    padding-bottom: 32px !important;
  }
}
@media (min-width: 769px) {
  body.woocommerce-cart .entry-content {
    padding-bottom: 72px !important;
  }
}
@media (min-width: 1024px) {
  body.woocommerce-cart .entry-content > .woocommerce:has(> form.woocommerce-cart-form) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px !important;
    column-gap: 40px !important;
    align-items: start !important;
  }
  body.woocommerce-cart .entry-content > .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1 !important;
  }
  body.woocommerce-cart .entry-content > .woocommerce > form.woocommerce-cart-form {
    grid-column: 1 !important;
  }
  body.woocommerce-cart .entry-content > .woocommerce > .cart-collaterals {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    position: sticky !important;
    top: 24px !important;
    margin-top: 58px !important;   /* lines the card up with the first item */
  }
}
/* No sticky on short screens: the card must never be cut off */
@media (min-width: 1024px) and (max-height: 760px) {
  body.woocommerce-cart .entry-content > .woocommerce > .cart-collaterals {
    position: static !important;
  }
}

/* 32b. Heading: "Your cart · N items" + Continue shopping */
body.woocommerce-cart .seloxa-cart-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 6px 16px !important;
  margin: 0 0 18px !important;
}
body.woocommerce-cart .entry-content h1.seloxa-cart-head__title {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px !important;
  line-height: 1.15 !important;
  color: var(--seloxa-ink) !important;
  margin: 0 !important;
}
body.woocommerce-cart .seloxa-cart-head__count {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: #5F7479 !important;                /* 4.67:1 on Mist */
  margin-left: 6px !important;
}
body.woocommerce-cart a.seloxa-cart-head__back {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--seloxa-ocean) !important;    /* 6.68:1 on Mist */
  text-decoration: none !important;
}
body.woocommerce-cart a.seloxa-cart-head__back:hover {
  text-decoration: underline !important;
}
@media (min-width: 769px) {
  body.woocommerce-cart .entry-content h1.seloxa-cart-head__title {
    font-size: 34px !important;
  }
}

/* 32c. Items: the table becomes one white card; each row a grid.
   The header row is visually hidden (still read by screen readers). */
body.woocommerce-cart form.woocommerce-cart-form {
  margin: 0 0 24px !important;
}
body.woocommerce-cart table.shop_table.cart {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  border-collapse: separate !important;
}
body.woocommerce-cart table.shop_table.cart thead {
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
body.woocommerce-cart table.shop_table.cart tbody {
  display: block !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "thumb name remove"
    "thumb price price"
    "qty qty subtotal" !important;
  column-gap: 14px !important;
  row-gap: 4px !important;
  align-items: center !important;
  padding: 16px !important;
  border-bottom: 1px solid var(--seloxa-line) !important;
  background: #ffffff !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  min-width: 0 !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td::before,
body.woocommerce-cart table.shop_table.cart tr.cart_item td::after {
  display: none !important;
  content: none !important;
}
body.woocommerce-cart tr.cart_item td.product-thumbnail { grid-area: thumb !important; align-self: start !important; }
body.woocommerce-cart tr.cart_item td.product-name      { grid-area: name !important; }
body.woocommerce-cart tr.cart_item td.product-price     { grid-area: price !important; }
body.woocommerce-cart tr.cart_item td.product-quantity  { grid-area: qty !important; margin-top: 10px !important; }
body.woocommerce-cart tr.cart_item td.product-subtotal  { grid-area: subtotal !important; margin-top: 10px !important; text-align: right !important; }
body.woocommerce-cart tr.cart_item td.product-remove    { grid-area: remove !important; align-self: start !important; text-align: right !important; }

/* Thumbnail: white panel, photo covers it (square crop keeps the whole vial) */
body.woocommerce-cart tr.cart_item td.product-thumbnail a {
  display: block !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* Name + unit price */
body.woocommerce-cart tr.cart_item td.product-name a {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--seloxa-ink) !important;
  text-decoration: none !important;
}
body.woocommerce-cart tr.cart_item td.product-name a:hover {
  color: var(--seloxa-ocean) !important;
  text-decoration: underline !important;
}
body.woocommerce-cart tr.cart_item td.product-name dl.variation,
body.woocommerce-cart tr.cart_item td.product-name .backorder_notification {
  font-size: 13px !important;
  margin: 4px 0 0 !important;
}
body.woocommerce-cart tr.cart_item td.product-price {
  font-size: 13.5px !important;
  color: #555555 !important;                /* 7.46:1 on white */
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price::after {
  content: " each" !important;
  display: inline !important;
}
body.woocommerce-cart tr.cart_item td.product-subtotal {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--seloxa-ink) !important;
}

/* Remove: × becomes a small bin icon + "Remove" (aria-label unchanged) */
body.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  height: auto !important;
  padding: 2px 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  color: #555555 !important;                /* 7.46:1 on white */
  background: transparent !important;
  border-radius: 4px !important;
  text-decoration: none !important;
}
body.woocommerce-cart table.shop_table.cart td.product-remove a.remove::before {
  content: "" !important;
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 4h11M6 4V2.5h4V4M4 4l.7 9.5h6.6L12 4M6.8 6.5v4.5M9.2 6.5v4.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%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 16 16'%3E%3Cpath d='M2.5 4h11M6 4V2.5h4V4M4 4l.7 9.5h6.6L12 4M6.8 6.5v4.5M9.2 6.5v4.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  font-family: inherit !important;          /* Storefront puts a Font Awesome glyph here */
  position: static !important;              /* ...absolutely positioned over the text */
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
body.woocommerce-cart table.shop_table.cart td.product-remove a.remove::after {
  content: "Remove" !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
body.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover {
  color: var(--seloxa-red-link) !important;  /* 6.88:1 on white */
  background: transparent !important;
}
body.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover::after {
  text-decoration: underline !important;
}

/* 32d. Quantity stepper (buttons added by seloxa-cart.js; without JS the
   plain number box shows on its own) */
body.woocommerce-cart tr.cart_item .quantity {
  display: inline-flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  float: none !important;
}
body.woocommerce-cart tr.cart_item .quantity input.qty {
  width: 56px !important;
  height: 40px !important;
  padding: 0 4px !important;
  margin: 0 !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: var(--seloxa-ink) !important;
  font-size: 16px !important;               /* 16px: no iOS zoom on focus */
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: none !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
body.woocommerce-cart .seloxa-qty input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .seloxa-qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
body.woocommerce-cart .seloxa-qty {
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 999px !important;
  background: var(--seloxa-mist) !important;
  overflow: hidden !important;
}
body.woocommerce-cart .seloxa-qty input.qty {
  width: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body.woocommerce-cart .seloxa-qty .seloxa-qty__btn {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--seloxa-ocean) !important;    /* 6.68:1 on Mist */
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
body.woocommerce-cart .seloxa-qty .seloxa-qty__btn:hover:not(:disabled) {
  background: var(--seloxa-teal) !important;
}
body.woocommerce-cart .seloxa-qty .seloxa-qty__btn:disabled {
  color: #767676 !important;                /* disabled control, not text */
  cursor: default !important;
  opacity: 0.6 !important;
}
body.woocommerce-cart .seloxa-qty .seloxa-qty__btn:focus-visible,
body.woocommerce-cart .seloxa-qty input.qty:focus-visible {
  outline: 2px solid var(--seloxa-ocean) !important;
  outline-offset: -2px !important;
}

/* 32e. Actions row: coupon as one unit; Update cart hidden only when
   seloxa-cart.js runs (it updates automatically). No JS = button shows. */
body.woocommerce-cart table.shop_table.cart tr:not(.cart_item) {
  display: block !important;
}
body.woocommerce-cart table.shop_table.cart td.actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px !important;
  background: var(--seloxa-mist) !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Storefront's clearfix ::before/::after would be empty flex items (extra gap) */
body.woocommerce-cart table.shop_table.cart td.actions::before,
body.woocommerce-cart table.shop_table.cart td.actions::after {
  display: none !important;
  content: none !important;
}
/* The unit is a 2-row grid: field + button on row 1, WooCommerce's coupon
   error (WC 11 prints it INSIDE .coupon) on row 2, full width under the
   unit. The rounded box is drawn by ::before on row 1 only, so the error
   sits outside it and never squeezes the field or the button. */
body.woocommerce-cart td.actions .coupon {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  row-gap: 6px !important;
  flex: 1 1 260px !important;
  max-width: 420px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
body.woocommerce-cart td.actions .coupon::before {
  content: "" !important;
  display: block !important;
  grid-area: 1 / 1 / 2 / 3 !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
}
body.woocommerce-cart td.actions .coupon:focus-within::before {
  border-color: var(--seloxa-ocean) !important;
  box-shadow: 0 0 0 1px var(--seloxa-ocean) !important;
}
body.woocommerce-cart td.actions .coupon:has(input.has-error):not(:focus-within)::before {
  border-color: var(--seloxa-red-link) !important;
}
body.woocommerce-cart td.actions .coupon input#coupon_code {
  grid-area: 1 / 1 !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 16px !important;
  color: var(--seloxa-ink) !important;
  outline: none !important;
}
body.woocommerce-cart td.actions .coupon input#coupon_code::placeholder {
  color: #5F7479 !important;                /* 4.93:1 on white */
}
body.woocommerce-cart td.actions .coupon button[name="apply_coupon"] {
  grid-area: 1 / 2 !important;
  position: relative !important;
  z-index: 1 !important;
  width: auto !important;
  height: 42px !important;                  /* inside the 1px box border */
  margin: 1px 1px 1px 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-left: 1px solid var(--seloxa-line) !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--seloxa-frost) !important;
  color: var(--seloxa-ocean) !important;    /* 6.33:1 on Frost */
  font-size: 13.5px !important;
  font-weight: 700 !important;
}
body.woocommerce-cart td.actions .coupon button[name="apply_coupon"]:hover {
  background: var(--seloxa-teal) !important;
}
body.woocommerce-cart td.actions .coupon .coupon-error-notice {
  grid-area: 2 / 1 / 3 / 3 !important;
  margin: 0 !important;
  padding: 0 16px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  color: var(--seloxa-red-link) !important; /* ≥6.3:1 on Mist */
}
body.woocommerce-cart td.actions button[name="update_cart"] {
  height: 44px !important;
  margin: 0 !important;
  float: none !important;
  border-radius: 999px !important;
  padding: 0 20px !important;
}
html.seloxa-cart-js body.woocommerce-cart td.actions button[name="update_cart"] {
  display: none !important;
}

/* 32f. Order summary card */
body.woocommerce-cart .cart-collaterals {
  width: 100% !important;
  float: none !important;
}
body.woocommerce-cart .cart-collaterals .cart_totals {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 8px 24px rgba(10, 97, 117, 0.06) !important;
}
body.woocommerce-cart .entry-content .cart_totals h2 {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.2 !important;
  color: var(--seloxa-ink) !important;
  margin: 0 0 8px !important;
}
body.woocommerce-cart .cart_totals table.shop_table {
  display: block !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  border: 0 !important;
  background: transparent !important;
}
body.woocommerce-cart .cart_totals table.shop_table tbody {
  display: block !important;
}
body.woocommerce-cart .cart_totals table.shop_table tr {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 4px 12px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--seloxa-line) !important;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: var(--seloxa-ink) !important;
  text-align: right !important;
}
body.woocommerce-cart .cart_totals table.shop_table th {
  font-weight: 600 !important;
  color: #444444 !important;                /* 9.74:1 on white */
  text-align: left !important;
}
body.woocommerce-cart .cart_totals table.shop_table td::before {
  display: none !important;
  content: none !important;
}
/* Shipping row: label on top, options full width below */
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td {
  flex: 1 1 100% !important;
  text-align: left !important;
}
body.woocommerce-cart .cart_totals ul#shipping_method {
  margin: 4px 0 8px !important;
  padding: 0 !important;
  list-style: none !important;
}
body.woocommerce-cart .cart_totals ul#shipping_method li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 6px !important;
  padding: 10px 12px !important;
  text-indent: 0 !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}
body.woocommerce-cart .cart_totals ul#shipping_method li:has(input:checked) {
  border-color: var(--seloxa-ocean) !important;
  background: var(--seloxa-frost) !important;
}
body.woocommerce-cart .cart_totals ul#shipping_method li input {
  margin: 0 !important;
  accent-color: var(--seloxa-ocean) !important;
}
body.woocommerce-cart .cart_totals ul#shipping_method li label {
  flex: 1 !important;
  margin: 0 !important;
  font-size: 14px !important;
  cursor: pointer !important;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #555555 !important;
  margin: 6px 0 2px !important;
}
body.woocommerce-cart .cart_totals a.shipping-calculator-button {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--seloxa-ocean) !important;
}
body.woocommerce-cart .cart_totals a.shipping-calculator-button::after {
  font-family: inherit !important;
}
body.woocommerce-cart .shipping-calculator-form {
  margin: 10px 0 0 !important;
  padding: 12px !important;
  border-radius: 10px !important;
  background: var(--seloxa-mist) !important;
}
body.woocommerce-cart .shipping-calculator-form p.form-row {
  margin: 0 0 10px !important;
  padding: 0 !important;
}
body.woocommerce-cart .shipping-calculator-form label {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #444444 !important;
  margin: 0 0 4px !important;
}
body.woocommerce-cart .shipping-calculator-form select,
body.woocommerce-cart .shipping-calculator-form input.input-text,
body.woocommerce-cart .shipping-calculator-form .select2-selection {
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
body.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] {
  width: 100% !important;
  border-radius: 999px !important;
  margin: 2px 0 0 !important;
}
/* Total row */
body.woocommerce-cart .cart_totals table.shop_table tr.order-total {
  border-bottom: 0 !important;
  padding-top: 16px !important;
}
body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--seloxa-ink) !important;
}
body.woocommerce-cart .cart_totals tr.order-total td small.includes_tax {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #555555 !important;
}
/* Discount row (coupon applied) */
body.woocommerce-cart .cart_totals tr.cart-discount td,
body.woocommerce-cart .cart_totals tr.cart-discount th {
  color: var(--seloxa-green) !important;    /* 7.22:1 on white */
}
body.woocommerce-cart .cart_totals a.woocommerce-remove-coupon {
  font-size: 12.5px !important;
  color: var(--seloxa-red-link) !important;
  margin-left: 4px !important;
}
/* Proceed to checkout + research-use line (compliance, never hidden) */
body.woocommerce-cart .wc-proceed-to-checkout {
  padding: 0 !important;
  margin: 0 !important;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  box-sizing: border-box !important;
}
body.woocommerce-cart .entry-content p.seloxa-cart-note {
  margin: 12px 0 0 !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #0a4653 !important;                /* 9.37:1 on Frost */
  background: var(--seloxa-frost) !important;
  border-radius: 10px !important;
  box-shadow: inset 3px 0 0 var(--seloxa-ocean) !important;
  text-align: left !important;
}

/* 32g. Notices on the cart (Cart updated, coupon messages) */
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error {
  border-radius: 12px !important;
  margin: 0 0 18px !important;
}

/* 32h. Tablet+ item rows (≥600px): one line per item */
@media (min-width: 600px) {
  body.woocommerce-cart table.shop_table.cart tr.cart_item {
    grid-template-columns: 96px minmax(0, 1fr) auto 110px !important;
    grid-template-areas:
      "thumb name qty subtotal"
      "thumb price qty remove" !important;
    column-gap: 20px !important;
    row-gap: 6px !important;
    padding: 18px 20px !important;
  }
  body.woocommerce-cart tr.cart_item td.product-name { align-self: end !important; }
  body.woocommerce-cart tr.cart_item td.product-price { align-self: start !important; }
  body.woocommerce-cart tr.cart_item td.product-quantity,
  body.woocommerce-cart tr.cart_item td.product-subtotal {
    margin-top: 0 !important;
  }
  body.woocommerce-cart tr.cart_item td.product-quantity { align-self: center !important; }
  body.woocommerce-cart tr.cart_item td.product-subtotal { align-self: end !important; }
  body.woocommerce-cart tr.cart_item td.product-remove { align-self: start !important; }
  body.woocommerce-cart tr.cart_item td.product-name a {
    font-size: 16px !important;
  }
  body.woocommerce-cart tr.cart_item td.product-subtotal {
    font-size: 17px !important;
  }
  body.woocommerce-cart table.shop_table.cart td.actions {
    padding: 16px 20px !important;
  }
  body.woocommerce-cart .cart-collaterals .cart_totals {
    padding: 24px !important;
  }
}
/* Tablet (600–1023px): summary below the items, not full width */
@media (min-width: 600px) and (max-width: 1023px) {
  body.woocommerce-cart .cart-collaterals .cart_totals {
    max-width: 480px !important;
    margin-left: auto !important;
  }
}

/* 32i. Empty cart: one centred card (message, line, Return to shop) */
body.woocommerce-cart .entry-content > .woocommerce:has(.wc-empty-cart-message) {
  max-width: 560px !important;
  margin: 8px auto 0 !important;
  padding: 40px 24px 32px !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
}
body.woocommerce-cart .wc-empty-cart-message {
  margin: 0 !important;
}
/* After the last item is removed by AJAX, WooCommerce moves the empty
   message into the notices wrapper (styled the same by the rule below),
   next to the compact "… removed. Undo?" notice. */
body.woocommerce-cart .woocommerce:has(.wc-empty-cart-message) .woocommerce-notices-wrapper .woocommerce-message {
  margin: 0 0 24px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  text-align: left !important;
  border-radius: 10px !important;
}
body.woocommerce-cart .woocommerce:has(.wc-empty-cart-message) .woocommerce-notices-wrapper .woocommerce-message::before {
  display: none !important;
}
body.woocommerce-cart .cart-empty.woocommerce-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
  color: var(--seloxa-ink) !important;
  text-align: center !important;
}
body.woocommerce-cart .cart-empty.woocommerce-info::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: var(--seloxa-frost) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h18l-1.6 9.2a2 2 0 0 1-2 1.8H6.6a2 2 0 0 1-2-1.8L3 9zM8 9l3-5M16 9l-3-5M9 13v3M15 13v3' fill='none' stroke='%230A6175' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 34px no-repeat !important;
  margin: 0 !important;
  font-family: inherit !important;
}
body.woocommerce-cart .entry-content p.seloxa-cart-empty__line {
  font-size: 15px !important;
  color: #555555 !important;                /* 7.46:1 on white */
  margin: 8px 0 22px !important;
  text-align: center !important;
}
body.woocommerce-cart .woocommerce p.return-to-shop {
  margin: 0 !important;
  text-align: center !important;
}
body.woocommerce-cart .woocommerce p.return-to-shop a.button {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 48px !important;
  padding: 0 28px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* 32j. Short screens: keep Proceed to checkout easy to reach on phones —
   the summary follows the items directly, nothing in between. */
@media (max-width: 599px) {
  body.woocommerce-cart td.actions .coupon {
    flex-basis: 100% !important;
    max-width: none !important;
  }
}

/* 32k. Header mini-cart dropdown (desktop hover/focus; global header).
   Storefront shows it by moving it from left:-999em to left:0. */
.site-header-cart .widget_shopping_cart {
  width: 340px !important;
  background: #ffffff !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(26, 26, 46, 0.12) !important;
  overflow: hidden !important;
  font-size: 14px !important;
}
.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.focus .widget_shopping_cart {
  left: auto !important;
  right: -12px !important;
}
.site-header-cart .widget_shopping_cart .widget_shopping_cart_content {
  background: #ffffff !important;
}
.site-header-cart .widget_shopping_cart ul.product_list_widget {
  margin: 0 !important;
  padding: 6px 0 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}
.site-header-cart .widget_shopping_cart ul.product_list_widget li {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  align-items: center !important;
  padding: 10px 44px 10px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--seloxa-line) !important;
  background: #ffffff !important;
}
.site-header-cart .widget_shopping_cart ul.product_list_widget li:last-child {
  border-bottom: 0 !important;
}
.site-header-cart .widget_shopping_cart ul.product_list_widget li > a:not(.remove) {
  display: contents !important;
  font-weight: 700 !important;
  color: var(--seloxa-ink) !important;
  text-decoration: none !important;
}
.site-header-cart .widget_shopping_cart ul.product_list_widget li img {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  float: none !important;
  width: 52px !important;
  height: 52px !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
.site-header-cart .widget_shopping_cart ul.product_list_widget li .quantity {
  grid-column: 2 !important;
  font-size: 13px !important;
  color: #555555 !important;                /* 7.46:1 on white */
  margin: 0 !important;
}
.site-header-cart .widget_shopping_cart ul.product_list_widget li a.remove {
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  left: auto !important;
  float: none !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  color: #555555 !important;
  background: transparent !important;
}
.site-header-cart .widget_shopping_cart ul.product_list_widget li a.remove:hover {
  color: var(--seloxa-red-link) !important;
  background: var(--seloxa-red-tint) !important;
}
.site-header-cart .widget_shopping_cart p.total,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total {
  display: flex !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border-top: 1px solid var(--seloxa-line) !important;
  border-bottom: 0 !important;
  background: var(--seloxa-mist) !important;
  color: var(--seloxa-ink) !important;
  font-size: 14.5px !important;
  text-align: left !important;
}
.site-header-cart .widget_shopping_cart p.buttons,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 12px 16px 16px !important;
  background: var(--seloxa-mist) !important;
}
.site-header-cart .widget_shopping_cart p.buttons a.button,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-align: center !important;
}
/* View cart = outline; Checkout stays solid Deep Ocean (section 30d) */
.site-header-cart .widget_shopping_cart p.buttons a.button:not(.checkout),
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--seloxa-ocean) !important;    /* 7.05:1 on white */
  border: 1.5px solid var(--seloxa-ocean) !important;
}
.site-header-cart .widget_shopping_cart p.buttons a.button:not(.checkout):hover,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
  background: var(--seloxa-frost) !important;
  background-color: var(--seloxa-frost) !important;
  color: var(--seloxa-ocean) !important;
}
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message {
  margin: 0 !important;
  padding: 20px 16px !important;
  text-align: center !important;
  color: #555555 !important;
}


/* ═══════════════════════════════════════════════════════
   33. CHECKOUT + ORDER-RECEIVED — premium pass (classic
   [woocommerce_checkout]; markup unchanged except the hooks
   in inc/checkout-layout.php). Mobile-first. Everything is
   scoped to body.woocommerce-checkout.
   Live takes payment through Stripe ONLY: the payment block
   is styled generically (outer containers only) so a single
   method reads as one tidy card. NOTHING inside a payment
   iframe (Stripe's card form) is styled here — see DEPLOY.md.
   COMPLIANCE: the research-use checkbox (#research_acknowledgment_field)
   keeps its markup, label, position (directly above Place
   order) and validation; it is never hidden or animated
   (checkout has no motion at all).
   RULE 7: review photos are true colour — cover only.
   ═══════════════════════════════════════════════════════ */

/* 33a. Page frame + heading */
body.woocommerce-checkout .entry-content > .woocommerce {
  max-width: 1200px !important;
  margin: 0 auto !important;
}
@media (max-width: 768px) {
  body.woocommerce-checkout .entry-content {
    padding-top: 20px !important;
    padding-bottom: 32px !important;
  }
}
@media (min-width: 769px) {
  body.woocommerce-checkout .entry-content {
    padding-bottom: 72px !important;
  }
}
body.woocommerce-checkout .seloxa-co-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 6px 16px !important;
  margin: 0 0 16px !important;
}
body.woocommerce-checkout .entry-content h1.seloxa-co-head__title {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px !important;
  line-height: 1.15 !important;
  color: var(--seloxa-ink) !important;
  margin: 0 !important;
}
body.woocommerce-checkout a.seloxa-co-head__back {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--seloxa-ocean) !important;    /* 6.68:1 on Mist */
  text-decoration: none !important;
}
body.woocommerce-checkout a.seloxa-co-head__back:hover {
  text-decoration: underline !important;
}
@media (min-width: 769px) {
  body.woocommerce-checkout .entry-content h1.seloxa-co-head__title {
    font-size: 34px !important;
  }
}

/* Mobile total bar → jumps to the order summary (hidden ≥1024px, where
   the summary sits beside the form) */
body.woocommerce-checkout a.seloxa-co-jump {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 10px !important;
  margin: 0 0 16px !important;
  padding: 12px 16px !important;
  background: #ffffff !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 12px !important;
  color: var(--seloxa-ink) !important;
  text-decoration: none !important;
  font-size: 14px !important;
}
body.woocommerce-checkout .seloxa-co-jump__label {
  color: #555555 !important;                /* 7.46:1 on white */
}
body.woocommerce-checkout .seloxa-co-jump__total {
  font-weight: 800 !important;
  font-size: 16px !important;
}
body.woocommerce-checkout .seloxa-co-jump__go {
  margin-left: auto !important;
  font-weight: 700 !important;
  color: var(--seloxa-ocean) !important;    /* 7.05:1 on white */
}
@media (min-width: 1024px) {
  body.woocommerce-checkout a.seloxa-co-jump {
    display: none !important;
  }
}

/* 33b. Coupon toggle + form (one unit, like the cart) */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  margin: 0 0 16px !important;
  padding: 12px 16px !important;
  background: transparent !important;
  border: 1px dashed var(--seloxa-line) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  color: #444444 !important;                /* 9.24:1 on Mist */
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
  display: none !important;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle a.showcoupon {
  font-weight: 700 !important;
  color: var(--seloxa-ocean) !important;
}
/* Same build as the cart's unit (32e): a 2-row grid, the rounded box drawn
   by ::before on row 1, WooCommerce's coupon error (WC 11 prints it inside
   p.form-row-first) on row 2 under the box. The two p.form-row wrappers are
   display: contents, so the field, the error and the button are the grid's
   own items. */
body.woocommerce-checkout form.checkout_coupon {
  display: grid;                            /* no !important: WooCommerce's slideToggle sets display inline */
  grid-template-columns: minmax(0, 1fr) auto !important;
  row-gap: 6px !important;
  max-width: 460px !important;
  margin: -4px 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body.woocommerce-checkout form.checkout_coupon[style*="none"] {
  display: none !important;
}
body.woocommerce-checkout form.checkout_coupon::before {
  content: "" !important;
  display: block !important;
  grid-area: 1 / 1 / 2 / 3 !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
}
body.woocommerce-checkout form.checkout_coupon:focus-within::before {
  border-color: var(--seloxa-ocean) !important;
  box-shadow: 0 0 0 1px var(--seloxa-ocean) !important;
}
body.woocommerce-checkout form.checkout_coupon:has(input.has-error):not(:focus-within)::before {
  border-color: var(--seloxa-red-link) !important;
}
body.woocommerce-checkout form.checkout_coupon p.form-row {
  display: contents !important;
}
body.woocommerce-checkout form.checkout_coupon .clear {
  display: none !important;
}
body.woocommerce-checkout form.checkout_coupon input#coupon_code {
  grid-area: 1 / 1 !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  height: 46px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 16px !important;
}
body.woocommerce-checkout form.checkout_coupon input#coupon_code::placeholder {
  color: #5F7479 !important;                /* 4.93:1 on white */
}
body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
  grid-area: 1 / 2 !important;
  position: relative !important;
  z-index: 1 !important;
  height: 44px !important;                  /* inside the 1px box border */
  margin: 1px 1px 1px 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-left: 1px solid var(--seloxa-line) !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--seloxa-frost) !important;
  color: var(--seloxa-ocean) !important;    /* 6.33:1 on Frost */
  font-size: 13.5px !important;
  font-weight: 700 !important;
}
body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:hover {
  background: var(--seloxa-teal) !important;
}
body.woocommerce-checkout form.checkout_coupon .coupon-error-notice {
  grid-area: 2 / 1 / 3 / 3 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 16px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  color: var(--seloxa-red-link) !important; /* ≥6.5:1 on white */
}

/* 33c. Layout: details left, sticky summary right (≥1024px) */
body.woocommerce-checkout form.checkout > wc-order-attribution-inputs {
  display: none !important;                 /* hidden inputs only; still submitted */
}
@media (min-width: 1024px) {
  body.woocommerce-checkout form.checkout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 420px !important;
    column-gap: 40px !important;
    align-items: start !important;
  }
  body.woocommerce-checkout form.checkout > * {
    grid-column: 1 / -1 !important;         /* notices etc. span both */
  }
  body.woocommerce-checkout form.checkout > #customer_details {
    grid-column: 1 !important;
    grid-row: span 1 !important;
  }
  body.woocommerce-checkout form.checkout > .seloxa-co-summary {
    grid-column: 2 !important;
    grid-row: span 1 !important;
  }
  /* The card is taller than most windows: seloxa-checkout.js sets the
     offset so its BOTTOM (Place order) stays on screen. No JS = static. */
  html.seloxa-co-js body.woocommerce-checkout form.checkout > .seloxa-co-summary {
    position: sticky !important;
    top: var(--seloxa-co-sticky-top, 24px) !important;
  }
}
body.woocommerce-checkout #customer_details.col2-set {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
  width: 100% !important;
  float: none !important;
  margin: 0 0 18px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 16px !important;
}
@media (min-width: 600px) {
  body.woocommerce-checkout #customer_details .col-1,
  body.woocommerce-checkout #customer_details .col-2 {
    padding: 24px 28px !important;
  }
}

/* Card headings: "Billing details", "Ship to a different address?" */
body.woocommerce-checkout #customer_details h3 {
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
  color: var(--seloxa-ink) !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
body.woocommerce-checkout #ship-to-different-address label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin: 0 !important;
}
body.woocommerce-checkout #customer_details .shipping_address {
  margin-top: 14px !important;
}
body.woocommerce-checkout .woocommerce-additional-fields {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--seloxa-line) !important;
}
body.woocommerce-checkout .woocommerce-additional-fields > h3 {
  display: none !important;                 /* Storefront's empty "Additional information" gap; the field keeps its label */
}
body.woocommerce-checkout .woocommerce-account-fields {
  margin-top: 6px !important;
}

/* 33d. Fields (mobile: one per row; ≥600px: first/last side by side) */
body.woocommerce-checkout form.checkout .form-row {
  margin: 0 0 14px !important;
  padding: 0 !important;
}
@media (max-width: 599px) {
  body.woocommerce-checkout form.checkout .col2-set .form-row-first,
  body.woocommerce-checkout form.checkout .col2-set .form-row-last {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
}
@media (min-width: 600px) {
  body.woocommerce-checkout form.checkout .col2-set .form-row-first,
  body.woocommerce-checkout form.checkout .col2-set .form-row-last {
    width: calc(50% - 8px) !important;
    margin-right: 0 !important;
  }
}
body.woocommerce-checkout form.checkout .form-row > label,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper > label:not(.checkbox) {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--seloxa-ink) !important;
}
body.woocommerce-checkout form.checkout .form-row .optional {
  font-weight: 400 !important;
  color: #555555 !important;                /* 7.07:1 on white */
}
body.woocommerce-checkout form.checkout .form-row input.input-text,
body.woocommerce-checkout form.checkout .form-row textarea,
body.woocommerce-checkout form.checkout .form-row select:not(.select2-hidden-accessible),
body.woocommerce-checkout form.checkout .select2-container .select2-selection--single {
  width: 100% !important;
  min-height: 48px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  border: 1px solid #7A979E !important;     /* field boundary 3.11:1 on white (WCAG 1.4.11); --line is too faint */
  border-radius: 10px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  font-size: 16px !important;               /* 16px: no iOS zoom on focus */
  line-height: 1.4 !important;
  color: var(--seloxa-ink) !important;
}
body.woocommerce-checkout form.checkout .form-row textarea {
  min-height: 96px !important;
}
body.woocommerce-checkout form.checkout .form-row select:not(.select2-hidden-accessible) {
  /* (:not(.select2-hidden-accessible): the original select that selectWoo
     hides must keep its 1px clipped box, or it widens the page) */
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230A6175' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
}
body.woocommerce-checkout form.checkout .select2-container .select2-selection--single {
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
  padding: 0 !important;
}
body.woocommerce-checkout form.checkout .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 40px 0 14px !important;
  line-height: 46px !important;
  color: var(--seloxa-ink) !important;
}
body.woocommerce-checkout form.checkout .select2-container .select2-selection--single .select2-selection__arrow {
  height: 46px !important;
  right: 10px !important;
}
body.woocommerce-checkout form.checkout .form-row input.input-text::placeholder,
body.woocommerce-checkout form.checkout .form-row textarea::placeholder {
  color: #5F7479 !important;                /* 4.93:1 on white */
}
body.woocommerce-checkout form.checkout .form-row input.input-text:focus,
body.woocommerce-checkout form.checkout .form-row textarea:focus,
body.woocommerce-checkout form.checkout .form-row select:not(.select2-hidden-accessible):focus,
body.woocommerce-checkout form.checkout .select2-container--focus .select2-selection--single,
body.woocommerce-checkout form.checkout .select2-container--open .select2-selection--single {
  border-color: var(--seloxa-ocean) !important;
  box-shadow: 0 0 0 1px var(--seloxa-ocean) !important;
  outline: none !important;
}
/* Invalid: red border + WooCommerce's inline message in AA red */
body.woocommerce-checkout form.checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout form.checkout .form-row.woocommerce-invalid select,
body.woocommerce-checkout form.checkout .form-row.woocommerce-invalid .select2-selection {
  border-color: var(--seloxa-red) !important;
  box-shadow: 0 0 0 1px var(--seloxa-red) !important;
}
body.woocommerce-checkout form.checkout .form-row.woocommerce-validated input.input-text,
body.woocommerce-checkout form.checkout .form-row.woocommerce-validated select {
  box-shadow: none !important;
}
body.woocommerce-checkout form.checkout .checkout-inline-error-message {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--seloxa-red-strong) !important;   /* 6.09:1 on white */
}
/* Checkboxes (Create an account, Ship to a different address) */
body.woocommerce-checkout form.checkout input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  accent-color: var(--seloxa-ocean) !important;
  flex-shrink: 0 !important;
}
body.woocommerce-checkout .woocommerce-account-fields label.checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 15px !important;
  cursor: pointer !important;
}

/* 33e. Order summary card */
body.woocommerce-checkout .seloxa-co-summary {
  margin: 0 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 8px 24px rgba(10, 97, 117, 0.06) !important;
  scroll-margin-top: 16px !important;
}
@media (min-width: 600px) {
  body.woocommerce-checkout .seloxa-co-summary {
    padding: 24px !important;
  }
}
body.woocommerce-checkout .seloxa-co-summary #order_review_heading,
body.woocommerce-checkout .seloxa-co-summary #order_review {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
}
body.woocommerce-checkout .entry-content .seloxa-co-summary h3#order_review_heading {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.2 !important;
  color: var(--seloxa-ink) !important;
  margin: 0 0 8px !important;
}
/* Review table → rows */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  display: block !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  border: 0 !important;
  background: transparent !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead {
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot {
  display: block !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 4px 12px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--seloxa-line) !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  color: var(--seloxa-ink) !important;
  text-align: right !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th {
  font-weight: 600 !important;
  color: #444444 !important;                /* 9.74:1 on white */
  text-align: left !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td::before {
  display: none !important;
  content: none !important;
}
/* Item rows: photo · name × qty · line total */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item td.product-name {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  text-align: left !important;
  font-weight: 600 !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item td.product-name {
  position: relative !important;
  min-height: 48px !important;
  padding-left: 60px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 6px !important;
}
body.woocommerce-checkout .seloxa-co-item {
  display: inline !important;
}
body.woocommerce-checkout .seloxa-co-item__thumb {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
body.woocommerce-checkout .seloxa-co-item__thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-quantity {
  font-weight: 600 !important;
  color: #555555 !important;                /* 7.46:1 on white */
  white-space: nowrap !important;
}
/* Shipping row: options full width, selectable rows like the cart */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
  flex: 1 1 100% !important;
  text-align: left !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table ul#shipping_method {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table ul#shipping_method li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 6px !important;
  padding: 10px 12px !important;
  text-indent: 0 !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 10px !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table ul#shipping_method li:has(input:checked) {
  border-color: var(--seloxa-ocean) !important;
  background: var(--seloxa-frost) !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table ul#shipping_method li input {
  margin: 0 !important;
  accent-color: var(--seloxa-ocean) !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table ul#shipping_method li label {
  flex: 1 !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
}
/* Total */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total {
  border-bottom: 0 !important;
  padding-top: 16px !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--seloxa-ink) !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart-discount th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart-discount td {
  color: var(--seloxa-green) !important;    /* 7.22:1 on white */
}

/* 33f. Payment: 1 or 2 methods. Card (live: Stripe, or the local test
   gateway) and Bitcoin (Blockonomics) each read as a card row: a radio,
   a small icon tile and the title. A method's own content — Stripe's
   fields, the Bitcoin helper text — shows only once it's selected, in
   .payment_box below, unchanged from before. NEVER styled beyond that:
   the contents of .payment_box past spacing (Stripe's fieldset/iframe).
   Icons come from inc/payment-methods.php (woocommerce_gateway_icon,
   front end only — the Payments settings screen is never touched). */
body.woocommerce-checkout #payment {
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
body.woocommerce-checkout #payment ul.payment_methods {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid var(--seloxa-line) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:has(> input:checked) {
  border-color: var(--seloxa-ocean) !important;
  box-shadow: 0 0 0 1px var(--seloxa-ocean) !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input.input-radio {
  position: absolute !important;
  z-index: 1 !important;                    /* stays clickable on its own dot, not just via the label */
  top: 50% !important;
  left: 16px !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  accent-color: var(--seloxa-ocean) !important;
  cursor: pointer !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input.input-radio:focus-visible {
  outline: 2px solid var(--seloxa-ocean) !important;
  outline-offset: 2px !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  min-height: 56px !important;
  padding: 10px 16px 10px 50px !important;   /* room for the radio */
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--seloxa-ink) !important;
  background: var(--seloxa-mist) !important;
  cursor: pointer !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label::before {
  display: none !important;                 /* Storefront's purple radio glyph */
}
/* Icon tile: same size and corner radius for every method, one colour
   per icon so Bitcoin and card read as distinct brands, not a re-tint
   of the same graphic. order: -1 moves it before the title (WooCommerce
   prints the title text, then the icon, in that source order). */
body.woocommerce-checkout #payment ul.payment_methods .seloxa-pay-icon-tile {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  order: -1 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: var(--seloxa-frost) !important;
}
body.woocommerce-checkout #payment ul.payment_methods .seloxa-pay-icon--card {
  color: var(--seloxa-ocean) !important;    /* decorative (aria-hidden); AA'd against Frost anyway */
}
body.woocommerce-checkout #payment ul.payment_methods .seloxa-pay-icon--btc {
  color: var(--seloxa-ink) !important;      /* Bitcoin's own orange fails AA on Frost; Ink reads clearly instead */
}
/* Any gateway icon we don't filter (a plugin's own <img>, e.g. Stripe's
   card-brand strip if it ever sets one) stays small and in the same slot */
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label img {
  order: -1 !important;
  flex: none !important;
  max-height: 28px !important;
  width: auto !important;
}
/* One method only (no Bitcoin, or Bitcoin disabled again) — no radio,
   no list feel, matches DEPLOY.md's "Checkout + Stripe" note */
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:only-child {
  border-color: var(--seloxa-line) !important;
  box-shadow: none !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:only-child > input.input-radio {
  display: none !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:only-child > label {
  padding-left: 16px !important;
  cursor: default !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li > .payment_box {
  margin: 0 !important;
  padding: 14px 16px 16px !important;
  background: #ffffff !important;
  border-top: 1px solid var(--seloxa-line) !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #444444 !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li > .payment_box::before {
  display: none !important;                 /* Storefront's speech-bubble arrow */
}
body.woocommerce-checkout #payment ul.payment_methods > li > .payment_box > p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #444444 !important;                /* 9.74:1 on white */
  margin: 0 0 8px !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li > .payment_box > p:last-child {
  margin-bottom: 0 !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li.woocommerce-notice {
  padding: 12px 14px !important;
  border-radius: 12px !important;
}

/* 33g. Privacy text, Terms, research-use checkbox, Place order */
body.woocommerce-checkout #payment .place-order {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text p {
  margin: 0 0 12px !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: #555555 !important;                /* 7.46:1 on white */
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a,
body.woocommerce-checkout .woocommerce-terms-and-conditions-link {
  color: var(--seloxa-ocean) !important;
}
body.woocommerce-checkout #payment .form-row.validate-required,
body.woocommerce-checkout #payment p.form-row.terms {
  margin: 0 0 10px !important;
  padding: 0 !important;
}
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.checkbox,
body.woocommerce-checkout #payment #research_acknowledgment_field label.checkbox {
  display: block !important;                /* text + required * flow as one line of copy */
  position: relative !important;
  padding-left: 30px !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: var(--seloxa-ink) !important;      /* 16:1+ */
  cursor: pointer !important;
}
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
body.woocommerce-checkout #payment #research_acknowledgment_field input[type="checkbox"] {
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  accent-color: var(--seloxa-ocean) !important;
}
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.checkbox {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
/* Research-use checkbox (compliance): full size, full contrast, Frost box
   with the Deep Ocean edge used for every research-use notice. Directly
   above Place order (inc/research-checkout-checkbox.php, unchanged). */
body.woocommerce-checkout #payment #research_acknowledgment_field {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 12px 0 14px !important;
  padding: 12px 14px !important;
  background: var(--seloxa-frost) !important;
  border-radius: 10px !important;
  box-shadow: inset 3px 0 0 var(--seloxa-ocean) !important;
}
body.woocommerce-checkout #payment #research_acknowledgment_field .woocommerce-input-wrapper {
  display: block !important;
}
body.woocommerce-checkout #payment #research_acknowledgment_field.woocommerce-invalid {
  box-shadow: inset 3px 0 0 var(--seloxa-red), 0 0 0 1px var(--seloxa-red) !important;
  background: var(--seloxa-red-tint) !important;
}
body.woocommerce-checkout #payment .form-row .required {
  color: var(--seloxa-red-strong) !important;
  text-decoration: none !important;
}
body.woocommerce-checkout #payment #place_order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 56px !important;
  margin: 4px 0 0 !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* 33h. Checkout error notice (WooCommerce's own list and links) */
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout {
  margin: 0 0 18px !important;
}
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error {
  margin: 0 !important;
  padding: 14px 16px 14px 48px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error li {
  margin: 0 0 4px !important;
}
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error li a {
  text-decoration: none !important;
  font-weight: 600 !important;
}
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error li a:hover {
  text-decoration: underline !important;
}
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error::before {
  top: 14px !important;
  left: 16px !important;
}

/* 33i. Order-received ("thank you") page */
body.woocommerce-order-received .woocommerce-order {
  max-width: 880px !important;
  margin: 0 auto !important;
}
/* Hero: WooCommerce's "Thank you" line + order number + status */
body.woocommerce-order-received .entry-content p.woocommerce-thankyou-order-received {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 16px !important;
  padding: 32px 20px 26px !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 20px !important;
  color: var(--seloxa-ink) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
body.woocommerce-order-received p.woocommerce-thankyou-order-received::before {
  content: "" !important;
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 0 10px !important;
  border-radius: 50% !important;
  background: var(--seloxa-green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%232B6149' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px no-repeat !important;
}
body.woocommerce-order-received .seloxa-ty__title {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
}
body.woocommerce-order-received .seloxa-ty__number {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px !important;
  color: var(--seloxa-ocean) !important;    /* 7.05:1 on white */
}
body.woocommerce-order-received .seloxa-ty__status {
  display: inline-block !important;
  margin-top: 6px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: var(--seloxa-frost) !important;
  color: var(--seloxa-ocean) !important;    /* 6.33:1 */
}
body.woocommerce-order-received .seloxa-ty__status--processing,
body.woocommerce-order-received .seloxa-ty__status--completed {
  background: var(--seloxa-green-tint) !important;
  color: var(--seloxa-green) !important;    /* 6.25:1 */
}
body.woocommerce-order-received .seloxa-ty__note {
  font-size: 14px !important;
  color: #444444 !important;                /* 9.74:1 on white */
}
@media (min-width: 769px) {
  body.woocommerce-order-received .seloxa-ty__title { font-size: 26px !important; }
  body.woocommerce-order-received .seloxa-ty__number { font-size: 36px !important; }
}
/* Overview: 4 tiles (2 × 2 on mobile) */
body.woocommerce-order-received ul.woocommerce-order-overview {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview::before,
body.woocommerce-order-received ul.woocommerce-order-overview::after {
  display: none !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: #5F7479 !important;                /* 4.93:1 on white */
  line-height: 1.4 !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
  display: block !important;
  margin-top: 4px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--seloxa-ink) !important;
  overflow-wrap: anywhere !important;
}
@media (min-width: 769px) {
  body.woocommerce-order-received ul.woocommerce-order-overview {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/* Order details + addresses as cards */
body.woocommerce-order-received section.woocommerce-order-details,
body.woocommerce-order-received section.woocommerce-customer-details .woocommerce-column,
body.woocommerce-order-received section.woocommerce-customer-details > address {
  margin: 0 0 16px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 16px !important;
}
body.woocommerce-order-received .entry-content .woocommerce-order-details h2,
body.woocommerce-order-received .entry-content .woocommerce-customer-details h2 {
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
  color: var(--seloxa-ink) !important;
  margin: 0 0 10px !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;       /* Storefront's #f8f8f8 */
}
body.woocommerce-order-received table.woocommerce-table--order-details th,
body.woocommerce-order-received table.woocommerce-table--order-details td,
body.woocommerce-order-received table.woocommerce-table--order-details tbody tr:nth-child(2n) td {  /* beats 30m's even-row white */
  padding: 10px 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -1px 0 var(--seloxa-line) !important;
  font-size: 14.5px !important;
  color: var(--seloxa-ink) !important;
  text-align: left !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details td:last-child,
body.woocommerce-order-received table.woocommerce-table--order-details tbody tr:nth-child(2n) td:last-child,
body.woocommerce-order-received table.woocommerce-table--order-details thead th:last-child,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
  text-align: right !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details thead th {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: #5F7479 !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot th {
  font-weight: 600 !important;
  color: #444444 !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td {
  box-shadow: none !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details td.product-name a {
  font-weight: 700 !important;
  color: var(--seloxa-ink) !important;
  text-decoration: none !important;
}
body.woocommerce-order-received table.woocommerce-table--order-details td.product-name a:hover {
  color: var(--seloxa-ocean) !important;
  text-decoration: underline !important;
}
body.woocommerce-order-received section.woocommerce-customer-details .col2-set.addresses {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 16px !important;
}
body.woocommerce-order-received section.woocommerce-customer-details .col2-set.addresses::before,
body.woocommerce-order-received section.woocommerce-customer-details .col2-set.addresses::after {
  display: none !important;
}
body.woocommerce-order-received section.woocommerce-customer-details .col2-set.addresses .woocommerce-column {
  width: auto !important;
  float: none !important;
  margin: 0 0 16px !important;
}
@media (min-width: 769px) {
  body.woocommerce-order-received section.woocommerce-customer-details .col2-set.addresses {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
body.woocommerce-order-received section.woocommerce-customer-details address {
  font-style: normal !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: var(--seloxa-ink) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.woocommerce-order-received section.woocommerce-customer-details address p {
  margin: 6px 0 0 !important;
  color: #444444 !important;
}
body.woocommerce-order-received section.woocommerce-customer-details address p::before {
  display: none !important;
}
body.woocommerce-order-received p.seloxa-ty-continue {
  margin: 8px 0 0 !important;
  text-align: center !important;
}
body.woocommerce-order-received p.seloxa-ty-continue a.button {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 50px !important;
  padding: 0 30px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background: var(--seloxa-ocean) !important;
  border-color: var(--seloxa-ocean) !important;
  color: #ffffff !important;                /* 7.05:1 */
}
body.woocommerce-order-received p.seloxa-ty-continue a.button:hover {
  background: var(--seloxa-ocean-dark) !important;
}

/* 33j. Bitcoin payment page (Blockonomics' own /payment/ page). Body
   class `seloxa-btc-pay` is added only on that page
   (inc/payment-methods.php, is_page( wc_get_page_id('payment') )), so
   none of this runs anywhere else. Without a live API key the only
   states seen locally are the plugin's "no crypto enabled" notice and
   its generic error template (templates/blockonomics_no_crypto_selected.php,
   templates/blockonomics_error.php) — container, typography and colour
   only, matching every other card on the site. The real payment screen
   (QR code, address, countdown) needs a key to render and is
   UNVERIFIED until seen live (DEPLOY.md "Bitcoin (Blockonomics)"). */
body.seloxa-btc-pay {
  background: var(--seloxa-mist) !important;
}
body.seloxa-btc-pay .bnomics-order-container {
  max-width: 480px !important;
  margin: 48px auto !important;
  padding: 28px 24px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid var(--seloxa-line) !important;
  border-radius: 20px !important;
}
body.seloxa-btc-pay .bnomics-order-heading {
  margin: 0 0 16px !important;
}
body.seloxa-btc-pay .bnomics-order-number {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: #5F7479 !important;                /* 4.93:1 on white, matches 33i's overview tiles */
}
body.seloxa-btc-pay #address-error-message {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.seloxa-btc-pay #address-error-message h2,
body.seloxa-btc-pay .bnomics-order-container > h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  line-height: 1.3 !important;
  color: var(--seloxa-ink) !important;
  margin: 0 0 10px !important;
}
body.seloxa-btc-pay #address-error-message p,
body.seloxa-btc-pay .bnomics-order-container p {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #444444 !important;                /* 9.74:1 on white */
  margin: 0 0 8px !important;
}
body.seloxa-btc-pay .bnomics-order-container a {
  color: var(--seloxa-ocean) !important;
  font-weight: 600 !important;
}
body.seloxa-btc-pay .bnomics-order-container ul {
  margin: 8px 0 0 !important;
  padding-left: 20px !important;
}
body.seloxa-btc-pay .bnomics-order-container li {
  margin-bottom: 6px !important;
  font-size: 14.5px !important;
  color: #444444 !important;
}


/* ═══════════════════════════════════════════════════════
   34. STICKY FIX — overflow "clip" instead of "hidden"
   Storefront sets overflow-x: hidden on body and .site (#page),
   and overflow: hidden on .single-product div.product. "hidden"
   makes a scroll container, which silently disables every
   position: sticky inside it (product gallery 31l, cart summary
   32a, checkout summary 33c). "clip" clips the same overflow
   (no sideways scroll) without making a scroll container.
   Browsers without "clip" drop this and keep Storefront's
   "hidden": nothing sticks there, nothing else changes.
   ═══════════════════════════════════════════════════════ */
body,
#page.site {
  overflow-x: clip !important;
}
@media (min-width: 769px) {
  /* Desktop product holds no floats (the two columns are the .seloxa-pd-top
     grid, 22j), so Storefront's clearfix overflow isn't needed */
  body.single-product div.product {
    overflow: visible !important;
  }
}


/* ═══════════════════════════════════════════════════════
   35. BULK PRICING — "1 · 5 · 10" quantity selectors (one
   option per tier), cart discount rows (the progress bar is
   section 40) (inc/bulk-pricing.php, assets/js/seloxa-bulk.js).
   Colours from section 30 only. Native radios in a fieldset:
   the radio covers its whole option (transparent, on top),
   the visible face is the span after it, so every state is
   `input:… + .seloxa-pick__face` (no :has). Selectors show
   only with JS (body.woocommerce-js); without it the
   quantity box / 1-vial buttons work as before.
   ═══════════════════════════════════════════════════════ */

/* 35a. Shared */
.seloxa-pick {
  display: none !important;
}
body.woocommerce-js .seloxa-pick {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.seloxa-pick .seloxa-pick__legend {
  float: left !important;                    /* legend inside the box, not on its border */
  width: 100% !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #555555 !important;                 /* 7.46:1 on white */
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;         /* one line from 140px (375px phones) */
  line-height: 1.3 !important;
  text-align: left !important;
  text-transform: none !important;
}
.seloxa-pick .seloxa-pick__opts {
  clear: both !important;
}
.seloxa-pick .seloxa-pick__opt {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}
.seloxa-pick .seloxa-pick__opt input {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}
.seloxa-pick .seloxa-pick__opt input:disabled {
  cursor: not-allowed !important;
}
.seloxa-pick .seloxa-pick__face {
  box-sizing: border-box !important;
  height: 100% !important;
  color: var(--seloxa-ink) !important;       /* 17.1:1 on white */
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.seloxa-pick .seloxa-pick__tag {
  display: inline-block !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  background: var(--seloxa-green-tint) !important;
  color: var(--seloxa-green) !important;     /* 6.25:1 on green tint */
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}
.seloxa-pick .seloxa-pick__why {
  margin: 6px 0 0 !important;
  color: #555555 !important;                 /* 7.46:1 on white */
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}
@media (prefers-reduced-motion: reduce) {
  .seloxa-pick .seloxa-pick__face {
    transition: none !important;
  }
}

/* 35b. Product page (inside the buy card, above the cart row): a radio row
   per option, pack total right (full price struck through), per vial under */
body.single-product .seloxa-pd-buy .seloxa-pick--product {
  margin: 0 0 12px !important;
}
.seloxa-pick--product .seloxa-pick__opts {
  display: grid !important;
  gap: 8px !important;
}
.seloxa-pick--product .seloxa-pick__face {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0 12px !important;
  min-height: 58px !important;
  padding: 9px 14px !important;
  border: 1.5px solid var(--seloxa-line) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}
.seloxa-pick--product .seloxa-pick__dot {
  width: 20px !important;
  height: 20px !important;
  box-sizing: border-box !important;
  border: 2px solid #6B7C81 !important;      /* 4.3:1 on white (non-text, 3:1 needed) */
  border-radius: 50% !important;
  background: #ffffff !important;
}
.seloxa-pick--product .seloxa-pick__name {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.seloxa-pick--product .seloxa-pick__tag {
  font-size: 11px !important;
  text-transform: uppercase !important;
}
.seloxa-pick--product .seloxa-pick__price {
  text-align: right !important;
  line-height: 1.3 !important;
}
.seloxa-pick--product .seloxa-pick__total {
  display: block !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
.seloxa-pick--product .seloxa-pick__total del {
  margin-right: 2px !important;
  color: #555555 !important;                 /* 6.7:1 on Frost, 7.46:1 on white */
  font-size: 13px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}
.seloxa-pick--product .seloxa-pick__per,
.seloxa-pick--product .seloxa-pick__stock {
  display: block !important;
  color: #555555 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
.seloxa-pick--product .seloxa-pick__stock {
  font-weight: 600 !important;
}
.seloxa-pick--product .seloxa-pick__opt:hover .seloxa-pick__face {
  border-color: var(--seloxa-ocean) !important;
}
.seloxa-pick--product input:checked + .seloxa-pick__face {
  border-color: var(--seloxa-ocean) !important;
  background: var(--seloxa-frost) !important;
  box-shadow: inset 0 0 0 1px var(--seloxa-ocean) !important;
}
.seloxa-pick--product input:checked + .seloxa-pick__face .seloxa-pick__dot {
  border-color: var(--seloxa-ocean) !important;
  background: radial-gradient(circle, var(--seloxa-ocean) 0 4.5px, #ffffff 5px) !important;
}
.seloxa-pick--product input:focus-visible + .seloxa-pick__face,
.seloxa-pick.is-kb.seloxa-pick--product input:focus + .seloxa-pick__face {
  outline: 2px solid var(--seloxa-ocean) !important;
  outline-offset: 2px !important;
}
.seloxa-pick--product input:disabled + .seloxa-pick__face,
.seloxa-pick--product .seloxa-pick__opt:hover input:disabled + .seloxa-pick__face {
  border-style: dashed !important;
  border-color: #B9C7CB !important;
  background: #F3F5F6 !important;
  color: #555555 !important;                 /* 6.8:1 on #F3F5F6 */
}
.seloxa-pick--product input:disabled + .seloxa-pick__face .seloxa-pick__dot {
  border-color: #B9C7CB !important;
  background: #F3F5F6 !important;
}
.seloxa-pick--product input:disabled + .seloxa-pick__face .seloxa-pick__tag {
  background: #E4E9EB !important;
  color: #555555 !important;                 /* 6.1:1 on #E4E9EB */
}

/* 35c. Cards (shop / category / related, homepage): one joined row
   "1 · 5 · 10" directly above the Add to cart button. 47 × 44 per option
   on a 375px phone. Selected = Deep Ocean fill, white number (7.05:1),
   Light Teal unit (5.9:1 on Ocean), tag Ink on Light Teal (13.7:1). */
.seloxa-pick--card .seloxa-pick__opts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  border: 1.5px solid var(--seloxa-line) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}
.seloxa-pick--card .seloxa-pick__opt + .seloxa-pick__opt {
  border-left: 1.5px solid var(--seloxa-line) !important;
}
.seloxa-pick--card .seloxa-pick__face {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  min-height: 44px !important;
  padding: 4px 2px !important;
  text-align: center !important;
}
.seloxa-pick--card .seloxa-pick__opt:first-child .seloxa-pick__face {
  border-radius: 8.5px 0 0 8.5px !important;
}
.seloxa-pick--card .seloxa-pick__opt:last-child .seloxa-pick__face {
  border-radius: 0 8.5px 8.5px 0 !important;
}
.seloxa-pick--card .seloxa-pick__num {
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
.seloxa-pick--card .seloxa-pick__unit {
  color: #555555 !important;                 /* 7.46:1 on white */
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}
.seloxa-pick--card .seloxa-pick__tag {
  padding: 0 5px !important;
  font-size: 10px !important;
}
.seloxa-pick--card .seloxa-pick__opt:hover .seloxa-pick__face {
  background: var(--seloxa-frost) !important;
}
.seloxa-pick--card input:checked + .seloxa-pick__face,
.seloxa-pick--card .seloxa-pick__opt:hover input:checked + .seloxa-pick__face {
  background: var(--seloxa-ocean) !important;
  color: #ffffff !important;
}
.seloxa-pick--card input:checked + .seloxa-pick__face .seloxa-pick__unit {
  color: var(--seloxa-teal) !important;
}
.seloxa-pick--card input:checked + .seloxa-pick__face .seloxa-pick__tag {
  background: var(--seloxa-teal) !important;
  color: var(--seloxa-ink) !important;
}
.seloxa-pick--card input:focus-visible + .seloxa-pick__face,
.seloxa-pick.is-kb.seloxa-pick--card input:focus + .seloxa-pick__face {
  position: relative !important;
  z-index: 2 !important;
  outline: 2px solid var(--seloxa-ocean) !important;
  outline-offset: 2px !important;
}
/* Not enough stock for this option: grey, number struck through, the
   "10 vials: only 7 in stock" note under the row */
.seloxa-pick--card input:disabled + .seloxa-pick__face,
.seloxa-pick--card .seloxa-pick__opt:hover input:disabled + .seloxa-pick__face {
  background: #F3F5F6 !important;
  color: #555555 !important;                 /* 6.8:1 */
}
.seloxa-pick--card input:disabled + .seloxa-pick__face .seloxa-pick__tag {
  background: #E4E9EB !important;
  color: #555555 !important;
}
.seloxa-pick--card .is-short .seloxa-pick__num {
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px !important;
}
.seloxa-pick--card .seloxa-pick__why {
  text-align: left !important;
}
/* Card price line while a pack is chosen: "$166.25 · 5 vials" */
ul.products li.product .price .seloxa-price-pack,
.wc-block-product-template .seloxa-price-pack {
  color: #555555 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
/* The shop button has no top margin (29e), so the selector spaces itself */
body.woocommerce-js ul.products li.product .seloxa-pack-wrap {
  margin: 0 0 8px !important;
}
/* Homepage: the block wrapper centres its children, so the selector is
   given the full card width explicitly; the wrapper already pads the button. */
body.woocommerce-js.home .wc-block-product-template .seloxa-pack-host {
  gap: 8px !important;                       /* block wrapper is a flex column (12px gap) */
}
body.woocommerce-js.home .wc-block-product-template .seloxa-pack-host .seloxa-pack-wrap {
  margin: 0 !important;
}
.seloxa-pack-wrap {
  container-type: inline-size !important;
  width: 100% !important;
  min-width: 0 !important;
}
/* Narrow cards (under 139px of selector: 320–360px phones, and the 3-per-row
   grid around 600px, narrower than at 375, where it is 141.5px): three across
   would drop under 44px, so "1 vial" goes full width with 5 and 10 side by
   side under it (the label wraps there too). Measured on the selector's own
   width (the wrap is a size container), not the viewport. */
@container (max-width: 138px) {
  .seloxa-pick--card .seloxa-pick__opts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .seloxa-pick--card .seloxa-pick__opt:first-child {
    grid-column: 1 / -1 !important;
    border-bottom: 1.5px solid var(--seloxa-line) !important;
  }
  .seloxa-pick--card .seloxa-pick__opt:nth-child(2) {
    border-left: 0 !important;
  }
  .seloxa-pick--card .seloxa-pick__opt:first-child .seloxa-pick__face {
    flex-direction: row !important;
    gap: 4px !important;
    border-radius: 8.5px 8.5px 0 0 !important;
  }
  .seloxa-pick--card .seloxa-pick__opt:nth-child(2) .seloxa-pick__face {
    border-radius: 0 0 0 8.5px !important;
  }
  .seloxa-pick--card .seloxa-pick__opt:last-child .seloxa-pick__face {
    border-radius: 0 0 8.5px 0 !important;
  }
}

/* 35c-2. Out-of-stock cards: the same row, muted and inert (the whole
   fieldset disabled, nothing checked), so every card in a row lines up.
   Mist fill, #555 text (7.0:1 on Mist; tag 6.7:1 on Frost). No hover, no
   selected state, not clickable. The red Out of stock button is unchanged. */
.seloxa-pick--oos .seloxa-pick__opts {
  background: var(--seloxa-mist) !important;
}
.seloxa-pick--oos .seloxa-pick__opt {
  pointer-events: none !important;
  cursor: default !important;
}
.seloxa-pick--oos .seloxa-pick__face,
.seloxa-pick--oos input:disabled + .seloxa-pick__face {
  background: var(--seloxa-mist) !important;
  color: #555555 !important;
  transition: none !important;
}
.seloxa-pick--oos .seloxa-pick__tag,
.seloxa-pick--oos input:disabled + .seloxa-pick__face .seloxa-pick__tag {
  background: var(--seloxa-frost) !important;
  color: #555555 !important;
}

/* 35c-3. Pack products (bulk-pricing.php section 6, e.g. the Cerebrolysin
   6-vial pack): no selector. Cards get a box in its place, in the same
   .seloxa-pack-wrap, built like the row (11px label + a 44px box), so the
   card's button lines up with its neighbours. Frost box, Ink 17.1:1 /
   #555 6.7:1 on Frost (Mist when out of stock, 7.0:1). */
.seloxa-unitpack .seloxa-unitpack__label {
  margin: 0 0 6px !important;
  color: #555555 !important;                 /* 7.46:1 on white */
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  line-height: 1.3 !important;
  text-align: left !important;
}
.seloxa-unitpack .seloxa-unitpack__box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  min-height: 46px !important;               /* the row's height (measured) */
  margin: 0 !important;
  padding: 1px 6px !important;
  border: 1.5px solid var(--seloxa-line) !important;
  border-radius: 10px !important;
  background: var(--seloxa-frost) !important;
  color: var(--seloxa-ink) !important;
  text-align: center !important;
}
.seloxa-unitpack .seloxa-unitpack__box strong {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}
.seloxa-unitpack .seloxa-unitpack__box span {
  color: #555555 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
.seloxa-unitpack--oos .seloxa-unitpack__box {
  background: var(--seloxa-mist) !important;
}
/* Narrow cards: the selector is two rows there and its label wraps to two
   lines, so the box takes the height of both (measured: 125.6px in total) */
@container (max-width: 138px) {
  .seloxa-unitpack .seloxa-unitpack__box {
    min-height: 105.3px !important;
  }
}
/* Price suffix "/ 6-vial pack" (cards + product page) */
.price .seloxa-price-per,
.wc-block-components-product-price .seloxa-price-per {
  color: #555555 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
body.single-product div.product .summary .price .seloxa-price-per {
  font-size: 15px !important;
}
/* Product page: "Sold as a 6-vial pack" box under the price row, and the
   "Packs" label before the quantity box */
body.single-product .summary .seloxa-unitpack-pd {
  margin: 0 0 18px !important;
  padding: 12px 14px !important;
  border-left: 3px solid var(--seloxa-ocean) !important;
  border-radius: 10px !important;
  background: var(--seloxa-frost) !important;
}
body.single-product .summary .seloxa-unitpack-pd p {
  margin: 0 !important;
}
body.single-product .summary .seloxa-unitpack-pd__title {
  color: var(--seloxa-ink) !important;       /* 15.6:1 on Frost */
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}
body.single-product .summary .seloxa-unitpack-pd__line {
  color: #444444 !important;                 /* 8.9:1 on Frost */
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
body.single-product .seloxa-pd-buy form.cart .seloxa-unitpack-qty {
  display: flex !important;
  align-items: center !important;
  color: #555555 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* 35d. Cart: struck-through unit price, discount row */
body.woocommerce-cart tr.cart_item td.product-price del {
  color: #555555 !important;                 /* 7.46:1 on white */
  font-weight: 400 !important;
  margin-right: 4px !important;
  opacity: 1 !important;
}
body.woocommerce-cart tr.cart_item td.product-price ins {
  text-decoration: none !important;
  font-weight: 700 !important;
  color: var(--seloxa-ink) !important;
  background: transparent !important;
}
body.woocommerce-cart .cart_totals tr.seloxa-bulk-row th,
body.woocommerce-cart .cart_totals tr.seloxa-bulk-row td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.seloxa-bulk-row th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.seloxa-bulk-row td {
  color: var(--seloxa-green) !important;     /* 7.22:1 on white */
}
body.woocommerce-cart .cart_totals tr.seloxa-bulk-row td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.seloxa-bulk-row td {
  font-weight: 700 !important;
}
/* 35e. Order-received totals: discount amount in green */
body.woocommerce-order-received .seloxa-bulk-amount,
body.woocommerce-view-order .seloxa-bulk-amount {
  color: var(--seloxa-green) !important;
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════
   36. HOMEPAGE HERO — bigger, bolder headline, AA overlay
   Markup from inc/home-hero.php (front page only): the
   video cover gets .seloxa-hero, its headline is the h1.
   Supersedes the type/button sizes in section 5 (layout
   there is kept). Mobile-first. Nothing here animates, and
   the hero is not part of the scroll motion system.
   ═══════════════════════════════════════════════════════ */

/* 36a. Overlay, so white text meets AA over the brightest video
   frames (at the old flat 50%, worst case measured 3.37:1).
   Below 1024px the text spans nearly the whole hero: flat 62%
   (≥4.88:1). From 1024px a radial, darker behind the text and
   lighter at the edges, which a flat 62% made grey and muddy
   (≥4.9:1 at 1024, 5.25:1 at 1440). Re-measure over every video
   frame if the video, the overlay or the text size changes. */
.home .wp-block-cover.seloxa-hero .wp-block-cover__background {
  opacity: 0.62 !important;
}
@media (min-width: 1024px) {
  .home .wp-block-cover.seloxa-hero .wp-block-cover__background {
    opacity: 1 !important;
    background: radial-gradient(ellipse 65% 60% at 50% 50%,
      rgba(26, 26, 26, 0.7) 0%,
      rgba(26, 26, 26, 0.66) 55%,
      rgba(26, 26, 26, 0.44) 100%) !important;
  }
}

/* 36b. Container: side gutter so text and button never touch the edges */
.home .wp-block-cover.seloxa-hero .wp-block-cover__inner-container {
  padding: 0 20px !important;
}

/* 36c. Headline (h1) */
.home .wp-block-cover.seloxa-hero .wp-block-cover__inner-container > h1.seloxa-hero__title {
  max-width: 11.5em !important;        /* two balanced lines from ~360px up */
  margin: 0 auto clamp(14px, 2vw, 24px) !important;
  color: #ffffff !important;
  font-size: clamp(2.25rem, 6vw, 4.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55) !important;
}
/* "Peptide Research" stays on one line where it fits (not at 320) */
@media (min-width: 360px) {
  .home .seloxa-hero .seloxa-hero__lead {
    white-space: nowrap;
  }
}

/* 36d. Subline */
.home .wp-block-cover.seloxa-hero .wp-block-cover__inner-container > p {
  max-width: 40ch !important;
  margin: 0 auto clamp(26px, 3.5vw, 40px) !important;
  color: #ffffff !important;
  font-size: clamp(1.05rem, 2vw, 1.5rem) !important;
  line-height: 1.5 !important;
  text-wrap: balance;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6) !important;
}
/* the content's line break reads well on wide screens, not on phones */
@media (max-width: 599px) {
  .home .wp-block-cover.seloxa-hero .wp-block-cover__inner-container > p br {
    display: none;
  }
}

/* 36e. Button: on phones the full width less 28px each side (centred),
   320px from 600px */
.home .wp-block-cover.seloxa-hero .wp-block-button {
  width: calc(100% - 56px) !important;
}
.home .wp-block-cover.seloxa-hero .wp-block-button__link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 32px !important;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
@media (min-width: 600px) {
  .home .wp-block-cover.seloxa-hero .wp-block-button {
    width: 320px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   37. HOMEPAGE — "WHY RESEARCHERS CHOOSE SELOXA" (4 columns)
   Markup from the [seloxa_why] shortcode (inc/why-section.php);
   replaces section 16's checklist + cards. Header row (heading +
   Shop all products outline button), then 4 feature columns:
   1 on phones, 2×2 from 600px, 4 across from 1024px. No card
   boxes, left-aligned. Mobile-first. Palette variables only.
   Motion: header row + columns are scroll-motion targets.
   ═══════════════════════════════════════════════════════ */

/* 37a. Section + header row (button under the heading on phones) */
.home .seloxa-why {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: clamp(32px, 5vw, 56px) 0 clamp(56px, 7vw, 88px) !important;
}
.home .seloxa-why .seloxa-why__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 20px !important;
  margin: 0 0 clamp(40px, 5vw, 64px) !important;
}
@media (min-width: 600px) {
  .home .seloxa-why .seloxa-why__head {
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 32px !important;
  }
}
/* Heading: the section's existing style (was 16). Beats the global
   .home .wp-block-group h2 (centred, 48px margin). */
.home .seloxa-why .seloxa-why__heading {
  margin: 0 !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px !important;
  color: var(--seloxa-ink) !important;
  text-align: left !important;
}
@media (min-width: 769px) {
  .home .seloxa-why .seloxa-why__heading {
    font-size: 40px !important;
  }
}

/* 37b. "Shop all products →": Deep Ocean outline button */
.home .seloxa-why .seloxa-why__shop {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border: 2px solid var(--seloxa-ocean) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--seloxa-ocean) !important;      /* 6.68:1 on the page background */
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
.home .seloxa-why .seloxa-why__shop:hover,
.home .seloxa-why .seloxa-why__shop:focus-visible {
  background: var(--seloxa-ocean) !important;
  color: #ffffff !important;                  /* 7.07:1 on Deep Ocean */
}
.home .seloxa-why .seloxa-why__shop:focus-visible,
.home .seloxa-why .seloxa-why__inline:focus-visible,
.home .seloxa-why .seloxa-why__more:focus-visible {
  outline: 2px solid var(--seloxa-ocean) !important;
  outline-offset: 3px !important;
}

/* 37c. Columns */
.home .seloxa-why .seloxa-why__cols {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 48px !important;
}
@media (min-width: 600px) {
  .home .seloxa-why .seloxa-why__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 56px 40px !important;
  }
}
@media (min-width: 1024px) {
  .home .seloxa-why .seloxa-why__cols {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 40px !important;
  }
}
.home .seloxa-why .seloxa-why__col {
  min-width: 0 !important;
  text-align: left !important;
}

/* 37d. Icon tile: Deep Ocean square, white line icon, thin corner
   brackets (8 gradient strokes on one pseudo-element, 8px outside) */
.home .seloxa-why .seloxa-why__tile {
  --why-bracket: var(--seloxa-line);
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  margin: 8px 0 28px 8px !important;         /* room for the brackets */
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--seloxa-ocean), var(--seloxa-ocean-dark)) !important;
  color: #ffffff !important;
}
.home .seloxa-why .seloxa-why__tile::before {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  pointer-events: none !important;
  background:
    linear-gradient(var(--why-bracket), var(--why-bracket)) left top / 14px 2px no-repeat,
    linear-gradient(var(--why-bracket), var(--why-bracket)) left top / 2px 14px no-repeat,
    linear-gradient(var(--why-bracket), var(--why-bracket)) right top / 14px 2px no-repeat,
    linear-gradient(var(--why-bracket), var(--why-bracket)) right top / 2px 14px no-repeat,
    linear-gradient(var(--why-bracket), var(--why-bracket)) left bottom / 14px 2px no-repeat,
    linear-gradient(var(--why-bracket), var(--why-bracket)) left bottom / 2px 14px no-repeat,
    linear-gradient(var(--why-bracket), var(--why-bracket)) right bottom / 14px 2px no-repeat,
    linear-gradient(var(--why-bracket), var(--why-bracket)) right bottom / 2px 14px no-repeat !important;
}
.home .seloxa-why .seloxa-why__icon {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
}

/* 37e. Headline + body + links */
.home .seloxa-why .seloxa-why__title {
  margin: 0 0 12px !important;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--seloxa-ink) !important;       /* 16.18:1 on the page background */
  text-align: left !important;
}
.home .seloxa-why .seloxa-why__text,
.home .seloxa-why .seloxa-why__link {
  margin: 0 !important;
  max-width: 40ch !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #3E4C51 !important;                 /* 8.45:1 on the page background */
  text-align: left !important;
}
.home .seloxa-why .seloxa-why__link {
  margin-top: 12px !important;
}
.home .seloxa-why .seloxa-why__inline {
  color: var(--seloxa-ocean) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.home .seloxa-why .seloxa-why__more {
  color: var(--seloxa-ocean) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.home .seloxa-why .seloxa-why__inline:hover,
.home .seloxa-why .seloxa-why__more:hover {
  color: var(--seloxa-ocean-dark) !important;
  text-decoration: underline !important;
}


/* ═══════════════════════════════════════════════════════
   38. HOMEPAGE — EMAIL SIGNUP BAND ("Sign Up, Share & Earn.")
   Markup from the [seloxa_signup] shortcode (inc/signup-section.php);
   replaces the old parallax Cover (sections 11/15 cover rules removed).
   Full-bleed like the hero (12px gutters, 20px corners). Ink Navy →
   Deep Ocean gradient; white text (≥6.4:1 everywhere, the molecule
   never sits behind text). The text lines up with the Why section.
   Phones (<768px): a compact card with the molecule as a big, faint
   backdrop centred behind the content. 768px+: split, molecule right,
   bleeding off the edge.
   Motion: the molecule only: still until the visitor scrolls, then it
   follows the scroll through a spring (JS on __drift, tuning at the top
   of seloxa-signup.js); nothing moves under reduced motion.
   ═══════════════════════════════════════════════════════ */

/* 38a. Band */
.home .seloxa-signup {
  position: relative !important;
  width: calc(100vw - 24px) !important;
  max-width: none !important;
  margin: 0 0 0 calc(50% - 50vw + 12px) !important;
  padding: 36px 0 40px !important;           /* phones; 768px+ below */
  box-sizing: border-box !important;
  border-radius: 20px !important;
  overflow: hidden !important;               /* clips the molecule's bleed */
  color: #ffffff !important;
  background:
    linear-gradient(200deg, var(--seloxa-ocean) 0%, var(--seloxa-ink) 72%) !important;
}
.home .seloxa-signup .seloxa-signup__inner {
  position: relative !important;
  padding: 0 24px !important;
}
@media (min-width: 768px) {
  .home .seloxa-signup .seloxa-signup__inner {
    /* = the Why section's left edge (42px, then 25vw − 243px) minus the 12px gutter */
    padding: 0 max(30px, calc(25vw - 255px)) !important;
  }
}

/* 38b. Molecule */
.home .seloxa-signup .seloxa-signup__art {
  aspect-ratio: 844 / 859 !important;        /* space reserved: no layout shift */
  pointer-events: none !important;
}
/* Phones: a big, faint backdrop. The molecule is 125% of the card's width,
   centred behind the heading, subline and form, clipped by the card's
   rounded corners. Its opacity is the highest at which every text line
   stays WCAG AA at every float position, measured from real pixels
   (re-measure if you change the size, position or opacity). */
@media (max-width: 767px) {
  .home .seloxa-signup .seloxa-signup__inner {
    position: static !important;             /* the backdrop is placed against the card itself */
  }
  .home .seloxa-signup .seloxa-signup__art {
    --mol-w: calc((100vw - 24px) * 1.25);    /* 125% of the card */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 0 !important;
    width: var(--mol-w) !important;
    margin: calc(var(--mol-w) * 859 / 844 / -2) 0 0 calc(var(--mol-w) / -2) !important;   /* centred without transform (the float uses it) */
    opacity: 0.24 !important;                /* highest that passes AA everywhere (measured: 0.25+ fails the
                                                 subline at 440–480px, 0.30 fails at every width) */
  }
  .home .seloxa-signup .seloxa-signup__content {
    position: relative !important;
    z-index: 1 !important;                   /* text and form above the backdrop */
  }
}
.home .seloxa-signup .seloxa-signup__drift {
  width: 100% !important;
  height: 100% !important;
  will-change: transform;
}
.home .seloxa-signup .seloxa-signup__img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .home .seloxa-signup .seloxa-signup__drift {
    transform: none !important;              /* backup: the JS doesn't run either */
  }
}

/* 768px+: split. Text left over the navy, molecule right over the ocean */
@media (min-width: 768px) {
  .home .seloxa-signup {
    display: flex !important;
    align-items: center !important;
    min-height: clamp(460px, 38vw, 580px) !important;
    padding: clamp(56px, 6vw, 96px) 0 !important;
    background:
      radial-gradient(circle at 78% 50%, rgba(211, 235, 240, 0.12), transparent 45%),
      linear-gradient(90deg, var(--seloxa-ink) 0%, var(--seloxa-ink) 30%, var(--seloxa-ocean) 100%) !important;
  }
  .home .seloxa-signup .seloxa-signup__inner {
    width: 100% !important;
  }
  .home .seloxa-signup .seloxa-signup__art {
    --mol-w: clamp(300px, 40vw, 640px);
    position: absolute !important;
    top: 50% !important;
    right: calc(var(--mol-w) * -0.15 + 0px) !important;
    width: var(--mol-w) !important;
    margin: calc(var(--mol-w) * 859 / 844 / -2) 0 0 !important;   /* vertical centring without transform */
  }
  .home .seloxa-signup .seloxa-signup__content {
    position: relative !important;
    max-width: min(560px, 52%) !important;
  }
}

/* 38c. Heading + subline (beat .home .wp-block-group h2: centred, 48px margin) */
.home .seloxa-signup .seloxa-signup__heading {
  margin: 0 0 16px !important;
  color: #ffffff !important;                 /* ≥7.07:1 on the whole gradient */
  font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  text-wrap: balance;
}
.home .seloxa-signup .seloxa-signup__sub {
  max-width: 34ch !important;
  margin: 0 0 28px !important;
  color: var(--seloxa-frost) !important;     /* 6.4:1 on Deep Ocean, 15:1 on Ink Navy */
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem) !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

/* 38d. Form (WPForms #62, email only): stacked on phones; from 600px
   one joined control, a white bar with the field left and the button
   right. Errors sit outside the white bar, in a light coral that
   passes AA on the dark band. */
.home .seloxa-signup div.wpforms-container-full {
  max-width: 520px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.home .seloxa-signup div.wpforms-container-full .wpforms-form {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.home .seloxa-signup div.wpforms-container-full .wpforms-form .wpforms-field-container,
.home .seloxa-signup div.wpforms-container-full .wpforms-form .wpforms-field,
.home .seloxa-signup div.wpforms-container-full .wpforms-form .wpforms-submit-container {
  margin: 0 !important;
  padding: 0 !important;
}
.home .seloxa-signup div.wpforms-container-full .wpforms-form input[type="email"] {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 56px !important;
  padding: 0 18px !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: var(--seloxa-ink) !important;
  font-size: 16px !important;               /* 16px: no zoom on iOS */
  box-shadow: none !important;
}
.home .seloxa-signup div.wpforms-container-full .wpforms-form input[type="email"]::placeholder {
  color: #5F7479 !important;                 /* 4.93:1 on white */
  opacity: 1 !important;
}
.home .seloxa-signup div.wpforms-container-full .wpforms-form input[type="email"]:focus {
  outline: 3px solid var(--seloxa-teal) !important;
  outline-offset: 2px !important;
  border-color: var(--seloxa-ocean) !important;
}
.home .seloxa-signup div.wpforms-container-full .wpforms-form button.wpforms-submit {
  width: 100% !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--seloxa-teal) !important;
  color: var(--seloxa-ink) !important;       /* 14.0:1 on Light Teal */
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease !important;
}
.home .seloxa-signup div.wpforms-container-full .wpforms-form button.wpforms-submit:hover {
  background: #ffffff !important;
  color: var(--seloxa-ink) !important;
}
.home .seloxa-signup div.wpforms-container-full .wpforms-form button.wpforms-submit:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
}
.home .seloxa-signup div.wpforms-container-full .wpforms-form .wpforms-submit-spinner {
  display: none !important;                  /* the button says "Sending..." instead */
}
/* Errors: WPForms' red fails on navy */
.home .seloxa-signup div.wpforms-container-full .wpforms-form .wpforms-error,
.home .seloxa-signup div.wpforms-container-full .wpforms-error-container,
.home .seloxa-signup div.wpforms-container-full .wpforms-error-container p {
  display: block !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  color: #FFC9C0 !important;                 /* 4.82:1 on Deep Ocean, 11.67:1 on Ink Navy */
  font-size: 14px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  background: none !important;
  border: 0 !important;
}
.home .seloxa-signup div.wpforms-container-full .wpforms-form input[type="email"].wpforms-error {
  border-color: #FFC9C0 !important;
}
.home .seloxa-signup div.wpforms-container-full .wpforms-form .wpforms-error::before {
  background-color: #FFC9C0 !important;     /* WPForms' warning icon, same as the text */
}
/* Confirmation (replaces the form after a successful signup) */
.home .seloxa-signup div.wpforms-container-full .wpforms-confirmation-container-full {
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(211, 235, 240, 0.45) !important;
  border-left: 4px solid var(--seloxa-teal) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
.home .seloxa-signup div.wpforms-container-full .wpforms-confirmation-container-full p {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 16px !important;
}

@media (min-width: 600px) {
  .home .seloxa-signup div.wpforms-container-full .wpforms-form {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 6px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }
  .home .seloxa-signup div.wpforms-container-full .wpforms-form:focus-within {
    outline: 3px solid var(--seloxa-teal) !important;
    outline-offset: 2px !important;
  }
  .home .seloxa-signup div.wpforms-container-full .wpforms-form .wpforms-field-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .home .seloxa-signup div.wpforms-container-full .wpforms-form input[type="email"] {
    height: 52px !important;
    border: 0 !important;
  }
  .home .seloxa-signup div.wpforms-container-full .wpforms-form input[type="email"]:focus {
    outline: 0 !important;                   /* the whole bar shows the focus ring */
  }
  .home .seloxa-signup div.wpforms-container-full .wpforms-form .wpforms-submit-container {
    flex: 0 0 auto !important;
  }
  .home .seloxa-signup div.wpforms-container-full .wpforms-form button.wpforms-submit {
    width: auto !important;
    height: 52px !important;
    border-radius: 9px !important;
  }
  .home .seloxa-signup div.wpforms-container-full .wpforms-form button.wpforms-submit:hover {
    background: var(--seloxa-ink) !important;   /* white on white would vanish inside the bar */
    color: #ffffff !important;
  }
  /* The error goes below the white bar, not inside it */
  .home .seloxa-signup div.wpforms-container-full .wpforms-form .wpforms-field .wpforms-error {
    position: absolute !important;
    left: 4px !important;
    top: calc(100% + 8px) !important;
    margin: 0 !important;
  }
  .home .seloxa-signup div.wpforms-container-full .wpforms-form input[type="email"].wpforms-error {
    position: static !important;
  }
}


/* ═══════════════════════════════════════════════════════
   39. CANADA-ONLY SHIPPING — announcement bar + notes
   (inc/canada-shipping.php). The bar sits in #page before
   #masthead, in normal flow: .site-header (0-height,
   position: relative) and its absolute logo layer move
   down with it, so the header architecture (4, 13, 14,
   19h/19i) is untouched. Ink Navy + white = 17.1:1.
   The leaf is a red maple leaf on a small white disc
   (the same markup as the age gate's Canada line).
   ═══════════════════════════════════════════════════════ */

/* 39a. Maple leaf disc (also styled inline by the age gate) */
.seloxa-leaf {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px;
  height: 24px;
  background: #ffffff !important;
  border-radius: 50% !important;
  color: #D81602 !important;                   /* logo red, 5.1:1 on white */
}
.seloxa-leaf svg {
  display: block !important;
  width: 66% !important;
  height: 66% !important;
}

/* 39b. Announcement bar */
.seloxa-shipbar {
  position: relative !important;
  z-index: 30 !important;                      /* above the logo layer (20) if they ever meet */
  background: var(--seloxa-ink) !important;
  color: #ffffff !important;
}
.seloxa-shipbar__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.1px !important;
  text-align: center !important;
}
.seloxa-shipbar .seloxa-leaf {
  width: 24px;
  height: 24px;
}
.seloxa-shipbar__text {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px 10px !important;
  min-width: 0 !important;
}
.seloxa-shipbar__sep {
  color: var(--seloxa-teal) !important;        /* decorative */
}
/* Phones (same breakpoint as 19h): leaf on the left, the two phrases
   stacked beside it. One line fits from ~500px. */
@media (max-width: 519px) {
  .seloxa-shipbar__inner {
    gap: 8px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  .seloxa-shipbar__text {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    text-align: left !important;
  }
  .seloxa-shipbar__sep {
    display: none !important;
  }
}

/* 39c. Notes: product buy card, cart + checkout summary cards */
.seloxa-ca-note {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: var(--seloxa-ink) !important;         /* 15.6:1 on Frost */
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
.seloxa-ca-note .seloxa-leaf {
  width: 22px;
  height: 22px;
  box-shadow: 0 0 0 1px var(--seloxa-line) !important;
}
body.single-product .seloxa-pd-buy .seloxa-ca-note--product {
  justify-content: center !important;
  margin: 12px 0 0 !important;
}
/* Cart + checkout live in .entry-content, whose generic paragraph rule
   (body:not(.home) .entry-content p: 16px, #444, 1.8) would otherwise win */
body:not(.home) .entry-content p.seloxa-ca-note {
  color: var(--seloxa-ink) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}
body:not(.home) .entry-content p.seloxa-ca-note--summary,
.seloxa-ca-note--summary {
  margin: 0 0 16px !important;
  padding: 10px 12px !important;
  background: var(--seloxa-frost) !important;
  border-radius: 10px !important;
}

/* 39d. Checkout country as fixed text ("Canada"; a hidden input submits CA) */
body.woocommerce-checkout .seloxa-country-fixed {
  display: block !important;
  padding: 4px 0 2px !important;
  color: var(--seloxa-ink) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}


/* ═══════════════════════════════════════════════════════
   40. MIX & MATCH — both tiers ("Mix & match any 10 vials.
   Save 20%." + "Or mix any 5 vials. Save 5%.")
   Markup from inc/mix-match.php (numbers from the bulk
   pricing tiers). Messaging only; the discount is
   section 35 / inc/bulk-pricing.php. Mobile-first.
   Contrast (measured): white on Deep Ocean 7.05:1 (9.16:1 on
   ocean-dark), Light Teal on Deep Ocean 5.68:1, Frost on Deep
   Ocean 6.33:1, Ink on Light Teal 13.7:1, ocean-dark on Light
   Teal 7.38:1, Ink on Frost 15.3:1, green on its tint 6.25:1.
   Motion: the homepage band is a scroll-motion target (fade +
   rise, seloxa-motion.css/js). The cart bar's fill animates
   (transform only, from seloxa-cart.js); off under reduced
   motion. Nothing else here moves.
   ═══════════════════════════════════════════════════════ */

/* 40a. "10 vials" badge (decorative; the text beside it says the same) */
.seloxa-mm-badge {
  flex: none !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  background: var(--seloxa-teal) !important;
  color: var(--seloxa-ink) !important;
  box-shadow: 0 0 0 6px rgba(211, 235, 240, 0.18), 0 0 0 12px rgba(211, 235, 240, 0.07) !important;
  line-height: 1 !important;
}
.seloxa-mm-badge .seloxa-mm-badge__num {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
}
.seloxa-mm-badge .seloxa-mm-badge__unit {
  margin-top: 3px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--seloxa-ocean-dark) !important; /* 7.38:1 on Light Teal */
}
.seloxa-mm-badge--sm {
  width: 44px !important;
  height: 44px !important;
  box-shadow: 0 0 0 4px rgba(211, 235, 240, 0.18) !important;
}
.seloxa-mm-badge--sm .seloxa-mm-badge__num {
  font-size: 19px !important;
  letter-spacing: -0.5px !important;
}
.seloxa-mm-badge--sm .seloxa-mm-badge__unit {
  display: none !important;
}

/* 40b. Homepage band, directly under the hero. Full-bleed like the signup
   band (12px gutters, 20px corners); Deep Ocean with a soft light spot.
   The spot is 8% Light Teal at most: even blended over the lightest
   stop, Light Teal text stays 4.84:1, Frost 5.4:1, white 6.0:1. */
.home .seloxa-mm-band {
  position: relative !important;
  width: calc(100vw - 24px) !important;
  max-width: none !important;
  margin: 12px 0 48px calc(50% - 50vw + 12px) !important;
  box-sizing: border-box !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  color: #ffffff !important;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(211, 235, 240, 0.08) 0%, rgba(211, 235, 240, 0) 55%),
    linear-gradient(120deg, var(--seloxa-ocean-dark) 0%, var(--seloxa-ocean) 100%) !important;
}
.home .seloxa-mm-band .seloxa-mm-band__inner {
  display: grid !important;
  justify-items: center !important;
  gap: 22px !important;
  padding: 36px 24px 36px !important;
  text-align: center !important;
}
.home .seloxa-mm-band .seloxa-mm-band__title {
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: #ffffff !important;                 /* ≥6.0:1 */
  font-size: clamp(1.625rem, 4.2vw, 2.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px !important;
  text-wrap: balance !important;
}
.home .seloxa-mm-band .seloxa-mm-band__save {
  color: var(--seloxa-teal) !important;      /* ≥4.84:1 */
  white-space: nowrap !important;
}
.home .seloxa-mm-band .seloxa-mm-band__tier {
  margin: 0 0 8px !important;
  color: #ffffff !important;                 /* ≥6.0:1 */
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-wrap: balance !important;
}
.home .seloxa-mm-band .seloxa-mm-band__sub {
  margin: 0 !important;
  color: var(--seloxa-frost) !important;     /* ≥5.4:1 */
  font-size: 16px !important;
  line-height: 1.5 !important;
  text-wrap: pretty !important;
}
.home .seloxa-mm-band a.seloxa-mm-band__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 360px !important;
  min-height: 52px !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--seloxa-teal) !important;
  color: var(--seloxa-ink) !important;       /* 13.7:1 */
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background-color 0.15s ease !important;
}
.home .seloxa-mm-band a.seloxa-mm-band__btn:hover {
  background: #ffffff !important;
  color: var(--seloxa-ink) !important;
}
.home .seloxa-mm-band a.seloxa-mm-band__btn:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 3px !important;
}
@media (prefers-reduced-motion: reduce) {
  .home .seloxa-mm-band a.seloxa-mm-band__btn {
    transition: none !important;
  }
}
@media (min-width: 768px) {
  .home .seloxa-mm-band .seloxa-mm-band__inner {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 32px !important;
    /* same text edge as the signup band (38a) */
    padding: 36px max(30px, calc(25vw - 255px)) !important;
    text-align: left !important;
  }
  .home .seloxa-mm-band a.seloxa-mm-band__btn {
    width: auto !important;
  }
}
@media (min-width: 1024px) {
  .home .seloxa-mm-band .seloxa-mm-band__inner {
    gap: 40px !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .home .seloxa-mm-band .seloxa-mm-badge {
    width: 100px !important;
    height: 100px !important;
  }
  .home .seloxa-mm-band .seloxa-mm-badge__num {
    font-size: 42px !important;
  }
  .home .seloxa-mm-band .seloxa-mm-band__sub {
    font-size: 17px !important;
  }
}

/* 40c. Shop / category strip above the grid */
body:not(.home) .seloxa-mm-strip {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 24px !important;
  padding: 12px 18px 12px 14px !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  background: linear-gradient(120deg, var(--seloxa-ocean-dark) 0%, var(--seloxa-ocean) 100%) !important;
}
body:not(.home) .seloxa-mm-strip .seloxa-mm-strip__text {
  margin: 0 !important;
  color: var(--seloxa-frost) !important;     /* 6.33:1 worst case */
  font-size: 14px !important;
  line-height: 1.4 !important;
}
body:not(.home) .seloxa-mm-strip .seloxa-mm-strip__text strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
}
body:not(.home) .seloxa-mm-strip .seloxa-mm-strip__tier {
  color: #ffffff !important;                 /* 6.0:1 worst case */
  font-weight: 700 !important;
}
body:not(.home) .seloxa-mm-strip .seloxa-mm-strip__save {
  color: var(--seloxa-teal) !important;      /* 5.68:1 worst case */
  white-space: nowrap !important;
}
@media (min-width: 768px) {
  body:not(.home) .seloxa-mm-strip .seloxa-mm-strip__text strong {
    display: inline !important;
    margin-right: 6px !important;
  }
}

/* 40d. Product page: line under the 1 · 5 · 10 selector */
body.single-product .seloxa-mm-line {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: -2px 0 14px !important;
  color: var(--seloxa-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}
body.single-product .seloxa-mm-line .seloxa-mm-vials {
  flex: none !important;
  margin-top: 0 !important;
  color: var(--seloxa-ocean) !important;
}
body.single-product .seloxa-mm-line a {
  color: var(--seloxa-ocean) !important;     /* 7.05:1 on white */
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  white-space: nowrap !important;
}
body.single-product .seloxa-mm-line a:hover {
  color: var(--seloxa-ocean-dark) !important;
}

/* 40e. Progress toward the discount: cart Order summary + mini-cart */
.seloxa-mm-progress {
  box-sizing: border-box !important;
  color: var(--seloxa-ink) !important;
  background: var(--seloxa-frost) !important;
  text-align: left !important;
}
.seloxa-mm-progress p.seloxa-mm-progress__text {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: inherit !important;
  text-align: left !important;
}
.seloxa-mm-progress .seloxa-mm-progress__text strong {
  font-weight: 800 !important;
  color: inherit !important;
}
.seloxa-mm-progress .seloxa-mm-check {
  flex: none !important;
  margin-top: 2px !important;
}
.seloxa-mm-progress .seloxa-mm-progress__track {
  position: relative !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px var(--seloxa-line) !important;
  overflow: hidden !important;
}
.seloxa-mm-progress .seloxa-mm-progress__fill {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: var(--seloxa-ocean) !important; /* 7.05:1 against the white track */
  transform-origin: 0 50% !important;
  transform: scaleX(var(--seloxa-mm-fill, 0)) !important;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* Tier markers: a dot on the track at each tier (5, 10) with "5 · 5%"
   under it. Dot and label are both placed at --seloxa-mm-at of the width and
   shifted left by the same fraction of their own width, so the middle
   marker is centred on its point and the last one ends flush right. */
.seloxa-mm-progress .seloxa-mm-progress__bar {
  position: relative !important;
  padding-bottom: 20px !important;
}
.seloxa-mm-progress .seloxa-mm-progress__mark {
  position: absolute !important;
  top: 0 !important;
  left: calc(var(--seloxa-mm-at) * 100%) !important;
  width: 0 !important;
}
.seloxa-mm-progress .seloxa-mm-progress__dot,
.seloxa-mm-progress .seloxa-mm-progress__label {
  position: absolute !important;
  left: 0 !important;
  transform: translateX(calc(var(--seloxa-mm-at) * -100%)) !important;
}
.seloxa-mm-progress .seloxa-mm-progress__dot {
  top: -3px !important;
  width: 14px !important;
  height: 14px !important;
  box-sizing: border-box !important;
  border: 2px solid #6B7C81 !important;      /* 4.3:1 on white/Frost (non-text) */
  border-radius: 50% !important;
  background: #ffffff !important;
}
.seloxa-mm-progress .is-reached .seloxa-mm-progress__dot {
  border-color: var(--seloxa-ocean) !important;
  background: var(--seloxa-ocean) !important;
  box-shadow: 0 0 0 2px #ffffff !important;
}
.seloxa-mm-progress .seloxa-mm-progress__label {
  top: 15px !important;
  color: #555555 !important;                 /* 6.7:1 on Frost, 6.6:1 on green tint */
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.seloxa-mm-progress .is-reached .seloxa-mm-progress__label {
  color: var(--seloxa-ocean-dark) !important; /* 8.2:1 on Frost */
}
.seloxa-mm-progress.is-mid .seloxa-mm-check {
  color: var(--seloxa-ocean) !important;
}
.seloxa-mm-progress.is-on .is-reached .seloxa-mm-progress__dot {
  border-color: var(--seloxa-green) !important;
  background: var(--seloxa-green) !important;
}
.seloxa-mm-progress.is-on .is-reached .seloxa-mm-progress__label {
  color: var(--seloxa-green) !important;     /* 6.25:1 on green tint */
}
.seloxa-mm-progress.is-on {
  background: var(--seloxa-green-tint) !important;
  color: var(--seloxa-green) !important;     /* 6.25:1 on green tint */
}
.seloxa-mm-progress.is-on .seloxa-mm-progress__fill {
  background: var(--seloxa-green) !important;
}
@media (prefers-reduced-motion: reduce) {
  .seloxa-mm-progress .seloxa-mm-progress__fill {
    transition: none !important;
  }
}
/* Cart: a card above Proceed to checkout */
body.woocommerce-cart .cart_totals .seloxa-mm-progress {
  margin: 0 0 12px !important;
  padding: 12px 14px 14px !important;
  border-radius: 12px !important;
}
body.woocommerce-cart .cart_totals .seloxa-mm-progress p.seloxa-mm-progress__text {
  color: inherit !important;               /* not the cart's grey paragraph colour */
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}
/* Header mini-cart: a compact strip above View cart / Checkout */
.site-header-cart .widget_shopping_cart .seloxa-mm-progress {
  margin: 0 !important;
  padding: 12px 16px 4px !important;
  border-top: 1px solid var(--seloxa-line) !important;
  background: var(--seloxa-mist) !important;
}
.site-header-cart .widget_shopping_cart .seloxa-mm-progress.is-on {
  background: var(--seloxa-green-tint) !important;
  padding-bottom: 12px !important;
}
.site-header-cart .widget_shopping_cart .seloxa-mm-progress p.seloxa-mm-progress__text {
  margin-bottom: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
.site-header-cart .widget_shopping_cart .seloxa-mm-progress .seloxa-mm-progress__track {
  height: 6px !important;
}
.site-header-cart .widget_shopping_cart .seloxa-mm-progress .seloxa-mm-progress__dot {
  top: -3px !important;
  width: 12px !important;
  height: 12px !important;
}
.site-header-cart .widget_shopping_cart .seloxa-mm-progress .seloxa-mm-progress__label {
  top: 12px !important;
  font-size: 11px !important;
}
.site-header-cart .widget_shopping_cart .seloxa-mm-progress .seloxa-mm-progress__bar {
  padding-bottom: 16px !important;
}

/* 40f. Checkout: tip row where the discount row would be */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.seloxa-mm-tip td {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  color: var(--seloxa-ocean-dark) !important; /* ≥8.2:1 on white/Frost */
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-align: left !important;
}
/* The rows are flex (33): keep the discount amount on the right when the
   longer "Mix & match discount (10+ vials)" label wraps on phones. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.seloxa-bulk-row {
  flex-wrap: nowrap !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.seloxa-bulk-row th {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.seloxa-bulk-row td {
  flex: none !important;
  white-space: nowrap !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.seloxa-mm-tip td {
  flex: 1 1 100% !important;
}

/* ==========================================================================
   41. Business-card codes (inc/card-codes.php)
   ========================================================================== */
/* 41a. Cart + checkout: the card row is printed after the mix & match row
   (.seloxa-card-row); WooCommerce's own coupon row for the same card code,
   which it prints straight after Subtotal, is hidden. Only card codes
   (coupon-slx-…); any other coupon row is untouched. Colours come from the
   .cart-discount rules (32/33: green, 7.22:1). */
body.woocommerce-cart .cart_totals tr.cart-discount[class*="coupon-slx-"]:not(.seloxa-card-row),
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart-discount[class*="coupon-slx-"]:not(.seloxa-card-row) {
  display: none !important;
}
body.woocommerce-cart .cart_totals tr.seloxa-card-row td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.seloxa-card-row td {
  font-weight: 700 !important;
}
.seloxa-card-code {
  white-space: nowrap;
}
body.woocommerce-cart .cart_totals tr.seloxa-card-row a.woocommerce-remove-coupon,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.seloxa-card-row a.woocommerce-remove-coupon {
  font-weight: 400 !important;
}
/* Checkout rows are flex (33): label wraps, amount + Remove stay on the right. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.seloxa-card-row {
  flex-wrap: nowrap !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.seloxa-card-row th {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.seloxa-card-row td {
  flex: none !important;
  text-align: right !important;
}

/* ==========================================================================
   42. Pre-orders (inc/preorders.php)
   ========================================================================== */
/* 42a. Pre-order cards (shop, category, related, homepage): "OUT OF STOCK"
   is the dominant element, the Out of stock button's own size and red
   (#D81602 on #FFEDEB, 4.60:1; not a control), in the button's place. The
   "Pre-order · Save 5%" button under it is the secondary action: slimmer
   (40px on phones, 36px from 600px), white with a thin Deep Ocean outline,
   sentence case (Ocean Dark on white 9.16:1, on Frost hover 8.23:1). Every
   other card has an empty .seloxa-po-slot after its button of exactly that
   height + gap, opened only while the grid holds a pre-order card, so the
   big buttons and card bottoms line up across each row. */
.seloxa-oos-flag {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 42px !important;          /* = the card button (29e) */
  margin: 0 0 6px !important;
  padding: 10px 12px !important;
  align-self: stretch !important;       /* homepage: the block button's flex wrapper */
  border-radius: 10px !important;
  background: var(--seloxa-red-tint) !important;
  color: var(--seloxa-red) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
ul.products li.product .button.seloxa-preorder-btn,
.home .wc-block-product-template li.wc-block-product .wp-block-button__link.seloxa-preorder-btn {
  flex-wrap: wrap !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 2px 8px !important;
  background: #ffffff !important;
  color: var(--seloxa-ocean-dark) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1.5px var(--seloxa-ocean) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  opacity: 1 !important;
}
ul.products li.product .button.seloxa-preorder-btn:hover,
.home .wc-block-product-template li.wc-block-product .wp-block-button__link.seloxa-preorder-btn:hover {
  background: var(--seloxa-frost) !important;
  color: var(--seloxa-ocean-dark) !important;
}
.seloxa-preorder-btn .seloxa-po-btn__a,
.seloxa-preorder-btn .seloxa-po-btn__b {
  white-space: nowrap;
}
.seloxa-preorder-btn .seloxa-po-btn__b {
  font-weight: 800;
}
.seloxa-po-slot {
  display: none !important;
}
ul.products:has(.seloxa-oos-flag) .seloxa-po-slot,
.wc-block-product-template:has(.seloxa-oos-flag) .seloxa-po-slot {
  display: block !important;
  visibility: hidden !important;
  height: 40px !important;
  margin: 6px 0 0 !important;
}
/* Narrow phone cards: "Pre-order" over "Save 5%" (still 40px) */
@media (max-width: 399px) {
  .seloxa-preorder-btn .seloxa-po-btn__sep {
    display: none;
  }
  ul.products li.product .button.seloxa-preorder-btn,
  .home .wc-block-product-template li.wc-block-product .wp-block-button__link.seloxa-preorder-btn {
    flex-direction: column !important;
  }
}
@media (min-width: 600px) {
  ul.products li.product .button.seloxa-preorder-btn,
  .home .wc-block-product-template li.wc-block-product .wp-block-button__link.seloxa-preorder-btn,
  ul.products:has(.seloxa-oos-flag) .seloxa-po-slot,
  .wc-block-product-template:has(.seloxa-oos-flag) .seloxa-po-slot {
    min-height: 36px !important;
    height: 36px !important;
  }
}
/* Product page: the same order. "OUT OF STOCK" at the top of the buy card at
   the size of the main button (52px); the Pre-order button slimmer (44px,
   outlined), its quantity box matching. */
body.single-product .seloxa-pd-buy .seloxa-oos-flag--pd {
  min-height: 52px !important;
  margin: 0 0 12px !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
}
body.single-product div.product.onbackorder .seloxa-pd-buy form.cart .single_add_to_cart_button.button {
  height: 44px !important;
  background: #ffffff !important;
  color: var(--seloxa-ocean-dark) !important;
  box-shadow: inset 0 0 0 1.5px var(--seloxa-ocean) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
}
body.single-product div.product.onbackorder .seloxa-pd-buy form.cart .single_add_to_cart_button.button:hover {
  background: var(--seloxa-frost) !important;
}
body.single-product div.product.onbackorder .seloxa-pd-buy form.cart .quantity .qty {
  height: 44px !important;
}
/* Low stock: "10 vials: 7 ship now, 3 pre-order" under the card row */
.seloxa-pick--card .seloxa-pick__why--po {
  color: var(--seloxa-ocean-dark) !important; /* 9.16:1 on white */
}

/* 42b. Product page: notice in the buy card (the red label is in 42a; the
   price-row pill stays the red "Out of stock", section 30), row tag */
body.single-product .seloxa-pd-buy .seloxa-po-note {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  margin: 0 0 14px !important;
  padding: 12px 14px !important;
  border: 1.5px solid var(--seloxa-ocean) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: var(--seloxa-ink) !important;   /* 17.06:1 */
  font-size: 14px !important;
  line-height: 1.5 !important;
}
body.single-product .seloxa-pd-buy .seloxa-po-note strong {
  display: block !important;
  color: var(--seloxa-ink) !important;
}
.seloxa-po-note__icon {
  flex: 0 0 18px;
  margin-top: 2px;
  color: var(--seloxa-ocean);
}
.seloxa-pick .seloxa-pick__tag.seloxa-po-tag {
  background: var(--seloxa-frost) !important;
  color: var(--seloxa-ocean-dark) !important; /* 8.23:1 */
  box-shadow: inset 0 0 0 1px var(--seloxa-ocean) !important;
}

/* 42c. Cart, mini-cart, checkout: badge + "Ships separately when restocked"
   under a pre-order line's name; the summary notes. */
.seloxa-po-badge {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--seloxa-ocean);
  color: #ffffff;                     /* 7.05:1 */
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 1.6;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.seloxa-po-ships {
  display: block;
  margin-top: 2px;
  color: var(--seloxa-ocean-dark);    /* 9.16:1 on white */
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
.seloxa-po-sumnote,
body:not(.home) .entry-content p.seloxa-po-sumnote {
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  border: 1.5px solid var(--seloxa-ocean) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: var(--seloxa-ink) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* 42d. Order-received / My account order: the note above the items */
.seloxa-po-ordernote,
body:not(.home) .entry-content p.seloxa-po-ordernote {
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  border: 1.5px solid var(--seloxa-ocean) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: var(--seloxa-ink) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}