/* ==========================================================================
   Aminera theme — component styles
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.container.narrow { max-width: 780px; }

/* Sitewide "free shipping over $100" promo banner (inc/free-shipping-banner.php),
   stacked right below the RUO compliance bar via the same wp_body_open hook. */
.promo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-brand-light);
  color: var(--color-brand);
  font-size: 13px;
  text-align: center;
  padding: 8px 16px;
}
.promo-bar svg { flex-shrink: 0; }

/* Buttons ------------------------------------------------------------- */

.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}
.button-primary { background: var(--color-brand); color: #fff; }
.button-primary:hover { background: #14283f; text-decoration: none; color: #fff; }
.button-secondary { background: transparent; border-color: var(--color-brand); color: var(--color-brand); }
.button-secondary:hover { background: var(--color-brand-light); text-decoration: none; }

/* Header ---------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 500;
}
.site-header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
}
.site-branding { flex-shrink: 0; }
.site-title { font-size: 1.4rem; font-weight: 800; color: var(--color-ink); }
.logo-lockup { display: inline-flex; align-items: center; gap: 10px; }
.logo-lockup .logo-mark { flex-shrink: 0; }
.logo-lockup .logo-word { font-weight: 800; letter-spacing: -.01em; }
.logo-lockup--stacked { flex-direction: column; gap: 14px; text-align: center; }
.logo-lockup--stacked .logo-word { font-size: 1.7rem; }
.logo-tagline { display: inline-flex; align-items: center; gap: 12px; color: #3f6db3; font-size: .78rem; font-weight: 700; letter-spacing: .25em; margin-top: -4px; }
.logo-tagline::before, .logo-tagline::after { content: ""; width: 32px; height: 1px; background: #93b4dd; }
.primary-nav { flex: 1; }
.nav-menu { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
.nav-menu a { color: var(--color-ink); font-weight: 500; }
.site-header-actions { display: flex; gap: 16px; align-items: center; }
.header-icon-link { color: var(--color-ink); font-weight: 500; }
.cart-count { color: var(--color-ink-soft); }

/* Cart icon + badge (shown in place of the "Cart (n)" text link on mobile,
   see the @media block below). Hidden by default on desktop. */
.header-cart-icon-wrap {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
}
.header-cart-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-cart-badge.is-empty { display: none; }

.mobile-menu-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.hamburger, .hamburger::before, .hamburger::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  position: relative;
}
.hamburger::before { content: ""; position: absolute; top: -7px; }
.hamburger::after { content: ""; position: absolute; top: 7px; }

@media (max-width: 860px) {
  .primary-nav { display: none; }
  .mobile-menu-toggle { display: block; }
  .nav-menu-mobile { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

  /* With .primary-nav hidden, its flex:1 no longer pushes the actions/
     toggle group to the right, so they'd otherwise sit right next to the
     logo. Push the whole group to the header's right edge instead. */
  .site-branding { margin-right: auto; }

  /* Simplified mobile header: just the cart icon (with badge) and the
     hamburger — the "Account" link and the "Cart (n)" text label move into
     the slide-out menu / cart drawer instead. */
  .header-account-link { display: none; }
  .header-cart-label { display: none; }
  .header-cart-icon-wrap { display: flex; }
}

/* ---- Slide-out mobile nav menu + slide-out cart drawer (shared look) ---- */

body.drawer-open { overflow: hidden; }

.mobile-menu-overlay,
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.mobile-menu-overlay.is-open,
.cart-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

.mobile-menu,
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1001;
  /* Always none, even while open — only the panel itself (below) re-enables
     pointer events. Without this, the full-viewport container sits above
     the overlay (z-index 1001 vs. 1000) and swallows every click on the
     dimmed left side before it ever reaches the overlay's close handler. */
  pointer-events: none;
}

.mobile-menu-panel,
.cart-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  height: 100dvh;
  width: min(85vw, 360px);
  background: #fff;
  box-shadow: -12px 0 32px -8px rgba(15, 23, 42, .2);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s ease;
}
.mobile-menu.is-open .mobile-menu-panel,
.cart-drawer.is-open .cart-drawer-panel {
  transform: translateX(0);
}

.mobile-menu-panel-header,
.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.mobile-menu-panel-title,
.cart-drawer-title {
  font-weight: 700;
  font-size: 1.05rem;
}
.mobile-menu-close,
.cart-drawer-close {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--color-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu-close:hover,
.cart-drawer-close:hover { color: var(--color-ink); }

.mobile-menu-panel .nav-menu-mobile {
  padding: 16px 12px;
  overflow-y: auto;
  flex: 1;
}
.nav-menu-mobile a {
  display: block;
  padding: 12px 12px;
  border-radius: var(--radius);
  color: var(--color-ink);
  font-weight: 500;
}
.nav-menu-mobile a:hover { background: var(--color-bg-alt); text-decoration: none; }

/* The injected "Account" / "My Account" link (see wp_nav_menu_objects
   filter in inc/template-tags.php) is set apart from the regular nav
   links with a divider, mirroring how it read as a distinct footer row
   before it moved into the list itself. */
.nav-menu-mobile li.menu-item-account {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.nav-menu-mobile li.menu-item-account a { font-weight: 700; color: var(--color-brand); }

/* Hero -------------------------------------------------------------------- */

.hero {
  background: linear-gradient(180deg, var(--color-brand-light) 0%, #fff 65%);
  padding: 64px 0 72px;
  overflow: hidden;
}
.hero-inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-brand); font-size: .8rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 16px;
}
.hero-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--color-brand); }
.hero h1 { font-size: 2.85rem; margin-bottom: 18px; letter-spacing: -.01em; }
.hero-copy p { color: var(--color-ink-soft); font-size: 1.1rem; margin-bottom: 28px; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-trust-strip { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .85rem; color: var(--color-ink-soft); }
.hero-trust-strip span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust-strip svg { color: var(--color-brand); flex-shrink: 0; }

.hero-visual { position: relative; height: 360px; }
.hero-visual-panel {
  position: absolute; inset: 0; border-radius: 24px;
  background: linear-gradient(145deg, #fff 0%, #eef4fd 100%);
  border: 1px solid var(--color-border);
  box-shadow: 0 30px 60px -20px rgba(30,58,95,.18);
}
.hero-vial { position: absolute; filter: drop-shadow(0 18px 24px rgba(15,23,42,.12)); }
.hero-badge-card {
  position: absolute; left: 24px; bottom: 24px; z-index: 2;
  background: #fff; border-radius: 12px; padding: 14px 18px;
  box-shadow: 0 12px 28px -8px rgba(15,23,42,.18);
  display: flex; align-items: center; gap: 12px;
}
.hero-badge-card-icon {
  width: 36px; height: 36px; border-radius: 999px; background: var(--color-brand-light); color: var(--color-brand);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-badge-card strong { display: block; font-size: .95rem; }
.hero-badge-card span { font-size: .78rem; color: var(--color-ink-soft); }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { text-align: center; }
  .hero-copy p { margin-left: auto; margin-right: auto; }
  .hero-actions, .hero-trust-strip { justify-content: center; }
  .hero-visual { height: 280px; max-width: 480px; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px) {
  .hero { padding: 40px 0 48px; }
  .hero h1 { font-size: 2rem; }
  .hero-copy p { font-size: 1rem; }
  .hero-actions .button { display: block; width: 100%; }
  .hero-visual { height: 220px; }
  .hero-badge-card { left: 12px; bottom: 12px; padding: 10px 14px; }
}

/* Home: section eyebrow label, Why Choose Us, How It Works, closing CTA --- */

.home-eyebrow {
  display: block; text-align: center; color: var(--color-brand); font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px;
}

.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px 20px; }
.why-card-icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--color-brand-light); color: var(--color-brand);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.why-card h3 { font-size: 1rem; margin-bottom: 6px; }
.why-card p { color: var(--color-ink-soft); font-size: .875rem; margin: 0; }
@media (max-width: 860px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .why-grid { grid-template-columns: 1fr; } }

.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step-item { position: relative; padding-left: 52px; }
.step-number {
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 999px;
  background: var(--color-brand); color: #fff; font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.step-item h3 { font-size: 1rem; margin-bottom: 6px; }
.step-item p { color: var(--color-ink-soft); font-size: .875rem; margin: 0; }
@media (max-width: 700px) { .steps-row { grid-template-columns: 1fr; gap: 24px; } }

.home-cta-band { background: var(--color-ink); border-radius: 20px; padding: 48px 40px; text-align: center; }
.home-cta-band h2 { color: #fff; font-size: 1.75rem; margin-bottom: 10px; }
.home-cta-band p { color: #cbd5e1; margin-bottom: 24px; }
.home-cta-band .button-primary { background: #fff; color: var(--color-ink); }
.home-cta-band .button-primary:hover { background: var(--color-brand-light); color: var(--color-ink); }
@media (max-width: 600px) { .home-cta-band { padding: 36px 24px; } }

/* Trust badges -------------------------------------------------------------- */

.trust-badges { padding: 32px 0; border-bottom: 1px solid var(--color-border); }
.trust-badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.trust-badge-icon {
  width: 44px; height: 44px; border-radius: 999px; background: var(--color-brand-light); color: var(--color-brand);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.trust-badge h4 { margin-bottom: 4px; font-size: 1rem; }
.trust-badge p { margin: 0; color: var(--color-ink-soft); font-size: .875rem; }

@media (max-width: 860px) {
  .trust-badges-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Home sections ------------------------------------------------------------ */

.home-section { padding: 56px 0; }
.home-section-alt { background: var(--color-bg-alt); }
.section-heading { text-align: center; margin-bottom: 32px; }
.section-heading h2 { font-size: 1.75rem; }


.coa-callout-inner {
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 48px;
  text-align: center;
}
.coa-callout-inner h2 { margin-bottom: 12px; }
.coa-callout-inner p { color: var(--color-ink-soft); max-width: 620px; margin: 0 auto 24px; }

/* WooCommerce product loop -------------------------------------------------- */

ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.products li.product {
  width: auto;
  float: none;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
  text-align: left;
}
ul.products li.product img { border-radius: calc(var(--radius) - 4px); margin-bottom: 12px; }
ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem;
  margin: 4px 0;
  color: var(--color-ink);
}
ul.products li.product .price { font-weight: 700; color: var(--color-brand); }
ul.products li.product .button {
  display: block;
  margin-top: 12px;
  text-align: center;
  background: var(--color-ink);
  color: #fff;
  padding: 10px 16px;
  font-size: .9rem;
}
ul.products li.product .onsale {
  position: absolute; top: 12px; right: 12px;
  background: var(--color-accent); color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: 4px 8px; border-radius: 999px;
}
.ruo-badge {
  display: inline-block;
  background: var(--color-brand-light);
  color: var(--color-brand);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.oos-pill { display: block; text-align: center; margin-top: 12px; padding: 10px 16px; border-radius: var(--radius); font-size: .9rem; font-weight: 600; background: var(--color-bg-alt); color: var(--color-ink-soft); border: 1px solid var(--color-border); }
.oos-pill:hover { text-decoration: none; border-color: var(--color-ink-soft); }

ul.products li.product .loop-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
ul.products li.product .loop-qty-row .qty-stepper { flex: 0 0 auto; }
ul.products li.product .loop-qty-row .qty-stepper button { width: 32px; padding: 8px 0; font-size: 1rem; }
ul.products li.product .loop-qty-row .qty-stepper .qty { width: 32px; font-size: .9rem; }
ul.products li.product .loop-view-cart { font-size: .82rem; font-weight: 600; color: var(--color-ink); white-space: nowrap; }
ul.products li.product .loop-view-cart:hover { color: var(--color-brand); }

@media (max-width: 1024px) { ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { ul.products { grid-template-columns: 1fr; } }

/* Single product ------------------------------------------------------------ */

.breadcrumb { font-size: .85rem; color: var(--color-ink-soft); margin: 24px 0; }
.breadcrumb .current { color: var(--color-ink); }

.single-product div.product { margin: 0 0 40px; }
.product-detail { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }

.product-media-card { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 28px; }
.product-media-card img { border-radius: calc(var(--radius) - 4px); }
.product-media-caption { text-align: center; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-soft); margin: 14px 0 0; }

.summary.entry-summary h1.product_title { font-size: 2rem; margin-bottom: 4px; }
.product-price-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.product-price-row .price { font-size: 1.9rem; color: var(--color-brand); font-weight: 800; }
.price-original { font-size: 1.1rem; color: var(--color-ink-soft); text-decoration: line-through; font-weight: 500; }
.size-pill { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 6px; padding: 4px 10px; font-size: .82rem; font-weight: 600; }
.product-badge-new { background: #15803d; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .03em; padding: 4px 10px; border-radius: 5px; display: inline-block; margin-bottom: 14px; }

.stock-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: .85rem; margin-bottom: 20px; }
.stock-in, .stock-out { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.stock-in { color: #15803d; }
.stock-out { color: #b91c1c; }
.ship-estimate { display: inline-flex; align-items: center; gap: 5px; color: var(--color-ink-soft); }

.spec-table { border-top: 1px solid var(--color-border); margin-bottom: 22px; }
.spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-border); font-size: .9rem; }
.spec-row .spec-label { color: var(--color-ink-soft); }
.spec-row .spec-value { font-weight: 600; text-align: right; }

/* Variable products (e.g. GLP-3 (RT) 10mg/15mg): variation-swatches.js
   replaces WooCommerce's native "Choose an option" <select> with clickable
   pills styled like the .size-pill badge simple products already show next
   to their price, so picking a size feels the same across both product
   types. The <select> itself is never removed -- it's the real form field
   WooCommerce's own variation-price/stock JS listens to -- just hidden once
   JS has built the pill row in front of it. If JS fails to load, the
   .variations-enhanced class never gets added and the native dropdown
   still works as a fallback. */
.variations-enhanced .variations { display: none; }
.variation-swatches { margin-bottom: 16px; }
.variation-swatches__label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--color-ink-soft); text-transform: uppercase; margin-bottom: 8px; }
.variation-swatches__options { display: flex; flex-wrap: wrap; gap: 8px; }
.variation-pill {
  background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 8px;
  padding: 8px 16px; font-size: .88rem; font-weight: 600; font-family: inherit;
  color: var(--color-ink); cursor: pointer; line-height: 1.2;
}
.variation-pill:hover { border-color: var(--color-brand); }
.variation-pill.is-selected { background: var(--color-brand-light); border-color: var(--color-brand); color: var(--color-brand); }
.variation-pill:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* WooCommerce's native add-to-cart form, restyled to match. For a SIMPLE
   product the qty stepper and button are direct children of form.cart, so
   flexing the form itself is enough. For a VARIABLE product (e.g. GLP-3
   (RT)) WooCommerce nests them two levels deeper instead, inside
   .woocommerce-variation-add-to-cart (itself inside .single_variation_wrap,
   a sibling of table.variations under form.cart) -- the form-level flex
   rule never reaches that div, which is why the qty stepper and Add to
   Cart button were stacking vertically there instead of sitting side by
   side like they already did for simple products. */
.summary form.cart { display: flex; align-items: stretch; gap: 12px; margin-bottom: 8px; }
/* Now that variation-swatches.js auto-selects a size on load and mirrors its
   price into the header price (#product-price), WooCommerce's own
   .woocommerce-variation-price next to the Size pills just repeats the same
   number a few lines up -- hide it. Leaves availability/description, if
   WooCommerce ever renders those, untouched. */
.woocommerce-variation-price { display: none; }
.woocommerce-variation-add-to-cart { display: flex; align-items: stretch; gap: 12px; }
.woocommerce-variation-add-to-cart .quantity { flex-shrink: 0; }
.qty-stepper { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.qty-stepper button { width: 32px; align-self: stretch; border: 0; background: #fff; font-size: 1rem; line-height: 1; padding: 8px 0; cursor: pointer; color: var(--color-ink); }
.qty-stepper button:hover { background: var(--color-bg-alt); }
.qty-stepper .qty { width: 38px; border: 0; text-align: center; font-size: .92rem; line-height: normal; padding: 0; margin: 0; -moz-appearance: textfield; }
.qty-stepper .qty::-webkit-outer-spin-button, .qty-stepper .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.summary form.cart .button { flex: 1; background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.summary form.cart .button:hover { background: #14283f; color: #fff; }

.volume-pricing-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--color-ink-soft); text-transform: uppercase; margin-bottom: 10px; }
.volume-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.volume-tier {
  position: relative; border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 8px 12px;
  text-align: center; cursor: pointer; background: #fff;
}
.volume-tier:hover { border-color: var(--color-brand); }
.volume-tier.selected { border-color: var(--color-brand); background: var(--color-brand-light); }
.volume-tier.disabled { cursor: not-allowed; opacity: .55; }
.volume-tier.disabled:hover { border-color: var(--color-border); }
.volume-tier.disabled.selected { opacity: 1; border-color: var(--color-brand); background: var(--color-brand-light); }
.tier-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--color-ink); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.tier-name { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.tier-range { font-size: .82rem; font-weight: 600; margin-bottom: 2px; }
.tier-save { font-size: .75rem; color: #15803d; font-weight: 700; }
.tier-save.muted { color: var(--color-ink-soft); font-weight: 500; }

.research-callout { display: flex; gap: 12px; background: var(--color-brand-light); border: 1px solid #bfdbfe; border-radius: 10px; padding: 16px 18px; font-size: .88rem; color: #1e3a5f; margin-top: 16px; }
.research-callout strong { color: var(--color-brand); }

.notify-card { background: var(--color-bg-alt); border-radius: 12px; padding: 22px; margin-bottom: 16px; }
.notify-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.notify-card p { color: var(--color-ink-soft); font-size: .88rem; margin-bottom: 16px; }
.notify-form { display: flex; gap: 10px; }
.notify-form input { flex: 1; padding: 11px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: inherit; font-size: .95rem; }
.notify-success { display: none; align-items: center; gap: 10px; color: #15803d; font-weight: 600; font-size: .9rem; margin: 0; }
.notify-success.show { display: flex; }
.notify-success svg { flex-shrink: 0; }

/* Native WooCommerce tabs, restyled to match our underline-tab look. */
.woocommerce-tabs ul.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--color-border); margin: 48px 0 24px; padding: 0; list-style: none; }
.woocommerce-tabs ul.tabs li { margin: 0; padding: 0; }
.woocommerce-tabs ul.tabs li a { display: inline-block; padding: 0 0 14px; font-size: .95rem; font-weight: 600; color: var(--color-ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.woocommerce-tabs ul.tabs li.active a { color: var(--color-ink); border-bottom-color: var(--color-brand); }
.woocommerce-tabs .panel h2 { display: none; }
.woocommerce-tabs .panel { color: var(--color-ink-soft); }

@media (max-width: 780px) { .product-detail { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .volume-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  /* Quantity stepper + Add to cart stay side by side even on mobile now --
     the stepper is narrow enough (~110px) to leave the button plenty of
     room without wrapping to a stacked, full-width qty bar. */
  .notify-form { flex-direction: column; }
}

/* Checkout attestation -------------------------------------------------------- */

.aminera-ruo-attestation {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: .85rem;
}

/* Legal / content pages -------------------------------------------------------- */

.legal-page .entry-content h2 { margin-top: 2em; }

/* Certificates of Analysis (page-templates/page-coa.php) ---------------------- */

.coa-list { border-top: 1px solid var(--color-border); }
.coa-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}
.coa-list-title { font-weight: 600; }
.coa-list-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: .9rem; color: var(--color-brand); white-space: nowrap;
}
.coa-list-pending { font-size: .85rem; color: var(--color-ink-soft); white-space: nowrap; }

.coa-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; font-weight: 600; color: var(--color-ink-soft); margin-bottom: 14px;
}
.coa-back-link:hover { color: var(--color-brand); text-decoration: none; }

.coa-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.coa-field {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  font-size: .9rem;
}
.coa-field:last-child { border-bottom: 0; }
.coa-field:nth-child(odd) { background: var(--color-bg-alt); }
.coa-field-label { color: var(--color-ink-soft); flex-shrink: 0; }
.coa-field-value { font-weight: 600; text-align: right; word-break: break-word; }

.coa-product-link { margin: -8px 0 16px; }
.coa-product-link a {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: .9rem;
}

@media (max-width: 500px) {
  .coa-field { flex-direction: column; gap: 4px; }
  .coa-field-value { text-align: left; }
}

/* Legal pages: colored hero banner + badge (page-templates/page-legal.php) */

.legal-hero { position: relative; overflow: hidden; text-align: center; padding: 72px 0 56px; }
.legal-hero-vial { position: absolute; filter: drop-shadow(0 14px 20px rgba(15,23,42,.08)); z-index: 0; }
.legal-hero .container { position: relative; z-index: 1; }
.legal-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid; font-size: .8rem; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.legal-hero h1 { font-size: 2.75rem; margin-bottom: 12px; }
.legal-hero p { color: var(--color-ink-soft); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

.legal-hero--amber { background: linear-gradient(180deg, var(--color-warning-bg) 0%, #fff 100%); }
.legal-badge--amber { border-color: var(--color-warning-border); color: var(--color-accent); }
.legal-hero--slate { background: linear-gradient(180deg, #f1f5f9 0%, #fff 100%); }
.legal-badge--slate { border-color: #cbd5e1; color: #334155; }
.legal-hero--violet { background: linear-gradient(180deg, #ede9fe 0%, #fff 100%); }
.legal-badge--violet { border-color: #ddd6fe; color: #5b21b6; }
.legal-hero--green { background: linear-gradient(180deg, #dcfce7 0%, #fff 100%); }
.legal-badge--green { border-color: #bbf7d0; color: #15803d; }
.legal-hero--teal { background: linear-gradient(180deg, #ccfbf1 0%, #fff 100%); }
.legal-badge--teal { border-color: #99f6e4; color: #0f766e; }

@media (max-width: 600px) {
  .legal-hero { padding: 48px 0 40px; }
  .legal-hero-vial { display: none; }
  .legal-hero h1 { font-size: 2rem; }
}

.legal-updated { color: var(--color-ink-soft); font-size: .85rem; margin-bottom: 24px; }
.legal-alert { display: flex; gap: 14px; align-items: flex-start; background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: 12px; padding: 20px 22px; margin-bottom: 8px; }
.legal-alert-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; background: #fde68a; color: var(--color-accent); display: flex; align-items: center; justify-content: center; }
.legal-alert h3 { color: var(--color-accent); margin: 0 0 6px; font-size: 1rem; }
.legal-alert p { color: #92400e; margin: 0; font-size: .9rem; }

.legal-content h2 { font-size: 1.1rem; margin-top: 2em; }
.legal-content h3 { font-size: 1rem; margin-top: 1.4em; }
.legal-content p { color: var(--color-ink-soft); }
.legal-content ul { color: var(--color-ink-soft); padding-left: 20px; margin: 0 0 1em; }
.legal-content li { margin-bottom: 6px; }
.legal-content li::marker { color: var(--color-brand); }
.legal-content .legal-caps { text-transform: uppercase; font-size: .82rem; letter-spacing: .01em; }
.legal-placeholder { background: #dcfce7; color: #15803d; padding: 1px 5px; border-radius: 4px; font-weight: 600; }

.legal-contact-box { background: var(--color-bg-alt); border-radius: 12px; padding: 20px 24px; }
.legal-contact-box strong { display: block; margin-bottom: 6px; color: var(--color-ink); }
.legal-contact-box p { margin: 0; }

/* Contact page (page-templates/page-contact.php) ------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; }
.contact-info-card { background: var(--color-bg-alt); border-radius: var(--radius); padding: 28px; }
.contact-info-card h3 { font-size: 1.05rem; margin-bottom: 12px; }
.contact-info-card p { color: var(--color-ink-soft); font-size: .9rem; }
.contact-info-row { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; }
.contact-info-row svg { flex-shrink: 0; color: var(--color-brand); margin-top: 2px; }
.contact-info-row strong { display: block; font-size: .85rem; }
.contact-info-row span, .contact-info-row a { font-size: .85rem; color: var(--color-ink-soft); }

.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: inherit; font-size: .95rem; color: var(--color-ink); background: #fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--color-brand); outline-offset: 1px;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-row-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.contact-success { text-align: center; padding: 32px 8px; }
.contact-success-icon {
  width: 56px; height: 56px; border-radius: 999px; background: var(--color-brand-light); color: var(--color-brand);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.contact-success h3 { margin-bottom: 8px; }
.contact-success p { color: var(--color-ink-soft); }

@media (max-width: 780px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row-two { grid-template-columns: 1fr; gap: 0; }
}

/* Blog / research notes -------------------------------------------------------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.post-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; }
.post-card-thumb img { border-radius: calc(var(--radius) - 4px); margin-bottom: 12px; }
.entry-meta { color: var(--color-ink-soft); font-size: .85rem; }

@media (max-width: 860px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }

/* Footer ------------------------------------------------------------------- */

.site-footer { background: var(--color-ink); color: #cbd5e1; margin-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding: 48px 24px 32px; }
.footer-brand { color: #fff; font-weight: 700; font-size: 1.1rem; margin: 0 0 12px; }
.footer-about p { font-size: .9rem; color: #94a3b8; margin: 0 0 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: #cbd5e1;
}
.footer-social a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.footer-links h4, .footer-widget-title { color: #fff; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { color: #cbd5e1; font-size: .9rem; }

.footer-fda-notice { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.footer-fda-notice-inner {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(253,186,116,.3);
  border-left: 4px solid var(--color-warning-border);
  border-radius: 10px; padding: 20px 24px;
}
.footer-fda-notice-icon { flex-shrink: 0; color: var(--color-warning-border); margin-top: 2px; }
.footer-fda-notice h4 { color: var(--color-warning-border); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; }
.footer-fda-notice p { color: #cbd5e1; font-size: .85rem; line-height: 1.6; margin: 0; }
.footer-fda-notice strong { color: #fff; }
.footer-fda-notice a { color: var(--color-warning-border); font-weight: 600; white-space: nowrap; }

.footer-disclaimer { border-top: 1px solid rgba(255,255,255,.1); padding: 24px; font-size: .78rem; color: #94a3b8; margin-top: 24px; }
.footer-disclaimer p { max-width: 900px; margin: 0 auto; text-align: center; }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr 1fr; padding: 40px 16px 28px; }
  .footer-fda-notice { padding: 0 16px; }
  .footer-fda-notice-inner { flex-direction: column; }
}

/* ---- Research-use gate: full-viewport takeover, not a small modal ---- */
.ruo-gate-page {
  position: fixed;
  inset: 0;
  z-index: 99999;
  min-height: 100vh;
  /* On mobile Safari, inset:0 sizes against the layout viewport, which can
     be taller than what's actually on screen while the collapsible
     address-bar chrome is showing — leaving a gap at the bottom where the
     real page shows through. Dynamic viewport units track the true
     visible height instead; harmless no-op on browsers without dvh
     support since an unsupported value is simply ignored. */
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 64px 24px;
  background: radial-gradient(circle at 50% 0%, var(--color-brand-light) 0%, #fff 55%);
}
.ruo-gate-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ruo-gate-vial { position: absolute; filter: drop-shadow(0 16px 24px rgba(15,23,42,.10)); }
.ruo-gate-content { position: relative; z-index: 1; width: 100%; max-width: 460px; text-align: center; }
.ruo-gate-wordmark { margin-bottom: 32px; }
.ruo-gate-wordmark .logo-tagline { display: flex; justify-content: center; margin: 4px 0 0; }
.ruo-gate-card { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 40px; box-shadow: 0 24px 60px -12px rgba(15,23,42,.14); }
.ruo-gate-card h1 { font-size: 1.4rem; margin-top: 0; }
.ruo-gate-intro { color: var(--color-ink-soft); font-size: .92rem; margin-bottom: 24px; }
.ruo-gate-checkbox-row { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; cursor: pointer; transition: border-color .15s ease; }
.ruo-gate-checkbox-row:hover { border-color: var(--color-brand); }
.ruo-gate-checkbox-row input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-brand); }
.ruo-gate-checkbox-row span { font-size: .9rem; line-height: 1.4; text-align: left; }
#ruo-gate-enter { width: 100%; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; }
#ruo-gate-enter:disabled { background: #cbd5e1; color: #fff; cursor: not-allowed; }
.ruo-gate-fineprint { font-size: .75rem; color: var(--color-ink-soft); margin-top: 18px; line-height: 1.5; }
.ruo-gate-exit-row { text-align: center; margin-top: 24px; font-size: .85rem; color: var(--color-ink-soft); }
.ruo-gate-exit-row a { color: var(--color-ink); font-weight: 600; }

@media (max-width: 600px) {
  .ruo-gate-page { padding: 40px 16px; }
  .ruo-gate-vial { display: none; }
  .ruo-gate-wordmark .logo-word { font-size: 1.5rem; }
  .ruo-gate-card { padding: 28px 22px; }
}

/* My Account (WooCommerce default myaccount templates — styled here since
   woocommerce_enqueue_styles is disabled theme-wide) ---------------------- */

body.woocommerce-account .container.narrow { max-width: 900px; }

/* Login / Register (woocommerce/myaccount/form-login.php override) */
.account-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 920px; margin: 0 auto; align-items: start; }
.account-auth-grid:has(.account-auth-card:only-child) { grid-template-columns: 1fr; max-width: 440px; }
.account-auth-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 24px 48px -24px rgba(15, 23, 42, .12);
}
.account-auth-card h2 { font-size: 1.5rem; margin-top: 0; margin-bottom: 6px; letter-spacing: -.01em; }
.account-auth-card p { color: var(--color-ink-soft); font-size: .85rem; }
.account-auth-subtitle { margin-bottom: 28px; font-size: .92rem; }

.account-auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.account-auth-actions--register { justify-content: flex-end; }
.account-auth-remember { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--color-ink-soft); cursor: pointer; margin: 0; }
.account-auth-remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-brand); flex-shrink: 0; }

.account-auth-submit {
  width: 100%;
  white-space: nowrap; padding: 14px 28px; border-radius: var(--radius); font-weight: 700;
  background: var(--color-brand); color: #fff !important; border: 1px solid transparent; cursor: pointer; font-size: .98rem;
  box-shadow: 0 10px 24px -10px rgba(30, 58, 95, .5);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.account-auth-submit:hover { background: #14283f; transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(30, 58, 95, .55); }
.account-auth-submit:active { transform: translateY(0); }

/* Registration consent checkboxes (Terms/Privacy + Research Use
   Disclaimer) — same bordered-row look as the entry-gate checkboxes, so
   agreeing to legal terms reads consistently sitewide. */
.account-auth-consent { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 20px; }
.account-auth-checkbox-row {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--color-border); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; transition: border-color .15s ease;
}
.account-auth-checkbox-row:hover { border-color: var(--color-brand); }
.account-auth-checkbox-row input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--color-brand); }
.account-auth-checkbox-row span { font-size: .82rem; line-height: 1.45; color: var(--color-ink-soft); }
.account-auth-checkbox-row a { font-weight: 600; color: var(--color-brand); }

/* WooCommerce's frontend.js wraps password inputs in a .password-input span
   and appends an empty "show password" toggle button whose icon comes
   entirely from woocommerce_enqueue_styles (disabled theme-wide), so it
   renders as an empty control. The input works fine without the toggle. */
.show-password-input { display: none !important; }
.password-input { display: block; }

.woocommerce-form-row,
p.form-row { margin: 0 0 16px; }
.woocommerce-form-row label,
p.form-row > label {
  display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px;
}
.woocommerce-form-row .required { color: #dc2626; text-decoration: none; }
.woocommerce-form-row input.input-text,
.woocommerce-Input--text,
.woocommerce-form select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: inherit; font-size: .95rem; color: var(--color-ink); background: #fff;
}
.woocommerce-form-row input.input-text:focus,
.woocommerce-Input--text:focus { outline: 2px solid var(--color-brand); outline-offset: 1px; }

body.woocommerce-account .button,
.woocommerce-Button,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
  display: inline-block; padding: 12px 24px; border-radius: var(--radius); font-weight: 600;
  background: var(--color-brand); color: #fff !important; border: 1px solid transparent; cursor: pointer; font-size: .95rem;
}
body.woocommerce-account .button:hover,
.woocommerce-Button:hover { background: #14283f; text-decoration: none; }

.woocommerce-LostPassword { margin-top: 14px; font-size: .85rem; }

.woocommerce-error, .woocommerce-message, .woocommerce-info {
  list-style: none; margin: 0 0 24px; padding: 14px 18px; border-radius: var(--radius);
  font-size: .9rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.woocommerce-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.woocommerce-message { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.woocommerce-info { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); color: var(--color-accent); }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { list-style: none; }
.woocommerce-error .button, .woocommerce-message .button, .woocommerce-info .button {
  color: #fff !important; padding: 6px 14px; font-size: .82rem; border-radius: 6px;
}
.woocommerce-error .button { background: #b91c1c; }
.woocommerce-message .button { background: #15803d; }
.woocommerce-info .button { background: var(--color-accent); }

/* Dashboard: nav sidebar + content pane, siblings inside the ".woocommerce"
   div that WC_Shortcodes::shortcode_wrapper() renders around the
   [woocommerce_my_account] output — NOT inside .entry-content directly,
   which only ever has that single wrapper div as its child (grid-ing
   .entry-content itself has no visible effect since there's nothing to
   lay out side by side at that level). Scoped to when the nav actually
   exists (logged in) — the logged-out login/register screen renders no
   .woocommerce-MyAccount-navigation, so it's untouched. */
body.woocommerce-account .entry-content .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.woocommerce-MyAccount-navigation li a {
  display: block; padding: 12px 16px; border-radius: var(--radius); color: var(--color-ink); font-weight: 500; font-size: .9rem;
  border: 1px solid var(--color-border); background: #fff;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--color-bg-alt); border-color: var(--color-ink-soft); text-decoration: none; }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 8px; border-top: 1px solid var(--color-border); padding-top: 8px; }

.woocommerce-MyAccount-content > p:first-child {
  background: var(--color-bg-alt); border-radius: var(--radius); padding: 20px 24px; color: var(--color-ink-soft);
}
.woocommerce-MyAccount-content strong { color: var(--color-ink); }

.woocommerce-orders-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.woocommerce-orders-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--color-border); color: var(--color-ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.woocommerce-orders-table td { padding: 12px; border-bottom: 1px solid var(--color-border); }
.woocommerce-orders-table .button { padding: 6px 14px; font-size: .82rem; }
mark.order-status { background: var(--color-brand-light); color: var(--color-brand); padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; }

.woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.woocommerce-Address { background: var(--color-bg-alt); border-radius: var(--radius); padding: 24px; }
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.woocommerce-Address-title h2 { margin: 0; font-size: 1rem; }
.woocommerce-Address-title .edit { flex-shrink: 0; font-size: .85rem; font-weight: 600; color: var(--color-brand); }
.woocommerce-Address address { font-style: normal; color: var(--color-ink-soft); font-size: .9rem; line-height: 1.7; }

/* Order confirmation ("Order details" table + Billing/Shipping address) ---- */
.woocommerce-order-details__title { font-size: 1.3rem; margin: 40px 0 16px; }
table.order_details { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: 32px; }
table.order_details th, table.order_details td { padding: 12px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
table.order_details thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-ink-soft); font-weight: 600; border-bottom: 2px solid var(--color-border); }
table.order_details tbody .product-total { text-align: right; white-space: nowrap; }
table.order_details tfoot th { font-weight: 500; color: var(--color-ink-soft); border-bottom: 0; }
table.order_details tfoot td { border-bottom: 0; text-align: right; }
table.order_details tfoot .order-total-row:first-child th,
table.order_details tfoot .order-total-row:first-child td { border-top: 2px solid var(--color-border); padding-top: 16px; }
table.order_details tfoot .order-total-row--total th,
table.order_details tfoot .order-total-row--total td { font-size: 1.05rem; font-weight: 700; color: var(--color-ink); }
table.order_details tfoot .order-actions-button { display: inline-block; margin: 2px 6px 2px 0; padding: 8px 16px; font-size: .85rem; }
table.order_details tfoot td:has(.order-actions-button) { text-align: left; }

.aminera-tracking-info {
  background: var(--color-brand-light); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 24px;
}
.aminera-tracking-info h2 { font-size: 1.05rem; margin: 0 0 8px; }
.aminera-tracking-info p { margin: 0; font-size: .9rem; }
.aminera-tracking-info a { color: var(--color-brand); font-weight: 600; }

.woocommerce-customer-details { margin-top: 8px; }
.woocommerce-customer-details .woocommerce-column__title { font-size: 1.05rem; margin: 0 0 12px; }
.woocommerce-customer-details .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.woocommerce-customer-details address {
  font-style: normal; background: var(--color-bg-alt); border-radius: var(--radius); padding: 20px 24px;
  color: var(--color-ink-soft); font-size: .9rem; line-height: 1.7;
}
.woocommerce-customer-details--phone, .woocommerce-customer-details--email { margin: 4px 0 0; }

@media (max-width: 780px) {
  .account-auth-grid { grid-template-columns: 1fr; }
  .account-auth-card { padding: 28px 24px; }
  /* Must repeat the :has() clause from the base rule above — without it,
     this selector is LESS specific than the base rule (which :has() makes
     more specific by counting its argument), so the base rule's
     "220px 1fr" silently wins the cascade at every viewport width no
     matter what this media query says. This was the actual reason nav and
     content kept rendering side-by-side on every account page on mobile,
     even after fixing the table/grid-blowout issues layered on top of it. */
  body.woocommerce-account .entry-content .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; }
  .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
  /* The desktop "separator above Log out" styling reads as a stray line
     once the nav switches from a stacked column to a wrapped pill row. */
  .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 0; border-top: 0; padding-top: 0; }
  .woocommerce-Addresses { grid-template-columns: 1fr; }
  .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr; }

  /* Grid items don't shrink below their content's min-content width by
     default — forcing table.order_details onto one un-wrapped line (below)
     used to blow out these tracks past the viewport instead of actually
     scrolling, stretching the whole page sideways. */
  .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { min-width: 0; }

  /* Order confirmation / view-order "Order details" table: stack each row
     into a readable block instead of a cramped or sideways-scrolling
     table — same idea as the shop_table_responsive treatment below, just
     hand-built since this table has no data-title attributes to key off. */
  table.order_details { display: block; }
  table.order_details thead { display: none; }
  table.order_details tbody, table.order_details tfoot,
  table.order_details tr, table.order_details th, table.order_details td { display: block; width: 100%; }
  /* Stacking product-name above product-total (instead of squeezing them
     side by side) gives the name the full row width to wrap across —
     side-by-side left it so little room that long names wrapped one word
     per line. */
  table.order_details tbody tr {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 0; border-bottom: 1px solid var(--color-border);
  }
  table.order_details tbody tr td.product-total { text-align: right; font-weight: 600; }
  table.order_details tfoot .order-total-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0;
  }
  table.order_details tfoot .order-total-row th { padding: 0; text-align: left; }
  table.order_details tfoot .order-total-row td { padding: 0; text-align: right; }
  /* The desktop-only 2px border-top on the first totals row (set above,
     outside this media query) still applies here too and, stacked right
     under the last product row's own border-bottom, reads as a doubled
     divider line — cancel it out and rely on the product row's border
     as the sole divider. */
  table.order_details tfoot .order-total-row:first-child th,
  table.order_details tfoot .order-total-row:first-child td { border-top: 0; padding-top: 8px; }

  .woocommerce-customer-details address { overflow-wrap: break-word; }

  /* Every WooCommerce shop_table (Orders list, etc.) ships with
     shop_table_responsive + data-title attributes on each cell — WC's own
     stylesheet turns that into a stacked label/value layout on narrow
     screens, but the theme disables WC's default styles entirely
     (woocommerce_enqueue_styles => empty array), so that behavior has to
     be reimplemented here using the same data-title attributes. */
  .shop_table_responsive thead { display: none; }
  .shop_table_responsive, .shop_table_responsive tbody, .shop_table_responsive tr,
  .shop_table_responsive td, .shop_table_responsive th { display: block; width: 100%; }
  .shop_table_responsive tr {
    margin-bottom: 16px; border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 4px 16px; background: #fff;
  }
  .shop_table_responsive tr td, .shop_table_responsive tr th {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px;
    text-align: right; padding: 10px 0; border-bottom: 1px solid var(--color-border);
  }
  .shop_table_responsive tr td:last-child, .shop_table_responsive tr th:last-child { border-bottom: 0; }
  .shop_table_responsive tr td::before, .shop_table_responsive tr th::before {
    content: attr(data-title); font-weight: 600; color: var(--color-ink-soft); font-size: .78rem;
    text-transform: uppercase; letter-spacing: .04em; text-align: left;
  }
}

/* Manual payment instructions (order-received page + email) -- shared by
   the Cash App and Zelle gateways (inc/cashapp-gateway.php,
   inc/zelle-gateway.php), which render the same markup with their own
   copy/fields. ------------------------------------------------------- */
.aminera-payment-instructions { margin-top: 32px; padding: 24px; background: var(--color-bg-alt); border-radius: var(--radius); border: 1px solid var(--color-border); }
.aminera-payment-instructions h2 { font-size: 1.05rem; margin: 0 0 16px; }
.aminera-payment-box { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.aminera-payment-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; font-size: .9rem; }
.aminera-payment-row span { color: var(--color-ink-soft); }
.aminera-payment-row strong { color: var(--color-ink); }
.aminera-payment-ref { border-color: var(--color-brand); background: var(--color-brand-light); }
.aminera-payment-ref strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; letter-spacing: .03em; color: var(--color-brand); }
.aminera-payment-note { margin-top: 16px; color: var(--color-ink-soft); font-size: .85rem; }

.aminera-payment-i-paid,
.aminera-payment-pay-button,
.aminera-payment-view-order {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.aminera-payment-i-paid {
  background: var(--color-brand);
  color: #fff !important;
  border: 1px solid transparent;
  box-shadow: 0 10px 24px -10px rgba(30, 58, 95, .5);
}
.aminera-payment-i-paid::before { content: "\2713"; font-weight: 800; }
.aminera-payment-i-paid:hover:not(:disabled) { background: #14283f; transform: translateY(-1px); }
.aminera-payment-i-paid:disabled { opacity: .7; cursor: default; transform: none; }
.aminera-payment-pay-button,
.aminera-payment-view-order {
  background: #fff;
  color: var(--color-ink);
  border: 1px solid var(--color-border);
}
.aminera-payment-pay-button:hover,
.aminera-payment-view-order:hover { border-color: var(--color-brand); color: var(--color-brand); }
.aminera-payment-i-paid-hint { margin: 10px 0 0; color: var(--color-ink-soft); font-size: .82rem; text-align: center; }
.aminera-payment-paid-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--color-brand-light);
  border: 1px solid var(--color-brand);
  color: var(--color-ink);
  font-size: .9rem;
  line-height: 1.5;
}
.aminera-payment-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
}
.aminera-payment-i-paid.is-hidden,
.aminera-payment-pay-button.is-hidden,
.aminera-payment-i-paid-hint.is-hidden {
  display: none !important;
}

/* "Additional information" on the order-confirmation / view-order pages
   -- WooCommerce's own rendering of Additional Checkout Fields registered
   with 'location' => 'order' (currently just the RUO attestation). Real
   markup confirmed live: a <section> wrapping a plain <h2> and a <dl> of
   <dt>/<dd> pairs, one per field. ------------------------------------- */
.wc-block-order-confirmation-additional-fields-wrapper {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 24px;
}
.wc-block-order-confirmation-additional-fields-wrapper h2 {
  font-size: 1.05rem;
  margin: 0 0 14px;
  color: var(--color-ink);
}
.wc-block-components-additional-fields-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wc-block-components-additional-fields-list dt {
  margin: 0 0 6px;
  font-size: .85rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
}
.wc-block-components-additional-fields-list dd {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--color-brand);
  font-size: .9rem;
}
.wc-block-components-additional-fields-list dd::before {
  content: "\2713";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
}

@media (max-width: 480px) {
  .aminera-payment-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Cart drawer contents (line items, recommended upsell, totals, footer) --- */

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}
.cart-drawer-loading,
.cart-drawer-empty {
  color: var(--color-ink-soft);
  text-align: center;
  margin-top: 32px;
}

.cart-drawer-item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-drawer-item:first-child { padding-top: 0; }
.cart-drawer-item-image {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}
.cart-drawer-item-info { flex: 1; min-width: 0; }
.cart-drawer-item-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cart-drawer-item-name { font-weight: 600; font-size: .92rem; }
.cart-drawer-item-remove {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0 0 8px;
  flex-shrink: 0;
}
.cart-drawer-item-remove:hover { color: #b91c1c; }
.cart-drawer-item-meta { display: block; font-size: .78rem; color: var(--color-ink-soft); margin-top: 2px; }

.cart-drawer-item-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.cart-drawer-item-bottom-row .qty-stepper { flex-shrink: 0; }
.cart-drawer-item-bottom-row .qty-stepper button { width: 30px; padding: 6px 0; font-size: .95rem; }
.cart-drawer-item-bottom-row .qty-stepper .qty { width: 30px; font-size: .88rem; }
.cart-drawer-item-price { font-weight: 700; font-size: .9rem; }

/* Recommended upsell row (Bacteriostatic Water placeholder product) */
.cart-drawer-recommended {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin: 16px 0;
  background: var(--color-brand-light);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
}
.cart-drawer-recommended-image {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
  background: #fff;
}
.cart-drawer-recommended-info { flex: 1; min-width: 0; }
.cart-drawer-recommended-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cart-drawer-recommended-name { font-weight: 600; font-size: .88rem; }
.cart-drawer-recommended-badge {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-brand);
  background: #fff;
  border-radius: 999px;
  padding: 2px 8px;
}
.cart-drawer-recommended-price { display: block; font-size: .85rem; font-weight: 700; color: var(--color-brand); margin-top: 2px; }
.cart-drawer-recommended-add {
  flex-shrink: 0;
  background: var(--color-brand);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.cart-drawer-recommended-add:hover { background: #14283f; }
.cart-drawer-recommended-add:disabled { opacity: .6; cursor: not-allowed; }

.cart-drawer-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  padding: 16px 24px 24px;
}
.cart-drawer-promo { display: flex; gap: 8px; margin-bottom: 16px; }
.cart-drawer-promo-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .88rem;
}
.cart-drawer-promo-apply { padding: 10px 16px; font-size: .85rem; white-space: nowrap; }

.cart-drawer-totals { margin-bottom: 16px; }
.cart-drawer-totals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: .88rem;
  color: var(--color-ink-soft);
}
.cart-drawer-totals-row--total {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
  padding-top: 12px;
}

.cart-drawer-checkout { display: block; text-align: center; width: 100%; }

/* Checkout (WooCommerce Checkout block) --------------------------------
   The block is rendered by WooCommerce/WooCommerce Blocks, not a theme
   template, so there's no PHP markup to edit here — only its own,
   fairly stable class names to restyle. Class names below were
   confirmed against the live rendered checkout, not guessed. */

.wc-block-checkout { max-width: var(--max-width); margin: 0 auto; }

/* The checkout page is just a WP Page rendered through the generic page.php
   template, which wraps everything in .container.narrow (max-width: 780px)
   -- fine for a single-column legal/account page, but it caps the checkout's
   own two-column split (main 65% / sidebar 35%) at 780px total, crushing the
   sidebar down to a ~270px sliver regardless of how wide the browser window
   actually is. Give checkout the same per-page-type override account pages
   already get, wide enough for .wc-block-checkout's own 1200px cap to matter. */
body.woocommerce-checkout .container.narrow { max-width: 1200px; }

.wc-block-components-checkout-step {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}
.wc-block-components-checkout-step__heading-container { margin-bottom: 16px; }
.wc-block-components-checkout-step__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
}
.wc-block-components-checkout-step__description { color: var(--color-ink-soft); font-size: .85rem; }

/* Text inputs / selects: WooCommerce Blocks ships its own input styling
   (from @wordpress/components) — only the shape/color need to change to
   read as part of this site rather than a generic block-editor widget. */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-blocks-components-select .wc-blocks-components-select__select {
  border-radius: 10px !important;
  border-color: var(--color-border) !important;
  font-family: inherit !important;
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
  border-color: var(--color-brand) !important;
  box-shadow: 0 0 0 1px var(--color-brand) !important;
}
.wc-block-components-text-input label { font-family: inherit !important; }

/* Address summary card (the read-only "Test Test / 123 Main St ... Edit"
   card shown once an address is saved). */
.wc-block-components-address-card {
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
}
.wc-block-components-address-card__edit { color: var(--color-brand) !important; font-weight: 600; }

/* Payment method options. */
.wc-block-components-radio-control-accordion-option {
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  transition: border-color .15s ease;
}
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  border-color: var(--color-brand) !important;
  background: var(--color-brand-light);
}
.wc-block-components-radio-control__input { accent-color: var(--color-brand); width: 18px; height: 18px; }
.wc-block-components-radio-control__label { font-weight: 600; }
.wc-block-components-radio-control-accordion-content { color: var(--color-ink-soft); font-size: .85rem; padding-top: 10px; }

/* Small payment-method logo badge (see assets/js/cashapp-blocks.js,
   assets/js/zelle-blocks.js, assets/js/venmo-blocks.js). Defaults to Cash
   App's brand green; the modifier classes override it to each other
   method's own brand color. */
.aminera-payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #00d632;
  color: #fff;
  font-weight: 800;
  font-size: .8rem;
  line-height: 1;
  flex-shrink: 0;
}
.aminera-payment-icon--zelle { background: #6d1ed4; font-size: .72rem; }
.aminera-payment-icon--venmo { background: #3d95ce; }

/* Order summary sidebar. */
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--color-bg-alt);
  border-radius: 16px;
  padding: 20px;
}
.wc-block-components-checkout-order-summary__title { padding-bottom: 12px; }
/* WooCommerce Blocks renders the item's direct parent
   (.wc-block-components-order-summary__content) as `display: table`,
   which uses CSS table auto-layout: columns size to fit CONTENT, not to
   any width/flex declaration on their children. Forcing plain block
   layout fixed the layout MODE, but live inspection after that change
   showed `content` still shrink-wrapping to its child's width (it's
   itself a flex item somewhere upstream with the default flex-basis:
   auto, which sizes to content when no width is set). It needs an
   explicit width on top of the display override to actually fill the
   real available space instead of just hugging its child. */
.wc-block-components-order-summary__content {
  display: block !important;
  width: calc(100% - 6px) !important;
  box-sizing: border-box !important;
}
/* On desktop the item row was shrink-wrapping to the exact sum of its
   children's natural content widths instead of filling the sidebar
   (measured live: item 165.6px vs. its container's 239.6px), which
   starved the description column down to ~78px and forced the product
   name to break mid-word. Forcing the item to take the full row width
   and letting the description column grow into the leftover space
   (after the fixed-width image/price columns) fixes that. Shaving a
   few px off on purpose (rather than a plain 100%) guarantees a real,
   visible gap between the price and the card's edge regardless of
   subpixel font rendering differences across browsers/OSes. */
.wc-block-components-order-summary-item {
  width: 100%;
  box-sizing: border-box;
}
.wc-block-components-order-summary-item__image {
  flex-shrink: 0;
}
.wc-block-components-order-summary-item__image img {
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.wc-block-components-order-summary-item__description {
  flex: 1 1 auto;
  min-width: 0;
  align-items: stretch;
}
.wc-block-components-order-summary-item__total-price {
  flex-shrink: 0;
}
/* align-items: stretch above wasn't enough, and neither was a plain
   width:100% — both were measured live to have zero effect, width
   staying pinned at exactly 78.05px inside the ~114px column no matter
   what. That means a WooCommerce Blocks selector with higher specificity
   (a scoped descendant rule, e.g. reused product-name styling shared
   across cart/checkout/mini-cart contexts) is still winning. !important
   is the only thing that reliably beats WC Blocks' own CSS elsewhere in
   this stylesheet (see the checkout actions_row and cashapp button
   rules above), so use it here too. */
.wc-block-components-product-name,
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
  width: 100% !important;
  box-sizing: border-box !important;
}
.wc-block-components-product-name {
  font-size: .92rem;
  font-weight: 600;
  color: var(--color-ink);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
/* WooCommerce Blocks ships this element with word-break: break-word,
   the legacy value that permits breaking mid-word (confirmed live:
   "Lyophilized" was splitting into "Lyophilize" / "d"). Override with
   the modern equivalent that only breaks a whole word as a last resort. */
.wc-block-components-product-metadata__description,
.wc-block-components-product-metadata__description p {
  word-break: normal;
  overflow-wrap: break-word;
}
/* Redundant with the total price shown on the row's right side (same
   figure for the common qty-1 case); hiding it declutters the row and
   gives the name/description text more visual room. */
.wc-block-components-order-summary-item__individual-prices {
  display: none;
}
.wc-block-components-totals-item__label { color: var(--color-ink-soft); }
.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
  padding-top: 12px;
  font-size: 1.1rem;
  font-weight: 700;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--color-ink); font-weight: 700; }

/* Place order button + a small trust line underneath, added purely via
   CSS content since the button markup itself is React-rendered. */
.wc-block-components-checkout-place-order-button {
  width: 100%;
  border-radius: 12px !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  font-size: .98rem !important;
  box-shadow: 0 10px 24px -10px rgba(30, 58, 95, .5);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wc-block-components-checkout-place-order-button:hover {
  background: #14283f !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(30, 58, 95, .55);
}
.wc-block-components-checkout-place-order-button__text::after { content: " \2192"; }
/* The trust line below is a generated pseudo-element (no real markup to
   hook into). Two earlier attempts (absolute bottom:0, then flex-wrap +
   flex-basis:100%) both measured with a real browser as rendering with
   zero gap below the button — the row turned out to lay its children
   out in a way that put the ::after (last in DOM) above the button
   instead of below it. Forcing plain block layout sidesteps whatever
   flex/order setup WooCommerce Blocks uses internally: children of a
   block box always stack top-to-bottom in DOM order, full stop. */
.wc-block-checkout__actions_row { display: block !important; }
.wc-block-checkout__actions_row::after {
  content: "Secure checkout — orders are confirmed manually before shipping.";
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: .78rem;
  color: var(--color-ink-soft);
}

.wc-block-checkout__terms { font-size: .85rem; color: var(--color-ink-soft); }
.wc-block-checkout__terms a { color: var(--color-brand); font-weight: 600; }

/* "Add a note" + the research-use attestation (an Additional Checkout
   Field, see aminera-compliance.php) both render as .wc-block-components-checkbox. */
.wc-block-components-checkbox { align-items: flex-start; gap: 10px; }
.wc-block-components-checkbox__label { font-size: .85rem; color: var(--color-ink-soft); line-height: 1.5; }
.wc-block-components-checkbox__mark { accent-color: var(--color-brand); }

@media (max-width: 780px) {
  .wc-block-components-checkout-step,
  .wp-block-woocommerce-checkout-order-summary-block { padding: 18px; }
}
.cart-drawer-continue { display: block; text-align: center; width: 100%; margin-top: 10px; }