/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* =========================================================================
   Elivena – WooCommerce classic templates (cart, checkout, my account,
   notices). Everything references the Bricks global variables so a token
   change in the builder restyles these pages too. 1rem = 10px (Bricks).
   ========================================================================= */

/* --- Buttons inside WooCommerce markup ---------------------------------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page .button {
	background: var(--c-navy);
	color: #fff;
	border: 1px solid var(--c-navy);
	border-radius: var(--radius-button);
	padding: 1.2rem 2.2rem;
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 1.2;
	transition: background .2s, border-color .2s;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	background: var(--c-violet-dark);
	border-color: var(--c-violet-dark);
	color: #fff;
}
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
	background: var(--c-violet);
	border-color: var(--c-violet);
}
.woocommerce .button.alt:hover {
	background: var(--c-violet-dark);
	border-color: var(--c-violet-dark);
}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--c-navy);
	color: #fff;
	opacity: .5;
}

/* --- Notices -------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper > div {
	border-top: 0;
	border-left: 4px solid var(--c-violet);
	background: #fff; /* white: the cart/checkout sections behind them are lavender */
	color: var(--c-navy);
	border-radius: var(--radius-image);
	font-size: 1.5rem;
	padding: 1.6rem 2rem 1.6rem 5.2rem;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--c-violet); top: 1.7rem; left: 2rem; }
.woocommerce-error { border-left-color: #c62828; background: #fff; }
.woocommerce-error::before { color: #c62828; }
.woocommerce-message { border-left-color: var(--c-mint-dark); background: #fff; }
.woocommerce-message::before { color: var(--c-mint-dark); }

/* --- Forms ---------------------------------------------------------------- */
.woocommerce form .form-row label { font-size: 1.4rem; font-weight: 600; color: var(--c-navy); margin-bottom: .4rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce table.shop_table td.product-quantity input,
.woocommerce .coupon input.input-text {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-form);
	background: #fff;
	color: var(--c-ink);
	font-size: 1.5rem;
	padding: 1.1rem 1.4rem;
	line-height: 1.4;
	min-height: 4.6rem;
}
.woocommerce .select2-container--default .select2-selection--single { height: 4.6rem; display: flex; align-items: center; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 4.4rem; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--c-violet); outline: 0; box-shadow: 0 0 0 3px rgba(121,115,239,.2); }
.woocommerce form .form-row.woocommerce-invalid .select2-container,
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #c62828; }

/* --- Tables (cart, order review, orders) --------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 1.5rem;
}
.woocommerce table.shop_table th { background: var(--c-lavender-light); color: var(--c-navy); font-weight: 600; padding: 1.4rem 1.6rem; }
.woocommerce table.shop_table td { padding: 1.4rem 1.6rem; border-top: 1px solid var(--c-border); vertical-align: middle; }
.woocommerce table.shop_table td.product-name a { color: var(--c-navy); font-weight: 600; text-decoration: none; }
.woocommerce table.shop_table td.product-thumbnail img { width: 6.4rem; border-radius: var(--radius-image); background: var(--c-lavender-light); }
.woocommerce a.remove { color: var(--c-muted) !important; }
.woocommerce a.remove:hover { background: var(--c-navy); color: #fff !important; }
.woocommerce .cart-collaterals .cart_totals { width: 100%; max-width: 44rem; }
.woocommerce .cart-collaterals .cart_totals h2 { font-size: 2rem; margin-bottom: 1.2rem; }
.woocommerce .cart .coupon { display: flex; gap: .8rem; }
.woocommerce .cart .coupon .input-text { width: 20rem !important; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { font-size: 1.6rem; padding: 1.4rem 2.4rem; }

/* --- Checkout ------------------------------------------------------------- */
.woocommerce-checkout h3 { font-size: 2rem; margin: 0 0 1.6rem; }
.woocommerce-checkout #order_review_heading { margin-top: 3.2rem; }
.woocommerce-checkout #payment { background: var(--c-lavender-light); border-radius: var(--radius-card); }
.woocommerce-checkout #payment div.payment_box { background: #fff; border-radius: var(--radius-image); color: var(--c-ink); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--c-border); padding: 1.6rem; }
.woocommerce-checkout #payment .place-order { padding: 1.6rem; }
.woocommerce-checkout #payment #place_order { width: 100%; font-size: 1.6rem; padding: 1.6rem; }
.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 1.3rem; color: var(--c-muted); }

/* --- My account ----------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 24rem; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 1rem 1.4rem;
	border-radius: var(--radius-image);
	color: var(--c-navy);
	font-size: 1.5rem;
	font-weight: 500;
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--c-lavender-light); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--c-navy); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content { width: calc(100% - 28rem); font-size: 1.5rem; }
.woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 2rem; margin: 0 0 1.2rem; }
.woocommerce-account .woocommerce-MyAccount-content p { margin-bottom: 1.2rem; }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--c-violet-dark); }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button { padding: .8rem 1.4rem; font-size: 1.3rem; }

/* Login / register (my-account when logged out) */
.woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; }
.woocommerce-account .u-columns.col2-set .col-1, .woocommerce-account .u-columns.col2-set .col-2 { width: auto; float: none; }
.woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	padding: 2.8rem;
	background: #fff;
	box-shadow: var(--shadow-soft);
}
.woocommerce form.login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: .6rem; font-size: 1.4rem; }
.woocommerce form.login .lost_password { font-size: 1.4rem; }

@media (max-width: 767px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; margin-bottom: 2rem; }
	.woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; }
}

/* --- Bricks outline buttons: theme style sets primary text to white, which hides outline buttons on light backgrounds --- */
.bricks-button.outline.bricks-color-primary { color: var(--c-navy); background: transparent; border-color: var(--c-border); }
.bricks-button.outline.bricks-color-primary:hover { background: var(--c-lavender-light); border-color: var(--c-navy); color: var(--c-navy); }
.bricks-button.outline.bricks-color-light { color: #fff; border-color: rgba(255,255,255,.6); }
.bricks-button.outline.bricks-color-light:hover { background: rgba(255,255,255,.12); color: #fff; }

/* --- Layout guards --- */
/* Off-canvas mobile menu sits off-screen to the right; clip so it never creates a horizontal scrollbar. */
html, body { overflow-x: clip; }
/* Bricks list element: keep icon + text left-aligned (default is space-between). */
.brxe-list li .content { justify-content: flex-start; gap: 1rem; }

/* --- Inline SVG icons (Font Awesome SVG files, no icon font loaded) ---
   Bricks only gives inline SVGs a 1em minimum, so size them like glyphs: 1em of the parent font-size. */
svg.brxe-icon,
.bricks-button > svg,
.brxe-search button svg,
.brx-submenu-toggle svg,
.bricks-mobile-menu-toggle svg,
.mini-cart-link svg,
.brxe-filter-active-filters svg,
.bricks-pagination svg,
.brxe-accordion .accordion-title-wrapper svg,
.brxe-list .icon svg,
.brxe-breadcrumbs svg,
.brxe-text-link svg { width: 1em; height: 1em; flex-shrink: 0; }
.mini-cart-link svg { width: 2rem; height: 2rem; color: var(--c-navy); }
.bricks-button > svg { margin: 0; }

/* Header nav: never wrap a menu label. */
.bricks-nav-menu > li > a, .bricks-nav-menu .brx-submenu-toggle > a { white-space: nowrap; }

/* --- Footer menus: no inherited list padding/indent --- */
#brx-footer .brxe-nav-menu .bricks-nav-menu, #brx-footer .brxe-nav-menu .bricks-nav-menu li { padding: 0; margin: 0; }
#brx-footer .brxe-nav-menu .bricks-nav-menu > li > a { padding: 0; }

/* --- Header search: icon inside the field, on the right --- */
#brx-header .brxe-search form.bricks-search-form { position: relative; }
#brx-header .brxe-search input[type=search] { padding-right: 4.2rem; }
#brx-header .brxe-search button[type=submit] { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 0.6rem; line-height: 0; }
#brx-header .brxe-search button[type=submit]:hover { color: var(--c-navy); }

/* --- First Ideas syringe calculator: brand colours instead of the module's teal --- */
.fi-jt-syringe-calculator__eyebrow { color: var(--c-violet-dark) !important; }
.fi-jt-syringe-calculator input:focus, .fi-jt-syringe-calculator select:focus { border-color: var(--c-violet) !important; box-shadow: 0 0 0 3px rgba(121,115,239,.2) !important; }
.fi-jt-syringe-calculator__step { background: var(--c-navy) !important; color: #fff !important; }
.fi-jt-syringe-calculator__pill input:checked + span { background: var(--c-navy) !important; border-color: var(--c-navy) !important; color: #fff !important; }
.fi-jt-syringe-calculator__result strong { color: var(--c-navy) !important; }
.fi-jt-syringe-calculator__order { background: var(--c-lavender-light) !important; border-color: var(--c-lavender) !important; color: var(--c-navy) !important; }
.fi-jt-syringe-calculator__order a { color: var(--c-violet-dark) !important; }
.fi-jt-syringe-calculator__guide-text { color: var(--c-navy) !important; background: var(--c-lavender-light) !important; }
.fi-jt-syringe-calculator__fill { background: linear-gradient(90deg, var(--c-violet), var(--c-navy)) !important; }
.fi-jt-syringe-calculator__card { border-color: var(--c-border) !important; border-radius: var(--radius-card) !important; }

/* --- Header nav: keep the whole bar inside the container --- */
#brx-header .brxe-nav-menu .bricks-nav-menu > li > a, #brx-header .brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle > * { padding-left: 0.8rem; padding-right: 0.8rem; }
#brx-header .brxe-nav-menu { flex-shrink: 1; min-width: 0; }

/* --- Bulk buy table --- */
.elivena-bulk{overflow-x:auto;border:1px solid var(--c-border);border-radius:var(--radius-card);background:#fff}
.elivena-bulk__table{width:100%;border-collapse:collapse;font-size:1.4rem}
.elivena-bulk__table th{position:sticky;top:0;background:var(--c-lavender-light);color:var(--c-navy);text-align:left;padding:1.2rem 1.4rem;font-weight:700;white-space:nowrap}
.elivena-bulk__table td{padding:1rem 1.4rem;border-top:1px solid var(--c-border);vertical-align:middle;white-space:nowrap}
.elivena-bulk__cat td{background:var(--c-cream);font-weight:700;color:var(--c-violet-dark);font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase}
.elivena-bulk__prod{display:flex;align-items:center;gap:1.2rem;min-width:26rem}
.elivena-bulk__prod img{width:4.4rem;height:4.4rem;object-fit:contain;background:var(--c-lavender-light);border-radius:.8rem;padding:.3rem}
.elivena-bulk__prod a{color:var(--c-navy);font-weight:600;text-decoration:none;white-space:normal}
.elivena-bulk__price{font-weight:600;color:var(--c-navy)}
.elivena-bulk__save{display:block;font-size:1.1rem;font-weight:600;color:var(--c-mint-dark)}
.elivena-bulk__na{color:var(--c-muted)}
.elivena-bulk tr:hover td{background:#fbfaf7}

/* --- Homepage best-seller category tabs --- */
.bs-tabs { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.bs-tabs .bs-tab { display: inline-flex; align-items: center; padding: 0.7rem 1.4rem; border: 1px solid var(--c-border); border-radius: 999px; background: #fff; color: var(--c-navy); font-size: 1.3rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; width: auto; }
.bs-tabs .bs-tab:hover { background: var(--c-lavender-light); }
.bs-tabs .bs-tab.is-active { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
#brxe-hmtopg > .brxe-hmtopl.is-hidden { display: none; }

/* --- Header: icon-only links keep their padding outside the glyph box --- */
#brx-header svg.brxe-icon { box-sizing: content-box; }

/* --- Header dropdown (Categories) --- */
#brx-header .brxe-nav-menu .sub-menu { padding: 0.6rem 0; min-width: 24rem; }
#brx-header .brxe-nav-menu .sub-menu > li { margin: 0; }
#brx-header .brxe-nav-menu .sub-menu > li > a { display: block; line-height: 1.3; padding: 0.8rem 1.6rem; font-size: 1.4rem; border-radius: 0; }
#brx-header .brxe-nav-menu .sub-menu > li > a:hover { background: var(--c-lavender-light); }

/* --- NEW pill on the Build a Box menu item --- */


/* --- Lab-tested badge (cards, product page, homepage) --- */
.lab-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem 0.45rem 0.7rem; border-radius: 999px; background: var(--c-mint); color: var(--c-mint-dark); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.lab-badge svg { width: 1.3rem; height: 1.3rem; }
.lab-badge--card { position: absolute; top: 1.6rem; left: 1.6rem; z-index: 2; }
.lab-badge--lg { font-size: 1.2rem; padding: 0.6rem 1.2rem 0.6rem 0.9rem; }
.lab-badge--lg svg { width: 1.6rem; height: 1.6rem; }

/* --- Header: tighter nav so the account/cart icons never overlap the last item --- */
#brx-header .brxe-nav-menu .bricks-nav-menu > li > a, #brx-header .brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle > * { padding-left: 0.7rem; padding-right: 0.7rem; font-size: 1.35rem; }
#brx-header .brxe-search input[type=search] { width: 18rem !important; }
#brx-header .brxe-nav-menu { margin-left: 0 !important; }
#brxe-hdrmac { justify-content: space-between; }


/* Quiz: result step shows real product cards (Card – Product template via REST), so the popup widens */
.brx-popup[data-popup-id="480"].qz-wide .brx-popup-content { max-width: 104rem; }
.qz-results .qz-card > .brxe-block { height: 100%; }
.qz-results[aria-busy="true"] { min-height: 8rem; }

/* Respect reduced-motion: stop the floating vial animations */
@media (prefers-reduced-motion: reduce) { .hv-orb, .vial, .bx-vial { animation: none !important; } }


/* Mobile: bulk table */
@media (max-width: 767px) {
  .elivena-bulk__table { font-size: 1.3rem; }
  .elivena-bulk__table td, .elivena-bulk__table th { padding: .9rem 1rem; }
  .elivena-bulk__prod { min-width: 17rem; gap: .8rem; }
  .elivena-bulk__prod img { width: 3.2rem; height: 3.2rem; }
  .elivena-bulk__table td.elivena-bulk__prod, .elivena-bulk__table th.elivena-bulk__prod { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 4px 0 8px -6px rgba(11,11,59,.25); }
  .elivena-bulk__table th.elivena-bulk__prod { background: var(--c-lavender-light); z-index: 2; }
  .elivena-bulk__cat td { position: sticky; left: 0; }
}
/* Mobile: syringe graphic must not exceed the card */
[id^="fi-jt-syringe-calculator"][id*="-syringe-"], .fi-jt-syringe-calculator svg { max-width: 100%; height: auto; }

/* Mobile: off-canvas menu — Bricks renders it as ul.bricks-mobile-menu; keep the first item clear of the close button */
@media (max-width: 991px) {
  #brx-header .brxe-nav-menu .bricks-mobile-menu { padding-top: 11rem; }
  #brx-header .brxe-nav-menu .bricks-mobile-menu > li > a, #brx-header .brxe-nav-menu .bricks-mobile-menu > li > .brx-submenu-toggle > a { font-size: 1.6rem; }
}

/* Headings: breathing room when an h1/h2 is immediately followed by a layout block (loops, grids, forms) */
:is(h1, h2).brxe-heading + :is(.brxe-block, .brxe-div, .brxe-container, .brxe-accordion, .brxe-form, .brxe-shortcode) { margin-top: 1.2rem; }
/* Header: keep the dropdown caret tight to its label */
#brx-header .brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle { gap: 0; }
#brx-header .brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle > a { padding-right: 0 !important; }
#brx-header .brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle > button { padding-left: 0.2rem !important; padding-right: 0.7rem !important; margin: 0; width: auto; }

/* Bulk buy: search box above the table */
.elivena-bulk__search { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--c-border); background: #fff; position: sticky; left: 0; }
.elivena-bulk__q { flex: 1 1 auto; min-width: 0; max-width: 36rem; height: 4.4rem; padding: 0 1.4rem 0 4rem; border: 1px solid var(--c-border); border-radius: 999px; font: inherit; font-size: 1.4rem; color: var(--c-navy); background: var(--c-lavender-light) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236B6B8A'><path d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/></svg>") no-repeat 1.4rem center / 1.8rem; }
.elivena-bulk__q:focus { outline: none; border-color: var(--c-violet); background-color: #fff; box-shadow: 0 0 0 3px rgba(121,115,239,.2); }
.elivena-bulk__count { font-size: 1.3rem; color: var(--c-muted); white-space: nowrap; }

/* COA panel + modal */
.coa-panel { display: grid; grid-template-columns: minmax(28rem, 34rem) minmax(0, 1fr); gap: 2rem; width: 100%; }
@media (max-width: 991px) { .coa-panel { grid-template-columns: 1fr; } }
.coa-card { background: var(--c-navy); color: #fff; border-radius: var(--radius-card); padding: 2.4rem; display: flex; flex-direction: column; gap: 1.6rem; position: relative; overflow: hidden; }
.coa-card::after { content: ""; position: absolute; inset: auto -6rem -8rem auto; width: 22rem; height: 22rem; border-radius: 50%; background: radial-gradient(circle, rgba(121,115,239,.45), transparent 70%); pointer-events: none; }
.coa-card__eyebrow { font-size: 1.1rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.coa-modal .coa-card__eyebrow { color: var(--c-muted); }
.coa-card__hero { display: flex; align-items: center; gap: 1.6rem; }
.coa-ring { width: 8.4rem; height: 8.4rem; transform: rotate(-90deg); flex: 0 0 8.4rem; }
.coa-ring-bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 9; }
.coa-ring-fg { fill: none; stroke: var(--c-mint); stroke-width: 9; stroke-linecap: round; }
.coa-card__big { font-size: 4.4rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--c-mint); }
.coa-card__big span { font-size: 2.2rem; margin-left: .2rem; }
.coa-card__sub { font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: .4rem; }
.coa-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; margin: 0; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.12); }
.coa-card__facts dt { font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .3rem; }
.coa-card__facts dd { margin: 0; font-size: 1.5rem; font-weight: 600; }
.coa-card__facts dd.is-good { color: var(--c-mint); }
.coa-card__chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.coa-chip { font-size: 1.05rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85); }
.coa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; background: #fff; color: var(--c-navy); font-weight: 700; font-size: 1.4rem; padding: 1.2rem 1.8rem; border-radius: var(--radius-button); text-decoration: none; transition: transform .2s, background .2s; position: relative; z-index: 1; }
.coa-btn:hover { background: var(--c-lavender-light); transform: translateY(-1px); }
.coa-btn svg { width: 1.6rem; height: 1.6rem; }
.coa-qc { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1.4rem; background: #fff; border: 1px solid #D8D8EA; border-radius: var(--radius-card); overflow: hidden; }
.coa-qc th, .coa-qc td { padding: 1.3rem 1.6rem; text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.coa-qc thead th { font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); background: var(--c-lavender-light); }
.coa-qc tbody tr:last-child td { border-bottom: 0; }
.coa-qc td:first-child { font-weight: 600; color: var(--c-navy); }
.coa-qc small { display: block; font-size: 1.15rem; color: var(--c-muted); }
.coa-qc--tight td { padding: .9rem 1rem; }
.coa-badge { display: inline-block; font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; padding: .35rem .8rem; border-radius: 999px; white-space: nowrap; }
.coa-badge.is-pass { background: var(--c-mint); color: var(--c-mint-dark); }
.coa-badge.is-fail { background: #FDECEC; color: #B42318; }
.coa-badge.is-info { background: var(--c-lavender-light); color: var(--c-violet-dark); }
.coa-modal { display: flex; flex-direction: column; gap: 2.4rem; }
.coa-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.coa-modal__head h2 { margin: .4rem 0 0; font-size: 2.6rem; }
.coa-close { font-size: 1.8rem; color: var(--c-navy); text-decoration: none; padding: .4rem .8rem; }
.coa-lot { border: 1px solid var(--c-border); border-radius: var(--radius-card); padding: 2rem 2.4rem; display: flex; flex-direction: column; gap: 1.6rem; }
.coa-lot__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .6rem 2rem; font-size: 1.5rem; }
.coa-lot__meta { font-size: 1.25rem; color: var(--c-muted); }
.coa-compound + .coa-compound { border-top: 1px solid var(--c-border); padding-top: 1.6rem; }
.coa-compound__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.4rem; }
@media (max-width: 991px) { .coa-compound__grid { grid-template-columns: 1fr; } }
.coa-compound h3 { font-size: 1.8rem; margin: 0 0 1rem; }
.coa-compound h3 small { display: block; font-size: 1.2rem; font-weight: 500; color: var(--c-muted); margin-top: .3rem; }
.coa-figs { display: flex; flex-direction: column; gap: 1.6rem; }
.coa-figs figure { margin: 0; border: 1px solid var(--c-border); border-radius: var(--radius-image); padding: 1.2rem; background: #fff; }
.coa-figs figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 1.2rem; font-weight: 600; color: var(--c-navy); margin-bottom: .8rem; }
.coa-figs img { width: 100%; height: auto; display: block; }
.coa-figtoggle { display: inline-flex; border: 1px solid var(--c-border); border-radius: 999px; overflow: hidden; }
.coa-figtoggle button { font: inherit; font-size: 1.1rem; font-weight: 600; padding: .3rem .9rem; border: 0; background: #fff; color: var(--c-muted); cursor: pointer; }
.coa-figtoggle button.is-on { background: var(--c-navy); color: #fff; }
.coa-chart { width: 100%; height: auto; display: block; }
.coa-grid { stroke: var(--c-border); stroke-width: 1; }
.coa-tick, .coa-axis { font-size: 11px; fill: var(--c-muted); font-family: inherit; }
.coa-area { fill: rgba(121,115,239,.18); }
.coa-line { fill: none; stroke: var(--c-violet); stroke-width: 2; stroke-linejoin: round; }
.coa-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem 2rem; font-size: 1.4rem; }
.coa-files a { color: var(--c-violet-dark); font-weight: 600; }
.coa-pdf { width: 100%; height: 70vh; border: 1px solid var(--c-border); border-radius: var(--radius-image); }
.coa-login { font-size: 1.4rem; color: var(--c-muted); margin: 0; }
.brx-popup[data-popup-id="2324"] .brx-popup-content { max-width: 108rem; }
/* COA: phones — QC table becomes stacked rows, wide modal tables scroll */
@media (max-width: 767px) {
  .coa-panel .coa-qc thead { display: none; }
  .coa-panel .coa-qc tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--c-border); }
  .coa-panel .coa-qc tr:last-child { border-bottom: 0; }
  .coa-panel .coa-qc td { border: 0; padding: 0; }
  .coa-panel .coa-qc td:nth-child(1) { grid-area: 1 / 1; }
  .coa-panel .coa-qc td:nth-child(2) { grid-area: 3 / 1 / 4 / 3; font-size: 1.15rem; color: var(--c-muted); }
  .coa-panel .coa-qc td:nth-child(3) { grid-area: 2 / 1 / 3 / 3; font-size: 1.5rem; margin: .2rem 0; }
  .coa-panel .coa-qc td:nth-child(4) { grid-area: 1 / 2; }
  .coa-qc small { display: inline; margin-left: .4rem; }
  .coa-lot { padding: 1.6rem; }
  .coa-lot > .coa-qc { display: block; overflow-x: auto; white-space: nowrap; }
  .coa-modal__head h2 { font-size: 2rem; }
  .coa-pdf { height: 60vh; }
}

.elivena-bulk__dose { display: inline-block; margin-left: .6rem; font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; padding: .2rem .7rem; border-radius: 999px; background: var(--c-lavender-light); color: var(--c-violet-dark); vertical-align: middle; }

.price-from { font-size: .75em; font-weight: 500; color: var(--c-muted); margin-right: .1em; }


/* --- COA purity badge + lite popup (loops) --- */
.lab-badge--btn { cursor: pointer; border: 0; font: inherit; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; gap: 0.45rem; padding-right: 0.7rem; transition: background .2s, color .2s; }
.lab-badge--btn b { font-weight: 800; letter-spacing: 0; text-transform: none; font-size: 1.2rem; }
.lab-badge__sep { opacity: .55; }
.lab-badge__chev { width: 1rem !important; height: 1rem !important; opacity: .7; }
.lab-badge--btn:hover, .lab-badge--btn:focus-visible { background: var(--c-mint-dark); color: #fff; outline: none; }
.lab-badge--lg.lab-badge--btn { font-size: 1.2rem; }
.lab-badge--lg.lab-badge--btn b { font-size: 1.4rem; }
.coa-lite-overlay { position: fixed; inset: 0; z-index: 10050; background: rgba(5,5,58,.62); display: none; align-items: flex-start; justify-content: center; padding: 4vh 1.6rem; overflow: auto; }
.coa-lite-overlay.is-open { display: flex; }
.coa-lite-lock { overflow: hidden; }
.coa-lite-dialog { width: 100%; max-width: 76rem; background: #fff; border-radius: var(--radius-card); box-shadow: 0 40px 80px -30px rgba(5,5,58,.5); animation: coaLiteIn .22s ease-out; }
@keyframes coaLiteIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.coa-lite-body { padding: 2.4rem; }
.coa-lite__loading { padding: 4rem 0; text-align: center; color: var(--c-muted); }
.coa-lite__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.6rem; margin-bottom: 1.6rem; }
.coa-lite__head h2 { font-size: 2.2rem; margin: .2rem 0 .4rem; color: var(--c-navy); }
.coa-lite__meta { font-size: 1.3rem; color: var(--c-muted); }
.coa-lite__purity b { color: var(--c-mint-dark); font-size: 1.5rem; }
.coa-lite .coa-close { flex: 0 0 auto; width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 1px solid var(--c-border); background: #fff; color: var(--c-navy); font: inherit; font-size: 1.6rem; cursor: pointer; }
.coa-lite .coa-close:hover { background: var(--c-lavender-light); }
.coa-lite .coa-lot { margin-top: 1.6rem; }
.coa-lite .coa-lot__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 1.4rem; color: var(--c-navy); margin-bottom: .8rem; }
.coa-lite .coa-lot__meta { font-size: 1.2rem; color: var(--c-muted); }
.coa-lite .coa-qc + .coa-qc { margin-top: 1rem; }
.coa-lite__foot { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: .6rem; font-size: 1.25rem; color: var(--c-muted); }
.coa-lite__cta { align-self: flex-start; display: inline-flex; align-items: center; padding: 1.1rem 1.8rem; border-radius: var(--radius-button); background: var(--c-navy); color: #fff; font-weight: 700; font-size: 1.4rem; text-decoration: none; }
.coa-lite__cta:hover { background: var(--c-violet-dark); color: #fff; }
@media (max-width: 767px) { .coa-lite-overlay { padding: 0; align-items: flex-end; } .coa-lite-dialog { max-width: none; border-radius: 1.6rem 1.6rem 0 0; max-height: 92vh; overflow: auto; } .coa-lite-body { padding: 1.8rem 1.6rem 2.4rem; } .coa-lite__head h2 { font-size: 1.8rem; } }

.lab-badge-wrap--card { position: absolute; top: 1.6rem; left: 1.6rem; z-index: 2; }
.lab-badge-wrap--card .lab-badge--card { position: static; }
.lab-badge-wrap { display: inline-block; }

/* product card category line (child categories only, no caps) */
.card-cat{font-size:1.2rem;color:var(--c-muted);line-height:1.3}
/* USP strip on mobile: tile per item, matching the other icon boxes */
@media (max-width: 767px){ #brxe-hmtrsc{padding:1.6rem var(--gutter) !important;gap:1rem !important;grid-template-columns:1fr !important} #brxe-hmtrsc > .brxe-block{flex-direction:row !important;align-items:flex-start !important;gap:1.4rem !important;padding:1.4rem !important;border:0 !important;background:rgba(255,255,255,.07);border-radius:var(--radius-card)} #brxe-hmtrsc > .brxe-block > .brxe-icon{flex:0 0 4.4rem;border-radius:1.2rem} }
/* hero eyebrow pill centred on mobile */
@media (max-width: 767px){ #brxe-hmherg{width:auto !important;max-width:100%;text-align:center;align-self:center} }

/* --- badges v2: static Lab tested pill + separate View COA button --- */
.lab-badges{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.lab-badge-wrap{display:block}
.lab-badge-wrap--card{position:absolute;top:1.2rem;left:1.2rem;right:1.2rem;z-index:2}
.lab-badges--lg{margin-bottom:.4rem}
.lab-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1rem .65rem .8rem;border-radius:999px;background:var(--c-mint);color:var(--c-mint-dark);font-size:1.1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap;box-sizing:border-box}
.lab-badge svg{width:1.3rem;height:1.3rem;flex:0 0 auto;display:block}
.lab-badge--lg{font-size:1.2rem;padding:.85rem 1.3rem .85rem 1rem}.lab-badge--lg svg{width:1.6rem;height:1.6rem}
.lab-badges .coa-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .75rem .55rem .9rem;border-radius:999px;border:1px solid var(--c-navy);background:#fff;color:var(--c-navy);font:inherit;font-size:1.15rem;font-weight:700;line-height:1;cursor:pointer;white-space:nowrap;box-shadow:0 6px 14px -8px rgba(5,5,58,.45);transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.lab-badges .coa-btn svg{width:1.3rem;height:1.3rem;flex:0 0 auto;display:block}
.lab-badges .coa-btn b{font-weight:800;color:var(--c-mint-dark)}
.coa-btn__chev{width:1rem !important;height:1rem !important;opacity:.7}
.lab-badges .coa-btn:hover,.lab-badges .coa-btn:focus-visible{background:var(--c-navy);color:#fff;outline:none;transform:translateY(-1px);box-shadow:0 10px 18px -8px rgba(5,5,58,.5)}
.lab-badges .coa-btn:hover b,.lab-badges .coa-btn:focus-visible b{color:var(--c-mint)}
.lab-badges--lg .coa-btn{font-size:1.3rem;padding:.8rem 1.1rem .8rem 1.2rem}

/* --- badges v3: no shadows on pills, white ring so the mint pill separates from the lavender image --- */
.lab-badge{box-shadow:0 0 0 2px #fff}
.lab-badges .coa-btn,.lab-badges .coa-btn:hover,.lab-badges .coa-btn:focus-visible{box-shadow:none;transform:none}
.lab-badge-wrap--card{right:auto}
.card-coa{display:flex}
.card-coa .lab-badges{margin:0}
.card-coa .coa-btn{width:100%;justify-content:center;padding:.8rem 1rem;font-size:1.2rem}
.card-cta{margin-top:auto}
.card-cta a,.card-cta button{width:100%;justify-content:center}

/* --- author / reviewed-by box (single post) --- */
.abx{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:4rem}
.abx__card{display:flex;gap:1.6rem;align-items:flex-start;padding:2rem;border:1px solid var(--c-border);border-radius:var(--radius-card);background:#fff}
.abx__card--review{background:var(--c-lavender-light);border-color:var(--c-lavender-light)}
.abx__img{width:6.4rem;height:6.4rem;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--c-lavender-light)}
.abx__eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:1.1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.abx__eyebrow svg{width:1.4rem;height:1.4rem;color:var(--c-mint-dark)}
.abx__name{font-size:1.7rem;font-weight:700;color:var(--c-navy);margin-top:.2rem}
.abx__role{font-size:1.3rem;color:var(--c-violet-dark);font-weight:600}
.abx__bio{font-size:1.4rem;color:var(--c-muted);margin:.6rem 0 0;line-height:1.6}
.abx__date{font-size:1.25rem;color:var(--c-muted);margin-top:.4rem}
.abx__more{display:inline-block;margin-top:.8rem;font-size:1.3rem;font-weight:600;color:var(--c-violet-dark);text-decoration:underline;text-underline-offset:2px}
.abx:has(.abx__card--review) .abx__card--author{grid-column:auto}
.abx .abx__card--author:only-child{grid-column:1 / -1}
@media(max-width:767px){.abx{grid-template-columns:1fr}}
#brxe-lglcnt [style*=font-size]{font-size:inherit !important}

.acc-col{display:flex;flex-direction:column;min-width:0}
#brxe-tphjks{align-items:start}

/* --- table of contents (single post) --- */
.toc{border:1px solid var(--c-border);border-radius:var(--radius-card);background:var(--c-lavender-light);padding:.4rem 2rem 1.2rem;margin:0 0 2.4rem}
.toc__toggle{display:flex;align-items:center;gap:1rem;width:100%;padding:1.2rem 0;background:none;border:0;font:inherit;color:var(--c-navy);cursor:pointer;text-align:left}
.toc__title{display:inline-flex;align-items:center;gap:.8rem;font-size:1.5rem;font-weight:700}
.toc__title svg{width:1.8rem;height:1.8rem;color:var(--c-violet-dark)}
.toc__count{font-size:1.2rem;color:var(--c-muted);margin-left:auto}
.toc__chev{width:1.6rem;height:1.6rem;color:var(--c-muted);transition:transform .2s}
.toc__toggle[aria-expanded=false] .toc__chev{transform:rotate(-90deg)}
.toc__toggle[aria-expanded=false] + .toc__list{display:none}
.toc__list{margin:0;padding:0 0 0 2.2rem;counter-reset:toc}
.toc__list > li{margin:.5rem 0;font-size:1.45rem;line-height:1.5}
.toc__sub{margin:.3rem 0 .4rem;padding-left:2rem;list-style:none}
.toc__sub li{font-size:1.35rem;margin:.3rem 0}
.toc__sub li::before{content:'\2013';margin-right:.6rem;color:var(--c-muted)}
.toc a{color:var(--c-navy);text-decoration:none;border-bottom:1px solid transparent}
.toc a:hover{color:var(--c-violet-dark);border-bottom-color:var(--c-violet-dark)}
.toc a.is-active{color:var(--c-violet-dark);font-weight:600}
#brxe-pstcnt h2[id],#brxe-pstcnt h3[id]{scroll-margin-top:12rem}

/* --- badges v4: 10px pill margin, sentence case --- */
/* pill sits 10px inside the lavender image box; the wrapper is anchored to the card, so add the card's 1.2rem padding */
.lab-badge-wrap--card{top:calc(1.2rem + 1rem);left:calc(1.2rem + 1rem);margin:0}
.lab-badge{text-transform:none;letter-spacing:0;font-size:1.2rem}
.lab-badge--lg{font-size:1.3rem}
.fi-bab__media .lab-badges--box{top:1rem;left:1rem;right:auto;margin:0}

.card-cta a{white-space:nowrap;font-size:1.4rem;padding-left:1.2rem;padding-right:1.2rem}
@media(max-width:600px){.card-cta a{font-size:1.25rem;gap:.4rem}}

/* --- mobile menu v2: compact rows (the theme applied a 60px line-height), visible sub-menu --- */
@media (max-width: 991px){
#brx-header .brxe-nav-menu .bricks-mobile-menu{padding-top:8rem}
#brx-header .bricks-mobile-menu > li > a{line-height:1.3 !important;padding:1.15rem 2rem;font-size:1.7rem}
#brx-header .bricks-mobile-menu > li{border-bottom:1px solid var(--c-border)}
#brx-header .bricks-mobile-menu > li:last-child{border-bottom:0}
#brx-header .bricks-mobile-menu .brx-submenu-toggle > *{line-height:1.3 !important;padding:1.15rem 2rem;font-size:1.7rem}
#brx-header .bricks-mobile-menu .brx-submenu-toggle button{padding:1.15rem 2rem}
#brx-header .bricks-mobile-menu .sub-menu{background:var(--c-lavender-light) !important;padding:.4rem 0 .8rem}
#brx-header .bricks-mobile-menu .sub-menu li a{line-height:1.3 !important;padding:.85rem 2rem .85rem 3.2rem;font-size:1.5rem;color:var(--c-navy)}
}

/* certificate PDF download button inside the COA popup (the .coa-pdf class is the embedded viewer, do not reuse it) */
.coa-dl{display:inline-flex;align-items:center;gap:.7rem;align-self:flex-start;flex:0 0 auto;width:auto;max-width:100%;margin-top:1.2rem;padding:1rem 1.6rem;border:1px solid var(--c-border);border-radius:var(--radius-button);background:#fff;color:var(--c-navy);font-size:1.35rem;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap}
.coa-dl svg{width:1.6rem;height:1.6rem;flex:0 0 auto;color:var(--c-violet-dark)}
.coa-dl small{font-weight:500;color:var(--c-muted)}
.coa-dl:hover{background:var(--c-lavender-light);color:var(--c-navy)}
.coa-dl--locked{border-style:dashed;color:var(--c-muted);font-weight:600}
.coa-dl--locked svg{color:var(--c-muted)}
@media(max-width:600px){.coa-dl{white-space:normal;text-align:left}}

/* --- bulk table: category chips + mobile swipe affordance --- */
.elivena-bulk__cats { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.6rem; }
.elivena-bulk__chip { font: inherit; font-size: 1.3rem; font-weight: 600; padding: .7rem 1.3rem; border-radius: 999px; border: 1px solid var(--c-border); background: #fff; color: var(--c-navy); cursor: pointer; }
.elivena-bulk__chip span { color: var(--c-muted); font-weight: 500; margin-left: .3rem; }
.elivena-bulk__chip:hover { border-color: var(--c-violet); }
.elivena-bulk__chip.is-on { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.elivena-bulk__chip.is-on span { color: rgba(255,255,255,.65); }
.elivena-bulk__scroll { position: relative; }
.elivena-bulk__hint { display: none; }
@media (max-width: 860px) {
  .elivena-bulk__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .elivena-bulk__scroll.is-scrollable::after { content: ''; position: sticky; right: 0; top: 0; float: right; width: 4rem; height: 100%; margin-left: -4rem; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); pointer-events: none; }
  .elivena-bulk__scroll.is-end::after { opacity: 0; }
  .elivena-bulk__hint { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; font-size: 1.25rem; font-weight: 600; color: var(--c-violet-dark); background: var(--c-lavender-light); border-radius: 999px; padding: .7rem 1.2rem; width: fit-content; }
  .elivena-bulk__hint span { animation: bulkNudge 1.6s ease-in-out infinite; }
  @keyframes bulkNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
  .elivena-bulk__table th, .elivena-bulk__table td { scroll-snap-align: start; }
}


/* --- Cart & checkout refinements ----------------------------------------
   The medical checkout plugin ships its own layout in CDI greys; this skins it
   with the Elivena tokens and adds the desktop two-column behaviour to the cart. */

/* Cart: items left, totals right on desktop, totals stick while scrolling */
@media (min-width: 992px) {
	.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 38rem; gap: 3.2rem; align-items: start; }
	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-cart .woocommerce form.woocommerce-cart-form { grid-column: 1; min-width: 0; }
	.woocommerce-cart .woocommerce .cart-collaterals { grid-column: 2; position: sticky; top: 11rem; width: auto; }
	.woocommerce-cart .cart-collaterals .cart_totals { max-width: none; }
}
.woocommerce-cart .cart-collaterals .cart_totals {
	border: 1px solid var(--c-border); border-radius: var(--radius-card);
	background: var(--c-lavender-light); padding: 2.4rem;
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table { border: 0; background: transparent; font-size: 1.45rem; }
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td { background: transparent; padding: 1rem 0; border-top: 1px solid var(--c-border); }
.woocommerce-cart .cart-collaterals .cart_totals tr:first-child th,
.woocommerce-cart .cart-collaterals .cart_totals tr:first-child td { border-top: 0; }
.woocommerce-cart .cart-collaterals .cart_totals .order-total th,
.woocommerce-cart .cart-collaterals .cart_totals .order-total td { font-size: 1.8rem; color: var(--c-navy); }
.woocommerce-cart .wc-proceed-to-checkout { padding-top: 1.6rem; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; justify-content: center; }
.woocommerce .cart .coupon { flex-wrap: wrap; }
.woocommerce .cart .coupon .input-text { width: 100% !important; max-width: 22rem; }
.woocommerce table.shop_table td.product-quantity .qty { max-width: 8rem; text-align: center; }
.woocommerce table.shop_table td.actions { background: var(--c-lavender-light); }

/* Cart on small screens: stacked rows with labels instead of a squeezed table */
@media (max-width: 767px) {
	.woocommerce-cart table.shop_table_responsive tr { display: grid; grid-template-columns: 6.4rem 1fr auto; gap: .4rem 1.2rem; padding: 1.4rem; border-top: 1px solid var(--c-border); }
	.woocommerce-cart table.shop_table_responsive thead { display: none; }
	.woocommerce-cart table.shop_table_responsive td { border: 0; padding: 0; }
	.woocommerce-cart table.shop_table_responsive td.product-thumbnail { grid-row: 1 / span 3; }
	.woocommerce-cart table.shop_table_responsive td.product-remove { grid-column: 3; grid-row: 1; }
	.woocommerce-cart table.shop_table_responsive td.actions { display: block; grid-column: 1 / -1; }
}

/* Non-Rx checkout: Elivena skin over the plugin's own layout */
.medical-checkout--non-rx .medical-checkout-card {
	background: #fff !important; border: 1px solid var(--c-border) !important;
	border-radius: var(--radius-card) !important; padding: 2.8rem !important;
}
.medical-checkout--non-rx .step-overview { font-size: 1.5rem; color: var(--c-muted); margin: 0 0 2.4rem; }
.medical-checkout--non-rx .checkout-column--summary {
	background: var(--c-lavender-light) !important; border: 1px solid var(--c-border) !important;
	border-radius: var(--radius-card) !important; padding: 2.4rem !important;
}
.medical-checkout--non-rx #order_review_heading { font-size: 1.8rem; margin: 0 0 1.6rem; color: var(--c-navy); }
.medical-checkout--non-rx #order_review table.shop_table { border: 0; background: transparent; }
.medical-checkout--non-rx #order_review table.shop_table th,
.medical-checkout--non-rx #order_review table.shop_table td { background: transparent; padding: 1rem 0; border-top: 1px solid var(--c-border); }
.medical-checkout--non-rx #order_review table.shop_table thead th { border-top: 0; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.medical-checkout--non-rx #order_review .order-total th,
.medical-checkout--non-rx #order_review .order-total td { font-size: 1.8rem; color: var(--c-navy); }
.medical-checkout--non-rx #payment { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-card); margin-top: 1.6rem; }
.medical-checkout--non-rx #payment ul.payment_methods { border-bottom: 1px solid var(--c-border); }
.medical-checkout--non-rx #payment .payment_methods .payment_box { background: var(--c-lavender-light) !important; border-radius: var(--radius-image); color: var(--c-ink); font-size: 1.35rem; }
.medical-checkout--non-rx #place_order { width: 100%; justify-content: center; font-size: 1.6rem; padding: 1.5rem 2.4rem; }
.medical-checkout--non-rx h3 { font-size: 1.8rem; color: var(--c-navy); }
@media (min-width: 992px) {
	.medical-checkout--non-rx .checkout-column--summary { position: sticky; top: 11rem; }
}

/* Checkout typography. These sizes were written in rem on the assumption that the
   root font size was 10px. It is 14px, so every one of them resolved 1.4x too large:
   1.5rem gave 21px inputs rather than the 15px intended, and 1.4rem inflated the
   plugin's 12px variation meta ("Dosage: 5 mg") to 19.6px. They are in px now, on
   the same scale the checkout plugin's own V3 stylesheet uses. */
.medical-checkout--non-rx { font-size: 15px; }
.medical-checkout--non-rx label,
.medical-checkout--non-rx .woocommerce-input-wrapper,
.medical-checkout--non-rx p { font-size: 14px; }
.medical-checkout--non-rx form .form-row label { font-size: 13px; }
.medical-checkout--non-rx input.input-text,
.medical-checkout--non-rx select,
.medical-checkout--non-rx textarea,
.medical-checkout--non-rx .select2-container .select2-selection__rendered { font-size: 15px !important; }
.medical-checkout--non-rx #order_review table.shop_table { font-size: 14px; }
.medical-checkout--non-rx h3 { font-size: 18px !important; }
.medical-checkout--non-rx .woocommerce-privacy-policy-text,
.medical-checkout--non-rx .woocommerce-terms-and-conditions-wrapper { font-size: 13px; color: var(--c-muted); }
/* Below 992px the plugin raises every control to 16px, which is what stops iOS
   zooming the page when a field takes focus. The rules above are more specific, so
   they have to do the same rather than hand back a 15px field on a phone. */
@media (max-width: 991px) {
	.medical-checkout--non-rx input.input-text,
	.medical-checkout--non-rx select,
	.medical-checkout--non-rx textarea,
	.medical-checkout--non-rx .select2-container .select2-selection__rendered { font-size: 16px !important; }
}

/* The V3 checkout prints each field's label inside the top of the control, which it
   does by giving the control a 54px height and 23px of top padding. That rule lists
   inputs and selects by type, so two controls fell outside it and the label landed
   on top of their value:

   - State. WooCommerce hands that select to select2, so what renders is a span, not
     a select: 28px tall, 4px radius and its own border grey, with the label across it.
   - Order notes, a textarea.

   Both are put on the same geometry as the inputs beside them. The selects also get
   a chevron: the plugin draws its own control chrome, so a native select shows no
   affordance at all and Country / Region read as a filled-in text box. */
body.mc-v3 #accordion-form select {
	-webkit-appearance: none; appearance: none; padding-right: 34px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2356666f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
}
body.mc-v3 #accordion-form .select2-container { display: block; width: 100% !important; }
body.mc-v3 #accordion-form .select2-container--default .select2-selection--single {
	height: auto; min-height: 54px; padding: 23px 34px 6px 12px; box-sizing: border-box;
	border: 1px solid var(--mc-border-strong); border-radius: var(--mc-radius);
	background-color: var(--mc-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2356666f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
	outline: 0;
}
body.mc-v3 #accordion-form .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0; line-height: 1.3; color: var(--mc-ink);
}
body.mc-v3 #accordion-form .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
body.mc-v3 #accordion-form .select2-container--default.select2-container--open .select2-selection--single,
body.mc-v3 #accordion-form .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--mc-primary); box-shadow: 0 0 0 3px var(--mc-focus);
}
/* The dropdown itself is printed at the end of the body, outside the form. */
body.mc-v3 .select2-dropdown { border-color: var(--mc-border-strong); border-radius: var(--mc-radius); overflow: hidden; }
body.mc-v3 .select2-container--default .select2-results__option { font-size: 15px; padding: 8px 12px; }
body.mc-v3 .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--mc-primary); }
body.mc-v3 .select2-search--dropdown .select2-search__field { font-size: 15px; padding: 8px 10px; border: 1px solid var(--mc-border-strong); border-radius: 8px; }
body.mc-v3 #accordion-form :is(.form-grid p, p.form-row):has(> label:not(.screen-reader-text):not(.checkbox):not(.woocommerce-form__label-for-checkbox) + :is(textarea, .woocommerce-input-wrapper)) textarea {
	min-height: 90px; padding: 23px 12px 8px !important; line-height: 1.4;
}
/* Apartment / suite has a screen-reader-only label, so it is outside the floating
   label rule and was 10px shorter than every field around it. */
body.mc-v3 #accordion-form p.form-row > label.screen-reader-text + .woocommerce-input-wrapper input { min-height: 54px; }
/* The variation meta under a line item is the plugin's 12px, not the 14px the
   paragraph rule above would otherwise give it. */
body.mc-v3 #accordion-form .product-name dl.variation dd p { font-size: 12px; line-height: 1.4; }

/* Reduced checkout header: logo only, aligned to the same container as the rest of the site. */
.woocommerce-checkout #brxe-hdrtop,
.woocommerce-checkout #brxe-hdrsrc,
.woocommerce-checkout #brxe-hdrnav,
.woocommerce-checkout #brxe-hdrico { display: none !important; }
.woocommerce-checkout #brx-header { border-bottom: 1px solid var(--c-border); box-shadow: none; }
.woocommerce-checkout #brxe-hdrmai { padding-top: 0 !important; padding-bottom: 0 !important; }
.woocommerce-checkout #brxe-hdrmac { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1.6rem; padding-top: 1.4rem; padding-bottom: 1.4rem; }
.woocommerce-checkout #brxe-hdrmac::after {
	content: 'Secure checkout';
	display: inline-flex; align-items: center;
	font-size: 1.2rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--c-mint-dark); background: var(--c-mint);
	padding: .6rem 1.2rem; border-radius: 999px; white-space: nowrap;
}
.woocommerce-checkout #brxe-hdrlog { margin: 0; }
/* Footer: keep the legal line, drop the navigation columns */
.woocommerce-checkout #brxe-ftrnav { display: none; } /* the four link columns; the legal links in the bottom row stay */

/* Billing and shipping fields: two columns on desktop instead of one long stack */
@media (min-width: 768px) {
	.medical-checkout--non-rx .woocommerce-billing-fields__field-wrapper,
	.medical-checkout--non-rx .woocommerce-shipping-fields__field-wrapper,
	.medical-checkout--non-rx .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }
	.medical-checkout--non-rx .woocommerce-billing-fields__field-wrapper > .form-row,
	.medical-checkout--non-rx .woocommerce-shipping-fields__field-wrapper > .form-row,
	.medical-checkout--non-rx .woocommerce-additional-fields__field-wrapper > .form-row { float: none !important; width: auto !important; margin: 0 0 1.4rem !important; padding: 0 !important; }
	.medical-checkout--non-rx .form-row-wide,
	.medical-checkout--non-rx .form-row.notes { grid-column: 1 / -1; }
}

/* checkout padding on small screens: the page gutter, the card and the plugin's own column
   padding stacked up to ~115px of a 390px screen. Keep one level of padding, not three. */
@media (max-width: 600px) {
	.woocommerce-checkout #brxe-chksec { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
	.medical-checkout--non-rx .medical-checkout-card { padding: 1.6rem .8rem !important; }
	.medical-checkout--non-rx .checkout-column--summary { padding: 1.4rem 1rem !important; }
	.medical-checkout--non-rx .checkout-column { padding: 0 !important; }
	.woocommerce-cart #brxe-crtsec { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
}

/* The plugin wraps billing and shipping in bordered cards inside the checkout card. On Elivena
   that double frame squeezes the fields, so the inner blocks are layout only. */
.medical-checkout--non-rx .checkout-column--details .col-1,
.medical-checkout--non-rx .checkout-column--details .col-2,
.medical-checkout--non-rx #customer_details .col-1,
.medical-checkout--non-rx #customer_details .col-2 { /* inner billing/shipping blocks */
	border: 0 !important; border-radius: 0 !important; background: transparent !important;
	box-shadow: none !important; padding: 0 !important;
}
.medical-checkout--non-rx #customer_details { gap: 2.4rem; }
.medical-checkout--non-rx #customer_details .col-2,
.medical-checkout--non-rx .checkout-column--details .col-2 { padding-top: 2.4rem !important; border-top: 1px solid var(--c-border) !important; }

/* Header space safety: below ~1300px the last menu item drew on top of the account and cart icons.
   Cause: Bricks gives every top-level menu item a default margin-left of 30px, so seven items carried
   210px of dead space and the menu measured 820px inside a 712px box. That margin is replaced with a
   gap, and between 992px and 1499px both the gap and the item padding tighten, which frees enough
   room for the inline search to survive down to 1200px. Below that the search steps aside, and the
   hamburger takes over at 991px as before. Verified clear at every width from 992px to 1920px. */
@media (min-width: 992px) {
	#brx-header .bricks-nav-menu > li { margin-left: 0 !important; }
	#brx-header .bricks-nav-menu { column-gap: 3rem !important; }
	#brx-header .bricks-nav-menu-wrapper { min-width: 0; }
}
@media (min-width: 992px) and (max-width: 1499px) {
	#brx-header .bricks-nav-menu { column-gap: .8rem !important; }
	#brx-header .bricks-nav-menu > li > a { padding-left: .5rem !important; padding-right: .5rem !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	#brx-header #brxe-hdrsrc { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1499px) {
	#brx-header #brxe-hdrsrc { width: 18rem; }
}
/* --- Laptop-width review fixes -------------------------------------------
   Three defects reported at ~1280px, all confirmed on the cart page. */

/* 1. Shipping text was #9e9e9e, a WooCommerce default grey that never went through the
      palette. Contrast was 2.68:1 on white, well under the 4.5:1 minimum, which is why the
      shipping options read as disabled. The same grey leaked into the mini-cart line items.
      Both now use the body ink colour. */
.woocommerce .woocommerce-shipping-methods label,
.woocommerce #shipping_method label,
.woocommerce ul#shipping_method li label,
.woocommerce-cart .cart_totals .shipping td,
.woocommerce-cart .cart_totals .shipping label,
.widget_shopping_cart_content .quantity,
.woocommerce-mini-cart__total,
.woocommerce-mini-cart-item .quantity,
.woocommerce-mini-cart-item .woocommerce-Price-amount {
	color: var(--c-ink);
}
.woocommerce ul#shipping_method li label { font-weight: 500; }
.woocommerce .woocommerce-shipping-destination { color: var(--c-muted); }

/* 2. Only the product-name cell carried a lavender background, so a coloured band ran down
      the middle of an otherwise white cart table. The tint belongs to the header row alone. */
.woocommerce table.shop_table td.product-name,
.woocommerce table.shop_table tbody th.product-name {
	background: transparent;
}

/* 3. The primary checkout CTA rendered in violet while every other primary button on the site
      is navy, so the secondary "Apply coupon" button looked more important than it. Violet on
      white also gives white text only 3.84:1. Primary actions are navy; violet stays an accent. */
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
	background: var(--c-navy);
	border-color: var(--c-navy);
}
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background: var(--c-violet-dark);
	border-color: var(--c-violet-dark);
}

/* --- Product loop and filter panel, mobile pass ---------------------------- */

/* Filter groups each carry a bottom border but no top padding, so every group title
   ("Product categories", "Availability") sat directly on the rule above it. The last
   group also drew a border with nothing beneath it. */
#brxe-shpsid > .brxe-block + .brxe-block { padding-top: 2rem; }
#brxe-shpsid > .brxe-block:last-child { border-bottom: 0; padding-bottom: 0; }

/* The COA pill now reads "COA 99.22% pure" instead of "View COA ...", which fits on a
   Pixel-width card. This is the guard for anything unusually long: the pill stays on one
   line and truncates rather than pushing out of the purple image box. */
.coa-btn { max-width: 100%; min-width: 0; flex-wrap: nowrap; }
.coa-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coa-btn > b { white-space: nowrap; }
.coa-btn > svg { flex: 0 0 auto; }

/* Card CTA is now "View" rather than "View product", which was wrapping to two lines and
   doubling the button height in the two-column mobile grid. Kept on one line whatever the label. */
.card-cta { white-space: nowrap; }

/* COA pill fit on narrow cards. The button was already width:100%, but its wrapper
   (.lab-badges) had no width constraint, so "100%" resolved against the wrapper's own
   content width rather than the card. On a Pixel-width two-column grid the pill measured
   158px inside a 148px cell and pushed out of the card. The wrapper is now pinned to the
   cell, and the pill's padding, gap and type are trimmed so the full label still fits
   without truncating. */
.card-coa .lab-badges { width: 100%; min-width: 0; flex-wrap: nowrap; }
.card-coa .coa-btn { padding: .7rem .7rem; gap: .4rem; font-size: 1.15rem; }
.card-coa .coa-btn svg { width: 1.2rem; height: 1.2rem; }
.card-coa .coa-btn .coa-btn__chev { width: .9rem !important; height: .9rem !important; }

/* On a 360px phone the two-column cell drops to 125px and the pill was ~5px short of
   fitting, so the label started to ellipsise. A slightly tighter pill at that size keeps
   the full "COA 99.22% pure" readable. */
@media (max-width: 399px) {
	.card-coa .coa-btn { padding: .6rem .5rem; gap: .3rem; font-size: 1.1rem; }
}
@media (max-width: 399px) {
	/* Last few pixels on the smallest phones: the chevron goes rather than the words. The
	   document icon and the pill border still mark it as something to tap. */
	.card-coa .coa-btn .coa-btn__chev { display: none; }
}

/* Homepage "Your box" tray: the 4th slot was taller than the three vial thumbnails.
   All four slots carry aspect-ratio 1, but the empty slot's caption ("Pick your 4th, unlock
   20%") wrapped to four lines in a narrow cell, and with min-height auto the box grew to fit,
   stretching the grid row and leaving the thumbnails top-aligned in it. It breaks in two
   bands: phones, and 991-1279px where the card sits in the narrower right-hand column.
   Elsewhere the slot is wide enough and the original design is untouched.

   In those bands the caption drops below the slot row. It stays absolutely positioned against
   the placeholder (which must keep position:relative, because the slot number is an
   absolutely-positioned ::after that would otherwise anchor to the tray), and is widened back
   out across all four columns with percentages of the placeholder's own width: 4 columns plus
   the 3 six-pixel gaps. That avoids repeating the caption text in CSS.

   The !important flags are needed because Bricks prints its per-element CSS inline in the
   page, after this stylesheet, at equal specificity. */
@media (max-width: 599px), (min-width: 991px) and (max-width: 1279px) {
	#brxe-hmbxsc { padding-bottom: 3.4rem !important; }
	#brxe-hmbxpl { min-height: 0 !important; min-width: 0 !important; padding: .6rem !important; }
	#brxe-hmbxpl > b {
		width: 2.8rem !important; height: 2.8rem !important; min-width: 0 !important;
		font-size: 1.8rem !important; line-height: 1 !important; flex: 0 0 auto;
	}
	#brxe-hmbxpl > span {
		position: absolute !important;
		top: 100% !important; bottom: auto !important;
		left: calc(-300% - 18px) !important; right: auto !important;
		width: calc(400% + 18px) !important;
		margin-top: .7rem; text-align: center;
		font-size: 1.15rem !important; line-height: 1.3 !important;
	}
}


/* v15 go-live review (2026-11-07): mobile cart totals and checkout summary */
@media (max-width:767px){
	.cart_totals table.shop_table tr.fee{display:flex;justify-content:space-between;align-items:baseline;gap:1.6rem;}
	.cart_totals table.shop_table tr.fee th{width:auto!important;flex:1 1 auto;}
	.cart_totals table.shop_table tr.fee td{width:auto!important;flex:0 0 auto;}
	.cart_totals table.shop_table tr.elivena-offer-progress-row,.cart_totals table.shop_table tr.elivena-offer-progress-row th{display:block;width:100%;}
}
.checkout-column--summary,.checkout-column--summary .shop_table{min-width:0;max-width:100%;}
.checkout-column--summary .product-name,.checkout-column--summary td{overflow-wrap:anywhere;}