/* ============================================================
   CORE LABS — WooCommerce overrides
   Restyles Woo's default markup to match the reference build:
   product cards, single product, cart, checkout, COA portal.
   ============================================================ */

/* ---------- Layout ---------- */
.woocommerce-page .container,
.woocommerce .container { max-width: var(--container); }

.site-main,
.woocommerce-page main { padding: 48px 0 80px; }

.cl-skip-link {
  position: absolute;
  left: -9999px;
}
.cl-skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--accent-500);
  color: #fff;
  border-radius: var(--radius-sm);
}

/* ---------- Logo fallback ---------- */
.cl-logo__text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mist-50);
}
.cl-logo__text span { color: var(--accent-300); margin-left: 6px; }

/* ---------- Cart badge ---------- */
.cl-cart-btn { position: relative; }
.cl-cart-count {
  position: absolute;
  top: 6px; right: 4px;
  min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent-500);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
}

/* ---------- Mobile slide-out ---------- */
.cl-mobile { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; }
.cl-mobile[aria-hidden="false"] { pointer-events: auto; }

.cl-mobile__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
  opacity: 0;
  transition: opacity var(--transition);
}
.cl-mobile[aria-hidden="false"] .cl-mobile__overlay { opacity: 1; }

.cl-mobile__panel {
  position: absolute; top: 0; right: 0;
  width: 88%; max-width: 380px; height: 100%;
  display: flex; flex-direction: column;
  background: var(--ink-900);
  border-left: 1px solid var(--ink-700);
  transform: translateX(100%);
  transition: transform var(--transition);
}
.cl-mobile[aria-hidden="false"] .cl-mobile__panel { transform: translateX(0); }

.cl-mobile__head {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 20px;
  border-bottom: 1px solid var(--ink-700);
}
.cl-mobile__nav { flex: 1; overflow-y: auto; padding: 12px 20px; }
.cl-mobile__nav a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink-800);
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--mist-50);
}
.cl-mobile__foot {
  margin: 0; padding: 16px 20px;
  border-top: 1px solid var(--ink-800);
  text-align: center;
  font-family: var(--font-display);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--mist-500);
}

body.cl-menu-open { overflow: hidden; }

/* ---------- Research-use notice ---------- */
.cl-ruo-notice {
  margin: 20px 0;
  padding: 12px 16px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-sm);
  background: var(--ink-800);
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--mist-400);
}

/* ---------- Product grid ---------- */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 480px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }

.woocommerce ul.products li.product {
  display: flex; flex-direction: column;
  margin: 0 !important; padding: 0;
  width: auto !important;
  overflow: hidden;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-md);
  background: var(--ink-800);
  transition: border-color var(--transition);
}
.woocommerce ul.products li.product:hover { border-color: rgba(106,62,153,0.5); }

.woocommerce ul.products li.product a img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0;
  background: transparent;
  transition: transform var(--transition);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 16px 16px 0;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--mist-50);
}

.woocommerce ul.products li.product .price {
  display: block;
  padding: 8px 16px 0;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--mist-50);
}
.woocommerce ul.products li.product .price del {
  color: var(--mist-500);
  font-size: 14px; font-weight: 400;
  margin-right: 8px;
}
.woocommerce ul.products li.product .price ins {
  background: none;
  color: var(--mist-50);
  text-decoration: none;
}

.woocommerce ul.products li.product .button {
  margin: 16px;
  width: calc(100% - 32px);
}

/* Sale flash → "SAVE" style badge */
.woocommerce span.onsale {
  top: 12px; left: 12px; right: auto;
  min-width: auto; min-height: auto;
  padding: 4px 10px;
  border: 1px solid rgba(106,62,153,0.5);
  border-radius: var(--radius-sm);
  background: rgba(106,62,153,0.15);
  color: var(--accent-300);
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  line-height: 1.4;
}

/* ---------- Single product ---------- */
.woocommerce div.product { color: var(--mist-300); }

.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  text-transform: uppercase;
  color: var(--mist-50);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display);
  font-size: 2.25rem; font-weight: 700;
  color: var(--mist-50);
}
.woocommerce div.product p.price del {
  font-size: 1.25rem; font-weight: 400;
  color: var(--mist-500);
  margin-right: 10px;
}
.woocommerce div.product p.price ins { background: none; color: var(--mist-50); text-decoration: none; }

.woocommerce div.product .woocommerce-product-gallery img {
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-md);
  background: var(--ink-950);
}

/* Variation selector styled as strength pills */
.woocommerce div.product form.cart .variations { border: 0; margin-bottom: 20px; }
.woocommerce div.product form.cart .variations td { padding: 0; }
.woocommerce div.product form.cart .variations label {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--mist-400);
}
.woocommerce div.product form.cart .variations select,
.woocommerce .quantity input.qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
  padding: 12px 14px;
  border: 1px solid var(--ink-500);
  border-radius: var(--radius-sm);
  background: var(--ink-900);
  color: var(--mist-50);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color var(--transition);
}
.woocommerce div.product form.cart .variations select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--accent-500);
  outline: none;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0; margin: 0 0 24px;
  border-bottom: 1px solid var(--ink-700);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: 0; background: none; border-radius: 0; margin: 0 24px 0 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 12px 0;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--mist-400);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--mist-50); border-bottom: 2px solid var(--accent-500); }

.cl-coa-link a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent-300);
}

/* ---------- Cart & checkout ---------- */
.woocommerce table.shop_table {
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-md);
  border-collapse: separate;
  color: var(--mist-300);
}
.woocommerce table.shop_table th {
  font-family: var(--font-display);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--mist-500);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--ink-700); }
.woocommerce table.shop_table td.product-name a { color: var(--mist-50); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.woocommerce-checkout #payment {
  border-radius: var(--radius-md);
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--ink-700); }
.woocommerce-checkout #payment div.payment_box {
  background: var(--ink-900);
  color: var(--mist-300);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--ink-900); }


/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--accent-500);
  background: var(--ink-800);
  color: var(--mist-200);
}
.woocommerce-error { border-top-color: #ef4444; }

/* ---------- COA portal ---------- */
.cl-coa-search {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.cl-coa-search input[type="search"] {
  flex: 1; min-width: 240px;
  padding: 14px 16px;
  border: 1px solid var(--ink-500);
  border-radius: var(--radius-md);
  background: var(--ink-900);
  color: var(--mist-50);
  font-size: 14px;
}
.cl-coa-search input[type="search"]:focus { border-color: var(--accent-500); outline: none; }

.cl-coa-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .cl-coa-grid { grid-template-columns: repeat(2, 1fr); } }

.cl-coa-card {
  padding: 20px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-md);
  background: var(--ink-800);
  transition: border-color var(--transition);
}
.cl-coa-card:hover { border-color: rgba(106,62,153,0.5); }

.cl-coa-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--mist-50);
  margin: 0 0 12px;
}
.cl-coa-card dl {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px; margin: 0 0 18px; font-size: 13px;
}
.cl-coa-card dt {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--mist-500);
  margin: 0;
}
.cl-coa-card dd { margin: 2px 0 0; color: var(--mist-100); }
.cl-coa-card dd.mono { font-family: var(--font-mono); font-size: 12px; }

.cl-coa-empty {
  padding: 64px 24px;
  border: 1px dashed var(--ink-500);
  border-radius: var(--radius-md);
  background: rgba(13,13,15,0.5);
  text-align: center;
  color: var(--mist-400);
}

/* ---------- Footer ---------- */
.cl-footer {
  border-top: 1px solid var(--ink-700);
  background: var(--ink-900);
  margin-top: 80px;
}
.cl-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  padding: 64px 20px;
}
@media (min-width: 768px) { .cl-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .cl-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; padding: 64px 40px; }
}

.cl-footer__blurb { max-width: 300px; color: var(--mist-400); font-size: 14px; }
.cl-footer__ruo {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--mist-500);
  line-height: 1.8;
}
.cl-footer__heading {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.24em;
  color: var(--accent-300);
  margin-bottom: 18px;
}
.cl-footer__list { list-style: none; margin: 0; padding: 0; }
.cl-footer__list li { margin-bottom: 12px; }
.cl-footer__list a { color: var(--mist-400); font-size: 14px; }
.cl-footer__list a:hover { color: var(--mist-50); }

.cl-footer__bottom { border-top: 1px solid var(--ink-800); }
.cl-footer__bottom-inner {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px 20px;
}
@media (min-width: 1024px) {
  .cl-footer__bottom-inner { flex-direction: row; align-items: center; justify-content: space-between; padding: 28px 40px; }
}
.cl-footer__disclaimer {
  max-width: 780px; margin: 0;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  line-height: 1.7;
  color: var(--mist-500);
}
.cl-footer__copy { margin: 0; font-size: 12px; color: var(--mist-500); }

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Homepage
   ============================================================ */

.cl-eyebrow {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.28em;
  color: var(--accent-300);
  margin: 0 0 14px;
}

/* ---------- Hero ---------- */
.cl-hero { border-bottom: 1px solid var(--ink-800); overflow: hidden; }
@media (min-width: 1024px) {
}

.cl-hero h1 { font-size: clamp(3rem, 8vw, 5rem); margin: 0 0 24px; }
.cl-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (min-width: 1024px) { }

/* ---------- Sections ---------- */
.cl-section { padding: 64px 0; border-bottom: 1px solid var(--ink-800); }
.cl-section--alt { background: var(--ink-900); }
@media (min-width: 1024px) { .cl-section { padding: 80px 0; } }

.cl-section__title {
  display: flex; align-items: center; gap: 20px;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  letter-spacing: 0.22em;
  margin: 0 0 44px;
}
.cl-section__title::before,
.cl-section__title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--ink-600), transparent);
}

/* ---------- Category cards ---------- */
@media (min-width: 640px)  { }
@media (min-width: 1024px) { }

.cl-cat {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 24px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-md);
  background: var(--ink-800);
  text-align: center;
  transition: border-color var(--transition);
}
.cl-cat:hover { border-color: rgba(106,62,153,0.6); }
.cl-cat h3 { font-size: 1rem; letter-spacing: 0.1em; margin: 0 0 12px; }
.cl-cat p { flex: 1; font-size: 13px; line-height: 1.7; color: var(--mist-400); margin: 0 0 24px; }
.cl-cat .cl-btn { width: 100%; padding: 10px 16px; font-size: 11px; }

/* ---------- Quality ---------- */
.cl-quality__head { max-width: 42rem; margin: 0 auto 56px; text-align: center; }
.cl-quality__head h2 { font-size: clamp(1.75rem, 5vw, 3rem); }
.cl-quality__lede { font-size: 15px; line-height: 1.75; color: var(--mist-300); }
.cl-quality__head .cl-hero__cta { justify-content: center; }

.cl-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 1024px) { .cl-pillars { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.cl-pillar {
  padding: 24px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-md);
  background: rgba(20,20,22,0.6);
  text-align: center;
}
.cl-pillar h3 { font-size: 0.875rem; letter-spacing: 0.14em; margin: 0 0 10px; }
.cl-pillar p { font-size: 12px; line-height: 1.7; color: var(--mist-400); margin: 0; }

/* ---------- How it works ---------- */
@media (min-width: 640px)  { }
@media (min-width: 1024px) { }

/* ---------- FAQ accordion (native <details>) ---------- */
.cl-faq {
  border-bottom: 1px solid var(--ink-700);
  padding: 0;
}
.cl-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--mist-100);
}
.cl-faq summary::-webkit-details-marker { display: none; }
.cl-faq summary::after { content: " +"; color: var(--accent-300); float: right; }
.cl-faq[open] summary::after { content: " –"; }
.cl-faq p { padding: 0 0 20px; margin: 0; color: var(--mist-300); font-size: 14px; line-height: 1.75; }

/* ---------- Page content ---------- */
.cl-content h2 { font-size: 1.375rem; margin: 40px 0 14px; }
.cl-content p { margin: 0 0 16px; line-height: 1.75; }
.cl-content ul { margin: 16px 0; padding-left: 20px; }
.cl-content li { margin-bottom: 8px; color: var(--mist-300); }

/* ============================================================
   Fixes
   ============================================================ */

/* wp_nav_menu with items_wrap '%3$s' emits bare <li> with no <ul>, so the
   markers have to be cleared on the nav itself. */
.cl-nav,
.cl-mobile__nav {
  list-style: none;
}
.cl-nav li,
.cl-mobile__nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cl-nav > li { display: inline-flex; }
.cl-mobile__nav > li { display: block; }

/* Footer menus come through wp_nav_menu with a real <ul>. */
.cl-footer__list,
.cl-footer__list li { list-style: none; }

/* ---------- Manual payment instructions ---------- */
.cl-pay-instructions {
  margin: 24px 0;
  padding: 24px;
  border: 1px solid rgba(106,62,153,0.4);
  border-radius: var(--radius-md);
  background: var(--ink-800);
}
.cl-pay-instructions h2 {
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  margin: 0 0 10px;
}
.cl-pay-details {
  display: grid; grid-template-columns: auto 1fr;
  gap: 10px 20px;
  margin: 20px 0;
  padding: 18px 0;
  border-top: 1px solid var(--ink-600);
  border-bottom: 1px solid var(--ink-600);
  font-size: 14px;
}
.cl-pay-details dt {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--mist-500);
  margin: 0;
}
.cl-pay-details dd { margin: 0; color: var(--mist-50); }
.cl-pay-details code {
  padding: 3px 8px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-sm);
  background: var(--ink-950);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--mist-50);
  word-break: break-all;
}
.cl-pay-important {
  padding: 12px 14px;
  border: 1px solid rgba(106,62,153,0.3);
  border-radius: var(--radius-sm);
  background: rgba(106,62,153,0.06);
  font-size: 14px;
  color: var(--mist-100);
}
.cl-pay-safety { font-size: 12px; line-height: 1.7; color: var(--mist-500); }

/* ============================================================
   Cart & checkout — dark theme enforcement
   WooCommerce ships light-theme defaults (white backgrounds,
   #444 label text) that win on specificity. These override them.
   ============================================================ */

/* Something in the WooCommerce/plugin stack sets a white body on these
   templates. Force the page ground back to the brand black. */
body,
/* Background intentionally NOT set here. This block used to force
   --ink-950 !important on every WooCommerce body, which painted over the
   fixed site background plate — the rock was visible on the homepage and
   nowhere else, and a plain `body { background: transparent }` could not win
   against it (body.woocommerce-page out-specifies body). The base colour
   lives on <html>; the plate sits behind body and in front of that. */
body.woocommerce,
body.woocommerce-page,
body.woocommerce-checkout,
body.woocommerce-cart {
  background-color: transparent !important;
  color: var(--mist-300);
}

/* Deliberately transparent. This used to be a solid --ink-950, which painted
   over the site background plate on every shop, cart and account page — the
   rock was only ever visible on the homepage. Readability is handled by the
   panels and the washes below, where the words actually are. */
.woocommerce-page .site-main,
.woocommerce-page main,
.woocommerce main {
  background: transparent;
}

/* ---------- Form labels and helper text ---------- */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce form .form-row,
.woocommerce-page form .form-row,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label,
.woocommerce form .form-row .required,
.woocommerce-input-wrapper label {
  color: var(--mist-300) !important;
}

.woocommerce form .form-row label,
.woocommerce-billing-fields label,
.woocommerce-additional-fields label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mist-400) !important;
  margin-bottom: 6px;
  display: block;
}

.woocommerce form .form-row .required { color: var(--accent-300) !important; border: 0; }

/* Section headings */
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
.woocommerce-shipping-fields h3,
#order_review_heading,
.woocommerce-checkout h3 {
  color: var(--mist-50) !important;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 32px 0 18px;
}

/* ---------- Every input, including ones Woo styles inline ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce #coupon_code,
.select2-container--default .select2-selection--single,
.select2-dropdown,
.select2-search__field {
  background-color: var(--ink-900) !important;
  border: 1px solid var(--ink-500) !important;
  color: var(--mist-50) !important;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.woocommerce textarea { min-height: 90px; }

.woocommerce input.input-text::placeholder,
.woocommerce textarea::placeholder { color: var(--mist-600); }

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--accent-500) !important;
  outline: none;
}

/* Select2 (country / state pickers) */
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--mist-50) !important; }
.select2-container--default .select2-results__option { background: var(--ink-900); color: var(--mist-200); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent-500); color: #fff; }

/* ---------- Order review table ---------- */
.woocommerce-checkout-review-order,
.woocommerce-checkout-review-order-table {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-md);
  color: var(--mist-200);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  color: var(--mist-200) !important;
  border-color: var(--ink-700) !important;
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table .order-total .amount { color: var(--mist-50) !important; }
.woocommerce .woocommerce-Price-amount { color: var(--mist-50); }


/* ---------- Loading overlay ---------- */
.blockUI.blockOverlay {
  background-color: var(--ink-950) !important;
  opacity: 0.6 !important;
}

/* ---------- Notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--ink-800) !important;
  border-top: 3px solid var(--accent-500);
  color: var(--mist-200) !important;
  border-radius: var(--radius-sm);
}
.woocommerce-error { border-top-color: #ef4444; }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--accent-300); }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* Add-to-cart notice: keep the two buttons together and readable. */
.woocommerce-message .cl-notice-actions {
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* ---------- Payment box ---------- */
.woocommerce-checkout #payment {
  background: var(--ink-800) !important;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-md);
}
.woocommerce-checkout #payment ul.payment_methods li { color: var(--mist-200); }
.woocommerce-checkout #payment ul.payment_methods label { color: var(--mist-100) !important; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--ink-900) !important;
  color: var(--mist-300) !important;
  border-radius: var(--radius-sm);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--ink-900) !important; }
.woocommerce-checkout #payment .place-order { border-top: 1px solid var(--ink-700); }

/* Terms / privacy links inside checkout */
.woocommerce-terms-and-conditions-wrapper,
.woocommerce-privacy-policy-text { color: var(--mist-400); }
.woocommerce-privacy-policy-text a { color: var(--accent-300); }

/* Checkout shortcut on the product page. */
.cl-checkout-shortcut { margin: 14px 0 0; }
.cl-checkout-shortcut .cl-btn { padding: 11px 22px; font-size: 12px; }

/* ---------- Logo sizing, hardened ----------
   WooCommerce's stylesheets set img rules that were winning over the plain
   class selectors, leaving the footer logo at its natural ~103px height.
   Scoped + !important so the logo can't blow the footer apart again. */

/* ============================================================
   Age verification gate
   ============================================================ */

.cl-agegate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Opaque, not translucent — the content behind must not be readable. */
  background: var(--ink-950);
}
.cl-agegate[hidden] { display: none; }

body.cl-agegate-open { overflow: hidden; }

.cl-agegate__panel {
  width: 100%;
  max-width: 480px;
  padding: 40px 32px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-lg);
  background: var(--ink-900);
  text-align: center;
  box-shadow: 0 0 120px -20px rgba(106, 62, 153, 0.45);
}

.cl-agegate__mark { margin-bottom: 28px; }
.cl-agegate__mark img,
.cl-agegate__logo {
  height: 44px !important;
  width: auto !important;
  max-width: 240px !important;
  margin: 0 auto;
  display: block;
}

.cl-agegate h2 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  margin: 0 0 14px;
}

.cl-agegate p {
  color: var(--mist-300);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 28px;
}

.cl-agegate__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
@media (min-width: 420px) {
  .cl-agegate__actions { flex-direction: row; justify-content: center; }
}
.cl-agegate__actions .cl-btn { flex: 1; justify-content: center; }

.cl-agegate__ruo {
  padding-top: 22px;
  border-top: 1px solid var(--ink-700);
  font-family: var(--font-display);
  font-size: 10px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.8 !important;
  color: var(--mist-500) !important;
  margin: 0 0 14px !important;
}

.cl-agegate__links {
  font-size: 12px !important;
  margin: 0 !important;
}
.cl-agegate__links a { color: var(--accent-300); }
.cl-agegate__links span { color: var(--mist-600); margin: 0 8px; }

.cl-agegate__declined h2 { color: var(--mist-50); }
.cl-agegate__declined p { margin-bottom: 0; }
.cl-agegate__declined:focus { outline: none; }

/* Single product gallery — smaller, fully visible, centred. */
.woocommerce div.product .woocommerce-product-gallery {
  max-width: 100%;   /* was 340px — the photo is the product */
}

/* Keep the cards a consistent height so the grid stays tidy even though
   the images themselves are no longer a fixed ratio. */
.woocommerce ul.products li.product {
  justify-content: flex-start;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin-top: auto;
}

/* ---------- WooCommerce container ---------- */
.cl-woo-wrap { padding-top: 40px; padding-bottom: 72px; }

/* The card's own surface provides the frame — the image sits flush to it. */
.woocommerce ul.products li.product a:first-of-type {
  display: block;
  background: var(--ink-950);
  border-bottom: 1px solid var(--ink-700);
}

.woocommerce div.product .woocommerce-product-gallery {
  max-width: 340px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink-950);
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  border: 0 !important;
  border-radius: 0 !important;
}

/* Tabs and related products need breathing room now they're contained. */
.woocommerce div.product .woocommerce-tabs { margin-top: 56px; }
.woocommerce .related.products { margin-top: 64px; }
.woocommerce .related.products > h2,
.woocommerce div.product .woocommerce-tabs .panel > h2 {
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  margin-bottom: 24px;
}

/* Give the image area a consistent height so cards line up in the grid. */
.woocommerce ul.products li.product a:first-of-type {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 12px 12px 0;
}

/* ---------- Product tabs ----------
   WooCommerce styles the active tab white with grey text, which is
   unreadable on the dark theme. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--mist-400) !important;
  background: transparent !important;
  text-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--mist-50) !important;
  border-bottom: 2px solid var(--accent-500);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
  background: transparent;
  color: var(--mist-300);
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
  color: var(--mist-200) !important;
  border-color: var(--ink-700) !important;
}

/* ---------- Correction ----------
   The WooCommerce loop anchor wraps the image, title AND price. Making it a
   flex row put them side by side. It must stay block-level; centre the image
   with auto margins instead. */
.woocommerce ul.products li.product a:first-of-type,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block !important;
  align-items: initial;
  justify-content: initial;
  min-height: 0;
  padding: 0;
}

/* Title and price sit below the image, padded in from the card edge. */
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 16px 16px 0; }
.woocommerce ul.products li.product .price { padding: 6px 16px 0; }

/* ---------- Grid: kill WooCommerce's clearfix pseudo-elements ----------
   WooCommerce adds ::before/::after to ul.products as a float clearfix. In a
   grid container those become grid ITEMS and consume real cells — which was
   pushing the first product into column 2 and leaving cell 1 empty. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
  content: none !important;
}

/* Same clearfix problem on the loop item itself. */
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
  display: none !important;
  content: none !important;
}

/* ============================================================
   Shop / category page header
   ============================================================ */

.cl-shop-header {
  padding: 44px 0 40px;
  border-bottom: 1px solid var(--ink-800);
  background: var(--ink-950);
}
@media (min-width: 1024px) { .cl-shop-header { padding: 64px 0 52px; } }

/* Breadcrumb */
.cl-breadcrumb,
.woocommerce .cl-breadcrumb {
  margin: 0 0 22px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mist-500);
}
.cl-breadcrumb a { color: var(--mist-400); }
.cl-breadcrumb a:hover { color: var(--accent-300); }

.cl-shop-header__title {
  font-size: clamp(2.5rem, 7vw, 4rem);
  line-height: 1.26;
  margin: 0 0 18px;
}

.cl-shop-header__lede {
  max-width: 46rem;
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist-400);
}

/* The archive grid sits directly under the toolbar. */
.woocommerce.post-type-archive-product .cl-woo-wrap,
.woocommerce.tax-product_cat .cl-woo-wrap { padding-top: 0; }

/* ---------- Product cards: a little more polish ---------- */
.woocommerce ul.products li.product {
  transition: border-color var(--transition), transform var(--transition);
}
.woocommerce ul.products li.product:hover { transform: translateY(-2px); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 18px;
  letter-spacing: 0.06em;
  padding-bottom: 2px;
}
.woocommerce ul.products li.product .price {
  font-size: 16px;
  padding-bottom: 4px;
}
.woocommerce ul.products li.product .button {
  margin: 14px 16px 16px;
  width: calc(100% - 32px);
  padding: 12px 18px;
  font-size: 11px;
}

/* Single product page needs the same top spacing as the archives. */
.woocommerce.single-product .cl-woo-wrap { padding-top: 32px; }
.woocommerce.single-product .cl-breadcrumb { margin-bottom: 26px; }

/* Any stray archive title Woo still emits. */
.woocommerce-products-header__title,
.woocommerce .page-title:not(.cl-shop-header__title) { display: none; }

/* ============================================================
   Navigation — clearer Home and current-page state
   ============================================================ */

/* Underline the page you're on, so "where am I / how do I get back" is
   answerable at a glance. */
.cl-nav a {
  position: relative;
  padding: 6px 0;
}
/* The page you are on is filled purple, not just underlined — a 2px rule under
   one word in a row of nine is easy to miss. */
.cl-nav .current-menu-item > a,
.cl-nav .current_page_item > a,
.cl-nav .current-menu-ancestor > a {
  color: #FFFFFF;
  background: var(--ui-500);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: 0 6px 18px -10px rgba(123, 63, 178, 0.9);
}
.cl-nav .current-menu-item > a::after,
.cl-nav .current_page_item > a::after { display: none; }

/* Home's house icon used to be injected here as a ::before, back when it was
   the only item with one. Every item now gets a real inline SVG from
   inc/nav-icons.php, so this rule only produced a second house beside it.
   The --cl-home-icon token below is still used by the header's home button. */

:root {
  --cl-home-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E");
}

/* The logo is also a home link — make that discoverable on hover. */
.cl-logo {
  transition: opacity var(--transition);
  cursor: pointer;
}
.cl-logo:hover { opacity: 0.75; }

/* Breadcrumb "Home" is another route back; give it weight. */
.cl-breadcrumb a:first-child { color: var(--accent-300); }

/* ============================================================
   Shop header — spacing corrections
   ============================================================ */

/* #main carries a 48px top pad for ordinary pages, but the shop header
   supplies its own. Stacked, they left ~92px of dead space above the
   breadcrumb. The header owns the spacing on these templates. */
.woocommerce-shop main#main,
.tax-product_cat main#main,
.tax-product_tag main#main {
  padding-top: 0;
}

@media (max-width: 782px) {
  .cl-shop-header { padding: 28px 0 26px; }

}

/* ============================================================
   Mobile Home button
   ============================================================ */

/* Only shown where the desktop nav is hidden — above 1024px the nav's own
   Home item covers it, and two Home links in one bar is clutter. */
.cl-home-btn { display: flex; }
@media (min-width: 1024px) {
  .cl-home-btn { display: none; }
}


/* Tighten the icon row on small screens so four buttons still fit
   comfortably beside the logo without crowding it. */
@media (max-width: 420px) {
  .cl-header__icons { gap: 0; }
}

/* ============================================================
   Payment instructions — one-tap pay + copyable details
   ============================================================ */

.cl-pay-instructions {
  max-width: 44rem;
  margin: 32px 0;
  padding: 28px;
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-md);
  background: var(--ink-950);
}
.cl-pay-instructions h2 { margin: 0 0 10px; font-size: 1.35rem; }

.cl-pay-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 20px;
  margin: 20px 0;
  align-items: baseline;
}
.cl-pay-details dt {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist-400);
}
.cl-pay-details dd { margin: 0; color: var(--mist-100); }
.cl-pay-details code {
  font-family: var(--font-mono);
  font-size: 14px;
  word-break: break-all;
}

/* The handle and the wallet address are the two values that must be
   reproduced exactly, so both are click-to-copy. */
.cl-copyable {
  position: relative;
  cursor: pointer;
  padding: 3px 8px;
  border: 1px dashed var(--ink-700);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), color var(--transition);
}
.cl-copyable:hover { border-color: var(--accent-500); color: #fff; }
.cl-copyable.is-copied { border-color: var(--accent-400); border-style: solid; }
.cl-copyable.is-copied::after {
  content: attr(data-cl-flash);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--accent-600);
  color: #fff;
}

.cl-pay-actions { margin: 22px 0 8px; }
.cl-pay-open { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 600px) {
  /* On a phone this button opens the actual payment app — make it the
     obvious next action rather than an inline link. */
  .cl-pay-open { display: flex; width: 100%; }
}

.cl-pay-fallback,
.cl-pay-safety { font-size: 13px; color: var(--mist-400); }
.cl-pay-important {
  padding: 12px 14px;
  border-left: 2px solid var(--accent-500);
  background: rgba(106, 62, 153, 0.09);
  font-size: 14px;
}

/* ============================================================
   Hero vial — clickable
   ============================================================ */

/* The vial reads as the hero's focal point, so people click it. Make that
   work, and make it look like it works. */

/* ============================================================
   Tap targets and button states — measured, not guessed
   ============================================================ */

/* The shop-grid "Select options" links measured 316x35 on a 390px phone.
   Anything under 44px high is a miss-prone target. */
.woocommerce ul.products li.product .button {
  min-height: var(--tap-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Add to cart measured 138x42 — too short, and too narrow to hit confidently. */
.woocommerce .single_add_to_cart_button {
  min-height: var(--tap-lg);
  padding-inline: 34px;
}
@media (max-width: 782px) {
  /* On a phone the primary action should span the column, not float mid-row. */
  .woocommerce .single_add_to_cart_button { width: 100%; }
  .woocommerce form.cart .quantity { margin-bottom: 12px; }
}

/* The quantity stepper is a control too — it was inheriting nothing. */
.woocommerce .quantity input.qty {
  min-height: var(--tap);
  min-width: 72px;
  font-size: 16px;          /* 16px stops iOS zooming the page on focus */
  font-weight: 700;
  text-align: center;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  color: var(--mist-50);
  border-radius: var(--radius-sm);
}
.woocommerce .quantity input.qty:focus-visible {
  outline: 3px solid var(--ui-ring);
  outline-offset: 2px;
}

/* Any select that survives elsewhere on the site. */
.woocommerce select,
.woocommerce-page select {
  min-height: var(--tap);
  font-size: 16px;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  color: var(--mist-50);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.woocommerce select:focus-visible {
  outline: 3px solid var(--ui-ring);
  outline-offset: 2px;
}

/* Header icons: hover and pressed feedback, matching the buttons. */
.cl-icon-btn {
  transition: background var(--transition), color var(--transition),
              transform 90ms ease;
}
.cl-icon-btn:hover { background: rgba(124, 58, 237, 0.16); color: var(--mist-50); }
.cl-icon-btn:active { background: rgba(124, 58, 237, 0.30); transform: scale(0.94); }
.cl-icon-btn:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 2px; }

/* Secondary buttons need the same states, in outline form. */
.cl-btn--secondary {
  background: transparent;
  border: 1.5px solid var(--ui-500);
  color: var(--mist-50);
}
.cl-btn--secondary:hover {
  background: rgba(124, 58, 237, 0.14);
  border-color: var(--ui-400);
}
.cl-btn--secondary:active { background: rgba(124, 58, 237, 0.26); }

/* ============================================================
   Button colour — must out-specify WooCommerce's own stylesheet
   ============================================================ */

/* WooCommerce ships #7f54b3 on its buttons and its stylesheet loads after the
   theme's, so the theme's colour lost. Matching its selector shape here (this
   file loads later still) rather than reaching for !important. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce ul.products li.product .button {
  background-color: var(--ui-500);
  color: #fff;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover {
  background-color: var(--ui-400);
  color: #fff;
}

.woocommerce #respond input#submit:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce a.button.alt:active,
.woocommerce button.button.alt:active,
.woocommerce .single_add_to_cart_button:active,
.woocommerce ul.products li.product .button:active {
  background-color: var(--ui-600);
}

/* Disabled buttons must not look pressable. */
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce a.button.disabled {
  background-color: var(--ink-600);
  color: var(--mist-500);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ============================================================
   Product photography — fills its space, no boxes
   ============================================================ */

/* The card's media area is the photo. Rounded only at the top so it sits
   flush inside the card's own corner radius. */
.woocommerce ul.products li.product a:first-of-type {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: transparent;
}

/* Single product page: let the photo run to the container edges and scale
   with the column instead of being capped. */
.woocommerce div.product div.images img,
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  background: transparent;
  border-radius: var(--radius-md);
  display: block;
}
.woocommerce div.product div.images,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  background: transparent;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

/* On a phone the photo is the product — give it the full column width and
   let it run edge to edge rather than sitting in a padded well. */
@media (max-width: 782px) {
  .woocommerce div.product div.images {
    width: 100%;
    margin-bottom: 22px;
  }
  .woocommerce div.product div.images img { border-radius: var(--radius-md); }
}

/* ============================================================
   Header — logo, ticker, larger controls
   ============================================================ */

/* ---- scrolling notice bar ---- */
.cl-ticker {
  position: relative;
  overflow: hidden;
  /* A full-width saturated purple band is the single loudest thing on the
     page and fights the matte direction — the notices read better as quiet
     accent text on the same near-black ground as everything else. */
  background: var(--ink-900);
  border-bottom: 1px solid var(--border-purple);
  /* Fade the ends so items enter and leave rather than being sliced off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cl-ticker__track {
  display: flex;
  width: max-content;
  animation: cl-ticker 38s linear infinite;
}
.cl-ticker:hover .cl-ticker__track { animation-play-state: paused; }

.cl-ticker__list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-ticker__list li {
  display: flex;
  align-items: center;
  padding: 9px 26px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
/* Diamond separator between items — cheaper than a border and reads better. */
.cl-ticker__list li::after {
  content: "";
  width: 4px; height: 4px;
  margin-left: 26px;
  background: rgba(255,255,255,0.55);
  transform: rotate(45deg);
}

/* Translating half the duplicated track loops seamlessly. */
@keyframes cl-ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-ticker__track { animation: none; }
  /* Static: show one set, centred, rather than a frozen half-scrolled strip. */
  .cl-ticker__list:nth-child(2) { display: none; }
  .cl-ticker__track { width: 100%; justify-content: center; flex-wrap: wrap; }
}

/* ---- header controls, larger ---- */
.cl-header__inner { padding-block: 14px; }
.cl-header__icons { gap: 2px; }
.cl-icon-btn {
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--radius-md);
}
.cl-icon-btn svg { width: 22px; height: 22px; }

/* ============================================================
   Breadcrumb — was 11px #77777C, effectively invisible
   ============================================================ */

.cl-breadcrumb { margin-bottom: 24px; }
.cl-breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-breadcrumb li { display: flex; align-items: center; gap: 10px; }

/* Chevron drawn between items — the literal "/" was most of the cheap look. */
.cl-breadcrumb li + li::before {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.6px solid var(--mist-500);
  border-bottom: 1.6px solid var(--mist-500);
  transform: rotate(-45deg);
  flex: 0 0 auto;
}

.cl-crumb {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

a.cl-crumb {
  color: var(--ui-ring);
  background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(124, 58, 237, 0.28);
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
}
a.cl-crumb:hover {
  background: rgba(124, 58, 237, 0.24);
  border-color: var(--ui-400);
  color: #fff;
}
a.cl-crumb:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 2px; }

/* Where you are: solid, higher contrast, not clickable. */
.cl-crumb--current {
  color: var(--mist-50);
  background: var(--ink-700);
  border: 1px solid var(--ink-500);
}

@media (max-width: 600px) {
  .cl-breadcrumb { margin-bottom: 18px; }
  .cl-crumb { font-size: 12px; padding: 6px 11px; min-height: 32px; }
}

/* ============================================================
   Mobile layout — measured fixes
   ============================================================ */

/* At 375px the logo plus four 48px controls came to 8px more than the
   viewport, which is what produced sideways scroll. The tap targets are the
   requirement, so the logo yields the space. */
@media (max-width: 400px) {
  .cl-logo__img { height: 32px; }
  .cl-header__inner { gap: 8px; }
}

/* Belt and braces: nothing may scroll the page sideways. Using clip rather
   than hidden so position:sticky keeps working. */
html { overflow-x: clip; }

/* One gutter value everywhere, so text never sits flush to the screen edge
   and every section lines up with every other. */
:root { --gutter: 20px; }
@media (min-width: 601px)  { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

.container {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-left: auto;
  margin-right: auto;
}

/* WooCommerce pages render outside .container in places; give them the same
   gutter so the shop and checkout align with the rest of the site. */
.woocommerce-page .woocommerce-notices-wrapper,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error { margin-inline: 0; }

/* Product page on mobile: single column, photo first and full width. */
@media (max-width: 782px) {
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
  .woocommerce div.product div.summary { margin-top: 4px; }

  /* Title and price want room to breathe at the top of the column. */
  .woocommerce div.product .product_title { font-size: 30px; line-height: 1.26; }
  .woocommerce div.product p.price { font-size: 22px; margin-top: 8px; }
}

/* ============================================================
   Strength selector — pills instead of a dropdown
   ============================================================ */

/* The select stays in the DOM (WooCommerce reads it, and it is the no-JS
   fallback) but is removed from view once pills exist. */
/* The native variation <select> stays in the DOM for WooCommerce and for
   keyboard users, but must occupy no space. `position` was !important while
   the dimensions were not, so a wider select rule kept it at its full 263px —
   absolutely positioned and hanging 27px off the right edge of the page.
   Pinning the size the same way is what actually removes it from layout. */
.cl-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.cl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.cl-pill {
  flex: 1 1 auto;
  min-width: 96px;
  min-height: var(--tap-lg);
  padding: 14px 20px;
  border: 2px solid var(--ink-500);
  border-radius: var(--radius-md);
  background: var(--ink-800);
  color: var(--mist-100);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition),
              color var(--transition), transform 90ms ease;
  -webkit-tap-highlight-color: transparent;
}

.cl-pill:hover:not(:disabled) {
  border-color: var(--ui-400);
  background: var(--ink-700);
  color: #fff;
}
.cl-pill:active:not(:disabled) { transform: scale(0.97); }
.cl-pill:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 3px; }

/* Selected state carries colour, weight and a tick — not colour alone, so it
   still reads for anyone who cannot distinguish the purple. */
.cl-pill.is-selected {
  background: var(--ui-500);
  border-color: var(--ui-400);
  color: #fff;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.34);
}
.cl-pill.is-selected::after {
  content: " ✓";
  font-weight: 700;
}

.cl-pill.is-unavailable {
  opacity: 0.34;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Give the selector its own labelled block directly above Add to Cart. */
.cl-variation-row { margin: 0 0 20px; }
.cl-variation-row > label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-400);
}

/* WooCommerce lays the variation form out as a table; unpick that so the
   pills sit in normal flow. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations td {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
}
.woocommerce div.product form.cart table.variations td.label {
  margin-bottom: 10px;
}
.woocommerce div.product form.cart table.variations td.label label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-400);
}
.woocommerce div.product form.cart table.variations td.value { margin-bottom: 18px; }

/* "Clear" link — small, secondary, out of the way of the pills. */
.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--mist-400);
}
.woocommerce div.product form.cart .reset_variations:hover { color: var(--ui-ring); }

/* ============================================================
   Checkout — typography, hierarchy, spacing
   Measured before: inputs 14px, 18 of 20 under 44px tall,
   labels 12px, headings 18px, order total 15px.
   ============================================================ */

/* ---- inputs ---- */
/* 16px is not a style choice: below it, iOS Safari zooms the whole page on
   focus and the customer has to pinch back out after every field. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select {
  min-height: var(--tap-lg);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mist-50);
  background: var(--ink-800);
  border: 1.5px solid var(--ink-600);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background var(--transition);
}
.woocommerce form .form-row input.input-text:hover,
.woocommerce-checkout select:hover { border-color: var(--ink-500); }

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout input:focus {
  outline: 3px solid var(--ui-ring);
  outline-offset: 2px;
  border-color: var(--ui-400);
  background: var(--ink-700);
}

/* ---- labels ---- */
.woocommerce form .form-row label,
.woocommerce-checkout label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mist-300);
}
.woocommerce form .form-row label .required {
  color: var(--ui-ring);
  text-decoration: none;
  margin-left: 2px;
}

/* ---- spacing between fields ---- */
.woocommerce form .form-row { margin-bottom: 20px; padding: 0; }
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper { display: block; }

/* ---- section headings ---- */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mist-50);
  margin: 40px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ui-500);
}

/* ---- order summary: the numbers people actually check ---- */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 16px 18px;
  font-size: 16px;
  border-bottom: 1px solid var(--ink-700);
  vertical-align: top;
}
.woocommerce-checkout-review-order-table thead th {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist-400);
  background: var(--ink-800);
}
.woocommerce-checkout-review-order-table .product-name {
  font-weight: 600;
  color: var(--mist-50);
  line-height: 1.45;
}
.woocommerce-checkout-review-order-table .product-quantity {
  color: var(--mist-400);
  font-weight: 700;
}
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table .woocommerce-Price-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.woocommerce-checkout-review-order-table tfoot th {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist-300);
  font-weight: 700;
}

/* The total was 15px — smaller than the body text, on the one number every
   customer double-checks. */
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 2px solid var(--ui-500);
  border-bottom: 0;
  background: var(--ink-800);
}
.woocommerce-checkout-review-order-table tfoot .order-total th { font-size: 17px; color: var(--mist-50); }
.woocommerce-checkout-review-order-table tfoot .order-total .amount,
.woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

/* ---- place order ---- */
#place_order {
  width: 100%;
  min-height: 60px;
  font-size: 17px;
  letter-spacing: 0.12em;
  margin-top: 8px;
}

/* ---- payment methods ---- */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border-bottom: 0;
  display: grid;
  gap: 10px;
}
.woocommerce-checkout #payment ul.payment_methods li {
  background: var(--ink-800);
  border: 1.5px solid var(--ink-600);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: border-color var(--transition), background var(--transition);
}
.woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--ink-500); }
.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--mist-50);
  margin: 0;
  cursor: pointer;
  min-height: 28px;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  width: 22px; height: 22px;
  margin-right: 12px;
  accent-color: var(--ui-500);
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--ink-900);
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.6;
  color: var(--mist-300);
  margin-top: 12px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* ---- mobile ---- */
@media (max-width: 782px) {
  .woocommerce-checkout h3,
  .woocommerce-checkout #order_review_heading { font-size: 22px; margin: 32px 0 16px; }
  .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout-review-order-table td { padding: 14px 14px; font-size: 15px; }
  .woocommerce-checkout-review-order-table tfoot .order-total .amount { font-size: 26px; }
  /* Two-up name fields collapse to one column — half-width inputs are a
     common source of mis-taps on a phone. */
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: 100%; float: none; margin-right: 0; }
}

/* ============================================================
   Checkbox targets — measured at 13px, including the required
   research-use acknowledgement that gates the order
   ============================================================ */

.woocommerce-checkout input[type="checkbox"],
.woocommerce form .form-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin: 0 12px 0 0;
  accent-color: var(--ui-500);
  cursor: pointer;
  flex: 0 0 auto;
}

/* The label is the real tap target — make the whole row hittable and tall
   enough, so nobody has to aim at the box itself. */
.woocommerce-form__label-for-checkbox,
.cl-acknowledgement label,
#ship-to-different-address label {
  display: flex !important;
  align-items: flex-start;
  gap: 0;
  min-height: var(--tap);
  padding: 10px 0;
  cursor: pointer;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.5;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--mist-100) !important;
}

.woocommerce-checkout input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--ui-ring);
  outline-offset: 3px;
}

/* The acknowledgement gates the order, so give it a panel of its own rather
   than letting it read as fine print. */
.cl-acknowledgement {
  margin: 24px 0;
  padding: 16px 18px;
  background: var(--ink-900);
  border: 1.5px solid var(--ink-600);
  border-left: 3px solid var(--ui-500);
  border-radius: var(--radius-md);
}
.cl-acknowledgement label { margin: 0; }

/* The required asterisk is a separate flex item, so it drifts to the far right
   of the row instead of sitting after the sentence. It is aria-hidden and the
   input carries `required`, so nothing is lost by dropping the decoration. */
.cl-acknowledgement label > .required,
.woocommerce-form__label-for-checkbox > .required { display: none; }

/* Payment radios: the row is the target, not the 22px dot.
   WooCommerce renders the radio as a SIBLING of the label, so a full-width
   label wraps onto its own line and the dot floats above the name. Lay the
   li out as a flex row and let the payment_box take the next line. */
.woocommerce-checkout #payment ul.payment_methods li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  flex: 0 0 auto;
}
.woocommerce-checkout #payment ul.payment_methods li label {
  min-height: var(--tap);
  flex: 1 1 auto;
  width: auto;
}
.woocommerce-checkout #payment ul.payment_methods li div.payment_box {
  flex: 0 0 100%;
}

/* ============================================================
   LOGO — the real brand asset, one sizing rule per placement.
   Height drives it; width follows the intrinsic 640x221 ratio, and the
   width/height attributes on the tag reserve the box before decode so the
   header does not shift.
   ============================================================ */
.cl-logo__img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
}
@media (min-width: 1024px) { .cl-header .cl-logo__img { height: 42px; } }
@media (max-width: 420px)  { .cl-header .cl-logo__img { height: 28px; } }
.cl-footer .cl-logo__img       { height: 44px; margin-bottom: 20px; }
.cl-mobile__head .cl-logo__img { height: 28px; }

/* ============================================================
   PAGE + SECTION TITLES
   A bare <h1>Checkout</h1> on an empty ground reads as unfinished. Every
   title now sits on a purple underscore, and on phones the whole assembly
   centres — a short word left-aligned in a 390px gutter looks abandoned.

   Selectors are the real ones the templates emit: the page title, the shop
   archive header, and the homepage section headings.
   ============================================================ */
main > .container > article > h1,
.cl-shop-header__title,
.cl-section__title,
.woocommerce-products-header__title{
  position: relative;
  font-size: clamp(2rem, 6.5vw, 3.1rem);
  margin: 8px 0 30px;
  padding-bottom: 18px;
}

/* .cl-section__title used to be a flex row with a hairline running out of
   each side, and 0.22em of tracking to match. Both fight the underscore
   treatment — the flex made text-align inert and the tracking forced
   "FEATURED COMPOUNDS" onto two ragged lines on a phone. Reset it to a plain
   block and drop the leftover rule. */
.cl-section__title {
  display: block;
  letter-spacing: -0.01em;
  margin-bottom: 36px;
}
.cl-section__title::before { display: none; }
main > .container > article > h1::after,
.cl-shop-header__title::after,
.cl-section__title::after,
.woocommerce-products-header__title::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);   /* titles are centred at every width now */
  bottom: 0;
  width: 68px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ui-500), var(--ui-400));
}

@media (max-width: 782px) {
  main > .container > article > h1,
  .cl-shop-header__title,
  .cl-section__title,
  .woocommerce-products-header__title{
    text-align: center;
    margin-top: 4px;
  }
  main > .container > article > h1::after,
  .cl-shop-header__title::after,
  .cl-section__title::after,
  .woocommerce-products-header__title::after{
    left: 50%;
    transform: translateX(-50%);
  }

  /* The hero is the same problem one size up: centre the copy so the page
     opens symmetrically instead of hugging the left edge. */
}

:root {
  --cl-tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='%23000'/%3E%3C/svg%3E");
}

/* ============================================================
   PAYMENT METHODS — cards that look like something you press
   Each gateway gets its brand mark in its own brand colour, so the row is
   recognisable before the label is read. Selecting one lifts the whole card.
   ============================================================ */
.woocommerce-checkout #payment ul.payment_methods li {
  position: relative;
  /* No padding on the card: the label owns the whole top row so every pixel
     of it is clickable, and the description supplies its own inset. */
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--ui-500);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.14), rgba(124, 58, 237, 0.05));
  box-shadow: 0 0 0 1px var(--ui-500), 0 8px 22px -12px rgba(124, 58, 237, 0.9);
}
.woocommerce-checkout #payment ul.payment_methods li label {
  font-family: var(--font-display);
  font-weight: 700;
  gap: 12px;
}

/* Brand mark. A 34px rounded tile in the gateway's own colour, drawn as a
   mask so one rule handles the shape and another the colour. */
.woocommerce-checkout #payment ul.payment_methods li > label::before {
  content: "";
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-left: 2px;
  border-radius: 8px;
  background: var(--cl-pay-bg, var(--ink-600));
  -webkit-mask: var(--cl-pay-icon) center / 20px 20px no-repeat;
  mask: var(--cl-pay-icon) center / 20px 20px no-repeat;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
}
/* Fill the tile, then knock the glyph out of it. */
.woocommerce-checkout #payment ul.payment_methods li > label::before {
  -webkit-mask: none;
  mask: none;
  background:
    var(--cl-pay-icon) center / 19px 19px no-repeat,
    var(--cl-pay-bg, var(--ink-600));
}

.payment_method_corelabs_zelle   label::before { --cl-pay-bg: #6D1ED4; --cl-pay-icon: var(--cl-icon-zelle); }
.payment_method_corelabs_venmo   label::before { --cl-pay-bg: #008CFF; --cl-pay-icon: var(--cl-icon-venmo); }
.payment_method_corelabs_cashapp label::before { --cl-pay-bg: #00D632; --cl-pay-icon: var(--cl-icon-cashapp); }
.payment_method_corelabs_bitcoin label::before { --cl-pay-bg: #F7931A; --cl-pay-icon: var(--cl-icon-bitcoin); }

:root {
  --cl-icon-zelle:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='18.5' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-size='19' font-weight='bold' fill='%23fff'%3EZ%3C/text%3E%3C/svg%3E");
  --cl-icon-venmo:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='18.5' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-size='19' font-weight='bold' fill='%23fff'%3EV%3C/text%3E%3C/svg%3E");
  --cl-icon-cashapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='19' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-size='20' font-weight='bold' fill='%23fff'%3E%24%3C/text%3E%3C/svg%3E");
  --cl-icon-bitcoin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='18.5' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-size='18' font-weight='bold' fill='%23fff'%3E%E0%B8%BF%3C/text%3E%3C/svg%3E");
}

/* A tick on the selected card, so the choice is legible at a glance. */
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked)::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
    var(--ui-500);
}

/* ============================================================
   INTENT STRIP — "here is what you are about to do"
   ============================================================ */
.cl-intent {
  border: 0;
  background: none;
  padding: 24px 0 20px;
}
/* Each step is its own bordered card, and the three sit in a panel of their
   own — the strip previously ran edge to edge with only a hairline above and
   below, so it read as page background rather than as a section. */
.cl-intent .container {
  padding-block: 20px 22px;
  padding-inline: 16px;
  background: var(--ink-900);
  border: 2px solid var(--border-purple);
  border-radius: 18px;
  max-width: calc(var(--container) - 8px);
}
@media (min-width: 700px) { .cl-intent .container { padding: 24px 26px; } }
.cl-intent::before {
  content: "How ordering works";
  display: block;
  max-width: var(--container);
  margin: 0 auto 12px;
  padding: 0 20px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist-400);
}
.cl-intent__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cl-intent__step {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--ink-950);
  border: 1px solid var(--border-purple);
  border-radius: 13px;
}
.cl-intent__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--ui-500);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}
.cl-intent__text {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  color: var(--mist-400);
}
.cl-intent__text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mist-50);
  margin-bottom: 3px;
}
@media (max-width: 782px) {
  .cl-intent { padding: 20px 0; }
  .cl-intent__list { grid-template-columns: 1fr; gap: 16px; }
  .cl-intent__num { width: 30px; height: 30px; font-size: 14px; }
}

/* An extra-large primary for the one action the homepage exists to prompt. */
.cl-btn--xl {
  min-height: 56px;
  padding-inline: 30px;
  font-size: 16px;
}
@media (max-width: 520px) {
  .cl-hero__cta { display: grid; gap: 12px; }
  .cl-hero__cta .cl-btn { width: 100%; }
}

/* ============================================================
   PAYMENT METHODS AS BUTTONS
   Previously each row was a radio dot AND a brand tile AND a name — three
   things to look at for one decision. The radio is now visually gone (kept
   in the DOM and reachable by keyboard, because it is still the form
   control WooCommerce reads), and the card itself is the button.
   ============================================================ */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
/* With the radio hidden, anything the label does not cover is a dead zone
   that looks clickable and is not — so the label carries the card's padding
   itself and spans the full row. */
.woocommerce-checkout #payment ul.payment_methods li label {
  flex: 1 1 100%;
  min-height: var(--tap-lg);
  margin: 0;
  padding: 16px 44px 16px 16px;
  font-size: 16px;
  letter-spacing: 0.06em;
}
.woocommerce-checkout #payment ul.payment_methods li div.payment_box {
  margin: 0 16px 16px;
}
/* Keyboard focus has to land somewhere visible now the dot is hidden. */
.woocommerce-checkout #payment ul.payment_methods li:has(input:focus-visible) {
  outline: 3px solid var(--ui-ring);
  outline-offset: 3px;
}
.woocommerce-checkout #payment ul.payment_methods li:active { transform: translateY(1px); }

/* ============================================================
   CORE LABS CONTROL SYSTEM
   Primary = filled purple (white on it 6.57:1). Secondary = outlined.
   Both share one geometry so a row of mixed buttons lines up exactly.
   ============================================================ */
:root {
  --btn-h: 52px;
  --btn-r: 10px;
}

.cl-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit, .woocommerce .woocommerce-message a.button,
.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 0 26px;
  /* Outlined at rest, filled only while pressed. This is a deliberate,
     requested flattening: no button carries a filled purple ground until the
     moment it is touched, so "purple" reads as "I just pressed that" rather
     than as "this is the important one". */
  border: 1.5px solid var(--ui-500);
  border-radius: var(--btn-r);
  background: rgba(155, 93, 229, 0.06);
  color: var(--mist-50);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.cl-btn:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover {
  background: rgba(155, 93, 229, 0.16);
  border-color: var(--ui-400);
  color: #FFFFFF;
  box-shadow: none;
}
.cl-btn:active,
.woocommerce a.button:active, .woocommerce button.button:active, .woocommerce input.button:active {
  transform: translateY(1px);
}
.cl-btn:focus-visible,
.woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
  outline: 3px solid var(--ui-ring);
  outline-offset: 3px;
}

/* ---- secondary: outlined, same box ---- */
.cl-btn--secondary,
.woocommerce a.button.wc-backward,
.woocommerce button[name="update_cart"],
.woocommerce .cart .button[name="apply_coupon"] {
  background: rgba(155, 93, 229, 0.05);
  border-color: var(--ui-500);
  color: var(--mist-50);
  box-shadow: none;
}
.cl-btn--secondary:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce button[name="update_cart"]:hover,
.woocommerce .cart .button[name="apply_coupon"]:hover {
  background: rgba(155, 93, 229, 0.14);
  border-color: var(--ui-400);
  color: #FFFFFF;
  filter: none;
  box-shadow: 0 0 0 3px rgba(155, 93, 229, 0.10);
}

.cl-btn--xl { min-height: 58px; padding-inline: 32px; font-size: 16px; }

/* Disabled reads as unavailable, not as a second style of button. */
.cl-btn[disabled], .woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled, .woocommerce button.button:disabled[disabled] {
  background: var(--ink-700);
  border-color: var(--ink-600);
  color: var(--mist-500);
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
}

/* ---- icons inside buttons ---- */

/* ============================================================
   FILTER / CATEGORY CHIPS
   ============================================================ */
.cl-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.cl-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border-purple);
  border-radius: 999px;
  background: var(--ink-900);
  color: var(--mist-300);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.cl-chip:hover { border-color: var(--ui-400); color: var(--mist-50); }
.cl-chip.is-active, .cl-chip[aria-current="true"] {
  background: var(--ui-500);
  border-color: var(--ui-500);
  color: #FFFFFF;
}
.cl-chip:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 2px; }

/* ============================================================
   BADGES — stock state and sale
   ============================================================ */
.cl-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--ink-600);
  background: var(--ink-900);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-100);
  line-height: 1;
}
.cl-badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* Ticker text: accent purple on near-black is 4.87:1, so it stays legible
   without the band shouting. */
.cl-ticker__list li { color: var(--ui-400) !important; }
.cl-ticker__list li::after { color: var(--ink-500) !important; opacity: 1; }
@media (max-width: 420px) { .cl-header .cl-logo__img { height: 32px; } }

/* ============================================================
   PRODUCT CARDS
   The supplied photography is already square and already carries its own
   dark violet environment, so the card must not crop it, letterbox it, or
   put a second background behind it. `contain` on a 1:1 box over a
   transparent ground means the image simply IS the tile.
   ============================================================ */
.woocommerce ul.products li.product a img,
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product div.images img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: none;
  object-fit: contain;
  padding: 0;
  background: transparent;
}

.woocommerce ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  border-color: rgba(155, 93, 229, 0.45);
  box-shadow: 0 18px 40px -24px rgba(123, 63, 178, 0.75);
}
/* WooCommerce's loop link wraps the thumbnail, the title AND the price, so a
   border-bottom on the link drew a rule under the PRICE — reading as a footer
   band that the button then failed to fill. The separator belongs under the
   photo, so it goes on the image itself. */
.woocommerce ul.products li.product a:first-of-type {
  display: block;
  background: transparent;
  border-bottom: 0;
}
.woocommerce ul.products li.product a:first-of-type img {
  border-bottom: 1px solid var(--border-purple);
}
.woocommerce ul.products li.product:hover a img { transform: none; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.26;
  text-transform: uppercase;
  color: var(--mist-50);
  padding: 18px 16px 0;
  margin: 0 0 8px;
}
.woocommerce ul.products li.product .price {
  padding: 0 16px;
  /* `auto` lives here, not on the button. Putting it on the button meant the
     gap above it collapsed to 0 whenever a card had no spare height; putting
     it on the element ABOVE lets the button keep even margins on all four
     sides while still bottom-aligning across a row of unequal cards. */
  margin: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.4;
  color: var(--mist-50);
}
.woocommerce ul.products li.product .price del {
  color: var(--mist-500);
  opacity: 1;
  margin-right: 8px;
  font-size: 14px;
}
.woocommerce ul.products li.product .price ins {
  background: none;
  color: var(--ui-400);
  font-weight: 600;
  text-decoration: none;
}
/* The action is the last thing in the card and spans it, with identical space
   on every side so it sits square in the panel below the photo. */
.woocommerce ul.products li.product .button {
  margin: 16px;
  width: calc(100% - 32px);
  min-height: 54px;
}

/* ---- sale pill, clear of the vial ----
   WooCommerce's own `.woocommerce ul.products li.product .onsale` is more
   specific than a plain `span.onsale` and pins the badge to right:0, where it
   overhung the card's rounded corner by 5px. Matched selector shape (plus the
   element) so this wins on specificity rather than on !important. */
.woocommerce ul.products li.product span.onsale,
.woocommerce div.product span.onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  z-index: 2;
  min-height: 0;
  min-width: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ui-500);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.8);
}

/* ---- grid: 4 / 3 / 2 / 1 ---- */
.woocommerce ul.products {
  display: grid;
  gap: 20px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; }
@media (min-width: 560px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/* ============================================================
   FREE SHIPPING PROGRESS
   ============================================================ */
.cl-ship {
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 24px;
}
.cl-ship__row { display: flex; align-items: center; gap: 12px; }
.cl-ship__icon {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  background: var(--ui-400);
  -webkit-mask: var(--cl-truck-icon) center / 22px 22px no-repeat;
          mask: var(--cl-truck-icon) center / 22px 22px no-repeat;
}
.cl-ship__text { margin: 0; font-size: 15px; color: var(--mist-300); line-height: 1.4; }
.cl-ship__text strong { color: var(--mist-50); font-weight: 600; }
.cl-ship__text .woocommerce-Price-amount { color: var(--ui-400); }
.cl-ship__track {
  position: relative;
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--ink-700);
  overflow: hidden;
}
.cl-ship__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ui-500), var(--ui-400));
  transition: width 420ms ease-out;
}
.cl-ship.is-complete .cl-ship__icon { background: #3DD68C; }
.cl-ship.is-complete .cl-ship__fill { background: linear-gradient(90deg, #2FA96D, #3DD68C); }
:root {
  --cl-truck-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h13v13H1z'/%3E%3Cpath d='M14 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2'/%3E%3Ccircle cx='17.5' cy='18.5' r='2'/%3E%3C/svg%3E");
}

/* ============================================================
   CART
   The real WooCommerce table is kept — quantity inputs, remove links, the
   coupon form and the update button all still post exactly as they did.
   Only the presentation is changed: each <tr> becomes a card via grid.
   ============================================================ */
@media (min-width: 1024px) {
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 32px;
    align-items: start;
  }
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
  .woocommerce-cart .woocommerce > .cl-ruo-notice,
  .woocommerce-cart .woocommerce > .cl-ship { grid-column: 1 / -1; }
  .woocommerce-cart .cart-collaterals { position: sticky; top: 96px; }
}
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }

/* ---- the item table becomes a stack of cards ---- */
.woocommerce table.shop_table.cart,
.woocommerce table.shop_table.cart tbody { display: block; width: 100%; border: 0; background: none; }
.woocommerce table.shop_table.cart thead { display: none; }

.woocommerce table.shop_table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb name    remove"
    "thumb price   price"
    "thumb qty     subtotal";
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
  padding: 16px;
  margin-bottom: 14px;
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
}
.woocommerce table.shop_table.cart tr.cart_item td {
  display: block;
  border: 0;
  padding: 0;
  background: none;
}
/* WooCommerce's responsive table prints the column name before each cell. */
.woocommerce table.shop_table.cart tr.cart_item td::before { display: none !important; }

.woocommerce table.shop_table.cart td.product-thumbnail { grid-area: thumb; }
.woocommerce table.shop_table.cart td.product-thumbnail img {
  width: 88px; height: 88px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 10px;
  background: var(--ink-950);
  display: block;
}
.woocommerce table.shop_table.cart td.product-name { grid-area: name; min-width: 0; }
.woocommerce table.shop_table.cart td.product-name a {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--mist-50);
}
.woocommerce table.shop_table.cart td.product-name .variation {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--mist-400);
}
.woocommerce table.shop_table.cart td.product-name .variation dt,
.woocommerce table.shop_table.cart td.product-name .variation dd { display: inline; margin: 0; font-weight: 400; }
.woocommerce table.shop_table.cart td.product-price {
  grid-area: price;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--mist-400);
}
.woocommerce table.shop_table.cart td.product-quantity { grid-area: qty; }
.woocommerce table.shop_table.cart td.product-subtotal {
  grid-area: subtotal;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--mist-50);
}
.woocommerce table.shop_table.cart td.product-remove { grid-area: remove; justify-self: end; }
.woocommerce table.shop_table.cart td.product-remove a.remove {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ink-600);
  background: var(--ink-800);
  color: var(--mist-400) !important;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
}
.woocommerce table.shop_table.cart td.product-remove a.remove:hover {
  background: var(--ui-500);
  border-color: var(--ui-500);
  color: #fff !important;
}

/* ---- the actions row (coupon + update) ---- */
.woocommerce table.shop_table.cart tr:not(.cart_item) { display: block; }
.woocommerce table.shop_table.cart td.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 0;
  border: 0;
}
.woocommerce table.shop_table.cart td.actions .coupon {
  display: flex;
  gap: 10px;
  flex: 1 1 320px;
  padding: 0;
  border: 0;
}
.woocommerce table.shop_table.cart td.actions .coupon label { display: none; }
.woocommerce table.shop_table.cart td.actions .coupon #coupon_code {
  flex: 1 1 auto;
  min-height: var(--btn-h);
  width: auto;
  padding: 0 16px;
  border-radius: var(--btn-r);
}

/* ---- quantity stepper ---- */
.cl-qty { display: inline-flex; align-items: center; }
.cl-qty__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--ink-600);
  background: var(--ink-800);
  color: var(--mist-100);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.cl-qty__btn:first-child { border-radius: 999px 0 0 999px; }
.cl-qty__btn:last-child  { border-radius: 0 999px 999px 0; }
.cl-qty__btn:hover:not(:disabled) { background: var(--ui-500); border-color: var(--ui-500); color: #fff; }
.cl-qty__btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* The wrapper WooCommerce prints carries its own box; inside the stepper it
   must be a bare container or it draws a second border around the input. */
.woocommerce .cl-qty div.quantity {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  display: block;
  float: none;
  width: auto;
}
/* The earlier generic rule sets min-width:72px and min-height:44px, which is
   why the input outgrew the buttons and the "+" ended up underneath it.
   Those two have to be reset explicitly, not just overridden. */
.woocommerce .cl-qty input.qty {
  width: 58px;
  min-width: 0;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border-left: 0; border-right: 0;
  border-top: 1px solid var(--ink-600);
  border-bottom: 1px solid var(--ink-600);
  background: var(--ink-800);
  color: var(--mist-50);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
  box-shadow: none;
}
.woocommerce .cl-qty input.qty::-webkit-outer-spin-button,
.woocommerce .cl-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- order summary card ---- */
.woocommerce .cart_totals > h2 {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-50);
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.woocommerce .cart_totals {
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
  padding: 22px;
}
.woocommerce .cart_totals table.shop_table { border: 0; margin: 0; background: none; }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  border: 0;
  border-bottom: 1px solid var(--ink-700);
  padding: 12px 0;
  background: none;
  font-size: 15px;
}
.woocommerce .cart_totals table.shop_table th { color: var(--mist-400); font-weight: 500; text-align: left; }
.woocommerce .cart_totals table.shop_table td { text-align: right; color: var(--mist-50); font-family: var(--font-mono); }
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td {
  border-bottom: 0;
  padding-top: 16px;
  font-size: 15px;
}
.woocommerce .cart_totals tr.order-total td .amount {
  font-size: 26px;
  font-weight: 700;
  color: var(--mist-50);
}
.woocommerce .cart_totals .wc-proceed-to-checkout { padding: 18px 0 0; }
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button { width: 100%; margin: 0; }

@media (max-width: 560px) {
  .woocommerce table.shop_table.cart tr.cart_item {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    padding: 14px;
  }
  .woocommerce table.shop_table.cart td.product-thumbnail img { width: 72px; height: 72px; }
  .woocommerce table.shop_table.cart td.actions .coupon { flex: 1 1 100%; }
  .woocommerce table.shop_table.cart td.actions .button { width: 100%; }
}

/* "Cart totals" is WooCommerce's wording; the brief calls this the order
   summary, and that is what the checkout button under it leads to. */
.woocommerce .cart_totals > h2 { font-size: 0; }
.woocommerce .cart_totals > h2::after {
  content: "Order Summary";
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   HEADER SEARCH
   ============================================================ */
.cl-search {
  border-top: 1px solid var(--border-purple);
  background: var(--ink-900);
  padding: 16px 0;
}
.cl-search form,
.cl-search .woocommerce-product-search {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  position: relative;
}
.cl-search label,
.cl-search .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-search input[type="search"],
.cl-search input[name="s"] {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--btn-h);
  padding: 0 18px 0 46px;
  border-radius: 999px;
  border: 1px solid var(--border-purple);
  background: var(--ink-800) var(--cl-search-icon) 16px center / 18px 18px no-repeat;
  color: var(--mist-50);
  font-size: 16px;           /* 16px so iOS does not zoom the page on focus */
}
.cl-search input[type="search"]::placeholder { color: var(--mist-500); }
.cl-search input[type="search"]:focus-visible {
  outline: 3px solid var(--ui-ring);
  outline-offset: 2px;
  border-color: var(--ui-400);
}
/* WooCommerce's product search form emits a bare <button type="submit"> with
   no .button class, so it inherits none of the control system and rendered as
   the browser default white pill. Styled explicitly here. */
.cl-search button[type="submit"] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ui-400) 0%, var(--ui-500) 55%, var(--ui-600) 100%);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px -10px var(--glow-purple), inset 0 1px 0 rgba(255,255,255,0.14);
  transition: filter var(--transition);
}
.cl-search button[type="submit"]:hover { filter: brightness(1.10); }
.cl-search button[type="submit"]:active { filter: brightness(0.94); }
.cl-search button[type="submit"]:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 3px; }
:root {
  --cl-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8496' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (max-width: 520px) {
  .cl-search button[type="submit"] { padding: 0 18px; font-size: 13px; }
}

/* ============================================================
   HOW TO SAVE
   ============================================================ */
.cl-save { margin: 0 0 56px; }
.cl-save__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mist-50);
  margin: 0 0 10px;
}
.cl-save__lede { margin: 0 0 22px; color: var(--mist-300); font-size: 16px; max-width: 68ch; }
.cl-save__lede strong { color: var(--ui-400); }

.cl-save__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px)  { .cl-save__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cl-save__grid { grid-template-columns: repeat(3, 1fr); } }

.cl-save__card {
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
  padding: 20px;
}
.cl-save__name { margin: 0 0 14px; font-size: 17px; letter-spacing: 0.04em; }
.cl-save__name a { color: var(--mist-50); }
.cl-save__name a:hover { color: var(--ui-400); }
.cl-save__rows { list-style: none; margin: 0; padding: 0; }
.cl-save__rows li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--ink-700);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--mist-300);
}
.cl-save__rows li:last-child { border-bottom: 0; }
.cl-save__rows li.is-best { color: var(--mist-50); }
.cl-save__mg { font-family: var(--font-display); letter-spacing: 0.06em; }
.cl-save__permg { color: var(--mist-500); }
.cl-save__rows li.is-best .cl-save__permg { color: var(--ui-400); }
.cl-save__delta { margin: 14px 0 0; font-size: 14px; color: var(--mist-400); }
.cl-save__delta strong { color: var(--ui-400); }

/* ============================================================
   SHIPPING ADDRESS MODAL
   ============================================================ */
.cl-am {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}
.cl-am[hidden] { display: none; }
.cl-am__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* The page keeps its scroll position instead of jumping to the top, which is
   what `overflow: hidden` on <html> alone would cause on iOS. */
body.cl-am-open { overflow: hidden; }

.cl-am__dialog {
  position: relative;
  width: calc(100% - 40px);
  max-width: 700px;
  /* 100vh on iOS Safari counts the browser chrome that hides and reappears as
     you scroll, so the dialog measured taller than the visible area and the
     footer — the Save button — slid off the bottom of the screen. dvh tracks
     the height that is actually visible; vh stays as the fallback. */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--ink-900);
  border: 1px solid rgba(155, 93, 229, 0.20);
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.cl-am.is-open .cl-am__dialog { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .cl-am__dialog { transition: none; }
}

.cl-am__head {
  position: sticky;
  top: 0;
  z-index: 1;
  flex: 0 0 auto;
  background: var(--ink-900);
  border-radius: 22px 22px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border-purple);
}
.cl-am__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--mist-50);
}
.cl-am__x {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mist-300);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.cl-am__x:hover { color: var(--ui-400); background: var(--ink-800); }
.cl-am__x:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 2px; }

.cl-am__body {
  padding: 20px 24px;
  overflow-y: auto;
  /* Scrolling the last field must not start scrolling the page behind. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.cl-am__line { display: grid; gap: 12px; margin-bottom: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .cl-am__line--2 { grid-template-columns: repeat(2, 1fr); }
  .cl-am__line--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Each WooCommerce .form-row becomes the input card: the label sits small
   above the value INSIDE the box, so the field never reads as an empty slab.

   The selectors are deliberately long. WooCommerce and this theme both style
   `.woocommerce form .form-row input.input-text` (0,3,2) and
   `.woocommerce form .form-row-first` (float/width), which beat a plain
   `.cl-am .form-row`. Chaining through `.cl-am__body p.form-row` out-specifies
   them, which is preferable to scattering !important through the file. */
.cl-am .cl-am__body p.form-row {
  position: relative;
  display: block;
  width: auto;
  max-width: none;
  float: none;
  clear: none;
  margin: 0;
  padding: 13px 18px 11px;
  background: #0D0C11;
  border: 1px solid rgba(155, 93, 229, 0.20);
  border-radius: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cl-am .cl-am__body p.form-row:hover { border-color: rgba(155, 93, 229, 0.55); }
.cl-am .cl-am__body p.form-row:focus-within {
  border-color: var(--ui-400);
  box-shadow: 0 0 0 3px rgba(155, 93, 229, 0.10);
}
.cl-am .cl-am__body p.form-row > label {
  display: block;
  margin: 0 0 1px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mist-300);
}
.cl-am .cl-am__body p.form-row .required { color: var(--mist-500); text-decoration: none; border: 0; }
.cl-am .cl-am__body p.form-row .woocommerce-input-wrapper { display: block; width: 100%; }

/* The control itself is chrome-less: the card around it is the visible field. */
.cl-am .cl-am__body p.form-row input.input-text,
.cl-am .cl-am__body p.form-row select,
.cl-am .cl-am__body p.form-row textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 16px;        /* 16px so iOS does not zoom the page on focus */
  font-weight: 400;
  line-height: 1.45;
  /* The sitewide input skin (`.woocommerce input.input-text`) declares
     background-color and border with !important, while leaving padding and
     border-radius normal — which is exactly why half of this block applied and
     half did not. The modal is a deliberate exception to that skin: the card
     around the control is the visible field, so the control itself must be
     chrome-less. Matching !important here is narrower than unpicking a global
     rule the rest of the site still depends on. */
  border: 0 !important;
  background: transparent !important;
  color: var(--mist-50) !important;
}
.cl-am .cl-am__body p.form-row input.input-text:focus,
.cl-am .cl-am__body p.form-row input.input-text:hover,
.cl-am .cl-am__body p.form-row select:focus,
.cl-am .cl-am__body p.form-row select:hover {
  outline: none;
  box-shadow: none;
  border: 0 !important;
  background: transparent !important;
}
.cl-am .cl-am__body p.form-row input.input-text::placeholder { color: var(--mist-500); }

/* Native selects keep their own menu — only the closed state is restyled. */
.cl-am .cl-am__body p.form-row select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
  background: var(--cl-chevron) right center / 15px 15px no-repeat;
  cursor: pointer;
}
:root {
  --cl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAA4B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.cl-am .cl-am__body p.form-row select option { background: var(--ink-800); color: var(--mist-50); }

/* Select2. WooCommerce replaces the country and state <select> elements with
   Select2, so the visible control is `.select2-selection--single`, not the
   select — the native element is left 1px tall and hidden. The same sitewide
   skin that hits inputs also declares this one with !important, so the modal's
   exception has to be declared the same way. */
.cl-am .cl-am__body .select2-container { width: 100% !important; }
.cl-am .cl-am__body .select2-container--default .select2-selection--single {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.cl-am .cl-am__body .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 22px 0 0 !important;
  line-height: 1.45 !important;
  color: var(--mist-50) !important;
  font-size: 16px;
}
/* Select2 draws its own arrow; replace it with the same chevron the native
   selects use so both kinds of field look identical. */
.cl-am .cl-am__body .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
  background: var(--cl-chevron) center / 15px 15px no-repeat;
}
.cl-am .cl-am__body .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }

/* ---- validation ---- */
.cl-am .cl-am__body p.form-row.cl-am--invalid { border-color: #C2566B; }
.cl-am .cl-am__body p.form-row.cl-am--invalid:focus-within { box-shadow: 0 0 0 3px rgba(194, 86, 107, 0.14); }
.cl-am__error {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: #E08698;
}

/* ---- footer ---- */
/* Pinned to the bottom of the dialog so it is reachable no matter how long
   the form gets or how the mobile toolbar behaves. */
.cl-am__foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 24px calc(22px + env(safe-area-inset-bottom));
  background: var(--ink-900);
  border-top: 1px solid var(--border-purple);
  border-radius: 0 0 22px 22px;
}
.cl-am__btn {
  min-height: 54px;
  padding: 0 28px;
  border-radius: 13px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter var(--transition), background var(--transition), border-color var(--transition);
}
.cl-am__btn--ghost {
  background: transparent;
  border-color: var(--ink-500);
  color: var(--mist-50);
}
.cl-am__btn--ghost:hover { border-color: var(--ui-400); background: rgba(155, 93, 229, 0.08); }
.cl-am__btn--primary {
  background: linear-gradient(135deg, #7B3FB2, #9B5DE5);
  color: #FFFFFF;
}
.cl-am__btn--primary:hover { filter: brightness(1.08); }
.cl-am__btn--primary:disabled, .cl-am__btn--primary.is-busy { opacity: 0.65; cursor: progress; filter: none; }
.cl-am__btn:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 3px; }

@media (max-width: 640px) {
  .cl-am { padding: 12px; }
  .cl-am__dialog {
    width: calc(100% - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 18px;
  }
  .cl-am__foot { border-radius: 0 0 18px 18px; }
  .cl-am__head, .cl-am__body, .cl-am__foot { padding-left: 16px; padding-right: 16px; }
  /* Save first, Cancel below it. */
  .cl-am__foot { flex-direction: column-reverse; }
  .cl-am__btn { width: 100%; }
}

/* ---- the summary the modal edits ---- */
.cl-am-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  background: var(--ink-800);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
}
.cl-am-summary__text { min-width: 0; font-size: 15px; line-height: 1.5; color: var(--mist-300); }
.cl-am-summary__text p { margin: 0; }
.cl-am-summary__name { color: var(--mist-50); font-weight: 600; }
.cl-am-summary__empty { color: var(--mist-400); font-style: italic; }
.cl-am-summary__edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--ui-500);
  border-radius: 10px;
  background: transparent;
  color: var(--mist-50);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.cl-am-summary__edit:hover { background: var(--ui-500); color: #fff; }
.cl-am-summary__edit:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 2px; }

/* ============================================================
   SINGLE PRODUCT — centred, with the buy controls given room
   ============================================================ */
/* WooCommerce sets an inline max-width on the gallery from the image size, and
   a left margin from its own float layout, so the photo sat off-centre in a
   340px box. The product shot is the page's main visual — let it fill the
   column and centre it. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 24px !important;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .woocommerce-product-gallery img { margin-inline: auto; }
.woocommerce div.product .summary,
.woocommerce div.product .entry-summary { text-align: center; }

/* The photo is stacked full width above, so the details stack too — centred
   under it. WooCommerce's default floated them into the right 48%, which put
   the title, price and strength buttons off-centre on every desktop. */
.woocommerce div.product div.summary,
.woocommerce div.product .entry-summary {
  float: none !important;
  width: 100% !important;
  max-width: 640px;
  margin: 0 auto 32px !important;
}

/* DESKTOP: photo left, details right, so the price and strength buttons are
   on screen without scrolling (stacked, they started at y865 on a 900px
   screen). Phones and small tablets keep the stacked, centred layout above. */
@media (min-width: 1024px) {
  .woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    column-gap: 56px;
    align-items: start;
    max-width: 1180px;
    margin-inline: auto;
  }
  .woocommerce div.product > * { grid-column: 1 / -1; }
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product div.images {
    grid-column: 1;
    margin: 0 !important;
  }
  .woocommerce div.product div.summary,
  .woocommerce div.product .entry-summary {
    grid-column: 2;
    max-width: none;
    margin: 0 0 32px !important;
  }
}

.woocommerce div.product .product_title,
.woocommerce div.product .summary .price,
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .summary .stock { text-align: center; }

.woocommerce div.product .summary .price { justify-content: center; }

/* Variation rows and their labels centre with everything else. */
.woocommerce div.product form.cart .variations { margin-inline: auto; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .cl-variation-row { text-align: center; }
.woocommerce div.product .cl-pills { justify-content: center; }

/* The price and the buy controls were sitting flush against each other. */
.woocommerce div.product form.cart {
  margin-top: 26px;
  text-align: center;
}
/* The 18px gap belongs to the stepper as a whole. Applying it to the inner
   div.quantity as well gave that one flex item an 18px bottom margin, so with
   align-items:center the number box floated ~9px above the - and + buttons —
   that was the "wonky" quantity. */
.woocommerce div.product form.cart .cl-qty {
  margin: 0 auto 18px;
  float: none;
  display: inline-flex;
}
.woocommerce div.product form.cart .cl-qty div.quantity,
.woocommerce .cl-qty div.quantity {
  margin: 0 !important;
  padding: 0 !important;
  float: none;
  display: block;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  display: block;
  width: 100%;
  margin: 0 auto;
  min-height: 56px;
}

/* "Clear" reads as stray micro-copy; give it a shape. */
.woocommerce div.product .reset_variations {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-top: 10px;
  padding: 0 16px;
  border: 1px solid var(--ink-500);
  border-radius: 999px;
  background: var(--ink-800);
  color: var(--mist-100);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.woocommerce div.product .reset_variations:hover {
  border-color: var(--ui-400);
  color: #fff;
}

/* Stock state as a badge rather than loose coloured text. */
.woocommerce div.product .summary .stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 18px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(61, 214, 140, 0.35);
  background: rgba(61, 214, 140, 0.08);
  color: #6FE3AC !important;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.woocommerce div.product .summary .stock::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.woocommerce div.product .summary .stock.out-of-stock {
  border-color: var(--ink-600);
  background: var(--ink-800);
  color: var(--mist-400) !important;
}

/* SKU / category line: a panel, not loose grey text at the page edge. */
.woocommerce div.product .product_meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 26px auto 0;
  padding: 16px 18px;
  background: var(--ink-800);
  border: 1px solid var(--border-purple);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mist-100);
  text-align: center;
}
.woocommerce div.product .product_meta > span { display: block; color: var(--mist-100); }
.woocommerce div.product .product_meta .sku_wrapper,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist-400);
}
.woocommerce div.product .product_meta .sku,
.woocommerce div.product .product_meta a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: #FFFFFF;
}
.woocommerce div.product .product_meta a { color: var(--ui-400); }
.woocommerce div.product .product_meta a:hover { color: #FFFFFF; }

/* ============================================================
   CHECKOUT — make each thing you must fill in obvious
   ============================================================ */

/* --- the address card, especially when it is still empty --- */
.cl-am-summary.is-empty {
  border-style: dashed;
  border-color: var(--ui-500);
  background: linear-gradient(180deg, rgba(123, 63, 178, 0.10), transparent);
  align-items: center;
}
.cl-am-summary__prompt {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mist-50);
  margin: 0 0 4px !important;
}
.cl-am-summary.is-empty .cl-am-summary__empty {
  font-style: normal;
  color: var(--mist-300);
}
/* An empty address is the one thing most likely to stall a checkout, so the
   control that fixes it is a filled button rather than an outline. */
.cl-am-summary.is-empty .cl-am-summary__edit {
  background: linear-gradient(135deg, #7B3FB2, #9B5DE5);
  border-color: transparent;
  color: #FFFFFF;
  min-height: var(--tap-lg);
}
.cl-am-summary.is-empty .cl-am-summary__edit:hover { filter: brightness(1.08); }

/* --- field labels: bright enough to scan --- */
.woocommerce-checkout .woocommerce-billing-fields .form-row > label,
.woocommerce-checkout .woocommerce-shipping-fields .form-row > label,
.woocommerce-checkout .woocommerce-additional-fields .form-row > label {
  color: var(--mist-100);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

/* --- email: it sits alone after the address card, so it gets a panel of its
       own rather than floating as a bare label and box --- */
.woocommerce-checkout #billing_email_field {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--ink-800);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
}
.woocommerce-checkout #billing_email_field > label { margin-bottom: 8px; }
.woocommerce-checkout #billing_email_field .required { color: var(--mist-500); }
.woocommerce-checkout #billing_email_field::after {
  content: "We send your receipt and tracking here.";
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mist-400);
}

/* --- order notes: same panel treatment so it reads as a real field --- */
.woocommerce-checkout .woocommerce-additional-fields {
  margin-top: 26px;
  padding: 18px;
  background: var(--ink-800);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
}
.woocommerce-checkout .woocommerce-additional-fields > h3 {
  font-size: 15px !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  letter-spacing: 0.08em;
}
.woocommerce-checkout .woocommerce-additional-fields .form-row { margin-bottom: 0; }

/* WooCommerce renders NO <h3> in this section — the field's own label is the
   only heading it has. Hiding that label (to hang helper text off an h3 that
   does not exist) left the notes box completely untitled, so the label is
   promoted to the heading instead. */
.woocommerce-checkout #order_comments_field > label {
  display: block;
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist-50);
}
.woocommerce-checkout #order_comments_field > label .optional {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mist-400);
}
/* (order-notes helper line removed 2026-09-21: the placeholder says the same thing) */

/* --- the shipping panel: the first thing anyone has to fill in --- */
.woocommerce-checkout .woocommerce-shipping-fields {
  /* 4px of padding left the heading sitting on the panel's top border. */
  margin-top: 40px;
  padding: 22px 18px 20px;
  background: var(--ink-800);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
}
.woocommerce-checkout .woocommerce-shipping-fields > h3 {
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 17px !important;
  letter-spacing: 0.08em;
  color: var(--mist-50);
}
/* Say what the section is for, not just what it is called. */
.woocommerce-checkout .woocommerce-shipping-fields > h3::after {
  content: "Where your order will be delivered.";
  display: block;
  margin-top: 5px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mist-400);
}
.woocommerce-checkout .woocommerce-shipping-fields .cl-am-summary { margin-top: 16px; }
.woocommerce-checkout .cl-contact-fields { margin-top: 14px; }

/* Billing, when it is revealed, gets the same treatment. */
.woocommerce-checkout .woocommerce-billing-fields:not(.cl-collapsed) {
  margin-top: 18px;
  padding: 22px 18px 20px;
  background: var(--ink-800);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
}
.woocommerce-checkout .woocommerce-billing-fields:not(.cl-collapsed) > h3 {
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 17px !important;
  letter-spacing: 0.08em;
  color: var(--mist-50);
}
.woocommerce-checkout .woocommerce-billing-fields:not(.cl-collapsed) > h3::after {
  content: "The address your card or bank statement uses.";
  display: block;
  margin-top: 5px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mist-400);
}

/* ============================================================
   SHIPPING-FIRST CHECKOUT
   ============================================================ */
/* WooCommerce's own "Ship to a different address?" toggle is forced on
   server-side, so the control itself would only confuse. Its <h3> is reused as
   the section heading, so only the checkbox and its label are removed. */
.woocommerce-checkout .cl-ship-primary #ship-to-different-address-checkbox,
.woocommerce-checkout .cl-ship-primary #ship-to-different-address .woocommerce-form__label {
  display: none !important;
}
.woocommerce-checkout .cl-ship-primary > h3 { display: block; }

.cl-contact-fields { margin-top: 4px; }

/* The billing block collapses rather than unmounting, so its inputs stay in
   the form and keep posting the mirrored shipping values. */
.woocommerce-checkout .woocommerce-billing-fields.cl-collapsed {
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.cl-billing-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  padding: 16px 18px;
  background: var(--ink-800);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
}
.cl-billing-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin: 0;
  accent-color: var(--ui-500);
  cursor: pointer;
}
.cl-billing-toggle label {
  margin: 0;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mist-100);
  cursor: pointer;
}

/* ============================================================
   CART TOTALS — the shipment row
   ============================================================ */
/* This row was inheriting the monospace price face, so a sentence of help text
   was set in code type, right-aligned and wrapping mid-phrase. */
.woocommerce .cart_totals .shipping td,
.woocommerce-checkout .woocommerce-shipping-totals td {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  color: var(--mist-300);
}
.woocommerce .cart_totals .shipping th,
.woocommerce-checkout .woocommerce-shipping-totals th {
  vertical-align: top;
  white-space: nowrap;
  padding-right: 16px;
}
.woocommerce .cart_totals .shipping .woocommerce-shipping-destination { margin: 6px 0 0; font-size: 13px; color: var(--mist-400); }
.woocommerce .cart_totals ul#shipping_method { margin: 0; padding: 0; }
.woocommerce .cart_totals ul#shipping_method li { margin: 0 0 6px; padding: 0; text-align: left; }

/* WooCommerce appends its own icon-font glyph to this toggle; that font is not
   loaded here, so it rendered as a missing-character box. Replaced with an
   inline chevron that needs no font. */
.woocommerce .shipping-calculator-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tap);
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-400);
  text-decoration: none;
}
.woocommerce .shipping-calculator-button::after {
  content: "";
  width: 14px; height: 14px;
  background: var(--cl-chevron) center / 14px 14px no-repeat;
  transition: transform var(--transition);
}
.woocommerce .shipping-calculator-form { margin-top: 12px; }

/* Controls lifted out of a section heading so the heading could be retitled.
   They must stay in the form to keep posting, but must not be seen. */
.cl-field-vault {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Low stock reads as a caution, not a success. */
.woocommerce div.product .summary .stock.cl-low-stock {
  border-color: rgba(232, 179, 65, 0.35);
  background: rgba(232, 179, 65, 0.08);
  color: #E8B341 !important;
}

/* ============================================================
   QUANTITY BUTTONS — pressed state
   :hover never fires on a touch screen, so the press feedback has to come
   from :active (and :focus-visible for keyboards).
   ============================================================ */
.cl-qty__btn:active:not(:disabled),
.cl-qty__btn:focus-visible {
  background: var(--ui-500);
  border-color: var(--ui-500);
  color: #FFFFFF;
}
.cl-qty__btn:active:not(:disabled) { transform: scale(0.94); }
.cl-qty__btn { transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, transform 120ms ease-out; }

/* ============================================================
   DEFINITIVE SECTIONS
   Every major block gets a rule above it and its own surface, so where one
   section ends and the next begins is never in doubt.
   ============================================================ */
.cl-section {
  position: relative;
  border-top: 1px solid var(--border-purple);
  border-bottom: 0;
  /* Translucent, not solid. These two rules were painting every section —
     including "Other products" — with an opaque ground, so the background
     plate cut out and came back as you scrolled past each one. */
  background: rgba(8, 7, 11, 0.34);
}
.cl-section:nth-of-type(even) { background: rgba(17, 16, 21, 0.40); }
.cl-section--alt { background: var(--ink-900); }

/* A short purple tick at the start of each section rule, so the boundary
   reads as deliberate rather than as a stray hairline. */
.cl-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 88px;
  height: 3px;
  background: linear-gradient(90deg, var(--ui-500), var(--ui-400));
}

/* ---- the buy box is its own panel ---- */
.woocommerce div.product form.cart {
  padding: 22px 18px;
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-radius: 16px;
}
/* "Strength" was loose grey micro-copy floating above the pills. */
.woocommerce div.product form.cart .variations label,
.woocommerce div.product form.cart .cl-variation-row > label {
  display: inline-block;
  margin: 0 auto 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ink-800);
  border: 1px solid var(--border-purple);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist-100);
}

/* ---- product tabs: which one is active must be obvious ---- */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-radius: 999px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 18px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-300);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--ui-500);
  border-color: var(--ui-500);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #FFFFFF; }
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-radius: 16px;
  padding: 22px 18px;
}
.woocommerce div.product .woocommerce-tabs .panel > h2 {
  font-size: 16px;
  letter-spacing: 0.1em;
  margin: 0 0 16px;
}

/* ============================================================
   PRESSED STATE — every button confirms the tap
   Touch screens never fire :hover, so without :active a tap gives no feedback
   at all until the page changes.
   ============================================================ */
.cl-btn:active,
.cl-btn--secondary:active,
.cl-chip:active,
.cl-am__btn:active,
.cl-am-summary__edit:active,
.cl-search button[type="submit"]:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce a.button.alt:active,
.woocommerce button.button.alt:active,
.woocommerce #respond input#submit:active,
.woocommerce div.product .reset_variations:active,
.woocommerce .shipping-calculator-button:active,
.cl-icon-btn:active,
.woocommerce table.shop_table.cart td.product-remove a.remove:active {
  background: var(--ui-500) !important;
  border-color: var(--ui-500) !important;
  color: #FFFFFF !important;
  transform: translateY(1px);
}
/* Nothing is filled at rest any more, so every press lands on the same purple
   rather than one tone for filled buttons and another for outlined ones. */

.cl-icon-btn {
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.cl-icon-btn:active svg { color: #FFFFFF; }


/* ============================================================
   SHIPPING PANEL — the address and email keep their own boxes
   An earlier pass flattened these to a single frame to reduce nesting. Reverted
   on request: each is a bordered card again, which is what made the address and
   the email read as two separate things you fill in.
   ============================================================ */
.woocommerce-checkout .woocommerce-shipping-fields .cl-am-summary {
  gap: 20px;
  padding: 18px;
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-radius: 12px;
}
.woocommerce-checkout .woocommerce-shipping-fields .cl-am-summary.is-empty {
  border-color: var(--ui-500);
  background: linear-gradient(180deg, rgba(123, 63, 178, 0.10), transparent);
}
/* Address lines need room to breathe — they wrap, and at 1.5 they ran together. */
.cl-am-summary__text { line-height: 1.75; font-size: 15px; }
.cl-am-summary__text p + p { margin-top: 2px; }
.cl-am-summary__name { font-size: 16px; margin-bottom: 4px !important; }
.cl-am-summary__edit { align-self: flex-start; }

/* Email gets its box back too, so it reads as its own field rather than a
   continuation of the address card above it. */
.woocommerce-checkout .woocommerce-shipping-fields .cl-contact-fields {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}
.woocommerce-checkout .woocommerce-shipping-fields #billing_email_field {
  margin-top: 0;
  padding: 16px 18px;
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-radius: 12px;
}
.woocommerce-checkout .woocommerce-shipping-fields #billing_email_field > label { margin-bottom: 10px; }
.woocommerce-checkout .woocommerce-shipping-fields #billing_email_field input {
  width: 100%;
}
.woocommerce-checkout .woocommerce-shipping-fields #billing_email_field::after { margin-top: 10px; }

@media (max-width: 480px) {
  /* Stacking keeps the address readable instead of squeezing it beside the
     button on a narrow screen. */
  .woocommerce-checkout .woocommerce-shipping-fields .cl-am-summary {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .cl-am-summary__edit { align-self: stretch; justify-content: center; }
}

/* ============================================================
   SHOP TOOLBAR + ADD-TO-CART NOTICE
   ============================================================ */
/* --- the "added to cart" notice --- */
.woocommerce .woocommerce-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 20px;
  line-height: 1.5;
}
.woocommerce .woocommerce-message .cl-notice-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;      /* both buttons exactly the same width */
  gap: 10px;
  margin-left: auto;
  width: auto;
}
/* At rest these are secondary: the page already has one primary action.
   They fill purple only while pressed, like every other control. */
.woocommerce .woocommerce-message .cl-notice-actions .button,
.woocommerce .woocommerce-message .cl-notice-actions a.button {
  margin: 0;
  width: 100%;
  min-height: var(--tap-lg);
  padding-inline: 22px;
  background: rgba(155, 93, 229, 0.05);
  border: 1.5px solid var(--ui-500);
  color: var(--mist-50);
  box-shadow: none;
  filter: none;
  white-space: nowrap;
}
.woocommerce .woocommerce-message .cl-notice-actions .button:hover {
  background: rgba(155, 93, 229, 0.14);
  border-color: var(--ui-400);
  color: #FFFFFF;
}
@media (max-width: 560px) {
  .woocommerce .woocommerce-message .cl-notice-actions {
    grid-auto-flow: row;
    margin-left: 0;
    width: 100%;
  }
}

/* The search panel is permanent now, so it reads as part of the header rather
   than as something that appeared. */
.cl-search { padding: 14px 0; }
@media (max-width: 560px) { .cl-search { padding: 12px 0; } }

/* ============================================================
   OUTLINED AT REST — the remaining filled controls
   Every button now shares one resting appearance; purple means "pressed".
   ============================================================ */

/* Disabled must still read as unavailable rather than as another outline. */
.cl-btn[disabled], .woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled, .woocommerce #place_order:disabled {
  background: var(--ink-800) !important;
  border-color: var(--ink-600) !important;
  color: var(--mist-500) !important;
}

/* ============================================================
   ONE LEADING ACTION PER PAGE
   With every button outlined, nothing announced itself as the next step —
   Place Order looked identical to Add address. These keep the outline (no
   fill until pressed) but take a brighter, heavier edge.

   The difference is measured, not decorative: --ui-400 sits at 4.87:1 against
   the page ground where --ui-500 is 3.06:1, so the leading button's edge is
   1.86x brighter in luminance and reads first even in peripheral vision.
   ============================================================ */
.cl-hero__cta .cl-btn:not(.cl-btn--secondary),
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order,
.cl-am__btn--primary,
.cl-am-summary.is-empty .cl-am-summary__edit,
.cl-btn--xl {
  border-width: 2px !important;
  border-color: var(--ui-400) !important;
  background: rgba(155, 93, 229, 0.13) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 1px rgba(155, 93, 229, 0.14),
              0 10px 28px -18px rgba(155, 93, 229, 0.85) !important;
}
.cl-hero__cta .cl-btn:not(.cl-btn--secondary):hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover,
.cl-am__btn--primary:hover,
.cl-am-summary.is-empty .cl-am-summary__edit:hover,
.cl-btn--xl:hover {
  background: rgba(155, 93, 229, 0.22) !important;
  border-color: #B98CF0 !important;
}
/* Pressed is still the same purple everywhere — that is what "pressed" means. */
.cl-hero__cta .cl-btn:not(.cl-btn--secondary):active,
.woocommerce ul.products li.product .button:active,
.woocommerce div.product form.cart .single_add_to_cart_button:active,
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button:active,
.woocommerce #place_order:active,
.cl-am__btn--primary:active,
.cl-am-summary.is-empty .cl-am-summary__edit:active,
.cl-btn--xl:active {
  background: var(--ui-500) !important;
  border-color: var(--ui-500) !important;
  box-shadow: none !important;
}
/* A disabled primary must not keep shouting. */
.woocommerce #place_order:disabled,
.cl-am__btn--primary:disabled {
  border-width: 1.5px !important;
  border-color: var(--ink-600) !important;
  background: var(--ink-800) !important;
  color: var(--mist-500) !important;
  box-shadow: none !important;
}

/* While there is still no delivery address, "Add address" is the next step and
   Place Order cannot succeed — so the lead hands over rather than two buttons
   competing. Once an address exists this reverts automatically and Place Order
   leads again. */
.woocommerce-checkout form.checkout:has(.cl-am-summary.is-empty) #place_order {
  border-width: 1.5px !important;
  border-color: var(--ui-500) !important;
  background: rgba(155, 93, 229, 0.06) !important;
  color: var(--mist-50) !important;
  box-shadow: none !important;
}

/* ============================================================
   CHECKOUT — two columns on desktop
   The form's own children are laid out as a grid rather than wrapping them in
   new markup, so WooCommerce's template and its AJAX targets are untouched.
   ============================================================ */
@media (min-width: 1024px) {
  .woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-areas:
      "details review"
      "details review";
    align-items: start;
    column-gap: 36px;
  }
  .woocommerce-checkout form.checkout #customer_details { grid-area: details; }
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review { grid-column: 2; }

  /* Anything the theme or a plugin injects at the top of the form spans both
     columns rather than being trapped in one. */
  .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
  .woocommerce-checkout form.checkout > .cl-ruo-notice,
  .woocommerce-checkout form.checkout > .cl-billing-toggle { grid-column: 1 / -1; }

  /* The summary follows you down a long address form. */
  .woocommerce-checkout form.checkout #order_review {
    position: sticky;
    top: 96px;
    background: var(--ink-900);
    border: 1px solid var(--border-purple);
    border-radius: 16px;
    padding: 22px;
  }
  .woocommerce-checkout form.checkout #order_review_heading {
    margin: 0 0 14px !important;
    font-size: 20px !important;
  }
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 {
    width: 100%;
    float: none;
    margin: 0;
  }
  .woocommerce-checkout #customer_details .col2-set { display: block; width: 100%; }
}

/* The order panel already carries the frame on desktop; don't double it. */
@media (min-width: 1024px) {
  .woocommerce-checkout form.checkout #order_review .cl-ship { margin-bottom: 18px; }
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.cl-trustbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 30px;
  padding: 18px;
  list-style: none;
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
}
@media (min-width: 640px)  { .cl-trustbar { grid-template-columns: repeat(2, 1fr); gap: 18px 24px; } }
@media (min-width: 1024px) { .cl-trustbar { grid-template-columns: repeat(4, 1fr); } }
.cl-trustbar__item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.cl-trustbar__icon { flex: 0 0 auto; color: var(--ui-400); line-height: 0; }
.cl-trustbar__text { display: block; min-width: 0; }
.cl-trustbar__text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mist-50);
}
.cl-trustbar__text span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--mist-400);
}

/* ============================================================
   STICKY CART BAR
   ============================================================ */
.cl-sticky-cart {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: rgba(17, 16, 21, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-purple);
  transform: translateY(110%);
  transition: transform 220ms ease-out;
}
.cl-sticky-cart.is-visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .cl-sticky-cart { transition: none; } }
.cl-sticky-cart__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.cl-sticky-cart__text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--mist-100);
}
.cl-sticky-cart__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cl-sticky-cart__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 20px;
  border-radius: 10px;
  border: 2px solid var(--ui-400);
  background: rgba(155, 93, 229, 0.13);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.cl-sticky-cart__btn--ghost {
  border-width: 1.5px;
  border-color: var(--ui-500);
  background: rgba(155, 93, 229, 0.06);
  color: var(--mist-50);
}
.cl-sticky-cart__btn:active { background: var(--ui-500); border-color: var(--ui-500); color: #fff; }
/* Keep the bar from covering the last of the page. */
body.cl-has-sticky-cart { padding-bottom: 84px; }
@media (max-width: 560px) {
  .cl-sticky-cart__inner { flex-wrap: wrap; }
  .cl-sticky-cart__text { flex: 1 1 100%; }
  .cl-sticky-cart__actions { flex: 1 1 100%; }
  .cl-sticky-cart__btn { flex: 1 1 0; }
  body.cl-has-sticky-cart { padding-bottom: 132px; }
}

/* The badge is always in the DOM so cart fragments can refresh it; it just
   has nothing to show at zero. */
.cl-cart-count.is-empty { display: none; }

/* ============================================================
   ADD-TO-CART NOTICE
   The message is a bare text node, so as a flex item it is anonymous and
   cannot be given `min-width: 0` — its longest word kept forcing it onto a
   line of its own below the tick. Reserving the icon's column with padding
   instead lets the text flow beside it as ordinary inline content.
   ============================================================ */
.woocommerce .woocommerce-message {
  position: relative;
  display: block;
  padding: 20px;
  margin: 0 0 26px;
  line-height: 1.55;
  /* Centred: the icon rides with the first line as an inline-block rather than
     being absolutely pinned left, which is what lets the whole block centre. */
  text-align: center;
}
.woocommerce .woocommerce-message::before {
  content: "";
  position: static;
  display: inline-block;
  vertical-align: -5px;
  margin: 0 10px 0 0;
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--ui-500);
  /* WooCommerce's icon font is not loaded here, which is why this rendered as
     a plain filled disc; the tick is drawn as a mask instead. */
  -webkit-mask: var(--cl-tick-icon) center / 13px 13px no-repeat;
          mask: var(--cl-tick-icon) center / 13px 13px no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
}
:root {
  --cl-tick-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
/* WooCommerce appends a clearfix ::after for its float layout; left alone it
   adds an empty row of height under the buttons. */
.woocommerce .woocommerce-message::after,
.woocommerce .woocommerce-info::after,
.woocommerce .woocommerce-error::after { display: none !important; }

.woocommerce .woocommerce-message .cl-notice-actions {
  display: grid;
  grid-auto-flow: row;
  gap: 10px;
  margin: 14px 0 0;
  width: 100%;
}
@media (min-width: 620px) {
  /* With room for both, the message reads on the left and the actions sit on
     the right — the centred stack is a small-screen arrangement. */
  .woocommerce .woocommerce-message {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
  }
  .woocommerce .woocommerce-message .cl-notice-actions {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: auto;
    margin: 0 0 0 auto;
  }
}

/* ============================================================
   PRODUCT-PAGE CHECKOUT SHORTCUT
   ============================================================ */
.cl-checkout-shortcut { margin: 18px 0 0; }
.woocommerce div.product .cl-checkout-shortcut__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: var(--tap-lg);
}
.cl-checkout-shortcut__label {
  /* Long all-caps strings at 0.10em tracking are hard to read; the label is
     one word now, so it can keep the button voice without the strain. */
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cl-checkout-shortcut__count {
  /* The count is supporting detail: separated by a rule, set in the body face
     at natural case so it does not compete with the action. */
  padding-left: 12px;
  border-left: 1px solid rgba(155, 93, 229, 0.45);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: var(--mist-300);
}
.woocommerce div.product .cl-checkout-shortcut__btn:hover .cl-checkout-shortcut__count { color: #FFFFFF; }

/* ============================================================
   CART COUPON — say what the field is for
   A bare box with a placeholder is easy to scan past; placeholders also
   disappear the moment you start typing.
   ============================================================ */
.woocommerce table.shop_table.cart td.actions .coupon {
  display: block;
  width: 100%;
  padding: 16px 18px;
  /* The cart's action cell is right-aligned; the panel is not. */
  text-align: left;
  background: var(--ink-800);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
}
.woocommerce table.shop_table.cart td.actions .coupon::before {
  content: "Have a discount code?";
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist-50);
}
/* No ::after hint here: a pseudo-element always renders after the element's
   real children, so it landed underneath the Apply button rather than above
   the field. The heading and the placeholder already say what to do. */
.woocommerce table.shop_table.cart td.actions .coupon #coupon_code {
  display: block;
  width: 100%;
  min-height: var(--tap-lg);
  margin: 0 0 10px;
  padding: 0 16px 0 44px;
  border-radius: 10px;
  border: 1.5px solid var(--ink-500);
  background: var(--ink-950) var(--cl-tag-icon-dim) 15px center / 18px 18px no-repeat;
  color: var(--mist-50);
  font-size: 16px;      /* 16px so iOS does not zoom on focus */
  letter-spacing: 0.04em;
}
.woocommerce table.shop_table.cart td.actions .coupon #coupon_code::placeholder {
  color: var(--mist-500);
  letter-spacing: 0;
}
.woocommerce table.shop_table.cart td.actions .coupon #coupon_code:focus {
  border-color: var(--ui-400);
  box-shadow: 0 0 0 3px rgba(155, 93, 229, 0.12);
  outline: none;
}
.woocommerce table.shop_table.cart td.actions .coupon .button {
  width: 100%;
  margin: 0;
}
:root {
  --cl-tag-icon-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6879' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.2'/%3E%3C/svg%3E");
}
@media (min-width: 700px) {
  /* Room for the field and its button side by side. */
  .woocommerce table.shop_table.cart td.actions .coupon { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
  .woocommerce table.shop_table.cart td.actions .coupon::before { grid-column: 1 / -1; margin-bottom: 10px; }
  .woocommerce table.shop_table.cart td.actions .coupon #coupon_code { margin: 0; }
  .woocommerce table.shop_table.cart td.actions .coupon .button { width: auto; padding-inline: 26px; }
}

/* ============================================================
   PRODUCT SUMMARY — quieter below the price
   ============================================================ */
/* The variations markup is a <table>; its label cell is only as wide as the
   word, so centring the text inside it left the pill hard against the edge.
   Laying the table out as blocks gives the cell the full width to centre in. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: center;
}
.woocommerce div.product form.cart table.variations tr + tr { margin-top: 16px; }
.woocommerce div.product form.cart table.variations th.label { margin-bottom: 12px; }

/* Description and the research-use notice were two competing blocks under the
   price. They are joined into one panel — same information, one object. */
.woocommerce div.product .summary .woocommerce-product-details__short-description {
  margin: 18px 0 0;
  padding: 16px 18px;
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mist-200);
}
.woocommerce div.product .summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.woocommerce div.product .summary .cl-ruo-notice {
  margin: 0 0 4px;
  padding: 12px 18px 14px;
  background: var(--ink-950);
  border: 1px solid var(--border-purple);
  border-top: 1px solid var(--ink-700);
  border-radius: 0 0 14px 14px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--mist-500);
}

/* ============================================================
   STICKY CART — dismiss, and the way back
   ============================================================ */
.cl-sticky-cart__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: 4px;
  border: 1px solid var(--ink-600);
  border-radius: 50%;
  background: transparent;
  color: var(--mist-400);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.cl-sticky-cart__close:hover { color: #FFFFFF; border-color: var(--ui-400); }
.cl-sticky-cart__close:active { background: var(--ui-500); border-color: var(--ui-500); color: #FFFFFF; }
.cl-sticky-cart__close:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 2px; }

/* Once the bar is dismissed this is the one-tap route back to the cart. */
.cl-cart-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 89;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--ui-400);
  background: rgba(17, 16, 21, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--mist-50);
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.cl-cart-fab.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.cl-cart-fab:active { background: var(--ui-500); border-color: var(--ui-500); color: #FFFFFF; }
.cl-cart-fab:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 3px; }
.cl-cart-fab__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ui-500);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cl-cart-fab { transition: none; }
}
@media (max-width: 560px) {
  /* The close control keeps its own row-end position when the bar wraps. */
  .cl-sticky-cart__close { position: absolute; top: 8px; right: 14px; margin: 0; }
  .cl-sticky-cart__text { padding-right: 42px; }
}

/* ============================================================
   ORDER SUMMARY — readable rows
   The totals are a <table> whose cells were inheriting the mono price face and
   a right-aligned shipping cell, so a sentence of help text was set in code
   type and wrapped against the right edge. Each row becomes an explicit
   label/value pair instead.
   ============================================================ */
.woocommerce .cart_totals table.shop_table,
.woocommerce .cart_totals table.shop_table tbody { display: block; width: 100%; }

.woocommerce .cart_totals table.shop_table tr {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-700);
}
.woocommerce .cart_totals table.shop_table tr:last-child { border-bottom: 0; }

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}
.woocommerce .cart_totals table.shop_table th {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--mist-300);
  white-space: normal;
  overflow-wrap: normal;
}
/* Some WooCommerce strings ship with a trailing colon; drop it so the rows
   read as a list rather than as form labels. */
.woocommerce .cart_totals table.shop_table th::after { content: none !important; }

.woocommerce .cart_totals table.shop_table td {
  font-family: var(--font-mono);
  font-size: 15px;
  text-align: right;
  color: var(--mist-50);
}

/* ---- the shipping row carries a method, a price and often a sentence ---- */
.woocommerce .cart_totals table.shop_table tr.shipping td,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  text-align: right;
  color: var(--mist-300);
}
.woocommerce .cart_totals ul#shipping_method { margin: 0; padding: 0; list-style: none; }
.woocommerce .cart_totals ul#shipping_method li { margin: 0; padding: 0; text-align: right; }
.woocommerce .cart_totals ul#shipping_method label {
  display: inline;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mist-300);
}
.woocommerce .cart_totals ul#shipping_method .amount {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--mist-50);
}
/* The destination line and its "change address" toggle live INSIDE the td, so
   grid-column cannot pull them across the row. They become their own small
   panel instead — which is what makes them read as belonging to the shipping
   line rather than floating loose in the right-hand column. */
.woocommerce .cart_totals tr.shipping .woocommerce-shipping-destination,
.woocommerce .cart_totals tr.woocommerce-shipping-totals .woocommerce-shipping-destination,
.woocommerce .cart_totals tr.shipping p,
.woocommerce .cart_totals tr.woocommerce-shipping-totals p {
  display: block;
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--ink-950);
  border: 1px solid var(--ink-700);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  color: var(--mist-400);
}
.woocommerce .cart_totals .woocommerce-shipping-destination strong { color: var(--mist-100); font-weight: 600; }
/* The toggle sits under that panel, aligned with it. */
.woocommerce .cart_totals tr.shipping td .shipping-calculator-button,
.woocommerce .cart_totals tr.woocommerce-shipping-totals td .shipping-calculator-button {
  float: none;
  margin-top: 10px;
}
.woocommerce .cart_totals tr.shipping td,
.woocommerce .cart_totals tr.woocommerce-shipping-totals td { text-align: right; }
.woocommerce .cart_totals .shipping-calculator-form {
  margin-top: 12px;
  padding: 14px;
  background: var(--ink-950);
  border: 1px solid var(--ink-700);
  border-radius: 10px;
  text-align: left;
}
.woocommerce .cart_totals .shipping-calculator-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-400);
  text-decoration: none;
}
.woocommerce .cart_totals .shipping-calculator-button::after {
  content: "";
  width: 13px; height: 13px;
  background: var(--cl-chevron) center / 13px 13px no-repeat;
}

/* ---- the total is the number people look for ---- */
.woocommerce .cart_totals table.shop_table tr.order-total {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--border-purple);
  border-bottom: 0;
  align-items: center;
}
.woocommerce .cart_totals table.shop_table tr.order-total th {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-50);
}
.woocommerce .cart_totals table.shop_table tr.order-total td .amount {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mist-50);
}
.woocommerce .cart_totals table.shop_table tr.order-total small { display: block; margin-top: 4px; font-size: 12px; color: var(--mist-400); }

/* shop_table_responsive hides the <th> on small screens and prints the label
   from data-title into td::before with a trailing colon. The real <th> is
   visible again here, so that stand-in has to go — otherwise every row reads
   "Subtotal Subtotal:". This is also where the colons were coming from. */
.woocommerce .cart_totals table.shop_table td::before,
.woocommerce .cart_totals table.shop_table th::before {
  content: none !important;
  display: none !important;
}
.cl-hero { padding-bottom: 0; }
@media (max-width: 1023px) {
  /* Stacked, the photo sits directly on top of the offer. */
}

/* The destination panel was boxed but still trapped in the value column, so it
   started halfway across the row. `display: contents` promotes the cell's
   children to row level, which is what finally lets the panel span the full
   width and read as part of the shipping line. */
.woocommerce .cart_totals table.shop_table tr.shipping td,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
  display: contents;
}
/* Squeezed into the value column, "Standard Shipping: $9.99" wrapped onto two
   right-ragged lines and the price no longer lined up with Subtotal and Total.
   Spanning the row and laying it out as name-left / price-right puts all three
   money figures on one edge. */
.woocommerce .cart_totals table.shop_table tr.shipping ul#shipping_method,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals ul#shipping_method {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.woocommerce .cart_totals ul#shipping_method li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
}
.woocommerce .cart_totals ul#shipping_method label { flex: 1 1 auto; text-align: left; }
.woocommerce .cart_totals ul#shipping_method .amount { flex: 0 0 auto; font-size: 15px; }
/* The label ships with a trailing colon that reads oddly once the price is
   pushed to the far edge. */
.woocommerce .cart_totals ul#shipping_method label { white-space: normal; }
.woocommerce .cart_totals table.shop_table tr.shipping .woocommerce-shipping-destination,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .woocommerce-shipping-destination,
.woocommerce .cart_totals table.shop_table tr.shipping > p,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals > p,
.woocommerce .cart_totals table.shop_table tr.shipping .shipping-calculator-button,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .shipping-calculator-button,
.woocommerce .cart_totals table.shop_table tr.shipping .shipping-calculator-form,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .shipping-calculator-form {
  grid-column: 1 / -1;
}
.woocommerce .cart_totals table.shop_table tr.shipping .shipping-calculator-button,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .shipping-calculator-button {
  justify-self: start;
  margin-top: 10px;
}

/* ============================================================
   FOOTER — visible sections
   The columns ran together as one long list on a phone, with only a small
   heading to separate them.
   ============================================================ */
.cl-footer__col {
  padding: 18px;
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
}
.cl-footer__col h3,
.cl-footer__col .cl-footer__heading {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-700);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-50);
}
.cl-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cl-footer__col li { margin: 0; }
.cl-footer__col a {
  display: block;
  padding: 9px 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--mist-300);
}
.cl-footer__col a:hover { color: var(--ui-400); }
.cl-footer__brand {
  padding: 18px;
  background: var(--ink-900);
  border: 1px solid var(--border-purple);
  border-radius: 14px;
}
.cl-footer__brand p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--mist-300); }
.cl-footer__brand p:last-child { margin-bottom: 0; }
.cl-footer__grid { gap: 14px; }
@media (min-width: 900px) { .cl-footer__grid { gap: 20px; } }

/* ============================================================
   SHIPPING ROW — method and destination as one panel
   The method line and the address were two separate things floating in the
   row, and "Standard Shipping" sat hard against its price. They are joined
   into a single bordered block: method and price on one line with real space
   between them, the destination beneath a divider.
   ============================================================ */
.woocommerce .cart_totals ul#shipping_method {
  padding: 12px 14px;
  background: var(--ink-950);
  border: 1px solid var(--ink-700);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.woocommerce .cart_totals ul#shipping_method li { gap: 20px; padding: 2px 0; }
.woocommerce .cart_totals ul#shipping_method label { font-size: 14px; color: var(--mist-200); }
.woocommerce .cart_totals ul#shipping_method .amount { font-size: 15.5px; color: var(--mist-50); }

/* The destination continues the same block rather than starting a new one. */
.woocommerce .cart_totals table.shop_table tr.shipping .woocommerce-shipping-destination,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .woocommerce-shipping-destination {
  margin: 0;
  border-radius: 0 0 10px 10px;
  border-top: 1px solid var(--ink-700);
}
/* When no method is available yet the destination note is the whole panel. */
.woocommerce .cart_totals table.shop_table tr.shipping .woocommerce-shipping-destination:first-child,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .woocommerce-shipping-destination:first-child {
  border-radius: 10px;
  border-top: 1px solid var(--ink-700);
  margin-top: 12px;
}

/* The method label is now two elements, so name and cost can be pushed apart
   and the cost aligned with the other figures. */
.woocommerce .cart_totals ul#shipping_method label,
.woocommerce-checkout #shipping_method label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.cl-ship-name { flex: 1 1 auto; text-align: left; color: var(--mist-200); }
.cl-ship-cost {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--mist-50);
}
.cl-ship-cost .amount { color: inherit; }

/* ============================================================
   SHIPPING PANEL — one block, three clear parts
   "Change address" sat outside the panel looking orphaned, and the address ran
   straight on from "Shipping to" so the two jumbled together mid-line.
   ============================================================ */
.woocommerce .cart_totals table.shop_table tr.shipping .woocommerce-shipping-destination,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .woocommerce-shipping-destination {
  border-radius: 0;
  border-bottom: 0;
  padding: 12px 14px;
}
/* The address gets its own line instead of trailing off the label. */
.woocommerce .cart_totals .woocommerce-shipping-destination strong {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mist-100);
}

/* The toggle becomes the panel's last section rather than floating below it. */
.woocommerce .cart_totals table.shop_table tr.shipping .shipping-calculator-button,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .shipping-calculator-button {
  justify-self: stretch;
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  min-height: 0;
  background: var(--ink-950);
  border: 1px solid var(--ink-700);
  border-top: 1px solid var(--ink-700);
  border-radius: 0 0 10px 10px;
  justify-content: space-between;
}
.woocommerce .cart_totals table.shop_table tr.shipping .shipping-calculator-button:hover,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .shipping-calculator-button:hover {
  background: var(--ink-900);
  color: #FFFFFF;
}
/* The calculator form opens under the panel it belongs to. */
.woocommerce .cart_totals .shipping-calculator-form { margin-top: 10px; }

/* ============================================================
   SHIPPING PANEL — final layout
   One bordered block with three equal-width sections: method + price,
   destination, and the change-address control. Everything shares the same
   left edge, and the address wraps inside the panel however long it is.
   ============================================================ */
.woocommerce .cart_totals table.shop_table tr.shipping ul#shipping_method,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals ul#shipping_method,
.woocommerce .cart_totals table.shop_table tr.shipping .woocommerce-shipping-destination,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .woocommerce-shipping-destination,
.woocommerce .cart_totals table.shop_table tr.shipping .shipping-calculator-button,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .shipping-calculator-button {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: auto;
  margin: 0;
  padding: 13px 15px;
  background: var(--ink-950);
  border: 1px solid var(--ink-700);
  border-radius: 0;
  text-align: left;
}
/* Only the outer edges are rounded, so the three read as one block. */
.woocommerce .cart_totals table.shop_table tr.shipping ul#shipping_method,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals ul#shipping_method {
  margin-top: 2px;
  border-radius: 10px 10px 0 0;
  border-bottom: 0;
}
.woocommerce .cart_totals table.shop_table tr.shipping .woocommerce-shipping-destination,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .woocommerce-shipping-destination {
  border-bottom: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mist-400);
}
.woocommerce .cart_totals table.shop_table tr.shipping .shipping-calculator-button,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .shipping-calculator-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  border-radius: 0 0 10px 10px;
}

/* However long the address is, it wraps inside the panel and never pushes it
   wider or runs into the label. */
.woocommerce .cart_totals .woocommerce-shipping-destination strong {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--mist-100);
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* ============================================================
   FEATURED PRODUCT — the photo lives in the panel now
   ============================================================ */
/* The hero no longer holds the art, so it is a single column of copy. */
.cl-hero { padding-bottom: 26px; }
@media (min-width: 1024px) {
  .cl-hero__cta { justify-content: center; }
}

/* Long addresses clamp to two lines with a control to reveal the rest. */
.woocommerce-shipping-destination strong.cl-addr-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cl-addr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ui-400);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cl-addr-toggle:hover { color: #FFFFFF; }
.cl-addr-toggle:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 3px; border-radius: 4px; }
.cl-addr-toggle svg { transition: transform var(--transition); }
.cl-addr-toggle.is-open svg { transform: rotate(180deg); }

/* The clamp needs display:-webkit-box, but a later, more specific rule
   (`.woocommerce .cart_totals .woocommerce-shipping-destination strong`) reset
   it to block — so line-clamp never engaged, scrollHeight matched clientHeight,
   and the script correctly concluded nothing was clipped and skipped the
   toggle. Declared here at higher specificity, after that rule. */
.woocommerce .cart_totals .woocommerce-shipping-destination strong.cl-addr-clamped,
.woocommerce-checkout .woocommerce-shipping-destination strong.cl-addr-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   CORE PICKS CAROUSEL
   ============================================================ */
.cl-picks { padding: 6px 0 30px; }
.cl-picks__panel {
  position: relative;
  padding: 16px 14px 16px;
  background: var(--ink-900);
  /* Asked for plainly visible: a solid 2px accent edge rather than the 20%
     alpha hairline used elsewhere, plus a soft ring so it lifts off the page. */
  border: 2px solid var(--ui-500);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(155, 93, 229, 0.12),
              0 18px 46px -28px rgba(123, 63, 178, 0.85);
}
@media (min-width: 700px) { .cl-picks__panel { padding: 20px 26px 20px; } }

.cl-picks__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}
/* Centred and filled rather than a faint outline — this is the label for the
   whole section, so it should read before anything else in the panel. */
.cl-picks__eyebrow {
  display: inline-block;
  margin: 0;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ui-500), var(--ui-400));
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FFFFFF;
  box-shadow: 0 8px 22px -12px rgba(155, 93, 229, 0.9);
}
@media (min-width: 700px) { .cl-picks__eyebrow { font-size: 14px; padding: 11px 26px; } }
/* The arrows sit over the left and right edges of the photo. --cl-art-center
   is written by the carousel script from the real height of the current
   image, so they stay centred on the picture in either layout rather than on
   the slide as a whole. */
.cl-picks__stage { position: relative; }
.cl-picks__arrow {
  position: absolute;
  top: var(--cl-art-center, 42%);
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--ui-400);
  border-radius: 50%;
  background: rgba(8, 7, 11, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.95);
  transition: background var(--transition), border-color var(--transition), transform 140ms ease-out;
}
.cl-picks__arrow--prev { left: -6px; }
.cl-picks__arrow--next { right: -6px; }
.cl-picks__arrow:hover { background: rgba(123, 63, 178, 0.9); border-color: #B98CF0; }
.cl-picks__arrow:active { background: var(--ui-500); border-color: var(--ui-500); transform: translateY(-50%) scale(0.92); }
.cl-picks__arrow:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 3px; }
@media (min-width: 700px) {
  .cl-picks__arrow { width: 62px; height: 62px; }
  .cl-picks__arrow--prev { left: -14px; }
  .cl-picks__arrow--next { right: -14px; }
}

/* Without JS the viewport just scrolls, so nothing is unreachable. */
.cl-picks__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cl-picks__panel.is-enhanced .cl-picks__viewport { overflow: hidden; }

.cl-picks__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .cl-picks__track { transition: none; } }

.cl-picks__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 0 26px;
  /* Slides that are not current fade back rather than vanishing, so the
     movement reads as one strip sliding past. */
  opacity: 0.35;
  transition: opacity 320ms ease-out;
}
.cl-picks__panel.is-enhanced .cl-picks__slide.is-current { opacity: 1; }
.cl-picks__panel:not(.is-enhanced) .cl-picks__slide { opacity: 1; }

.cl-picks__art {
  display: block;
  /* A square photo at full column width was the bulk of the panel's height.
     Capped and centred: same uncropped image, far less vertical space. */
  width: 100%;
  max-width: 220px;
  margin-inline: auto;
  background: var(--ink-950);
  border: 1px solid var(--ink-700);
  border-radius: 14px;
  overflow: hidden;
}
.cl-picks__art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0;
}
.cl-picks__body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cl-picks__name { margin: 0 0 10px; width: 100%; }
.cl-picks__namebtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 11px 16px;
  border: 2px solid var(--ui-400);
  border-radius: 13px;
  background: rgba(155, 93, 229, 0.13);
  color: #FFFFFF;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform 140ms ease-out;
}
.cl-picks__namebtn:hover { background: rgba(155, 93, 229, 0.22); border-color: #B98CF0; color: #FFFFFF; }
.cl-picks__namebtn:active { background: var(--ui-500); border-color: var(--ui-500); transform: translateY(1px); }
.cl-picks__namebtn:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 3px; }
.cl-picks__namebtn-text { display: block; text-align: left; min-width: 0; }
.cl-picks__namebtn-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.26;
  text-transform: uppercase;
}
/* Says outright what pressing it does. */
.cl-picks__namebtn-hint {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--mist-300);
}
.cl-picks__namebtn-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ui-500);
  color: #FFFFFF;
  transition: transform var(--transition);
}
.cl-picks__namebtn:hover .cl-picks__namebtn-arrow { transform: translateX(3px); }
.cl-picks__price {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15.5px;
  color: var(--mist-50);
}
.cl-picks__price del { color: var(--mist-500); margin-right: 8px; font-size: 15px; }
.cl-picks__price ins { background: none; color: var(--ui-400); text-decoration: none; font-weight: 600; }

/* ---- dots ---- */
.cl-picks__dots { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
.cl-picks__dot {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ink-600);
  cursor: pointer;
  transition: background var(--transition), width var(--transition);
}
.cl-picks__dot.is-active { background: var(--ui-400); width: 52px; }
.cl-picks__dot:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 4px; }
/* The dot itself is 4px tall; the hit area is not. */
.cl-picks__dots { padding: 8px 0 2px; }
.cl-picks__dot { position: relative; }
.cl-picks__dot::before { content: ""; position: absolute; inset: -14px -6px; }

@media (min-width: 620px) {
  .cl-picks__slide {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    align-items: center;
    gap: 26px;
  }
  .cl-picks__art { max-width: 240px; }
  .cl-picks__body { align-items: flex-start; text-align: left; }
}

/* ============================================================
   CART — shipping address dialog replaces the calculator toggle
   ============================================================ */
.cl-am-hidden-toggle { display: none !important; }
/* WooCommerce's Update button still does the work; the dialog's Save presses
   it, so it must stay in the form but out of sight. */
.cl-am-hidden-submit {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.woocommerce .cart_totals .cl-cart-addr__btn {
  display: inline-flex;
  margin-top: 10px;
}
/* With no address yet this is the next thing to do, so it leads. */
.woocommerce .cart_totals .cl-cart-addr__btn.is-primary {
  border-width: 2px;
  border-color: var(--ui-400);
  background: rgba(155, 93, 229, 0.13);
  color: #FFFFFF;
}
.woocommerce .cart_totals .cl-cart-addr__btn.is-primary:hover {
  background: rgba(155, 93, 229, 0.22);
  border-color: #B98CF0;
}
/* The calculator's own fields, now inside the dialog, pick up the modal's
   field styling rather than the cart's. */
/* WooCommerce's cart script calls $('.shipping-calculator-form').hide() on
   init and after every AJAX cart refresh, writing display:none as an INLINE
   style. Inline beats a plain rule, so the dialog opened with an empty body —
   header and buttons, no fields. !important is the only thing that outranks an
   inline style here. */
.cl-am .shipping-calculator-form { display: block !important; }
.cl-am .shipping-calculator-form p.form-row { margin-bottom: 12px; }
.cl-am .shipping-calculator-form p:last-of-type { margin-bottom: 0; }

/* ============================================================
   CART SHIPPING ROW — the "no address yet" state
   The helper sentence and the button were landing in the narrow value column,
   right-aligned and wrapping. `tr.shipping > p` never matched them: the cell
   is display:contents, so the <p> is still a DOM child of the td, not the row.
   Descendant selectors, one centred block.
   ============================================================ */
.woocommerce .cart_totals table.shop_table tr.shipping p,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals p {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  padding: 14px 16px;
  background: var(--ink-950);
  border: 1px solid var(--ink-700);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
  color: var(--mist-300);
}
/* The button spans the panel, directly under the message it answers. */
.woocommerce .cart_totals .cl-cart-addr__btn {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
  justify-content: center;
}
/* Once an address exists the destination panel carries it and the button sits
   directly beneath, still centred. */
.woocommerce .cart_totals table.shop_table tr.shipping .woocommerce-shipping-destination,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals .woocommerce-shipping-destination {
  text-align: center;
}

/* The wrapped "enter your address" hint spans the row and centres, instead of
   dropping into the value column as an anonymous grid item. */
.woocommerce .cart_totals .cl-ship-hint,
.woocommerce-checkout .cl-ship-hint {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--ink-950);
  border: 1px solid var(--ink-700);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  color: var(--mist-300);
}

/* The calculator form is itself a grid item in the totals row, auto-placed in
   the narrow value column — so a full-width button inside it was only as wide
   as that column, not as wide as the hint box above. Span the row. */
.woocommerce .cart_totals table.shop_table tr.shipping form.woocommerce-shipping-calculator,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals form.woocommerce-shipping-calculator {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
}

/* ============================================================
   CART ADDRESS DIALOG — tidy the moved calculator markup
   ============================================================ */
/* The fieldset is a bare container inside the dialog; each field already has
   its own card, so a frame around them all is one box too many. */
/* `.woocommerce .cart_totals .shipping-calculator-form` (0,3,0) styles the
   inline calculator as a card and out-specified a plain `.cl-am` rule, so the
   dialog kept a frame around fields that each already have one. */
.cl-am .cl-am__body .shipping-calculator-form,
.woocommerce .cart_totals .cl-am .shipping-calculator-form {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
}
/* WooCommerce's Update button sits in its own .form-row. The button is
   visually hidden (the dialog's Save presses it), which left its wrapper
   rendering as an empty card. */
.cl-am .shipping-calculator-form p.form-row:has(.cl-am-hidden-submit),
.cl-am .shipping-calculator-form p:has(> button[name="calc_shipping"]) {
  display: none !important;
}
/* Form fields read left-aligned; the centring belongs to the summary panel. */
.cl-am .shipping-calculator-form p.form-row,
.cl-am .shipping-calculator-form label,
.cl-am .shipping-calculator-form .woocommerce-input-wrapper { text-align: left; }

/* ============================================================
   MOBILE MENU — a real slide
   The panel animated over 180ms with no compositing hint, and focus was moved
   into it while it was still off-screen, which made the browser snap it into
   view mid-animation. Longer, GPU-composited, and focus now waits (see nav.js).
   ============================================================ */
.cl-mobile__panel {
  transform: translate3d(100%, 0, 0);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  backface-visibility: hidden;
}
.cl-mobile[aria-hidden="false"] .cl-mobile__panel { transform: translate3d(0, 0, 0); }
.cl-mobile__overlay {
  transition: opacity 320ms ease-out;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
@media (prefers-reduced-motion: reduce) {
  .cl-mobile__panel, .cl-mobile__overlay { transition: none; }
}

/* ============================================================
   NAV ICONS
   ============================================================ */
.cl-nav-icon { flex: 0 0 auto; }
.cl-nav a, .cl-mobile__nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cl-mobile__nav a { display: flex; gap: 12px; }
.cl-mobile__nav .cl-nav-icon { color: var(--ui-400); }
.cl-nav .cl-nav-icon { opacity: 0.85; }
.cl-nav a:hover .cl-nav-icon,
.cl-nav .current-menu-item > a .cl-nav-icon { opacity: 1; }
/* Desktop carries eight items; trim the gap so icons don't force a wrap. */
@media (min-width: 1024px) and (max-width: 1300px) {
  .cl-nav a { gap: 7px; }
  .cl-nav .cl-nav-icon { width: 16px; height: 16px; }
}

/* ============================================================
   HEADER — the menu button was hard against the screen edge
   ============================================================ */
@media (max-width: 1023px) {
  .cl-header__inner { padding-inline: 20px 26px; }
  .cl-header__icons { gap: 4px; }
}

/* ============================================================
   Welcome-offer popup
   Matte, not neon. The only saturated element is the code chip.
   ============================================================ */

.cl-promo {
  position: fixed;
  inset: 0;
  z-index: 9998; /* Below the age gate (9999) — the gate must always win. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Translucent, unlike the age gate: this is a notice, not a barrier, and
     the site staying visible behind it keeps it feeling optional.
     Deliberately no backdrop-filter — it composited inconsistently in
     testing, and a blur buys almost nothing over a scrim this dark. */
  background: rgba(8, 7, 11, 0.9);
  opacity: 0;
  transition: opacity 220ms ease;
}
.cl-promo.is-visible { opacity: 1; }
.cl-promo[hidden] { display: none; }

body.cl-promo-open { overflow: hidden; }

.cl-promo__panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 40px 32px 28px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-lg);
  background: var(--ink-900);
  text-align: center;
  box-shadow: 0 24px 80px -24px rgba(0, 0, 0, 0.9);
  transform: translateY(12px) scale(0.98);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cl-promo.is-visible .cl-promo__panel { transform: translateY(0) scale(1); }
.cl-promo__panel:focus { outline: none; }

/* A single hairline of colour along the top edge. */
.cl-promo__panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ui-400), transparent);
}

.cl-promo__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(155, 93, 229, 0.30);
  border-radius: var(--radius-sm);
  background: rgba(155, 93, 229, 0.08);
  color: var(--mist-100);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.cl-promo__close:hover { color: #FFFFFF; background: rgba(155, 93, 229, 0.22); border-color: rgba(155, 93, 229, 0.55); }

.cl-promo__eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist-500);
  margin: 0 0 14px;
}

.cl-promo__amount {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 9vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--mist-50);
  margin: 0 0 10px;
}

.cl-promo__lede {
  font-size: 15px;
  color: var(--mist-300);
  margin: 0 0 22px;
}

.cl-promo__instruction {
  font-size: 13px;
  color: var(--mist-400);
  margin: 0 0 10px;
}
.cl-promo__instruction strong {
  color: var(--mist-100);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* The code chip. Dashed edge reads as "coupon" without any skeuomorphism. */
.cl-promo__code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  margin: 0 0 20px;
  border: 1px dashed rgba(155, 93, 229, 0.45);
  border-radius: var(--radius-md);
  background: rgba(155, 93, 229, 0.07);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.cl-promo__code:hover {
  background: rgba(155, 93, 229, 0.13);
  border-color: rgba(155, 93, 229, 0.7);
}
.cl-promo.is-copied .cl-promo__code {
  border-style: solid;
  border-color: var(--ui-500);
}

.cl-promo__code-text {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mist-50);
  /* Must stay selectable: it is the manual-copy fallback when the
     clipboard API is refused. */
  -webkit-user-select: text;
  user-select: text;
}
.cl-promo__code-hint {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mist-500);
}
.cl-promo.is-copied .cl-promo__code-hint { color: var(--ui-400); }

.cl-promo__cta {
  display: flex;
  width: 100%;
  margin: 0 0 4px;
}

.cl-promo__dismiss {
  display: block;
  width: 100%;
  padding: 12px 0 4px;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mist-500);
  cursor: pointer;
  transition: color var(--transition);
}
.cl-promo__dismiss:hover { color: var(--mist-300); }

.cl-promo__terms {
  padding-top: 16px;
  margin: 12px 0 0;
  border-top: 1px solid var(--ink-700);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.8;
  color: var(--mist-500);
}

@media (prefers-reduced-motion: reduce) {
  .cl-promo,
  .cl-promo__panel { transition: none; }
  .cl-promo__panel { transform: none; }
}

/* ============================================================
   ADD TO CART ON THE CARD
   Replaces WooCommerce's "Select options" link. One strength
   adds straight away; several reveal a picker on the card.
   ============================================================ */

.cl-atc { margin: 14px 0 0; width: 100%; }

.woocommerce ul.products li.product .cl-atc__btn {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
  letter-spacing: 0.12em;
}

/* Outlined at rest, filled only while pressed — same rule as every
   other button on the site. */
.woocommerce ul.products li.product .cl-atc__btn,
.cl-atc__btn {
  background: transparent !important;
  border: 1px solid rgba(155, 93, 229, 0.45) !important;
  color: var(--mist-50) !important;
}
.woocommerce ul.products li.product .cl-atc__btn:hover,
.cl-atc__btn:hover {
  background: rgba(155, 93, 229, 0.12) !important;
  border-color: var(--ui-400) !important;
}
.woocommerce ul.products li.product .cl-atc__btn:active,
.cl-atc__btn:active {
  background: var(--ui-600) !important;
  border-color: var(--ui-600) !important;
}

.cl-atc__btn.is-loading { opacity: 0.6; cursor: progress; }
.cl-atc__btn.is-error {
  border-color: rgba(220, 90, 90, 0.7) !important;
  color: #F0B4B4 !important;
  font-size: 11px;
}

.cl-atc--out .cl-atc__btn,
.woocommerce ul.products li.product .cl-atc--out .cl-atc__btn {
  border-color: var(--ink-600) !important;
  color: var(--mist-500) !important;
  cursor: not-allowed;
}

/* Strength picker. Expands in flow rather than floating over the grid —
   an absolutely positioned panel gets clipped by the card's own overflow. */
.cl-atc__opts {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-md);
  background: var(--ink-800);
  /*
   * The strength picker opens, it does not appear.
   *
   * This was toggled with the `hidden` attribute against `display: none`, and
   * display cannot be animated — so the panel snapped into existence in a
   * single frame. After a tap that already takes a moment to register, that
   * reads as the page freezing and then jumping (Noah, 2026-09-23: "it'll stop
   * and then the pop-up will come to let me choose the milligrams").
   *
   * max-height carries the height change, opacity and transform carry the
   * feel. 260ms with an ease-out curve: fast enough to follow the finger,
   * long enough to be seen as movement rather than a flash.
   */
  max-height: 340px;
  overflow: hidden;
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    max-height 260ms cubic-bezier(0.2, 0.9, 0.3, 1),
    opacity 180ms ease-out,
    transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1),
    margin-top 260ms cubic-bezier(0.2, 0.9, 0.3, 1),
    padding 260ms cubic-bezier(0.2, 0.9, 0.3, 1),
    border-width 260ms linear,
    visibility 0s linear 0s;
}
/* `display: block` overrides the browser's own rule for [hidden]; without it
   there is nothing to animate from. The element still takes no space, is not
   focusable and is hidden from screen readers while closed. */
.cl-atc__opts[hidden] {
  display: block;
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
  /* stay visible for the length of the collapse, then go */
  transition:
    max-height 220ms cubic-bezier(0.4, 0, 0.6, 1),
    opacity 140ms ease-in,
    transform 220ms cubic-bezier(0.4, 0, 0.6, 1),
    margin-top 220ms cubic-bezier(0.4, 0, 0.6, 1),
    padding 220ms cubic-bezier(0.4, 0, 0.6, 1),
    border-width 220ms linear,
    visibility 0s linear 220ms;
}
@media (prefers-reduced-motion: reduce) {
  .cl-atc__opts, .cl-atc__opts[hidden] { transition: none; }
}

.cl-atc__opts-label {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mist-500);
}

.cl-atc__opts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cl-atc__opt {
  flex: 1 1 auto;
  /* 46px, not 38. These are the buttons someone taps to choose a strength —
     the last step before the sale — and they were below the 44px a fingertip
     needs, which is what made picking an mg feel fiddly (measured 2026-09-23).
     The text is unchanged; only the target grew. */
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(155, 93, 229, 0.4);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--mist-50);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.cl-atc__opt:hover { background: rgba(155, 93, 229, 0.14); border-color: var(--ui-400); }
/* a phone has no hover, so the press itself has to show */
@media (hover: none) {
  .cl-atc__opt { font-size: 13px; }
}
.cl-atc__opt:active { background: var(--ui-600); border-color: var(--ui-600); }

/* ============================================================
   SLIDE-OVER CART
   ============================================================ */

.cl-drawer {
  position: fixed;
  inset: 0;
  z-index: 9997; /* Under the promo popup (9998) and age gate (9999). */
}
.cl-drawer[hidden] { display: none; }

body.cl-drawer-open { overflow: hidden; }

.cl-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 11, 0.72);
  opacity: 0;
  transition: opacity 260ms ease;
}
.cl-drawer.is-open .cl-drawer__scrim { opacity: 1; }

.cl-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  /* dvh, not vh — iOS Safari's toolbar makes vh taller than the visible area
     and the checkout button ends up under it. */
  height: 100dvh;
  background: var(--ink-900);
  border-left: 1px solid var(--ink-600);
  box-shadow: -24px 0 80px -24px rgba(0, 0, 0, 0.9);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cl-drawer.is-open .cl-drawer__panel { transform: translateX(0); }
.cl-drawer__panel:focus { outline: none; }

.cl-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--ink-700);
  flex: 0 0 auto;
}

.cl-drawer__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mist-50);
}

.cl-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(155, 93, 229, 0.30);
  border-radius: var(--radius-sm);
  background: rgba(155, 93, 229, 0.08);
  color: var(--mist-100);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.cl-drawer__close:hover { color: #FFFFFF; background: rgba(155, 93, 229, 0.22); border-color: rgba(155, 93, 229, 0.55); }

/* The refreshable region: scrolls, and holds the footer at its end. */
.cl-drawer__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cl-drawer__ship { padding: 16px 20px 0; }

.cl-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex: 1 1 auto;
  padding: 40px 20px;
  text-align: center;
}
.cl-drawer__emptyTitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-400);
}

.cl-drawer__lines {
  list-style: none;
  margin: 0;
  padding: 4px 20px;
  flex: 1 1 auto;
}

.cl-drawer__line {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink-700);
}
.cl-drawer__line:last-child { border-bottom: 0; }

.cl-drawer__thumb img {
  width: 56px;
  height: 56px;
  /* contain, never crop — the label has to stay readable. */
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--ink-950);
  display: block;
}

.cl-drawer__lineBody { min-width: 0; }

.cl-drawer__lineName {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mist-50);
}

.cl-drawer__qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cl-drawer__step {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mist-300);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cl-drawer__step:hover { background: var(--ink-700); color: var(--mist-50); }
.cl-drawer__step:active { background: var(--ui-600); color: #fff; }
.cl-drawer__step:disabled { opacity: 0.4; cursor: default; }

.cl-drawer__qtyVal {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--mist-50);
}

.cl-drawer__lineEnd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cl-drawer__linePrice {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--mist-50);
  white-space: nowrap;
}

.cl-drawer__remove {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-500);
  cursor: pointer;
  transition: color var(--transition);
}
.cl-drawer__remove:hover { color: #E2A0A0; }

.cl-drawer__foot {
  flex: 0 0 auto;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ink-700);
  background: var(--ink-900);
  position: sticky;
  bottom: 0;
  /* Above the line items: their thumbnails are z-index 1 (for the glow), and
     without this they scrolled up OVER the totals and covered "SUBTOTAL". */
  z-index: 3;
}

.cl-drawer__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--mist-300);
}
.cl-drawer__row--discount { color: var(--ui-400); }
/* coupon maths: Subtotal, coupon, then a ruled Total (2026-09-21) */
.cl-drawer__row--sub,
.cl-drawer__row--discount { font-size: 15px; font-weight: 600; }
.cl-drawer__row--sub { color: var(--mist-200, #D9D4E0); }
.cl-drawer__row--discount ~ .cl-drawer__row--total {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cl-drawer__row--total {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mist-50);
}

.cl-drawer__note {
  margin: 0 0 14px;
  font-size: 11px;
  color: var(--mist-500);
}

.cl-drawer .cl-drawer__cta {
  display: flex;
  width: 100%;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cl-drawer__panel,
  .cl-drawer__scrim { transition: none; }
}


/* ============================================================
   CHECKOUT MODAL
   Frames the real checkout page; the panel is chrome only.
   ============================================================ */

.cl-co {
  position: fixed;
  inset: 0;
  z-index: 9996; /* Under the cart drawer, promo popup and age gate. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cl-co[hidden] { display: none; }

body.cl-co-open { overflow: hidden; }

.cl-co__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 11, 0.86);
  opacity: 0;
  transition: opacity 240ms ease;
}
.cl-co.is-open .cl-co__scrim { opacity: 1; }

.cl-co__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* dvh — iOS Safari's toolbar makes vh taller than what is visible, which
     would put the place-order button under it. */
  height: 100dvh;
  background: var(--ink-950);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease;
}
.cl-co.is-open .cl-co__panel { transform: translateY(0); opacity: 1; }

.cl-co__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ink-700);
  background: var(--ink-900);
}

.cl-co__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mist-50);
}

.cl-co__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--mist-500);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.cl-co__close:hover { color: var(--mist-50); background: var(--ink-800); }

.cl-co__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--ink-950);
}

.cl-co__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--ink-950);
}

.cl-co__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--ink-950);
  color: var(--mist-400);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cl-co__loading[hidden] { display: none; }

.cl-co__spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink-600);
  border-top-color: var(--ui-400);
  border-radius: 50%;
  animation: cl-co-spin 800ms linear infinite;
}

@keyframes cl-co-spin { to { transform: rotate(360deg); } }

@media (min-width: 768px) {
  .cl-co { padding: 28px; }
  .cl-co__panel {
    width: min(760px, 100%);
    height: min(880px, 100%);
    border: 1px solid var(--ink-600);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-co__panel,
  .cl-co__scrim { transition: none; }
  .cl-co__spinner { animation: none; }
}

/* The stripped checkout rendered inside the frame. */
body.cl-embed {
  background: var(--ink-950);
  padding: 0;
}
body.cl-embed .cl-embed__main {
  padding: 22px 18px 48px;
}
@media (min-width: 768px) {
  body.cl-embed .cl-embed__main { padding: 28px 30px 56px; }
}

/* ============================================================
   FIXES — desktop nav wrap, Core Picks width, sticky cart bar,
   and the cut-out hero vials
   ============================================================ */

/* Nav: eight items with icons were breaking mid-label ("TESTING &" /
   "COAS"). Never wrap a label; tighten the rhythm instead. */
.cl-nav a { white-space: nowrap; }
.cl-nav li { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1500px) {
  .cl-nav { gap: 16px; }
  .cl-nav a { font-size: 11.5px; letter-spacing: 0.07em; gap: 6px; }
  .cl-nav .cl-nav-icon { width: 15px; height: 15px; }
}

/* Core Picks: the panel was running the full container width, which left the
   name bar stretched across empty space with the vial stranded at one end.
   Cap it and centre it so the slide reads as one object. */
.cl-picks__panel {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 620px) {
  .cl-picks__slide {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 28px;
    justify-content: center;
  }
  .cl-picks__art { max-width: 200px; }
}
/* The "View product" bar filled the row; let it size to its content. */
.cl-picks__body { max-width: 460px; }

/* Sticky cart bar — sleeker, with the cart mark and the free-shipping
   distance the drawer is already reporting. */
.cl-sticky-cart {
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  background: rgba(17, 21, 28, 0.94);
  background: linear-gradient(180deg, rgba(23, 21, 28, 0.97), rgba(11, 9, 16, 0.98));
  border-top: 1px solid rgba(155, 93, 229, 0.22);
  box-shadow: 0 -18px 40px -28px rgba(0, 0, 0, 0.9);
}
.cl-sticky-cart__inner {
  gap: 14px;
  padding: 0 16px;
}

.cl-sticky-cart__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(155, 93, 229, 0.28);
  background: rgba(155, 93, 229, 0.08);
  color: var(--mist-50);
}
.cl-sticky-cart__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ui-500);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

.cl-sticky-cart__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.cl-sticky-cart__count {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-50);
}
.cl-sticky-cart__ship {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--mist-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-sticky-cart__ship[hidden] { display: none; }

.cl-sticky-cart__btn {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid rgba(155, 93, 229, 0.45);
  background: transparent;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.cl-sticky-cart__btn--ghost {
  border-width: 1px;
  border-color: var(--ink-600);
  background: transparent;
  color: var(--mist-300);
}
.cl-sticky-cart__btn--ghost:hover { border-color: var(--ui-400); color: var(--mist-50); }

@media (max-width: 560px) {
  /* The shipping line is the first thing to go when there is no room. */
  .cl-sticky-cart__btn { padding: 0 12px; font-size: 12px; }
  .cl-sticky-cart__ship { font-size: 12px; }
}


/* Sticky bar: free-shipping progress, mirroring the drawer's own figure. */
.cl-sticky-cart__track {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--ink-700);
  overflow: hidden;
}
.cl-sticky-cart__track[hidden] { display: none; }

.cl-sticky-cart__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ui-600), var(--ui-400));
  transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Unlocked: same green the cart's own bar uses, so the two never disagree
   about what "done" looks like. */
.cl-sticky-cart.is-shipping-free .cl-sticky-cart__fill {
  background: linear-gradient(90deg, #2FA96D, #3DD68C);
  box-shadow: 0 0 10px rgba(61, 214, 140, 0.55),
              0 0 22px rgba(61, 214, 140, 0.28);
}
.cl-sticky-cart.is-shipping-free .cl-sticky-cart__ship { color: #3DD68C; }

/* Both progress bars glow, and identically. The track is clipped, so the
   glow is drawn by an inset shadow on the fill plus a soft cap at its end —
   an outer box-shadow would be cut off by the track's overflow. */
.cl-sticky-cart__track,
.cl-ship__track {
  overflow: visible;
  box-shadow: inset 0 0 0 1px rgba(155, 93, 229, 0.10);
}
.cl-sticky-cart__fill,
.cl-ship__fill {
  background: linear-gradient(90deg, var(--ui-500), var(--ui-400));
  box-shadow: 0 0 10px rgba(155, 93, 229, 0.55),
              0 0 22px rgba(123, 63, 178, 0.35);
}
.cl-ship.is-complete .cl-ship__fill {
  box-shadow: 0 0 10px rgba(61, 214, 140, 0.55),
              0 0 22px rgba(61, 214, 140, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .cl-sticky-cart__fill { transition: none; }
}

/* ============================================================
   STICKY CART BAR — richer preview
   ============================================================ */

.cl-sticky-cart__inner { gap: 16px; }

/* Holds either the vial from the cart or the cart glyph as a fallback. */
.cl-sticky-cart__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(155, 93, 229, 0.30);
  background: radial-gradient(circle at 50% 35%, rgba(123, 63, 178, 0.22), rgba(17, 16, 21, 0.9) 70%);
  overflow: visible;
}
.cl-sticky-cart__vial[hidden],
.cl-sticky-cart__cart[hidden] { display: none; }

@keyframes cl-sticky-vial {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.cl-sticky-cart__badge {
  top: -7px;
  right: -7px;
  box-shadow: 0 0 0 2px rgba(11, 9, 16, 0.95),
              0 0 12px rgba(155, 93, 229, 0.7);
}

.cl-sticky-cart__count {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Thicker, and lit from within. */
.cl-sticky-cart__track {
  height: 7px;
  margin-top: 8px;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(155, 93, 229, 0.16);
}
.cl-sticky-cart__fill {
  box-shadow: 0 0 12px rgba(155, 93, 229, 0.7),
              0 0 28px rgba(123, 63, 178, 0.45);
}

/* Buttons: the ghost recedes, Checkout is the one lit thing on the bar. */
.cl-sticky-cart__actions { gap: 10px; align-items: center; }

.cl-sticky-cart__btn {
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 12px;
  letter-spacing: 0.11em;
  transition: background 160ms ease, border-color 160ms ease,
              box-shadow 160ms ease, transform 90ms ease;
}
.cl-sticky-cart__btn:active { transform: translateY(1px); }

.cl-sticky-cart__btn--ghost {
  border: 1px solid rgba(155, 93, 229, 0.28);
  background: rgba(255, 255, 255, 0.02);
  color: var(--mist-300);
}
.cl-sticky-cart__btn--ghost:hover {
  border-color: rgba(155, 93, 229, 0.6);
  background: rgba(155, 93, 229, 0.10);
  color: var(--mist-50);
}

.cl-sticky-cart__btn--go {
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--ui-500), var(--ui-400));
  color: #fff;
  box-shadow: 0 0 18px rgba(123, 63, 178, 0.55),
              0 6px 18px -8px rgba(0, 0, 0, 0.8);
}
.cl-sticky-cart__btn--go:hover {
  box-shadow: 0 0 26px rgba(155, 93, 229, 0.75),
              0 8px 22px -8px rgba(0, 0, 0, 0.8);
  color: #fff;
}
.cl-sticky-cart__btn--go svg { transition: transform 160ms ease; }
.cl-sticky-cart__btn--go:hover svg { transform: translateX(3px); }

@media (max-width: 600px) {
  .cl-sticky-cart__inner { gap: 12px; }
  .cl-sticky-cart__icon { width: 44px; height: 44px; }
  .cl-sticky-cart__vial { width: 38px; height: 38px; }
  .cl-sticky-cart__btn { min-height: 48px; padding: 0 14px; font-size: 12px; }
  /* The ghost's label goes before the primary action does. */
  .cl-sticky-cart__btn--ghost span { display: none; }
  .cl-sticky-cart__btn--ghost { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-sticky-cart__vial { animation: none; }
}

/* ============================================================
   CONTACT — top bar, footer card, inline help
   ============================================================ */

.cl-topbar {
  background: linear-gradient(90deg, rgba(43, 23, 63, 0.9), rgba(17, 16, 21, 0.9));
  border-bottom: 1px solid rgba(155, 93, 229, 0.18);
}
.cl-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  padding-top: 9px;
  padding-bottom: 9px;
  text-align: center;
}
.cl-topbar__label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-400);
}
.cl-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mist-50);
  white-space: nowrap;
}
.cl-topbar__link:hover { color: var(--ui-400); }
.cl-topbar__link svg { color: var(--ui-400); flex: 0 0 auto; }
.cl-topbar__sep { color: var(--mist-500); }

@media (max-width: 720px) {
  /* The email is long; the phone is the one that has to survive. */
  .cl-topbar__label { font-size: 10px; letter-spacing: 0.1em; }
  .cl-topbar__link--email,
  .cl-topbar__sep { display: none; }
}

/* The block people scroll to the bottom for. */
.cl-contact {
  padding: 30px 24px;
  margin: 0 0 40px;
  border: 1px solid rgba(155, 93, 229, 0.24);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(123, 63, 178, 0.16), transparent 60%),
    var(--ink-900);
  text-align: center;
}
.cl-contact--page { margin-bottom: 32px; }

.cl-contact__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ui-400);
}
.cl-contact__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.26;
  color: var(--mist-50);
}
.cl-contact__lede {
  max-width: 60ch;
  margin: 0 auto 22px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--mist-300);
}

.cl-contact__links {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}
@media (min-width: 620px) {
  .cl-contact__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-contact { padding: 34px 32px; }
}

.cl-contact__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(155, 93, 229, 0.3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
  transition: background var(--transition), border-color var(--transition),
              transform 90ms ease;
}
.cl-contact__link:hover {
  background: rgba(155, 93, 229, 0.12);
  border-color: var(--ui-400);
}
.cl-contact__link:active { transform: translateY(1px); }

.cl-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(123, 63, 178, 0.22);
  color: var(--ui-400);
}

.cl-contact__linkBody { min-width: 0; }
.cl-contact__label {
  display: block;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist-500);
  margin-bottom: 3px;
}
.cl-contact__value {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mist-50);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-contact__note {
  max-width: 68ch;
  margin: 0 auto;
  padding-top: 16px;
  border-top: 1px solid var(--ink-700);
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist-500);
}

/* Compact line: drawer and checkout. */
.cl-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ink-700);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--mist-500);
  text-align: center;
}
.cl-help__label { color: var(--mist-400); }
.cl-help__link {
  color: var(--ui-400);
  font-weight: 600;
  white-space: nowrap;
}
.cl-help__link:hover { color: var(--mist-50); }
.cl-help__sep { color: var(--ink-500); }

/* On the checkout page it sits under the form, so give it room. */
.woocommerce-checkout .cl-help { margin-top: 26px; padding-bottom: 8px; }

/* ============================================================
   HOMEPAGE HERO
   Three depth layers: atmosphere + molecules behind, vials in
   the middle, rock in front. Matte throughout — the vials are
   the brightest objects and nothing behind them glows.
   ============================================================ */

.cl-hero2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px 0 40px;
  background:
    radial-gradient(circle at 68% 38%,
      rgba(78, 37, 112, 0.20) 0%,
      rgba(43, 23, 63, 0.10) 35%,
      rgba(8, 7, 11, 0) 68%),
    var(--ink-950);
}

/* --- scene ------------------------------------------------- */

.cl-scene {
  position: absolute;
  inset: 0;
  /* Decoration must never intercept a click meant for a vial. */
  pointer-events: none;
  z-index: 0;
}

.cl-scene__mol {
  position: absolute;
  top: 2%;
  right: -4%;
  width: min(520px, 52%);
  height: auto;
  opacity: 0.08;
  filter: blur(0.6px);
}

/* The one soft atmospheric light, behind the vials — not around them. */
.cl-hero2__atmos {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 118%;
  height: 92%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(ellipse,
    rgba(123, 63, 178, 0.12) 0%,
    rgba(43, 23, 63, 0.06) 40%,
    transparent 72%);
}

.cl-hero2__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* --- copy -------------------------------------------------- */

.cl-hero2__copy { text-align: center; }

.cl-hero2__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 9vw, 3.4rem);
}
.cl-hero2__titleTop,
.cl-hero2__titleBottom { display: block; }
.cl-hero2__titleTop { color: var(--mist-50); }
.cl-hero2__titleBottom {
  background: linear-gradient(90deg, #7B3FB2, #9B5DE5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cl-hero2__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 340px;
  margin: 0 auto 30px;
}

.cl-hero2 .cl-hero2__shop{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 13px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 90ms ease, box-shadow 160ms ease,
              background 160ms ease, border-color 160ms ease;
}
.cl-hero2 .cl-hero2__shop {
  background: linear-gradient(135deg, #6D35A4, #8D4BD0);
  color: #fff;
  border: 0;
  /* Subtle, not a bloom. */
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.85);
}
.cl-hero2 .cl-hero2__shop:hover { box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.9); }
.cl-hero2 .cl-hero2__shop svg { transition: transform 160ms ease; }
.cl-hero2 .cl-hero2__shop:hover svg { transform: translateX(3px); }
.cl-hero2 .cl-hero2__shop:active{ transform: translateY(1px); }

/* --- trust row --------------------------------------------- */

.cl-hero2__trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cl-hero2__trustItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  text-align: center;
  border-left: 1px solid rgba(155, 93, 229, 0.35);
}
.cl-hero2__trustItem:first-child { border-left: 0; }
.cl-hero2__trustIcon { color: #8D4BD0; display: block; }
.cl-hero2__trustText {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--mist-50);
}

/* --- the three vials --------------------------------------- */

.cl-hero2__stageWrap {
  position: relative;
  order: -1; /* Mobile: vials sit under the copy; reordered on desktop. */
  margin-bottom: 8px;
}

.cl-hero2__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(2px, 1.5vw, 22px);
  min-height: clamp(215px, 46vw, 300px);
}

.cl-vial {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
}
.cl-vial[hidden] { display: none; }

.cl-vial__shot { display: block; width: 100%; }

.cl-vial__img {
  display: block;
  width: 100%;
  height: auto;
  /* contain — the official photography is never cropped. */
  object-fit: contain;
  /* A contact shadow, so a cut-out vial is not pasted onto the scene. */
  filter: none;
}

/* Rotation lives on the anchor and the float on the image, so the animation
   cannot overwrite the tilt. */
.cl-vial--left {
  width: clamp(84px, 20vw, 168px);
  transform: rotate(-7deg) translateY(18px);
}
.cl-vial--center {
  width: clamp(100px, 24vw, 200px);
  z-index: 2;
}
.cl-vial--right {
  width: clamp(84px, 20vw, 168px);
  transform: rotate(7deg) translateY(18px);
}

/* Slow, zero-gravity. Negative delays start each one mid-cycle so they are
   never in step, without a stagger you can see on load. */
.cl-vial--left   .cl-vial__img { animation: cl-float-l 6.5s ease-in-out -1.2s infinite; }
.cl-vial--center .cl-vial__img { animation: cl-float-c 7.5s ease-in-out -3.1s infinite; }
.cl-vial--right  .cl-vial__img { animation: cl-float-r 6.8s ease-in-out -4.4s infinite; }

@keyframes cl-float-l { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes cl-float-c { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes cl-float-r { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.cl-vial__pill {
  display: inline-block;
  max-width: 100%;
  padding: 8px 15px;
  border: 1px solid rgba(155, 93, 229, 0.65);
  border-radius: 14px;
  background: rgba(10, 9, 14, 0.88);
  color: #F5F3F7;
  font-family: var(--font-display);
  font-size: clamp(9.5px, 2.4vw, 12px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--transition), border-color var(--transition);
}
/* Counter-rotated so the label reads level under a tilted vial. */
.cl-vial--left  .cl-vial__pill { transform: rotate(7deg); }
.cl-vial--right .cl-vial__pill { transform: rotate(-7deg); }

.cl-vial:hover .cl-vial__pill { background: rgba(123, 63, 178, 0.35); }
.cl-vial:focus-visible { outline: none; }
.cl-vial:focus-visible .cl-vial__pill {
  outline: 2px solid var(--ui-ring);
  outline-offset: 3px;
}

/* --- desktop: copy left ~40%, vials right ~60% -------------- */

@media (min-width: 960px) {
  .cl-hero2 { padding: 40px 0 56px; }

  .cl-hero2__inner {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }

  .cl-hero2__copy {
    flex: 0 1 40%;
    text-align: left;
  }
  .cl-hero2__cta { flex-direction: row; max-width: none; margin-left: 0; }
  .cl-hero2__trust { gap: 6px; }

  .cl-hero2__stageWrap {
    flex: 1 1 60%;
    order: 0;
    margin-bottom: 0;
  }
  .cl-hero2__stage {
    min-height: 400px;
    gap: clamp(8px, 2vw, 30px);
  }
  .cl-vial--left,
  .cl-vial--right { width: clamp(150px, 15vw, 196px); }
  .cl-vial--center { width: clamp(180px, 18vw, 234px); }

  .cl-scene__mol { width: min(520px, 40%); opacity: 0.09; }
}

/* --- mobile: less decoration, recomposed ------------------- */

@media (max-width: 640px) {
  /* Molecules are the first thing to go; at this width they only add noise
     behind the headline. */
  .cl-scene__mol { display: none; }
  .cl-hero2__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
  .cl-hero2__trustItem:nth-child(3) { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-vial__img { animation: none; }
}

/* ============================================================
   CHECKOUT INSIDE THE MODAL — readability
   Scoped to .cl-embed so the standalone checkout page, which is
   the no-JS fallback and a proven path, is left alone.
   ============================================================ */

body.cl-embed .cl-embed__main {
  max-width: 560px;
  margin: 0 auto;
}

/* The research-use notice is required, but it was the loudest thing on the
   screen: all-caps at wide tracking reads as shouting and is slow to scan.
   Keep it, quiet it. */
body.cl-embed .cl-ruo-notice {
  padding: 10px 14px;
  border: 0;
  border-left: 2px solid rgba(155, 93, 229, 0.5);
  border-radius: 0 6px 6px 0;
  background: rgba(155, 93, 229, 0.06);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--mist-400);
  margin-bottom: 18px;
}


/* One level of boxing, not three. */
body.cl-embed .col2-set,
body.cl-embed .woocommerce-billing-fields,
body.cl-embed .woocommerce-shipping-fields {
  padding: 0;
  border: 0;
  background: none;
}

/* Section headings: readable weight, less tracking. */
body.cl-embed h3,
body.cl-embed .cl-am__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-50);
  margin: 0 0 4px;
}

/* Field labels were small caps at wide tracking — the slowest possible thing
   to read above an input. */
body.cl-embed .woocommerce-checkout label,
body.cl-embed .form-row label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--mist-300);
  margin-bottom: 6px;
}

body.cl-embed .woocommerce-checkout input[type="text"],
body.cl-embed .woocommerce-checkout input[type="email"],
body.cl-embed .woocommerce-checkout input[type="tel"],
body.cl-embed .woocommerce-checkout textarea,
body.cl-embed .woocommerce-checkout .select2-selection {
  font-size: 16px;   /* 16px exactly — it is the spec size AND the iOS no-zoom threshold */
  line-height: 1.5;
}

body.cl-embed .form-row { margin-bottom: 14px; }

/* Breathing room between the three things being asked for. */
body.cl-embed .cl-am,
body.cl-embed .woocommerce-checkout-review-order {
  margin-top: 22px;
}

body.cl-embed .cl-help {
  margin-top: 22px;
  font-size: 12px;
}

/* ============================================================
   HEADER — the logo must never be the thing that gives way
   Making the nav nowrap removed its ability to wrap to a second
   line, so flex took the space out of the logo instead and
   squeezed it to 0px wide. The logo is now rigid; the nav is
   what flexes.
   ============================================================ */

.cl-header__inner .cl-logo {
  flex: 0 0 auto;
  min-width: 0;
}
.cl-header__inner .cl-logo img,
.cl-header__inner .cl-logo__img {
  flex: 0 0 auto;
  width: auto;
  min-width: 118px;
  max-width: none;
}

.cl-header__inner .cl-nav {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
.cl-header__inner .cl-header__icons { flex: 0 0 auto; }

/* Between the breakpoint and a comfortable desktop there are eight labelled
   items to fit; tighten before anything is allowed to collapse. */
@media (min-width: 1024px) and (max-width: 1320px) {
  .cl-header__inner .cl-nav { gap: 12px; }
  .cl-header__inner .cl-nav a { font-size: 10.5px; letter-spacing: 0.05em; gap: 5px; }
  .cl-header__inner .cl-nav .cl-nav-icon { width: 14px; height: 14px; }
}

/* ============================================================
   PRODUCT CARDS — floating cut-out vials
   ============================================================ */

.cl-cardimg {
  display: block;
  position: relative;
  width: 100%;
}
.cl-cardimg__img {
  display: block;
  width: 100%;
  height: auto;
  /* contain — the label is never cropped. */
  object-fit: contain;
  filter: none;
  animation: cl-card-float 7s ease-in-out infinite;
}

/* Staggered by position so a grid of vials never bobs in unison. */
.woocommerce ul.products li.product:nth-child(4n+1) .cl-cardimg__img { animation-delay: -0.4s; animation-duration: 6.6s; }
.woocommerce ul.products li.product:nth-child(4n+2) .cl-cardimg__img { animation-delay: -2.2s; animation-duration: 7.4s; }
.woocommerce ul.products li.product:nth-child(4n+3) .cl-cardimg__img { animation-delay: -3.9s; animation-duration: 6.9s; }
.woocommerce ul.products li.product:nth-child(4n+4) .cl-cardimg__img { animation-delay: -5.1s; animation-duration: 7.8s; }

@keyframes cl-card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-cardimg__img { animation: none; }
}

/* ============================================================
   CHECKOUT BUTTONS — a little life, no flashing
   A slow sheen crossing the face, plus a breathing shadow. Not
   a pulse on the button itself: scaling a primary action under
   a cursor makes it feel unstable to click.
   ============================================================ */

.cl-drawer__cta,
.cl-sticky-cart__btn--go {
  position: relative;
  overflow: hidden;
  animation: cl-cta-breathe 3.6s ease-in-out infinite;
}

.cl-drawer__cta::after,
.cl-sticky-cart__btn--go::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 100%);
  transform: skewX(-18deg);
  animation: cl-cta-sheen 3.6s ease-in-out infinite;
}

@keyframes cl-cta-sheen {
  0%       { left: -60%; }
  55%, 100% { left: 130%; }
}

@keyframes cl-cta-breathe {
  0%, 100% { box-shadow: 0 0 14px rgba(123, 63, 178, 0.40), 0 6px 18px -8px rgba(0,0,0,0.8); }
  50%      { box-shadow: 0 0 24px rgba(155, 93, 229, 0.70), 0 6px 18px -8px rgba(0,0,0,0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-drawer__cta,
  .cl-sticky-cart__btn--go { animation: none; }
  .cl-drawer__cta::after,
  .cl-sticky-cart__btn--go::after { display: none; }
}

/* ============================================================
   HERO SCENE — motion
   Everything here is slow enough to read as atmosphere rather
   than animation: the fastest cycle is 22s. Nothing flashes,
   nothing pulses, and the vials stay the only sharp thing.
   ============================================================ */

.cl-scene__mol {
  transform-origin: 60% 40%;
  animation: cl-mol-drift 46s ease-in-out infinite;
}

@keyframes cl-mol-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33%      { transform: translate3d(-14px, 10px, 0) rotate(1.1deg); }
  66%      { transform: translate3d(9px, -8px, 0) rotate(-0.8deg); }
}

/* The atmospheric light breathes — the single strongest cue that the scene
   is alive, and it never touches the vials themselves. */
.cl-hero2__atmos {
  animation: cl-atmos-breathe 22s ease-in-out infinite;
}

@keyframes cl-atmos-breathe {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.09); }
}

/* A few motes of dust in the light. Two layers at different speeds so the
   field has depth; both are almost invisible by design. */
.cl-scene::before,
.cl-scene::after {
  content: "";
  position: absolute;
  inset: -10% 0 0;
  pointer-events: none;
  background-repeat: repeat;
}
.cl-scene::before {
  background-image:
    radial-gradient(circle, rgba(200, 170, 240, 0.55) 0 1.1px, transparent 1.6px),
    radial-gradient(circle, rgba(155, 93, 229, 0.40) 0 1px, transparent 1.5px);
  background-size: 340px 300px, 520px 420px;
  background-position: 0 0, 160px 90px;
  opacity: 0.30;
  animation: cl-motes-a 38s linear infinite;
}
.cl-scene::after {
  background-image:
    radial-gradient(circle, rgba(245, 243, 247, 0.35) 0 1px, transparent 1.4px);
  background-size: 700px 560px;
  opacity: 0.22;
  animation: cl-motes-b 64s linear infinite;
}

@keyframes cl-motes-a {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-34px, 46px, 0); }
}
@keyframes cl-motes-b {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(48px, 38px, 0); }
}

@media (max-width: 640px) {
  /* Fewer moving layers on a phone — this is the cheapest thing to drop. */
  .cl-scene::after { display: none; }
  .cl-scene::before { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-scene__mol,
  .cl-hero2__atmos,
  .cl-scene::before,
  .cl-scene::after { animation: none; }
}

/* ============================================================
   SITE BACKGROUND
   One fixed plate behind the whole site, drifting slowly.
   The scrim above it is what keeps text readable — the plate
   itself is bright enough in the middle to ruin body copy if
   it were shown at full strength.
   ============================================================ */

/* The base colour moves to <html> so the fixed plate can sit behind <body>
   without being painted over by it. */
html { background: var(--ink-950); }
body { background: transparent; }

.cl-bg {
  position: fixed;
  /* Oversized, so the drift never exposes an edge. */
  inset: -5%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.cl-bg__plate {
  position: absolute;
  inset: 0;
  background-image: var(--cl-bg-sm);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 0.30;
  will-change: transform;
  animation: cl-bg-drift 96s ease-in-out infinite;
}

@media (min-width: 900px) {
  .cl-bg__plate { background-image: var(--cl-bg-md); }
}
@media (min-width: 1800px) {
  .cl-bg__plate { background-image: var(--cl-bg-lg); }
}

/* Darker at the top where the header and headlines live, easing off lower
   down so the rock is actually visible. */
.cl-bg__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8, 7, 11, 0.86) 0%,
      rgba(8, 7, 11, 0.70) 38%,
      rgba(8, 7, 11, 0.82) 100%);
}

@keyframes cl-bg-drift {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0); }
  50%      { transform: scale(1.10) translate3d(-1.6%, -1.2%, 0); }
}

/* Sections that used to sit on flat black become slightly translucent, so the
   plate reads through the page instead of only in the gaps. Anything holding
   text keeps enough opacity to stay legible. */
.cl-hero2 { background: transparent; }

/* Cards stay nearly solid. At 0.72 the rock plate read through each one as a
   textured rectangle behind the vial — exactly the backdrop the cut-outs were
   made to remove. The plate belongs between sections, not inside them. */
.woocommerce ul.products li.product {
  background-color: rgba(15, 14, 19, 0.96);
}

.cl-intent,
.cl-picks,
.cl-footer {
  background-color: rgba(17, 16, 21, 0.86);
}

.cl-trustbar,
.cl-ticker {
  background-color: rgba(11, 9, 16, 0.82);
}

@media (prefers-reduced-motion: reduce) {
  .cl-bg__plate { animation: none; }
}

/* ============================================================
   NAV — never let it collide with the logo or the icons
   The full eight-item bar needs ~1010px on its own. Showing it
   from 1024px left nothing for the logo, so items ran over it.
   It now waits until there is genuinely room; below that the
   hamburger already covers everything.
   ============================================================ */

@media (max-width: 1199px) {
  .cl-header__inner .cl-nav { display: none !important; }
}
@media (min-width: 1200px) {
  .cl-header__inner .cl-nav { display: flex; }
  .cl-menu-toggle { display: none; }
}

/* Hard guarantee: even if a label is ever added, the nav clips rather than
   pushing into its neighbours. */
.cl-header__inner .cl-nav {
  min-width: 0;
  overflow: hidden;
}

/* ============================================================
   GLOWING BORDERS
   One shared treatment, so every panel on the site lights the
   same way rather than each block inventing its own.
   ============================================================ */

.woocommerce ul.products li.product,
.cl-intent,
.cl-picks__panel,
.cl-contact,
.cl-drawer__panel,
.cl-co__panel,
.cl-promo__panel,
.cl-trustbar {
  border: 1px solid rgba(155, 93, 229, 0.30);
  box-shadow:
    0 0 0 1px rgba(155, 93, 229, 0.06),
    0 0 22px -6px rgba(123, 63, 178, 0.35),
    0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

/* Cards lift on hover — the glow tightens rather than grows, which reads as
   focus instead of a flare. */
.woocommerce ul.products li.product {
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.woocommerce ul.products li.product:hover {
  border-color: rgba(155, 93, 229, 0.65);
  box-shadow:
    0 0 0 1px rgba(155, 93, 229, 0.14),
    0 0 26px -4px rgba(123, 63, 178, 0.55),
    0 22px 46px -28px rgba(0, 0, 0, 0.95);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product:hover { transform: none; }
}

/* Order-notes toggle, modal only. */
body.cl-embed .cl-notes-toggle {
  display: block;
  width: 100%;
  margin: 4px 0 18px;
  padding: 12px 14px;
  border: 1px dashed rgba(155, 93, 229, 0.3);
  border-radius: 8px;
  background: transparent;
  color: var(--mist-400);
  font-family: var(--font-body);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
body.cl-embed .cl-notes-toggle:hover {
  border-color: var(--ui-400);
  color: var(--mist-50);
}

/* Secondary hints under a section heading repeat what the heading says.
   The heading and the field labels carry it. */
body.cl-embed .woocommerce-additional-fields > h3 + p,
body.cl-embed .form-row > .description {
  display: none;
}

/* Shorter, calmer placeholder than "Notes about your order, e.g. special
   notes for delivery." */
body.cl-embed #order_comments::placeholder { opacity: 0.55; }

body.cl-embed .cl-embed__main { padding-top: 16px; }
body.cl-embed .cl-ruo-notice { margin-bottom: 14px; }

/* ============================================================
   HEADER — grid, not flex
   Flex let the nav win a fight it should never have been in:
   with nowrap labels it refused to shrink and took the space
   out of the logo. A three-column grid gives the logo and the
   icons their intrinsic width and hands the REMAINDER to the
   nav, which clips instead of pushing. Overlap is now
   impossible at any width.
   ============================================================ */

.cl-header__inner {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.cl-header__inner .cl-logo {
  grid-column: 1;
  justify-self: start;
}
.cl-header__inner .cl-nav {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
}
.cl-header__inner .cl-header__icons,
.cl-header__inner .cl-menu-toggle {
  grid-column: 3;
  justify-self: end;
}

/* ============================================================
   CONTACT BAR — made unmissable
   ============================================================ */

.cl-topbar {
  background: linear-gradient(90deg, #1A0E27, #3B1C55 50%, #1A0E27);
  border-bottom: 1px solid rgba(155, 93, 229, 0.38);
}
.cl-topbar__inner {
  padding-top: 11px;
  padding-bottom: 11px;
  gap: 10px 16px;
}

.cl-topbar__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--mist-100);
}

.cl-topbar__link {
  gap: 8px;
  padding: 5px 13px;
  border: 1px solid rgba(155, 93, 229, 0.55);
  border-radius: 999px;
  background: rgba(8, 7, 11, 0.45);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: #fff;
  box-shadow: 0 0 14px -4px rgba(155, 93, 229, 0.65);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.cl-topbar__link:hover {
  background: rgba(155, 93, 229, 0.22);
  border-color: var(--ui-400);
  color: #fff;
  box-shadow: 0 0 20px -3px rgba(155, 93, 229, 0.85);
}
.cl-topbar__link svg { color: var(--ui-400); }
.cl-topbar__promo {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-50);
}

@media (max-width: 720px) {
  /* The phone is what has to survive on a phone. */
  .cl-topbar__link--email,
  .cl-topbar__sep,
  .cl-topbar__promo { display: none; }
  .cl-topbar__label { font-size: 11px; }
  .cl-topbar__link { font-size: 13px; }
}

/* ============================================================
   VIALS — never dimmed, and a touch more vibrant
   The source photography is not consistent: SEMA's vial body is
   550px tall where KLOW's is 729, and SEMA averages luminance 51
   against SELANK's 64. That is why SEMA read as faint. Nothing
   on the page dims anything — this lifts the darker shots
   toward the brighter ones.
   ============================================================ */

.cl-vial__img,
.cl-cardimg__img,
.cl-sticky-cart__vial,
.cl-drawer__thumb img {
  opacity: 1 !important;
  /* ~5% more vibrant, with a small lift in contrast so the darker
     photographs stop disappearing into the background. */
  filter:
    saturate(1.06)
    brightness(1.05)
    contrast(1.04);
}

.cl-vial__img {
  filter:
    saturate(1.06)
    brightness(1.05)
    contrast(1.04);
}

/* Out-of-stock products keep full-strength imagery — the button already
   says "Out of stock", the picture does not need to whisper it. */
.woocommerce ul.products li.product.outofstock,
.woocommerce ul.products li.product.outofstock .cl-cardimg,
.woocommerce ul.products li.product.outofstock .cl-cardimg__img {
  opacity: 1 !important;
}

/* ============================================================
   GLOW BEHIND THE VIALS
   Behind, never around — an outline on the glass is exactly the
   neon look the brief rules out.
   ============================================================ */

.cl-vial::before,
.cl-cardimg::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 116%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(123, 63, 178, 0.30) 0%,
    rgba(123, 63, 178, 0.13) 42%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.cl-vial__shot,
.cl-vial__pill,
.cl-cardimg__img { position: relative; z-index: 1; }

.cl-vial { isolation: isolate; }

/* ============================================================
   THICKER GLOWING BORDERS
   ============================================================ */

.woocommerce ul.products li.product,
.cl-picks__panel,
.cl-contact,
.cl-intent {
  border-width: 2px !important;
  border-color: rgba(155, 93, 229, 0.45) !important;
  box-shadow:
    0 0 0 1px rgba(155, 93, 229, 0.10),
    0 0 30px -8px rgba(123, 63, 178, 0.60),
    0 18px 40px -28px rgba(0, 0, 0, 0.9) !important;
}

.woocommerce ul.products li.product:hover {
  border-color: rgba(155, 93, 229, 0.85) !important;
  box-shadow:
    0 0 0 1px rgba(155, 93, 229, 0.20),
    0 0 40px -6px rgba(155, 93, 229, 0.75),
    0 22px 46px -28px rgba(0, 0, 0, 0.95) !important;
}

/* ============================================================
   BACKGROUND — more present
   ============================================================ */

.cl-bg__plate { opacity: 0.46; }

.cl-bg__scrim {
  background:
    linear-gradient(180deg,
      rgba(8, 7, 11, 0.80) 0%,
      rgba(8, 7, 11, 0.58) 40%,
      rgba(8, 7, 11, 0.76) 100%);
}

/* Core Picks: the carousel vial floats like every other one. */
.cl-picks__art {
  position: relative;
  display: block;
}
.cl-picks__art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 112%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(123, 63, 178, 0.28) 0%,
    rgba(123, 63, 178, 0.12) 42%,
    transparent 70%);
  pointer-events: none;
}
.cl-picks__art img,
.cl-picks__img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  filter:
    saturate(1.06)
    brightness(1.05)
    contrast(1.04);
  animation: cl-picks-float 7.2s ease-in-out -2.4s infinite;
}

@keyframes cl-picks-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-picks__art img,
  .cl-picks__img { animation: none; }
}

/* The carousel vial is a cut-out now, so the framed photo box it used to sit
   in has nothing to frame — it just draws a rectangle behind a floating vial. */
.cl-picks__art {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* ============================================================
   BACKGROUND MOTION — more apparent
   Still slow enough to read as atmosphere, but now it actually
   travels far enough to notice.
   ============================================================ */

.cl-bg {
  /* Room for a longer drift without ever exposing an edge. */
  inset: -12%;
}

.cl-bg__plate {
  animation: cl-bg-drift 54s ease-in-out infinite;
}

@keyframes cl-bg-drift {
  0%   { transform: scale(1.12) translate3d(-2.5%, 1.2%, 0); }
  25%  { transform: scale(1.16) translate3d(1.5%, -1.8%, 0); }
  50%  { transform: scale(1.20) translate3d(2.8%, 1.6%, 0); }
  75%  { transform: scale(1.16) translate3d(-1.2%, 2.2%, 0); }
  100% { transform: scale(1.12) translate3d(-2.5%, 1.2%, 0); }
}

/* The scrim breathes against the plate, so the purple haze swells and fades
   rather than the whole image sliding as one flat sheet. */
.cl-bg__scrim {
  animation: cl-bg-haze 38s ease-in-out infinite;
}

@keyframes cl-bg-haze {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.88; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-bg__plate,
  .cl-bg__scrim { animation: none; }
}

/* ============================================================
   BACKGROUND — actually visible
   It was sitting at 0.46 under a 58-80% scrim, which is close
   to invisible. The rock is the point; the scrim only has to
   protect text, and the sections that hold text already carry
   their own near-solid backgrounds.
   ============================================================ */

.cl-bg__plate { opacity: 0.85; }

.cl-bg__scrim {
  /* Light through the middle so the rock and its purple haze read, heavier
     top and bottom where the header and footer text sit. */
  background:
    linear-gradient(180deg,
      rgba(8, 7, 11, 0.62) 0%,
      rgba(8, 7, 11, 0.18) 34%,
      rgba(8, 7, 11, 0.24) 62%,
      rgba(8, 7, 11, 0.70) 100%);
}

/* The hero has no background of its own, so this is where the plate shows
   through strongest — which is the intent. */
.cl-hero2 {
  background:
    radial-gradient(circle at 68% 38%,
      rgba(78, 37, 112, 0.24) 0%,
      rgba(43, 23, 63, 0.10) 38%,
      rgba(8, 7, 11, 0) 70%);
}

/* Text sections keep their own ground so nothing becomes hard to read. */
/* Panels that hold body copy keep enough ground to stay readable, but not so
   much that they black the page out. */
.cl-intent,
.cl-picks {
  background-color: rgba(11, 9, 16, 0.70);
}
.cl-footer {
  background-color: rgba(11, 9, 16, 0.80);
}
/* Cards stay near-solid: the plate showing through a card puts texture
   directly behind a cut-out vial, which is the thing the cut-outs remove. */
.woocommerce ul.products li.product {
  background-color: rgba(13, 12, 17, 0.94);
}
.cl-trustbar {
  background-color: rgba(8, 7, 11, 0.72);
}
.cl-ticker {
  background-color: rgba(8, 7, 11, 0.86);
}

/* No blanket over <main>. It was covering the plate on every shop and cart
   page — the whole point is that the rock is visible the length of the site.
   Readability is handled per-panel instead, so cover sits only where words
   actually are. */


/* Copy column gets its own ground. With the rock turned up, the description
   was sitting directly on texture and became hard to read — the vials are
   allowed to have the busy half, the words are not. */
.cl-hero2__copy {
  position: relative;
}
/* No wash behind the hero copy — the background shows straight through.
   Legibility comes from the text's own halo instead of a slab. */
.cl-hero2__copy::before { content: none; }

@media (max-width: 959px) {
  /* Stacked layout: the copy sits centred, so the wash must be centred too. */
  .cl-hero2__copy::before { content: none; }
}

/* ============================================================
   SITE PLATE — the length of the page, always moving
   Fixed, so content scrolls over a steady vista, and animated
   so it is never actually still. The hero keeps its own copy
   on top for the ridge-under-the-vials composition.
   ============================================================ */

.cl-bg__plate {
  opacity: 0.92;
  /* Slightly above the bottom, so the ridge crosses the middle of the viewport
     and is visible behind the hero — not only down at the fold. This is what
     the hero's own duplicate plate used to do. */
  background-position: center 72%;
  animation: cl-bg-drift 46s ease-in-out infinite;
}

.cl-bg__scrim {
  background:
    linear-gradient(180deg,
      rgba(8, 7, 11, 0.58) 0%,
      rgba(8, 7, 11, 0.12) 30%,
      rgba(8, 7, 11, 0.16) 60%,
      rgba(8, 7, 11, 0.55) 100%);
  animation: cl-bg-haze 30s ease-in-out infinite;
}

@keyframes cl-bg-drift {
  0%   { transform: scale(1.12) translate3d(-3%, 1.4%, 0); }
  25%  { transform: scale(1.17) translate3d(1.8%, -2%, 0); }
  50%  { transform: scale(1.22) translate3d(3.2%, 1.8%, 0); }
  75%  { transform: scale(1.17) translate3d(-1.4%, 2.6%, 0); }
  100% { transform: scale(1.12) translate3d(-3%, 1.4%, 0); }
}

@keyframes cl-bg-haze {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.82; }
}

/* Long text pages (terms, policies, account) get a readable column ground
   without covering the whole viewport. */
/* Long-form pages: terms, policies, contact, account. Their body copy sits
   straight on the plate otherwise, and rock texture behind small grey type is
   not readable. `.cl-content` is this theme's wrapper — `.entry-content` does
   not exist here, which is why an earlier attempt at this did nothing. */
.woocommerce-account .woocommerce,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.cl-content,
.page article > .container,
main > .container > article {
  background-color: rgba(11, 9, 16, 0.82);
  border-radius: var(--radius-lg);
}

/* The wrapper is nested twice on some templates; only the outer one should
   carry the ground, or it doubles up and goes almost solid. */
.cl-content .cl-content {
  background-color: transparent;
}

main > .container > article {
  padding: 26px 28px;
}

@media (prefers-reduced-motion: reduce) {
  .cl-bg__plate,
  .cl-bg__scrim { animation: none; }
}

/* Shop/archive intro copy sits directly on the plate, so it gets its own
   wash — same treatment as the hero copy column. */
.cl-shop-header {
  position: relative;
}
.cl-shop-header::before {
  content: "";
  position: absolute;
  inset: -20px -40px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(110% 100% at 25% 50%,
    rgba(8, 7, 11, 0.90) 0%,
    rgba(8, 7, 11, 0.72) 48%,
    rgba(8, 7, 11, 0) 100%);
}

/* Toolbar row and pagination read against the plate without a slab. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce nav.woocommerce-pagination {
  text-shadow: 0 1px 6px rgba(8, 7, 11, 0.9);
}

/* ============================================================
   VIAL BASE — fade out the contact residue
   The cut keeps a faint speckle where the vial met the studio
   surface. It was invisible against flat black; against the
   rock plate it reads as dirt under the bottle. The vial base
   sits at 95% of the frame, so fading the last few percent
   removes the residue and softens the base into shadow without
   touching the bottle.
   ============================================================ */

/* No mask needed any more. The surface reflection is now removed from the
   image files themselves — the vial ends at ~90% of the frame and there is
   nothing below it. The old mask started fading at 88%, which would eat the
   bottle's own base. */

/* No shadow pool under the vials — they float, and a cast shadow under a
   floating object reads as dirt. The base simply fades out. */
.cl-vial__shot,
.cl-cardimg {
  position: relative;
}

/* ============================================================
   LEGIBILITY OVER THE PLATE
   Everything sitting in front of the background gets lifted off
   it. Two different things are doing the work:
     - a DARK halo behind text, which is what actually makes type
       readable on a busy ground (a light glow on body copy would
       be neon, which the brief rules out)
     - a soft PURPLE rim on panels and controls, so their edges
       separate from the rock
   ============================================================ */

/* Type that sits directly on the plate. */
.cl-hero2__title,
.cl-hero2__trustText,
.cl-shop-header h1,
.cl-shop-header p,
.cl-vial__pill,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.cl-intent__text,
.cl-picks__name,
main > .container > article > h1,
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
  text-shadow:
    0 1px 2px rgba(8, 7, 11, 0.95),
    0 2px 14px rgba(8, 7, 11, 0.85);
}

/* Panels and controls: a quiet rim so their edge is findable. */
.cl-vial__pill,
.cl-chip,
.woocommerce .woocommerce-ordering select,
.woocommerce-breadcrumb {
  box-shadow:
    0 0 0 1px rgba(155, 93, 229, 0.16),
    0 0 18px -6px rgba(123, 63, 178, 0.55),
    0 6px 18px -10px rgba(0, 0, 0, 0.9);
}

/* Buttons keep a touch of light so they read as the thing to press. */
.cl-btn--secondary,
.woocommerce ul.products li.product .cl-atc__btn {
  box-shadow:
    0 0 16px -6px rgba(123, 63, 178, 0.6),
    0 6px 16px -10px rgba(0, 0, 0, 0.9);
}

/* Icon rows and small marks. */
.cl-hero2__trustIcon,
.cl-trustbar svg,
.cl-intent__num {
  filter: drop-shadow(0 0 8px rgba(123, 63, 178, 0.55));
}

/* Section panels lift off the plate as a whole. */
.cl-intent,
.cl-picks__panel,
.cl-contact,
.cl-trustbar {
  backdrop-filter: none; /* deliberately: it composited inconsistently here */
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing here animates; listed for completeness if that changes. */
}

/* ============================================================
   NAV LABELS — full on wide screens, abbreviated when tight
   Eight labelled items plus icons will not sit comfortably next
   to the logo between 1200 and ~1450px. Rather than shrink the
   type until it is unreadable, the labels get shorter.
   ============================================================ */

.cl-nav-label--short { display: none; }

/*
 * Abbreviated at EVERY desktop width, not a band.
 *
 * Measured: the container caps at 1360px, and the full labels need 1409px of
 * inner width (nav 1073 + logo 122 + icons 98 + gaps + padding). They do not
 * fit at 1512px, and they never will at any viewport, because the cap is what
 * limits them — not the screen. Three attempts at tuning a breakpoint failed
 * for that reason. Abbreviated needs ~1290, which fits with room to spare.
 */
@media (min-width: 1200px) {
  /* Header nav only. This was unscoped, so the footer columns were showing
     the abbreviations too — "Quality" instead of "Research & Quality" — where
     there is plenty of room for the real name. */
  .cl-header__inner .cl-nav .cl-nav-item--abbrev .cl-nav-label--full { display: none; }
  .cl-header__inner .cl-nav .cl-nav-item--abbrev .cl-nav-label--short { display: inline; }
  .cl-header__inner .cl-nav { gap: 18px; }
  .cl-header__inner .cl-nav a { font-size: 12px; letter-spacing: 0.09em; }
}

/* Everywhere else shows the full wording. */
.cl-footer .cl-nav-label--short,
.cl-mobile__nav .cl-nav-label--short { display: none !important; }
.cl-footer .cl-nav-label--full,
.cl-mobile__nav .cl-nav-label--full { display: inline !important; }

/* The mobile menu always gets the full wording — there is room. */
.cl-mobile__nav .cl-nav-label--short { display: none !important; }
.cl-mobile__nav .cl-nav-label--full { display: inline !important; }

/* ============================================================
   SECTIONS — a smidge more transparent
   ============================================================ */

.cl-intent,
.cl-picks {
  background-color: rgba(11, 9, 16, 0.58);
}
.cl-footer {
  background-color: rgba(11, 9, 16, 0.70);
}
.woocommerce ul.products li.product {
  /* Cards stay the most solid of the lot: texture behind a cut-out vial is
     the one thing that undoes the cut-outs. Still lifted a little. */
  background-color: rgba(13, 12, 17, 0.88);
}
.cl-trustbar { background-color: rgba(8, 7, 11, 0.60); }
.cl-content,
.page article > .container,
main > .container > article {
  background-color: rgba(11, 9, 16, 0.72);
}

/* ============================================================
   MOBILE HERO — centred, sized, and never overlapping
   The clamp() minimums were winning at 375px, so all three
   vials came out ~99px and the centre stopped being the centre.
   They also overlapped by 4px. Explicit sizes below.
   ============================================================ */

@media (max-width: 640px) {
  .cl-hero2__stage {
    gap: 8px;
    justify-content: center;
    padding: 0 6px;
    min-height: 0;
  }

  /* 26% + 21% + 21% = 68% of the stage, leaving room for the gaps. */
  .cl-vial--center { width: 26%; }
  .cl-vial--left,
  .cl-vial--right { width: 21%; }

  /* Less tilt at this size, or the corners of the side vials reach into
     their neighbours. */
  .cl-vial--left  { transform: rotate(-5deg) translateY(12px); }
  .cl-vial--right { transform: rotate(5deg) translateY(12px); }
  .cl-vial--left  .cl-vial__pill { transform: rotate(5deg); }
  .cl-vial--right .cl-vial__pill { transform: rotate(-5deg); }

  /* The halo was wider than the vial and bled into the next one. */
  .cl-vial::before { width: 96%; }

  .cl-vial__pill {
    padding: 6px 9px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .cl-hero2 { padding: 20px 0 34px; }
  .cl-hero2__inner { gap: 0; }
  .cl-hero2__copy { text-align: center; }

  .cl-hero2__title {
    font-size: clamp(1.85rem, 9.5vw, 2.6rem);
    letter-spacing: 0.01em;
    margin-bottom: 12px;
  }
  .cl-hero2__cta { max-width: 300px; margin-bottom: 24px; }
  .cl-hero2 .cl-hero2__shop{ min-height: 48px; font-size: 12px; }
}

/* Very narrow phones. */
@media (max-width: 380px) {
  .cl-hero2__stage { gap: 5px; }
  .cl-vial--center { width: 27%; }
  .cl-vial--left,
  .cl-vial--right { width: 20%; }
  .cl-vial__pill { padding: 5px 7px; font-size: 8.5px; }
}

/* ============================================================
   PRODUCT CARDS ON MOBILE — keep the vial inside the card
   ============================================================ */

@media (max-width: 640px) {
  .cl-cardimg { padding: 0 6px; }
  .cl-cardimg__img { max-width: 100%; }
  /* The halo was 116% of the card image and spilled past the card edge. */
  .cl-cardimg::before { width: 88%; }
  .woocommerce ul.products li.product { overflow: hidden; }
}

/* ============================================================
   TEXT GLOW — site-wide
   Two layers on every piece of type that sits over the moving
   plate: a tight DARK halo that does the actual legibility
   work, and a wider PURPLE bloom that reads as the glow. The
   dark layer comes first and is what keeps small grey copy
   readable — a purple glow alone on body text would smear it.
   ============================================================ */

body,
p, li, span, a, strong, em, small,
h1, h2, h3, h4, h5, h6,
.woocommerce .price,
.woocommerce-loop-product__title,
label, dt, dd, th, td,
.cl-footer a,
.cl-footer p {
  text-shadow:
    0 1px 2px rgba(8, 7, 11, 0.95),
    0 2px 10px rgba(8, 7, 11, 0.80),
    0 0 20px rgba(123, 63, 178, 0.28);
}

/* Headings carry more of the purple, since they are the brand voice. */
h1, h2,
.cl-hero2__title,
.cl-shop-header h1,
.cl-picks__name,
.cl-contact__title {
  text-shadow:
    0 2px 3px rgba(8, 7, 11, 0.98),
    0 3px 14px rgba(8, 7, 11, 0.9),
    0 0 26px rgba(123, 63, 178, 0.45),
    0 0 52px rgba(123, 63, 178, 0.22);
}

/* The hero headline sits on the busiest part of the plate. It gets a plate of
   its own behind the type as well as the glow — shadow alone was not enough
   against the rock. */
.cl-hero2__title {
  position: relative;
}
.cl-hero2__titleTop,
.cl-hero2__titleBottom {
  position: relative;
  z-index: 1;
}
/* Same for the headline. */
.cl-hero2__title::before { content: none; }

/* "WITHOUT LIMITS" is gradient-filled text, so a text-shadow cannot show
   through it — the glow has to come from a drop-shadow on the element. */
.cl-hero2__titleBottom {
  text-shadow: none;
  filter:
    drop-shadow(0 2px 3px rgba(8, 7, 11, 0.95))
    drop-shadow(0 0 22px rgba(155, 93, 229, 0.55));
}

/* Form fields, code and monospaced figures stay crisp — a halo on an input
   value looks like a rendering fault. */
input, textarea, select,
.select2-selection__rendered,
.cl-promo__code,
code, kbd, pre,
.cl-drawer__qtyVal,
.cl-sticky-cart__badge,
.cl-cart-count {
  text-shadow: none;
}

/* ============================================================
   GLOW BEHIND EVERY VIAL
   Hero, product cards, the carousel and the cart bar — all of
   them, and always behind, never an outline on the glass.
   ============================================================ */

.cl-vial::before,
.cl-cardimg::before,
.cl-picks__art::before,
.cl-sticky-cart__icon::before {
  background: radial-gradient(circle,
    rgba(155, 93, 229, 0.38) 0%,
    rgba(123, 63, 178, 0.20) 38%,
    rgba(123, 63, 178, 0.07) 60%,
    transparent 74%);
}

.cl-sticky-cart__icon { position: relative; }
.cl-sticky-cart__icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 118%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.cl-sticky-cart__vial,
.cl-sticky-cart__cart,
.cl-sticky-cart__badge { position: relative; z-index: 1; }

/* The drawer's line thumbnails too. */
.cl-drawer__thumb { position: relative; }
.cl-drawer__thumb::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(155, 93, 229, 0.30) 0%,
    rgba(123, 63, 178, 0.12) 45%,
    transparent 72%);
  pointer-events: none;
}
.cl-drawer__thumb img { position: relative; z-index: 1; }

/* The drop-shadow on the vial images was casting a dark smear under each
   bottle too. Keep a whisper for depth, not a shadow on the ground. */
.cl-vial__img,
.cl-cardimg__img,
.cl-picks__img,
.cl-picks__art img,

/* ============================================================
   CONTAINMENT — nothing floats out of its box
   The float animation moves a vial up to 16px, and the halo is
   wider than the image. Together they were reaching past card
   edges and section bounds. Each vial now sits in a box that
   reserves room for both.
   ============================================================ */

/* Product cards: clip, and leave headroom for the float. */
.woocommerce ul.products li.product { overflow: hidden; }

.cl-cardimg {
  overflow: hidden;
  padding-top: 18px;   /* the float travels up to 9px; this is the headroom */
  padding-bottom: 6px;
}
.cl-cardimg::before {
  width: 84%;          /* halo stays inside the card */
  top: 50%;
}

/* Hero stage: reserve the float distance so a vial never crosses the section
   edge at the top of its cycle. */
.cl-hero2__stage {
  padding-top: 20px;
  overflow: visible;
}
.cl-vial__shot { overflow: visible; }

/* Carousel slide. */
.cl-picks__art {
  overflow: hidden;
  padding: 14px 0 6px;
}
.cl-picks__art::before { width: 92%; }

/* The hero section itself clips, so nothing escapes into the strip above. */
.cl-hero2 { overflow: hidden; }

/* ============================================================
   ALIGNMENT — icons to text, and everything on a centre line
   ============================================================ */

/* Nav: icon and label share a baseline-neutral centre. */
.cl-nav a,
.cl-mobile__nav a {
  /* Full width: these were inline-flex, so "FAQ" was a 98px target inside a
     348px row and every tap outside the word itself did nothing — which is
     what made the menu feel hard to hit (Noah, 2026-09-23). */
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  line-height: 1;
}
.cl-nav-icon,
.cl-mobile__nav .cl-nav-icon {
  display: block;
  flex: 0 0 auto;
  position: relative;
  top: 0;
}

/* Trust rows: icon centred over its label, equal columns. */
.cl-hero2__trustItem,
.cl-trustbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 8px;
}
.cl-hero2__trustIcon,
.cl-trustbar__item svg {
  display: block;
  margin: 0 auto;
}

/* Contact bar: the pill, its icon and the text on one centre line. */
.cl-topbar__inner { align-items: center; }
.cl-topbar__link { display: inline-flex; align-items: center; line-height: 1; }
.cl-topbar__link svg { display: block; flex: 0 0 auto; }

/* Buttons: label and arrow centred together. */
.cl-btn,
.cl-hero2__shop,
.cl-atc__btn,
.cl-sticky-cart__btn,
.cl-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cl-hero2__shop svg,
.cl-sticky-cart__btn svg,
.cl-atc__btn svg { display: block; flex: 0 0 auto; }

/* Card text block: name, price and button on a single centred column. */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  text-align: center;
}
.woocommerce ul.products li.product .price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}
.woocommerce ul.products li.product .cl-atc { margin-top: auto; }

@media (max-width: 640px) {
  /* Extra headroom is not needed when the vials are small. */
  .cl-cardimg { padding-top: 12px; }
  .cl-hero2__stage { padding-top: 12px; }
}

/* ============================================================
   SEAMLESS SCROLL
   "How ordering works" and the product sections were sitting on
   near-solid slabs, so scrolling past them the background cut
   out and came back. They now let the plate through and the
   page reads as one continuous scene.
   ============================================================ */

/* The alternating section ground was a solid --ink-900 band. */
.cl-section--alt {
  background: rgba(17, 16, 21, 0.38);
}
.cl-section {
  border-bottom-color: rgba(155, 93, 229, 0.16);
}

/* The three-step strip and the carousel panel. */
.cl-intent {
  background-color: rgba(11, 9, 16, 0.34);
}
.cl-picks {
  background-color: transparent;
}
.cl-picks__panel {
  background-color: rgba(17, 16, 21, 0.62);
}

/* Individual step tiles keep a little more, since they hold text. */
.cl-intent__step {
  background-color: rgba(13, 12, 17, 0.55);
}

/* Product cards: enough ground that a cut-out vial still reads against it,
   but the plate shows through the section around and between them. */
.woocommerce ul.products li.product {
  background-color: rgba(13, 12, 17, 0.74);
}

/* Steps list on the long "how it works" section. */

/* Trust strip and footer ease off too. */
.cl-trustbar { background-color: rgba(8, 7, 11, 0.46); }
.cl-footer { background-color: rgba(11, 9, 16, 0.58); }

/* The transitions between sections stop being hard edges. */
.cl-intent,
.cl-section--alt,
.cl-trustbar {
  border-top: 1px solid rgba(155, 93, 229, 0.10);
  border-bottom: 1px solid rgba(155, 93, 229, 0.10);
}

/* ============================================================
   MOBILE HERO — simpler, and the pills on one line
   The three name pills sat at different heights because the
   side vials carry a translateY on the whole anchor, which
   moved their pills too. The offset now lives on the image
   only, and the three shots share a height, so the pills line
   up while the centre still reads as the largest.
   ============================================================ */

@media (max-width: 640px) {

  /* One caption line, not two. "Science drives further" and the
     RESEARCH • DISCOVERY • PROGRESS eyebrow were stacked and saying
     the same thing twice. */

  /* Equal shot heights → pills on one baseline. */
  .cl-hero2__stage { align-items: flex-end; }

  .cl-vial__shot {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 132px;
  }
  .cl-vial__img {
    height: 84%;
    width: auto;
    max-width: 100%;
  }
  .cl-vial--center .cl-vial__img { height: 100%; }

  /* Tilt stays on the anchor; the vertical offset moves to the image so the
     pill is not dragged down with it. */
  .cl-vial--left  { transform: rotate(-5deg); }
  .cl-vial--right { transform: rotate(5deg); }
  .cl-vial--left  .cl-vial__shot,
  .cl-vial--right .cl-vial__shot { padding-bottom: 0; }

  .cl-vial { gap: 10px; }

  /* Equal widths now that height drives the size difference. */
  .cl-vial--left,
  .cl-vial--center,
  .cl-vial--right { width: 30%; }
  .cl-hero2__title { margin-bottom: 10px; }
}

/* ============================================================
   PRODUCT CARDS — rhythm, and a real Add to cart
   The name, price and button were butting into each other with
   no breathing room, and the button read as a thin outline
   rather than the thing to press.
   ============================================================ */

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 16px;
  gap: 0;
}

/* Vial sits centred in its own space, with equal air above and below. */
.woocommerce ul.products li.product .cl-cardimg,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-cardimg {
  padding: 22px 14px 18px;
  margin: 0;
}
.cl-cardimg__img {
  margin: 0 auto;
  max-height: 210px;
  width: auto;
  max-width: 100%;
}

/* Stronger, more even glow behind every vial. */
.cl-vial::before,
.cl-cardimg::before,
.cl-picks__art::before {
  background: radial-gradient(circle,
    rgba(155, 93, 229, 0.46) 0%,
    rgba(123, 63, 178, 0.26) 34%,
    rgba(123, 63, 178, 0.10) 56%,
    transparent 72%);
}

/* Name / price / button: one rhythm, generous spacing. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 0 18px 8px;
  padding: 0;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-align: center;
}

.woocommerce ul.products li.product .price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 0 18px 16px;
  font-size: 15px;
  line-height: 1.2;
}
.woocommerce ul.products li.product .price del { opacity: 0.55; font-size: 13px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .cl-atc {
  margin: auto 16px 0;
  width: auto;
}

/* The primary action on the card, and it should look like it. */
.woocommerce ul.products li.product .cl-atc__btn {
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 12.5px;
  letter-spacing: 0.13em;
  background: linear-gradient(135deg, #6D35A4, #8D4BD0) !important;
  border: 1px solid rgba(155, 93, 229, 0.85) !important;
  color: #fff !important;
  box-shadow:
    0 0 18px -6px rgba(123, 63, 178, 0.8),
    0 8px 20px -12px rgba(0, 0, 0, 0.9);
}
.woocommerce ul.products li.product .cl-atc__btn:hover {
  background: linear-gradient(135deg, #7B3FB2, #9B5DE5) !important;
  box-shadow:
    0 0 26px -4px rgba(155, 93, 229, 0.9),
    0 10px 24px -12px rgba(0, 0, 0, 0.9);
}
.woocommerce ul.products li.product .cl-atc--out .cl-atc__btn {
  background: transparent !important;
  border-color: var(--ink-600) !important;
  color: var(--mist-500) !important;
  box-shadow: none;
}

/* Sale flag clear of the vial. */
.woocommerce ul.products li.product span.onsale {
  top: 12px;
  left: 12px;
  z-index: 3;
}

@media (max-width: 640px) {
  .cl-cardimg { padding: 16px 10px 12px; }
  .cl-cardimg__img { max-height: 150px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0 12px 6px;
    font-size: 13.5px;
  }
  .woocommerce ul.products li.product .price { margin: 0 12px 12px; font-size: 14px; }
  .woocommerce ul.products li.product .cl-atc { margin: auto 12px 0; }
  .woocommerce ul.products li.product .cl-atc__btn {
    min-height: 44px;
    font-size: 11.5px;
    letter-spacing: 0.1em;
  }
}


/* Badge clears the vial rather than sitting on the old tile corner. */
.cl-sticky-cart__badge {
  top: -4px;
  right: -8px;
}


/* ============================================================
   STICKY BAR VIAL — one authoritative block
   There were five competing rules for this element, which is
   why it kept landing off-centre: whichever won set a different
   box. Everything for it now lives here.

   The box stays (it frames the vial); the vial is centred in it
   by grid rather than flex, so no stale width rule can shift it.
   ============================================================ */

.cl-sticky-cart__icon {
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(155, 93, 229, 0.32);
  border-radius: 12px;
  /* Matte fill, no image — any texture here reads as leftover backdrop
     behind a cut-out vial. */
  background: rgba(17, 16, 21, 0.78);
  overflow: visible;
}

/* Glow sits behind the vial, inside the box. */
.cl-sticky-cart__icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(155, 93, 229, 0.34) 0%,
    rgba(123, 63, 178, 0.14) 44%,
    transparent 70%);
}

.cl-sticky-cart__vial,
.cl-sticky-cart__cart {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: center;
  display: block;
  width: 42px;
  height: 42px;
  margin: 0;
  object-fit: contain;
  position: relative;
  z-index: 1;
  opacity: 1;
  filter: saturate(1.06) brightness(1.05) contrast(1.04);
  animation: cl-sticky-vial 5.5s ease-in-out infinite;
}

.cl-sticky-cart__vial[hidden],
.cl-sticky-cart__cart[hidden] { display: none; }

.cl-sticky-cart__cart {
  width: 22px;
  height: 22px;
  animation: none;
  filter: none;
}

.cl-sticky-cart__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
}

@media (max-width: 600px) {
  .cl-sticky-cart__icon { width: 44px; height: 44px; border-radius: 10px; }
  .cl-sticky-cart__vial { width: 37px; height: 37px; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-sticky-cart__vial { animation: none; }
}

/* ============================================================
   HERO COPY LEGIBILITY — halo only, no slab
   The background shows straight through now, so the type has to
   carry itself. Heavier dark halo, tight to the glyphs, so it
   reads as weight on the letters rather than a box behind them.
   ============================================================ */

.cl-hero2__title .cl-hero2__titleTop {
  text-shadow:
    0 1px 1px rgba(8, 7, 11, 1),
    0 2px 4px rgba(8, 7, 11, 0.98),
    0 4px 16px rgba(8, 7, 11, 0.95),
    0 0 34px rgba(123, 63, 178, 0.5);
}

/* Gradient-filled text cannot take a text-shadow, so its halo is a stack of
   drop-shadows on the element instead. */
.cl-hero2__titleBottom {
  text-shadow: none;
  filter:
    drop-shadow(0 1px 1px rgba(8, 7, 11, 1))
    drop-shadow(0 2px 5px rgba(8, 7, 11, 0.95))
    drop-shadow(0 4px 14px rgba(8, 7, 11, 0.85))
    drop-shadow(0 0 24px rgba(155, 93, 229, 0.6));
}
.cl-hero2__trustText,
.cl-vial__pill {
  text-shadow:
    0 1px 1px rgba(8, 7, 11, 1),
    0 1px 4px rgba(8, 7, 11, 0.98),
    0 2px 12px rgba(8, 7, 11, 0.92);
}

/* Slightly brighter body copy so it holds up over the lit part of the rock. */

/* Trust icons and their dividers need a little more presence too. */
.cl-hero2__trustIcon {
  filter:
    drop-shadow(0 1px 2px rgba(8, 7, 11, 1))
    drop-shadow(0 0 10px rgba(123, 63, 178, 0.7));
}

/* Belt and braces: an SVG cannot be hidden by the `hidden` IDL property, so
   the class is what the JS toggles and this is what actually hides it. */
.cl-sticky-cart__cart[hidden],
.cl-sticky-cart__vial[hidden] { display: none !important; }

/* ============================================================
   DESIGN SYSTEM — one pass, one set of values
   Transparency, glow and type treatment had been set in a dozen
   separate places across successive changes, so no two sections
   matched. Everything below is driven by four tokens, applied
   last, so the whole page is uniform.
   ============================================================ */

:root {
  /* One transparency for every panel that holds content. */
  --cl-surface: rgba(12, 11, 16, 0.62);
  /* Cards hold a cut-out vial, so they sit one step more solid —
     background texture behind a vial undoes the cut-outs. */
  --cl-surface-card: rgba(12, 11, 16, 0.80);
  /* One border and one glow for every box. */
  --cl-edge: rgba(155, 93, 229, 0.42);
  --cl-glow:
    0 0 0 1px rgba(155, 93, 229, 0.10),
    0 0 28px -8px rgba(123, 63, 178, 0.65),
    0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

/* ---------- uniform surfaces ---------- */

.cl-intent,
.cl-picks,
.cl-picks__panel,
.cl-section,
.cl-section--alt,
.cl-section:nth-of-type(even),
.cl-trustbar,
.cl-contact,
.cl-content,
.cl-footer,
main > .container > article,
.page article > .container,
.woocommerce-account .woocommerce,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  background-color: var(--cl-surface) !important;
}

.woocommerce ul.products li.product,
.cl-intent__step{
  background-color: var(--cl-surface-card) !important;
}

/* The page's own scaffolding stays out of the way entirely. */
.cl-picks,
.cl-hero2,
.woocommerce-page main,
.woocommerce main,
body {
  background-color: transparent !important;
}

/* ---------- every box glows, identically ---------- */

.woocommerce ul.products li.product,
.cl-intent,
.cl-intent__step,
.cl-picks__panel,
.cl-contact,
.cl-trustbar,
.cl-content,
.cl-drawer__panel,
.cl-co__panel,
.cl-promo__panel,
.cl-chip,
main > .container > article {
  border: 1px solid var(--cl-edge) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--cl-glow) !important;
}

.woocommerce ul.products li.product:hover {
  border-color: rgba(155, 93, 229, 0.8) !important;
  box-shadow:
    0 0 0 1px rgba(155, 93, 229, 0.18),
    0 0 38px -6px rgba(155, 93, 229, 0.8),
    0 22px 46px -28px rgba(0, 0, 0, 0.95) !important;
}

/* Section bands are dividers, not boxes — they keep the surface but not the
   ring, or the page turns into a stack of outlined rectangles. */
.cl-section,
.cl-section--alt,
.cl-picks,
.cl-footer {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 1px solid rgba(155, 93, 229, 0.14) !important;
  border-bottom: 1px solid rgba(155, 93, 229, 0.14) !important;
  border-radius: 0;
  box-shadow: none !important;
}

/* ---------- more glow behind every vial ---------- */

/*
 * A halo, not a wash. At 128% with a slow falloff the three hero glows
 * overlapped into one purple flood across the whole section — which is why it
 * stopped reading as "glow behind the vial" at all. Tight core, quick falloff,
 * sized to the bottle.
 */
.cl-vial::before,
.cl-cardimg::before,
.cl-picks__art::before,
.cl-sticky-cart__icon::before,
.cl-drawer__thumb::before {
  background: radial-gradient(circle,
    rgba(178, 126, 246, 0.62) 0%,
    rgba(155, 93, 229, 0.30) 22%,
    rgba(123, 63, 178, 0.10) 40%,
    transparent 58%) !important;
}
.cl-vial::before { width: 86%; top: 48%; }
.cl-cardimg::before { width: 74%; }
.cl-picks__art::before { width: 84%; }

/* ---------- type: bolder, brighter, one treatment ---------- */

body,
p, li, td, dd,
.woocommerce ul.products li.product .price {
  color: var(--mist-100);
}

h1, h2, h3, h4,
.cl-section__title,
.woocommerce-loop-product__title,
.cl-intent__text strong{
  color: var(--mist-50);
  font-weight: 700;
}

/* One halo for body type, a stronger one for headings. Dark first — it is
   what makes the words readable — then the purple bloom. */


/* Inputs and figures stay crisp. */
input, textarea, select,
.select2-selection__rendered,
code, kbd, pre,
.cl-drawer__qtyVal,
.cl-sticky-cart__badge,
.cl-cart-count,
.cl-promo__code {
  text-shadow: none !important;
}

/* ---------- alignment ---------- */

.cl-intent__list,
.cl-hero2__trust{
  align-items: stretch;
}

.cl-intent__step{
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.cl-section__title,
.woocommerce-products-header__title {
  text-align: left;
}

/* Card contents on one centred column, evenly spaced. */
.woocommerce ul.products li.product {
  text-align: center;
  align-items: stretch;
}

@media (max-width: 640px) {
  /* Stacked layouts read better centred on a phone. */
  .cl-intent__step{ flex-direction: column; text-align: center; gap: 10px; }
  .cl-section__title,
  .woocommerce-products-header__title { text-align: center; }
}

/* ============================================================
   MOBILE — fewer bars, more air
   Four stacked strips (contact, ticker, header, search) ran
   before any content. Consolidated, and the spacing evened out.
   ============================================================ */

@media (max-width: 767px) {
  /* Contact bar on one line: the phone number is what matters on a phone,
     and it was wrapping to two rows with the email. */
  .cl-topbar__inner {
    flex-wrap: nowrap;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .cl-topbar__label { font-size: 10px; letter-spacing: 0.1em; }
  .cl-topbar__link { font-size: 12.5px; padding: 4px 11px; }

  /* The ticker stays. It was hidden here as a duplicate of the trust row,
     but the movement is the point — a static row further down the page is
     not the same thing. Slimmed for a phone instead of removed. */

  .cl-header__inner { padding-top: 10px; padding-bottom: 10px; }

  /* Search is one tap away in the menu; it does not need a whole strip
     above the fold. */

  /* Even rhythm between every section. */
  .cl-hero2 { padding: 22px 0 28px; }
  .cl-section { padding: 36px 0; }
  .cl-intent { padding: 24px 0; }
  .cl-picks { padding: 8px 0 24px; }

  .cl-intent__list { gap: 12px; }
  .cl-intent__step { padding: 14px; }

  /* Hero stack spacing. */
  .cl-hero2__stage { margin-bottom: 14px; }
  .cl-hero2__title { margin-bottom: 12px; }
  .cl-hero2__cta { margin-bottom: 22px; gap: 10px; }
  .cl-hero2__trust { gap: 18px 10px; padding-top: 20px; }

  /* Product grid breathes. */
  .woocommerce ul.products { gap: 14px; }
  .woocommerce ul.products li.product { padding-bottom: 14px; }
}

/* ============================================================
   HERO GROUND — so the vial halos can actually be seen
   The bright purple haze in the middle of the background plate
   lands right behind the vials. A glow cannot read against a
   ground that is already lit, which is why the halos kept
   looking like they were not there. This darkens the hero band
   so each vial sits against something, and the halo shows.
   ============================================================ */

.cl-hero2 { position: relative; }

.cl-hero2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* darker directly behind the trio */
    radial-gradient(70% 62% at 68% 46%,
      rgba(8, 7, 11, 0.72) 0%,
      rgba(8, 7, 11, 0.45) 45%,
      rgba(8, 7, 11, 0.12) 75%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(8, 7, 11, 0.55) 0%,
      rgba(8, 7, 11, 0.30) 40%,
      rgba(8, 7, 11, 0.45) 100%);
}

/* Content above the darkening, scene below it. */
.cl-hero2__inner { position: relative; z-index: 2; }
.cl-hero2 > .cl-scene { z-index: 1; }

/* With a darker ground the halo can be brighter without blooming. */
.cl-vial::before {
  background: radial-gradient(circle,
    rgba(190, 142, 255, 0.72) 0%,
    rgba(155, 93, 229, 0.38) 24%,
    rgba(123, 63, 178, 0.14) 44%,
    transparent 62%) !important;
  width: 92%;
}

@media (max-width: 767px) {
  .cl-hero2::after {
    background:
      radial-gradient(78% 42% at 50% 28%,
        rgba(8, 7, 11, 0.74) 0%,
        rgba(8, 7, 11, 0.44) 50%,
        transparent 100%),
      linear-gradient(180deg,
        rgba(8, 7, 11, 0.58) 0%,
        rgba(8, 7, 11, 0.34) 45%,
        rgba(8, 7, 11, 0.50) 100%);
  }
  .cl-vial::before { width: 98%; }
}

/* ============================================================
   MORE GLOW, BOLDER TYPE — final pass
   ============================================================ */

/* ---------- vial halos: brighter and larger everywhere ---------- */

.cl-vial::before,
.cl-cardimg::before,
.cl-picks__art::before,
.cl-sticky-cart__icon::before,
.cl-drawer__thumb::before {
  background: radial-gradient(circle,
    rgba(206, 166, 255, 0.85) 0%,
    rgba(178, 126, 246, 0.55) 18%,
    rgba(155, 93, 229, 0.30) 34%,
    rgba(123, 63, 178, 0.12) 52%,
    transparent 68%) !important;
}

.cl-vial::before      { width: 108% !important; }
.cl-cardimg::before   { width: 92% !important; }
.cl-picks__art::before { width: 96% !important; }

/* A second, wider pool behind each vial so the light falls off gradually
   instead of stopping at a hard circle. */
.cl-vial::after,
.cl-cardimg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 150%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(155, 93, 229, 0.26) 0%,
    rgba(123, 63, 178, 0.12) 38%,
    transparent 64%);
}
.cl-cardimg::after { width: 124%; }

.cl-vial__shot,
.cl-vial__pill,
.cl-cardimg__img { position: relative; z-index: 2; }

/* ---------- type: heavier and lit, site-wide ---------- */

body,
p, li, td, dd, dt, span, a, strong, em, label {
  font-weight: 500;
  color: var(--mist-100);
}

h1, h2, h3, h4, h5,
.cl-section__title,
.woocommerce-loop-product__title,
.woocommerce-products-header__title {
  font-weight: 700;
  color: #FFFFFF;
}

/* Prices: the number people are actually looking for. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.cl-drawer__linePrice,
.cl-picks__price {
  font-weight: 800 !important;
  font-size: 17px !important;
  color: #FFFFFF !important;
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 2px rgba(8, 7, 11, 1),
    0 2px 8px rgba(8, 7, 11, 0.95),
    0 0 22px rgba(155, 93, 229, 0.65) !important;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
  color: var(--mist-400) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-shadow: 0 1px 2px rgba(8, 7, 11, 0.9) !important;
}

/* Every piece of type gets a dark halo plus a purple bloom. */


/* Product names on cards, a touch larger and brighter. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

/* Buttons read as lit objects. */
.cl-btn,
.cl-atc__btn,
.cl-hero2__shop,
.cl-sticky-cart__btn,
.cl-drawer__cta,
.woocommerce a.button,
.woocommerce button.button {
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(8, 7, 11, 0.85);
}

/* Fields and figures stay crisp. */
input, textarea, select,
.select2-selection__rendered,
code, kbd, pre,
.cl-drawer__qtyVal,
.cl-sticky-cart__badge,
.cl-cart-count,
.cl-promo__code {
  text-shadow: none !important;
  font-weight: 600;
}

/* ============================================================
   HEADLINE FIX — "WITHOUT LIMITS" was rendering black
   It is gradient-filled text (background-clip:text, transparent
   colour). Stacking four drop-shadow() filters on that draws a
   dark copy per shadow, so the word turned into a silhouette.
   Solid purple fill + a real glow instead.
   ============================================================ */

.cl-hero2__titleBottom {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: #B885FF !important;
  filter: none !important;
  text-shadow:
    0 1px 1px rgba(8, 7, 11, 1),
    0 2px 6px rgba(8, 7, 11, 0.95),
    0 0 18px rgba(155, 93, 229, 0.9),
    0 0 40px rgba(123, 63, 178, 0.75) !important;
}

.cl-hero2__titleTop {
  color: #FFFFFF !important;
  text-shadow:
    0 1px 1px rgba(8, 7, 11, 1),
    0 2px 6px rgba(8, 7, 11, 0.95),
    0 0 26px rgba(155, 93, 229, 0.55) !important;
}

/* Section headings get the same filled purple glow treatment. */
.cl-section__title,
.woocommerce-products-header__title,
.cl-picks__name,
.cl-contact__title {
  color: #FFFFFF !important;
  text-shadow:
    0 1px 1px rgba(8, 7, 11, 1),
    0 2px 6px rgba(8, 7, 11, 0.95),
    0 0 24px rgba(155, 93, 229, 0.7) !important;
}

/* ============================================================
   TOP BAR — fits on a phone
   "QUESTIONS?" and the email were being cut off at both edges.
   On a phone the number is the thing that matters.
   ============================================================ */

@media (max-width: 767px) {
  .cl-topbar__inner {
    justify-content: center;
    flex-wrap: nowrap;
    padding-left: 12px;
    padding-right: 12px;
  }
  .cl-topbar__label,
  .cl-topbar__promo,
  .cl-topbar__sep,
  .cl-topbar__link--email { display: none !important; }
  .cl-topbar__link {
    font-size: 13px;
    padding: 5px 14px;
    white-space: nowrap;
  }
}

/* ============================================================
   VIALS AND THEIR NAMES — closer, centred
   ============================================================ */

.cl-hero2__stage { align-items: flex-end; }

.cl-vial {
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.cl-vial__shot { margin-bottom: 0; }
.cl-vial__pill { margin-top: 0; }

.cl-cardimg { padding-bottom: 8px; }

@media (max-width: 767px) {
  .cl-vial { gap: 5px; }
  .cl-hero2__stage { gap: 10px; margin-bottom: 12px; }
}

/* ============================================================
   VIAL RIM — a soft white edge so the glass meets the glow
   Drawn from the image's own alpha, so it follows the bottle
   exactly rather than being a box around it.
   ============================================================ */

.cl-vial__img,
.cl-cardimg__img,
.cl-picks__img,
.cl-picks__art img {
  filter:
    saturate(1.04)
    brightness(1.05)
    contrast(1.03)
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.45))
    drop-shadow(0 0 10px rgba(214, 186, 255, 0.55))
    drop-shadow(0 0 26px rgba(155, 93, 229, 0.5)) !important;
}

.cl-sticky-cart__vial {
  filter:
    saturate(1.04)
    brightness(1.05)
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 6px rgba(155, 93, 229, 0.6)) !important;
}

/* ============================================================
   MOBILE — make it obvious the number dials
   ============================================================ */

.cl-topbar__calltag { display: none; }

@media (max-width: 767px) {
  .cl-topbar__inner { gap: 10px; }

  .cl-topbar__calltag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ui-400);
    white-space: nowrap;
  }

  /* The number itself looks pressable: filled, not just outlined. */
  .cl-topbar__link {
    background: linear-gradient(135deg, rgba(109, 53, 164, 0.9), rgba(141, 75, 208, 0.9));
    border-color: rgba(200, 160, 255, 0.7);
    color: #fff;
    box-shadow:
      0 0 16px -4px rgba(155, 93, 229, 0.9),
      0 3px 10px -4px rgba(0, 0, 0, 0.8);
  }
  .cl-topbar__link svg { color: #fff; }
  .cl-topbar__link:active {
    transform: translateY(1px);
    box-shadow: 0 0 10px -4px rgba(155, 93, 229, 0.9);
  }
}

/* ============================================================
   VIAL GLOW — wraps the whole bottle, quietly
   A circle was the wrong shape: a vial is tall and narrow, so a
   round glow either missed the cap and base or flooded the sides
   to reach them. This is an ellipse matched to the bottle's
   proportions, so the light surrounds all of it evenly — and at
   a lower intensity, so it reads as ambient rather than lit.
   ============================================================ */

.cl-vial::before,
.cl-cardimg::before,
.cl-picks__art::before {
  /* Taller than wide, like the bottle. */
  width: 78% !important;
  height: 104% !important;
  aspect-ratio: auto !important;
  top: 50% !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center,
    rgba(196, 152, 255, 0.40) 0%,
    rgba(165, 108, 236, 0.26) 30%,
    rgba(134, 74, 192, 0.14) 52%,
    rgba(123, 63, 178, 0.05) 70%,
    transparent 86%) !important;
  filter: blur(6px);
}

/* The wide secondary pool was what made it feel heavy. Softer and closer. */
.cl-vial::after,
.cl-cardimg::after {
  width: 104% !important;
  height: 118% !important;
  aspect-ratio: auto !important;
  top: 50% !important;
  background: radial-gradient(ellipse at center,
    rgba(155, 93, 229, 0.14) 0%,
    rgba(123, 63, 178, 0.07) 45%,
    transparent 72%) !important;
  filter: blur(10px);
}

.cl-picks__art::before { width: 74% !important; height: 100% !important; }

@media (max-width: 767px) {
  .cl-vial::before { width: 86% !important; height: 100% !important; }
  .cl-vial::after  { width: 112% !important; height: 112% !important; }
}

/* Rim stays, but softened so the bottle blends into its own glow rather than
   being outlined against it. */
.cl-vial__img,
.cl-cardimg__img,
.cl-picks__img,
.cl-picks__art img {
  filter:
    saturate(1.04)
    brightness(1.05)
    contrast(1.03)
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 6px rgba(214, 186, 255, 0.35))
    drop-shadow(0 0 20px rgba(155, 93, 229, 0.40)) !important;
}

/* ============================================================
   GLOW — eased back a step
   ============================================================ */

.cl-vial::before,
.cl-cardimg::before,
.cl-picks__art::before {
  background: radial-gradient(ellipse at center,
    rgba(188, 144, 252, 0.28) 0%,
    rgba(158, 102, 232, 0.18) 32%,
    rgba(130, 70, 186, 0.09) 54%,
    transparent 78%) !important;
}

.cl-vial::after,
.cl-cardimg::after {
  background: radial-gradient(ellipse at center,
    rgba(155, 93, 229, 0.09) 0%,
    rgba(123, 63, 178, 0.045) 45%,
    transparent 72%) !important;
}

.cl-vial__img,
.cl-cardimg__img,
.cl-picks__img,
.cl-picks__art img {
  filter:
    saturate(1.04)
    brightness(1.04)
    contrast(1.03)
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.45))
    drop-shadow(0 0 5px rgba(214, 186, 255, 0.24))
    drop-shadow(0 0 16px rgba(155, 93, 229, 0.26)) !important;
}

/* ============================================================
   MOBILE TEXT — centred, contained, on one spacing scale
   The audit found the carousel slide overflowing its panel and
   several blocks inheriting `text-align: start` rather than
   being centred. Everything below is one rhythm: 8 / 14 / 22.
   ============================================================ */

@media (max-width: 767px) {

  /* --- everything centres --- */
  .cl-hero2__copy,
  .cl-hero2__title,
  .cl-vial,
  .cl-vial__pill,
  .cl-intent__step,
  .cl-intent__text,
  .cl-section__title,
  .woocommerce-products-header__title,
  .cl-shop-header,
  .cl-shop-header h1,
  .cl-shop-header p,
  .cl-picks__body,
  .cl-picks__name,
  .cl-contact,
  .cl-contact__title,
  .cl-contact__lede,
  .cl-contact__note,
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .price,
  .cl-footer,
  .cl-footer__col,
  .cl-trustbar__item {
    text-align: center !important;
  }

  .cl-contact__link { text-align: left !important; }

  /* --- carousel slide fits its panel --- */
  .cl-picks__panel { padding: 16px 12px; overflow: hidden; }
  .cl-picks__slide {
    grid-template-columns: 1fr !important;
    justify-items: center;
    gap: 14px;
    max-width: 100%;
    padding: 0;
  }
  .cl-picks__art { max-width: 150px; margin: 0 auto; }
  .cl-picks__body { max-width: 100%; align-items: center; }
  .cl-picks__name { width: 100%; }
  .cl-picks__namebtn { width: 100%; justify-content: center; }

  /* --- one spacing scale --- */
  .cl-hero2__title    { margin: 0 0 14px; }
  .cl-hero2__cta      { margin: 0 auto 22px; gap: 10px; }
  .cl-hero2__trust    { margin: 0; padding-top: 22px; gap: 22px 8px; }

  .cl-section__title,
  .woocommerce-products-header__title { margin: 0 0 22px; }

  .cl-intent__list { gap: 14px; }
  .cl-intent__step { padding: 16px 14px; gap: 8px; }

  /* --- comfortable line lengths --- */
  .cl-shop-header p,
  .cl-contact__lede,
  .cl-intent__text{
    line-height: 1.6;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- card text sits inside the card --- */
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0 10px 6px;
    font-size: 13.5px !important;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .woocommerce ul.products li.product .price {
    margin: 0 10px 14px;
    font-size: 15px !important;
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .woocommerce ul.products li.product .cl-atc { margin: auto 10px 0; }

  /* --- trust rows line up --- */
  .cl-hero2__trustItem,
  .cl-trustbar__item { padding: 0 6px; }
  .cl-hero2__trustText,
  .cl-trustbar__item span { line-height: 1.45; }
}

/* ============================================================
   BLEND — soften every hard edge between the vial, its glow
   and the page behind it
   The halo was still ending at a visible boundary, and the
   white rim made the bottle read as cut out and placed on top
   rather than sitting in the scene. Longer falloff, softer rim.
   ============================================================ */

.cl-vial::before,
.cl-cardimg::before,
.cl-picks__art::before {
  /* Wider and much blurrier, so there is no edge to the light at all. */
  width: 96% !important;
  height: 118% !important;
  filter: blur(22px) !important;
  background: radial-gradient(ellipse at center,
    rgba(180, 136, 246, 0.22) 0%,
    rgba(152, 98, 226, 0.15) 26%,
    rgba(128, 70, 184, 0.085) 46%,
    rgba(110, 58, 160, 0.035) 64%,
    transparent 88%) !important;
}

.cl-vial::after,
.cl-cardimg::after {
  width: 130% !important;
  height: 140% !important;
  filter: blur(34px) !important;
  background: radial-gradient(ellipse at center,
    rgba(140, 86, 206, 0.10) 0%,
    rgba(110, 58, 160, 0.05) 42%,
    transparent 76%) !important;
}

/* The rim goes: a bright outline is what made the bottle look pasted on.
   What is left is a soft ambient lift that fades into the halo. */
.cl-vial__img,
.cl-cardimg__img,
.cl-picks__img,
.cl-picks__art img {
  filter:
    saturate(1.03)
    brightness(1.03)
    contrast(1.02)
    drop-shadow(0 0 10px rgba(178, 132, 244, 0.20))
    drop-shadow(0 0 24px rgba(140, 86, 206, 0.16)) !important;
}

.cl-sticky-cart__vial {
  filter:
    saturate(1.03)
    brightness(1.03)
    drop-shadow(0 0 7px rgba(155, 93, 229, 0.28)) !important;
}

/* The hero darkening also softens, so the vials sit in the scene rather than
   in a pool cut out of it. */
.cl-hero2::after {
  background:
    radial-gradient(76% 68% at 68% 46%,
      rgba(8, 7, 11, 0.52) 0%,
      rgba(8, 7, 11, 0.34) 46%,
      rgba(8, 7, 11, 0.12) 74%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(8, 7, 11, 0.42) 0%,
      rgba(8, 7, 11, 0.20) 42%,
      rgba(8, 7, 11, 0.38) 100%);
}

@media (max-width: 767px) {
  .cl-vial::before { width: 104% !important; height: 112% !important; filter: blur(18px) !important; }
  .cl-vial::after  { width: 136% !important; height: 132% !important; filter: blur(26px) !important; }
  .cl-hero2::after {
    background:
      radial-gradient(84% 46% at 50% 28%,
        rgba(8, 7, 11, 0.54) 0%,
        rgba(8, 7, 11, 0.32) 52%,
        transparent 100%),
      linear-gradient(180deg,
        rgba(8, 7, 11, 0.44) 0%,
        rgba(8, 7, 11, 0.22) 45%,
        rgba(8, 7, 11, 0.40) 100%);
  }
}

/* ============================================================
   REMAINING MOBILE OVERFLOW
   Two blocks were still wider than their parent: the carousel
   slide (its grid track would not shrink) and the contact rows
   (a long email address with nothing allowed to wrap). Both
   need min-width:0 — a grid/flex child defaults to min-content
   width, which is what stops it shrinking.
   ============================================================ */

.cl-picks__slide,
.cl-picks__body,
.cl-picks__art,
.cl-contact__links,
.cl-contact__link,
.cl-contact__linkBody,
.cl-drawer__lineBody {
  min-width: 0;
}

.cl-contact__value,
.cl-contact__label {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 767px) {
  .cl-picks__slide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
  }
  .cl-picks__body,
  .cl-picks__name,
  .cl-picks__namebtn {
    max-width: 100%;
    min-width: 0;
  }
  .cl-picks__namebtn { overflow-wrap: anywhere; }

  .cl-contact { padding: 22px 16px; }
  .cl-contact__links { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cl-contact__link {
    padding: 14px;
    gap: 12px;
    max-width: 100%;
  }
  .cl-contact__value { font-size: 13.5px; }
  .cl-contact__icon { width: 38px; height: 38px; }
}

/* ============================================================
   FOOTER — icon beside the label, even rhythm
   The link icons were stacking above their text because the
   anchors were not flex containers, and the columns had no
   shared vertical rhythm, so each one ended at a different
   height with different gaps.
   ============================================================ */

.cl-footer__grid {
  align-items: start;
  gap: 22px;
}

.cl-footer__col {
  display: flex;
  flex-direction: column;
  padding: 20px 18px;
  min-width: 0;
}

.cl-footer__heading {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(155, 93, 229, 0.22);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-50);
}

.cl-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cl-footer__list li { margin: 0; }

/* The fix: one line, icon and label on the same baseline. */
.cl-footer__list a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  min-height: 34px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--mist-300);
  transition: color var(--transition);
}
.cl-footer__list a:hover { color: var(--mist-50); }

.cl-footer__list .cl-nav-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  opacity: 0.75;
  color: var(--ui-400);
}
.cl-footer__list .cl-nav-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Columns end level with one another. */
.cl-footer__col { align-self: stretch; }

.cl-footer__brand { padding: 20px 18px; }
.cl-footer__blurb {
  margin: 14px 0 12px;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 34ch;
}
.cl-footer__ruo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--mist-500);
}

.cl-footer__bottom { padding-top: 18px; }
.cl-footer__disclaimer {
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

@media (max-width: 767px) {
  .cl-footer__grid { gap: 14px; }
  .cl-footer__col,
  .cl-footer__brand { padding: 16px 14px; }
  .cl-footer__list a { justify-content: center; font-size: 14px; min-height: 38px; }
  .cl-footer__heading { text-align: center; }
  .cl-footer__blurb { margin-left: auto; margin-right: auto; }
}

/* ============================================================
   NO OUTLINE ON THE VIALS
   Two things were drawing an edge: a white drop-shadow rim in
   CSS, and the cut's own alpha boundary. The white rim goes
   entirely — a bright line tracing the bottle is exactly what
   makes it look pasted on. What remains is ambient purple with
   no hard radius, so the glass fades into its glow.
   ============================================================ */

.cl-vial__img,
.cl-cardimg__img,
.cl-picks__img,
.cl-picks__art img,
.cl-sticky-cart__vial,
.cl-drawer__thumb img {
  filter:
    saturate(1.02)
    brightness(1.06)
    contrast(1.01)
    drop-shadow(0 0 14px rgba(150, 100, 215, 0.22)) !important;
}

/* The halo loses its last hint of an edge. */
.cl-vial::before,
.cl-cardimg::before,
.cl-picks__art::before {
  filter: blur(26px) !important;
  background: radial-gradient(ellipse at center,
    rgba(172, 128, 240, 0.20) 0%,
    rgba(146, 94, 216, 0.13) 30%,
    rgba(122, 66, 178, 0.07) 52%,
    rgba(110, 58, 160, 0.025) 70%,
    transparent 92%) !important;
}

.cl-vial::after,
.cl-cardimg::after {
  filter: blur(40px) !important;
  background: radial-gradient(ellipse at center,
    rgba(136, 84, 200, 0.085) 0%,
    rgba(108, 56, 158, 0.04) 46%,
    transparent 80%) !important;
}

/* ============================================================
   HERO — less to read, faster to act on
   The stack was: lockup, eyebrow, headline, three lines of
   copy, two buttons, four trust items. A shopper had to read
   past four separate pieces of text before reaching anything
   they could click. Now: headline, one line, buttons.
   ============================================================ */

.cl-hero2__title { margin-bottom: 14px; }

/* The buttons are the point of the section — give them presence. */
.cl-hero2 .cl-hero2__shop{
  min-height: 56px;
  font-size: 13.5px;
}

.cl-hero2__cta { margin-bottom: 30px; }

/* Trust row reads as icons at a glance, so it stays — but quieter, since it
   is reassurance rather than something to act on. */
.cl-hero2__trust { padding-top: 24px; }
.cl-hero2__trustText {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--mist-300);
}

@media (min-width: 960px) {
}

@media (max-width: 767px) {
  .cl-hero2__cta { margin-bottom: 24px; }
  .cl-hero2 .cl-hero2__shop{ min-height: 50px; font-size: 12.5px; }
}

/* ============================================================
   NO CAST SHADOW UNDER THE VIALS — final word
   Several older rules were still applying
   drop-shadow(0 20px 22px rgba(0,0,0,.6)), a hard dark shadow
   offset below each bottle. Against the lit background that is
   the smear that kept reappearing after the image files were
   already clean. This is the only filter these images get.
   ============================================================ */

.cl-vial__img,
.cl-cardimg__img,
.cl-picks__img,
.cl-picks__art img,
.cl-sticky-cart__vial,
.cl-drawer__thumb img {
  filter:
    saturate(1.02)
    brightness(1.06)
    contrast(1.01)
    drop-shadow(0 0 14px rgba(150, 100, 215, 0.22)) !important;
}

/* The CSS brightness lift comes back down too — the labels are supposed to be
   black, and 1.06 on top of the image-level lift was grey-ing them out. */
/* No brightness lift in CSS either. The label black is set in the image files
   to match the original photography (luminance ~12); brightening it here would
   grey it out again, which is what a 1.06 was doing. */
.cl-vial__img,
.cl-cardimg__img,
.cl-picks__img,
.cl-picks__art img,
.cl-sticky-cart__vial,
.cl-drawer__thumb img {
  filter:
    saturate(1.02)
    brightness(1.0)
    contrast(1.0)
    drop-shadow(0 0 14px rgba(150, 100, 215, 0.22)) !important;
}

/* Headline now runs straight into the buttons — it needs the spacing the
   removed line was providing. */
.cl-hero2__title { margin-bottom: 26px; }
@media (max-width: 767px) { .cl-hero2__title { margin-bottom: 22px; } }

/* ============================================================
   SHOP TOOLBAR — result count + sorting
   ------------------------------------------------------------
   One authoritative block. These rules used to live in three
   separate places in this file and fought each other: a
   `margin-left: auto !important` written for the desktop row
   outranked the mobile stack rule, so on a phone the select
   shrank to its own content and hugged the right edge while the
   count stayed pinned left. Nothing below may reintroduce an
   auto margin on .woocommerce-ordering.
   ============================================================ */
.woocommerce .cl-shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* The chips / trust bar directly above already carry a bottom margin, so the
     toolbar adds none of its own on top — two stacked gaps read as dead space. */
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-purple);
}

/* Small print reads better in the body face at natural case — the condensed
   display face in uppercase is a button style, not a sentence style. */
.woocommerce .cl-shop-toolbar .woocommerce-result-count {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-height: 0;
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--mist-300);
}

.woocommerce .cl-shop-toolbar .woocommerce-ordering {
  flex: 0 0 auto;
  margin: 0;
  float: none;
}
.woocommerce .cl-shop-toolbar .woocommerce-ordering select {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--tap);
  padding: 0 38px 0 16px;
  border: 1px solid var(--ink-500);
  border-radius: 10px;
  background: var(--ink-900) var(--cl-chevron) right 14px center / 15px 15px no-repeat;
  color: var(--mist-100);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.woocommerce .cl-shop-toolbar .woocommerce-ordering select:focus {
  border-color: var(--accent-500);
  outline: none;
}
.woocommerce .cl-shop-toolbar .woocommerce-ordering select option {
  background: var(--ink-800);
  color: var(--mist-50);
}

/* Phones: stack the two, centred on the same axis as the cards below.
   The select is capped rather than full-bleed so it reads as a control
   and not as a second page-width bar under the count. */
@media (max-width: 782px) {
  .woocommerce .cl-shop-toolbar {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding-bottom: 14px;
  }
  .woocommerce .cl-shop-toolbar .woocommerce-result-count {
    width: 100%;
    justify-content: center;
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--mist-400);
  }
  .woocommerce .cl-shop-toolbar .woocommerce-ordering {
    width: 100%;
    max-width: 320px;
    margin: 0;
  }
  .woocommerce .cl-shop-toolbar .woocommerce-ordering select {
    width: 100%;
    padding: 0 38px;
    text-align: center;
    text-align-last: center;
  }
}

/* ============================================================
   CART DRAWER — "Continue shopping"
   A quiet secondary route under Checkout. Deliberately not a
   second filled button: two equal-weight buttons stacked makes
   neither of them read as the next step.
   ============================================================ */
.cl-drawer__continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap);
  margin: 10px 0 0;
  padding: 0 14px;
  border: 1px solid rgba(155, 93, 229, 0.28);
  border-radius: 12px;
  background: transparent;
  color: var(--mist-200);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition),
    background-color var(--transition);
}
.cl-drawer__continue svg { flex: 0 0 auto; }
.cl-drawer__continue:hover,
.cl-drawer__continue:focus-visible {
  border-color: var(--accent-500);
  background: rgba(155, 93, 229, 0.10);
  color: var(--mist-50);
}

/* ============================================================
   MOBILE SCROLL FEEL
   ------------------------------------------------------------
   Two things made a phone scroll badly here. First, nothing
   stopped a sideways gesture from rubber-banding the page, so a
   slightly diagonal swipe slid the whole thing left or right
   mid-scroll. Second, the fixed background plate was animating a
   scale AND a ±3% horizontal translate while a full-viewport
   gradient cross-faded on top of it — both repainting every
   frame behind the scrolling content, which is what made the
   scroll feel heavy and made the ground appear to slip sideways.
   The plate still moves. It just moves cheaply, and mostly up
   and down, where it cannot be mistaken for the page shifting.
   ============================================================ */
html {
  overflow-x: clip;
  /* Both axes, not just sideways. Vertically the document could rubber-band
     past its own ends, which is the loose, floaty feel on a phone — and that
     bounce is also what lets a hard fling at the top or bottom drag something
     unexpected into view (Noah, 2026-09-22: "don't let it be too free so it
     can't fuck up"). */
  overscroll-behavior: none;
}
body {
  overflow-x: clip;
  overscroll-behavior: none;
}

@media (max-width: 782px) {
  /* Isolate the plate's repaints from the document. */
  .cl-bg {
    /* layout + paint only. `strict` would add size containment, and this
       element is sized by its insets, not its contents. */
    contain: layout paint;
  }
  .cl-bg__plate {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation: cl-bg-drift-mobile 72s ease-in-out infinite;
  }
  /* A full-screen gradient changing opacity every frame is the single most
     expensive thing on this page during a scroll, and at 0.82–1.0 it is
     barely perceptible. Hold it still on phones. */
  .cl-bg__scrim {
    animation: none;
  }
}

/* Constant scale, and a tenth of the horizontal travel — the plate drifts
   rather than slides. */
@keyframes cl-bg-drift-mobile {
  0%   { transform: scale(1.14) translate3d(-0.4%, 1.6%, 0); }
  50%  { transform: scale(1.14) translate3d(0.4%, -1.6%, 0); }
  100% { transform: scale(1.14) translate3d(-0.4%, 1.6%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-bg__plate { animation: none; }
}

/* ============================================================
   PAY INSTRUCTIONS — the per-gateway note
   Sits under the "Open <app> to pay" button. It carries the one
   thing that stops a payment dead once the customer is inside
   the app (Venmo makes a first-time payer confirm the last four
   digits of the payee's phone number), so it is weighted above
   the generic reminders around it rather than below them.
   ============================================================ */
.cl-pay-extra {
  display: flex;
  gap: 10px;
  margin: 14px 0 0;
  padding: 13px 15px;
  border: 1px solid rgba(155, 93, 229, 0.42);
  border-radius: 12px;
  background: rgba(106, 62, 153, 0.16);
  color: var(--mist-50);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}
.cl-pay-extra::before {
  content: "!";
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--accent-500);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* ============================================================
   COUPON — one row, always open
   ------------------------------------------------------------
   This was WooCommerce's two-step control: a dashed panel saying
   "Have a coupon? Click here to enter your code", which revealed
   a hidden form. Four lines and two taps on a phone to type six
   characters. The theme's own template override (see
   woocommerce/checkout/form-coupon.php) drops the toggle and
   renders the field directly; this styles it as a single row.
   Rules for the old toggle used to live in four separate places
   in this file — they are all deleted, not overridden.
   ============================================================ */
.woocommerce form.checkout_coupon.cl-coupon {
  /* WooCommerce's checkout.js runs `$("form.checkout_coupon").hide()` at init
     — an INLINE display:none — in the same statement that binds its AJAX
     submit handler. Keeping the class keeps the AJAX apply (no page reload);
     !important is what undoes the inline hide. Nothing calls slideToggle any
     more, because the .showcoupon link no longer exists. */
  display: block !important;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}

.cl-coupon__label {
  display: block;
  margin: 0 0 7px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mist-400);
}

.cl-coupon__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.woocommerce form.checkout_coupon .cl-coupon__input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  min-height: var(--tap);
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--ink-500);
  border-radius: 10px;
  background: var(--ink-900);
  color: var(--mist-50);
  font-family: var(--font-body);
  font-size: 16px; /* 16px or iOS zooms the page on focus */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.woocommerce form.checkout_coupon .cl-coupon__input::placeholder {
  color: var(--mist-500);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.woocommerce form.checkout_coupon .cl-coupon__input:focus {
  border-color: var(--accent-500);
  outline: none;
}

.woocommerce form.checkout_coupon .cl-coupon__btn {
  flex: 0 0 auto;
  min-height: var(--tap);
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--ui-500);
  border-radius: 10px;
  background: transparent;
  color: var(--mist-50);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.woocommerce form.checkout_coupon .cl-coupon__btn:hover,
.woocommerce form.checkout_coupon .cl-coupon__btn:focus-visible {
  background: var(--ui-500);
  color: #FFFFFF;
}

/* Inside the checkout modal it is a secondary detail, not a headline. */
body.cl-embed form.checkout_coupon.cl-coupon { margin: 0 0 16px; }

/* `form.login` shared the deleted coupon rule and had no other dark-theme
   styling, so it is declared here rather than left to WooCommerce's light
   defaults. */
.woocommerce form.login {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-md);
  color: var(--mist-300);
}

/* ============================================================
   PAYMENT SECTION — icons with material, type that carries
   ------------------------------------------------------------
   Measured on the live embedded checkout before touching this:
     - the acknowledgement label computed to line-height 30px on
       15px type (2.0) because WooCommerce's own
       `.woocommerce form .form-row label { line-height: 2 }` is
       (0,1,2) and the theme's rule was (0,1,1)
     - its colour computed to rgb(139,132,150) — a --mist-400
       !important meant for field labels was winning over the
       --mist-100 !important meant for checkbox rows
   Both are answered here at a specificity that actually wins,
   rather than by adding another hopeful !important upstream.
   ============================================================ */

/* ---------- Brand marks: real material, not flat swatches ---------- */
:root {
  /* Fine grain. Without it the tiles read as coloured rectangles; with it
     they read as pressed plastic, which is what makes them look like the
     apps people recognise. */
  --cl-pay-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

.woocommerce-checkout #payment ul.payment_methods li > label::before {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  -webkit-mask: none;
  mask: none;
  background:
    /* glyph */
    var(--cl-pay-icon) center / 19px 19px no-repeat,
    /* grain */
    var(--cl-pay-grain) center / 64px 64px,
    /* top gloss */
    linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 52%),
    /* corner sheen */
    radial-gradient(120% 95% at 28% 6%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 62%),
    /* base */
    var(--cl-pay-bg, var(--ink-600));
  background-blend-mode: normal, overlay, normal, normal, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 4px 12px -4px var(--cl-pay-bg, rgba(0, 0, 0, 0.6));
}

/* The chosen one lifts slightly — the tile reacts, not just the card. */
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) label::before {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 6px 18px -5px var(--cl-pay-bg, rgba(0, 0, 0, 0.6));
}

/* ---------- Method name: bolder, lit, and on one line ---------- */
.woocommerce-checkout #payment ul.payment_methods li label {
  align-items: center;
  gap: 14px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--mist-50);
  text-shadow:
    0 1px 2px rgba(8, 7, 11, 0.9),
    0 0 14px rgba(155, 93, 229, 0.30);
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) label {
  text-shadow:
    0 1px 2px rgba(8, 7, 11, 0.9),
    0 0 16px rgba(155, 93, 229, 0.55);
}

/* ---------- The selected method's blurb ---------- */
.woocommerce-checkout #payment div.payment_box {
  margin: 0 14px 14px;
  padding: 13px 15px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mist-200);
}

/* ---------- Acknowledgement: the thing that gates the order ---------- */
.woocommerce-checkout .cl-acknowledgement label,
body.cl-embed .cl-acknowledgement label,
.woocommerce form .form-row.cl-acknowledgement label {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 2px 0;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--mist-100) !important;
}

/* A real checkbox, not the browser's default white slab. */
.woocommerce-checkout .cl-acknowledgement input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 1.5px solid rgba(155, 93, 229, 0.55);
  border-radius: 6px;
  background: var(--ink-900);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.woocommerce-checkout .cl-acknowledgement input[type="checkbox"]:checked {
  border-color: var(--ui-500);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
    var(--ui-500);
}

/* ---------- Privacy line: fine print, but readable fine print ---------- */
.woocommerce-checkout .woocommerce-privacy-policy-text,
body.cl-embed .woocommerce-privacy-policy-text {
  margin: 0 0 16px;
}
.woocommerce-checkout .woocommerce-privacy-policy-text p,
body.cl-embed .woocommerce-privacy-policy-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mist-300);
}
.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--accent-300);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Reclaim the text column ----------
   The acknowledgement sat inside three nested paddings — the embed's main
   (18px), .place-order (16px) and its own panel (18px) — 52px a side, which
   squeezed a 186-character legal sentence into a 34-character column. The
   wrapper contributes nothing visually, so it stops contributing padding;
   the panel keeps a little less. Measured result: 34 -> ~42 characters a
   line, without touching a word of the acknowledgement itself. */
@media (max-width: 782px) {
  /* WooCommerce sets this with `.woocommerce-checkout #payment div.form-row`
     — an ID selector, so a plain class rule never wins. Match its shape. */
  .woocommerce-checkout #payment div.form-row.place-order,
  body.cl-embed #payment div.form-row.place-order {
    padding-left: 0;
    padding-right: 0;
  }
  .woocommerce-checkout .cl-acknowledgement,
  body.cl-embed .cl-acknowledgement {
    padding: 14px;
  }
  .woocommerce-checkout .cl-acknowledgement label,
  body.cl-embed .cl-acknowledgement label {
    gap: 10px;
  }
}

/* ============================================================
   SHOP HEADER — same ground as the homepage hero
   ------------------------------------------------------------
   The shop page read as a flat black slab while the homepage
   showed the moving plate. Two causes, both here:
     - .cl-shop-header carried `background: var(--ink-950)`, a
       fully opaque fill, so the plate could never show through
     - its ::before laid a 0.90 radial scrim on top of that
   The copy still needs a wash to stay legible over rock, so the
   scrim stays — at the weight the hero uses, not double-dark.
   ============================================================ */
.woocommerce .cl-shop-header,
.cl-shop-header {
  padding: 30px 0 26px;
  background: transparent;
  border-bottom: 0;
}
@media (min-width: 1024px) {
  .woocommerce .cl-shop-header,
  .cl-shop-header { padding: 48px 0 40px; }
}

.cl-shop-header::before {
  inset: -24px -40px;
  background: radial-gradient(120% 115% at 50% 45%,
    rgba(8, 7, 11, 0.74) 0%,
    rgba(8, 7, 11, 0.46) 56%,
    rgba(8, 7, 11, 0) 100%);
}

/* ---------- Trust row: the homepage's layout, not a stacked list ----------
   The hero renders four items as a 2-up grid on phones — icon above a short
   caps label, separated by hairlines. The shop's version stacked them one per
   row inside a bordered slab, which ate most of the first screen and looked
   like a different site. Same content, same shape as the hero. */
@media (max-width: 782px) {
  .cl-trustbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 6px;
    margin: 0 0 22px;
    padding: 16px 10px;
    background: rgba(11, 9, 16, 0.55);
    border-color: rgba(155, 93, 229, 0.22);
  }
  .cl-trustbar__item {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    text-align: center;
    border-left: 1px solid rgba(155, 93, 229, 0.30);
  }
  .cl-trustbar__item:nth-child(odd) { border-left: 0; }

  .cl-trustbar__icon { color: #8D4BD0; }

  .cl-trustbar__text strong {
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.45;
    text-transform: uppercase;
    color: var(--mist-50);
  }
  /* The hero shows the label alone. The sub-line is the difference between
     four tidy tiles and eight lines of grey text on the first screen. */
  .cl-trustbar__text > span { display: none; }
}

/* ============================================================
   HOW ORDERING WORKS — panel off, heading front and centre
   ------------------------------------------------------------
   Two separate grounds were stacked here: a fill on .cl-intent
   itself (declared in three places, last one 0.58 alpha) and a
   solid --ink-900 panel with a 2px glowing border on its
   .container. Between them the moving plate never showed. Both
   go; the step cards keep their own borders, so the section
   still reads as a group without being boxed.
   ============================================================ */
.cl-intent {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 28px 0 22px;
}

.cl-intent .container {
  padding-block: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The heading is rendered from CSS content, not markup — it is the section's
   aria-label made visible. Big, centred, and lit. */
.cl-intent::before {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 auto 20px;
  padding: 0 16px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  /* White, not purple. The purple version was the least legible type on the
     page — a mid-tone over a mid-tone plate. Every headline that reads well
     here (.cl-hero2__title, .cl-shop-header h1, .cl-picks__name) is white with
     TWO near-black layers doing the contrast and the purple only haloing
     outside the letterforms. Same stack, so this matches them exactly. */
  color: #FFFFFF;
  /* Byte-for-byte the computed stack on .cl-hero2__title — read off the live
     page rather than approximated, so the two headlines are the same object. */
  text-shadow:
    0 1px 1px rgb(8, 7, 11),
    0 2px 7px rgb(8, 7, 11),
    0 4px 20px rgba(8, 7, 11, 0.92),
    0 0 34px rgba(155, 93, 229, 0.65);
}

@media (min-width: 700px) {
  .cl-intent::before { font-size: 38px; margin-bottom: 26px; }
  .cl-intent .container { padding-inline: 16px; }
}

/* ---------- Category chips: centred, not ragged ----------
   They were a left-aligned flex row, so an odd count left the last row hanging
   under the left edge — three chips then two, which reads as a mistake rather
   than a layout. Centring makes any count look deliberate. */
.cl-chips {
  justify-content: center;
  gap: 10px 8px;
}
@media (max-width: 782px) {
  .cl-chips { margin-bottom: 20px; }
}

/* ============================================================
   BREADCRUMB — quiet text, centred with everything else
   ------------------------------------------------------------
   It was two bordered pills with a chevron between them, pinned
   left while the title, lede, trust row and chips were all
   centred. Two heavy boxes to say "you are on the shop page",
   competing with the actual buttons on the page, and the only
   left-aligned thing in a centred header.
   Now: small caps, no boxes, centred, with the current page the
   brighter of the two. It stops being a control and goes back
   to being a label.
   ============================================================ */
.cl-breadcrumb ol {
  justify-content: center;
  gap: 8px;
}

.cl-breadcrumb .cl-crumb {
  min-height: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.cl-breadcrumb a.cl-crumb {
  color: var(--mist-400);
  background: none;
  border: 0;
  text-decoration: none;
  transition: color var(--transition);
}
.cl-breadcrumb a.cl-crumb:hover,
.cl-breadcrumb a.cl-crumb:focus-visible {
  color: var(--accent-300);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cl-breadcrumb .cl-crumb--current {
  color: var(--mist-100);
  background: none;
  border: 0;
}

/* Smaller, lighter chevron to match the reduced type. */
.cl-breadcrumb li + li::before {
  width: 5px;
  height: 5px;
  border-right-width: 1.3px;
  border-bottom-width: 1.3px;
  border-color: rgba(155, 93, 229, 0.55);
  opacity: 0.9;
}

@media (max-width: 600px) {
  .cl-breadcrumb { margin-bottom: 14px; }
  .cl-breadcrumb .cl-crumb { font-size: 10.5px; padding: 2px 0; min-height: 0; }
}

/* ============================================================
   CATALOG HEADER — statement title, live figures, one CTA
   ------------------------------------------------------------
   Same structure as the reference: breadcrumb, oversized mixed-
   case headline with one accented word, lede, hairline, a row
   of figures, then a single button. Rendered in the CORE LABS
   palette rather than the reference's pink-on-white.
   Every figure is counted from the database at render time —
   see corelabs_catalog_stats().
   ============================================================ */

/* The shop header centres everything; this one reads left, like the
   reference — a long headline centred at this size looks like a poster. */
.woocommerce-shop .cl-shop-header .container {
  text-align: left;
}
.woocommerce-shop .cl-shop-header .cl-breadcrumb ol { justify-content: flex-start; }
.woocommerce-shop .cl-shop-header__title::after { margin-left: 0; }
@media (min-width: 783px) {
  .woocommerce-shop .cl-shop-header__title::after { left: 0; transform: none; }
}

.woocommerce-shop .cl-shop-header__lede {
  max-width: 46ch;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--mist-300);
}

/* ---- the figures row ---- */
.cl-catalog__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 0;
  margin: 0 0 26px;
  padding: 0;
}
@media (min-width: 720px) {
  .cl-catalog__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cl-catalog__stat {
  min-width: 0;
  padding: 0 18px;
  border-left: 1px solid rgba(155, 93, 229, 0.30);
}
.cl-catalog__stat:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 719px) {
  .cl-catalog__stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}
.cl-catalog__stat dt {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mist-400);
}
.cl-catalog__stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  text-shadow:
    0 1px 1px rgb(8, 7, 11),
    0 2px 7px rgb(8, 7, 11),
    0 0 26px rgba(155, 93, 229, 0.5);
}

/* ---- the one button ---- */

@media (max-width: 782px) {
  .woocommerce-shop .cl-shop-header__lede { font-size: 15px; margin-bottom: 18px; }
  .cl-catalog__stats { gap: 14px 0; margin-bottom: 20px; }
}

/* Two corrections found by measuring the live page, not by eye:

   1. The old header title carries its own ::after underline (68x4px). With
      .cl-catalog__rule below it that is two rules stacked. The new one stays,
      because it sits after the lede where the reference puts it.
   2. A mobile rule centres the title and lede with higher specificity than the
      container's text-align, so the headline read centred while the figures
      read left. Both go left on the catalog page. */
.woocommerce-shop .cl-shop-header .cl-shop-header__lede{
  text-align: left !important;
  margin-left: 0;
  margin-right: 0;
}
.woocommerce-shop .cl-shop-header .cl-shop-header__lede { max-width: 46ch; }

/* ============================================================
   CATALOG HEADER — shine pass
   ------------------------------------------------------------
   Deliberately further from the reference: theirs is flat ink
   on white with hairline dividers. This one is lit — a light
   sweeping across the accent word, a glass plate under the
   figures with a rim highlight, gradient numerals, and a
   breathing rule. Everything animated here moves only
   background-position or opacity on a small area, so it stays
   off the scroll path that was made jank-free earlier.
   ============================================================ */

/* A light passes across "Full" rather than it sitting still. */
@keyframes cl-sheen {
  0%   { background-position: 135% 0; }
  100% { background-position: -35% 0; }
}

/* The white words get a faint lift too, so the accent is not the only thing
   with any material to it. */

/* A wide, very soft spotlight behind the headline block. */
.woocommerce-shop .cl-shop-header::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -6%;
  width: 62%;
  height: 120%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 55% at 30% 40%,
    rgba(123, 63, 178, 0.30) 0%,
    rgba(123, 63, 178, 0.10) 45%,
    rgba(123, 63, 178, 0) 100%);
}

/* The rule breathes instead of sitting flat. */

/* ---- figures on a glass plate, not bare dividers ---- */
.cl-catalog__stats {
  position: relative;
  gap: 18px 0;
  padding: 18px 16px;
  border: 1px solid rgba(155, 93, 229, 0.30);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(155, 93, 229, 0.10) 0%, rgba(155, 93, 229, 0) 55%),
    rgba(11, 9, 16, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(155, 93, 229, 0.06),
    0 0 34px -10px rgba(123, 63, 178, 0.55),
    0 20px 44px -30px rgba(0, 0, 0, 0.95);
}

/* Numerals get the same gradient treatment as the accent word — this is the
   clearest break from the reference, where the figures are plain black. */
/* Solid white, lit by a shadow stack — NOT gradient-clipped.
   Gradient text cannot take a text-shadow, so its glow has to come from
   drop-shadow filters, and each stacked filter paints its own dark copy
   behind the glyphs. That is what dulled the vial cut-outs earlier in this
   project, and figures are the last thing on the page that should be hard to
   read. The gradient stays on "Full" alone, where it is the accent. */
.cl-catalog__stat dd {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #FFFFFF;
  filter: none;
  text-shadow:
    0 1px 1px rgb(8, 7, 11),
    0 2px 7px rgb(8, 7, 11),
    0 0 22px rgba(201, 165, 255, 0.55),
    0 0 44px rgba(155, 93, 229, 0.40);
}
.cl-catalog__stat dt { color: var(--mist-300); }

/* ---- the button gets a gloss, and lights up when pressed ---- */

@media (prefers-reduced-motion: reduce) {
}

/* ============================================================
   SITE-WIDE — heavier type, with a gloss on it
   ------------------------------------------------------------
   Three things at once, because they are the same problem:
     BOLDER   body copy moves 400 -> 500 and secondary text
              500 -> 600. Headings were already 700+; the thin
              thing on the page was always the running text.
     READABLE the muted greys were lifted at the token level
              (style.css). --mist-500 measured 3.7:1 on the page
              ground, which fails the 4.5:1 floor for body text
              outright — that is the "hard to read" text. It is
              6.4:1 now, with 300 and 400 lifted to 11.5 and 8.7.
     GLOSSY   a hairline white highlight along the TOP edge of
              each glyph, over the existing dark/purple stack.
              This is how you get gloss on type without
              background-clip, which would kill the glow and
              paint dark copies behind the letters.
   ============================================================ */

/* ---- weight ---- */
body,
p, li, dd, td,
.woocommerce p,
.cl-content p {
  font-weight: 500;
}

.cl-shop-header__lede,
.cl-intent__text,
.cl-trustbar__text,
.woocommerce-result-count,
.cl-drawer__note,
.cl-pay-fallback,
.woocommerce-privacy-policy-text p,
.cl-acknowledgement label {
  font-weight: 600 !important;
}

strong, b { font-weight: 800; }

/* ---- gloss ----
   A 1px light edge above the glyph plus the existing dark body underneath
   reads as a lit, slightly wet surface. Applied to display type only: on
   14px body copy a highlight this tight just looks like fringing. */
.cl-hero2__title,
.cl-hero2__titleTop,
.cl-shop-header__title,
.cl-catalog__stat dd,
.cl-picks__name,
.cl-contact__title,
.cl-intent__text strong,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.cl-vial__pill,
main > .container > article > h1,
.cl-content h2,
.cl-content h3 {
  text-shadow:
    /* the gloss: a hairline of light along the top edge */
    0 -1px 0 rgba(255, 255, 255, 0.30),
    0 1px 0 rgba(255, 255, 255, 0.10),
    /* body: keeps it readable over the plate */
    0 1px 2px rgb(8, 7, 11),
    0 2px 8px rgba(8, 7, 11, 0.95),
    /* halo */
    0 0 24px rgba(155, 93, 229, 0.50),
    0 0 48px rgba(123, 63, 178, 0.28);
}

/* The accent word is gradient-filled, so it takes no text-shadow at all —
   its gloss is already in the moving highlight of the gradient itself. */

/* Real 800 now that Inter 800/900 are actually loaded — this was being
   synthesised by the browser before, which is why it looked smeared rather
   than heavy. */
.cl-catalog__stat dd { font-weight: 800; }

/* ============================================================
   MOBILE HEADER — name the controls
   ------------------------------------------------------------
   Four 48px glyphs sat side by side with no visible text: home,
   account, cart, menu. Every one had a correct aria-label, so a
   screen reader was fine — a sighted person on a phone had to
   guess, which is why Home and the nav were hard to find.
   A caption under each turns guessing into reading. The labels
   are aria-hidden: the buttons already announce themselves, and
   without it a screen reader says "Home Home".
   ============================================================ */
.cl-header .cl-icon-btn {
  flex-direction: column;
  gap: 3px;
  height: auto;
  min-height: 48px;
  padding: 5px 8px 4px;
  border-radius: 12px;
}

.cl-icon-btn__cap {
  display: block;
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--mist-300);
  white-space: nowrap;
}
.cl-header .cl-icon-btn:hover .cl-icon-btn__cap,
.cl-header .cl-icon-btn:focus-visible .cl-icon-btn__cap { color: var(--mist-50); }


/* The cart badge was positioned against a square button; the button is taller
   now, so pin the badge to the glyph rather than the box. */
.cl-header .cl-cart-btn { position: relative; }
.cl-header .cl-cart-btn .cl-cart-count {
  top: 1px;
  right: 2px;
}

/* Desktop keeps the bare icons — the full nav is visible there, so captions
   would just be noise beside it. */
@media (min-width: 1024px) {
  .cl-icon-btn__cap { display: none; }
  .cl-header .cl-icon-btn {
    flex-direction: row;
    height: 48px;
    padding: 0;
  }
  .cl-header .cl-home-btn { border: 0; background: none; }
}

/* Measured at 375px: logo ran to 138px, the first button started at 132 — a
   6px overlap, with the logo and the four buttons needing 335px of exactly
   335px available. Captions cost width, so the width comes back from padding
   and the logo rather than from dropping the labels. */
@media (max-width: 480px) {
  .cl-header .cl-logo__img,
  .cl-header .cl-logo img { max-width: 104px; }

  .cl-header .cl-icon-btn { padding: 5px 5px 4px; }
}
@media (max-width: 380px) {
  .cl-header .cl-logo__img,
  .cl-header .cl-logo img { max-width: 92px; }
  .cl-header .cl-icon-btn { padding: 5px 3px 4px; }
}

/* ============================================================
   LEGIBILITY PASS — crisp text, filled buttons
   ------------------------------------------------------------
   The reference reads easily because its type is FLAT: near-
   black on white, high contrast, no halo at all. What we had
   been doing — a purple glow on everything down to 14px body
   copy — is the opposite. A halo on small text spreads the
   letterforms into their own background and costs the exact
   thing it was meant to add.
   So: the glow stays on big display type, where it is the brand
   and the letters are large enough to carry it, and comes OFF
   everything else. Body copy gets contrast instead of light.
   Not a copy of the reference: it keeps the dark ground, the
   purple, the uppercase display face, and the buttons are a
   lit gradient rather than the reference's flat fill.
   ============================================================ */

/* ---- body copy: contrast, not glow ---- */
body,
p, li, dd, dt, td, th, label, span, a,
.woocommerce p,
.cl-content p,
.cl-content li,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.cl-intent__text,
.cl-intent__text strong,
.cl-trustbar__text,
.cl-trustbar__text strong,
.cl-picks__name,
.cl-vial__pill,
.woocommerce-result-count,
.woocommerce-breadcrumb,
.cl-crumb,
.cl-drawer__lineName,
.cl-catalog__stat dt {
  text-shadow: none;
}

/* Text that sits directly on the moving plate still needs separation from it,
   but a tight dark edge does that — a purple halo does not. */
.cl-shop-header__lede,
.cl-intent__text,
.cl-trustbar__text,
.cl-picks__name,
.cl-vial__pill,
.woocommerce-result-count,
.cl-crumb,
.cl-catalog__stat dt {
  text-shadow: 0 1px 2px rgba(8, 7, 11, 0.95);
}

/* Running text moves up to the brightest tier. Measured 15.5:1 on the page
   ground, against 11.5:1 before. */
.cl-content p,
.cl-content li,
.woocommerce p,
.cl-shop-header__lede,
main > .container > article p {
  color: var(--mist-100);
}

/* Product names and prices are what people scan — pure white, no effects. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount {
  color: #FFFFFF;
}

/* ---- display type keeps the light ---- */
.cl-hero2__title,
.cl-hero2__titleTop,
.cl-shop-header__title,
.cl-intent::before,
.cl-catalog__stat dd,
.cl-contact__title,
.cl-content h2,
.cl-content h3,
main > .container > article > h1 {
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.22),
    0 1px 2px rgb(8, 7, 11),
    0 2px 8px rgba(8, 7, 11, 0.95),
    0 0 26px rgba(155, 93, 229, 0.45);
}

/* ============================================================
   BUTTONS — filled, lit purple
   Reverses the earlier outlined-at-rest treatment. A lit
   gradient with a gloss edge rather than the reference's flat
   single colour, so it still reads as this site.
   ============================================================ */
.cl-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-message a.button,
.wc-block-components-button,
.cl-btn--secondary,
.cl-atc__btn,
.cl-drawer__cta {
  position: relative;
  border: 1px solid rgba(201, 165, 255, 0.50);
  background: linear-gradient(180deg, #9B5DE5 0%, #7B3FB2 100%);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(8, 7, 11, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 0 22px -6px rgba(155, 93, 229, 0.90),
    0 10px 26px -16px rgba(0, 0, 0, 0.95);
}

.cl-btn:hover, .cl-btn:focus-visible,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover,
.cl-btn--secondary:hover,
.cl-atc__btn:hover,
.cl-drawer__cta:hover {
  background: linear-gradient(180deg, #AE74F0 0%, #8A4AC4 100%);
  border-color: rgba(230, 212, 255, 0.70);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 0 30px -4px rgba(155, 93, 229, 1),
    0 14px 30px -18px rgba(0, 0, 0, 0.95);
}

/* Secondary stays filled — just a shade quieter, so two buttons side by side
   still have an order to them rather than shouting together. */
.cl-btn--secondary,
.cl-drawer__continue {
  background: linear-gradient(180deg, #7B3FB2 0%, #5E2E8A 100%);
  border-color: rgba(155, 93, 229, 0.45);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 18px -8px rgba(155, 93, 229, 0.75),
    0 8px 22px -16px rgba(0, 0, 0, 0.95);
}
.cl-drawer__continue:hover {
  background: linear-gradient(180deg, #8A4AC4 0%, #6B3799 100%);
  color: #FFFFFF;
}

/* A hairline of light across the top of every button. */
.cl-btn::before,
.woocommerce a.button::before, .woocommerce button.button::before,
.cl-atc__btn::before,
.cl-drawer__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 55%);
}

/* Disabled / out-of-stock must not look pressable. */
.cl-btn[disabled], .cl-btn:disabled,
.woocommerce button.button:disabled,
.cl-atc__btn[disabled], .cl-atc__btn:disabled {
  background: var(--ink-800) !important;
  border-color: var(--ink-600) !important;
  color: var(--mist-400) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.cl-btn[disabled]::before,
.cl-atc__btn[disabled]::before { display: none; }

/* ---- Figures row: sized to fit, so nothing breaks mid-word ----
   At the previous size the values overran their columns: "Lot numbered" split
   across two lines and the phone number broke as "(850) 427-" / "1033", which
   is worse than useless — a number split across a line is hard to read back.
   The values step down, the phone never wraps, and the row balances. */
.cl-catalog__stat dd {
  font-size: clamp(1.05rem, 4.4vw, 1.45rem);
  line-height: 1.22;
  letter-spacing: 0;
  overflow-wrap: break-word;
}
.cl-catalog__stat dt {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--mist-300);
}
/* A phone number is a single token — never let it break. */
.cl-catalog__stat:last-child dd {
  white-space: nowrap;
  font-size: clamp(0.95rem, 4vw, 1.3rem);
}
.cl-catalog__stats {
  align-items: start;
  padding: 16px 14px;
}
.cl-catalog__stat { padding: 0 14px; }

@media (max-width: 719px) {
  .cl-catalog__stat { padding: 0 10px; }
  .cl-catalog__stat dd { font-size: 1.05rem; }
  .cl-catalog__stat:last-child dd { font-size: 0.98rem; }
}

/* ============================================================
   HOMEPAGE HERO — pulled away from the reference
   ------------------------------------------------------------
   The reference lays four icon-and-label cards in a row under
   the buttons. Ours did the same thing, which is the bit that
   read as borrowed. It becomes one continuous strip instead:
   a hairline above, items inline, separated by dots rather than
   boxed — closer to a masthead line than a feature grid.
   The COA button is gone (it led to an empty portal); the
   second action is now a quiet text link, so there is one
   filled button on the page and it is the one that matters.
   ============================================================ */

.cl-hero2__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Quiet second action — underlined text, not a competing button. */
.cl-hero2__aside {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-300);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(155, 93, 229, 0.55);
  transition: color var(--transition);
}
.cl-hero2__aside:hover,
.cl-hero2__aside:focus-visible { color: var(--mist-50); }

/* ---- trust strip ---- */
.cl-hero2__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 0;
  margin: 26px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(155, 93, 229, 0.26);
  grid-template-columns: none;
}

.cl-hero2__trustItem {
  flex: 0 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-left: 0;
  white-space: nowrap;
}

/* A dot between items instead of a rule around each. */
.cl-hero2__trustItem + .cl-hero2__trustItem::before {
  content: "";
  position: absolute;
  margin-left: -16px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(155, 93, 229, 0.75);
}
.cl-hero2__trustItem { position: relative; }

.cl-hero2__trustIcon svg { width: 15px; height: 15px; }
.cl-hero2__trustText {
  font-size: 9.5px;
  letter-spacing: 0.13em;
  color: var(--mist-200);
}

/* Phones: two per row, dots off — at this width the strip would wrap into a
   ragged shape and the separators would land in the wrong places. */
@media (max-width: 700px) {
  .cl-hero2__trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 6px;
    margin-top: 22px;
  }
  .cl-hero2__trustItem {
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 0 4px;
    white-space: normal;
    text-align: center;
  }
  .cl-hero2__trustItem + .cl-hero2__trustItem::before { display: none; }
  .cl-hero2__cta { gap: 14px; }
  .cl-hero2__aside { font-size: 12px; }
}

/* ============================================================
   FULL CATALOG HERO
   ------------------------------------------------------------
   No background image of its own. The site's rock plate is
   already fixed behind every page, so a second one here would
   double the texture — only a haze is laid over it.
   The vial is an independent layer. Motion is split across two
   nested elements on different durations (7.5s translate,
   10s rotate) so the loop never lines up with itself and the
   drift reads as continuous rather than looped.
   Transforms only — nothing animates top/left/width/height.
   ============================================================ */
.cl-chero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 500px;
  padding: 38px 0 34px;
  overflow: visible; /* the vial must never be clipped mid-float */
}
@media (min-width: 1024px) { .cl-chero { min-height: 560px; } }

/* Purple atmosphere over the existing plate — matte, no neon. */
.cl-chero__haze {
  position: absolute;
  /* Extends well past the section so the fade finishes outside it. Ending the
     overlay at the section boundary is what drew a hard line across the page:
     the old gradient closed at 0.70 alpha, so its bottom edge was a visible
     step against the brighter plate below rather than a transition. */
  inset: -14% -8% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(54% 50% at 28% 40%, rgba(43, 23, 63, 0.66) 0%, rgba(43, 23, 63, 0) 74%),
    radial-gradient(46% 44% at 74% 44%, rgba(123, 63, 178, 0.22) 0%, rgba(123, 63, 178, 0) 72%),
    linear-gradient(180deg,
      rgba(8, 7, 11, 0.74) 0%,
      rgba(8, 7, 11, 0.42) 38%,
      rgba(8, 7, 11, 0.16) 70%,
      rgba(8, 7, 11, 0) 100%);
  /* Belt and braces: dissolve whatever is left of the overlay before it
     reaches the bottom, so there is no seam under any lighting. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0) 100%);
}

.cl-chero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 18px;
  width: 100%;
}
@media (min-width: 900px) {
  .cl-chero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 32px; }
}

/* ---- copy ---- */
.cl-chero__copy { min-width: 0; }

.cl-chero__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mist-300);
}

.cl-chero__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 13vw, 6rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.cl-chero__word { display: block; }
.cl-chero__word--full {
  color: #FFFFFF;
  text-shadow:
    0 1px 2px rgb(8, 7, 11),
    0 3px 14px rgba(8, 7, 11, 0.95),
    0 0 34px rgba(155, 93, 229, 0.30);
}
/* The muted brand purple, not the bright one — the reference artwork is matte
   and a neon headline would fight the scene. */
.cl-chero__word--cat {
  color: #9B5DE5;
  text-shadow:
    0 1px 2px rgb(8, 7, 11),
    0 3px 14px rgba(8, 7, 11, 0.95),
    0 0 30px rgba(123, 63, 178, 0.45);
}

.cl-chero__lede {
  max-width: 34ch;
  margin: 0 0 22px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--mist-100);
  text-shadow: 0 1px 2px rgba(8, 7, 11, 0.95);
}

.cl-chero__explore {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tap);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mist-200);
  transition: color var(--transition);
}
.cl-chero__explore:hover,
.cl-chero__explore:focus-visible { color: #FFFFFF; }
.cl-chero__explore svg {
  animation: cl-chero-nudge 2.4s ease-in-out infinite;
  color: var(--ui-400);
}
@keyframes cl-chero-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ---- the vial ---- */
.cl-chero__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.cl-chero__float {
  will-change: transform;
  animation: cl-chero-float 7.5s ease-in-out infinite;
}

.cl-chero__vial {
  display: block;
  width: min(300px, 62vw);
  height: auto;
  transform-origin: center center;
  will-change: transform;
  animation: cl-chero-rock 10s ease-in-out infinite;
  /* Restrained. No purple rim — the scene's own lighting carries it. */
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.40));
}
@media (min-width: 900px)  { .cl-chero__vial { width: min(330px, 30vw); } }
@media (min-width: 1280px) { .cl-chero__vial { width: 360px; } }

@keyframes cl-chero-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -18px, 0); }
}
@keyframes cl-chero-rock {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(5deg); }
}

/* ---- mobile: copy first, vial large underneath ---- */
@media (max-width: 899px) {
  .cl-chero {
    min-height: 540px;
    padding: 26px 0 18px;
    text-align: center;
  }
  .cl-chero__inner { gap: 6px; }
  .cl-chero__lede { margin-left: auto; margin-right: auto; }
  .cl-chero__copy { order: 1; }
  .cl-chero__stage { order: 2; }

  /* Shorter travel and a gentler angle, per the brief — a phone screen
     exaggerates both. */
  @keyframes cl-chero-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -11px, 0); }
  }
  @keyframes cl-chero-rock {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(3deg); }
  }
}
@media (max-width: 480px) {
  .cl-chero { min-height: 500px; }
  .cl-chero__vial { width: min(230px, 58vw); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-chero__float,
  .cl-chero__vial,
  .cl-chero__explore svg { animation: none; }
}

/* The Explore link scrolls smoothly, but the DOCUMENT does not.
   `scroll-behavior: smooth` on html applies to every programmatic scroll the
   browser makes, including the jump back to where you were when you hit the
   back button — which turns an instant restore into a visible slide from the
   top of the page. The smooth behaviour is moved onto the one link that wants
   it, in JS, where prefers-reduced-motion is honoured too. */
#cl-catalog-grid { display: block; scroll-margin-top: 96px; }

/* ============================================================
   CATALOG FILTERS + CARDS — to the supplied spec
   ============================================================ */
.cl-chips .cl-chip,
.cl-chips a,
.cl-chips button {
  background: #111015;
  border: 1px solid rgba(155, 93, 229, 0.25);
  color: #F5F3F7;
}
.cl-chips .cl-chip.is-active,
.cl-chips .is-active,
.cl-chips [aria-current="true"],
.cl-chips .current {
  background: #7B3FB2;
  border-color: #7B3FB2;
  color: #FFFFFF;
}

.woocommerce ul.products li.product {
  background: #111015;
  border: 1px solid rgba(155, 93, 229, 0.16);
  border-radius: 18px;
  transition: transform var(--transition), border-color var(--transition);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  border-color: rgba(155, 93, 229, 0.45);
}

.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .cl-cardimg img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform var(--transition);
}
/* Card vials react to hover only — nothing on a card animates by itself, or
   eight bottles drift at once and the grid becomes unreadable. */
.woocommerce ul.products li.product:hover img {
  transform: translateY(-4px) scale(1.015);
}

/* ============================================================
   EXPLORE PRODUCTS — a real button
   ============================================================ */
.cl-chero__explore.cl-btn {
  min-height: var(--tap);
  padding: 0 26px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: #FFFFFF;
}
.cl-chero__explore.cl-btn:hover,
.cl-chero__explore.cl-btn:focus-visible { color: #FFFFFF; }
.cl-chero__explore.cl-btn svg { color: currentColor; }

/* The search submit was declared with its own selector and so escaped the
   filled-button pass — it was still the old outlined treatment. */
.cl-search button[type="submit"] {
  border: 1px solid rgba(201, 165, 255, 0.50);
  background: linear-gradient(180deg, #9B5DE5 0%, #7B3FB2 100%);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 20px -8px rgba(155, 93, 229, 0.85);
}

/* ============================================================
   SPACING RHYTHM — nothing squished
   ------------------------------------------------------------
   One set of floors rather than per-element nudges: a minimum
   line-height for running text, real space under paragraphs and
   above headings, and breathing room inside every panel and
   card. Applied by role, so new sections inherit it too.
   ============================================================ */

/* Running text: 1.65 minimum, and paragraphs never butt together. */
.cl-content p,
.cl-content li,
.woocommerce p,
main > .container > article p,
main > .container > article li,
.cl-shop-header__lede,
.cl-chero__lede,
.woocommerce-privacy-policy-text p {
  line-height: 1.68;
}
.cl-content p,
main > .container > article p,
.woocommerce-checkout .woocommerce p {
  margin: 0 0 1.15em;
}
.cl-content li,
main > .container > article li { margin-bottom: 0.5em; }

/* Headings get air above them and stay tight to what they introduce. */
.cl-content h2,
.cl-content h3,
main > .container > article h2,
main > .container > article h3,
.woocommerce h2, .woocommerce h3 {
  margin-top: 1.9em;
  margin-bottom: 0.55em;
  line-height: 1.26;
}
.cl-content > :first-child,
main > .container > article > :first-child { margin-top: 0; }

/* Small caps need their tracking AND their leading — 0.14em tracking on a
   1.2 line-height is where "squished" comes from. */
.cl-catalog__stat dt,
.cl-trustbar__text strong,
.cl-hero2__trustText,
.cl-chero__eyebrow,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  line-height: 1.45;
}

/* Panels and cards: a floor on internal padding. */
.woocommerce ul.products li.product { padding-bottom: 6px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 14px 16px 4px; }
.woocommerce ul.products li.product .price { padding: 0 16px 10px; }

.cl-content,
main > .container > article { padding: 30px 28px; }
@media (max-width: 782px) {
  .cl-content,
  main > .container > article { padding: 24px 20px; }
}

/* Form rows stop touching each other. */
.woocommerce form .form-row { margin-bottom: 16px; }
.woocommerce form .form-row label { margin-bottom: 6px; display: block; }

/* Section rhythm: every major band gets the same vertical breathing. */
.cl-intent,
.cl-picks,
.cl-contact,
.woocommerce .cl-woo-wrap { padding-block: clamp(26px, 5vw, 48px); }

/* Drawer and checkout lines. */
.cl-drawer__line { padding-block: 14px; }
.cl-drawer__row { margin-bottom: 10px; }

/* The store's most important buttons — add to cart, proceed to checkout,
   place order, search — were held flat by an !important block from the
   earlier outlined-button pass. That block is deleted rather than overridden;
   these now inherit the filled treatment like everything else. */
.cl-search button[type="submit"],
.cl-am__btn--primary,
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button,
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce ul.products li.product .button,
.woocommerce #place_order {
  border: 1px solid rgba(201, 165, 255, 0.50);
  background: linear-gradient(180deg, #9B5DE5 0%, #7B3FB2 100%);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 0 22px -6px rgba(155, 93, 229, 0.90),
    0 10px 26px -16px rgba(0, 0, 0, 0.95);
}
.cl-search button[type="submit"]:hover,
.cl-am__btn--primary:hover,
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce #place_order:hover {
  background: linear-gradient(180deg, #AE74F0 0%, #8A4AC4 100%);
  border-color: rgba(230, 212, 255, 0.70);
  color: #FFFFFF;
}

/* ============================================================
   NO BOXES AROUND PLAIN TEXT
   ------------------------------------------------------------
   Audited the live page for blocks that are text in a
   decorative panel and nothing else. Three qualified: the trust
   row, the contact card and the footer brand block. Each was a
   slab cutting a rectangle out of the background for no reason
   other than to hold four words.
   Kept: product cards (they hold images and need a ground under
   a cut-out vial), the header, the search bar, the mobile panel
   and the contact TILES — those are tap targets, and a target
   with no surface is guesswork.
   ============================================================ */

.cl-trustbar,
.cl-contact,
.cl-footer__brand {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* The trust row keeps its shape through the dividers, not a box. */
.cl-trustbar {
  padding: 4px 0 !important;
  margin-bottom: 30px;
  gap: 22px 0;
}
.cl-trustbar__item {
  padding: 4px 22px;
  border-left: 1px solid rgba(155, 93, 229, 0.28);
}
.cl-trustbar__item:first-child { border-left: 0; padding-left: 0; }
.cl-trustbar__icon { margin-bottom: 2px; }
.cl-trustbar__text strong { margin-bottom: 5px; }

@media (max-width: 782px) {
  .cl-trustbar {
    padding: 2px 0 !important;
    margin-bottom: 24px;
    gap: 22px 4px;
  }
  .cl-trustbar__item { padding: 0 8px; }
  .cl-trustbar__item:nth-child(odd) { padding-left: 8px; }
}

/* Contact block: the heading and copy sit on the page; only the two things
   you actually tap keep a surface. */
.cl-contact { padding: clamp(28px, 5vw, 44px) 0 !important; }
.cl-contact__link {
  background: rgba(155, 93, 229, 0.07);
  border: 1px solid rgba(155, 93, 229, 0.28);
  border-radius: 12px;
  transition: background var(--transition), border-color var(--transition);
}
.cl-contact__link:hover,
.cl-contact__link:focus-visible {
  background: rgba(155, 93, 229, 0.16);
  border-color: rgba(155, 93, 229, 0.55);
}

.cl-footer__brand { padding: 0 !important; }

/* Text that lost its panel now sits straight on the rock plate, and the plate
   is bright in places. A tight dark halo gives the separation the box used to
   give, without drawing a rectangle across the scene. Dark only — a purple
   glow here would smear it, which is the mistake this file already made once. */
.cl-trustbar__text strong,
.cl-trustbar__text span,
.cl-trustbar__icon,
.cl-contact__title,
.cl-contact__lede,
.cl-contact__label,
.cl-contact__value,
.cl-footer__brand p,
.cl-footer__brand span {
  text-shadow:
    0 1px 2px rgb(8, 7, 11),
    0 2px 6px rgba(8, 7, 11, 0.95),
    0 0 14px rgba(8, 7, 11, 0.85);
}
.cl-trustbar__icon { filter: drop-shadow(0 2px 4px rgba(8, 7, 11, 0.95)); }

/* Sub-lines were the first thing to disappear against the rock — lift them. */
.cl-trustbar__text span { color: var(--mist-200); }

/* And keep the row off the brightest band of the plate. */
.cl-trustbar { padding: 10px 0 !important; }

/* ============================================================
   TRUST ROW + CONTACT — panel restored, on purpose
   ------------------------------------------------------------
   Taking the box off put this text straight onto the brightest
   band of the rock plate, and a halo alone was not enough.
   Legibility beats the cleaner look, so the ground comes back —
   but softer than before: no hard 1px rim across the scene,
   a deeper radius, and a gentle top-to-bottom wash so the panel
   reads as a shadow on the rock rather than a pasted rectangle.
   The dark text halo stays as well; together they are what make
   this readable over a moving photographic background.
   ============================================================ */
.cl-trustbar,
.cl-contact {
  background: linear-gradient(180deg,
    rgba(12, 11, 16, 0.86) 0%,
    rgba(12, 11, 16, 0.78) 55%,
    rgba(12, 11, 16, 0.86) 100%) !important;
  border: 1px solid rgba(155, 93, 229, 0.18) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 40px -28px rgba(0, 0, 0, 0.95) !important;
}

.cl-trustbar {
  padding: 22px 18px !important;
  margin-bottom: 28px;
}
@media (max-width: 782px) {
  .cl-trustbar { padding: 20px 12px !important; margin-bottom: 22px; }
}

.cl-contact { padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 34px) !important; }

/* Now that there is a ground again, the sub-lines can sit at their intended
   tone instead of being pushed brighter to survive the rock. */
.cl-trustbar__text span { color: var(--mist-300); }

/* ============================================================
   HOMEPAGE HERO — recomposed away from the split layout
   ------------------------------------------------------------
   Desktop was copy-left / product-right, which is the exact
   structure of the reference and the reason it read as borrowed.
   It becomes a centred podium instead: the three vials sit
   across the full width at the top with the middle one raised,
   the headline lands underneath them, and the actions and trust
   strip centre below that. Same parts, different architecture —
   and it matches how the page already behaves on a phone, so
   the two widths are now one design rather than two.
   ============================================================ */
@media (min-width: 960px) {
  .cl-hero2__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Vials first, across the whole container. */
  .cl-hero2__stageWrap {
    order: -1;
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 4px;
  }
  .cl-hero2__stage {
    min-height: 0;
    gap: clamp(40px, 9vw, 120px);
    align-items: flex-end;
  }
  /* Full width to play with, so they can be bigger — and the centre one
     stands proud, which is what makes it a podium and not a shelf. */
  .cl-vial--left,
  .cl-vial--right { width: clamp(150px, 13vw, 190px); }
  .cl-vial--center { width: clamp(190px, 17vw, 244px); }
  .cl-vial--center { transform: translateY(-26px); }

  .cl-hero2__copy {
    flex: 0 0 auto;
    text-align: center;
    max-width: var(--measure);
    margin: 0 auto;
  }
  .cl-hero2__cta {
    flex-direction: row;
    justify-content: center;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  /* The trust strip spans the container rather than sitting in a column. */
  .cl-hero2__trust {
    width: 100%;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* The raised centre vial must not collide with the headline below it. */
@media (min-width: 960px) {
  .cl-hero2__title { margin-top: 6px; }
}

/* Measured at 1265px: 101px between vials (they read as three separate
   objects, not a group), the trust strip wrapping onto two rows at 640px
   wide, and the hero standing 696px tall. All three tightened. */
@media (min-width: 960px) {
  .cl-hero2__stage { gap: clamp(22px, 3.4vw, 58px); }
  .cl-vial--center { transform: translateY(-20px); }

  .cl-hero2__trust {
    max-width: 960px;
    flex-wrap: nowrap;
    gap: 0;
  }
  .cl-hero2__trustItem { padding: 0 12px; }
  .cl-hero2__trustItem + .cl-hero2__trustItem::before { margin-left: -12px; }
  .cl-hero2__trustText { font-size: 9px; letter-spacing: 0.1em; }

  .cl-hero2 { padding: 30px 0 44px; }
  .cl-hero2__trust { margin-top: 20px; padding-top: 14px; }
}

/* ============================================================
   POPUPS — readable type, room to breathe
   ------------------------------------------------------------
   Measured inside the live cart drawer: "Remove" was rendering
   at 9px, the shipping note at 11px and the help block at
   11.5px. That is below the point where small text is small —
   it is text you squint at, inside the one surface where money
   changes hands. A floor is set across every overlay rather
   than element by element, so nothing new can slip under it.
   ============================================================ */
#cl-drawer,
.cl-co,
.cl-promo,
.cl-am,
.cl-agegate,
.cl-mobile {
  /* Nothing in an overlay goes below 13px. */
  font-size: 15px;
  line-height: 1.6;
}

/* A blanket `min-height: 0` used to live here. It collapsed every button
   inside an overlay to its text height — Secure checkout rendered 17px tall.
   Overlay children are left alone; the specific things that needed a reset
   get it by name below. */
.cl-drawer__lineName,
.cl-drawer__note,
.cl-help__label,
.cl-help__link {
  min-height: 0;
}

/* The specific offenders, lifted and given leading. */
.cl-drawer__remove {
  font-size: 12px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.08em;
  padding: 6px 2px;
  color: var(--mist-300);
}
.cl-drawer__remove:hover { color: var(--mist-50); }

.cl-drawer__note {
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin: 8px 0 14px !important;
  color: var(--mist-300);
}

.cl-help__label,
.cl-help__link {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}
.cl-help__link { font-weight: 700; }

/* ---- breathing room ---- */
.cl-drawer__inner { padding: 0; }
.cl-drawer__lines { padding: 4px 0; }
.cl-drawer__line {
  gap: 14px;
  padding: 16px 18px !important;
}
.cl-drawer__foot { padding: 18px; }
.cl-drawer__row {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.5;
}
.cl-drawer__row--total { font-size: 17px; margin-top: 4px; }
.cl-drawer__cta { margin-top: 6px; }
.cl-drawer__lineName { font-size: 15px; line-height: 1.45; }

/* .cl-co__panel left out on purpose: the checkout page inside the frame has
   its own gutter, and padding here doubled it (293 of 375px left for text). */
.cl-promo__panel,
.cl-agegate__panel { padding: clamp(22px, 5vw, 32px); }

.cl-promo__panel p,
.cl-agegate__panel p,
.cl-co__panel p {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 1em;
}

/* Overlay headings stop sitting on top of their own copy. */
#cl-drawer h2, .cl-co__panel h2, .cl-promo__panel h2, .cl-agegate__panel h2,
.cl-drawer__title, .cl-co__title{
  margin-bottom: 0.6em;
  line-height: 1.26;
}

/* Mobile menu: real tap rows, not a squeezed list. */
.cl-mobile__nav a {
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.4;
}
.cl-mobile__nav li + li { margin-top: 2px; }


/* The logo is a home link too — say so on hover. */
.cl-logo { cursor: pointer; }
.cl-logo:hover { opacity: 0.8; }

/* Every overlay gets a way home, not just a way closed. */
.cl-mobile__nav a[href$="corelabs.group/"],
.cl-mobile__nav .menu-item-home > a {
  background: rgba(155, 93, 229, 0.14);
  border-radius: 10px;
}

/* ============================================================
   SECURE CHECKOUT — lit, with a glare that travels across it
   ------------------------------------------------------------
   The glare is a single skewed highlight moving on translateX
   only, clipped by the button's own overflow. It is a compositor
   job, not a repaint, so it costs nothing on the scroll path —
   the same reason the background plate was rebuilt earlier.
   ============================================================ */
.cl-secure {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 0 26px -4px rgba(155, 93, 229, 0.95),
    0 12px 30px -16px rgba(0, 0, 0, 0.95);
  animation: cl-secure-pulse 3.4s ease-in-out infinite;
}

/* The travelling glare. */
.cl-secure::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -40%;
  width: 34%;
  height: 220%;
  z-index: 1;
  pointer-events: none;
  transform: skewX(-22deg) translateX(0);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.10) 38%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 255, 255, 0.10) 62%,
    rgba(255, 255, 255, 0) 100%);
  will-change: transform;
  animation: cl-secure-glare 4.2s ease-in-out infinite;
}
@keyframes cl-secure-glare {
  0%        { transform: skewX(-22deg) translateX(0); }
  /* Sits off-screen for most of the cycle, so it reads as an occasional
     catch of light rather than a spinning barber pole. */
  55%, 100% { transform: skewX(-22deg) translateX(420%); }
}

@keyframes cl-secure-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      0 0 26px -4px rgba(155, 93, 229, 0.95),
      0 12px 30px -16px rgba(0, 0, 0, 0.95);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.42),
      0 0 34px 0 rgba(155, 93, 229, 1),
      0 12px 30px -16px rgba(0, 0, 0, 0.95);
  }
}

/* Keep the label and lock above the glare. */
.cl-secure > * { position: relative; z-index: 2; }
.cl-secure .cl-lock { flex: 0 0 auto; }

/* The drawer's own ::before gloss would sit over the glare — the glare is the
   gloss now. */
.cl-secure::before { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cl-secure,
  .cl-secure::after { animation: none; }
}

/* ============================================================
   CHECKOUT MODAL — tidy up
   ------------------------------------------------------------
   The address summary is five <p> tags. The site-wide paragraph
   rhythm added 1.15em under each one, so a five-line address
   rendered 429px tall with the lines floating apart. An address
   is a block, not prose — it gets leading, not paragraph gaps.
   ============================================================ */
.cl-am-summary__text p,
.cl-co address p,
.woocommerce-customer-details address p {
  margin: 0 !important;
  line-height: 1.5 !important;
  font-size: 15px;
}
.cl-am-summary__text .cl-am-summary__name {
  margin-bottom: 6px !important;
  font-weight: 800;
  font-size: 16px;
}
.cl-am-summary__text { line-height: 1.5; }
.cl-am-summary {
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
}

/* Sections stop drifting apart. The coupon block left a large hole under
   itself before the shipping heading. */
body.cl-embed form.checkout_coupon.cl-coupon { margin-bottom: 20px; }
body.cl-embed .woocommerce-shipping-fields,
body.cl-embed .woocommerce-billing-fields,
body.cl-embed .woocommerce-additional-fields { margin-top: 4px; }
body.cl-embed h3 { margin: 0 0 4px; }
body.cl-embed .cl-co__sectionLede { margin: 0 0 12px; }

/* The embedded checkout showed the browser's default light scrollbar down the
   right edge — a white stripe inside a black modal. */
body.cl-embed { scrollbar-width: thin; scrollbar-color: rgba(155,93,229,0.45) transparent; }
body.cl-embed::-webkit-scrollbar { width: 10px; }
body.cl-embed::-webkit-scrollbar-track { background: transparent; }
body.cl-embed::-webkit-scrollbar-thumb {
  background: rgba(155, 93, 229, 0.42);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
body.cl-embed::-webkit-scrollbar-thumb:hover { background: rgba(155, 93, 229, 0.65); background-clip: content-box; }
.cl-co__frame,
.cl-co__panel { scrollbar-width: thin; scrollbar-color: rgba(155,93,229,0.45) transparent; }

/* ============================================================
   DRAWER BUTTONS — shorter and thicker
   ------------------------------------------------------------
   They ran the full width of the panel at 44px tall, which made
   them read as thin bars. Narrower and taller reads as a button.
   ============================================================ */
.cl-drawer__cta,
.cl-drawer__continue {
  display: flex;
  width: auto;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  min-height: 56px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: 15px;
  letter-spacing: 0.08em;
}
.cl-drawer__continue {
  min-height: 50px;
  margin-top: 10px;
  font-size: 14px;
}
.cl-drawer__foot { text-align: center; }

/* ============================================================
   CHECKOUT — tighten what the site-wide rhythm loosened
   ------------------------------------------------------------
   The spacing floors set earlier (1.9em above headings, 1.15em
   under paragraphs, 16px between form rows, section padding)
   are right for reading pages and wrong for a form. On checkout
   they stretched the page and pulled every card apart. Checkout
   gets its own, tighter set.
   ============================================================ */
.woocommerce-checkout h3,
body.cl-embed h3 {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}
.woocommerce-checkout .woocommerce p,
body.cl-embed p { margin-bottom: 0.6em; }

.woocommerce-checkout form .form-row,
body.cl-embed form .form-row { margin-bottom: 12px; }

.woocommerce-checkout .cl-co__section,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
body.cl-embed .woocommerce-billing-fields,
body.cl-embed .woocommerce-shipping-fields,
body.cl-embed .woocommerce-additional-fields {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

/* Cards inside checkout stop floating apart. */
.woocommerce-checkout .cl-am-summary,
.woocommerce-checkout .form-row,
body.cl-embed .cl-am-summary { margin-bottom: 12px; }

/* The order column started level with the form's second card, leaving a tall
   void under "Your order". Pin it to the top of its column. */
@media (min-width: 900px) {
  .woocommerce-checkout .woocommerce-checkout-review-order,
  .woocommerce-checkout #order_review {
    align-self: start;
    position: sticky;
    top: 92px;
  }
  .woocommerce-checkout #order_review_heading { margin-top: 0 !important; }
}

/* Section padding floors do not apply to a form. */
.woocommerce-checkout .woocommerce .cl-woo-wrap { padding-block: 22px; }

/* ============================================================
   DRAWER ACTIONS — one axis, two weights
   ------------------------------------------------------------
   Measured in the open drawer: Secure checkout centred on 806px
   and Continue shopping on 837px — 31px apart, because an older
   `.cl-drawer .cl-drawer__cta { margin: 0 }` was beating the
   auto margins. Both are pinned to the same axis here, at a
   specificity that wins.
   They are also deliberately no longer the same size. Two
   identical buttons make the customer choose between equals;
   the one that finishes the order should look like the answer.
   ============================================================ */
.cl-drawer .cl-drawer__foot .cl-drawer__cta,
.cl-drawer .cl-drawer__cta.cl-secure,
#cl-drawer .cl-drawer__cta {
  display: flex !important;
  width: 100% !important;
  max-width: 340px !important;
  margin: 0 auto !important;
  min-height: 60px !important;
  padding: 0 26px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
  letter-spacing: 0.09em !important;
}

#cl-drawer .cl-drawer__continue,
.cl-drawer .cl-drawer__continue {
  display: flex !important;
  width: 100% !important;
  /* Narrower and shorter on purpose — secondary by shape, not just colour. */
  max-width: 250px !important;
  margin: 12px auto 0 !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
}

.cl-drawer__foot { text-align: center; }

/* ============================================================
   CHECKOUT ACCORDION — summary rows that expand
   ------------------------------------------------------------
   Each row states its answer when closed, so the whole order is
   readable at a glance and only the part being edited is open.
   Spacing is deliberately generous: this is the screen where
   crowding costs money.
   ============================================================ */
body.cl-embed .cl-acc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}

body.cl-embed .cl-acc__row {
  border: 1px solid rgba(155, 93, 229, 0.20);
  border-radius: 14px;
  background: rgba(17, 16, 21, 0.85);
  overflow: hidden;
}
body.cl-embed .cl-acc__row:has(.cl-acc__head[aria-expanded="true"]) {
  border-color: rgba(155, 93, 229, 0.42);
}

body.cl-embed .cl-acc__head {
  display: grid;
  grid-template-columns: 96px 1fr 20px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 14px 16px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
body.cl-embed .cl-acc__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-400);
  line-height: 1.4;
}
body.cl-embed .cl-acc__value {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mist-50);
  /* Two lines maximum in the header — the detail is one tap away. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.cl-embed .cl-acc__chev {
  color: var(--mist-400);
  transition: transform var(--transition);
}
body.cl-embed .cl-acc__head[aria-expanded="true"] .cl-acc__chev { transform: rotate(180deg); }

body.cl-embed .cl-acc__body {
  padding: 4px 16px 18px;
  border-top: 1px solid rgba(155, 93, 229, 0.14);
}
body.cl-embed .cl-acc__body > *:first-child { margin-top: 12px; }

/* Rows own their spacing — the generic checkout margins would double it. */
body.cl-embed .cl-acc__body .form-row { margin-bottom: 12px; }
body.cl-embed .cl-acc__body .cl-am-summary { margin: 0; border: 0; padding: 0; background: none; }
body.cl-embed .cl-acc__body #shipping_method { margin: 0; padding: 0; list-style: none; }
body.cl-embed .cl-acc__body #shipping_method li { margin: 0 0 8px; }
body.cl-embed .cl-acc__body #payment { margin: 0; background: none; border: 0; }

/* --- order summary, always open --- */
body.cl-embed .cl-acc__summary {
  margin-top: 4px;
  padding: 16px;
  border: 1px solid rgba(155, 93, 229, 0.22);
  border-radius: 14px;
  background: rgba(17, 16, 21, 0.85);
}
body.cl-embed .cl-acc__summary #order_review_heading { display: none; }
body.cl-embed .cl-acc__summary table { width: 100%; }

@media (max-width: 480px) {
  body.cl-embed .cl-acc__head {
    grid-template-columns: 1fr 18px;
    grid-template-areas: "label chev" "value value";
    gap: 4px 10px;
    min-height: 0;
    padding: 13px 14px;
  }
  body.cl-embed .cl-acc__label { grid-area: label; }
  body.cl-embed .cl-acc__value { grid-area: value; font-size: 14.5px; }
  body.cl-embed .cl-acc__chev  { grid-area: chev; }
}

/* The embed is a single column now that the accordion carries the structure —
   WooCommerce's two-column shell was squeezing the leftovers into a narrow
   strip down the left. */
body.cl-embed .col2-set,
body.cl-embed #customer_details {
  display: block !important;
  width: 100% !important;
  float: none !important;
}
body.cl-embed .col2-set > div,
body.cl-embed #customer_details > div {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}
body.cl-embed [hidden] { display: none !important; }

/* ============================================================
   EMBED LAYOUT RESET — one column, no floats
   ------------------------------------------------------------
   WooCommerce lays checkout out with floated columns
   (.col2-set / .col-1 / .col-2 / #order_review). Moving nodes
   between them left the accordion inheriting a floated,
   half-width context and squeezed it into a strip down the
   side. Rather than chase each container, every block inside
   the embedded form is reset to a plain full-width column and
   the accordion is laid out on top of that.
   ============================================================ */
body.cl-embed form.checkout,
body.cl-embed form.checkout > * {
  display: block;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  clear: both !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.cl-embed form.checkout .col2-set,
body.cl-embed form.checkout .col-1,
body.cl-embed form.checkout .col-2,
body.cl-embed form.checkout #order_review,
body.cl-embed form.checkout #customer_details,
body.cl-embed form.checkout .woocommerce-billing-fields,
body.cl-embed form.checkout .woocommerce-shipping-fields,
body.cl-embed form.checkout .woocommerce-additional-fields {
  display: block !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.cl-embed .cl-acc,
body.cl-embed .cl-acc__row,
body.cl-embed .cl-acc__summary {
  width: 100% !important;
  float: none !important;
}

/* Two-up name fields stay two-up — that pairing is correct. */
body.cl-embed form.checkout .form-row-first,
body.cl-embed form.checkout .form-row-last {
  display: inline-block !important;
  width: calc(50% - 6px) !important;
  clear: none !important;
}
body.cl-embed form.checkout .form-row-first { margin-right: 10px !important; }

/* The free-shipping bar spans the modal rather than being squeezed. */
body.cl-embed .cl-ship {
  width: 100% !important;
  margin: 0 0 16px !important;
}

/* Shipping methods read as a list of choices, not a table row. */
body.cl-embed .cl-acc__body #shipping_method li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(155, 93, 229, 0.20);
  border-radius: 10px;
  background: rgba(8, 7, 11, 0.5);
}
body.cl-embed .cl-acc__body #shipping_method li label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
}

/* The embedded form is declared `display: grid` with its own columns further
   up this file. That is what squeezed the accordion into a 64px strip — my
   earlier reset set `display: block` without !important, so the grid won.
   Kept as a grid, forced to a single column: less disruptive than tearing the
   display mode out from under WooCommerce's own rows. */
body.cl-embed form.checkout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
}
body.cl-embed form.checkout > * {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
}

/* Place order sits below everything, always visible — never behind a
   collapsed row. */
body.cl-embed .cl-acc__place {
  margin-top: 16px;
  text-align: center;
}
body.cl-embed .cl-acc__place .cl-acknowledgement { margin-bottom: 14px; text-align: left; }
body.cl-embed .cl-acc__place #place_order {
  display: flex !important;
  width: 100% !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  min-height: 60px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
}

/* ============================================================
   CHECKOUT POPUP — big, two columns, obvious way out
   ------------------------------------------------------------
   Desktop gets a wide panel instead of a full-bleed sheet: form
   on the left, order summary on the right, the way the reference
   lays it out.
   The columns are made with `display: contents` on #order_review
   so its children join the form's own grid. Nothing is moved in
   the DOM — which is the whole point. WooCommerce refreshes the
   review table and the payment block as separate fragments
   matched BY CLASS, so both survive every recalculation exactly
   where they are. Moving those nodes is what broke checkout
   earlier today.
   ============================================================ */
@media (min-width: 1000px) {
  .cl-co__panel {
    width: min(1180px, 94vw);
    height: min(92dvh, 940px);
    margin: auto;
    border: 1px solid rgba(155, 93, 229, 0.30);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(155, 93, 229, 0.10),
      0 40px 90px -40px rgba(0, 0, 0, 0.95);
  }
  .cl-co { align-items: center; justify-content: center; }
}

/* Two columns inside the frame. */
@media (min-width: 900px) {
  body.cl-embed form.checkout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
    column-gap: 28px !important;
    align-items: start !important;
  }

  /* The children of #order_review join the grid directly. */
  body.cl-embed form.checkout #order_review {
    display: contents !important;
  }

  /* Left: the form and how you pay. */
  body.cl-embed form.checkout #customer_details,
  body.cl-embed form.checkout .woocommerce-checkout-payment,
  body.cl-embed form.checkout #payment,
  body.cl-embed form.checkout .checkout_coupon,
  body.cl-embed form.checkout .cl-ruo-notice {
    grid-column: 1 !important;
  }

  /* Right: what it costs, held in view while the form scrolls. */
  body.cl-embed form.checkout .woocommerce-checkout-review-order-table,
  body.cl-embed form.checkout .cl-ship,
  body.cl-embed form.checkout #order_review_heading {
    grid-column: 2 !important;
  }
  body.cl-embed form.checkout .woocommerce-checkout-review-order-table {
    position: sticky;
    top: 0;
  }
}

/* ---- the X: bigger, and unmistakably the way out ---- */
.cl-co__close {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(155, 93, 229, 0.30);
  background: rgba(155, 93, 229, 0.08);
  color: var(--mist-100);
}
.cl-co__close:hover,
.cl-co__close:focus-visible {
  background: rgba(155, 93, 229, 0.22);
  border-color: rgba(155, 93, 229, 0.55);
  color: #FFFFFF;
}
.cl-co__head { padding: 14px 18px; }

/* The embed column was capped at 560px — right for the single-column phone
   sheet, far too narrow once the popup became a 1180px two-column panel: the
   form and the summary were squeezed into 271px and 248px inside it. The cap
   only applies while the layout is single column. */
@media (min-width: 900px) {
  body.cl-embed .cl-embed__main {
    max-width: 1060px;
    padding: 26px 32px 56px;
  }
}

/* ============================================================
   CHECKOUT ROWS — server-rendered <details>
   ============================================================ */
body.cl-embed form.cl-ck {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}
@media (min-width: 900px) {
  body.cl-embed form.cl-ck {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
    column-gap: 30px !important;
  }
}
body.cl-embed form.cl-ck > * { grid-column: auto !important; min-width: 0; }
body.cl-embed .cl-ck__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

body.cl-embed .cl-ck__row {
  border: 1px solid rgba(155, 93, 229, 0.20);
  border-radius: 14px;
  background: rgba(17, 16, 21, 0.86);
  overflow: hidden;
}
body.cl-embed .cl-ck__row[open] { border-color: rgba(155, 93, 229, 0.42); }

body.cl-embed .cl-ck__head {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}
body.cl-embed .cl-ck__head::-webkit-details-marker { display: none; }

body.cl-embed .cl-ck__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-400);
  line-height: 1.45;
}
body.cl-embed .cl-ck__value {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mist-50);
  overflow-wrap: anywhere;
}
body.cl-embed .cl-ck__chev { color: var(--mist-400); transition: transform var(--transition); }
body.cl-embed .cl-ck__row[open] .cl-ck__chev { transform: rotate(180deg); }

body.cl-embed .cl-ck__body {
  padding: 6px 18px 20px;
  border-top: 1px solid rgba(155, 93, 229, 0.14);
}
body.cl-embed .cl-ck__body > *:first-child { margin-top: 14px; }

/* Payment: open, titled, and holding the order button. */
body.cl-embed .cl-ck__row--pay { padding: 16px 18px 20px; }
body.cl-embed .cl-ck__payTitle,
body.cl-embed .cl-ck__asideTitle {
  margin: 0 0 12px !important;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-400);
}

/* Right column. */
body.cl-embed .cl-ck__aside {
  padding: 16px 18px 20px;
  border: 1px solid rgba(155, 93, 229, 0.22);
  border-radius: 14px;
  background: rgba(17, 16, 21, 0.86);
}
@media (min-width: 900px) {
  body.cl-embed .cl-ck__aside { position: sticky; top: 0; }
}
body.cl-embed .cl-ck__aside #order_review_heading { display: none; }

/* Shipping choices as a list. */
body.cl-embed .cl-ck__shipping #shipping_method { margin: 0; padding: 0; list-style: none; }
body.cl-embed .cl-ck__shipping #shipping_method li {
  margin: 0 0 8px;
  padding: 12px 14px;
  border: 1px solid rgba(155, 93, 229, 0.20);
  border-radius: 10px;
  background: rgba(8, 7, 11, 0.5);
}
body.cl-embed .cl-ck__shipping #shipping_method label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  font-size: 14.5px;
}

/* The two-column rules written for the old structure no longer apply. */
body.cl-embed form.checkout:not(.cl-ck) #order_review { display: block !important; }

/* ============================================================
   CHECKOUT TYPE + SPACING
   ------------------------------------------------------------
   Font: field labels move off Space Grotesk onto Inter. The
   display face is drawn for headlines — at 11-13px with 0.14em
   tracking it reads as decoration, and this is a form where
   people need to scan labels quickly. Inter at a heavier weight
   is plainer and easier.
   Duplicate notes: the row already collapses, so the separate
   "Add a note for delivery" toggle was a second disclosure on
   top of a disclosure — and its collapse had stopped working,
   so the field showed twice. The toggle goes; the field stays.
   ============================================================ */

/* One redundant disclosure removed. */
body.cl-embed .cl-notes-toggle { display: none !important; }
body.cl-embed .form-row.notes { display: block !important; }

/* ---- type ---- */
body.cl-embed form .form-row > label,
body.cl-embed .woocommerce-billing-fields label,
body.cl-embed .woocommerce-shipping-fields label,
body.cl-embed .woocommerce-additional-fields label {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.45 !important;
  color: var(--mist-200) !important;
  margin-bottom: 7px !important;
}

body.cl-embed .cl-ck__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--mist-300);
}
body.cl-embed .cl-ck__value {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 700;
}

body.cl-embed .cl-ck__payTitle,
body.cl-embed .cl-ck__asideTitle {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: var(--mist-300) !important;
}

body.cl-embed input.input-text,
body.cl-embed textarea,
body.cl-embed select {
  font-family: var(--font-body) !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* Hints sit closer to what they explain, and read as hints. */
body.cl-embed .form-row .description,
body.cl-embed small {
  display: block;
  margin-top: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--mist-400) !important;
}

/* ---- spacing: tighter between cards, roomier inside them ---- */
body.cl-embed .cl-ck__body > .col2-set,
body.cl-embed .cl-ck__body #customer_details { margin: 0 !important; }

body.cl-embed .cl-ck__body .form-row,
body.cl-embed .cl-ck__body fieldset {
  margin: 0 0 10px !important;
  padding: 14px 15px !important;
  border: 1px solid rgba(155, 93, 229, 0.16);
  border-radius: 12px;
  background: rgba(8, 7, 11, 0.42);
}
body.cl-embed .cl-ck__body .form-row:last-child { margin-bottom: 0 !important; }

/* Name pairs stay side by side and share one gap. */
body.cl-embed .cl-ck__body .form-row-first,
body.cl-embed .cl-ck__body .form-row-last {
  display: inline-block !important;
  width: calc(50% - 5px) !important;
  vertical-align: top;
}
body.cl-embed .cl-ck__body .form-row-first { margin-right: 8px !important; }

/* The address summary is a block of facts, not a field. */
body.cl-embed .cl-ck__body .cl-am-summary {
  margin: 0 0 10px !important;
  padding: 14px 15px !important;
  border: 1px solid rgba(155, 93, 229, 0.22);
  border-radius: 12px;
  background: rgba(8, 7, 11, 0.42);
}
body.cl-embed .cl-am-summary__text p { font-size: 15px !important; line-height: 1.55 !important; }
body.cl-embed .cl-am-summary__name { font-size: 16px !important; font-weight: 800 !important; }

body.cl-embed .cl-ck__row { margin: 0; }
body.cl-embed .cl-ck__body { padding: 14px 16px 18px; }
body.cl-embed .cl-ck__body > *:first-child { margin-top: 0 !important; }

/* The `display: contents` trick was written for the PREVIOUS structure, where
   #order_review's children had to join the form grid directly. The template
   now places them itself, and leaving that rule in collapsed the right-hand
   column to zero width — the summary table fell to the bottom of the page at
   y=1866 instead of sitting beside the form. It is explicitly undone here for
   the new layout. */
body.cl-embed form.cl-ck #order_review,
body.cl-embed form.cl-ck .cl-ck__aside {
  display: block !important;
}
@media (min-width: 900px) {
  body.cl-embed form.cl-ck .cl-ck__aside {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
  }
}


/* ============================================================
   VIAL GLOW — turned down
   ------------------------------------------------------------
   The new artwork carries its own purple halo, baked into the
   render. Stacking the site's glow on top of that doubled it.
   The CSS glow is roughly halved so the total reads closer to
   the supplied photography.
   ============================================================ */
.cl-vial__shot,
.cl-cardimg img,
.woocommerce ul.products li.product img,
.cl-chero__vial,
.cl-drawer__thumb img {
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.35));
}
.cl-vial::after,
.cl-cardimg::after {
  opacity: 0.45 !important;
}

/* ============================================================
   VIALS — NO ADDED GLOW, NO ADDED SHADOW
   ------------------------------------------------------------
   The new photography already carries its own lighting. Every
   glow this stylesheet was layering behind and around the vials
   is switched off here rather than tuned down: purple halos,
   radial glow pseudo-elements, and the drop-shadows underneath.
   The artwork is shown exactly as supplied.
   Written last in the file and with !important because these
   glows were declared across roughly a dozen separate blocks,
   several of them already !important.
   ============================================================ */
.cl-vial__shot,
.cl-vial img,
.cl-cardimg img,
.cl-chero__vial,
.cl-drawer__thumb img,
.woocommerce ul.products li.product img,
.woocommerce div.product .woocommerce-product-gallery img,
.cl-picks img {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* The glow pseudo-elements behind the vials are removed outright. */
.cl-vial::after,
.cl-vial::before,
.cl-cardimg::after,
.cl-cardimg::before,
.cl-chero__stage::after,
.cl-chero__stage::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* No card halo behind product images either. */
.woocommerce ul.products li.product::after,
.woocommerce ul.products li.product::before {
  box-shadow: none !important;
}

/* ============================================================
   CART THUMBNAIL — shaped like the vial, not a square
   ------------------------------------------------------------
   The thumb was a 56x56 square holding a 600x1318 cut-out. With
   object-fit: contain that renders the vial 56 tall and about 26
   wide, stranded in the middle of a square with dead space on
   both sides — it read as not fitting because the container was
   the wrong shape for the subject.
   The box now carries the vial's own proportions, so the artwork
   fills it.
   ============================================================ */
.cl-drawer__thumb {
  flex: 0 0 auto;
  width: auto !important;
  height: 74px !important;
  aspect-ratio: 600 / 1318;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: none;
}
.cl-drawer__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
}

/* The line keeps its shape now the thumb is tall and narrow. */
.cl-drawer__line {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Same treatment on the bottom bar's little vial. Its image is
   .cl-sticky-cart__vial inside .cl-sticky-cart__icon — there is no __thumb
   wrapper, which is why an earlier attempt at this selector did nothing. */
.cl-sticky-cart__icon {
  width: auto !important;
  height: 48px !important;
  aspect-ratio: 600 / 1318;
  min-width: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  overflow: visible !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-sticky-cart__vial {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 480px) {
  .cl-drawer__thumb { height: 64px !important; }
  .cl-sticky-cart__icon { height: 42px !important; }
}

/* ============================================================
   MOBILE — fit more on screen
   ------------------------------------------------------------
   Measured at 375x812 before this: the first product sat 1,396px
   down (1.7 screens), cards ran one per row at 475px each, and
   the page was 7,365px long. Most traffic is on phones, so the
   catalogue needs to be reachable and scannable, not scrolled to.
   ============================================================ */
@media (max-width: 782px) {

  /* --- two products per row. The single biggest win: halves the
         scroll through the catalogue. --- */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .woocommerce ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    min-width: 0;
  }

  /* Card contents scale down to suit the narrower column. */
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 10px 10px 2px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  .woocommerce ul.products li.product .price {
    padding: 0 10px 8px !important;
    font-size: 13.5px !important;
    line-height: 1.4;
  }
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .cl-atc__btn {
    margin: 0 8px 8px !important;
    width: calc(100% - 16px) !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
  }
  /* Strength pickers need to stay tappable in half the width. */
  .woocommerce ul.products li.product .cl-atc__opt {
    /* 46px. This rule was forcing 38px !important and quietly undoing the
       base style — the strength buttons are the last tap before a sale and a
       fingertip needs 44 (measured on the shop cards, 2026-09-23). */
    min-height: 46px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  .cl-atc__opts { gap: 6px !important; padding: 0 8px 8px !important; }

  /* --- get to the products sooner --- */
  .cl-chero { min-height: 430px !important; padding: 20px 0 14px !important; }
  .cl-chero__vial { width: min(190px, 46vw) !important; }
  .cl-chero__title { font-size: clamp(2.2rem, 11vw, 3rem) !important; }
  .cl-chero__lede { font-size: 14.5px !important; margin-bottom: 14px !important; }

  .cl-trustbar {
    padding: 14px 10px !important;
    margin-bottom: 16px !important;
    gap: 14px 4px !important;
  }
  .cl-trustbar__icon svg { width: 18px; height: 18px; }
  .cl-trustbar__text strong { font-size: 9px !important; }

  .cl-chips { margin-bottom: 14px !important; gap: 8px 6px !important; }
  .cl-chips .cl-chip,
  .cl-chips a, .cl-chips button {
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
  }

  /* The search bar was 77px of permanent chrome on a 812px screen. */
  .cl-search { padding: 10px 0 !important; }
  .cl-search input { font-size: 16px !important; }
  /* 42px was under the 44px a finger reliably hits. */
  .cl-search button[type="submit"] { min-height: 48px !important; padding: 0 16px !important; }

  /* Room at the bottom so the sticky bar never covers the last card. */
  .woocommerce .cl-woo-wrap { padding-bottom: 96px !important; }
}

/* Very narrow phones: keep two columns but tighten further. */
@media (max-width: 380px) {
  .woocommerce ul.products { gap: 9px !important; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 13px !important; }
  .woocommerce ul.products li.product .price { font-size: 12.5px !important; }
}

/* ============================================================
   MOBILE — card proportions and header breathing room
   ------------------------------------------------------------
   Measured at 390px:
     - the card's image box was 147x147, a square holding a vial
       whose own ratio is 0.46. Contained, the vial drew 147 tall
       by 67 wide and floated in the middle of empty space. That
       is the "floating out of the box" — the container was the
       wrong shape, not the artwork.
     - the logo and four labelled buttons filled the bar with
       4px between them.
   ============================================================ */
@media (max-width: 782px) {

  /* --- product card: a portrait image box the vial can fill --- */
  .woocommerce ul.products li.product a img,
  .woocommerce ul.products li.product img,
  .woocommerce ul.products li.product .cl-cardimg {
    display: block;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    margin: 0 auto !important;
  }
  .woocommerce ul.products li.product .cl-cardimg img {
    aspect-ratio: auto !important;
    height: 100% !important;
  }

  /* Everything in the card sits on one centred axis with even steps. */
  .woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 10px 12px !important;
    text-align: center;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 12px 2px 0 !important;
    margin: 0 !important;
    text-align: center;
  }
  .woocommerce ul.products li.product .price {
    padding: 6px 2px 0 !important;
    margin: 0 0 auto !important;   /* pushes the button to the bottom edge */
    text-align: center;
  }
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .cl-atc__btn {
    width: 100% !important;
    margin: 12px 0 0 !important;
  }
  .cl-atc__opts { justify-content: center !important; margin-top: 10px !important; padding: 0 !important; }

  /* --- header: give the bar room --- */
  .cl-header .cl-logo__img,
  .cl-header .cl-logo img { max-width: 96px !important; }
  .cl-header .cl-icon-btn { padding: 4px 3px 3px !important; }
  .cl-header .container,
  .cl-header > div { gap: 6px !important; }
}

@media (max-width: 380px) {
  .cl-header .cl-logo__img,
  .cl-header .cl-logo img { max-width: 84px !important; }
}

/* ------------------------------------------------------------
   MOBILE — keep the vial off the product name
   The cut-out is a full-bleed bottle (576 of its 600px frame),
   and it carries a 20px drop-shadow glow. In a 196px-tall image
   box the glass base landed 14px above the title, so the glow
   washed straight into the text and the bottle read as sitting
   on top of the name rather than above it.
   Shorter bottle, real gap under it, tighter glow.
   ------------------------------------------------------------ */
@media (max-width: 782px) {
  .woocommerce ul.products li.product .cl-cardimg {
    aspect-ratio: auto !important;
    height: auto !important;
    padding: 10px 10px 0 !important;
    overflow: visible !important;
    margin-bottom: 18px !important;   /* the air the glow needs */
  }
  .woocommerce ul.products li.product .cl-cardimg img,
  .woocommerce ul.products li.product .cl-cardimg__img {
    height: 150px !important;
    width: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    transform: none !important;       /* was nudged up 5.88px */
    margin: 0 auto !important;
    display: block !important;
    /* Half the reach, so the light stays inside the image area. */
    filter:
      saturate(1.04) brightness(1.05) contrast(1.03)
      drop-shadow(0 0 1px rgba(255, 255, 255, 0.45))
      drop-shadow(0 0 5px rgba(214, 186, 255, 0.28))
      drop-shadow(0 0 10px rgba(155, 93, 229, 0.26)) !important;
  }

  /* Price was running the full card width on two cards out of four. */
  .woocommerce ul.products li.product .price,
  .woocommerce ul.products li.product .price .amount {
    font-size: 13px !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    line-height: 1.26 !important;
    padding-top: 0 !important;
  }
}

/* ------------------------------------------------------------
   MOBILE HEADER — room between the logo and the tabs
   At 390px the logo ran to x=138 and the four 48px buttons ran
   160→364 with only 4px between them: 344px of content in a
   350px usable bar. max-width did nothing to the logo because
   it is sized by height, so the height is what has to come down.
   ------------------------------------------------------------ */
@media (max-width: 782px) {
  /* The desktop guard against a collapsing logo was a fixed
     min-width: 118px. At 390px that both blocked the shrink and
     stretched the mark — 640x221 at 26px tall is 75px wide, not
     118 — so the logo has been rendering distorted on phones.
     The guard is not needed here: the mobile bar does not put the
     logo under flex pressure. */
  .cl-header__inner .cl-logo img,
  .cl-header__inner .cl-logo__img,
  .cl-header .cl-logo__img {
    height: 26px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .cl-header__icons { gap: 7px !important; }
  .cl-header .cl-icon-btn {
    width: 44px !important;
    min-width: 44px !important;
    padding: 4px 2px 3px !important;
  }
  .cl-icon-btn svg { width: 20px !important; height: 20px !important; }
}

@media (max-width: 380px) {
  .cl-header__inner .cl-logo__img,
  .cl-header .cl-logo__img { height: 23px !important; min-width: 0 !important; }
  .cl-header__icons { gap: 5px !important; }
  .cl-header .cl-icon-btn {
    width: auto !important;
    min-width: 42px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}

/* ------------------------------------------------------------
   MOBILE HERO — the vial was landing on the EXPLORE button
   At 375px the button ran to y=434 and the vial's box started at
   426. It is not a static overlap: the float animation lifts it
   11px and the rock rotates it 5deg, which swings the top corners
   up another ~9px, so on some frames the cap sat over the button.
   Smaller bottle plus a real gap under the button. The bottle
   shrinks more than the gap adds, so the hero gets shorter.
   ------------------------------------------------------------ */
@media (max-width: 782px) {
  .cl-chero__stage {
    margin-top: 40px !important;
    overflow: visible;
  }
  .cl-chero__vial { width: min(178px, 47vw) !important; }
  .cl-chero__explore { position: relative; z-index: 3; }
}

@media (max-width: 380px) {
  .cl-chero__stage { margin-top: 34px !important; }
  .cl-chero__vial { width: min(164px, 46vw) !important; }
}

/* ------------------------------------------------------------
   CHECKOUT MODAL ON A PHONE — one line per row
   The modal embeds /checkout/ in an iframe, and on a 375px phone
   that iframe is only 329px wide. The summary head is a fixed
   92px / 1fr / 20px grid, so the value got 115px and every row
   wrapped to four lines and stood 125px tall. Below 560px the
   label sits above the value and the value truncates instead.
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  body.cl-embed .cl-ck__head {
    grid-template-columns: minmax(0, 1fr) 20px !important;
    grid-template-areas:
      "label chev"
      "value chev" !important;
    gap: 3px 10px !important;
    padding: 13px 14px !important;
  }
  body.cl-embed .cl-ck__label { grid-area: label; }
  body.cl-embed .cl-ck__value {
    grid-area: value;
    font-size: 14.5px !important;
    overflow-wrap: normal !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.cl-embed .cl-ck__chev { grid-area: chev; align-self: center; }
}

/* ============================================================
   PRODUCT PAGE — the cut-out needs a portrait frame
   The gallery is a 1:1 box with object-fit: contain. The old
   studio shot was square so it filled it; a 600x1319 cut-out
   dropped into the same box renders as a tall sliver stranded in
   a field of empty space — the same shape mismatch that made the
   cards look like the vial was floating. When the cut-out is in
   play the frame becomes portrait and is capped so the bottle
   does not tower over the buy box.
   ============================================================ */
.woocommerce-product-gallery:has(.cl-pdp-cut),
.woocommerce-product-gallery__wrapper:has(.cl-pdp-cut) {
  aspect-ratio: auto !important;
  height: auto !important;
}
.woocommerce-product-gallery__image.cl-pdp-cut {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 520px;
  overflow: visible;
}
.cl-pdp-cut > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.cl-pdp-cut__img {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 520px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  filter:
    saturate(1.04) brightness(1.05) contrast(1.03)
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.40))
    drop-shadow(0 0 14px rgba(214, 186, 255, 0.24))
    drop-shadow(0 0 34px rgba(155, 93, 229, 0.30));
}

@media (max-width: 782px) {
  .woocommerce-product-gallery__image.cl-pdp-cut { max-height: 380px; }
  .cl-pdp-cut__img { max-height: 380px !important; }
}

/* The gallery item was sitting 285px wide inside a 335px gallery, so the
   centred bottle still read as left of centre against the page. */
.woocommerce-product-gallery__image.cl-pdp-cut { width: 100% !important; margin: 0 auto !important; }

/* ------------------------------------------------------------
   CATALOG HERO — shorter on a phone
   It stood 660px tall, putting the first product at y=1200 —
   1.4 screens down on the page most of the traffic lands on.
   The bottle is the bulk of that, so it comes down the most,
   and the copy block tightens around it. The artwork still
   leads; it just stops owning a whole screen.
   ------------------------------------------------------------ */
@media (max-width: 782px) {
  .cl-chero { min-height: 0 !important; padding: 14px 0 10px !important; }
  .cl-chero__vial { width: min(132px, 36vw) !important; }
  /* 26px left only 10px between the button and the bottle's swing. */
  .cl-chero__stage { margin-top: 36px !important; }
  .cl-chero__eyebrow { margin-bottom: 6px !important; }
  .cl-chero__title { margin-bottom: 8px !important; }
  .cl-chero__lede {
    font-size: 14px !important;
    margin-bottom: 12px !important;
    max-width: 30ch;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .cl-chero__inner { gap: 0 !important; }
}

/* ------------------------------------------------------------
   TICKER — slimmer on a phone, still moving
   ------------------------------------------------------------ */
@media (max-width: 782px) {
  .cl-ticker { display: block !important; }
  .cl-ticker__list li {
    padding: 7px 15px !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
  }
  .cl-ticker__list li::after {
    margin-left: 15px !important;
    width: 3px !important;
    height: 3px !important;
  }
}

/* ------------------------------------------------------------
   STRENGTH PILLS — equal widths, one row
   flex: 1 1 auto sized each pill to its own text, so 5MG came out
   139px and 10MG 148px. And min-width 96px meant three pills
   (288px + 20px of gaps) could not fit the 297px column, so the
   third wrapped onto a row of its own. Measured on R3TA at 375px.
   flex-basis 0 makes every pill in a row the same width whatever
   it says; the smaller min-width lets three sit together.
   ------------------------------------------------------------ */
.woocommerce div.product .cl-pills { justify-content: center; }
.woocommerce div.product .cl-pill {
  flex: 1 1 0 !important;
  min-width: 74px !important;
}
@media (max-width: 420px) {
  .woocommerce div.product .cl-pill {
    min-width: 66px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 16px !important;
  }
}

/* ============================================================
   REFER A FRIEND
   A normal WP page, so it gets no WooCommerce layout — the card
   supplies its own frame, width and rhythm rather than inheriting
   a product page's.
   ============================================================ */
.cl-ref { max-width: 660px; margin: 0 auto; }

.cl-ref__card {
  background: rgba(12, 11, 16, 0.86);
  border: 1px solid var(--border-purple);
  border-radius: 20px;
  padding: 38px 34px 34px;
  text-align: center;
}

.cl-ref__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist-400);
  margin: 0 0 10px;
}

.cl-ref__h {
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  line-height: 1.15;
  margin: 0 0 26px;
}
.cl-ref__h span { color: var(--brand-purple, #9B5DE5); }

/* --- the three steps --- */
.cl-ref__steps {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 14px;
  text-align: left;
}
.cl-ref__steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 14px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mist-400);
}
.cl-ref__steps strong {
  grid-column: 2;
  display: block;
  font-size: 15px;
  color: var(--mist-50);
  margin-bottom: 1px;
}
.cl-ref__num {
  grid-row: span 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(155, 93, 229, 0.16);
  border: 1px solid var(--border-purple);
  color: var(--mist-50);
  font-family: var(--font-display);
  font-size: 14px; font-weight: 800;
}

/* --- input + button --- */
.cl-ref__form label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist-400);
  margin-bottom: 9px;
  text-align: left;
}
.cl-ref__linkbox { display: flex; gap: 10px; align-items: stretch; }
.cl-ref__linkbox input {
  flex: 1 1 auto;
  min-width: 0;                 /* or a long URL refuses to shrink */
  padding: 15px 16px;
  font-size: 15px;
  background: var(--ink-900, #0B0910);
  color: var(--mist-50);
  border: 2px solid var(--ink-500);
  border-radius: var(--radius-md);
}
.cl-ref__linkbox input:focus-visible { outline: 3px solid var(--ui-ring); outline-offset: 2px; }
.cl-ref__linkbox .cl-btn { flex: 0 0 auto; white-space: nowrap; }
.cl-ref__link { font-family: var(--font-mono, monospace); font-size: 14px; }

.cl-ref__note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mist-400);
  margin: 16px 0 0;
}
.cl-ref__error {
  font-size: 14px;
  line-height: 1.55;
  color: #FFC2C2;
  background: rgba(255, 90, 90, 0.08);
  border: 1px solid rgba(255, 90, 90, 0.3);
  border-radius: 12px;
  padding: 13px 15px;
  margin: 0 0 20px;
  text-align: left;
}

/* Side by side, the field is too narrow to read a URL in and the button
   squeezes to an ellipsis. */
@media (max-width: 560px) {
  .cl-ref__card { padding: 30px 20px 26px; }
  .cl-ref__linkbox { flex-direction: column; }
  .cl-ref__linkbox .cl-btn { width: 100%; }
  .cl-ref__link { font-size: 13px; }
}

/* The referral page sits inside .container > .page > .cl-content, and each of
   those adds its own 20px side padding. Stacked, that is 120px of a 375px
   phone — the card came out 251px wide. The outer .container keeps its gutter;
   the two inner ones do not need one as well. */
.page-id-192 .cl-content,
.page-id-192 .type-page {
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   SHIPPING PROTECTION — opt-in row in the order review
   ============================================================ */
.cl-protect td { padding: 0 !important; border: 0 !important; }
.cl-protect__row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  margin: 6px 0;
  border-top: 1px solid var(--border-purple);
  border-bottom: 1px solid var(--border-purple);
  cursor: pointer;
}
.cl-protect__box {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--brand-purple, #9B5DE5);
  cursor: pointer;
  flex: 0 0 auto;
}
.cl-protect__box:disabled { opacity: 0.5; cursor: wait; }
.cl-protect__title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mist-50);
}
.cl-protect__price { color: var(--brand-purple, #9B5DE5); white-space: nowrap; }
.cl-protect__desc {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mist-400);
}

/* One note for all four manual gateways, instead of the same sentence under
   each. */
.cl-paynote {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mist-400);
  margin: 0 0 14px;
}
/* With the descriptions removed the payment boxes are empty; collapse them so
   they do not leave four blank gaps down the list. */
#payment .payment_box:empty,
#payment .payment_box > p:empty { display: none !important; }

/* ------------------------------------------------------------
   SHIPPING PROTECTION — alignment
   The checkout forces labels to display:block, which beat the
   grid and stacked the checkbox, title and description all at the
   same left edge. Measured: row display computed to "block" with
   all three children at left 20px, full width.
   Column is 24px because that is what the checkbox actually
   measures — a 22px track left it hanging over the text.
   ------------------------------------------------------------ */
.woocommerce-checkout .cl-protect__row,
.cl-protect__row {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  column-gap: 12px;
  row-gap: 3px;
  align-items: center;
  padding: 15px 2px;
}
.cl-protect__box {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
}
.cl-protect__text { display: contents; }   /* let title and desc be grid items */
.cl-protect__title {
  grid-column: 2;
  grid-row: 1;
  align-items: baseline;
}
.cl-protect__desc {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
}

/* On a phone the price would otherwise be pushed onto its own line by the
   title text; keep them on one row with the price hard right. */
@media (max-width: 480px) {
  .cl-protect__title { font-size: 13.5px; }
  .cl-protect__desc  { font-size: 11.5px; }
}

/* ============================================================
   FAQ — closed answers were still rendering
   Measured: every <details> reported open=false and 67px tall,
   while its <p> reported 91px at the bottom edge — the answer
   was painting OUTSIDE the box, on top of the next question.
   Nine collisions on the FAQ page. The DOM was correct
   (details > summary + p) so this is the browser's closed-state
   hiding being defeated; stating it explicitly restores it.
   ============================================================ */
details.cl-faq:not([open]) > *:not(summary) { display: none !important; }

/* ============================================================
   BUTTONS — one height, one radius
   Measured across eight pages: heights 4, 44, 48, 52, 54, 56, 62
   and radii 0px, 6px, 10px, 50%, 999px. Five different corner
   treatments on a single product page.
   Pills stay pills, the round icon buttons stay round; everything
   that is a rectangular button now agrees.
   ============================================================ */
.cl-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button {
  min-height: 48px;
  border-radius: 999px;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Below 44px a control is hard to hit on a phone. */
.cl-btn, .woocommerce .button { min-height: 48px; }

/* ============================================================
   TAP TARGETS — measured at 375px
   Add to cart came out 40px on every product card (16 of them
   across the home and shop pages) and Search 42px on every page.
   Both are under the 44px a finger reliably hits, and add-to-cart
   is the most important control on the site.
   ============================================================ */
.cl-btn.cl-atc__btn,
.woocommerce ul.products li.product .cl-atc__btn{
  min-height: 48px !important;
}

/* The carousel indicators are meant to be thin lines, so the bar stays 4px
   and the HIT AREA is grown around it instead of fattening the design. */
.cl-picks__dot {
  position: relative;
  border: 0;
}
.cl-picks__dot::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* ============================================================
   SMALL PRINT — nothing below 11px
   Measured: 9px on "Tap to copy", 9.5px on "Call or text", 10px
   on the footer disclaimer, age-gate notice and contact eyebrow.
   These stay visibly secondary, just readable on a phone.
   ============================================================ */
.cl-promo__code-hint { font-size: 11px !important; }
.cl-contact__label   { font-size: 11.5px !important; }
.cl-contact__eyebrow,
.cl-agegate__ruo,
.cl-mobile__foot,
.cl-footer__disclaimer { font-size: 11px !important; }

/* Line-height has to come up with the size or the smallest text sets
   solid once it is bigger. */
.cl-footer__disclaimer,
.cl-agegate__ruo,
.cl-mobile__foot { line-height: 1.55 !important; }

/* ------------------------------------------------------------
   Remaining small print, measured at 375px.
   The header captions were 7px — I set those myself when fixing
   the crowded top bar and went too far. The header has room now
   (logo 75px + four 44px buttons + gaps in 375px), so they can
   come back up.
   ------------------------------------------------------------ */
.cl-icon-btn__cap        { font-size: 9.5px !important; letter-spacing: 0.03em !important; }
.cl-topbar__calltag      { font-size: 11px !important; }
.cl-ticker__list li      { font-size: 11px !important; }
.cl-trustbar strong,
.cl-trustbar__text strong { font-size: 11px !important; }
.cl-atc__opts-label      { font-size: 11px !important; }


/* Search sits inside .woocommerce-product-search as a bare <button> with no
   class of its own, which is why a class-based rule missed it. */
.woocommerce-product-search button,
.woocommerce-product-search input[type="submit"] {
  min-height: 48px !important;
}

/* ------------------------------------------------------------------
   ADDRESS POP-OUT (.cl-am) — measured fixes, 375px and desktop.

   Measured before: first/last name rows 140.5px wide while every other
   row was 293px, so the right edge was ragged; modal title rendered
   13px (smaller than its own 13.5px labels); dialog bottom landed at
   822px in an 812px viewport; close button 40px.

   The width bug was my own embed rule leaking in:
     body.cl-embed form.checkout .form-row-first { width: calc(50% - 6px) !important }
   That two-up rule is for the checkout PAGE. Inside the pop-out the
   grid (.cl-am__line) already owns the columns, so the row must always
   be full width and let the grid decide.
   ------------------------------------------------------------------ */
body.cl-embed .cl-am .cl-am__body p.form-row,
body.cl-embed .cl-am .cl-am__body p.form-row-first,
body.cl-embed .cl-am .cl-am__body p.form-row-last,
.cl-am .cl-am__body p.form-row,
.cl-am .cl-am__body p.form-row-first,
.cl-am .cl-am__body p.form-row-last {
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}

/* body.cl-embed h3, body.cl-embed .cl-am__title set 13px — that rule is
   for the embedded page's own headings, not this dialog's title. */
body.cl-embed .cl-am__title,
.cl-am .cl-am__title { font-size: 17px !important; line-height: 1.26 !important; }

/* 40px was under the 44px a finger reliably hits. */
.cl-am__x { width: 44px !important; height: 44px !important; }

/* The dialog ran 10px past the bottom of a 812px screen. Leave 24px of
   breathing room top and bottom and let the body scroll instead. */
.cl-am__dialog { max-height: calc(100dvh - 48px) !important; }
@supports not (height: 100dvh) {
  .cl-am__dialog { max-height: calc(100vh - 48px) !important; }
}

/* LESS TEXT: nine "*" marks plus the word next to each label was noise.
   Every field here is required except address_2, which already says
   "(optional)" — so the asterisks carried no information. */
.cl-am .cl-am__body .required,
.cl-am .cl-am__body abbr.required { display: none !important; }
.cl-am .cl-am__body .optional { opacity: 0.75; }

/* Labels must not squash or spill their card. */
.cl-am .cl-am__body p.form-row > label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* The close circle is a 34px design element. Same approach as the carousel
   dots: keep the circle, grow the hit area around it to 44px. */
.cl-sticky-cart__close { position: relative; }
.cl-sticky-cart__close::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* WooCommerce ships `#add_payment_method .cart-collaterals .cart_totals table th
   { width: 35% }`. That ID selector outranks anything here, and once the rows
   became a grid the 35% applied to the GRID AREA — measured 48.6px of a 139px
   column for an "Subtotal" needing 58px, so every label was clipped.
   The grid already sizes these columns; the cells must simply fill them. */
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td,
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  width: auto !important;
  max-width: none !important;
}

/* "[Remove]" sat inline after the coupon amount, making that value cell 134px
   of a 205px row and forcing "Coupon: friend10" to wrap. It also overhung its
   own box by 4.3px. Put it under the amount: the value column then sizes to
   the price and the label fits on one line. */
.woocommerce .cart_totals .cart-discount td .woocommerce-remove-coupon,
.woocommerce-checkout .cart-discount td .woocommerce-remove-coupon {
  display: block;
  margin: 3px 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}

/* The variation Add to cart is float:left, so its container measured 62px
   while the button ran to 118px — the button hung 56px out of its own box.
   Nothing here needs the float; the button is a full-width block. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  float: none !important;
}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart::after {
  content: "";
  display: table;
  clear: both;
}

/* Sub-11px text that has room to grow. Measured first:
   the cart count is a single digit in a 16px circle and the sticky badge in a
   19px one, so 11px still fits. NOT raised, on measurement:
   .cl-icon-btn__cap  — "Account" is already 44px inside a 42px button at 9.5px
   .cl-vial__pill     — "TIRZ" fills its 34px pill exactly (scrollWidth 34/34) */
.cl-cart-count   { font-size: 11px !important; }
.cl-sticky-cart__badge { font-size: 11px !important; }
.cl-hero2__trustText   { font-size: 11px !important; }

/* ============================================================
   SMALL TEXT USES THE BODY FACE

   Measured on the live page: 73 elements at 14px or under were set in Space
   Grotesk against 24 in Inter. Space Grotesk is a display face — wide, geometric,
   drawn for headlines. At 9.5-12px the counters close up and it reads as cheap,
   which is the whole complaint.

   Every site worth copying here (Stripe, GitHub, Figma, Vercel, Linear, Shopify)
   splits it the same way: display face for headings and short uppercase labels,
   a UI face for anything you actually read. Inter is that face and is already
   loaded, so nothing new is downloaded.

   Deliberately NOT changed: .cl-chip, span.onsale, the eyebrows and .cl-btn.
   Those are short uppercase labels with wide tracking — display usage, and
   correct as they are.
   ============================================================ */
.cl-ticker__list li,
.cl-trustbar strong,
.cl-trustbar__text strong,
.cl-footer__disclaimer,
.cl-footer__heading,
.cl-mobile__foot,
.cl-topbar__calltag,
.cl-contact__value,
.cl-icon-btn__cap {
  font-family: var(--font-body) !important;
}

/* The nav captions are 9.5px — the smallest reading text on the site. Inter
   holds together there; the display face does not. A touch more tracking
   because Inter is narrower. */
.cl-icon-btn__cap { letter-spacing: 0.045em !important; }

/* These spans were inheriting Arial from the UA stylesheet — nothing set a
   family on them, so they were not in either face. */
.cl-pay__copy-text,
.cl-pay__x {
  font-family: var(--font-body);
}

/* ============================================================
   CENTRE IS THE DEFAULT FOR PHRASES

   Measured across 11 pages at 375px: 11 kinds of short text (one or two lines)
   were still starting hard against the left edge — nav captions, the contact
   block, section headings, eyebrows, ledes.

   Long-form body copy is deliberately NOT included: a paragraph of three lines
   or more reads worse centred, because the eye loses the start of each line.
   Nav lists, tables, form fields and price rows keep their alignment too — a
   centred table column stops being a column.
   ============================================================ */
.cl-icon-btn__cap,
.cl-contact__label,
.cl-contact__value,
.cl-contact__eyebrow,
.cl-save__title,
.cl-save__lede,
.cl-picks__eyebrow,
.cl-chero__eyebrow {
  text-align: center !important;
}

/* Section headings on the content pages sat left above their copy. */
.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3,
.entry-content h2,
.entry-content h3,
.page-content h2,
.page-content h3{
  text-align: center;
}

/* The contact block centres as a unit, not just its text. */
.cl-contact__label,
.cl-contact__value { width: 100%; }

/* ============================================================
   TAP TARGET SPACING

   Measured across 11 pages at 375px, every pair of tappable elements.
   Floor is 8px — below that a fingertip cannot reliably pick one.

   Left alone on purpose: the quantity stepper (minus / field / plus are joined
   edge to edge by design, each already 44px) and the gallery zoom icon, which
   is meant to sit over the image.
   ============================================================ */

/* Header icons were 5px apart. There is room: the row ends at 349 of 375 and
   the logo clears it by 55px. */
.cl-header__icons { gap: 8px !important; }

/* Category chips were 6px apart and 36px tall — under the 44px tap minimum. */
.cl-chips { gap: 10px !important; }
.cl-chip {
  min-height: 44px !important;
  padding: 0 14px !important;
}

/* The hero vials are rotated, so their painted boxes come 3.1px apart even
   though the flex gap says 10px — a rotated box is wider than its layout box.
   Sized against what is actually on screen, not what the gap declares. */
.cl-hero2__stage { gap: 18px !important; }

/* Slide-out menu rows sat 2px apart. They are 50px tall, so the targets are
   fine; the crowding is visual. */
.cl-mobile__nav li + li { margin-top: 10px; }

/* Footer links were 38px tall and 2px apart — under the 44px tap target and
   well under the 8px separation floor. Four columns of links people actually
   miss on a phone. */
.cl-footer__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.cl-footer__list li + li { margin-top: 8px; }

/* Desktop-only tap-spacing defects, measured at 1440px.
   These never appeared at 375px: the vials are wider there, and the product
   grid puts the card link directly above the button. */
@media (min-width: 768px) {
  /* Rotated vials overlapped by 11.2px — a rotated box is wider than its
     layout box, so the declared gap is not the gap on screen. 18 + 11.2 + 8
     clearance. */
  .cl-hero2__stage { gap: 38px !important; }
}

/* The card link ended exactly where Add to cart began, so the boundary between
   "open the product" and "buy it" was a single pixel. */
.woocommerce ul.products li.product .cl-btn,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .cl-atc {
  margin-top: 12px;
}

/* The phone glyph, inlined so it needs no request and inherits text colour. */
:root {
  --cl-phone-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 5.5 5.5L16 12l4 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4 6.2 2 2 0 0 1 6 4z'/%3E%3C/svg%3E");
}

/* Header: the number was the same weight as everything else in the bar, so it
   disappeared. Give it a pill so the eye lands on it. */
.cl-topbar__link:not(.cl-topbar__link--email) {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(155, 93, 229, 0.50);
  background: rgba(155, 93, 229, 0.16);
  color: #FFFFFF !important;
  font-weight: 700;
}
.cl-topbar__link:not(.cl-topbar__link--email):hover {
  background: rgba(155, 93, 229, 0.30);
}
.cl-topbar__calltag {
  color: var(--ui-300, #C4A9F5) !important;
  font-weight: 700 !important;
}

/* Contact page: the phone row now reads louder than the email row, because it
   is the one that reaches a human immediately. */
.cl-contact__link:not(.cl-contact__link--email) {
  border-color: rgba(155, 93, 229, 0.55) !important;
  background: rgba(155, 93, 229, 0.10);
  box-shadow: 0 0 26px rgba(124, 58, 237, 0.20);
}
.cl-contact__link:not(.cl-contact__link--email) .cl-contact__value {
  color: #FFFFFF !important;
  font-weight: 700;
}
.cl-contact__link:not(.cl-contact__link--email) .cl-contact__label {
  color: var(--ui-300, #C4A9F5) !important;
}

/* ============================================================
   GLARE SWEEP ON PRIMARY BUTTONS

   A light band crosses the face, then waits. On a phone there is no hover, so
   it runs on a cycle rather than on pointer — otherwise nobody ever sees it.
   Secondary and ghost buttons are left alone: if everything shines, the shine
   stops meaning "this is the one to press".
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .cl-btn:not(.cl-btn--secondary):not(.cl-btn--ghost),
  .cl-pay__go,
  .woocommerce .single_add_to_cart_button,
  .woocommerce .checkout-button,
  .cl-btn--xl {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .cl-btn:not(.cl-btn--secondary):not(.cl-btn--ghost)::after,
  .cl-pay__go::after,
  .woocommerce .single_add_to_cart_button::after,
  .woocommerce .checkout-button::after,
  .cl-btn--xl::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -60%;
    width: 45%;
    background: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.30) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 1;
    animation: cl-glare 5.5s ease-in-out infinite;
  }

  /* Anything the button paints must sit above the band. */
  .cl-pay__go > * { position: relative; z-index: 2; }
}

@keyframes cl-glare {
  0%   { left: -60%; }
  38%  { left: 130%; }
  100% { left: 130%; }
}

/* ============================================================
   FORM CONTROLS INHERIT THE SITE FONT

   input, select, textarea and button do NOT inherit font-family — the UA
   stylesheet hands them Arial. Changing the font variables never reached them,
   so every field on the site (search, checkout, quantity, coupon) was still
   Arial next to Plus Jakarta Sans labels.
   ============================================================ */
input, select, textarea, button, optgroup,
.woocommerce input, .woocommerce select, .woocommerce textarea, .woocommerce button,
.woocommerce-page input, .woocommerce-page select, .woocommerce-page textarea {
  font-family: var(--font-body);
}

/* Amounts, handles and codes stay monospace on purpose — aligned digits, and
   0 is distinguishable from O when someone is copying a payment. */
input.qty, .cl-qty input, .cl-pay__amount, .cl-pay__value {
  font-family: var(--font-mono);
}

/* ============================================================
   GLARE ON THE REMAINING PRIMARY CALLS TO ACTION

   Found by scanning every page for tappable elements 40px+ tall and 120px+
   wide. Plain links and product-card links are excluded: 192 of them would
   turn the effect into noise.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .cl-hero2__shop,
  .cl-picks__namebtn,
  .woocommerce .wc-backward,
  .cl-contact__link--phone {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .cl-hero2__shop::after,
  .cl-picks__namebtn::after,
  .woocommerce .wc-backward::after,
  .cl-contact__link--phone::after {
    content: "";
    position: absolute;
    top: -20%; bottom: -20%; left: -60%; width: 45%;
    background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.26) 50%,
      rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 1;
    animation: cl-glare 5.5s ease-in-out infinite;
  }
  .cl-contact__link--phone > * { position: relative; z-index: 2; }
}

/* ============================================================
   NO BOX INSIDE A BOX

   The contact panel framed two link cards that were already framed — three
   borders stacked. The panel keeps the spacing and drops the frame; the cards
   carry the edges, because they are the things you press.
   ============================================================ */
.cl-contact {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
   HEADER REFINEMENT

   Measured: captions 9.5px / weight 700 / ALL CAPS / 0.43px tracking, search
   button uppercase at 1.4px tracking, and a 52px input sitting beside a 48px
   button. Tiny bold all-caps plus a solid filled blob for the active item is
   the default-template look; it is not what Linear, Vercel, Stripe or Shopify
   do with a nav. They use sentence case around 11px at medium weight, and mark
   the active item with a quiet indicator instead of a slab of colour.
   ============================================================ */

/* Sentence case, a size that can actually be read, medium weight. */
.cl-icon-btn__cap {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.005em !important;
  color: var(--mist-300, #B9B2C7);
}


/* Search: the field is height:var(--btn-h); the button takes the same token so
   the pair lines up and matches every other button on the site. */
.cl-search button[type="submit"],
.woocommerce-product-search button {
  min-height: var(--btn-h) !important;
  height: var(--btn-h) !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

/* ============================================================
   STOP SHOUTING

   Scanned all 11 pages: 15 kinds of title and button were set UPPERCASE at
   weight 700 with added tracking. That treatment is what makes a page read as
   a stock template — and it defeats the point of changing the typeface, since
   caps flatten the letterforms that give a font its character.

   Sentence case, weight kept for hierarchy, tracking near zero. Genuine
   eyebrows and micro-labels (.cl-chip, span.onsale, the strength pill, the
   12px eyebrows) keep their caps — short uppercase labels are a real device.
   ============================================================ */
h1, h2, h3,
.cl-section__title,
.product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.cl-contact__title,
.cl-save__title,
.cl-picks__namebtn-title,
.cl-intent__text strong {
  text-transform: none !important;
  letter-spacing: -0.005em !important;
}

/* Buttons read as instructions, not as signage. */
.cl-btn,
.woocommerce .single_add_to_cart_button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce .wc-backward,
.woocommerce .checkout-button,
.cl-search button[type="submit"],
.woocommerce-product-search button {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-weight: 600 !important;
}

/* The eyebrow stays uppercase but stops competing with the heading under it. */
.cl-picks__eyebrow,
.cl-chero__eyebrow,
.cl-contact__eyebrow {
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.10em !important;
}

/* ============================================================
   SCROLL CUE — "Preview the catalog"

   The hero is 882px of a 966px screen, so the first product sits entirely
   below the fold. Floating, quiet, bottom centre, and gone the moment you
   scroll. The arrow moves because a static arrow at the bottom of a hero reads
   as decoration rather than as something to press.
   ============================================================ */
.cl-scrollcue {
  position: fixed;
  left: auto;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(155, 93, 229, 0.42);
  border-radius: 999px;
  background: rgba(20, 17, 28, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: var(--mist-100, #EDEAF4);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  /* Fades up into place, and back down on the way out. */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms ease, transform 300ms ease, background 160ms ease;
}
.cl-scrollcue[hidden] { display: none !important; }
.cl-scrollcue.is-in { opacity: 1; transform: translateY(0); }
.cl-scrollcue.is-gone { opacity: 0; transform: translateY(10px); pointer-events: none; }
.cl-scrollcue.has-bar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.cl-scrollcue:hover { background: rgba(30, 24, 42, 0.85); }
.cl-scrollcue__arrow { flex: 0 0 auto; color: var(--ui-300, #C4A9F5); }

@media (prefers-reduced-motion: no-preference) {
  .cl-scrollcue__arrow { animation: cl-cue-bob 1.9s ease-in-out infinite; }
}
@keyframes cl-cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

@media (max-width: 520px) {
  .cl-scrollcue { width: 46px; padding: 0; justify-content: center; }
  .cl-scrollcue__text {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* Every remaining big button gets the sweep. Secondary and ghost buttons were
   held back so the shine would mark the primary action — but on this site they
   are full-size buttons in their own right, so they get it at lower intensity
   rather than not at all. */
@media (prefers-reduced-motion: no-preference) {
  .cl-btn--secondary,
  .cl-contact__link--email {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .cl-btn--secondary::after,
  .cl-contact__link--email::after {
    content: "";
    position: absolute;
    top: -20%; bottom: -20%; left: -60%; width: 45%;
    background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.16) 50%,
      rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 1;
    animation: cl-glare 5.5s ease-in-out infinite;
  }
  .cl-contact__link--email > * { position: relative; z-index: 2; }
}

/* ============================================================
   FINAL SWEEP FIXES — found by scanning all 11 pages at 375px
   ============================================================ */

/* 1. Content-page headings sat left. The wrapper is .cl-content, not the
      .entry-content / .page-content I guessed at earlier. */
.cl-content h1,
.cl-content h2,
.cl-content h3{
  text-align: center;
}

/* 2. Category chips still measured 36px — an earlier rule sets both height and
      min-height to 36, so the tap target never grew. Set both. */
.woocommerce .cl-chips .cl-chip,
.cl-chips .cl-chip,
.cl-chip {
  min-height: 44px !important;
  height: auto !important;
  padding: 0 14px !important;
}

/* 3. Links in the 35px utility bar are only 16px tall. The bar cannot grow to
      44 without becoming permanent chrome, so the target is grown around the
      link instead — same approach as the carousel dots. */
.cl-topbar__link,
.cl-hero2__aside {
  position: relative;
}
.cl-topbar__link::before,
.cl-hero2__aside::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Product names in the savings cards, and the opening line of a content page,
   were the last short phrases still starting hard left. */
.cl-save__name,
.cl-save__card,
.cl-content > p:first-of-type {
  text-align: center;
}

/* Content-page paragraphs centred, per the centre-everything rule.
   NOTE: /shipping-returns/ has 6 and /contact/ has 4 paragraphs longer than
   two lines, and those are now centred too — CSS cannot tell a two-line intro
   from a six-line explanation. If long body copy reads worse this way, the
   revert is this one block. Lists are left alone: a centred bullet list loses
   the alignment that makes it scannable. */
.cl-content p {
  text-align: center;
}
.cl-content ul,
.cl-content ol,
.cl-content li,
.cl-content table {
  text-align: left;
}

/* Product-name links in the savings cards are 22px of text. The card is the
   real target, but the link itself should be reachable too. */
.cl-save__name a { position: relative; display: inline-block; }
.cl-save__name a::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* ============================================================
   CENTRING AT DESKTOP WIDTH

   The mobile sweep came back 0 off-centre, desktop came back 73 — the footer,
   page titles and hero labels only left-align once the wide layout kicks in.
   Measured at 1440px across 11 pages.
   ============================================================ */
.cl-footer__heading,
.cl-footer__copy,
.cl-section__title,
.cl-vial__pill,
.cl-chero__word,
.cl-chero__lede,
.woocommerce .woocommerce-result-count,
.woocommerce .cart-empty,
.woocommerce-page .cart-empty {
  text-align: center !important;
}

/* Page titles sat left on 8 pages. */
.cl-content h1,
.woocommerce-page h1.entry-title,
.entry-title,
article h1 {
  text-align: center;
}

/* The footer columns centre as columns, not just their text. */
.cl-footer__list { text-align: center; }
.cl-footer__list a { justify-content: center; }

/* The product description lives in WooCommerce's tab panel, not .cl-content. */
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce-Tabs-panel p,
.woocommerce div.product .woocommerce-product-details__short-description p {
  text-align: center;
}
.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol,
.woocommerce-Tabs-panel li { text-align: left; }

/* ============================================================
   ADDRESS POP-OUT — the form people actually fill in

   Measured inside the open modal at 938px and 375px:
     Cancel / Save address  still UPPERCASE (.cl-am__btn was missed by the
                            sentence-case pass, which only covered .cl-btn)
     labels                 text-align: start, against a centred site
     inputs                 23.3px tall
     summary                left-aligned, and the Edit control uppercase

   This is the last step before payment, so it gets the same treatment as
   everything else rather than being the one screen that looks unfinished.
   ============================================================ */

/* Buttons read as instructions. */
.cl-am__btn {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  min-height: 50px !important;
}

/* Title and helper text centred like every other panel. */
.cl-am__title,
.cl-am .cl-am__body .optional,
.cl-am-summary,
.cl-am-summary__name,
.cl-am-summary__text,
.cl-am-summary__prompt,
.cl-am-summary__empty {
  text-align: center !important;
}

/* The field label sits above its value inside the card; centre the pair so the
   card reads as one object instead of two ragged lines. */
.cl-am .cl-am__body p.form-row > label { text-align: center; }
.cl-am .cl-am__body p.form-row input.input-text,
.cl-am .cl-am__body p.form-row select,
.cl-am .cl-am__body p.form-row .select2-selection__rendered {
  text-align: center;
}

/* 23px of input inside a 76px card wastes the card and makes the caret hard to
   land on. The card is the touch target; the field should fill it. */
.cl-am .cl-am__body p.form-row input.input-text,
.cl-am .cl-am__body p.form-row select {
  min-height: 30px !important;
  font-size: 16px !important;   /* 16px stops iOS zooming the page on focus */
  line-height: 1.3 !important;
}

/* Edit control on the summary. */
.cl-am-summary__edit {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-weight: 600 !important;
  min-height: 44px !important;
}

/* The "still needed" line on the summary. */
.cl-am-summary__missing {
  margin: 10px auto 0;
  max-width: 34ch;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.38);
  color: #FCA5A5;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.cl-am-summary.is-incomplete { border-color: rgba(239, 68, 68, 0.40) !important; }

/* ============================================================
   ADDRESS POP-OUT ON A PHONE

   At 375px the desktop layout does not translate: the dialog was 343px wide
   holding 76px label-over-value cards, so seven fields became a long scroll
   with the Save button off the bottom. On a phone this becomes a full-height
   sheet with the actions pinned where the thumb is.
   ============================================================ */
@media (max-width: 600px) {
  .cl-am { padding: 0; align-items: flex-end; }

  .cl-am__dialog {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh !important;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  @supports not (height: 100dvh) {
    .cl-am__dialog { height: 100vh; max-height: 100vh; }
  }

  /* Header stays put while the fields scroll under it. */
  .cl-am__head {
    position: sticky;
    top: 0;
    z-index: 2;
    flex: 0 0 auto;
    padding: 16px 16px 14px;
    background: var(--ink-900, #14121A);
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
  }
  .cl-am__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 8px;
  }

  /* Actions pinned to the bottom, always reachable, never scrolled past. */
  .cl-am__foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(20, 18, 26, 0) 0%, var(--ink-900, #14121A) 22%);
    border-top: 1px solid rgba(155, 93, 229, 0.20);
  }
  .cl-am__foot .cl-am__btn { width: 100%; margin: 0; }

  /* Tighter cards so more of the form is visible at once. */
  .cl-am .cl-am__body p.form-row { padding: 10px 14px 9px; }
  .cl-am .cl-am__body p.form-row > label { font-size: 11.5px; }
  .cl-am__line { gap: 10px; margin-bottom: 10px; }
}

/* ============================================================
   SHIP TO PANEL — stop repeating yourself

   Measured in the live checkout: FOUR levels of painted box nested inside each
   other, and the delivery address printed twice — once in the collapsed
   "SHIP TO" header, then again in full underneath, under a second heading
   ("Shipping address") and a line explaining what a shipping address is.

   The header already names the section and shows the address. So: one box per
   idea, one statement of each fact.
   ============================================================ */

/* The panel header already says SHIP TO and shows the address. */
.woocommerce-shipping-fields > h3,
.cl-ship-primary > h3{
  display: none !important;
}

/* The address card sat inside the panel, which is itself inside the SHIP TO
   box — three borders around one address. Keep the content, drop the frame. */
.cl-am-summary {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 0 !important;
}
.cl-am-summary.is-incomplete { border: 0 !important; }

/* Field cards: the input had its own box inside the field's box. One frame. */
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The notes field described itself three times: label, helper line, and a
   placeholder repeating both. The label is enough. */
.woocommerce-checkout .form-row.notes .description,
.woocommerce-checkout .form-row .description{
  display: none !important;
}

/* The field card already draws the frame; the input inside was drawing a second
   one. `.woocommerce form .form-row input.input-text` (0,3,2) with !important
   beat the earlier attempt at (0,3,0), so this matches its shape and adds body. */
body.woocommerce-checkout form .form-row input.input-text,
body.woocommerce-checkout form .form-row textarea,
body.woocommerce-checkout form .form-row select,
body.cl-embed form .form-row input.input-text,
body.cl-embed form .form-row textarea,
/* Selects used to be frameless because the row card drew the frame. Since the
   text inputs now carry their own 2px boundary (spec, 2026-10-07) a frameless
   select sat beside a framed input and looked broken, so selects match. */
body.cl-embed form .form-row select {
  box-sizing: border-box !important;
  min-height: 48px !important;
  border: 2px solid #8B5CF6 !important;
  background: #0D0C11 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
body.cl-embed form .form-row select:focus {
  outline: 3px solid #A78BFA !important;
  outline-offset: 2px !important;
  border-width: 2px !important;
  border-color: #A78BFA !important;
}

/* The address pop-out keeps its own field frames — there the card IS the input. */
body.cl-embed .cl-am .cl-am__body p.form-row {
  border: 1px solid rgba(155, 93, 229, 0.20) !important;
}

/* The sticky cart bar only renders with items in the cart, so it escaped the
   earlier centring sweep — that pass ran against an empty cart. */
.cl-sticky-cart__count,
.cl-sticky-cart__ship,
.cl-sticky-cart__text,
.cl-cart-count {
  text-align: center !important;
}

/* Last two uppercase-bold stragglers found at 375px: a link and a table
   header. Everything else moved to sentence case already. */
.woocommerce table.shop_table th,
.woocommerce-checkout-review-order-table th,
.cl-sticky-cart a,
.cl-sticky-cart__btn span {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

/* ============================================================
   FINAL FOUR — named by scanning 11 pages at 375px and 1440px
   ============================================================ */

/* "Secure checkout" inside the sticky bar button: a bare <span> the earlier
   selectors never reached. 10 instances, both widths. */
.cl-sticky-cart span,
.cl-sticky-cart__btn > span{
  text-align: center !important;
}

/* Still shouting: the cart-bar product link, the PDP checkout shortcut label,
   and the hero's "How to save" aside. */
.cl-sticky-cart a,
.cl-sticky-cart__count a,
.cl-checkout-shortcut__label,
.cl-hero2__aside {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

/* Breadcrumb links are 18px of text. They are navigation inside a sentence, so
   they keep their size and gain a reachable target instead. */
.woocommerce-breadcrumb a,
.woocommerce nav.woocommerce-breadcrumb a {
  position: relative;
  display: inline-block;
}
.woocommerce-breadcrumb a::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* The product link inside the sticky bar sat outside the earlier selectors. */
.cl-sticky-cart *{
  text-transform: none !important;
}
.cl-sticky-cart__btn{ letter-spacing: 0.01em !important; }

/* Links sitting inside body copy keep their size — making them 44px tall would
   break the line they live in — so they get a reachable target instead. */
.cl-content a:not(.cl-btn),
.woocommerce-breadcrumb a,
.cl-footer a:not(.cl-btn),
.woocommerce-info a,
.woocommerce-message a {
  position: relative;
}
.cl-content a:not(.cl-btn)::before,
.woocommerce-breadcrumb a::before,
.woocommerce-info a::before,
.woocommerce-message a::before {
  content: "";
  position: absolute;
  left: -2px; right: -2px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
  pointer-events: auto;
}

/* ============================================================
   LONG-FORM PAGES READ, SHORT PAGES CENTRE

   Measured: eight paragraphs of 320-500 characters running 11-18 lines on
   /about/, /research-quality/, /terms/ and /research-use-only/. Centred, a
   17-line block is genuinely hard to read — the eye loses the start of each
   line — and that is the "crammed, too many words" problem.

   So the policy and explainer pages left-align their body copy and get a
   measure, which is what makes text readable. Their HEADINGS stay centred, so
   the pages still look like the rest of the site. Everywhere else is centred.
   ============================================================ */
body.page-id-54 .cl-content p,   /* terms */
body.page-id-55 .cl-content p,   /* privacy */
body.page-id-56 .cl-content p,   /* research use only */
body.page-id-51 .cl-content p,   /* research quality */
body.page-id-137 .cl-content p,  /* affiliate terms */
body.page-id-50 .cl-content p,   /* about */
body.page-id-53 .cl-content p,   /* shipping & returns */
body.page-id-52 .cl-content p {  /* faq */
  text-align: left;
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

/* Every content paragraph gets a comfortable measure, centred or not — a line
   much longer than about 70 characters is tiring wherever it sits. */
.cl-content p {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* The cart line-item product link was the last thing still shouting. */
.woocommerce table.cart .product-name a,
.woocommerce-cart-form .product-name a {
  text-transform: none !important;
}

/* The hero's main call to action was uppercase at 12.5px with 1.5px tracking —
   the smallest type on the page doing the biggest job. It escaped every earlier
   sweep because the button holds an <svg> child, and those passes only examined
   elements with no children. */
.cl-hero2__shop {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* ============================================================
   NAVIGATION AND CHROME — sentence case

   Found only after fixing the detector: it had been skipping any element that
   contained a child node, so every menu item, the top bar and the footer notice
   were never examined. 256 nav labels at 12px uppercase with tracking.

   Small uppercase labels are what make a site read as a stock template. The
   genuine uppercase stays: product codes (GHK-CU, TIRZ), the strength pill,
   category chips, the sale flash and short eyebrows.
   ============================================================ */
.cl-nav-label,
.cl-nav a,
.cl-menu a,
.cl-mobile__nav a,
.cl-topbar__promo,
.cl-topbar__label,
.cl-footer__ruo,
.woocommerce .product_meta .sku_wrapper,
.woocommerce .product_meta .posted_in,
.woocommerce .product_meta .tagged_as {
  text-transform: none !important;
  letter-spacing: 0.005em !important;
}

/* Menu items read better a touch larger once they are not shouting. */
.cl-nav-label,
.cl-mobile__nav a {
  font-size: 15.5px !important;
  font-weight: 600 !important;
}

/* ============================================================
   REVEAL ON SCROLL

   Content fades and rises as it arrives. The `cl-anim` class on <html> is added
   by assets/reveal.js — so if that script never runs, none of these rules
   apply and the page is simply visible. Nothing here can leave a visitor
   staring at a blank page.

   Movement is small on purpose: 14px and 520ms. Long slides and big distances
   are what make a site feel like a template with a plugin bolted on.
   ============================================================ */
.cl-anim [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  will-change: opacity, transform;
  transition:
    opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cl-anim [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Headings carry a touch more travel so a section announces itself. */
.cl-anim h1[data-reveal],
.cl-anim h2[data-reveal],
.cl-anim .cl-section__title[data-reveal],
.cl-anim .cl-hero2__titleTop[data-reveal],
.cl-anim .cl-hero2__titleBottom[data-reveal],
.cl-anim .cl-chero__word[data-reveal] {
  transform: translate3d(0, 20px, 0);
}

/* Product cards lift rather than slide — they are objects, not paragraphs. */
.cl-anim .woocommerce ul.products li.product[data-reveal],
.cl-anim .cl-save__card[data-reveal] {
  transform: translate3d(0, 18px, 0) scale(0.985);
}
.cl-anim .woocommerce ul.products li.product[data-reveal].is-revealed,
.cl-anim .cl-save__card[data-reveal].is-revealed {
  transform: none;
}

/* Anyone who asks for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .cl-anim [data-reveal],
  .cl-anim [data-reveal].is-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Printing must never lose content to an un-fired observer. */
@media print {
  .cl-anim [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* The shop hero's copy block was left-aligned, so "Explore products" sat 153px
   off the centre of its own container. The eyebrow, heading and lede above it
   were already centred, which is what made the button look dropped. */
.cl-chero__copy {
  text-align: center;
}
.cl-chero__explore {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
}

/* The shop hero lede had a measure but no auto margins, so it sat 55px left of
   the heading and button it belongs with. */
.cl-chero__lede {
  margin-left: auto;
  margin-right: auto;
}

/* Carousel slides are moved in and out by the carousel itself, so they must
   never be left at opacity 0 by the reveal system — an off-screen slide is
   never seen by the observer, and advancing the carousel showed a blank. */
.cl-anim .cl-picks__slide,
.cl-anim .cl-picks__track *,
.cl-anim [class*="carousel"] [data-reveal],
.cl-anim [class*="slider"] [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   SHOP HERO — the words were sitting on top of each other

   Measured at 390px (iPhone): font-size 42.9px against line-height 39.5px, so
   each line box was SMALLER than the text inside it. "FULL" overlapped
   "CATALOG" by 14.6px and "CATALOG" ran 16px into the lede beneath.

   Display type can carry tight leading, but never less than the glyphs need.
   ============================================================ */
.cl-chero__word {
  line-height: 1.24 !important;
}

.cl-chero__lede {
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}

.cl-chero__eyebrow {
  margin-bottom: 12px !important;
}

/* The call to action was 12.5px — smaller than the body text under it. */
.cl-chero__explore {
  font-size: 15px !important;
  min-height: 50px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Same fault as the shop hero: the home hero's two title lines were set with a
   line-height below their own font-size, so "Research" overlapped "without
   limits" by 10px at 390px. */
.cl-hero2__titleTop,
.cl-hero2__titleBottom {
  line-height: 1.22 !important;
}
.cl-hero2__titleBottom { margin-top: 2px; }

/* ============================================================
   READING MEASURE — the contexts the measure never reached

   `.cl-content p` has had a 62ch measure for a while, so every theme-built
   page reads correctly. WooCommerce builds the product description tab
   OUTSIDE `.cl-content` — the chain is
   `.container.cl-woo-wrap > .product > .woocommerce-tabs > .woocommerce-Tabs-panel`
   — so nothing capped it and it inherited the full container width.

   Measured at 1062px before this rule, on every product page:
     "Studied in metabolic and endocrine…"   934px ink in a 946px box — 81ch, 6px gutters
     "Retatrutide is a synthetic peptide…"   925px — 80ch
     "Supplied lyophilised in a sealed 3…"   892px — 77ch
   At 375px the same paragraphs measure fine, because the viewport does the
   capping. That is exactly the phone/desktop split: nothing was wrong on the
   phone, so nothing looked wrong until the desktop was measured.

   Because the measure is in `ch` it needs no breakpoint — on a phone 62ch is
   wider than the screen and the rule does nothing.
   ============================================================ */
.woocommerce div.product .woocommerce-Tabs-panel p,
.woocommerce div.product .woocommerce-Tabs-panel li,
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-product-details__short-description p {
  max-width: var(--measure);
  margin-inline: auto;
}

/*
 * The footer legal strip was the last run of text with no measure: 710px of
 * 10px tracked uppercase in a 780px cap — 89 characters a line, the longest
 * on the site. It sits in a space-between row next to the copyright at
 * 1024px+, so capping it only opens the gap between the two; below 1024px the
 * row stacks and 62ch is wider than a phone, so nothing changes there.
 */
.cl-footer__disclaimer {
  max-width: var(--measure);
}

/* ============================================================
   "TALK TO A REAL PERSON" — the same promise at every width

   The phrase was mobile-only: `.cl-topbar__calltag { display: none }` with a
   max-width:767px override turning it back on. So a phone saw "Talk to a real
   person (850) 427-1033" and a desktop saw only "Questions?" — the weaker of
   the two, on the wider screen with the most room for it.

   Measured at 1062px: the bar was using 612px of 1062px, so there was room for
   the longer line without touching anything else.
   ============================================================ */
.cl-topbar__calltag {
  display: inline-flex;
  align-items: center;
}

@media (min-width: 768px) {
  /* "Questions?" and "Talk to a real person" are the same sentence twice.
     Keep the one that actually answers the question. */
  .cl-topbar__label { display: none; }

  .cl-topbar__calltag {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--mist-300);
    margin-right: 8px;
  }
}

/* ============================================================
   NOTICES — one component, three colours

   Measured at 375px on the cart page with an error and a success stacked:

     .woocommerce-error    icon absolute at left:24px, text padding-left:20px
                           -> the text ran UNDER the icon (the "Sorry" overlap),
                           text-align:left, margin-bottom:16px
     .woocommerce-message  icon inline-block static, text-align:center,
                           margin-bottom:26px

   Three separate inconsistencies — icon layout, alignment and spacing — which
   is why a stack of them read as ragged. The success notice already had the
   inline-icon treatment; error and info never got it, so they kept
   WooCommerce's absolutely-pinned icon from an icon font this theme does not
   load (which is also why it rendered as a plain disc).

   Everything below makes the three identical apart from colour.
   ============================================================ */
:root {
  --cl-warn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v7'/%3E%3Cpath d='M12 17.5v.5'/%3E%3C/svg%3E");
  --cl-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 6.5v.5'/%3E%3C/svg%3E");
}

.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .cart-empty,
.woocommerce-error,
.woocommerce-info,
.cart-empty {
  position: relative;
  display: block;
  padding: 20px;
  margin: 0 0 26px;          /* was 16px on the error — same as the success now */
  line-height: 1.55;
  text-align: center;        /* was left on the error */
  list-style: none;
}

/* The error is a <ul>; its <li> carried WooCommerce's own list indent. */
.woocommerce .woocommerce-error li,
.woocommerce-error li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce .woocommerce-error::before,
.woocommerce .woocommerce-info::before,
.woocommerce .cart-empty::before,
.woocommerce-error::before,
.woocommerce-info::before,
.cart-empty::before {
  content: "";
  position: static;          /* was absolute — this is the overlap fix */
  display: inline-block;
  vertical-align: -5px;
  margin: 0 10px 0 0;
  left: auto;
  top: auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 0;
  color: transparent;
  font-size: 0;
  line-height: 0;
  background: var(--ui-500);
  -webkit-mask: var(--cl-info-icon) center / 15px 15px no-repeat;
          mask: var(--cl-info-icon) center / 15px 15px no-repeat;
}

.woocommerce .woocommerce-error::before,
.woocommerce-error::before {
  background: #ef4444;
  -webkit-mask: var(--cl-warn-icon) center / 15px 15px no-repeat;
          mask: var(--cl-warn-icon) center / 15px 15px no-repeat;
}

/* The "Return to shop" button sat hard against the notice above it. */
.woocommerce .cart-empty + .return-to-shop,
.cart-empty + .return-to-shop { margin-top: 20px; text-align: center; }

/* ============================================================
   DRAWER TAP TARGETS — measured at 375px, all under the 44px floor

     qty −            30px
     qty +            30px
     Remove           30px
     close            34px
     phone / email    22px

   The hit area is grown with a pseudo-element instead of padding or
   min-height, so the drawer's measured layout does not move — only the part
   a finger can land on.
   ============================================================ */
.cl-drawer__step,
.cl-drawer__remove,
.cl-drawer__close,
.cl-help__link {
  position: relative;
}

.cl-drawer__step::after,
.cl-drawer__remove::after,
.cl-help__link::after {
  content: "";
  position: absolute;
  /* 30px tall + 7px each side = 44. The links are 22px, so they get 11. */
  inset: -7px;
  /* Nothing visible: this is hit area, not decoration. */
  background: none;
  border: 0;
}

.cl-help__link::after { inset: -11px -6px; }

/* Two adjacent expanded areas must not overlap, or the wrong one takes the
   tap. The steppers sit 30px apart, so their grown areas meet exactly. */
.cl-drawer__qty { gap: 4px; }

/* ============================================================
   EMBEDDED CHECKOUT — room under the floating assistant

   `.cl-assist__launch` is position:fixed, pinned ~16px off the bottom of the
   iframe, 52px tall, z-index 9998. Measured at 375px it sat at y620-672 while
   the first payment option sat at y588-661 — 41px of the Zelle button was
   underneath it.

   Fixed furniture needs matching room at the end of the scroll, or the last
   thing on the page can never be reached. 52 + 16 above + 20 below.
   ============================================================ */
body.cl-embed {
  padding-bottom: 88px;
}

/* ============================================================
   PRODUCT PHOTO — no box around it

   The gallery drew a 1px #2A2536 border with a 6px radius around the image.
   The vial cut-out is transparent, so the page shows through and the border
   read as a hard rectangle drawn around a floating vial — the thing that
   looked wrong on the product page.

   The photo is the product. It does not need a frame.
   ============================================================ */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ============================================================
   PRODUCT PHOTO — stop the raw image overflowing its box

   Measured at 375px on /product/tirz/: the gallery holds TWO images. The
   theme's cut-out renders correctly at 173x380. WooCommerce's own copy renders
   at its natural 625x1373 with no constraint — 993px taller than the 380px
   gallery — and `overflow: hidden` chops it. That is the cropped vial.

   An image in a fixed-height box needs both dimensions and a fit, not just a
   max-width.
   ============================================================ */
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* The zoom trigger is an href="#" that does nothing when the lightbox script
   is not running — it looks tappable and is not. Let the photo be a photo. */
.woocommerce div.product .woocommerce-product-gallery__trigger {
  pointer-events: none;
}

/* The whole card is the link, photo included — a product photo that does
   nothing when tapped reads as broken. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: block;
}

.woocommerce ul.products li.product .cl-cardimg,
.woocommerce ul.products li.product .cl-cardimg img,
.cl-picks__card .cl-cardimg,
.cl-picks__card .cl-cardimg img {
  pointer-events: auto;
  cursor: pointer;
}

/* ============================================================
   ROOM FOR THE STICKY CART BAR — measured, not assumed

   Was 84px, and 132px under 782px. Measured at 375x812 the bar is 181px, so
   49px of every page was hidden beneath it — on a product page that was the
   bottom of the vial, which looks like a cropped photo rather than something
   sitting on top of it.

   assets/sticky-fit.js measures the bar and publishes --cl-stickybar. The px
   values below are the fallback for the moment before that script runs.
   ============================================================ */
body.cl-has-sticky-cart {
  padding-bottom: calc(var(--cl-stickybar, 84px) + 16px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 782px) {
  body.cl-has-sticky-cart {
    padding-bottom: calc(var(--cl-stickybar, 132px) + 16px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   REVIEWS FORM — one clean column

   It mixed centred and left-aligned lines, the textarea and the name/email
   boxes were different widths, and name/email were browser-white. Now: one
   600px column, heading centred, every label left above a full-width dark
   field, same as the checkout fields.
   ============================================================ */
#reviews .woocommerce-Reviews-title,
#reviews .woocommerce-noreviews,
#reviews #review_form_wrapper,
#reviews .commentlist {
  max-width: 600px;
  margin-inline: auto;
}
#reviews .woocommerce-noreviews { margin-bottom: 28px; }

#reviews #respond,
#reviews .comment-form,
#reviews .comment-form p { text-align: left; }

#reviews .comment-reply-title {
  display: block;
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 600;
  color: var(--mist-50, #fff);
}
#reviews .comment-notes {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--mist-400, #A9A2B4);
}
#reviews .comment-form p { margin: 0 0 18px; }

#reviews .comment-form label {
  display: block;
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mist-100, #E6E2EB);
  text-align: left;
}

#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form input[type="url"],
#reviews .comment-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--ink-600, #2A2536);
  border-radius: 10px;
  background: #111015;
  color: var(--mist-50, #fff);
  font: 400 16px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif;  /* 16px: no iOS zoom */
}
#reviews .comment-form textarea { min-height: 140px; resize: vertical; }
#reviews .comment-form input:focus,
#reviews .comment-form textarea:focus {
  outline: none;
  border-color: var(--ui-400, #9B5DE5);
  box-shadow: 0 0 0 3px rgba(155, 93, 229, 0.25);
}

/* stars sit under their label, left edge aligned with the fields */
#reviews .comment-form-rating p.stars { margin: 0 0 18px; text-align: left; }
#reviews .comment-form-rating p.stars span { display: inline-flex; gap: 4px; }

/* checkbox and its sentence on one line, box aligned to the first line */
#reviews .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#reviews .comment-form-cookies-consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ui-400, #9B5DE5);
}
#reviews .comment-form-cookies-consent label {
  display: inline;
  margin: 0;
  font-weight: 400;
  color: var(--mist-300, #C9C3D2);
}

#reviews .form-submit { margin: 6px 0 0; }
#reviews .form-submit #submit { width: 100%; justify-content: center; }

/* ============================================================
   ALIGNMENT SYSTEM — content pages (final word; supersedes the
   scattered centring rules above)

   One centred column. Headings and paragraphs centred. Lists keep
   left-aligned lines (scannable) but the list BLOCK is centred under
   its heading. Before this, paragraphs were capped at 65ch but pinned
   left while headings spanned the full card — /contact/ showed the
   text column 194px left of its own headings.
   ============================================================ */
.cl-content > :is(p, h1, h2, h3, h4, blockquote, figure, table, .wp-block-table) {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.cl-content > :is(p, h1, h2, h3, h4) { text-align: center; }
.cl-content > :is(ul, ol) {
  width: fit-content;
  max-width: min(720px, 100%);
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left;
}
.cl-content > .cl-content { max-width: none; }
/* Contact card: its lines are width-capped, so centre the blocks too. */
.cl-contact > :is(p, h2, h3) { margin-left: auto !important; margin-right: auto !important; }

/* How To Save: section copy and buttons centred under their centred headings. */
.cl-save { text-align: center; }
.cl-save__lede { margin-left: auto !important; margin-right: auto !important; }
.cl-atc { text-align: center; }

/* My Account login / register: one centred column like the reviews form —
   labels left above full-width fields, instead of a narrow form pinned left
   under a centred "Login". */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2,
.woocommerce-account .woocommerce > h2 {
  max-width: 480px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.woocommerce-account :is(.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword) .form-row {
  width: 100% !important;
  float: none !important;
  max-width: none;
  text-align: left;
}
.woocommerce-account :is(.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword) label { text-align: left; }
.woocommerce-account :is(.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword) .input-text { width: 100% !important; box-sizing: border-box; }
.woocommerce-account .woocommerce-LostPassword { text-align: center; }
/* Refer-a-friend card: width-capped lines centred as blocks too. */
.cl-ref__card > :is(p, h2) { margin-left: auto !important; margin-right: auto !important; }

/* ============================================================
   CHECKOUT — protection + total right above Place order
   ============================================================ */
.cl-protect--pay { margin: 4px 0 10px; }
.cl-protect--pay .cl-protect__title { padding-right: 2px; }
.cl-paytotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 12px 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-purple, rgba(155, 93, 229, 0.3));
  font-family: var(--font-body);
  color: var(--mist-50, #fff);
}
.cl-paytotal span { font-size: 15px; font-weight: 600; }
.cl-paytotal strong { font-size: 22px; font-weight: 800; }
/* Order summary prices were in a monospace fallback — use the site font,
   with even-width digits so the column still lines up. */
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table .amount,
.cl-paytotal .amount {
  font-family: var(--font-body) !important;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CHECKOUT ON A PHONE — its own measured layout
   One 16px gutter on each side (was 23px + 18px = 41px, leaving
   293 of 375px for text), 16px between cards, 16px inputs so
   iOS never zooms on focus, nothing under 12.5px, 44px targets.
   ============================================================ */
@media (max-width: 767px) {
  .cl-co__panel { padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .cl-co__head { padding: 10px 8px 10px 16px; }
  .cl-co__close { width: 44px; height: 44px; }

  body.cl-embed .cl-embed__main { padding: 16px 16px 40px !important; }

  /* typing boxes: 16px text or iPhone zooms the whole page on tap */
  body.cl-embed input.input-text,
  body.cl-embed input[type="text"],
  body.cl-embed input[type="email"],
  body.cl-embed input[type="tel"],
  body.cl-embed select,
  body.cl-embed textarea,
  body.cl-embed .select2-selection__rendered { font-size: 16px !important; }

  /* readable floor */
  body.cl-embed .woocommerce-checkout-review-order-table th,
  body.cl-embed .woocommerce-checkout-review-order-table td { font-size: 14px !important; }
  body.cl-embed .woocommerce-checkout-review-order-table thead th { font-size: 12.5px !important; }
  body.cl-embed .cl-ruo-notice,
  body.cl-embed .cl-ruo,
  body.cl-embed .cl-protect__desc,
  body.cl-embed .cl-paynote { font-size: 13px !important; line-height: 1.5; }

  /* shipping choices: a real tap target */
  body.cl-embed input[type="radio"] { width: 20px !important; height: 20px !important; flex: 0 0 20px; }
  body.cl-embed #shipping_method li,
  body.cl-embed .woocommerce-shipping-methods li { min-height: 44px; display: flex; align-items: center; gap: 10px; }

  /* one rhythm between the big blocks */
  body.cl-embed form.checkout > * + *,
  body.cl-embed .cl-ck__main > * + * { margin-top: 16px !important; }
  body.cl-embed form.checkout_coupon { margin-bottom: 16px !important; }

  /* notice: same 16px to the next block as everything else */
  body.cl-embed .cl-ruo-notice { margin: 0 0 16px !important; }

  /* every card's text starts at the same 31px edge (card edge + 15) */
  body.cl-embed .cl-ck__row--pay { padding: 14px 14px 18px !important; }
  body.cl-embed #payment { border: 0 !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; }

  /* one label style: PROMO CODE, SHIP TO, SHIPPING, PAYMENT, ORDER SUMMARY */
  body.cl-embed .cl-coupon__label,
  body.cl-embed .cl-ck__payTitle,
  body.cl-embed .cl-ck__asideTitle,
  body.cl-embed .cl-ck__label {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--mist-300, #C9C3D2) !important;
  }
  body.cl-embed .cl-ck__payTitle { padding: 0 !important; margin: 0 0 8px !important; border: 0 !important; }
  body.cl-embed .cl-ck__payTitle::after, body.cl-embed .cl-ck__payTitle::before { display: none !important; }
  body.cl-embed .cl-coupon__label { margin-bottom: 8px !important; }
  body.cl-embed .cl-paynote { margin: 0 0 12px !important; }
}

/* ============================================================
   CHECKOUT — the two checkbox cards match, and the card option
   matches the other payment methods (measured, all widths)
   ============================================================ */
/* Credit / Debit Card: same box, padding, tile and type as Zelle/Venmo/… */
body.cl-embed #payment .cl-cardask__btn,
.woocommerce-checkout #payment .cl-cardask__btn {
  padding: 16px 44px 16px 16px;
  gap: 14px;
  min-height: 70px;
  font: 700 16px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif;
}
body.cl-embed #payment .cl-cardask__btn::before,
.woocommerce-checkout #payment .cl-cardask__btn::before {
  width: 38px;    /* the other methods' tiles measure 38px */
  height: 38px;
  margin-left: 2px;
  border-radius: 8px;
  background-size: 20px 20px, auto;
}

/* Shipping protection + research acknowledgement: identical cards */
body.cl-embed .cl-protect--pay,
body.cl-embed .cl-acknowledgement,
.woocommerce-checkout .cl-protect--pay,
.woocommerce-checkout .cl-acknowledgement {
  margin: 0 0 12px !important;
  padding: 14px !important;
  border: 1px solid rgba(155, 93, 229, 0.28) !important;
  border-radius: 12px !important;
  background: var(--ink-900, #111015) !important;
  box-shadow: none !important;
}
body.cl-embed .cl-acknowledgement .form-row,
.woocommerce-checkout .cl-acknowledgement .form-row { margin: 0 !important; padding: 0 !important; }
body.cl-embed .cl-protect--pay .cl-protect__row,
.woocommerce-checkout .cl-protect--pay .cl-protect__row {
  grid-template-columns: 24px minmax(0, 1fr) !important;   /* the box renders 24px */
  column-gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  align-items: start !important;
}
body.cl-embed .cl-acknowledgement label,
.woocommerce-checkout .cl-acknowledgement label { gap: 12px !important; padding: 0 !important; font-size: 14px !important; }
/* one checkbox look for both */
body.cl-embed .cl-protect__box,
.woocommerce-checkout .cl-protect__box {
  appearance: none; -webkit-appearance: none;
  width: 22px !important; height: 22px !important;
  margin: 1px 0 0 !important;
  border: 1.5px solid rgba(155, 93, 229, 0.55);
  border-radius: 6px;
  background: var(--ink-900, #111015);
  align-self: start !important;
  grid-row: 1 / span 2;
}
body.cl-embed .cl-protect__box:checked,
.woocommerce-checkout .cl-protect__box:checked {
  border-color: var(--ui-500, #7B3FB2);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
    var(--ui-500, #7B3FB2);
}
body.cl-embed .cl-acknowledgement input[type="checkbox"],
.woocommerce-checkout .cl-acknowledgement input[type="checkbox"] { width: 22px !important; height: 22px !important; margin: 1px 0 0 !important; }
body.cl-embed .cl-protect__title { font-size: 14px !important; line-height: 1.4; }
body.cl-embed .cl-protect__desc { font-size: 13px !important; line-height: 1.5; margin-top: 2px; }

/* "Your details are used…" — same size and rhythm as the other notes */
body.cl-embed .woocommerce-privacy-policy-text { margin: 16px 0 12px !important; }
body.cl-embed .woocommerce-privacy-policy-text p { font-size: 13px !important; line-height: 1.55 !important; color: var(--mist-400, #A9A2B4) !important; }
/* Total above the button: the price rule was shrinking it to 15px */
body.cl-embed .cl-paytotal span { font-size: 16px !important; font-weight: 700 !important; }
body.cl-embed .cl-paytotal strong,
body.cl-embed .cl-paytotal .amount,
body.cl-embed .cl-paytotal bdi { font-size: 22px !important; font-weight: 800 !important; color: var(--mist-50, #fff) !important; }
@media (max-width: 767px) {
  /* button to card edge: 64px of stacked margins -> the card's own 18px */
  body.cl-embed #payment div.form-row.place-order { padding-bottom: 0 !important; margin-bottom: 0 !important; }
  body.cl-embed #place_order { margin-bottom: 0 !important; }
  /* last gap was 32px (16 + a stray 16) */
  body.cl-embed .cl-ck__main { margin-bottom: 0 !important; }
}
body.cl-embed .cl-paytotal .woocommerce-Price-currencySymbol { font-size: inherit !important; }
@media (max-width: 767px) {
  /* summary card = same card as the rest: 14px inside, one border, no underline */
  body.cl-embed form.checkout #order_review.cl-ck__aside { margin-top: 0 !important; padding: 16px 14px 18px !important; }
  body.cl-embed .cl-ck__asideTitle { padding: 0 !important; margin: 0 0 10px !important; border: 0 !important; }
  body.cl-embed .cl-ck__asideTitle::after, body.cl-embed .cl-ck__asideTitle::before { display: none !important; }
  body.cl-embed .woocommerce-checkout-review-order-table {
    margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
  }
  body.cl-embed .woocommerce-checkout-review-order-table thead th { background: transparent !important; }
  body.cl-embed .woocommerce-checkout-review-order-table th,
  body.cl-embed .woocommerce-checkout-review-order-table td { padding: 10px 0 !important; }
  body.cl-embed .woocommerce-checkout-review-order-table td:last-child,
  body.cl-embed .woocommerce-checkout-review-order-table th:last-child { text-align: right !important; }
}
@media (max-width: 767px) {
  /* "Need a hand?" — its own card, same 14px inside and 16px above as the rest */
  body.cl-embed p.cl-help {
    margin: 16px 0 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(155, 93, 229, 0.22) !important;
    border-radius: 14px !important;
    background: rgba(17, 16, 21, 0.86) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }
}

/* "Ask Pepper" in the checkout header — help without leaving checkout */
.cl-co__head { gap: 10px; }
.cl-co__title { margin-right: auto; }
.cl-co__pepper {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid rgba(155, 93, 229, 0.55);
	border-radius: 999px;
	background: rgba(155, 93, 229, 0.14);
	color: #fff;
	font: 700 14px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
	cursor: pointer;
}
.cl-co__pepperDot {
	width: 10px; height: 18px; border-radius: 2px 2px 4px 4px;
	background: linear-gradient(180deg, #fff 0 24%, #E7DFF2 24% 32%, #7B3FB2 32% 78%, #F4EFFA 78% 100%);
	box-shadow: 0 0 8px rgba(216, 190, 255, 0.7);
}

/* ============================================================
   CHECKOUT — last default-looking controls (found in a clean
   first-visit run): shipping circles, typewriter prices, the
   near-invisible email box, grey billing checkbox
   ============================================================ */
body.cl-embed #shipping_method input[type="radio"],
body.cl-embed .woocommerce-shipping-methods input[type="radio"] {
	appearance: none; -webkit-appearance: none;
	width: 22px !important; height: 22px !important; flex: 0 0 22px;
	margin: 0 !important;
	border: 1.5px solid rgba(155, 93, 229, 0.6);
	border-radius: 50%;
	background: var(--ink-900, #111015);
	cursor: pointer;
}
body.cl-embed #shipping_method input[type="radio"]:checked,
body.cl-embed .woocommerce-shipping-methods input[type="radio"]:checked {
	border-color: var(--ui-400, #9B5DE5);
	background: radial-gradient(circle, var(--ui-400, #9B5DE5) 0 45%, transparent 50%), var(--ink-900, #111015);
}
body.cl-embed #shipping_method,
body.cl-embed #shipping_method *,
body.cl-embed .woocommerce-shipping-methods .amount { font-family: var(--font-body) !important; font-variant-numeric: tabular-nums; }

/* email and every other typing box: a real box, text inset 16px from its edge
   (the email used to sit flush against the left border) */
body.cl-embed .woocommerce-checkout input.input-text,
body.cl-embed form.checkout input.input-text,
body.cl-embed form.checkout textarea {
	box-sizing: border-box !important;
	width: 100% !important;
	/* Spec, 2026-10-07: 2px boundary, 8px radius, 48px min, 16px text/padding.
	   Edited HERE rather than overridden from below — `form.checkout
	   input.input-text` is one class more specific than an [type] selector, so
	   every override lost to it. #8B5CF6 measures 4.46:1 on this surface,
	   clearing the 3:1 needed for an essential control boundary; the old
	   rgba(155,93,229,0.38) was far under it. */
	border: 2px solid #8B5CF6 !important;
	background: #0D0C11 !important;
	border-radius: 8px !important;
	min-height: 48px;
	padding: 12px 16px !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}
body.cl-embed form.checkout textarea {
	min-height: 96px !important;
	resize: vertical;
}
/* an older "field card draws the frame" rule still stripped the notes box */
body.cl-embed form.checkout .form-row textarea#order_comments {
	border: 2px solid #8B5CF6 !important;
	background: #0D0C11 !important;
	border-radius: 8px !important;
	padding: 12px 16px !important;
}
body.cl-embed form.checkout .form-row textarea#order_comments:focus { border-color: var(--ui-400, #9B5DE5) !important; }
body.cl-embed form.checkout input.input-text:focus,
body.cl-embed form.checkout textarea:focus {
	/* Border WIDTH never changes on focus, only its colour, so the field does
	   not shift. The ring is a real outline at 2px offset, per spec. */
	outline: 3px solid #A78BFA !important;
	outline-offset: 2px !important;
	border-width: 2px !important;
	border-color: #A78BFA !important;
	box-shadow: none;
}

/* Inside "Ship to": one card, flat fields. Email, notes and the billing
   toggle were each a card of their own (notes was a card inside a card),
   so the panel read as boxes stacked in boxes. Now: label, box, 20px, next. */
body.cl-embed form.checkout #billing_email_field,
body.cl-embed form.checkout .woocommerce-additional-fields,
body.cl-embed form.checkout .woocommerce-additional-fields__field-wrapper,
body.cl-embed form.checkout #order_comments_field {
	margin: 20px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}
body.cl-embed form.checkout .woocommerce-additional-fields__field-wrapper,
body.cl-embed form.checkout #order_comments_field { margin-top: 0 !important; }
body.cl-embed form.checkout #billing_email_field > label,
body.cl-embed form.checkout #order_comments_field > label {
	display: block !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	font: 600 14px/1.3 var(--font-body) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--mist-50, #F5F3F7) !important;
}
body.cl-embed form.checkout #billing_email_field .description,
body.cl-embed form.checkout #billing_email_field small {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	color: var(--mist-400, #A39DAE) !important;
}
body.cl-embed form.checkout .woocommerce-input-wrapper { display: block; width: 100%; }

/* "Use a different billing address": same checkbox as the rest */
body.cl-embed #cl-billing-different,
body.cl-embed input[name="cl-billing-different"],
body.cl-embed .cl-billing-toggle input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	width: 22px !important; height: 22px !important; flex: 0 0 22px;
	border: 1.5px solid rgba(155, 93, 229, 0.55); border-radius: 6px;
	background: var(--ink-900, #111015);
}
body.cl-embed #cl-billing-different:checked,
body.cl-embed input[name="cl-billing-different"]:checked {
	border-color: var(--ui-500, #7B3FB2);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
		var(--ui-500, #7B3FB2);
}

/* ============================================================
   PAYMENT OPTIONS — name + one-line subtitle, and a pay-now box
   under the chosen one (2026-09-21). Measured at 375 first.
   Row: 16px pad | 38px tile | 14px | text | 44px for the tick
   ============================================================ */
.woocommerce-checkout #payment ul.payment_methods li label,
body.cl-embed #payment .cl-cardask__btn,
.woocommerce-checkout #payment .cl-cardask__btn {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-auto-rows: auto;
  column-gap: 14px;
  row-gap: 3px;
  align-items: center;
  align-content: center;
  text-align: left;
  font: 700 16px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  color: #fff;
}
.woocommerce-checkout #payment ul.payment_methods li > label::before,
.woocommerce-checkout #payment .cl-cardask__btn::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 38px !important;
  height: 38px !important;
}
.cl-pm__name { grid-column: 2; }
.woocommerce-checkout #payment .cl-pm__sub {
  grid-column: 2;
  display: block;
  font: 500 13px/1.3 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  letter-spacing: 0;
  color: var(--mist-400, #A39DAE);
}
.woocommerce-checkout #payment li:has(input:checked) .cl-pm__sub,
.woocommerce-checkout #payment li.cl-cardask.is-selected .cl-pm__sub { color: var(--mist-200, #D9D4E0); }

/* the tick sits level with the name, not the middle of an opened box */
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked)::after,
.woocommerce-checkout #payment ul.payment_methods li.cl-cardask.is-selected::after {
  top: 24px !important;
  transform: none !important;
}

/* the pay-now box */
.woocommerce-checkout #payment ul.payment_methods li div.payment_box {
  margin: 0 !important;
  padding: 0 12px 12px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.woocommerce-checkout #payment .cl-paynow {
  flex: 0 0 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 14px;
  border: 1px solid rgba(155, 93, 229, 0.32);
  border-radius: 12px;
  background: #0D0C11;
}
.woocommerce-checkout #payment .cl-paynow--card { display: none; margin: 0 12px 12px; width: auto; flex: 0 0 calc(100% - 24px); padding: 12px 14px; }
.woocommerce-checkout #payment li.cl-cardask.is-selected .cl-paynow--card { display: block; }
.cl-paynow__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "k copy" "v copy";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.cl-paynow__row:last-of-type { border-bottom: 0; }
.cl-paynow__k {
  grid-area: k;
  font: 600 11px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist-400, #A39DAE);
}
.cl-paynow__v {
  grid-area: v;
  min-width: 0;
  font: 700 17px/1.3 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff;
  overflow-wrap: anywhere;
}
.woocommerce-checkout #payment .cl-paynow__copy { grid-area: copy; }
.cl-paynow__v--id { font-size: 16px; }
.woocommerce-checkout #payment .cl-paynow__copy {
  min-width: 72px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(155, 93, 229, 0.6);
  border-radius: 999px;
  background: rgba(155, 93, 229, 0.16);
  color: #fff;
  font: 700 13px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  cursor: pointer;
}
.woocommerce-checkout #payment .cl-paynow__copy.is-copied { background: #1f7a4d; border-color: #3DD68C; }
.cl-paynow__next {
  margin: 0 !important;
  padding: 12px 0 10px;
  font: 500 14px/1.45 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: var(--mist-200, #D9D4E0);
}
.cl-paynow--card .cl-paynow__next { padding: 0; }
.cl-paynow__next b { color: #fff; }
.cl-paynow__next a { color: #C9A6FF; font-weight: 700; white-space: nowrap; }
/* a 42-character wallet address: monospace, 14px, two even lines */
.payment_method_corelabs_bitcoin .cl-paynow__v--id {
  font: 600 14px/1.45 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0;
}

/* "Use a different billing address": a slim row, not a tall card */
body.cl-embed form.checkout .cl-billing-toggle {
  margin-top: 20px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
}

/* ============================================================
   ADDRESS FORM — same fields as the rest of checkout (2026-09-21)
   Before: each field was a big card with the label and the value
   floating centred in it (heights 76–96px, uneven).
   Now: label on top, left-aligned; a lined 52px box the text sits
   in, inset 16px; 16px between fields.
   ============================================================ */
body.cl-embed .cl-am .cl-am__body p.form-row {
  display: block !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: left !important;
  min-height: 0 !important;
}
body.cl-embed .cl-am .cl-am__body p.form-row > label {
  display: block !important;
  position: static !important;
  transform: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  text-align: left !important;
  font: 600 14px/1.3 var(--font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--mist-50, #F5F3F7) !important;
}
body.cl-embed .cl-am .cl-am__body p.form-row input.input-text,
body.cl-embed .cl-am .cl-am__body p.form-row select,
body.cl-embed .cl-am .cl-am__body p.form-row .select2-selection {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid rgba(155, 93, 229, 0.38) !important;
  border-radius: 12px !important;
  background-color: #0D0C11 !important;
  text-align: left !important;
  text-align-last: left !important;
  font: 500 16px/50px var(--font-body) !important;
  color: #fff !important;
}
body.cl-embed .cl-am .cl-am__body p.form-row select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px !important;
  background: #0D0C11 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9C3D2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px 18px !important;
}
body.cl-embed .cl-am .cl-am__body p.form-row .select2-selection__rendered {
  padding: 0 !important; line-height: 50px !important; text-align: left !important; color: #fff !important;
}
body.cl-embed .cl-am .cl-am__body p.form-row .select2-selection__arrow { height: 50px !important; right: 12px !important; }
body.cl-embed .cl-am .cl-am__body p.form-row input.input-text:focus,
body.cl-embed .cl-am .cl-am__body p.form-row select:focus {
  outline: none !important;
  border-color: var(--ui-400, #9B5DE5) !important;
  box-shadow: 0 0 0 3px rgba(155, 93, 229, 0.25) !important;
}
body.cl-embed .cl-am .cl-am__body p.form-row input.input-text::placeholder { color: var(--mist-400, #A39DAE); opacity: 1; }
body.cl-embed .cl-am .cl-am__body .woocommerce-input-wrapper { display: block !important; width: 100% !important; }
/* first + last name side by side stay 16px apart */
/* first + last name: full width, stacked, same left edge as everything else */
body.cl-embed .cl-am .cl-am__body p.form-row-first,
body.cl-embed .cl-am .cl-am__body p.form-row-last { width: 100% !important; float: none !important; margin-left: 0 !important; }

/* every method: a lock + "Secure" */
.woocommerce-checkout #payment .cl-pm__sub {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  justify-self: start;
  color: #3DD68C !important;
  font-weight: 600 !important;
}
.woocommerce-checkout #payment .cl-pm__sub::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* an email or handle breaks only before its @, never mid-word */
.cl-paynow__v--id { overflow-wrap: normal !important; word-break: normal !important; }
.payment_method_corelabs_bitcoin .cl-paynow__v--id { overflow-wrap: anywhere !important; }

/* ============================================================
   HEADER BUTTONS — one rule set (2026-09-21, replaces six older
   Home/active/cart blocks that fought each other)
   - All four look the same: no box, no fill, no bar.
   - The page you are on (aria-current, set in header.php) and a
     button being pressed turn PURPLE — icon and word.
   - Cart: same as the rest, but its cart outline glows softly,
     and it bounces once when the count goes up (cart-bump.js).
   ============================================================ */
.cl-header .cl-icon-btn {
  position: relative;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--mist-100, #E6E2EB) !important;
}
.cl-header .cl-icon-btn::after { content: none !important; }
.cl-header .cl-icon-btn .cl-icon-btn__cap { color: var(--mist-200, #D9D4E0) !important; }
.cl-header .cl-icon-btn[aria-current="page"],
.cl-header .cl-icon-btn[aria-current="page"] .cl-icon-btn__cap,
.cl-header .cl-icon-btn:active,
.cl-header .cl-icon-btn:active .cl-icon-btn__cap { color: #B98CFF !important; }
.cl-header .cl-icon-btn[aria-current="page"] .cl-icon-btn__cap { font-weight: 700 !important; }
@media (hover: hover) {
  .cl-header .cl-icon-btn:hover,
  .cl-header .cl-icon-btn:hover .cl-icon-btn__cap { color: #CDB0FF !important; }
}

/* cart: the outline of the cart itself glows */
.cl-header .cl-cart-btn { transform-origin: 50% 60%; }
.cl-header .cl-cart-btn svg {
  color: #E3D0FF;
  filter: drop-shadow(0 0 3px rgba(170, 110, 240, 0.9));
  animation: cl-cart-iconglow 2.6s ease-in-out infinite;
}
@keyframes cl-cart-iconglow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(170, 110, 240, 0.55)); }
  50%      { filter: drop-shadow(0 0 6px rgba(190, 140, 255, 1)) drop-shadow(0 0 2px rgba(190, 140, 255, 0.9)); }
}
.cl-header .cl-cart-btn .cl-cart-count {
  top: 0 !important;
  right: 2px !important;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #fff !important;
  color: #5E2F88 !important;
  font: 800 11px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  box-shadow: 0 0 0 2px #7B3FB2, 0 2px 6px rgba(0, 0, 0, 0.45);
}
/* the one-time bounce when something is added */
.cl-header .cl-icon-btn.cl-cart-btn.is-bump { animation: cl-cart-bump .7s cubic-bezier(.3, 1.4, .5, 1) 1; }
.cl-header .cl-cart-btn.is-bump .cl-cart-count { animation: cl-cart-badge .7s ease-out 1; }
@keyframes cl-cart-bump {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.18) rotate(-5deg); }
  50%  { transform: scale(.94)  rotate(3deg); }
  75%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes cl-cart-badge {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .cl-header .cl-cart-btn svg,
  .cl-header .cl-icon-btn.cl-cart-btn.is-bump,
  .cl-header .cl-cart-btn.is-bump .cl-cart-count { animation: none; }
}

/* ============================================================
   CHECKOUT, PHONE-FIRST STRUCTURE (2026-09-21) — "rows with lines"
   Noah picked: label left, value right, a thin line between rows.
   One left edge: every section's content starts where its title
   does (card 16 + border 1 + 14 = x31).
   ============================================================ */
body.cl-embed .cl-ck__body { padding-left: 14px !important; padding-right: 14px !important; }

/* SHIP TO — the saved address as rows */
body.cl-embed .woocommerce-checkout .woocommerce-shipping-fields .cl-am-summary:not(.is-empty),
body.cl-embed .woocommerce-checkout .cl-am-summary:not(.is-empty) {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: left !important;
}
body.cl-embed .cl-am-summary:not(.is-empty) .cl-am-summary__text {
  display: block;
  margin: 0;
  line-height: normal !important;
  text-align: left !important;
}
body.cl-embed .cl-am-summary .cl-am-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  min-height: 46px;
  margin: 0 -14px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.cl-embed .cl-am-summary .cl-am-row__k {
  flex: 0 0 auto;
  font: 500 13px/1.3 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: var(--mist-400, #A39DAE);
}
body.cl-embed .cl-am-summary .cl-am-summary__text p.cl-am-row__v,
body.cl-embed .cl-am-summary .cl-am-summary__text .cl-am-row__v.cl-am-summary__name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  text-align: right !important;
  font: 600 15px/1.35 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  color: #FFFFFF !important;
  overflow-wrap: anywhere;
}
body.cl-embed .cl-am-summary .cl-am-summary__missing {
  margin: 0 !important;
  padding: 11px 0;
  font: 600 14px/1.4 var(--font-body) !important;
  color: #FFB86B !important;
  text-align: left !important;
}
/* Edit is the last row, not a floating button */
body.cl-embed .woocommerce-checkout .cl-am-summary:not(.is-empty) .cl-am-summary__edit {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  box-sizing: border-box;
  width: calc(100% + 28px) !important;
  min-height: 48px;
  margin: 0 -14px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #C9A6FF !important;
  font: 700 15px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
}
body.cl-embed .woocommerce-checkout .cl-am-summary:not(.is-empty) .cl-am-summary__edit:active { background: rgba(155, 93, 229, 0.12) !important; }

/* BOTTOM — protection + acknowledgement as ONE card with a line
   between, then Total, then Place order, then the privacy line as
   a small centred footnote under the button */
body.cl-embed #payment .form-row.place-order {
  display: flex !important;
  flex-direction: column;
}
body.cl-embed #payment .place-order .cl-protect--pay { order: 1; }
body.cl-embed #payment .place-order .cl-acknowledgement { order: 2; }
body.cl-embed #payment .place-order .cl-paytotal { order: 3; }
body.cl-embed #payment .place-order #place_order { order: 4; }
body.cl-embed #payment .place-order .woocommerce-terms-and-conditions-wrapper { order: 5; }

body.cl-embed #payment .place-order .cl-protect--pay {
  margin: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  border-bottom: 0 !important;
  padding: 16px 14px !important;
}
body.cl-embed #payment .place-order .cl-acknowledgement {
  margin: 0 0 4px !important;
  border-radius: 0 0 12px 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 16px 14px !important;
}
body.cl-embed #payment .place-order:not(:has(.cl-protect--pay)) .cl-acknowledgement {
  border-radius: 12px !important;
  border-top: 1px solid rgba(155, 93, 229, 0.28) !important;
}
body.cl-embed #payment .cl-acknowledgement label.checkbox {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin: 0 !important;
  padding: 0 !important;
  font: 500 14px/1.5 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  color: var(--mist-100, #E6E2EB) !important;
  text-align: left !important;
}
body.cl-embed #payment .cl-acknowledgement label.checkbox input { margin: 0 !important; }
body.cl-embed #payment .place-order .cl-paytotal {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 !important;
  padding: 18px 0 14px !important;
  border: 0 !important;
}
body.cl-embed #payment .place-order .woocommerce-terms-and-conditions-wrapper {
  margin: 14px auto 0 !important;
  padding: 0 !important;
  max-width: 300px;
  border: 0 !important;
  background: none !important;
}
body.cl-embed #payment .place-order .woocommerce-privacy-policy-text p {
  margin: 0 !important;
  text-align: center !important;
  font: 500 12.5px/1.55 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  color: var(--mist-400, #A39DAE) !important;
}

/* "Secure" on every payment option: a green glow, and a glare that
   sweeps across it every few seconds (staggered per option) */
.woocommerce-checkout #payment .cl-pm__sub {
  position: relative;
  overflow: hidden;
  padding-right: 2px;
  text-shadow: 0 0 8px rgba(61, 214, 140, 0.55);
}
.woocommerce-checkout #payment .cl-pm__sub::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 22px;
  /* glare in the text's own green */
  background: linear-gradient(100deg, rgba(168, 245, 207, 0) 0%, rgba(168, 245, 207, 0.95) 50%, rgba(168, 245, 207, 0) 100%);
  transform: translateX(-30px) skewX(-18deg);
  animation: cl-secure-glare 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cl-secure-glare {
  0%, 45% { transform: translateX(-30px) skewX(-18deg); }
  85%     { transform: translateX(90px) skewX(-18deg); }
  100%    { transform: translateX(90px) skewX(-18deg); }
}
.woocommerce-checkout #payment .payment_methods li:nth-child(2) .cl-pm__sub::after { animation-delay: .6s; }
.woocommerce-checkout #payment .payment_methods li:nth-child(3) .cl-pm__sub::after { animation-delay: 1.2s; }
.woocommerce-checkout #payment .payment_methods li:nth-child(4) .cl-pm__sub::after { animation-delay: 1.8s; }
.woocommerce-checkout #payment .payment_methods li:nth-child(5) .cl-pm__sub::after { animation-delay: 2.4s; }
@media (prefers-reduced-motion: reduce) {
  .woocommerce-checkout #payment .cl-pm__sub::after { animation: none; display: none; }
}
/* "Use a different billing address": a flat row with a line above,
   not another box inside the Ship to card */
body.cl-embed form.checkout .cl-billing-toggle {
  margin: 16px -14px -18px !important;
  padding: 14px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body.cl-embed form.checkout .cl-billing-toggle label {
  font: 500 14px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  color: var(--mist-100, #E6E2EB) !important;
}

/* PLACE ORDER (2026-09-21, third pass)
   Two centred lines so "PLACE ORDER" sits dead centre:
     PLACE ORDER         16px / 800 / caps
     [lock SECURE]       9px pill, with its own glare
   The whole button also carries a slow light-purple glare. */
body.cl-embed #payment #place_order {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100% !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(214, 188, 255, 0.6) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(100deg, rgba(235, 220, 255, 0) 38%, rgba(235, 220, 255, 0.45) 50%, rgba(235, 220, 255, 0) 62%) no-repeat,
    linear-gradient(180deg, #9B5DE5 0%, #7B3FB2 100%) !important;
  background-size: 260% 100%, 100% 100% !important;
  background-position: 160% 0, 0 0 !important;
  animation: cl-po-glare 6.5s ease-in-out infinite;
  color: #FFFFFF !important;
  font: 800 16px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  box-shadow: 0 0 0 1px rgba(155, 93, 229, 0.35), 0 8px 24px -8px rgba(155, 93, 229, 0.9), 0 0 22px rgba(155, 93, 229, 0.45) !important;
}
body.cl-embed #payment #place_order::before { content: none !important; display: none !important; }
body.cl-embed #payment #place_order::after {
  content: "Secure";
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-block;
  padding: 3px 7px 3px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") 6px 50% / 9px 9px no-repeat,
    linear-gradient(100deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 65%) no-repeat,
    rgba(255, 255, 255, 0.12);
  background-size: 9px 9px, 260% 100%, auto;
  background-position: 6px 50%, 160% 0, 0 0;
  animation: cl-po-secure-glare 6.5s ease-in-out infinite !important;
  animation-delay: .6s !important;
  font: 700 9px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F3E9FF;
}
body.cl-embed #payment #place_order:active { filter: brightness(1.08); transform: translateY(1px); }
@keyframes cl-po-glare {
  0%, 45% { background-position: 160% 0, 0 0; }
  85%     { background-position: -60% 0, 0 0; }
  100%    { background-position: -60% 0, 0 0; }
}
@keyframes cl-po-secure-glare {
  0%, 45% { background-position: 6px 50%, 160% 0, 0 0; }
  85%     { background-position: 6px 50%, -60% 0, 0 0; }
  100%    { background-position: 6px 50%, -60% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.cl-embed #payment #place_order,
  body.cl-embed #payment #place_order::after { animation: none !important; }
}
/* "Secure" sits in a small green pill so the glare has an edge to live in */
.woocommerce-checkout #payment .cl-pm__sub {
  margin-top: 3px;
  padding: 3px 9px 3px 7px !important;
  border: 1px solid rgba(61, 214, 140, 0.45);
  border-radius: 999px;
  background: rgba(61, 214, 140, 0.10);
  font: 700 11.5px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  letter-spacing: 0.02em;
  text-shadow: none;
}
.woocommerce-checkout #payment .cl-pm__sub::before { width: 11px !important; height: 11px !important; flex-basis: 11px !important; }
.woocommerce-checkout #payment .cl-pm__sub::after {
  width: 26px;
  background: linear-gradient(100deg, rgba(168, 245, 207, 0) 0%, rgba(168, 245, 207, 0.55) 50%, rgba(168, 245, 207, 0) 100%);
}
/* acknowledgement: a bold title like "Shipping protection", sentence under it */
body.cl-embed #payment .cl-acknowledgement label.checkbox { grid-template-rows: auto auto; row-gap: 4px; }
body.cl-embed #payment .cl-acknowledgement label.checkbox input { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
body.cl-embed #payment .cl-ack__title {
  grid-column: 2;
  grid-row: 1;
  font: 700 14px/1.3 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: var(--mist-50, #F5F3F7);
}
body.cl-embed #payment .cl-ack__text {
  grid-column: 2;
  grid-row: 2;
  font: 500 13px/1.5 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: var(--mist-300, #C9C3D2);
}
/* Zelle: "Find your bank on Zelle" — a full-width secondary button in the box */
.woocommerce-checkout #payment .cl-paynow__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0 0 12px;
  border: 1px solid rgba(155, 93, 229, 0.55);
  border-radius: 12px;
  background: rgba(155, 93, 229, 0.12);
  color: #fff;
  font: 700 14px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  text-decoration: none;
}
.woocommerce-checkout #payment .cl-paynow__link:active { background: rgba(155, 93, 229, 0.25); }
/* amount only (before Place order): label left, amount right, one row */
.woocommerce-checkout #payment .cl-paynow__row--solo {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0 !important;
}
.woocommerce-checkout #payment .cl-paynow__row--solo .cl-paynow__v { flex: 0 0 auto; font-size: 18px; font-weight: 800; }
.woocommerce-checkout #payment .cl-paynow__next { padding-top: 12px !important; border-top: 1px solid rgba(255, 255, 255, 0.07); }

/* ============================================================
   PAY POP-UP, REBUILT (2026-09-21) — after Place order
   Same structure as checkout: a card of rows with lines, one
   left edge, and a real person first. Phone: a sheet from the
   bottom, 16px gutters. Desktop (>=600px): a 440px centred card.
   Type: 22 title / 16 values / 13 labels + helper. Nothing floats.
   ============================================================ */
.cl-pay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.cl-pay[hidden] { display: none !important; }
.cl-pay .cl-pay__overlay { position: absolute; inset: 0; background: rgba(6, 5, 10, 0.78); backdrop-filter: blur(3px); }
.cl-pay .cl-pay__dialog {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-height: 94svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0 0 calc(18px + env(safe-area-inset-bottom));
  border: 1px solid rgba(155, 93, 229, 0.35);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: #121017;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.6);
  text-align: left;
}
.cl-pay .cl-pay__dialog::before { content: none !important; }
.cl-pay .cl-pay__bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #121017;
}
.cl-pay .cl-pay__logo { display: block; width: auto; height: 30px; margin: 0; }
.cl-pay .cl-pay__x {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(155, 93, 229, 0.30);
  border-radius: 12px;
  background: rgba(155, 93, 229, 0.08);
  color: #fff;
  cursor: pointer;
}
.cl-pay .cl-pay__body { padding: 18px 16px 0; }
.cl-pay .cl-pay__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font: 800 22px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: #fff;
  text-align: left;
}
.cl-pay .cl-pay__sub {
  margin: 0 0 16px;
  font: 500 13px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: var(--mist-400, #A39DAE);
}
/* green Secure pills (title + button), with the lock */
:is(.cl-pay, .cl-ty) .cl-pay__secure {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  border: 1px solid rgba(61, 214, 140, 0.45);
  border-radius: 999px;
  background: rgba(61, 214, 140, 0.10);
  font: 700 11px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: #3DD68C;
}
:is(.cl-pay, .cl-ty) .cl-pay__secure::before {
  content: "";
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* a real person — first, green, hard to miss */
:is(.cl-pay, .cl-ty) .cl-pay__human {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid rgba(61, 214, 140, 0.55);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(61, 214, 140, 0.14), rgba(61, 214, 140, 0.05));
  box-shadow: 0 0 22px -6px rgba(61, 214, 140, 0.45);
}
:is(.cl-pay, .cl-ty) .cl-pay__humanTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font: 700 15px/1.35 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: #fff;
}
:is(.cl-pay, .cl-ty) .cl-pay__live {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3DD68C;
  animation: cl-live 1.8s ease-out infinite;
}
:is(.cl-pay, .cl-ty) .cl-pay__humanSub {
  margin: 0 0 12px 16px;
  font: 500 13px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: #BFF3D8;
}
:is(.cl-pay, .cl-ty) .cl-pay__humanBtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:is(.cl-pay, .cl-ty) .cl-pay__hbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 12px;
  font: 700 15px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  text-decoration: none;
  color: #fff;
}
:is(.cl-pay, .cl-ty) .cl-pay__hbtn--call { border: 1px solid #6FF0B0; background: linear-gradient(180deg, #2FC37C, #1F9A5F); }
:is(.cl-pay, .cl-ty) .cl-pay__hbtn--text { border: 1px solid rgba(61, 214, 140, 0.55); background: rgba(61, 214, 140, 0.10); }

/* the details — ONE card, rows with lines */
.cl-pay .cl-pay__card {
  margin: 0 0 16px;
  border: 1px solid rgba(155, 93, 229, 0.30);
  border-radius: 14px;
  background: #0D0C11;
}
.cl-pay .cl-pay__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "k copy" "v copy";
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cl-pay .cl-pay__row:last-child { border-bottom: 0; }
.cl-pay .cl-pay__k {
  grid-area: k;
  font: 600 11px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist-400, #A39DAE);
}
.cl-pay .cl-pay__v {
  grid-area: v;
  min-width: 0;
  margin: 0;
  font: 700 16px/1.35 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  color: #fff;
  overflow-wrap: anywhere;
  text-align: left;
}
.cl-pay .cl-pay__v--amount { font-size: 24px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }
.cl-pay .cl-pay__v--mono { font: 600 14px/1.45 ui-monospace, "SF Mono", Menlo, monospace !important; }
.cl-pay .cl-pay__copy {
  grid-area: copy;
  min-width: 72px;
  min-height: 38px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(155, 93, 229, 0.6);
  border-radius: 999px;
  background: rgba(155, 93, 229, 0.16);
  color: #fff;
  font: 700 13px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  cursor: pointer;
}
.cl-pay .cl-pay__copy.is-copied { background: #1f7a4d; border-color: #3DD68C; }

/* open the app — its logo, the words, SECURE */
:is(.cl-pay, .cl-ty) .cl-pay__go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgba(214, 188, 255, 0.6);
  border-radius: 14px;
  background: linear-gradient(180deg, #9B5DE5 0%, #7B3FB2 100%);
  box-shadow: 0 0 0 1px rgba(155, 93, 229, 0.35), 0 8px 24px -8px rgba(155, 93, 229, 0.9);
  color: #fff;
  font: 800 16px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  text-decoration: none;
  transform: none;
}
:is(.cl-pay, .cl-ty) .cl-pay__go::after { content: none !important; }
:is(.cl-pay, .cl-ty) .cl-pay__go-arrow { display: none; }
.cl-pay .cl-pay__go-logo {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--cl-pay-icon) center / 17px 17px no-repeat, var(--cl-pay-bg, #7B3FB2);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}
.cl-pay .cl-pay__go-logo--zelle   { --cl-pay-bg: #6D1ED4; --cl-pay-icon: var(--cl-icon-zelle); }
.cl-pay .cl-pay__go-logo--venmo   { --cl-pay-bg: #008CFF; --cl-pay-icon: var(--cl-icon-venmo); }
.cl-pay .cl-pay__go-logo--cashapp { --cl-pay-bg: #00D632; --cl-pay-icon: var(--cl-icon-cashapp); }
.cl-pay .cl-pay__go-logo--bitcoin { --cl-pay-bg: #F7931A; --cl-pay-icon: var(--cl-icon-bitcoin); }
:is(.cl-pay, .cl-ty) .cl-pay__go-secure {
  padding: 3px 7px 2px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font: 700 9px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F3E9FF;
}
.cl-pay .cl-pay__hint {
  margin: 8px 0 0;
  font: 500 13px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: var(--mist-400, #A39DAE);
  text-align: center;
}
.cl-pay .cl-pay__held {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font: 600 13px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: #3DD68C;
}
.cl-pay .cl-pay__help,
.cl-pay .cl-pay__soon { display: none !important; }

/* desktop: a centred card */
@media (min-width: 600px) {
  .cl-pay { align-items: center; padding: 16px; }
  .cl-pay .cl-pay__dialog {
    max-width: 440px;
    max-height: calc(100vh - 32px);
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(155, 93, 229, 0.35);
    border-radius: 20px;
  }
  .cl-pay .cl-pay__body { padding: 20px 20px 0; }
  .cl-pay .cl-pay__bar { padding: 12px 20px; }
}
/* older centring rules still reached into the pop-up */
.cl-pay .cl-pay__sub,
.cl-pay .cl-pay__human,
:is(.cl-pay, .cl-ty) .cl-pay__human p { text-align: left !important; }
:is(.cl-pay, .cl-ty) .cl-pay__humanTitle { justify-content: flex-start; }
:is(.cl-pay, .cl-ty) .cl-pay__go,
:is(.cl-pay, .cl-ty) .cl-pay__go-text { font: 800 16px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif !important; color: #fff !important; letter-spacing: 0 !important; }
.cl-pay .cl-pay__row--tip { grid-template-areas: "k" "v"; grid-template-columns: 1fr; }
.cl-pay .cl-pay__row--tip .cl-pay__v { font: 500 14px/1.45 var(--font-body, "Plus Jakarta Sans"), sans-serif !important; color: var(--mist-100, #E6E2EB); }
.cl-pay .cl-pay__title .cl-pay__go-logo { flex: 0 0 30px; width: 30px; height: 30px; }

/* ============================================================
   ORDER RECEIVED (woocommerce/checkout/thankyou.php, 2026-09-21)
   Phone: full width inside 16px gutters, cards 16px apart,
   rows with lines, labels left / values right, one left edge
   (card + 16). Desktop: a 560px centred column.
   ============================================================ */
body.woocommerce-order-received .cl-content,
body.woocommerce-order-received .entry-content,
body.woocommerce-order-received .woocommerce { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
body.woocommerce-order-received .woocommerce-order { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.cl-ty {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 16px 40px;
  text-align: left;
}
.cl-ty > * { margin: 0 0 16px !important; }
.cl-ty__card {
  overflow: hidden;
  border: 1px solid rgba(155, 93, 229, 0.30);
  border-radius: 16px;
  background: #121017;
}
.cl-ty__hero { padding: 22px 16px 18px; text-align: center; }
.cl-ty__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 0 10px;
  border-radius: 50%;
  background: rgba(61, 214, 140, 0.14);
  border: 1px solid rgba(61, 214, 140, 0.55);
  color: #3DD68C;
}
.cl-ty__tick--bad { background: rgba(255, 107, 107, 0.14); border-color: rgba(255, 107, 107, 0.55); color: #FF8A8A; font: 800 22px/1 var(--font-body); }
.cl-ty__title { margin: 0 0 4px !important; font: 800 24px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif !important; color: #fff !important; text-align: center; letter-spacing: 0 !important; text-transform: none !important; }
.cl-ty__lede { margin: 0 !important; font: 600 14px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif; color: var(--mist-200, #D9D4E0); text-align: center; }
.cl-ty__note { margin: 10px 0 0 !important; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); font: 500 13px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif; color: var(--mist-400, #A39DAE); text-align: center; overflow-wrap: anywhere; }
.cl-ty__note b { color: #fff; font-weight: 600; }
.cl-ty__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cl-ty__h { font: 700 12px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist-300, #C9C3D2); }
.cl-ty__method { display: inline-flex; align-items: center; gap: 10px; font: 800 17px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif; color: #fff; }
.cl-ty .cl-pay__go-logo {
  display: inline-block;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--cl-pay-icon) center / 17px 17px no-repeat, var(--cl-pay-bg, #7B3FB2);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}
.cl-ty .cl-pay__go-logo--zelle   { --cl-pay-bg: #6D1ED4; --cl-pay-icon: var(--cl-icon-zelle); }
.cl-ty .cl-pay__go-logo--venmo   { --cl-pay-bg: #008CFF; --cl-pay-icon: var(--cl-icon-venmo); }
.cl-ty .cl-pay__go-logo--cashapp { --cl-pay-bg: #00D632; --cl-pay-icon: var(--cl-icon-cashapp); }
.cl-ty .cl-pay__go-logo--bitcoin { --cl-pay-bg: #F7931A; --cl-pay-icon: var(--cl-icon-bitcoin); }
.cl-ty__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  box-sizing: border-box;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cl-ty__card > .cl-ty__row:last-child { border-bottom: 0; }
.cl-ty__k { flex: 0 1 auto; min-width: 0; font: 500 14px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif; color: var(--mist-400, #A39DAE); }
.cl-ty__v { flex: 0 1 auto; min-width: 0; text-align: right; font: 600 15px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif; color: #fff; overflow-wrap: anywhere; }
.cl-ty__v small, .cl-ty__v .shipped_via { display: block; font-size: 12px; font-weight: 500; color: var(--mist-400, #A39DAE); }
.cl-ty__row--item .cl-ty__k { color: #fff; font-weight: 600; }
.cl-ty__row--big .cl-ty__v { font-size: 22px; font-weight: 800; }
.cl-ty__row--total { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.cl-ty__row--total .cl-ty__k { color: #fff; font-weight: 700; }
.cl-ty__row--total .cl-ty__v { font-size: 18px; font-weight: 800; }
.cl-ty__pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 700 12px/1.2 var(--font-body); }
.cl-ty__pill--wait { background: rgba(255, 184, 107, 0.14); border: 1px solid rgba(255, 184, 107, 0.5); color: #FFB86B; }
.cl-ty__pill--ok { background: rgba(61, 214, 140, 0.12); border: 1px solid rgba(61, 214, 140, 0.5); color: #3DD68C; }
.cl-ty__pad { padding: 14px 16px 16px; }
.cl-ty .cl-ty__pay { cursor: pointer; }
.cl-ty__small { margin: 10px 0 0 !important; font: 600 13px/1.4 var(--font-body); color: #3DD68C; text-align: center; }
.cl-ty__btn { display: inline-flex; margin-top: 14px; min-height: 48px; align-items: center; padding: 0 22px; border-radius: 12px; background: #7B3FB2; color: #fff; font-weight: 700; text-decoration: none; }
/* the page's own wrapper had its own padding: keep one gutter */
body.woocommerce-order-received .cl-page,
body.woocommerce-order-received main { padding-left: 0 !important; padding-right: 0 !important; }
@media (min-width: 768px) {
  .cl-ty { padding: 24px 0 56px; }
  .cl-ty__hero { padding: 28px 24px 22px; }
  .cl-ty__row, .cl-ty__head, .cl-ty__pad { padding-left: 20px; padding-right: 20px; }
}

/* order received: the page's three nested boxes (container 20px, article
   20px + border, content + border) squeezed the cards to x58-317.
   Flattened here so the cards sit on the 16px phone gutter. */
body.woocommerce-order-received main .container { padding-left: 0 !important; padding-right: 0 !important; }
body.woocommerce-order-received article.page,
body.woocommerce-order-received .cl-content,
body.woocommerce-order-received .cl-content > .woocommerce {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.woocommerce-order-received article.page > .entry-header,
body.woocommerce-order-received article.page > header { display: none; }
.cl-ty .cl-ty__pay { width: 100%; }
/* "Call or text" lines up with the heading text, not the dot */
:is(.cl-pay, .cl-ty) .cl-pay__human .cl-pay__humanSub { padding-left: 16px !important; margin-left: 0 !important; }

/* ============================================================
   CALMER (2026-09-21, Noah: "not so busy, no double boxes";
   order = price, how to pay, then help)
   - help is NOT a box: a line of text + Call / Text under it
   - pop-up details are plain rows with lines (the sheet is the box)
   - order page hero has no box
   ============================================================ */
:is(.cl-pay, .cl-ty) .cl-pay__human {
  margin: 0 !important;
  padding: 16px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.cl-ty .cl-pay__human { border-top: 0 !important; padding: 4px 0 0 !important; }
:is(.cl-pay, .cl-ty) .cl-pay__humanTitle { font-size: 14px !important; font-weight: 600 !important; color: var(--mist-100, #E6E2EB) !important; }
:is(.cl-pay, .cl-ty) .cl-pay__human .cl-pay__humanSub { margin: 0 0 10px !important; font-size: 13px !important; color: #9FE8C3 !important; }
:is(.cl-pay, .cl-ty) .cl-pay__hbtn { min-height: 44px; font-size: 14px; }

.cl-pay .cl-pay__card {
  margin: 0 -16px 16px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  background: none !important;
}
.cl-pay .cl-pay__row { padding: 14px 16px !important; }
.cl-pay .cl-pay__held { border-top: 0 !important; margin-top: 14px !important; padding-top: 0 !important; }

.cl-ty__hero { padding: 12px 0 4px !important; border: 0 !important; background: none !important; }
.cl-ty__note { border-top: 0 !important; padding-top: 0 !important; margin-top: 6px !important; }
@media (min-width: 600px) {
  .cl-pay .cl-pay__card { margin-left: -20px !important; margin-right: -20px !important; }
  .cl-pay .cl-pay__row { padding-left: 20px !important; padding-right: 20px !important; }
}

/* HELP, WARMER (2026-09-21): one soft green card, a headset, plain words.
   Reads as "we're here" rather than "something's wrong". */
:is(.cl-pay, .cl-ty) .cl-pay__human {
  padding: 16px !important;
  border: 1px solid rgba(61, 214, 140, 0.40) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(61, 214, 140, 0.12), rgba(61, 214, 140, 0.04)) !important;
}
.cl-pay .cl-pay__human { margin: 18px 0 0 !important; }
.cl-ty .cl-pay__human { padding: 16px !important; }
:is(.cl-pay, .cl-ty) .cl-pay__humanTop { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; }
:is(.cl-pay, .cl-ty) .cl-pay__humanIcon {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(61, 214, 140, 0.18);
  color: #3DD68C;
}
:is(.cl-pay, .cl-ty) .cl-pay__human .cl-pay__humanTitle {
  display: block !important;
  margin: 0 0 4px !important;
  font: 700 16px/1.3 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  color: #FFFFFF !important;
}
:is(.cl-pay, .cl-ty) .cl-pay__human .cl-pay__humanSub {
  margin: 0 !important;
  padding: 0 !important;
  font: 500 14px/1.45 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  color: #D6F7E6 !important;
}
:is(.cl-pay, .cl-ty) .cl-pay__humanSub b { color: #fff; font-weight: 700; white-space: nowrap; }
:is(.cl-pay, .cl-ty) .cl-pay__hbtn { min-height: 48px; font-size: 15px; }

/* what happens next: three numbered rows with lines */
.cl-ty__steps { list-style: none; margin: 0 !important; padding: 0 !important; }
.cl-ty__steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 !important;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font: 500 14px/1.45 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: var(--mist-300, #C9C3D2);
}
.cl-ty__steps li:last-child { border-bottom: 0; }
.cl-ty__steps li b { display: block; margin-bottom: 2px; font-weight: 700; font-size: 15px; color: #fff; }
.cl-ty__num {
  display: inline-flex;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(155, 93, 229, 0.55);
  font: 800 13px/1 var(--font-body);
  color: #C9A6FF;
}
.cl-ty__steps li.is-now .cl-ty__num { background: #7B3FB2; border-color: #B98CFF; color: #fff; box-shadow: 0 0 12px rgba(155, 93, 229, 0.7); }
.cl-ty__steps li.is-done .cl-ty__num { background: rgba(61, 214, 140, 0.18); border-color: #3DD68C; color: #3DD68C; }
@media (min-width: 768px) { .cl-ty__steps li { padding-left: 20px; padding-right: 20px; } }

/* keep shopping */
.cl-ty__shop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border: 1px solid rgba(155, 93, 229, 0.55);
  border-radius: 14px;
  background: rgba(155, 93, 229, 0.12);
  color: #fff !important;
  font: 700 15px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  text-decoration: none !important;
}

/* a slow glare on the buttons people press (Pay / Open / Call) */
:is(.cl-pay, .cl-ty) .cl-pay__go,
:is(.cl-pay, .cl-ty) .cl-pay__hbtn--call { position: relative; overflow: hidden; isolation: isolate; }
:is(.cl-pay, .cl-ty) .cl-pay__go::before,
:is(.cl-pay, .cl-ty) .cl-pay__hbtn--call::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40px;
  background: linear-gradient(100deg, rgba(235, 220, 255, 0) 0%, rgba(235, 220, 255, 0.45) 50%, rgba(235, 220, 255, 0) 100%);
  transform: translateX(-60px) skewX(-18deg);
  animation: cl-btn-glare 6.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
:is(.cl-pay, .cl-ty) .cl-pay__hbtn--call::before {
  background: linear-gradient(100deg, rgba(190, 255, 220, 0) 0%, rgba(190, 255, 220, 0.5) 50%, rgba(190, 255, 220, 0) 100%);
  animation-delay: 1.6s;
}
:is(.cl-pay, .cl-ty) .cl-pay__go > *,
:is(.cl-pay, .cl-ty) .cl-pay__hbtn--call > * { position: relative; z-index: 1; }
@keyframes cl-btn-glare {
  0%, 45% { transform: translateX(-60px) skewX(-18deg); }
  85%     { transform: translateX(420px) skewX(-18deg); }
  100%    { transform: translateX(420px) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.cl-pay, .cl-ty) .cl-pay__go::before,
  :is(.cl-pay, .cl-ty) .cl-pay__hbtn--call::before { animation: none; display: none; }
}
/* order received: no dead space — the page ends right after "Keep shopping"
   (was 40 + 80 + 80 + 80px of stacked padding before the footer) */
body.woocommerce-order-received main,
body.woocommerce-order-received main .container { padding-top: 0 !important; padding-bottom: 0 !important; }
body.woocommerce-order-received article.page { padding-top: 0 !important; }
body.woocommerce-order-received .cl-ty { padding-top: 16px; padding-bottom: 24px; }
body.woocommerce-order-received footer { margin-top: 0 !important; }

/* "Order #207 is waiting for payment" + one glowing Pay button, stacked
   and centred; X in the corner. Reopens the pop-up. */
.cl-paybar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 9995;
  box-sizing: border-box;
  max-width: 420px;
  margin: 0 auto;
  padding: 12px 12px 12px;
  border: 1px solid rgba(214, 188, 255, 0.45);
  border-radius: 18px;
  background: #1A1422;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6), 0 0 22px rgba(155, 93, 229, 0.3);
  text-align: center;
}
.cl-paybar__txt {
  margin: 0 36px 10px !important;
  font: 500 14px/1.3 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: var(--mist-100, #E6E2EB);
}
.cl-paybar__txt b { font-weight: 800; color: #fff; }
.cl-paybar__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(214, 188, 255, 0.6);
  border-radius: 13px;
  background: linear-gradient(180deg, #9B5DE5 0%, #7B3FB2 100%);
  box-shadow: 0 0 0 1px rgba(155, 93, 229, 0.35), 0 8px 22px -8px rgba(155, 93, 229, 0.9), 0 0 18px rgba(155, 93, 229, 0.45);
  color: #fff;
  font: 800 16px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  cursor: pointer;
}
.cl-paybar__cta > * { position: relative; z-index: 1; }
.cl-paybar__cta::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40px;
  background: linear-gradient(100deg, rgba(235, 220, 255, 0) 0%, rgba(235, 220, 255, 0.5) 50%, rgba(235, 220, 255, 0) 100%);
  transform: translateX(-60px) skewX(-18deg);
  animation: cl-btn-glare 6.5s ease-in-out infinite;
  pointer-events: none;
}
.cl-paybar__secure {
  padding: 3px 7px 2px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font: 700 9px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cl-paybar__x {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--mist-300, #C9C3D2);
  cursor: pointer;
}
.cl-paybar__x::after { content: ""; position: absolute; inset: -4px; }
@media (prefers-reduced-motion: reduce) { .cl-paybar__cta::before { animation: none; display: none; } }
/* the sticky cart bar and the pay bar never stack on each other */
body:has(.cl-paybar) .cl-sticky-cart { display: none !important; }
/* help, condensed: one line + two buttons (~110px, was ~200) */
:is(.cl-pay, .cl-ty) .cl-pay__human { padding: 12px !important; }
:is(.cl-pay, .cl-ty) .cl-pay__humanLine {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px !important;
  font: 700 15px/1.3 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  color: #FFFFFF !important;
}
:is(.cl-pay, .cl-ty) .cl-pay__humanLine svg { flex: 0 0 16px; color: #3DD68C; }
:is(.cl-pay, .cl-ty) .cl-pay__humanBtns { grid-template-columns: 1.4fr 1fr; gap: 8px; }
:is(.cl-pay, .cl-ty) .cl-pay__hbtn { min-height: 44px !important; font-size: 14px !important; white-space: nowrap; }
.cl-paybar .cl-paybar__cta,
.cl-paybar .cl-paybar__cta span:first-child { font: 800 16px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; }

/* ============================================================
   FAQ (page 52), REBUILT 2026-09-21 — phone first
   Before: questions in 16px CAPS display type, "+" far away, all
   inside a box inside a box (x69-978 on desktop, 3 frames deep).
   Now: small topic label, then one card of question rows with
   lines; sentence case; chevron; readable answers.
   ============================================================ */
body.page-id-52 main .container { padding-left: 16px !important; padding-right: 16px !important; }
body.page-id-52 article.page,
body.page-id-52 .cl-content {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.page-id-52 h1 { margin-bottom: 6px !important; }
.cl-faqhelp {
  margin: 28px 0 8px !important;
  padding: 18px 16px 16px;
  border: 1px solid rgba(61, 214, 140, 0.40);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(61, 214, 140, 0.12), rgba(61, 214, 140, 0.04));
  text-align: center;
}
.cl-faqhelp__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 4px !important;
  font: 700 17px/1.3 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: #fff;
}
.cl-faqhelp__title svg { color: #3DD68C; flex: 0 0 18px; }
.cl-faqhelp__sub {
  margin: 0 0 14px !important;
  font: 500 14px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: #BFF3D8;
}
.cl-faqhelp__btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: 340px;
  min-height: 50px;
  margin: 0 auto;
  border: 1px solid #6FF0B0;
  border-radius: 13px;
  background: linear-gradient(180deg, #2FC37C, #1F9A5F);
  box-shadow: 0 0 18px -4px rgba(61, 214, 140, 0.6);
  color: #fff;
  font: 800 16px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  cursor: pointer;
}
.cl-faqhelp__btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40px;
  background: linear-gradient(100deg, rgba(190, 255, 220, 0) 0%, rgba(190, 255, 220, 0.5) 50%, rgba(190, 255, 220, 0) 100%);
  transform: translateX(-60px) skewX(-18deg);
  animation: cl-btn-glare 6.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) { .cl-faqhelp__btn::before { animation: none; display: none; } }
body.page-id-52 .cl-content h2 {
  margin: 28px 0 10px !important;
  padding: 0 !important;
  font: 700 12px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: #C9A6FF !important;
}
body.page-id-52 .cl-content h2::before,
body.page-id-52 .cl-content h2::after { content: none !important; }
/* FAQ questions: numbered white cards on the dark background (2026-09-21) */
body.page-id-52 .cl-content { counter-reset: clfaq; }
body.page-id-52 details.cl-faq {
  counter-increment: clfaq;
  margin: 0 0 10px !important; padding: 0 !important; overflow: hidden;
  background: var(--paper) !important; border: 1px solid rgba(214, 196, 245, 0.55) !important; border-radius: 16px !important;
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.85), 0 0 30px -10px rgba(155, 93, 229, 0.55) !important;
}
body.page-id-52 details.cl-faq[open] { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(169, 112, 236, 0.55) !important; }
body.page-id-52 details.cl-faq > summary {
  display: flex !important; align-items: center; gap: 10px; min-height: 58px; box-sizing: border-box;
  padding: 15px 16px !important; list-style: none; cursor: pointer;
  font: 600 16px/1.4 var(--font-display) !important; letter-spacing: -0.01em !important;
  text-transform: none !important; text-align: left !important; color: #15111D !important; text-shadow: none !important;
}
body.page-id-52 details.cl-faq > summary::-webkit-details-marker { display: none; }
body.page-id-52 details.cl-faq > summary::before {
  content: counter(clfaq) "." !important; flex: 0 0 auto; color: #6C34A0; font-weight: 700;
}
body.page-id-52 details.cl-faq > summary::after {
  content: "" !important; position: static !important; flex: 0 0 18px; width: 18px !important; height: 18px !important;
  margin: 0 0 0 auto !important; border: 0 !important; background: #6C34A0 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none !important; transition: transform .2s ease;
}
body.page-id-52 details.cl-faq[open] > summary::after { transform: rotate(45deg) !important; }
body.page-id-52 details.cl-faq[open] > summary { color: #15111D !important; border-bottom: 1px solid #ECE6F5; }
body.page-id-52 details.cl-faq > p,
body.page-id-52 details.cl-faq > div {
  margin: 0 !important; padding: 14px 16px 18px !important;
  font: 400 15.5px/1.65 var(--font-body) !important; letter-spacing: 0 !important; text-transform: none !important;
  text-align: left !important; color: #3A3546 !important; text-shadow: none !important; background: none !important;
}
body.page-id-52 details.cl-faq > p + p { padding-top: 0 !important; }
body.page-id-52 details.cl-faq a { color: #6C34A0 !important; font-weight: 600; }
@media (min-width: 768px) {
  body.page-id-52 .cl-content h2 { margin-top: 36px !important; font-size: 13px !important; }
  body.page-id-52 details.cl-faq > summary { padding: 18px 22px !important; font-size: 17px !important; }
  body.page-id-52 details.cl-faq > p, body.page-id-52 details.cl-faq > div { padding: 16px 22px 20px !important; font-size: 16px !important; }
  .cl-faqhelp { padding: 22px 24px 20px; }
}
/* topic labels line up with the question text (card edge + 1 + 16) */
body.page-id-52 .cl-content h2 { padding-left: 17px !important; }
@media (min-width: 768px) { body.page-id-52 .cl-content h2 { padding-left: 23px !important; } }
body.page-id-52 .cl-faqhelp .cl-faqhelp__title { font: 700 17px/1.3 var(--font-body, "Plus Jakarta Sans"), sans-serif !important; color: #fff !important; text-align: center !important; justify-content: center !important; }
body.page-id-52 .cl-faqhelp .cl-faqhelp__sub { font: 500 14px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif !important; color: #BFF3D8 !important; text-align: center !important; }

/* ============================================================
   SEARCH SUGGESTIONS (assets/search-suggest.js, 2026-09-21)
   Dropdown under the box: 44px photo, name (+ compound), price.
   Rows 60px with lines. The word-finish shows faint after what
   was typed; tap it (or Tab / →) to take it.
   ============================================================ */
.cl-sg { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.cl-sg > input { width: 100%; position: relative; z-index: 1; background-clip: padding-box; }
.cl-sg__ghost {
  position: absolute;
  z-index: 2;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
  color: transparent;
}
.cl-sg__ghost[hidden] { display: none; }
.cl-sg__typed { visibility: hidden; }
.cl-sg__rest { color: var(--mist-400, #8F889C); pointer-events: auto; cursor: pointer; }
.cl-sg__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  overflow: hidden;
  max-height: min(70svh, 420px);
  overflow-y: auto;
  border: 1px solid rgba(155, 93, 229, 0.40);
  border-radius: 14px;
  background: #15121B;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  text-align: left;
}
.cl-sg__list[hidden] { display: none; }
.cl-sg__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #fff !important;
  text-decoration: none !important;
}
.cl-sg__item:last-child { border-bottom: 0; }
.cl-sg__item:hover, .cl-sg__item.is-active { background: rgba(155, 93, 229, 0.16); }
.cl-sg__img { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #0D0C11; }
.cl-sg__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-sg__txt b { font: 700 15px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif; }
.cl-sg__txt small { font: 500 12.5px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif; color: var(--mist-400, #A39DAE); }
.cl-sg__price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 700 13px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif; color: #E3D0FF; white-space: nowrap; }
.cl-sg__price i { font-style: normal; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #3DD68C; }
.cl-sg__empty { margin: 0; padding: 14px; font: 500 14px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif; color: var(--mist-300, #C9C3D2); }

/* search: "All products" label when nothing typed yet */
.cl-sg__head { margin: 0; padding: 12px 16px 8px; font: 700 12px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #C9A6FF; }
.cl-sg__cancel { display: none; }

/* (phone full-screen search sheet removed 2026-09-21 — Noah preferred the dropdown) */

/* SEARCH DROPDOWN, polished (2026-09-21, second pass)
   Matches only, once typing starts. Attached to the bar, full bar width.
   Page behind dims (under the header, z 99) and the edge tabs / bars hide,
   so nothing clashes. Rows 58px: 40px photo | name + compound | price. */
body.cl-sg-drop::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(6, 5, 10, 0.62);
  pointer-events: none;
}
body.cl-sg-drop .cl-ask__tab,
body.cl-sg-drop .cl-calltab,
body.cl-sg-drop .cl-sticky-cart,
body.cl-sg-drop .cl-paybar,
body.cl-sg-drop .cl-tabhint { opacity: 0 !important; pointer-events: none !important; }
.cl-sg__list {
  top: calc(100% + 6px) !important;
  border-color: rgba(155, 93, 229, 0.35) !important;
  border-radius: 16px !important;
  background: #16131C !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.65) !important;
}
.cl-sg__item { min-height: 58px !important; padding: 9px 14px !important; gap: 12px !important; }
.cl-sg__img { flex-basis: 40px !important; width: 40px !important; height: 40px !important; border-radius: 9px !important; }
.cl-sg__txt b { font: 700 15px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif !important; letter-spacing: 0 !important; }
.cl-sg__txt small { font-size: 12px !important; }
.cl-sg__price { font-size: 13px !important; color: #E3D0FF !important; }
.cl-sg__item.is-active, .cl-sg__item:active { background: rgba(155, 93, 229, 0.18) !important; }
@media (hover: hover) { .cl-sg__item:hover { background: rgba(155, 93, 229, 0.14) !important; } }
.cl-sg__empty { text-align: center; padding: 16px !important; }

/* ============================================================
   FOOTER, PHONES (2026-09-21) — rows with lines
   Before: logo left (centre x84) over centred text; links were
   floating centred words, some with icons, some without.
   Now: logo centred; each group is one card — small purple label,
   then full-width 52px rows, text left, arrow right, a line
   between rows. Same left edge everywhere (card + 16).
   ============================================================ */
/* (applies at every width now — desktop had the same free-floating links) */

  footer .cl-footer__brand { text-align: center !important; }
  footer .cl-footer__brand .cl-logo__img--footer {
    display: block !important;
    width: auto !important;
    height: 44px !important;
    margin: 0 auto 14px !important;
  }
  footer .cl-footer__blurb,
  footer .cl-footer__ruo { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: 320px; }
  footer .cl-footer__col {
    margin: 0 0 12px !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(155, 93, 229, 0.28) !important;
    border-radius: 14px !important;
    background: #121017 !important;
    box-shadow: none !important;
    text-align: left !important;
  }
  footer .cl-footer__heading {
    display: block !important;
    margin: 0 !important;
    padding: 14px 16px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    background: none !important;
    font: 700 12px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    color: #C9A6FF !important;
  }
  footer .cl-footer__heading::before,
  footer .cl-footer__heading::after { content: none !important; }
  footer .cl-footer__list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
  footer .cl-footer__list li { margin: 0 !important; padding: 0 !important; border: 0 !important; }
  footer .cl-footer__list li + li { border-top: 1px solid rgba(255, 255, 255, 0.07) !important; }
  footer .cl-footer__list a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px;
    min-height: 52px;
    box-sizing: border-box;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    font: 600 15px/1.3 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: left !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
  }
  footer .cl-footer__list a::before { content: none !important; }
  footer .cl-footer__list a::after {
    content: "" !important;
    position: static !important;
    flex: 0 0 16px;
    width: 16px !important;
    height: 16px !important;
    margin-left: auto !important;
    background: #8F889C !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  footer .cl-footer__list a:active { background: rgba(155, 93, 229, 0.14) !important; }
  footer .cl-footer__list a[aria-current="page"] { color: #C9A6FF !important; }
  footer .cl-footer__list .cl-nav-label--short { display: none !important; }
  footer .cl-footer__list .cl-nav-label--full { display: inline !important; }


/* footer link icons: every row has one, purple, same size */
footer .cl-footer__list a svg.cl-nav-icon {
  display: block !important;
  flex: 0 0 18px;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  color: #B98CFF;
}

/* desktop footer: brand left, four cards in a row, same top edge,
   cards only as tall as their links (no empty boxes) */
@media (min-width: 768px) {
  footer .cl-footer__grid { align-items: start !important; gap: 16px !important; }
  footer .cl-footer__col { align-self: start !important; height: auto !important; min-height: 0 !important; }
  footer .cl-footer__brand { text-align: left !important; }
  footer .cl-footer__brand .cl-logo__img--footer { margin: 0 0 14px !important; }
  footer .cl-footer__blurb, footer .cl-footer__ruo { text-align: left !important; margin-left: 0 !important; }
  footer .cl-footer__list a { min-height: 48px; font-size: 14.5px !important; }
}

/* ============================================================
   CONTACT BLOCK ("Talk to a real person"), every width
   Heading block centred; each card is ONE row: icon, then the
   label + value left-aligned beside it (they were centred next
   to a left icon, so nothing lined up).
   ============================================================ */
.cl-contact--footer { padding-top: 40px !important; padding-bottom: 24px !important; }
.cl-contact--footer .cl-contact__eyebrow,
.cl-contact--footer .cl-contact__title,
.cl-contact--footer .cl-contact__lede { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
.cl-contact--footer .cl-contact__title { max-width: 520px; font-size: clamp(22px, 5.6vw, 32px) !important; line-height: 1.2 !important; }
.cl-contact--footer .cl-contact__lede { max-width: 560px; font-size: 15px !important; line-height: 1.55 !important; }
.cl-contact--footer .cl-contact__links {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 12px !important;
  max-width: 760px;
  margin: 20px auto 0 !important;
}
.cl-contact--footer .cl-contact__link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  min-height: 72px;
  box-sizing: border-box;
  padding: 14px 16px !important;
  text-align: left !important;
}
.cl-contact--footer .cl-contact__icon { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; margin: 0 !important; }
.cl-contact--footer .cl-contact__linkBody {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 4px;
  min-width: 0;
  text-align: left !important;
}
.cl-contact--footer .cl-contact__label {
  font: 700 11.5px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}
.cl-contact--footer .cl-contact__value {
  font: 700 17px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  overflow-wrap: anywhere;
}
.cl-contact--footer .cl-contact__note {
  max-width: 560px;
  margin: 18px auto 0 !important;
  padding-top: 16px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}
@media (min-width: 768px) {
  .cl-contact--footer .cl-contact__links { grid-template-columns: 1fr 1fr; }
  footer .cl-footer__grid { margin-top: 8px !important; padding-top: 24px !important; }
}
.cl-contact--footer .cl-contact__link--email .cl-contact__value { font-size: 15px !important; white-space: nowrap; overflow-wrap: normal !important; word-break: normal !important; }
@media (max-width: 767px) {
  .cl-contact--footer { padding-left: 0 !important; padding-right: 0 !important; }
  .cl-contact--footer .cl-contact__links { margin-left: 0 !important; margin-right: 0 !important; }
}
/* desktop: logo + blurb on their own row, the four cards share the full
   width below — at 170px wide the link names wrapped onto two lines */
@media (min-width: 768px) {
  footer .cl-footer__grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  footer .cl-footer__brand {
    grid-column: 1 / -1;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    padding-bottom: 8px;
  }
  footer .cl-footer__brand .cl-logo__img--footer { margin: 0 !important; }
  footer .cl-footer__blurb { flex: 1 1 320px; max-width: 520px !important; margin: 0 !important; }
  footer .cl-footer__ruo { margin: 0 !important; }
  footer .cl-footer__list a { white-space: nowrap; }
}

/* ============================================================
   SPACING + BOTTOM STRIP + FAQ TYPE (2026-09-21)
   ============================================================ */
/* 169px of nothing under "Still have a question?" (page + container
   padding stacked). One 24px gap, then the contact section. */
body.page-id-52 main,
body.page-id-52 main .container { padding-bottom: 0 !important; }
body.page-id-52 .cl-faqhelp { margin-bottom: 24px !important; }
.cl-contact--footer { padding-top: 32px !important; }

/* bottom strip: sentence case, same size, lined up.
   Phone: stacked + centred with a line above. Desktop: one row,
   disclaimer left, © right, both on the same centre line. */
.cl-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 16px 0 calc(16px + env(safe-area-inset-bottom)) !important; }
.cl-footer__bottom-inner { display: flex !important; flex-direction: column; align-items: center; gap: 8px; }
.cl-footer__disclaimer,
.cl-footer__copy {
  margin: 0 !important;
  font: 500 12px/1.5 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  color: var(--mist-400, #A39DAE) !important;
}
.cl-footer__disclaimer { max-width: 340px; }
.cl-footer__disclaimer::first-letter { text-transform: uppercase; }
@media (min-width: 768px) {
  .cl-footer__bottom-inner { flex-direction: row; justify-content: space-between; gap: 24px; }
  .cl-footer__disclaimer { max-width: 640px; text-align: left !important; }
  .cl-footer__copy { flex: 0 0 auto; text-align: right !important; }
}

/* FAQ type, calmer: questions 15px (16 desktop), answers 14.5px (15.5) */
body.page-id-52 details.cl-faq > summary {
  min-height: 52px !important;
  padding: 13px 16px !important;
  font: 600 15px/1.4 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  color: #F1ECF7 !important;
}
body.page-id-52 details.cl-faq > p {
  font: 400 14.5px/1.6 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  color: var(--mist-300, #C9C3D2) !important;
}
body.page-id-52 .cl-content h2 { font-size: 11.5px !important; margin-top: 24px !important; }
@media (min-width: 768px) {
  body.page-id-52 details.cl-faq > summary { padding: 15px 22px !important; font-size: 16px !important; }
  body.page-id-52 details.cl-faq > p { padding: 0 22px 18px !important; font-size: 15.5px !important; }
}

/* ============================================================
   PRODUCT POP-UP (assets/quick-view.js, 2026-09-21)
   Phone: sheet from the bottom, 16px gutters, vial on top, then
   name / price / sizes / qty + Add to cart / short text / Details.
   Desktop (>=768): centred 880px card, vial left, info right.
   X 44px top-right. Back, X, tap outside and Esc close it.
   ============================================================ */
.cl-qv { position: fixed; inset: 0; z-index: 10040; display: flex; align-items: flex-end; justify-content: center; }
.cl-qv[hidden] { display: none; }
.cl-qv__scrim { position: absolute; inset: 0; background: rgba(6, 5, 10, 0.7); opacity: 0; transition: opacity .25s ease; }
.cl-qv.is-open .cl-qv__scrim { opacity: 1; }
.cl-qv__card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-height: 92svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(155, 93, 229, 0.35);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: #121017;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1);
}
.cl-qv.is-open .cl-qv__card { transform: none; }
.cl-qv__x {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 12px 12px -56px 0;
  border: 1px solid rgba(155, 93, 229, 0.35);
  border-radius: 12px;
  background: rgba(18, 16, 23, 0.9);
  color: #fff;
  cursor: pointer;
}
.cl-qv__body { padding: 0 16px calc(20px + env(safe-area-inset-bottom)); }
.cl-qv__media {
  display: flex;
  justify-content: center;
  padding: 18px 0 6px;
  background: radial-gradient(circle at 50% 55%, rgba(155, 93, 229, 0.28), transparent 62%);
}
.cl-qv__media img { display: block; width: auto; height: 240px; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.55)); }
.cl-qv__title { margin: 8px 0 4px !important; font: 800 26px/1.15 var(--font-body, "Plus Jakarta Sans"), sans-serif !important; letter-spacing: 0 !important; color: #fff !important; text-align: center; }
.cl-qv__price { margin: 0 0 16px !important; text-align: center; font: 700 18px/1.3 var(--font-body, "Plus Jakarta Sans"), sans-serif; color: #E3D0FF; }
.cl-qv__price s { color: var(--mist-400, #A39DAE); font-weight: 500; margin-right: 6px; }
.cl-qv__label { margin: 0 0 8px !important; font: 700 11.5px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #C9A6FF; text-align: center; }
/* flex, not a 3-column grid: two strengths sat on the left with an empty third slot */
.cl-qv__sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
.cl-qv__sizes > .cl-qv__size { flex: 0 0 calc((100% - 16px) / 3); min-width: 0; }
.cl-qv__size {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  border: 1px solid rgba(155, 93, 229, 0.40);
  border-radius: 12px;
  background: #0D0C11;
  color: #fff;
  font: 700 15px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  cursor: pointer;
}
.cl-qv__size small { font: 600 10.5px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif; color: var(--mist-400, #A39DAE); }
.cl-qv__size.is-on { border-color: #B98CFF; background: rgba(155, 93, 229, 0.22); box-shadow: 0 0 0 1px #B98CFF, 0 0 16px rgba(155, 93, 229, 0.45); }
.cl-qv__size:disabled { opacity: 0.45; cursor: not-allowed; }
.cl-qv__buy { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; margin: 0 0 18px; }
.cl-qv__qty {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  min-height: 54px;
  border: 1px solid rgba(155, 93, 229, 0.40);
  border-radius: 14px;
  background: #0D0C11;
  text-align: center;
  font: 700 16px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: #fff;
}
.cl-qv__qty button { height: 100%; border: 0; background: none; color: #C9A6FF; font-size: 20px; cursor: pointer; }
.cl-qv__add {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 54px;
  border: 1px solid rgba(214, 188, 255, 0.6);
  border-radius: 14px;
  background: linear-gradient(180deg, #9B5DE5 0%, #7B3FB2 100%);
  box-shadow: 0 0 0 1px rgba(155, 93, 229, 0.35), 0 8px 22px -8px rgba(155, 93, 229, 0.9);
  color: #fff;
  font: 800 16px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  cursor: pointer;
}
.cl-qv__add::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40px;
  background: linear-gradient(100deg, rgba(235, 220, 255, 0) 0%, rgba(235, 220, 255, 0.45) 50%, rgba(235, 220, 255, 0) 100%);
  transform: translateX(-60px) skewX(-18deg);
  animation: cl-btn-glare 6.5s ease-in-out infinite;
  z-index: -1;
}
.cl-qv__add:disabled { background: #2A2433; border-color: rgba(255, 255, 255, 0.15); box-shadow: none; color: var(--mist-300, #C9C3D2); cursor: not-allowed; }
.cl-qv__add:disabled::before { display: none; }
.cl-qv__short p { margin: 0 0 12px !important; font: 400 15px/1.6 var(--font-body, "Plus Jakarta Sans"), sans-serif; color: var(--mist-200, #D9D4E0); text-align: left; }
.cl-qv__more { margin: 0 0 12px; border: 1px solid rgba(155, 93, 229, 0.28); border-radius: 14px; background: #0D0C11; }
.cl-qv__more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 16px;
  list-style: none;
  cursor: pointer;
  font: 700 15px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: #fff;
}
.cl-qv__more > summary::-webkit-details-marker { display: none; }
.cl-qv__more > summary::after { content: "+"; color: #C9A6FF; font-size: 20px; }
.cl-qv__more[open] > summary::after { content: "−"; }
.cl-qv__desc { padding: 0 16px 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cl-qv__desc h3 { margin: 14px 0 4px !important; font: 700 13px/1.3 var(--font-body) !important; letter-spacing: 0.06em !important; text-transform: uppercase; color: #C9A6FF !important; text-align: left !important; }
.cl-qv__desc p { margin: 0 0 8px !important; font: 400 14.5px/1.6 var(--font-body) !important; color: var(--mist-200, #D9D4E0) !important; text-align: left !important; }
.cl-qv__ruo { margin: 4px 0 0 !important; text-align: center; font: 500 12px/1.4 var(--font-body); color: var(--mist-400, #A39DAE); }
body.cl-qv-open { overflow: hidden; }
body.cl-qv-open .cl-ask__tab, body.cl-qv-open .cl-calltab, body.cl-qv-open .cl-sticky-cart, body.cl-qv-open .cl-paybar { opacity: 0 !important; pointer-events: none !important; }
@media (min-width: 768px) {
  .cl-qv { align-items: center; padding: 24px; }
  .cl-qv__card { max-width: 880px; max-height: calc(100vh - 48px); border-bottom: 1px solid rgba(155, 93, 229, 0.35); border-radius: 22px; transform: translateY(14px) scale(.98); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
  .cl-qv.is-open .cl-qv__card { opacity: 1; }
  .cl-qv__body { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 28px; padding: 28px; }
  .cl-qv__media { align-items: center; padding: 0; border-radius: 18px; }
  .cl-qv__media img { height: 420px; }
  .cl-qv__title, .cl-qv__price, .cl-qv__label { text-align: left; }
  .cl-qv__title { margin-top: 10px !important; font-size: 30px !important; }
  .cl-qv__sizes > .cl-qv__size { flex-basis: 120px; }
}

/* full product page (direct links only): a clear way back */
.cl-backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 4px 0 8px;
  padding: 0 14px;
  border: 1px solid rgba(155, 93, 229, 0.45);
  border-radius: 999px;
  background: rgba(155, 93, 229, 0.10);
  color: #fff !important;
  font: 700 14px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  text-decoration: none !important;
}
/* product tabs: one centred row */
.single-product .woocommerce-tabs ul.tabs {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin: 0 auto 18px !important;
  padding: 4px !important;
  border: 1px solid rgba(155, 93, 229, 0.3) !important;
  border-radius: 14px !important;
  background: #0D0C11 !important;
  max-width: 420px;
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li { flex: 1 1 0; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: none !important; text-align: center; }
.single-product .woocommerce-tabs ul.tabs li a { display: flex !important; align-items: center; justify-content: center; min-height: 42px; padding: 0 8px !important; font: 700 13px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif !important; letter-spacing: 0.02em !important; text-transform: none !important; color: var(--mist-300, #C9C3D2) !important; white-space: nowrap; }
.single-product .woocommerce-tabs ul.tabs li.active { background: rgba(155, 93, 229, 0.25) !important; }
.single-product .woocommerce-tabs ul.tabs li.active a { color: #fff !important; }
/* sizes add straight to the cart: each button shows its strength + price */
.cl-qv__size { min-height: 60px !important; gap: 4px !important; }
.cl-qv__size b { font: 800 16px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif; }
.cl-qv__size small { font: 600 12.5px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif !important; color: #E3D0FF !important; }
.cl-qv__size:not(:disabled):active, .cl-qv__size.is-adding { border-color: #B98CFF; background: rgba(155, 93, 229, 0.28); box-shadow: 0 0 0 1px #B98CFF, 0 0 18px rgba(155, 93, 229, 0.55); }
.cl-qv__size:disabled small { color: var(--mist-400, #A39DAE) !important; }
.cl-qv__buy--one { grid-template-columns: 1fr !important; }
.cl-qv__soldout, .cl-qv__err { margin: 0 0 14px !important; text-align: center; font: 600 14px/1.4 var(--font-body); color: #FFB86B; }
@media (hover: hover) { .cl-qv__size:not(:disabled):hover { border-color: #B98CFF; } }

/* ============================================================
   POP-UP HEADERS, ONE PATTERN (2026-09-21):  [←]   Title   [✕]
   ← goes back to where you were; ✕ gets rid of it. Both 44px
   squares in the same style, so the title is dead centre.
   ============================================================ */
.cl-popback {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(155, 93, 229, 0.30) !important;
  border-radius: var(--radius-sm, 12px) !important;
  background: rgba(155, 93, 229, 0.08) !important;
  color: var(--mist-100, #E6E2EB) !important;
  cursor: pointer;
}
.cl-popback:hover, .cl-popback:focus-visible { background: rgba(155, 93, 229, 0.22) !important; border-color: rgba(155, 93, 229, 0.55) !important; color: #fff !important; }
/* cart */
.cl-drawer__head { display: grid !important; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.cl-drawer__head .cl-drawer__title {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  font: 700 16px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;
}
.cl-drawer__head .cl-drawer__title svg { color: #C9A6FF; flex: 0 0 18px; }
.cl-drawer__head .cl-drawer__close { justify-self: end; }
/* phone header now has five: Home · Refer · Account · Cart · Menu.
   Measured to fit beside the logo at 375: 44px each, 2px apart. */
@media (max-width: 1023px) {
  .cl-header .cl-header__icons { gap: 2px !important; }
  .cl-header .cl-header__icons .cl-icon-btn { min-width: 44px !important; width: auto !important; padding: 0 3px !important; }
  .cl-header .cl-icon-btn__cap { font-size: 11px !important; }
}
@media (min-width: 1024px) { .cl-header .cl-refer-btn { display: none !important; } }  /* desktop menu already has Refer */

/* bottom checkout bar: X top-right, [Secure checkout][cart] row, no dead
   space under it (the X used to sit alone at the bottom-left) */
.cl-sticky-cart { padding-bottom: env(safe-area-inset-bottom) !important; }
.cl-sticky-cart__inner { position: relative; padding: 12px 16px 12px !important; }
.cl-sticky-cart .cl-sticky-cart__close {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  bottom: auto !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  border: 1px solid rgba(155, 93, 229, 0.30) !important;
  border-radius: 10px !important;
  background: rgba(155, 93, 229, 0.08) !important;
  color: var(--mist-100, #E6E2EB) !important;
}
.cl-sticky-cart .cl-sticky-cart__close::after { content: ""; position: absolute; inset: -4px; }
.cl-sticky-cart__text { padding-right: 44px !important; }
.cl-sticky-cart__actions { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; }
.cl-sticky-cart__actions .cl-sticky-cart__btn--go { flex: 1 1 auto !important; }
.cl-sticky-cart__cartbtn {
  flex: 0 0 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  min-height: 48px;
  border: 1px solid rgba(155, 93, 229, 0.55);
  border-radius: 12px;
  background: rgba(155, 93, 229, 0.14);
  color: #E3D0FF;
  cursor: pointer;
}
.cl-sticky-cart__cartbtn svg { filter: drop-shadow(0 0 3px rgba(170, 110, 240, 0.8)); }

/* HOME HERO spacing (2026-09-21): the title ended at y540 and the button began
   at y542 — 2px. Now: title, 24px, a big glowing "Shop the catalog", 12px,
   "How to save" as a quieter pill, 28px, the trust badges. */
.cl-hero2__title { margin-bottom: 24px !important; }
.cl-hero2 .cl-hero2__shop {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100% !important;
  max-width: 320px;
  min-height: 58px !important;
  margin: 0 auto !important;
  border: 1px solid rgba(214, 188, 255, 0.6) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #9B5DE5 0%, #7B3FB2 100%) !important;
  box-shadow: 0 0 0 1px rgba(155, 93, 229, 0.35), 0 10px 28px -8px rgba(155, 93, 229, 0.9), 0 0 26px rgba(155, 93, 229, 0.45) !important;
  font: 800 18px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  color: #fff !important;
}
.cl-hero2 .cl-hero2__shop::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 44px;
  background: linear-gradient(100deg, rgba(235, 220, 255, 0) 0%, rgba(235, 220, 255, 0.45) 50%, rgba(235, 220, 255, 0) 100%);
  transform: translateX(-60px) skewX(-18deg);
  animation: cl-btn-glare 6.5s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}
.cl-hero2 .cl-hero2__aside {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 12px auto 0 !important;
  padding: 0 18px !important;
  border: 1px solid rgba(155, 93, 229, 0.45) !important;
  border-radius: 999px !important;
  background: rgba(155, 93, 229, 0.10) !important;
  font: 700 14px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  color: #E3D0FF !important;
  text-decoration: none !important;
}
.cl-hero2 .cl-hero2__aside::after { content: none !important; }
.cl-hero2__trust { margin-top: 28px !important; }
@media (prefers-reduced-motion: reduce) { .cl-hero2 .cl-hero2__shop::before { animation: none; display: none; } }

/* floating cart (after the bottom bar is closed): solid, glowing, ringed —
   it was a dark outline that disappeared over the vial photos */
.cl-cart-fab {
  width: 58px !important;
  height: 58px !important;
  right: 16px !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  border: 3px solid #0C0B10 !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #A970EC 0%, #7B3FB2 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(214, 188, 255, 0.75), 0 10px 26px rgba(0, 0, 0, 0.7), 0 0 26px rgba(155, 93, 229, 0.75) !important;
  z-index: 9994 !important;
}
.cl-cart-fab svg { width: 24px !important; height: 24px !important; color: #fff !important; }
.cl-cart-fab .cl-cart-fab__count {
  top: -6px !important;
  right: -6px !important;
  min-width: 22px;
  height: 22px;
  border: 2px solid #0C0B10;
  background: #fff !important;
  color: #5E2F88 !important;
  font: 800 11.5px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
}
.cl-cart-fab::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
/* hover/press: glows brighter like every other button, with the slow purple glare */
.cl-cart-fab { transition: box-shadow .25s ease, transform .25s ease, filter .25s ease !important; }
.cl-cart-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(110deg, rgba(235, 215, 255, 0) 35%, rgba(235, 215, 255, 0.55) 50%, rgba(235, 215, 255, 0) 65%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0;
  animation: cl-fab-glare 5s ease-in-out infinite;
}
@keyframes cl-fab-glare { 0%, 55% { background-position: 130% 0; } 90%, 100% { background-position: -30% 0; } }
.cl-cart-fab:hover,
.cl-cart-fab:focus-visible,
.cl-cart-fab:active {
  transform: scale(1.06);
  filter: brightness(1.08);
  box-shadow: 0 0 0 2px rgba(230, 212, 255, 0.95), 0 10px 26px rgba(0, 0, 0, 0.7), 0 0 34px 6px rgba(170, 110, 240, 0.9) !important;
}
@media (prefers-reduced-motion: reduce) { .cl-cart-fab::before { animation: none; display: none; } }

/* pop-up Back buttons placed in each pop-up's header */
.cl-popback--abs { position: absolute !important; top: 12px; left: 12px; z-index: 3; }
.cl-callsheet__card .cl-popback--abs { top: 12px; left: 12px; }
.cl-promo .cl-popback--abs { top: 12px; left: 12px; }
.cl-pay .cl-pay__bar { display: grid !important; grid-template-columns: 44px 1fr 44px; gap: 8px; }
.cl-pay .cl-pay__bar .cl-pay__logo { justify-self: center; }
.cl-am__head { display: grid !important; grid-template-columns: 44px 1fr 44px !important; align-items: center; gap: 8px; }
.cl-am__head .cl-am__title { text-align: center !important; margin: 0 !important; }
.cl-ask__head .cl-popback { width: 40px !important; height: 40px !important; flex: 0 0 40px; margin-right: 4px !important; }

/* phones: Products in the header instead of Account; desktop keeps Account */
@media (max-width: 1023px) { .cl-header .cl-acct-btn { display: none !important; } }
@media (min-width: 1024px) { .cl-header .cl-products-btn { display: none !important; } }
.cl-mobile__account { list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 6px !important; padding-top: 6px; }
.cl-mobile__account a { display: flex !important; align-items: center; gap: 10px; }

/* one-time hint under the Menu button */
.cl-menuhint {
  position: fixed;
  right: 12px;
  z-index: 10020;
  max-width: 220px;
  padding: 10px 12px;
  border: 1px solid rgba(196, 160, 255, 0.45);
  border-radius: 12px;
  background: #1A1422;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  font: 600 13px/1.35 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: #fff;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.cl-menuhint::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 24px;
  width: 10px;
  height: 10px;
  background: #1A1422;
  border-left: 1px solid rgba(196, 160, 255, 0.45);
  border-top: 1px solid rgba(196, 160, 255, 0.45);
  transform: rotate(45deg);
}
.cl-menuhint.is-in { opacity: 1; transform: none; }

/* ============================================================
   ACCOUNT POP-UP (inc/account-modal.php) — same frame as checkout
   Phone: full screen, header [←] My account [✕]. Desktop: 560px card.
   ============================================================ */
.cl-acct { position: fixed; inset: 0; z-index: 10030; display: flex; align-items: stretch; justify-content: center; }
.cl-acct[hidden] { display: none; }
.cl-acct__scrim { position: absolute; inset: 0; background: rgba(6, 5, 10, 0.72); opacity: 0; transition: opacity .25s ease; }
.cl-acct.is-open .cl-acct__scrim { opacity: 1; }
.cl-acct__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #0C0B10;
  transform: translateY(24px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.cl-acct.is-open .cl-acct__panel { transform: none; opacity: 1; }
.cl-acct__head {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cl-acct__title {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  font: 700 16px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;
}
.cl-acct__title svg { color: #C9A6FF; }
.cl-acct__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(155, 93, 229, 0.30);
  border-radius: 12px;
  background: rgba(155, 93, 229, 0.08);
  color: #fff;
  cursor: pointer;
}
.cl-acct__loading { padding: 40px 16px; text-align: center; font: 600 14px/1.4 var(--font-body); color: var(--mist-300, #C9C3D2); }
.cl-acct__loading[hidden] { display: none; }
.cl-acct__frame { flex: 1 1 auto; width: 100%; border: 0; background: #0C0B10; }
body.cl-acct-open { overflow: hidden; }
body.cl-acct-open .cl-ask__tab, body.cl-acct-open .cl-calltab, body.cl-acct-open .cl-sticky-cart, body.cl-acct-open .cl-cart-fab, body.cl-acct-open .cl-paybar { opacity: 0 !important; pointer-events: none !important; }
/* desktop too: slides up from the bottom (Noah), sized to the login form */
@media (min-width: 768px) {
  .cl-acct { align-items: flex-end; padding: 0 24px; }
  .cl-acct__panel {
    max-width: 560px; height: min(80vh, 620px);
    border: 1px solid rgba(155, 93, 229, 0.35); border-bottom: 0; border-radius: 22px 22px 0 0; overflow: hidden;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.7), 0 0 40px -12px rgba(155, 93, 229, 0.7);
    transform: translateY(100%); opacity: 1; transition: transform .3s cubic-bezier(.2, .9, .3, 1);
  }
  .cl-acct.is-open .cl-acct__panel { transform: none; }
}
/* title matches the other pop-ups: spaced caps */
.cl-acct__title { font: 700 16px/1 var(--font-display) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }

/* account pop-up content (bare frame): real boxes for sign-in and forms,
   16px gutters, one left edge */
body.cl-embed.woocommerce-account .cl-embed__main { padding: 16px 16px 40px !important; max-width: 520px; margin: 0 auto; }
body.cl-embed.woocommerce-account h2 { font: 800 22px/1.2 var(--font-body) !important; letter-spacing: 0 !important; text-transform: none !important; margin: 4px 0 14px !important; color: #fff !important; text-align: left !important; }
body.cl-embed.woocommerce-account form.woocommerce-form,
body.cl-embed.woocommerce-account .woocommerce-MyAccount-content form {
  margin: 0 0 16px !important;
  padding: 16px !important;
  border: 1px solid rgba(155, 93, 229, 0.30) !important;
  border-radius: 14px !important;
  background: #121017 !important;
}
body.cl-embed.woocommerce-account .form-row { margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; background: none !important; }
body.cl-embed.woocommerce-account .form-row label { display: block !important; margin: 0 0 8px !important; font: 600 14px/1.3 var(--font-body) !important; color: #F5F3F7 !important; text-transform: none !important; letter-spacing: 0 !important; }
body.cl-embed.woocommerce-account input.input-text,
body.cl-embed.woocommerce-account input[type="email"],
body.cl-embed.woocommerce-account input[type="password"],
body.cl-embed.woocommerce-account input[type="text"],
body.cl-embed.woocommerce-account select {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 52px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(155, 93, 229, 0.45) !important;
  border-radius: 12px !important;
  background: #0D0C11 !important;
  color: #fff !important;
  font-size: 16px !important;
}
body.cl-embed.woocommerce-account input:focus { outline: none !important; border-color: #9B5DE5 !important; box-shadow: 0 0 0 3px rgba(155, 93, 229, 0.25) !important; }
body.cl-embed.woocommerce-account .show-password-input { top: 50% !important; transform: translateY(-50%); right: 12px !important; }
body.cl-embed.woocommerce-account button.button,
body.cl-embed.woocommerce-account .woocommerce-button {
  width: 100% !important;
  min-height: 52px !important;
  border: 1px solid rgba(214, 188, 255, 0.6) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #9B5DE5 0%, #7B3FB2 100%) !important;
  color: #fff !important;
  font: 800 16px/1 var(--font-body) !important;
  box-shadow: 0 8px 22px -8px rgba(155, 93, 229, 0.9) !important;
}
body.cl-embed.woocommerce-account .woocommerce-form-login__rememberme { display: flex !important; align-items: center; gap: 10px; margin: 0 0 14px !important; font: 500 14px/1.3 var(--font-body) !important; color: #D9D4E0 !important; }
body.cl-embed.woocommerce-account .lost_password { margin: 14px 0 0 !important; text-align: center; }
body.cl-embed.woocommerce-account .lost_password a { color: #C9A6FF !important; font-weight: 600; }
/* signed-in: the account menu as rows with lines */
body.cl-embed.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0 0 16px !important; padding: 0 !important; list-style: none !important; border: 1px solid rgba(155, 93, 229, 0.28); border-radius: 14px; overflow: hidden; background: #121017; }
body.cl-embed.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.07); }
body.cl-embed.woocommerce-account .woocommerce-MyAccount-navigation li:first-child { border-top: 0; }
body.cl-embed.woocommerce-account .woocommerce-MyAccount-navigation a { display: flex; align-items: center; min-height: 50px; padding: 0 16px; color: #fff !important; font: 600 15px/1 var(--font-body); text-decoration: none !important; }
body.cl-embed.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: #C9A6FF !important; background: rgba(155, 93, 229, 0.12); }
/* the old "field card draws the frame" rule (0,3,3) stripped these borders */
body.cl-embed.woocommerce-account form .form-row input.input-text,
body.cl-embed.woocommerce-account form .form-row input[type="password"],
body.cl-embed.woocommerce-account form .form-row input[type="email"],
body.cl-embed.woocommerce-account form .form-row input[type="text"] {
  border: 1px solid rgba(155, 93, 229, 0.5) !important;
  background: #0D0C11 !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
}
body.cl-embed.woocommerce-account form .form-row input.input-text:focus { border-color: #9B5DE5 !important; box-shadow: 0 0 0 3px rgba(155, 93, 229, 0.25) !important; }
body.cl-embed.woocommerce-account .woocommerce-form-login__rememberme input { width: 20px !important; height: 20px !important; margin: 0 !important; }

/* account on phones: a sheet that slides up, not a whole page */
@media (max-width: 767px) {
  .cl-acct { align-items: flex-end; }
  .cl-acct__panel {
    height: 88svh;
    border: 1px solid rgba(155, 93, 229, 0.35);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    overflow: hidden;
    transform: translateY(100%);
    opacity: 1;
    transition: transform .3s cubic-bezier(.2, .9, .3, 1);
  }
  .cl-acct.is-open .cl-acct__panel { transform: none; }
  .cl-acct__head { padding-top: 12px; }
}
/* login boxes: brighter edge and fill so they read as boxes at a glance */
body.cl-embed.woocommerce-account form .form-row input.input-text,
body.cl-embed.woocommerce-account form .form-row input[type="password"] {
  border: 1.5px solid rgba(185, 140, 255, 0.75) !important;
  background: #1C1726 !important;
}
body.cl-embed.woocommerce-account input::placeholder { color: #9A93A8 !important; opacity: 1; }

/* ============================================================
   EVERY POP-UP SLIDES UP FROM THE BOTTOM ON PHONES (Noah, 2026-09-21)
   checkout, menu, Pepper — same sheet as account/product/call:
   rounded top, page visible above, slides up.
   ============================================================ */
@keyframes cl-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 767px) {
  /* cart: NOT a sheet — it stays the side slider (Noah, 2026-09-21) */
  /* checkout */
  .cl-co .cl-co__panel {
    top: auto !important;
    bottom: 0 !important;
    height: 94svh !important;
    border-radius: 22px 22px 0 0 !important;
    border: 1px solid rgba(155, 93, 229, 0.35) !important;
    border-bottom: 0 !important;
    overflow: hidden;
    transform: translateY(100%) !important;
    transition: transform .3s cubic-bezier(.2, .9, .3, 1), opacity .2s ease !important;
  }
  .cl-co.is-open .cl-co__panel { transform: none !important; }
  /* menu */
  .cl-mobile .cl-mobile__panel {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: 88svh;
    overflow-y: auto;
    border-radius: 22px 22px 0 0 !important;
    border: 1px solid rgba(155, 93, 229, 0.35) !important;
    border-bottom: 0 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    transform: translateY(100%) !important;
    transition: transform .3s cubic-bezier(.2, .9, .3, 1) !important;
  }
  .cl-mobile[aria-hidden="false"] .cl-mobile__panel { transform: none !important; }
}
/* My account first in the phone menu, set apart by a line under it */
.cl-mobile__nav .cl-mobile__account { border-top: 0 !important; margin: 0 0 6px !important; padding: 0 0 6px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
body.cl-menu-open .cl-ask__tab, body.cl-menu-open .cl-calltab, body.cl-menu-open .cl-cart-fab, body.cl-menu-open .cl-sticky-cart,
body.cl-drawer-open .cl-ask__tab, body.cl-drawer-open .cl-cart-fab,
body.cl-co-open .cl-ask__tab, body.cl-co-open .cl-cart-fab { opacity: 0 !important; pointer-events: none !important; }
/* phone tabs: a label you can read (was 9px) */
@media (max-width: 767px) {
  body .cl-ask__tab, body .cl-calltab { width: 30px !important; height: 50px !important; }
  .cl-tabmini { font-size: 10px !important; font-weight: 800 !important; }
  body .cl-calltab { top: calc(38svh + 25px + 6px) !important; }
}

/* product pop-up on phones: centred (Noah: "center stuff, like details") */
@media (max-width: 767px) {
  .cl-qv__short p, .cl-qv__ruo { text-align: center !important; }
  .cl-qv__more > summary { justify-content: center !important; gap: 10px; position: relative; }
  .cl-qv__more > summary::after { position: absolute; right: 16px; }
  .cl-qv__desc h3, .cl-qv__desc p { text-align: center !important; }
}

/* "How ordering works" was 407px wide on a 375px phone — cut off at the right.
   Size scales with the screen and it may wrap, so it can never run off. */
@media (max-width: 699px) {
  .cl-intent::before {
    font-size: clamp(19px, 6.2vw, 28px) !important;
    letter-spacing: 0.02em !important;
    white-space: normal !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }
}

/* Odd number of products in the 2-up phone grid: the last card sat alone on
   the left (BAC WATER, 9th). Centre it under the pair above. */
@media (max-width: 767px) {
  ul.products > li.product:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc((100% - 9px) / 2) !important;
  }
}

/* The floating ↓ "Preview the catalog" circle sat on top of the hero's trust
   line on phones ("THIRD-PARTY TES|"). "Shop the catalog" right above does the
   same job, so phones don't get it. */
@media (max-width: 767px) { .cl-scrollcue { display: none !important; } }

/* every "Secure" carries the lock — the pay button and the bottom pay bar had
   the word only */
.cl-pay__go-secure,
.cl-paybar__secure { display: inline-flex !important; align-items: center; gap: 4px; }
.cl-pay__go-secure::before,
.cl-paybar__secure::before {
  content: "";
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- pay pop-up: Change payment method (same order) ---- */
.cl-pay .cl-pay__switch { margin: 14px 0 0; border: 1px solid rgba(155, 93, 229, 0.30); border-radius: 14px; overflow: hidden; }
.cl-pay .cl-pay__switchbtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 0; background: rgba(155, 93, 229, 0.08); color: #E6E2EB;
  font: 700 14.5px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif; cursor: pointer;
}
.cl-pay .cl-pay__switchbtn[aria-expanded="true"] { border-bottom: 1px solid rgba(155, 93, 229, 0.30); }
.cl-pay .cl-pay__switchnote { margin: 0; padding: 10px 14px; text-align: center; font-size: 13px; color: #A39DAE; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.cl-pay .cl-pay__switchopt {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 0 14px;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: none; color: #fff;
  font: 700 15px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif; cursor: pointer;
}
.cl-pay .cl-pay__switchopt:last-of-type { border-bottom: 0; }
.cl-pay .cl-pay__switchopt:hover { background: rgba(155, 93, 229, 0.10); }
.cl-pay .cl-pay__switchopt .cl-pay__go-logo { width: 28px; height: 28px; flex: 0 0 28px; }
.cl-pay .cl-pay__switchopt.is-busy { opacity: .6; }
.cl-pay .cl-pay__switchopt:disabled { cursor: progress; }
.cl-pay .cl-pay__switcherr { margin: 0; padding: 10px 14px; text-align: center; font-size: 13px; color: #FF9B9B; }

/* ---- Zelle help: its own sheet, slides up from the bottom ---- */
.cl-pay .cl-pay__sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
  max-width: 480px; margin: 0 auto; max-height: 88vh; overflow: auto;
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid rgba(155, 93, 229, 0.35); border-bottom: 0; border-radius: 20px 20px 0 0;
  background: #121017; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.7);
  transform: translateY(100%); transition: transform .26s ease;
}
.cl-pay .cl-pay__sheet.is-open { transform: translateY(0); }
.cl-pay .cl-pay__sheetbar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; margin-bottom: 12px; }
.cl-pay .cl-pay__sheetbar h3 { margin: 0; text-align: center; font-size: 18px; color: #fff; }
.cl-pay .cl-pay__steps { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; }
.cl-pay .cl-pay__steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 13.5px; line-height: 1.4; color: #C9C3D2; }
.cl-pay .cl-pay__steps li:last-child { border-bottom: 0; }
.cl-pay .cl-pay__steps b { display: block; color: #fff; font-size: 15px; margin-bottom: 2px; }
.cl-pay .cl-pay__stepnum { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #7B3FB2; color: #fff; font-weight: 800; font-size: 13px; }
.cl-pay .cl-pay__sheetnote { margin: 0 0 12px; text-align: center; font-size: 13px; line-height: 1.45; color: #A39DAE; }
.cl-pay .cl-pay__sheetdone { width: 100%; min-height: 50px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #A970EC, #7B3FB2); color: #fff; font: 800 15px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif; cursor: pointer; }
/* the Zelle button is a <button> now — full width like the links */
.cl-pay button.cl-pay__go { width: 100%; border: 0; cursor: pointer; font: inherit; }

/* "Need a hand?" — after X on the waiting bar; slides up over the cart */
.cl-needhelp { position: fixed; inset: 0; z-index: 10060; }
.cl-needhelp__scrim { position: absolute; inset: 0; background: rgba(5, 4, 8, 0.55); opacity: 0; transition: opacity .25s ease; }
.cl-needhelp.is-open .cl-needhelp__scrim { opacity: 1; }
.cl-needhelp__card {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto;
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid rgba(155, 93, 229, 0.35); border-bottom: 0; border-radius: 20px 20px 0 0;
  background: #121017; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.7);
  transform: translateY(100%); transition: transform .26s ease;
}
.cl-needhelp.is-open .cl-needhelp__card { transform: none; }
.cl-needhelp__bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; margin-bottom: 8px; }
.cl-needhelp__bar h3 { margin: 0; text-align: center; font-size: 19px; color: #fff; }
.cl-needhelp__x { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(155, 93, 229, 0.30); border-radius: 12px; background: rgba(155, 93, 229, 0.08); color: #E6E2EB; cursor: pointer; }
.cl-needhelp__lede { margin: 0 0 14px; text-align: center; font-size: 15px; line-height: 1.45; color: #C9C3D2; }
.cl-needhelp__btn { display: block; width: 100%; min-height: 52px; margin: 0 0 10px; border: 1px solid rgba(155, 93, 229, 0.45); border-radius: 14px; background: rgba(155, 93, 229, 0.10); color: #fff; font: 700 15px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif; cursor: pointer; }
.cl-needhelp__btn--call { border-color: rgba(61, 214, 140, 0.6); background: linear-gradient(180deg, rgba(61, 214, 140, 0.20), rgba(61, 214, 140, 0.08)); box-shadow: 0 0 22px -6px rgba(61, 214, 140, 0.55); }
.cl-needhelp__ok { display: block; width: 100%; min-height: 48px; border: 0; background: none; color: #A39DAE; font: 700 14px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ============================================================
   TYPE SYSTEM (Noah, 2026-09-21): Poppins headings, DM Sans body,
   sizes/spacing measured off a reference at 375px. See memory
   corelabs-typography. Mobile first; desktop scales up.
   ============================================================ */
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4,
.cl-section__title, .cl-hero2__title, .cl-shop-header__title, .cl-contact__title,
.woocommerce-loop-product__title, .cl-qv__name, .cl-picks__namebtn-title,
.cl-btn, .button, button.cl-btn, .cl-drawer__cta, #place_order {
  font-family: var(--font-display) !important;
}
/* small label above a heading */
.cl-eyebrow { font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0.28em !important; margin-bottom: 18px !important; }
/* section headings: 34px, tight */
.cl-section__title,
.cl-quality__head h2,
.cl-contact__title,
.cl-content h2 {
  font-size: clamp(28px, 9vw, 34px) !important;
  font-weight: 600 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.03em !important;
}
/* hero */
.cl-hero2__title { font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.05 !important; }
/* the ordering heading keeps its fitted size, gets the new weight */
.cl-intent::before { font-weight: 700 !important; letter-spacing: 0.01em !important; }
/* body copy: 16px DM Sans, easy line spacing, softer colour */
.cl-content p, .cl-quality__lede, .cl-section p, .cl-qv__short p, .cl-qv__desc p, .cl-pillar p, .cl-contact p {
  font-family: var(--font-body) !important;
  font-size: 16px;
  line-height: 1.62 !important;
}
.cl-pillar h3, .cl-intent__list h3, .cl-intent__list b, .faq summary, .cl-faq summary, details > summary {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
/* product cards */
.woocommerce-loop-product__title { font-weight: 600 !important; letter-spacing: -0.01em !important; }
ul.products li.product .price { font-family: var(--font-display) !important; font-weight: 700 !important; }
.cl-qv__price, .cl-picks__price { font-family: var(--font-display) !important; font-weight: 700 !important; }
/* buttons: Poppins 600–700 */
.cl-btn, .button, .cl-drawer__cta, #place_order, .cl-pay__go-text, .cl-paybar__cta { font-weight: 700 !important; letter-spacing: 0 !important; }
/* legal caps lines */
.cl-ticker li, .cl-hero2__trust li { font-family: var(--font-body) !important; font-weight: 500 !important; letter-spacing: 0.16em !important; }
@media (min-width: 768px) {
  .cl-section__title, .cl-quality__head h2, .cl-contact__title, .cl-content h2 { font-size: 44px !important; }
  .cl-content p, .cl-quality__lede, .cl-section p { font-size: 17px; }
}
/* headings inside page cards sit in ~240px boxes on phones: smaller, and
   long words may wrap rather than run out */
@media (max-width: 767px) {
  .cl-content h2 { font-size: clamp(21px, 6.4vw, 26px) !important; line-height: 1.15 !important; overflow-wrap: break-word; text-wrap: balance; }
  .cl-content h3 { font-size: 18px !important; line-height: 1.3 !important; }
}
/* phones: the four quality points as stacked full-width rows with lines
   (2-up squeezed the text to 1–3 words a line) */
@media (max-width: 767px) {
  .cl-pillars { display: block !important; border-top: 1px solid rgba(255, 255, 255, 0.10); }
  .cl-pillar {
    padding: 18px 8px !important; margin: 0 !important;
    border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 0 !important; background: none !important; box-shadow: none !important;
    text-align: center; min-height: 0 !important;
  }
  .cl-pillar h3 { font-size: 17px !important; margin: 0 0 4px !important; }
  .cl-pillar p { font-size: 15px !important; line-height: 1.5 !important; margin: 0 !important; color: var(--mist-400, #A39DAE); }
}

/* ============================================================
   HOME REDESIGN (2026-09-21) — white where it helps things pop
   dark hero → featured white cards → … → white catalog → dark
   ============================================================ */
:root {
  /* soft lavender paper, a touch darker at the bottom — pure white was too
     abrupt against the purple (Noah) */
  /* frosted: the purple shows through a little (Noah: "a little transparent") */
  /* CONTRAST PASS: dark smoked glass cards, light text (Noah: 'there just needs to be contrast') */
  --paper: linear-gradient(180deg, rgba(36, 24, 56, 0.90) 0%, rgba(22, 15, 35, 0.92) 100%);
  --paper-solid: #1C1429;
  --paper-2: #F7F4FB;       /* faint lavender wash */
  --paper-line: rgba(206, 172, 255, 0.22);
  --ink-strong: #FFFFFF;
  --ink-soft: #D2CADF;
  --plum: #CFB2FF;
  --plum-tint: rgba(169, 112, 236, 0.20);
}

/* desktop hero: the two buttons on one line, same height, centred */
@media (min-width: 768px) {
  .cl-hero2__cta { display: flex !important; justify-content: center !important; align-items: center !important; gap: 16px !important; flex-wrap: nowrap !important; }
  .cl-hero2__cta > a { height: 60px !important; min-height: 60px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; }
  .cl-hero2__shop { width: auto !important; min-width: 320px !important; padding: 0 36px !important; }
  .cl-hero2__aside { width: auto !important; min-width: 200px !important; padding: 0 28px !important; }
  /* an older ".cl-hero2 .cl-hero2__aside { margin: 12px auto 0 }" pushed it
     down 6px and 92px to the right */
  .cl-hero2 .cl-hero2__cta > .cl-hero2__aside,
  .cl-hero2 .cl-hero2__cta > .cl-hero2__shop { margin: 0 !important; }
}

/* ---- featured ---- */
.cl-feat { padding: 28px 0 36px; text-align: center; }
.cl-feat .container { max-width: 1120px; }
.cl-feat__eyebrow { color: var(--accent-300, #C4A9F5) !important; margin: 0 0 10px !important; }
.cl-feat__title {
  margin: 0 0 22px; color: #fff;
  font: 600 clamp(28px, 9vw, 34px)/1.06 var(--font-display); letter-spacing: -0.03em;
}
.cl-feat__light { font-weight: 300; }
.cl-feat__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cl-feat__card { margin: 0; }
.cl-feat__link {
  position: relative; display: flex; flex-direction: column; align-items: center; height: 100%;
  padding: 14px 12px 14px; box-sizing: border-box;
  background: var(--paper); border: 1px solid rgba(214, 196, 245, 0.55); border-radius: 18px;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.85), 0 0 30px -10px rgba(155, 93, 229, 0.55);
  color: var(--ink-strong); text-decoration: none; text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cl-feat__link:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(155, 93, 229, 0.6); }
.cl-feat__tag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 5px 10px; border-radius: 999px;
  font: 800 10.5px/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase;
}
.cl-feat__tag--save { background: #6C34A0; color: #fff; }
.cl-feat__tag--stock { background: #E3F6EC; color: #1E7A4C; }
.cl-feat__tag--soon { background: #EFEDF3; color: #B9AFCB; }
.cl-feat__img { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 132px; margin: 18px 0 8px; }
.cl-feat__img img { max-height: 132px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(40, 20, 70, 0.28)); }
.cl-feat__name { font: 700 18px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--ink-strong); margin: 0 0 6px; }
.cl-feat__price { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 0 0 10px; min-height: 48px; justify-content: flex-end; }
.cl-feat__was { font: 400 13.5px/1.2 var(--font-body); color: #B9AFCB; }
.cl-feat__now { font: 800 22px/1.1 var(--font-display); color: var(--plum); letter-spacing: -0.01em; }
.cl-feat__now small { font: 600 12px/1 var(--font-body); color: var(--ink-soft); letter-spacing: 0; }
.cl-feat__sizes {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 7px 8px; border-radius: 999px;
  background: var(--plum-tint); color: #D6BEFF; font: 600 12.5px/1.2 var(--font-body);
}
.cl-feat__btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin-top: auto;
  border-radius: 12px; background: linear-gradient(180deg, #A970EC 0%, #7B3FB2 100%); color: #fff;
  font: 700 15px/1 var(--font-display); box-shadow: 0 8px 18px -8px rgba(123, 63, 178, 0.8);
  position: relative; overflow: hidden;
}
.cl-feat__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 130% 0; animation: cl-fab-glare 6s ease-in-out infinite; }
.cl-feat__card.is-soon .cl-feat__btn { background: #fff; color: var(--plum); border: 1.5px solid #CDB8EC; box-shadow: none; }
.cl-feat__card.is-soon .cl-feat__btn::after { display: none; }
@media (min-width: 768px) {
  .cl-feat { padding: 44px 0 56px; }
  .cl-feat__title { font-size: 44px; margin-bottom: 30px; }
  .cl-feat__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .cl-feat__img, .cl-feat__img img { height: 170px; max-height: 170px; }
}

/* ---- product cards: white paper on the dark background (every grid) ---- */
.cl-section--white .cl-eyebrow { text-align: center; }
html body ul.products li.product.product {
  background: var(--paper) !important; border: 1px solid rgba(214, 196, 245, 0.55) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.85), 0 0 30px -10px rgba(155, 93, 229, 0.55) !important;
}
html body ul.products li.product.product .woocommerce-loop-product__title { color: var(--ink-strong) !important; text-shadow: none !important; }
html body ul.products li.product.product .price,
html body ul.products li.product.product .price ins,
html body ul.products li.product.product .price .amount { color: var(--plum) !important; text-shadow: none !important; }
html body ul.products li.product.product .price del,
html body ul.products li.product.product .price del .amount { color: #B9AFCB !important; }
html body ul.products li.product.product img { filter: drop-shadow(0 8px 12px rgba(40, 20, 70, 0.25)); }
html body ul.products li.product.product a.button:not(.add_to_cart_button),
html body ul.products li.product.product .button.disabled,
html body ul.products li.product.product .cl-oos {
  background: #F4F2F7 !important; color: #B9AFCB !important; border-color: #E4E0EA !important; box-shadow: none !important;
}
/* white cards: no dark-theme text shadows */
.cl-feat__link, .cl-feat__link *, html body ul.products li.product.product, html body ul.products li.product.product * { text-shadow: none !important; }
/* white catalog: the $ took the dark theme's near-white — match the price */
html body ul.products li.product.product .price .woocommerce-Price-currencySymbol,
html body ul.products li.product.product .price > span[aria-hidden] { color: inherit !important; }
html body ul.products li.product.product .price del .woocommerce-Price-currencySymbol { color: #B9AFCB !important; }

/* ============================================================
   PAPER ON DARK (2026-09-21): the purple background stays; white
   only where people READ. One sheet per page — no box in a box.
   Text pages: About, Shipping & Returns, Terms, Privacy, RUO,
   Affiliate terms, refund policy.
   ============================================================ */
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) article.page {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important;
}
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) article.page > h1 {
  color: #fff !important; text-align: center; margin: 0 0 22px !important;
  font: 600 clamp(30px, 9.4vw, 44px)/1.06 var(--font-display) !important; letter-spacing: -0.03em !important;
}
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content {
  background: var(--paper) !important; color: #E2DCEC !important;
  border: 1px solid rgba(214, 196, 245, 0.55) !important; border-radius: 22px !important;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9), 0 0 30px -10px rgba(155, 93, 229, 0.55) !important;
  padding: 26px 22px 30px !important; max-width: 760px; margin: 0 auto !important; backdrop-filter: none !important;
  text-align: left !important;
}
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content * {
  text-shadow: none !important;
}
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content :is(div, section, aside):not(.cl-content) {
  background: none !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important;
}
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content p,
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content li {
  color: #E2DCEC !important; font: 400 16px/1.68 var(--font-body) !important; text-align: left !important;
}
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content :is(h2, h3) {
  color: var(--ink-strong) !important; text-align: left !important;
  font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -0.02em !important;
  margin: 26px 0 8px !important; padding: 22px 0 0 !important; border-top: 1px solid #ECE6F5 !important;
}
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content h2 { font-size: 22px !important; line-height: 1.25 !important; }
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content h3 { font-size: 18px !important; line-height: 1.3 !important; }
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content > :first-child { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content :is(h2, h3)::after { display: none !important; }
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content a { color: var(--plum) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content strong,
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content b { color: var(--ink-strong) !important; }
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content ul { padding-left: 20px !important; }
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content li::marker { color: var(--plum); }
@media (min-width: 768px) {
  :is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content { padding: 44px 52px 48px !important; }
}

/* ---- FAQ: numbered white question cards on the dark background ---- */
.page-id-52 article.page { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.page-id-52 .cl-content { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; max-width: 760px; margin: 0 auto; }
/* ---- How ordering works: white step cards ---- */
.cl-intent .container { background: none !important; border: 0 !important; box-shadow: none !important; padding-left: 16px !important; padding-right: 16px !important; }
.cl-intent__step {
  background: var(--paper) !important; border: 1px solid rgba(214, 196, 245, 0.55) !important; border-radius: 16px !important;
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.85) !important;
}
.cl-intent__step, .cl-intent__step * { text-shadow: none !important; }
.cl-intent__text { color: var(--ink-soft) !important; }
.cl-intent__text strong { color: var(--ink-strong) !important; font-family: var(--font-display) !important; font-weight: 600 !important; }
.cl-intent__num { background: linear-gradient(180deg, #A970EC, #7B3FB2) !important; color: #fff !important; box-shadow: 0 6px 14px -6px rgba(123, 63, 178, 0.9) !important; }
/* FAQ question words sit in an inner span that kept the dark theme's light colour */
body.page-id-52 details.cl-faq > summary *:not(svg):not(path) { color: #FFFFFF !important; text-shadow: none !important; opacity: 1 !important; -webkit-text-fill-color: #FFFFFF !important; }
body.page-id-52 details.cl-faq > summary { -webkit-text-fill-color: #FFFFFF; }
body.page-id-52 details.cl-faq > summary::before { -webkit-text-fill-color: #D6BEFF !important; color: #D6BEFF !important; }
html body.page-id-52 .cl-content details.cl-faq > :not(summary),
html body.page-id-52 .cl-content details.cl-faq > :not(summary) * { color: #E2DCEC !important; -webkit-text-fill-color: #E2DCEC !important; }
html body.page-id-52 .cl-content details.cl-faq > :not(summary) a { color: #D6BEFF !important; -webkit-text-fill-color: #D6BEFF !important; }

/* one box, not two: these pages keep their own inner cards */
:is(.page-id-58, .page-id-192, .page-id-167, .page-id-57) article.page {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important;
}
:is(.page-id-58, .page-id-192, .page-id-167, .page-id-57) article.page > h1 { color: #fff !important; text-align: center; }
:is(.page-id-58, .page-id-192, .page-id-167) article.page > .cl-content { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; }
/* How To Save (own template): one layer — no outer box; price cards are paper */
.page-id-167 main article { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; }
html body.page-id-167 .cl-save__card {
  background: var(--paper) !important; border: 1px solid rgba(214, 196, 245, 0.55) !important; border-radius: 16px !important;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.85), 0 0 30px -10px rgba(155, 93, 229, 0.55) !important;
}
html body.page-id-167 .cl-save__card * { color: #E2DCEC !important; -webkit-text-fill-color: #E2DCEC !important; text-shadow: none !important; border-color: #ECE6F5 !important; }
html body.page-id-167 .cl-save__card :is(h2, h3, h4, strong, b, th) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
html body.page-id-167 .cl-save__card :is(em, .cl-save__pct, [class*="accent"], [class*="per"] span) { color: #D6BEFF !important; -webkit-text-fill-color: #D6BEFF !important; }

/* buttons keep the brand colour on the lavender cards (Noah): sold-out and
   "Take a look" were grey/white — now purple outline, purple text */
html body ul.products li.product.product .cl-atc__btn:disabled,
html body ul.products li.product.product .cl-atc__btn[aria-disabled="true"],
html body ul.products li.product.product .cl-atc__btn.is-oos,
html body ul.products li.product.product a.button:not(.add_to_cart_button),
html body ul.products li.product.product .button.disabled,
html body ul.products li.product.product .cl-oos,
.cl-feat__card.is-soon .cl-feat__btn {
  background: rgba(123, 63, 178, 0.10) !important;
  color: #D6BEFF !important; -webkit-text-fill-color: #D6BEFF !important;
  border: 1.5px solid rgba(123, 63, 178, 0.55) !important;
  box-shadow: none !important; opacity: 1 !important;
}
/* separators inside paper a touch deeper so they read on lavender */
html body.page-id-52 details.cl-faq[open] > summary { border-bottom-color: rgba(206, 172, 255, 0.16) !important; }
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content :is(h2, h3) { border-top-color: rgba(206, 172, 255, 0.16) !important; }
/* frosted paper: blur what's behind so text stays crisp */
.cl-feat__link,
html body ul.products li.product.product,
.cl-intent__step,
html body.page-id-52 details.cl-faq,
html body.page-id-167 .cl-save__card,
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content {
  -webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
  backdrop-filter: blur(14px) saturate(1.25) !important;
}
/* more see-through → body text on cards one step darker to keep contrast */
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content :is(p, li) { color: #E2DCEC !important; }
html body.page-id-52 .cl-content details.cl-faq > :not(summary),
html body.page-id-52 .cl-content details.cl-faq > :not(summary) * { color: #E2DCEC !important; -webkit-text-fill-color: #E2DCEC !important; }
.cl-feat__was, html body ul.products li.product.product .price del, html body ul.products li.product.product .price del .amount, html body ul.products li.product.product .price del .woocommerce-Price-currencySymbol { color: #B9AFCB !important; }

/* ============================================================
   GLASS CARDS (2026-09-21): lavender glass, not grey paper.
   Bright top edge (light on glass), soft purple rim, deep blur.
   ============================================================ */
.cl-feat__link,
html body ul.products li.product.product,
.cl-intent__step,
html body.page-id-52 details.cl-faq,
html body.page-id-167 .cl-save__card,
:is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content {
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  border: 1px solid rgba(206, 172, 255, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 40px -20px rgba(0, 0, 0, 0.95),
    0 0 38px -10px rgba(155, 93, 229, 0.75) !important;
}
html body.page-id-52 details.cl-faq[open] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 40px -20px rgba(0, 0, 0, 0.9),
    0 0 0 2px rgba(169, 112, 236, 0.6),
    0 0 34px -10px rgba(155, 93, 229, 0.8) !important;
}
/* one badge style everywhere: the grid's "SALE!" matches the featured pills */
html body ul.products li.product.product .onsale {
  background: #6C34A0 !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 14px -6px rgba(108, 52, 160, 0.9) !important;
  font: 800 10.5px/1 var(--font-display) !important; letter-spacing: 0.04em !important; text-transform: uppercase !important;
  padding: 5px 10px !important; border-radius: 999px !important; min-height: 0 !important; min-width: 0 !important; line-height: 1 !important;
}
.cl-feat__tag--soon { background: rgba(255, 255, 255, 0.7); color: #E2DCEC; }
/* size pills and sold-out buttons read as glass too */
.cl-feat__sizes { background: rgba(108, 52, 160, 0.13); }
/* on purple glass: sold-out / "Take a look" and struck prices need more contrast */
html body ul.products li.product.product .cl-atc__btn:disabled,
html body ul.products li.product.product .cl-atc__btn[aria-disabled="true"],
html body ul.products li.product.product a.button:not(.add_to_cart_button),
html body ul.products li.product.product .button.disabled,
html body ul.products li.product.product .cl-oos,
.cl-feat__card.is-soon .cl-feat__btn {
  background: rgba(169, 112, 236, 0.12) !important;
  color: #EBDDFF !important; -webkit-text-fill-color: #EBDDFF !important;
  border: 1.5px solid rgba(206, 172, 255, 0.65) !important;
}
.cl-feat__was, html body ul.products li.product.product .price del, html body ul.products li.product.product .price del .amount, html body ul.products li.product.product .price del .woocommerce-Price-currencySymbol { color: #B9AFCB !important; }
/* thinner glass → secondary text darker so it still reads */
.cl-intent__text { color: #E2DCEC !important; }
.cl-feat__sizes { color: #D6BEFF !important; background: rgba(206, 172, 255, 0.16) !important; }
.cl-feat__now small { color: #E2DCEC !important; }
html body ul.products li.product.product .price,
html body ul.products li.product.product .price ins,
html body ul.products li.product.product .price .amount { color: #D6BEFF !important; font-weight: 700 !important; }
.cl-feat__was, html body ul.products li.product.product .price del, html body ul.products li.product.product .price del .amount, html body ul.products li.product.product .price del .woocommerce-Price-currencySymbol { color: #B9AFCB !important; }
.cl-feat__now { color: #D6BEFF !important; }

/* PRICES on glass (Noah: "you can't see it"): heavy, near-black, a faint
   light edge to lift them off the glass. Old price small and struck. */
html body ul.products li.product.product .price,
html body ul.products li.product.product .price ins,
html body ul.products li.product.product .price .amount,
html body ul.products li.product.product .price .woocommerce-Price-currencySymbol,
html body ul.products li.product.product .price > span[aria-hidden] {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  font-family: var(--font-display) !important; font-weight: 800 !important;
  text-shadow: 0 0 18px rgba(169, 112, 236, 0.35) !important;
}
html body ul.products li.product.product .price { font-size: 16.5px !important; letter-spacing: -0.01em !important; }
html body ul.products li.product.product .price ins { text-decoration: none !important; }
html body ul.products li.product.product .price del,
html body ul.products li.product.product .price del .amount,
html body ul.products li.product.product .price del .woocommerce-Price-currencySymbol {
  color: #B9AFCB !important; -webkit-text-fill-color: #B9AFCB !important;
  font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 13px !important;
  text-shadow: none !important; opacity: 1 !important;
}
.cl-feat__now {
  color: #FFFFFF !important; font-weight: 800 !important; font-size: 24px !important;
  text-shadow: 0 0 18px rgba(169, 112, 236, 0.35) !important;
}
.cl-feat__now small { color: #FFFFFF !important; font-weight: 700 !important; font-size: 12.5px !important; }
.cl-feat__was { color: #B9AFCB !important; font-weight: 600 !important; font-size: 13.5px !important; opacity: 1 !important; }

/* ---- vials: a violet glow behind each bottle (dark cards, dark vial —
   the glow is what separates them) ---- */
.cl-feat__img,
html body ul.products li.product.product .cl-cardimg {
  background:
    radial-gradient(ellipse 58% 52% at 50% 48%, rgba(169, 112, 236, 0.55) 0%, rgba(155, 93, 229, 0.22) 45%, rgba(155, 93, 229, 0) 75%),
    radial-gradient(ellipse 70% 30% at 50% 96%, rgba(206, 172, 255, 0.35) 0%, rgba(206, 172, 255, 0) 70%) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: visible;
}
.cl-feat__img { height: 150px !important; margin: 0 0 12px !important; padding: 12px 0 10px; box-sizing: border-box; align-items: center !important; }
.cl-feat__img img { max-height: 128px !important; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.6)) !important; }
.cl-feat__tag { top: 18px; left: 18px; }
html body ul.products li.product.product .cl-cardimg { display: block; margin-bottom: 10px !important; }
html body ul.products li.product.product img { filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.6)) !important; }
@media (min-width: 768px) { .cl-feat__img { height: 190px !important; } .cl-feat__img img { max-height: 166px !important; } }

/* ---- buttons pop against the glass: deep plum, bright violet rim + glow ----
   measured: the old light purple was 1.04–1.25 against the card. */
.cl-feat__btn,
html body ul.products li.product.product .cl-atc__btn:not([disabled]):not([aria-disabled="true"]) {
  background: linear-gradient(180deg, #A970EC 0%, #7B3FB2 100%) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  border: 1px solid rgba(206, 172, 255, 0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px -10px rgba(30, 6, 70, 0.95), 0 0 18px -3px rgba(169, 112, 236, 0.85) !important;
  font-weight: 700 !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) !important;
}
.cl-feat__btn:hover,
html body ul.products li.product.product .cl-atc__btn:not([disabled]):hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 26px -10px rgba(30, 6, 70, 0.95), 0 0 26px 0 rgba(169, 112, 236, 0.95) !important;
}

/* ============================================================
   CONTRAST FIXES — measured by scanning every page's text against
   the real pixels behind it (standard: 4.5:1, large text 3:1)
   ============================================================ */
/* purple buttons: deeper so white text passes, glow kept for pop */
.cl-btn:not(.cl-btn--secondary):not(.cl-btn--ghost),
.cl-feat__btn,
.cl-hero2__shop,
.cl-drawer__cta,
html body ul.products li.product.product .cl-atc__btn:not([disabled]):not([aria-disabled="true"]),
.woocommerce a.button.alt, .woocommerce button.button.alt {
  background: linear-gradient(180deg, #8A4FD8 0%, #5E26A0 100%) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
/* Out of stock tag on dark cards */
.cl-feat__tag--soon { background: rgba(255, 255, 255, 0.14) !important; color: #F1EBFA !important; border: 1px solid rgba(255, 255, 255, 0.25); }
/* FAQ "Call or text us": deeper green so white text passes */
.cl-faqhelp__btn { background: linear-gradient(180deg, #1E9E60 0%, #137A47 100%) !important; color: #fff !important; }
/* small grey helper text / breadcrumbs */
.woocommerce-breadcrumb, .woocommerce-breadcrumb a, .cl-coa__count, .page-id-57 .cl-content p { color: #C9C0D8 !important; }
.page-id-57 p, .page-id-57 small { color: #C9C0D8 !important; }
.cl-chero__explore { background: linear-gradient(180deg, #8A4FD8 0%, #5E26A0 100%) !important; color: #fff !important; }
.cl-faqhelp__btn { background: linear-gradient(180deg, #178A52 0%, #0E6A3A 100%) !important; }
.product_meta a, .posted_in a, .tagged_as a, .single-product .cl-content a[rel="tag"], .single-product a[rel="tag"] { color: #DCCBFF !important; }

/* ============================================================
   CAPS SYSTEM (Noah loves the small spaced "CORE LABS" label).
   Measured off the reference: titles + product names are spaced
   CAPITALS; sentences stay normal case. Prices: Poppins, never mono.
   ============================================================ */
:root { --font-mono: var(--font-display); }
.price, .amount, .woocommerce-Price-amount, .cl-drawer .amount, .cl-paytotal, .cl-pay__v--amount, [class*="price"] { font-family: var(--font-display) !important; }

/* section + page titles: spaced caps */
.cl-section__title,
.cl-feat__title,
.cl-quality__head h2,
.cl-contact__title,
.cl-chero__title,
.cl-shop-header__title,
main article > h1,
main .container > article > h1 {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 6.6vw, 30px) !important;
  line-height: 1.15 !important;
  text-wrap: balance;
}
.cl-feat__light { font-weight: 400 !important; }
@media (min-width: 768px) {
  .cl-section__title, .cl-feat__title, .cl-quality__head h2, .cl-contact__title, .cl-chero__title, .cl-shop-header__title,
  main article > h1, main .container > article > h1 { font-size: 38px !important; letter-spacing: 0.08em !important; }
}
/* the label style he likes, everywhere a small label sits above a title */
.cl-eyebrow, .cl-chero__eyebrow, .cl-feat__eyebrow {
  font-family: var(--font-display) !important; font-weight: 600 !important; font-size: 12px !important;
  text-transform: uppercase !important; letter-spacing: 0.24em !important;
}
/* product names: spaced caps */
.cl-feat__name,
html body ul.products li.product.product .woocommerce-loop-product__title,
.cl-qv__name,
.single-product .product_title {
  text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 700 !important;
}
/* buttons: spaced caps, a touch smaller so they fit */
.cl-feat__btn,
html body ul.products li.product.product .cl-atc__btn,
.cl-hero2__shop, .cl-hero2__aside, .cl-chero__explore, .cl-drawer__cta, .cl-btn {
  text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 700 !important;
}
.cl-feat__btn, html body ul.products li.product.product .cl-atc__btn { font-size: 13px !important; }

/* ---- Refer a friend: slide-up sheet ---- */
.cl-refsheet { position: fixed; inset: 0; z-index: 10050; }
.cl-refsheet[hidden] { display: none !important; }
.cl-refsheet__scrim { position: absolute; inset: 0; background: rgba(5, 4, 8, 0.6); opacity: 0; transition: opacity .25s ease; }
.cl-refsheet.is-open .cl-refsheet__scrim { opacity: 1; }
.cl-refsheet__card {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; max-height: 90svh; overflow-y: auto;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(36, 24, 56, 0.97) 0%, rgba(20, 14, 32, 0.98) 100%);
  border: 1px solid rgba(206, 172, 255, 0.42); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.7), 0 0 40px -12px rgba(155, 93, 229, 0.7);
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .9, .3, 1);
}
.cl-refsheet.is-open .cl-refsheet__card { transform: none; }
.cl-refsheet__bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; margin-bottom: 10px; }
.cl-refsheet__bar h2 { margin: 0; text-align: center; color: #fff; font: 700 17px/1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.cl-refsheet__x { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(155, 93, 229, 0.30); border-radius: 12px; background: rgba(155, 93, 229, 0.08); color: #E6E2EB; cursor: pointer; }
.cl-refsheet__loading { text-align: center; color: #C9C0D8; padding: 30px 0; }
.cl-refsheet .cl-ref__card { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
body.cl-ref-open .cl-ask__tab, body.cl-ref-open .cl-calltab, body.cl-ref-open .cl-cart-fab, body.cl-ref-open .cl-sticky-cart { visibility: hidden; }
@media (min-width: 768px) { .cl-refsheet__card { bottom: 50%; transform: translateY(calc(50% + 40px)); opacity: 0; border-radius: 22px; border-bottom: 1px solid rgba(206, 172, 255, 0.42); transition: transform .3s ease, opacity .25s ease; } .cl-refsheet.is-open .cl-refsheet__card { transform: translateY(50%); opacity: 1; } }

/* ============================================================
   ONE TYPE SCALE, SITE-WIDE (2026-09-21) — from a scan of every page.
   Each role has exactly one look. (prefix lifts it over older rules)
     PAGE TITLE    Poppins 700 CAPS .06em  28px (38 desktop)
     SECTION TITLE Poppins 700 CAPS .06em  24px (32 desktop)
     SUB-HEADING   Poppins 600 normal       20px  (inside reading cards)
     CARD TITLE    Poppins 600 normal       17px
     PRODUCT NAME  Poppins 700 CAPS .08em  16px (featured/carousel 18–22)
     LABEL         Poppins 600 CAPS .2em   12px
     BODY          DM Sans 400 16px / 1.6 ; SMALL DM Sans 400 14px
     BUTTON        Poppins 700 CAPS .08em  15px (13px on cards)
   ============================================================ */
/* PAGE TITLE */
html body:not(.cl-x) main h1:not(.cl-hero2__title),
html body:not(.cl-x) .cl-chero__title,
html body:not(.cl-x) .product_title {
  font-family: var(--font-display) !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: 0.06em !important; font-size: clamp(24px, 7.4vw, 28px) !important; line-height: 1.15 !important;
  text-align: center !important; color: #fff !important;
}
/* SECTION TITLE */
html body:not(.cl-x) :is(.cl-section__title, .cl-feat__title, .cl-quality__head h2, .cl-contact__title, .cl-ref__h, .cl-save__title),
html body:not(.cl-x).page-id-58 .cl-content h2,
html body:not(.cl-x).woocommerce-account main h2 {
  font-family: var(--font-display) !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: 0.06em !important; font-size: clamp(20px, 6.2vw, 24px) !important; line-height: 1.2 !important;
  text-align: center !important; color: #fff !important; text-wrap: balance;
}
html body:not(.cl-x) .cl-feat__light { font-weight: 400 !important; }
/* SUB-HEADING (inside reading cards) */
html body:not(.cl-x):is(.page-id-50, .page-id-51, .page-id-53, .page-id-54, .page-id-55, .page-id-56, .page-id-137, .page-id-10, .page-id-3) .cl-content h2,
html body:not(.cl-x).page-id-57 main h2,
html body:not(.cl-x).single-product .woocommerce-tabs h2 {
  font-family: var(--font-display) !important; font-weight: 600 !important; text-transform: none !important;
  letter-spacing: -0.01em !important; font-size: 20px !important; line-height: 1.3 !important;
}
/* CARD TITLE */
html body:not(.cl-x) :is(.cl-pillar h3, .cl-intent__text strong, .woocommerce-tabs h3, .cl-content h3, .cl-ref__steps strong) {
  font-family: var(--font-display) !important; font-weight: 600 !important; text-transform: none !important;
  letter-spacing: 0 !important; font-size: 17px !important; line-height: 1.35 !important;
}
/* PRODUCT NAME */
html body:not(.cl-x) :is(ul.products li.product .woocommerce-loop-product__title, .cl-save__name, .cl-feat__name) {
  font-family: var(--font-display) !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: 0.08em !important; font-size: 16px !important; line-height: 1.25 !important;
}
html body:not(.cl-x) .cl-feat__name { font-size: 18px !important; }
html body:not(.cl-x) .cl-picks__namebtn-title { font-family: var(--font-display) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-size: 22px !important; }
/* LABEL (small spaced caps above titles, topic labels, card eyebrows) */
html body:not(.cl-x) :is(.cl-eyebrow, .cl-chero__eyebrow, .cl-feat__eyebrow, .cl-ref__eyebrow, .cl-contact__label, .cl-hero2__trust li, .cl-chero__trust li),
html body:not(.cl-x).page-id-52 .cl-content h2 {
  font-family: var(--font-display) !important; font-weight: 600 !important; text-transform: uppercase !important;
  letter-spacing: 0.2em !important; font-size: 12px !important; line-height: 1.4 !important;
}
/* BODY + SMALL */
html body:not(.cl-x) main :is(p, li):not([class*="__btn"]):not([class*="tag"]):not(.price):not([class*="eyebrow"]):not([class*="label"]):not(.cl-hero2__trust li):not(.cl-chero__trust li):not([style*="font-family"]) {
  font-family: var(--font-body) !important;
}
html body:not(.cl-x) main :is(.cl-content p, .cl-quality__lede, .cl-pillar p, .cl-contact p, .cl-chero__lede, .woocommerce-product-details__short-description p) {
  font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important;
}
html body:not(.cl-x) main :is(.cl-intent__text, .cl-save__note, .cl-faqhelp__sub, .woocommerce-result-count, .cl-ref__steps li) {
  font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 400 !important;
}
/* BUTTON */
html body:not(.cl-x) :is(.cl-btn, .button, button.single_add_to_cart_button, .woocommerce-form-login__submit, .cl-faqhelp__btn, .cl-hero2__shop, .cl-hero2__aside, .cl-chero__explore, .cl-feat__btn, .cl-atc__btn, .cl-drawer__cta) {
  font-family: var(--font-display) !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: 0.08em !important; font-size: 15px !important;
}
html body:not(.cl-x) :is(.cl-feat__btn, ul.products li.product .cl-atc__btn) { font-size: 13px !important; }
/* strength choices are buttons too */
html body:not(.cl-x).single-product :is(.variations button, .cl-size, [class*="swatch"], .cl-strength button, form.cart button:not(.single_add_to_cart_button)) { font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: 0.06em !important; }
/* Refer sheet: title is the label, card eyebrow would repeat it */
#cl-refsheet .cl-ref__eyebrow { display: none !important; }
.cl-refsheet__bar h2 { font-family: var(--font-display) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-size: 16px !important; }
@media (min-width: 768px) {
  html body:not(.cl-x) main h1:not(.cl-hero2__title), html body:not(.cl-x) .cl-chero__title, html body:not(.cl-x) .single-product .product_title { font-size: 38px !important; letter-spacing: 0.08em !important; }
  html body:not(.cl-x) :is(.cl-section__title, .cl-feat__title, .cl-quality__head h2, .cl-contact__title, .cl-ref__h, .cl-save__title) { font-size: 32px !important; }
}

/* labels: lift over the body rule; trust lines, Core Picks pill and form labels join */
html body:not(.cl-x) main :is(.cl-eyebrow, .cl-chero__eyebrow, .cl-feat__eyebrow, .cl-ref__eyebrow, .cl-picks__eyebrow, [class*="__eyebrow"]),
html body:not(.cl-x) :is(.cl-picks__eyebrow, .cl-picks__label, .cl-picks [class*="pill"]) {
  font-family: var(--font-display) !important; font-weight: 600 !important; text-transform: uppercase !important;
  letter-spacing: 0.2em !important; font-size: 12px !important;
}
html body:not(.cl-x) main :is(.cl-hero2__trust li, .cl-chero__trust li, [class*="__trust"] li, [class*="__trust"] span) {
  font-family: var(--font-display) !important; font-weight: 600 !important; text-transform: uppercase !important;
  /* 11px until 2026-09-24. This selector out-ranks every later floor rule, so
     raising it here is the only place the hero trust line actually changes. */
  letter-spacing: 0.14em !important; font-size: 12px !important;
}
html body:not(.cl-x) main form label, html body:not(.cl-x) #cl-refsheet form label {
  font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: 0.14em !important; font-size: 11.5px !important;
}
html body:not(.cl-x) h2.cl-picks__name { font-family: var(--font-display) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; }

html body:not(.cl-x) main :is(.cl-trustbar__text, .cl-trustbar__text strong) {
  font-family: var(--font-display) !important; font-weight: 600 !important; text-transform: uppercase !important;
  letter-spacing: 0.14em !important; font-size: 11px !important;
}
html body:not(.cl-x).page-id-57 main p[style] { font-family: var(--font-display) !important; letter-spacing: 0.2em !important; font-size: 12px !important; }
/* "Amount copied" notice (Cash App) */
.cl-paytoast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 10100;
  transform: translate(-50%, 20px); opacity: 0; transition: transform .25s ease, opacity .25s ease;
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px;
  background: #1E9E60; color: #fff; font: 700 14px/1.3 var(--font-display); text-align: center;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8), 0 0 24px -6px rgba(61, 214, 140, 0.7);
}
.cl-paytoast.is-in { transform: translate(-50%, 0); opacity: 1; }
/* product-page Add to cart: keep the shine sweep inside the button */
button.single_add_to_cart_button { overflow: hidden !important; position: relative; isolation: isolate; }
/* featured tags sit above the vial image (was hidden behind it: "OUT OF STO") */
.cl-feat__tag { z-index: 3 !important; }
.cl-feat__img { position: relative; z-index: 1; }
/* desktop/tablet: a short last row of products is centred, not stuck left */
@media (min-width: 768px) {
  html body ul.products:is(.columns-3, .columns-4) { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 20px !important; }
  html body ul.products:is(.columns-3, .columns-4) > li.product.product { flex: 0 0 calc((100% - 60px) / 4) !important; width: calc((100% - 60px) / 4) !important; margin: 0 !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html body ul.products:is(.columns-3, .columns-4) > li.product.product { flex-basis: calc((100% - 40px) / 3) !important; width: calc((100% - 40px) / 3) !important; }
}

/* cart: shipping + estimated total shown up front */
.cl-drawer__row--ship, .cl-drawer__row--est { display: flex; justify-content: space-between; align-items: baseline; }
.cl-drawer__row--ship span:last-child { font-family: var(--font-display); font-weight: 700; color: #fff; }
.cl-drawer__row--ship.is-free span:last-child { color: #3DD68C; letter-spacing: 0.06em; }
.cl-drawer__row--est { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.10); }
.cl-drawer__row--est span { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 17px; }

/* ---- every inner page: [← Home] [Shop products →] under the header ---- */
/* The catalog hero's haze (.cl-chero__haze, absolute, starts at y=269) was
   painting over the bottom ~12px of these buttons — measured as a hard cut
   from rgb(134,87,190) to rgb(39,27,57) at 73% down the SHOP button, which
   read as a black bar lying across it (Noah, 2026-09-27). Lifting the row
   above the haze rather than moving the haze, which belongs where it is. */
.cl-pagenav { padding: 14px 0 4px; position: relative; z-index: 1; }
.cl-pagenav__row { display: grid !important; grid-template-columns: 1fr 1.5fr; gap: 10px; max-width: 760px; margin: 0 auto; }
.cl-pagenav a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 14px;
  border-radius: 14px; text-decoration: none !important; box-sizing: border-box;
  font: 700 14px/1 var(--font-display) !important; letter-spacing: 0.08em; text-transform: uppercase;
}
.cl-pagenav__home { color: #EDE6F7 !important; background: rgba(36, 24, 56, 0.85); border: 1px solid rgba(206, 172, 255, 0.42); }
.cl-pagenav__home:hover { border-color: rgba(206, 172, 255, 0.8); }
.cl-pagenav__shop {
  color: #fff !important; background: linear-gradient(180deg, #8A4FD8 0%, #5E26A0 100%);
  border: 1px solid rgba(206, 172, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px -10px rgba(30, 6, 70, 0.95), 0 0 18px -3px rgba(169, 112, 236, 0.85);
  position: relative; overflow: hidden;
}
.cl-pagenav__shop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .4) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 130% 0; animation: cl-fab-glare 6s ease-in-out infinite; pointer-events: none; }
@media (min-width: 768px) { .cl-pagenav { padding-top: 20px; } .cl-pagenav__row { grid-template-columns: 240px 240px; justify-content: center; } }
/* products at the bottom of inner pages */
.cl-feat--page { padding-top: 34px; margin-top: 10px; border-top: 1px solid rgba(206, 172, 255, 0.14); }
.cl-feat__allwrap { text-align: center; margin: 22px 0 0; }
.cl-feat__all { display: inline-flex !important; align-items: center; gap: 8px; min-height: 50px; padding: 0 28px !important; }

/* ---- Home / Shop always in reach while scrolling ----
   Measured 2026-09-22: halves were 101 vs 98px, one plain text, one filled —
   now two identical 108x42 buttons in a slim frame. */
/* PHONES: floating pill, bottom centre (clear of the cart button, above the
   Secure checkout bar when there is one) */
.cl-navpill { display: none; }
@media (max-width: 767px) {
  .cl-navpill {
    display: grid; grid-template-columns: 108px 108px; gap: 4px;
    position: fixed; left: 50%; z-index: 9990;
    bottom: calc(var(--cl-stickybar, 0px) + 14px + env(safe-area-inset-bottom));
    transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
    transition: transform .28s cubic-bezier(.2, .9, .3, 1), opacity .2s ease;
    padding: 4px; border-radius: 999px;
    background: rgba(18, 12, 28, 0.94); border: 1px solid rgba(206, 172, 255, 0.28);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.95), 0 0 20px -8px rgba(155, 93, 229, 0.7);
  }
  .cl-navpill.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
  .cl-navpill a {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 108px; height: 42px; box-sizing: border-box; padding: 0; border-radius: 999px;
    font: 700 12px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none !important;
  }
  .cl-navpill a svg { flex: 0 0 15px; width: 15px; height: 15px; }
  .cl-navpill__home { color: #EDE6F7 !important; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(206, 172, 255, 0.22); }
  .cl-navpill__shop { color: #fff !important; background: linear-gradient(180deg, #8A4FD8 0%, #5E26A0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(206, 172, 255, 0.45); }
  /* out of the way whenever a pop-up, menu or cart is open */
  body:is(.cl-menu-open, .cl-drawer-open, .cl-co-open, .cl-qv-open, .cl-acct-open, .cl-ref-open, .cl-pay-open) .cl-navpill { opacity: 0 !important; pointer-events: none !important; }
  /* top bar on phones: two equal buttons */
  .cl-pagenav__row { grid-template-columns: 1fr 1fr !important; }
}
/* DESKTOP: the bar sticks just under the header */
@media (min-width: 768px) {
  .cl-pagenav {
    position: sticky; top: var(--cl-head-h, 154px); z-index: 50;
    padding: 12px 0 !important;
    background: linear-gradient(180deg, rgba(10, 8, 16, 0.88), rgba(10, 8, 16, 0.72));
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(206, 172, 255, 0.12);
  }
}

/* ============================================================
   CHECKOUT ERRORS FLOAT (2026-09-22) — WooCommerce put the error group
   into the 2-column form grid and everything shifted. Now it floats,
   takes no space, fades on its own. Phone and desktop differ.
   ============================================================ */
form.checkout > .woocommerce-NoticeGroup,
form.checkout > .woocommerce-error,
.woocommerce-NoticeGroup-checkout {
  position: fixed !important; z-index: 10090 !important; grid-column: auto !important;
  margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  transition: opacity .35s ease, transform .35s ease;
  animation: cl-notice-in .3s cubic-bezier(.2, .9, .3, 1);
}
.woocommerce-NoticeGroup-checkout.is-leaving { opacity: 0; transform: translateY(-12px); pointer-events: none; }
@keyframes cl-notice-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.woocommerce-NoticeGroup-checkout .woocommerce-error {
  margin: 0 !important; padding: 12px 14px 12px 44px !important; position: relative;
  list-style: none !important; text-align: left !important;
  background: rgba(40, 12, 20, 0.96) !important; border: 1px solid rgba(255, 110, 110, 0.55) !important; border-radius: 14px !important;
  border-top: 1px solid rgba(255, 110, 110, 0.55) !important;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.95), 0 0 24px -8px rgba(255, 80, 80, 0.6) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer;
}
.woocommerce-NoticeGroup-checkout .woocommerce-error::before {
  content: "!" !important; position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 20px; height: 20px; border-radius: 50%; display: grid !important; place-items: center;
  background: #FF6B6B; color: #1A0A0E !important; font: 800 13px/20px var(--font-display) !important; text-align: center; margin: 0 !important;
}
.woocommerce-NoticeGroup-checkout .woocommerce-error li {
  margin: 0 !important; padding: 0 !important; color: #FFE4E4 !important; -webkit-text-fill-color: #FFE4E4 !important;
  font: 600 14px/1.4 var(--font-body) !important; text-align: left !important;
}
.woocommerce-NoticeGroup-checkout .woocommerce-error li + li { margin-top: 4px !important; }
/* PHONES: pinned near the top, full width with 12px margins */
@media (max-width: 767px) {
  .woocommerce-NoticeGroup-checkout { top: 10px !important; left: 12px !important; right: 12px !important; width: auto !important; }
}
/* DESKTOP: centred floating card */
@media (min-width: 768px) {
  .woocommerce-NoticeGroup-checkout { top: 16px !important; left: 50% !important; width: 520px !important; max-width: calc(100vw - 48px); transform: translateX(-50%); }
  .woocommerce-NoticeGroup-checkout.is-leaving { transform: translate(-50%, -12px); }
  @keyframes cl-notice-in-d { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translateX(-50%); } }
  .woocommerce-NoticeGroup-checkout { animation-name: cl-notice-in-d; }
  .woocommerce-NoticeGroup-checkout .woocommerce-error li { font-size: 15px !important; }
}
/* the box that needs ticking glows for a moment */
.cl-attn { position: relative; border-radius: 12px; animation: cl-attn 2.4s ease-out; }
@keyframes cl-attn {
  0%, 30% { box-shadow: 0 0 0 2px #FF8A8A, 0 0 22px 2px rgba(255, 90, 90, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(255, 138, 138, 0), 0 0 0 0 rgba(255, 90, 90, 0); }
}

/* measured: the group was 373px (phone) / 1178px (desktop) wide and 372px tall —
   every missing field was listed (invisibly) under the top message. Show the
   top message only; the fields themselves are highlighted in the form. */
html body form.checkout > .woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout { height: auto !important; min-height: 0 !important; }
html body .woocommerce-NoticeGroup-checkout > div { margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; }
html body .woocommerce-NoticeGroup-checkout ul.woocommerce-error { height: auto !important; min-height: 0 !important; width: auto !important; }
/* Showing only the first line hid WooCommerce's actual explanation — a customer
   got "There are some issues with the items in your cart" with no idea that the
   real line said "we do not have enough R3TA - 20MG in stock" (Noah,
   2026-09-22: "if there's an issue with my cart, tell me what it is"). */
html body .woocommerce-NoticeGroup-checkout ul.woocommerce-error > li { display: list-item !important; }
html body .woocommerce-NoticeGroup-checkout ul.woocommerce-error { max-height: 40vh; overflow-y: auto; }
@media (max-width: 767px) {
  html body form.checkout > .woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; }
}
@media (min-width: 768px) {
  html body form.checkout > .woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout { left: 50% !important; right: auto !important; width: 520px !important; max-width: calc(100vw - 48px) !important; }
}
html body .woocommerce-NoticeGroup-checkout ul.woocommerce-error::before {
  content: "!" !important; position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 20px !important; height: 20px !important; border-radius: 50% !important; display: grid !important; place-items: center !important;
  background: #FF6B6B !important; color: #1A0A0E !important; -webkit-text-fill-color: #1A0A0E !important;
  font: 800 13px/20px var(--font-display) !important; text-align: center !important; margin: 0 !important; opacity: 1 !important; border: 0 !important;
}
/* the tabs' own "Need help?" bubble never doubles up with the help sheet */
body:has(.cl-needhelp.is-open) .cl-tabhint { display: none !important; }
.cl-needhelp__bar h3 { font: 700 16px/1.2 var(--font-display) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }
.cl-needhelp__lede b { color: #fff; }
/* checkout error badge: the old notice rules hid the "!" (only a faint dot showed) —
   draw it on the message line itself */
html body .woocommerce-NoticeGroup-checkout ul.woocommerce-error::before { content: none !important; display: none !important; }
html body .woocommerce-NoticeGroup-checkout ul.woocommerce-error > li:first-child::before {
  content: "!" !important; position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 20px !important; height: 20px !important; border-radius: 50% !important; display: block !important;
  background: #FF6B6B !important; color: #1A0A0E !important; -webkit-text-fill-color: #1A0A0E !important;
  font: 800 13px/20px var(--font-display) !important; text-align: center !important; opacity: 1 !important; visibility: visible !important;
}
/* featured cards: tags sat on the vial caps — the vial gets headroom under the tag */
.cl-feat__img { padding-top: 30px !important; height: 168px !important; }
@media (min-width: 768px) { .cl-feat__img { height: 206px !important; } }
/* product grid: one-line buttons, and every button on the same line across a row */
html body ul.products li.product.product { display: flex !important; flex-direction: column !important; }
html body ul.products li.product.product > a.woocommerce-LoopProduct-link { flex: 1 1 auto; }
html body ul.products li.product.product .cl-atc,
html body ul.products li.product.product > form,
html body ul.products li.product.product > .cl-atc__btn,
html body ul.products li.product.product > a.button { margin-top: auto !important; }
html body ul.products li.product.product .cl-atc__btn { white-space: nowrap !important; letter-spacing: 0.05em !important; font-size: 12px !important; padding-left: 10px !important; padding-right: 10px !important; }

/* card logos on the payment row (CardsShield) — https-fixed in inc/card-icons.php */
.cl-cardicons { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.cl-cardicons img.mecom-stripe-payment-icon {
  float: none !important; height: 22px !important; max-height: 22px !important; width: auto !important;
  border-radius: 4px !important; padding: 0 !important; margin: 0 !important; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
@media (max-width: 767px) { .cl-cardicons img.mecom-stripe-payment-icon { height: 19px !important; max-height: 19px !important; } }
/* a real card gateway is live: hide the "coming soon" placeholder option */
body.cl-has-card-gateway .cl-cardask { display: none !important; }
/* the card row: name left, logos right, same height as the other methods */
li.wc_payment_method.payment_method_mecom_stripe > label { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- Card by Stripe row: same shape as Zelle / Venmo / Cash App / Bitcoin ---- */
/* brand tile on the left — same system as the other methods (row was empty) */
.payment_method_mecom_stripe label::before { --cl-pay-bg: linear-gradient(180deg, #6C6CF0 0%, #4A3FD0 100%); --cl-pay-icon: var(--cl-icon-card); }
:root {
  --cl-icon-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2.5'/%3E%3Cpath d='M2.5 10h19M6 14.5h4'/%3E%3C/svg%3E");
}
/* card brand logos: right side, tidy row */
li.wc_payment_method.payment_method_mecom_stripe .cl-cardicons { margin-left: auto; gap: 3px; }
/* the plugin's big illustration + blurb: sized down, centred */
li.wc_payment_method.payment_method_mecom_stripe .payment_box img,
li.wc_payment_method.payment_method_mecom_stripe .payment_box svg { max-width: 190px !important; height: auto !important; margin: 0 auto 10px !important; display: block !important; opacity: 0.85; }
li.wc_payment_method.payment_method_mecom_stripe .payment_box p { text-align: center !important; font-size: 13.5px !important; line-height: 1.5 !important; margin: 0 !important; }

/* ---- Place order vs Pay with Stripe: two clearly different buttons ---- */
body.cl-embed #payment #place_order { line-height: 1.15 !important; }
.cl-po__main { display: block; font: 800 16px/1.15 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.cl-po__sub { display: block; margin-top: 3px; font: 600 11.5px/1.2 var(--font-body); letter-spacing: 0.04em; text-transform: none; opacity: 0.92; }
/* Stripe: its own indigo button, not the purple one */
body.cl-embed #payment #place_order.cl-po--stripe {
  background: linear-gradient(180deg, #635BFF 0%, #4438CC 100%) !important;
  border: 1px solid rgba(190, 186, 255, 0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 26px -12px rgba(60, 45, 200, 0.95), 0 0 20px -4px rgba(99, 91, 255, 0.85) !important;
}
/* the real brand logos inside the card box */
.cl-cardstrip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0 12px; }
.cl-cardstrip img { height: 26px; width: auto; border-radius: 4px; background: #fff; padding: 2px 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
@media (max-width: 767px) { .cl-cardstrip img { height: 23px; } }
/* one pay button only: the plugin adds its own below the form — hide it,
   ours runs the research-use check first */
body.cl-embed .payment_method_mecom_stripe ~ * .mecom-stripe-checkout-button,
body.cl-embed #mecom-stripe-checkout-button,
body.cl-embed .mecom-stripe-checkout-button,
body.cl-embed [class*="mecom"][class*="checkout-button"],
body.cl-embed form.checkout > .mecom-stripe-payment-button { display: none !important; }
/* the plugin's generic illustration: our real logo strip replaces it */
li.payment_method_mecom_stripe .payment_box > img,
li.payment_method_mecom_stripe .payment_box > svg,
li.payment_method_mecom_stripe .payment_box p img,
li.payment_method_mecom_stripe .payment_box p svg { display: none !important; }
.cl-cardstrip { gap: 5px; }
.cl-cardstrip img { height: 24px; padding: 2px 3px; }
@media (max-width: 767px) { .cl-cardstrip img { height: 21px; } }
/* Stripe's own submit button inside the card box (class SubmitButton): ours is the one that validates */
body.cl-embed .SubmitButton,
body.cl-embed button.SubmitButton--complete { display: none !important; }
/* every image in the card box except our logo strip */
li.payment_method_mecom_stripe .payment_box img:not(.cl-cardstrip img),
li.payment_method_mecom_stripe .payment_box svg:not(.cl-cardstrip svg) { display: none !important; }
/* logos: even 4 x 2 block */
.cl-cardstrip { display: grid !important; grid-template-columns: repeat(4, 54px); justify-content: center; gap: 6px; }
.cl-cardstrip img { height: 24px !important; width: 54px !important; object-fit: contain; padding: 2px !important; box-sizing: border-box; }
@media (max-width: 767px) { .cl-cardstrip { grid-template-columns: repeat(4, 50px); } .cl-cardstrip img { height: 22px !important; width: 50px !important; } }
/* collapse the empty wrapper the hidden illustration left behind */
li.payment_method_mecom_stripe .payment_box div:has(> img:not(.cl-cardstrip img)),
li.payment_method_mecom_stripe .payment_box p:has(> img:not(.cl-cardstrip img)) { display: none !important; }
li.payment_method_mecom_stripe .payment_box .cl-cardstrip { margin-bottom: 10px; }

/* ---- Official Stripe wordmark (Noah, 2026-09-22: "no tracing, be exact") ----
   Stripe's own wordmark SVG, lifted from the gateway's own assets, drawn in
   currentColor. On the button it sits on Stripe blurple #635BFF, which is the
   colour Stripe's brand guidelines specify. */
.cl-stripemark { display: block; width: auto; height: 100%; }
.cl-stripemark-wrap { display: inline-flex; align-items: center; height: 14px; margin: 0 1px; vertical-align: -2px; }
@media (max-width: 767px) { .cl-stripemark-wrap { height: 13px; } }
/* PAY WITH [stripe] — one centred line, mark set to the cap height of the type */
.cl-po__main { display: flex !important; align-items: center; justify-content: center; gap: 8px; }
.cl-po__main .cl-stripemark { height: 20px; }
@media (max-width: 767px) { .cl-po__main .cl-stripemark { height: 18px; } .cl-po__main { gap: 7px; } }
/* Stripe blurple, flat — their colour, not our gradient */
body.cl-embed #payment #place_order.cl-po--stripe {
  background: #635BFF !important;
  border: 1px solid #8F89FF !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 26px -12px rgba(60, 45, 200, 0.95), 0 0 20px -4px rgba(99, 91, 255, 0.8) !important;
}
body.cl-embed #payment #place_order.cl-po--stripe:hover,
body.cl-embed #payment #place_order.cl-po--stripe:focus { background: #574FE0 !important; }
/* "Card by [stripe]" on one line, and the mark in true white on the blurple */
.cl-pm__name { display: inline-flex; align-items: baseline; gap: 0.3em; white-space: nowrap; }
.cl-stripemark-wrap { color: #FFFFFF; align-self: center; }
.cl-po__main .cl-stripemark { color: #FFFFFF; }

/* ---- Card by Stripe, collapsed: you can see what it takes without opening it
   (Noah, 2026-09-22). Real brand marks in a horizontal row, and the row tile is
   Visa's own logo on Visa blue — the gateway's own asset, nothing redrawn. ---- */
li.wc_payment_method.payment_method_mecom_stripe .cl-cardicons {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin: 6px 0 0 0 !important;
  width: 100%;
}
li.wc_payment_method.payment_method_mecom_stripe .cl-cardicons img {
  height: 18px !important;
  width: 27px !important;
  margin: 0 !important;
  padding: 1px 2px !important;
  object-fit: contain;
  box-sizing: border-box;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
@media (max-width: 767px) {
  li.wc_payment_method.payment_method_mecom_stripe .cl-cardicons { gap: 3px; }
  li.wc_payment_method.payment_method_mecom_stripe .cl-cardicons img { height: 16px !important; width: 24px !important; }
}

/* ---- Real brand marks, not redrawn (Noah, 2026-09-22: "stop tracing",
   "I want the colors of each logo to be the whole square").
   Official Zelle / Venmo / Cash App / Bitcoin / Visa artwork, each on a tile in
   that brand's own colour. Vector, so it stays sharp at any screen density. ---- */
:root {
  --cl-icon-zelle: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23FFFFFF%22><path d=%22M13.559 24h-2.841a.483.483 0 0 1-.483-.483v-2.765H5.638a.667.667 0 0 1-.666-.666v-2.234a.67.67 0 0 1 .142-.412l8.139-10.382h-7.25a.667.667 0 0 1-.667-.667V3.914c0-.367.299-.666.666-.666h4.23V.483c0-.266.217-.483.483-.483h2.841c.266 0 .483.217.483.483v2.765h4.323c.367 0 .666.299.666.666v2.137a.67.67 0 0 1-.141.41l-8.19 10.481h7.665c.367 0 .666.299.666.666v2.477a.667.667 0 0 1-.666.667h-4.32v2.765a.483.483 0 0 1-.483.483Z%22/></svg>");
  --cl-icon-venmo: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23FFFFFF%22><path d=%22M21.772 13.119c-.267 0-.381-.251-.38-.655 0-.533.121-1.575.712-1.575.267 0 .357.243.357.598 0 .533-.13 1.632-.689 1.632Zm.502-3.377c-1.677 0-2.405 1.285-2.405 2.658 0 1.042.421 1.874 1.693 1.874 1.717 0 2.438-1.406 2.438-2.763 0-1.025-.462-1.769-1.726-1.769Zm-3.833 0c-.558 0-.964.17-1.393.477-.154-.275-.462-.477-.932-.477-.542 0-.947.219-1.247.437l-.04-.364H13.54l-.688 4.354h1.506l.479-3.053c.129-.065.323-.154.518-.154.145 0 .267.049.267.267 0 .056-.016.145-.024.218l-.429 2.722h1.498l.478-3.053c.138-.073.324-.154.51-.154.146 0 .268.049.268.267 0 .056-.017.145-.025.218l-.429 2.722h1.499l.461-2.908c.025-.153.049-.388.049-.549 0-.582-.267-.97-1.037-.97Zm-6.871 0c-.575 0-.98.219-1.287.421l-.017-.348H8.962l-.689 4.354H9.78l.478-3.053c.13-.065.324-.154.518-.154.147 0 .268.049.268.242 0 .081-.024.227-.032.299l-.422 2.666h1.499l.462-2.908c.024-.153.049-.388.049-.549 0-.582-.268-.97-1.03-.97Zm-5.631 1.834c.041-.485.413-.824.697-.824.162 0 .299.097.299.291 0 .404-.713.533-.996.533Zm.843-1.834c-1.604 0-2.382 1.39-2.382 2.698 0 1.01.478 1.817 1.814 1.817.527 0 1.07-.113 1.418-.282l.186-1.26c-.494.25-.874.347-1.271.347-.365 0-.64-.194-.64-.687.826-.008 2.252-.347 2.252-1.453 0-.687-.494-1.18-1.377-1.18Zm-4.239.267c.089.186.146.412.146.743 0 .606-.429 1.494-.777 2.06l-.373-2.989L0 9.969l.705 4.2h1.757c.77-1.01 1.718-2.448 1.718-3.554 0-.347-.073-.622-.235-.889l-1.402.283Z%22/></svg>");
  --cl-icon-cashapp: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22><g fill-rule=%22nonzero%22 fill=%22%23FFF%22><path d=%22M41.7 0c6.4 0 9.6 0 13.1 1.1a13.6 13.6 0 0 1 8.1 8.1C64 12.7 64 15.9 64 22.31v19.37c0 6.42 0 9.64-1.1 13.1a13.6 13.6 0 0 1-8.1 8.1C51.3 64 48.1 64 41.7 64H22.3c-6.42 0-9.64 0-13.1-1.1a13.6 13.6 0 0 1-8.1-8.1C0 51.3 0 48.1 0 41.69V22.3c0-6.42 0-9.64 1.1-13.1a13.6 13.6 0 0 1 8.1-8.1C12.7 0 15.9 0 22.3 0h19.4z%22 fill=%22%2300D632%22/><path d=%22M42.47 23.8c.5.5 1.33.5 1.8-.0l2.5-2.6c.53-.5.5-1.4-.06-1.94a19.73 19.73 0 0 0-6.72-3.84l.79-3.8c.17-.83-.45-1.61-1.28-1.61h-4.84a1.32 1.32 0 0 0-1.28 1.06l-.7 3.38c-6.44.33-11.9 3.6-11.9 10.3 0 5.8 4.51 8.29 9.28 10 4.51 1.72 6.9 2.36 6.9 4.78 0 2.49-2.38 3.95-5.9 3.95-3.2 0-6.56-1.07-9.16-3.68a1.3 1.3 0 0 0-1.84-.0l-2.7 2.7a1.36 1.36 0 0 0 .0 1.92c2.1 2.07 4.76 3.57 7.792 4.4l-.74 3.57c-.17.83.44 1.6 1.27 1.61l4.85.04a1.32 1.32 0 0 0 1.3-1.06l.7-3.39C40.28 49.07 45 44.8 45 38.57c0-5.74-4.7-8.16-10.4-10.13-3.26-1.21-6.08-2.04-6.08-4.53 0-2.42 2.63-3.38 5.27-3.38 3.36 0 6.59 1.39 8.7 3.29z%22 fill=%22%23FFF%22/></g></svg>");
  --cl-icon-bitcoin: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><circle cx=%2212%22 cy=%2212%22 r=%2211.4%22 fill=%22%23FFFFFF%22/><g fill=%22%23F7931A%22><path d=%22M23.638 14.904c-1.602 6.43-8.113 10.34-14.542 8.736C2.67 22.05-1.244 15.525.362 9.105 1.962 2.67 8.475-1.243 14.9.358c6.43 1.605 10.342 8.115 8.738 14.548v-.002zm-6.35-4.613c.24-1.59-.974-2.45-2.64-3.03l.54-2.153-1.315-.33-.525 2.107c-.345-.087-.705-.167-1.064-.25l.526-2.127-1.32-.33-.54 2.165c-.285-.067-.565-.132-.84-.2l-1.815-.45-.35 1.407s.975.225.955.236c.535.136.63.486.615.766l-1.477 5.92c-.075.166-.24.406-.614.314.015.02-.96-.24-.96-.24l-.66 1.51 1.71.426.93.242-.54 2.19 1.32.327.54-2.17c.36.1.705.19 1.05.273l-.51 2.154 1.32.33.545-2.19c2.24.427 3.93.257 4.64-1.774.57-1.637-.03-2.58-1.217-3.196.854-.193 1.5-.76 1.68-1.93h.01zm-3.01 4.22c-.404 1.64-3.157.75-4.05.53l.72-2.9c.896.23 3.757.67 3.33 2.37zm.41-4.24c-.37 1.49-2.662.735-3.405.55l.654-2.64c.744.18 3.137.524 2.75 2.084v.006z%22/></g></svg>");
  --cl-icon-visa: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23FFFFFF%22><path d=%22M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z%22/></svg>");
}
.woocommerce-checkout #payment ul.payment_methods li.payment_method_corelabs_zelle > label::before { --cl-pay-bg: #6D1ED4; --cl-pay-icon: var(--cl-icon-zelle); --cl-pay-size: 20px auto; }
.woocommerce-checkout #payment ul.payment_methods li.payment_method_corelabs_venmo > label::before { --cl-pay-bg: #008CFF; --cl-pay-icon: var(--cl-icon-venmo); --cl-pay-size: 28px auto; }
.woocommerce-checkout #payment ul.payment_methods li.payment_method_corelabs_cashapp > label::before { --cl-pay-bg: #00D632; --cl-pay-icon: var(--cl-icon-cashapp); --cl-pay-size: 38px 38px; }
.woocommerce-checkout #payment ul.payment_methods li.payment_method_corelabs_bitcoin > label::before { --cl-pay-bg: #F7931A; --cl-pay-icon: var(--cl-icon-bitcoin); --cl-pay-size: 34px 34px; }
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mecom_stripe > label::before { --cl-pay-bg: #1434CB; --cl-pay-icon: var(--cl-icon-visa); --cl-pay-size: 28px auto; }
.woocommerce-checkout #payment ul.payment_methods li > label::before {
  background: var(--cl-pay-icon) center / var(--cl-pay-size, 22px auto) no-repeat, var(--cl-pay-bg, var(--ink-600)) !important;
  background-blend-mode: normal, normal !important;
}

/* ---- The method name IS the brand's logotype ---- */
.cl-pm__name--brand { display: inline-flex; align-items: center; line-height: 0; }
.cl-pm__name--brand .cl-brandname { display: block; width: auto; }
.cl-pm__name--zelle   .cl-brandname { height: 22px; }
.cl-pm__name--venmo   .cl-brandname { height: 15px; }
.cl-pm__name--bitcoin .cl-brandname { height: 17px; }
@media (max-width: 767px) {
  .cl-pm__name--zelle   .cl-brandname { height: 20px; }
  .cl-pm__name--venmo   .cl-brandname { height: 14px; }
  .cl-pm__name--bitcoin .cl-brandname { height: 16px; }
}
/* the method's logotype on the Place order button, and ® where it is earned */
.cl-po__sub { display: flex !important; align-items: center; justify-content: center; gap: 6px; }
.cl-po__sub .cl-brandname { display: block; width: auto; height: 13px; }
.cl-po__sub .cl-brandname--zelle { height: 15px; }
.cl-po__sub .cl-brandname--bitcoin { height: 13px; }
.cl-po__sub .cl-brandname--venmo { height: 11px; }
.cl-tm { font-size: 0.5em; vertical-align: super; line-height: 0; margin-left: 1px; opacity: 0.85; }

/* ---- Over the order cap: confirm by phone (Noah, 2026-09-22) ---- */
.cl-capnote { display: block; margin: 0 0 14px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(207, 178, 255, 0.45); background: linear-gradient(180deg, rgba(60, 40, 92, 0.92), rgba(32, 21, 50, 0.94)); }
.cl-capnote[hidden] { display: none !important; }
.cl-capnote strong { display: block; margin-bottom: 6px; font: 800 13px/1.3 var(--font-display);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-strong, #fff); }
.cl-capnote span { display: block; font: 500 13.5px/1.55 var(--font-body); color: var(--ink-soft, #D2CADF); }
.cl-capnote__call { display: block; margin-top: 12px; padding: 12px 14px; border-radius: 999px; text-align: center;
  font: 800 13px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase;
  color: #062B16 !important; background: linear-gradient(180deg, #5CE49B, #21B36A); text-decoration: none; }
@media (min-width: 768px) {
  .cl-capnote { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .cl-capnote strong { width: 100%; margin-bottom: 2px; }
  .cl-capnote span { flex: 1 1 320px; }
  .cl-capnote__call { margin-top: 0; flex: 0 0 auto; }
}

/* ---- Bug scan, 2026-09-22 ---- */
/* Open the card option and the brand logos were showing twice: the little strip
   that belongs to the collapsed row, plus the big grid inside. The strip is for
   the shut state only. */
/* the little strip is the SHUT state's summary: hide it only while the panel
   is actually open and the full grid is on screen */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mecom_stripe.cl-pm-open .cl-cardicons { display: none !important; }
/* The ® was drifting away from "Cash App" because the name carries wide letter
   spacing. Pull it back in and size it like a trademark, not a character. */
.cl-pm__name .cl-tm { margin-left: -0.28em; font-size: 0.42em; letter-spacing: 0; opacity: 0.7; }

/* ---- Finish inside the open payment panel (Noah, 2026-09-22) ---- */
.payment_box .place-order.cl-po-inside { margin: 14px 0 0; padding: 0; border: 0; background: none; }
/* the panel already frames these, so drop their own boxes and sit them in a stack */
.payment_box .cl-po-inside .cl-protect--pay,
.payment_box .cl-po-inside .cl-acknowledgement { margin: 0 0 10px; }
.payment_box .cl-po-inside .cl-paytotal { margin: 12px 0 10px; }
.payment_box .cl-po-inside #place_order { width: 100%; margin: 0; }
/* a hairline between the method's own copy and the finishing block */
.payment_box .place-order.cl-po-inside::before {
  content: ""; display: block; height: 1px; margin: 0 0 14px;
  background: linear-gradient(90deg, transparent, rgba(207, 178, 255, 0.38), transparent);
}
@media (max-width: 767px) {
  .payment_box .place-order.cl-po-inside { margin-top: 12px; }
  .payment_box .cl-po-inside .cl-paytotal { margin: 10px 0 8px; }
}

/* ---- One type treatment for both boxes above the button (Noah, 2026-09-22:
   "why are the fonts different"). Same family already; the difference was the
   Shipping protection block leaking its TITLE tracking onto its paragraph.
   Titles get the wide spacing he likes, paragraphs stay normal so four lines of
   acknowledgement are still readable. ---- */
.cl-protect__title,
.cl-ack__title {
  /* Same face and spacing as the "Tap Place order..." copy above them. The wide
     spaced caps read as shouting on a legal line (Noah: "so it doesn't look so
     scary") — one voice for the whole panel. */
  font: 700 14px/1.5 var(--font-body) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ink-strong, #F5F3F7) !important;
}
.cl-protect__desc,
.cl-ack__text {
  font: 500 13px/1.5 var(--font-body) !important;
  letter-spacing: normal !important;
  color: var(--ink-soft, #C9C3D2) !important;
}
.cl-protect__price { letter-spacing: normal !important; }

/* ---- Tap the row to open, tap again to shut (Noah, 2026-09-22) ---- */
.woocommerce-checkout #payment ul.payment_methods > li > label { cursor: pointer; }
/* a chevron so it reads as something that opens */
.woocommerce-checkout #payment ul.payment_methods > li > label::after {
  content: ""; position: absolute; top: 26px; right: 46px; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CFB2FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  transition: transform .18s ease; opacity: .8; pointer-events: none;
}
.woocommerce-checkout #payment ul.payment_methods > li.cl-pm-open > label::after { transform: rotate(180deg); opacity: 1; }
/* nothing selected yet: the chevron sits where the check would be */
.woocommerce-checkout #payment ul.payment_methods > li:not(:has(input:checked)) > label::after { right: 18px; }
/* the Cash App mark on the button */
.cl-po__sub .cl-brandname--cashapp { height: 15px; }
.cl-po__word { display: inline-block; }

/* ---- Panels glide open and shut (Noah, 2026-09-22: "make it really smooth").
   The script animates the real height; this is just the resting state so the
   panel is not flashed before the script runs. ---- */
.woocommerce-checkout #payment ul.payment_methods > li > .payment_box {
  display: block !important;
  overflow: hidden;
  height: 0;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods > li.cl-pm-open > .payment_box {
  height: auto;
  opacity: 1;
  padding-bottom: 12px !important;
}
.woocommerce-checkout #payment ul.payment_methods > li > label { cursor: pointer; }
.woocommerce-checkout #payment ul.payment_methods > li.cl-pm-open > .payment_box { cursor: pointer; }
.woocommerce-checkout #payment ul.payment_methods > li .place-order,
.woocommerce-checkout #payment ul.payment_methods > li .cl-protect,
.woocommerce-checkout #payment ul.payment_methods > li .cl-acknowledgement { cursor: auto; }
@media (prefers-reduced-motion: reduce) {
  .woocommerce-checkout #payment ul.payment_methods > li > .payment_box { transition: none !important; }
}

/* the three blocks in an open panel speak with one voice */
.payment_box .cl-po-inside .cl-protect__title,
.payment_box .cl-po-inside .cl-ack__title { font: 700 14px/1.5 var(--font-body) !important; letter-spacing: normal !important; }
.payment_box .cl-po-inside .cl-protect__desc,
.payment_box .cl-po-inside .cl-ack__text { font: 500 13.5px/1.6 var(--font-body) !important; letter-spacing: normal !important; }

/* WooCommerce greys the payment block out while it recalculates. A hard grey
   flash on every checkbox tick looked like the page reloading — fade instead. */
.woocommerce-checkout #payment .blockUI.blockOverlay,
.woocommerce-checkout .woocommerce-checkout-review-order .blockUI.blockOverlay {
  background: transparent !important;
  opacity: .35 !important;
  transition: opacity .2s ease;
}

/* ---- Order summary (Noah, 2026-09-22). Measured first: on desktop every cell
   was left-aligned so the money did not line up, labels were 11px against 16px
   values, and the card carried 111px of empty space under the table. ---- */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { vertical-align: middle; }
/* money in its own right-hand column, on every screen */
.woocommerce-checkout-review-order-table th:last-child,
.woocommerce-checkout-review-order-table td:last-child { text-align: right !important; white-space: nowrap; }
.woocommerce-checkout-review-order-table th:first-child,
.woocommerce-checkout-review-order-table td:first-child { text-align: left !important; }
/* one type scale: the column headers are the only small thing */
.woocommerce-checkout-review-order-table thead th {
  font: 700 11px/1.4 var(--font-body) !important; letter-spacing: 0.14em !important;
  text-transform: uppercase !important; color: var(--ink-soft, #B0A9BD) !important;
}
.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
  font: 500 14px/1.5 var(--font-body) !important; letter-spacing: normal !important;
  color: var(--ink-strong, #F5F3F7) !important;
}
.woocommerce-checkout-review-order-table tfoot th { font-weight: 700 !important; color: var(--ink-soft, #D2CADF) !important; }
/* the total is the one line that should carry weight */
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  font: 800 17px/1.4 var(--font-display) !important; letter-spacing: 0.02em !important;
  color: var(--ink-strong, #FFFFFF) !important; padding-top: 12px !important;
}
/* the vial on each line */
.cl-sum__line { display: flex; align-items: center; gap: 11px; }
.cl-sum__thumb { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(207, 178, 255, 0.22); }
.cl-sum__thumb img, img.cl-sum__img { width: 100% !important; height: 100% !important; object-fit: contain;
  display: block; margin: 0 !important; padding: 3px; box-sizing: border-box; }
.cl-sum__name { min-width: 0; }
.woocommerce-checkout-review-order-table .product-quantity { opacity: .75; font-weight: 600; white-space: nowrap; }
@media (max-width: 767px) {
  .cl-sum__thumb { width: 38px; height: 38px; border-radius: 9px; }
  .cl-sum__line { gap: 9px; }
}
/* no dead space under the table */
.woocommerce-checkout-review-order { padding-bottom: 0 !important; }
.woocommerce-checkout-review-order-table { margin-bottom: 0 !important; }
/* the "× 1" is appended after the name by WooCommerce and was dropping to its
   own line under the photo — keep the whole line together */
.woocommerce-checkout-review-order-table td.product-name {
  display: flex !important; align-items: center; gap: 8px; flex-wrap: nowrap;
}
.woocommerce-checkout-review-order-table td.product-name .cl-sum__line { flex: 1 1 auto; min-width: 0; }
.woocommerce-checkout-review-order-table td.product-name .cl-sum__name { overflow-wrap: anywhere; }
.woocommerce-checkout-review-order-table td.product-name .product-quantity { flex: 0 0 auto; }

/* The label's own title text is left in the markup for screen readers but
   hidden visually — the visible name comes from the icon filter, which is never
   stored on the order. */
.woocommerce-checkout #payment ul.payment_methods > li > label { font-size: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods > li > label > * { font-size: 14px !important; }
.woocommerce-checkout #payment ul.payment_methods > li > label .cl-pm__name { font-size: 15px !important; }

/* ---- DESKTOP: the same two quick buttons, but they belong up by the logo, not
   floating over the bottom of the page (Noah, 2026-09-22: "on desktop I don't
   see the home button ... add those back kind of like they are mobile").
   Mobile keeps its bottom-centre pill; this is the desktop shape. ---- */
@media (min-width: 768px) {
  .cl-navpill {
    display: flex; gap: 8px; align-items: center;
    position: fixed; z-index: 9990;
    top: calc(var(--cl-head-h, 74px) + 12px); right: 22px;
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: transform .26s cubic-bezier(.2, .9, .3, 1), opacity .2s ease;
    padding: 5px; border-radius: 999px;
    background: rgba(18, 12, 28, 0.92); border: 1px solid rgba(206, 172, 255, 0.28);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.95), 0 0 22px -10px rgba(155, 93, 229, 0.7);
  }
  .cl-navpill.is-on { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .cl-navpill a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 18px; border-radius: 999px; box-sizing: border-box;
    font: 700 12px/1 var(--font-display); letter-spacing: 0.12em;
    text-transform: uppercase; text-decoration: none !important; white-space: nowrap;
  }
  .cl-navpill a svg { flex: 0 0 15px; width: 15px; height: 15px; }
  .cl-navpill__home { color: #EDE6F7 !important; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(206, 172, 255, 0.22); }
  .cl-navpill__home:hover { background: rgba(255, 255, 255, 0.12); }
  .cl-navpill__shop { color: #fff !important; background: linear-gradient(180deg, #8A4FD8 0%, #5E26A0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(206, 172, 255, 0.45); }
  .cl-navpill__shop:hover { background: linear-gradient(180deg, #9A5FE8 0%, #6E36B0 100%); }
  body:is(.cl-menu-open, .cl-drawer-open, .cl-co-open, .cl-qv-open, .cl-acct-open, .cl-ref-open, .cl-pay-open) .cl-navpill { opacity: 0 !important; pointer-events: none !important; }
}

/* ---- Card row, shut state: the little brand strip gets its own line under the
   name instead of sharing one with the Secure pill (Noah's screenshot showed
   them printed on top of each other). Indent matches the tile + gap. ---- */
.woocommerce-checkout #payment ul.payment_methods > li.payment_method_mecom_stripe > label {
  display: flex !important; flex-wrap: wrap; align-items: center;
}
.woocommerce-checkout #payment li.payment_method_mecom_stripe > label .cl-pm__name { order: 1; }
.woocommerce-checkout #payment li.payment_method_mecom_stripe > label .cl-cardicons {
  order: 2; flex: 0 0 100% !important; width: 100% !important;
  margin: 7px 0 0 52px !important;
}
.woocommerce-checkout #payment li.payment_method_mecom_stripe > label .cl-pm__sub {
  order: 3; flex: 0 0 auto; margin-left: 52px !important;
}
@media (max-width: 767px) {
  .woocommerce-checkout #payment li.payment_method_mecom_stripe > label .cl-cardicons,
  .woocommerce-checkout #payment li.payment_method_mecom_stripe > label .cl-pm__sub { margin-left: 52px !important; }
}
/* An older rule ( ...ul.payment_methods li div.payment_box ) sets padding with
   !important and outranks a rule without the `div`, so a shut panel kept 12px of
   bottom padding and showed as a sliver. Same shape, later in the file. */
.woocommerce-checkout #payment ul.payment_methods > li > div.payment_box { padding: 0 12px !important; }
.woocommerce-checkout #payment ul.payment_methods > li.cl-pm-open > div.payment_box { padding: 0 12px 12px !important; }

/* ---- Order summary alignment (Noah, 2026-09-22: "alignment of the text,
   measure it"). Measured: item names began at x=901 while Subtotal/Total began
   at x=834 — a 67px ragged left edge — and the "× 1" floated at x=1040, adrift
   between the name and the price. ---- */
:root { --cl-sum-indent: 67px; }   /* thumbnail 44 + 11 gap + the row cell's 12px padding */
@media (max-width: 767px) { :root { --cl-sum-indent: 47px; } }  /* 38 + 9, cell padding is 0 there */
/* the footer labels line up with the item NAMES, so the left edge is one line */
.woocommerce-checkout-review-order-table tfoot th { padding-left: var(--cl-sum-indent) !important; }
/* the quantity belongs beside the name, not stranded mid-row */
.woocommerce-checkout-review-order-table td.product-name .cl-sum__line { flex: 0 1 auto !important; }
.woocommerce-checkout-review-order-table td.product-name .product-quantity { margin-right: auto; }
/* remove-coupon link: a quiet link, not "[Remove]" shouting on its own line */
.woocommerce-checkout-review-order-table .woocommerce-remove-coupon {
  display: inline-block; margin-left: 8px; font-size: 12px; opacity: .7;
  text-decoration: underline; text-underline-offset: 2px;
}
/* `body.cl-embed ... th { padding: 10px 0 !important }` outranks the plain
   tfoot rule, so the indent never landed inside the checkout pop-up. */
body.cl-embed .woocommerce-checkout-review-order-table tfoot th { padding-left: var(--cl-sum-indent) !important; }

/* ---- "Change payment method" list (Noah, 2026-09-22: "no picture for stripe
   and the alignment is so bad"). Card by Stripe had no --card logo variant, and
   an undefined icon makes the whole background shorthand invalid — hence the
   empty box. The rows were also centred, so nothing lined up. ---- */
.cl-pay .cl-pay__go-logo--card,
.cl-ty .cl-pay__go-logo--card {
  --cl-pay-bg: #1434CB;
  --cl-pay-icon: var(--cl-icon-visa);
  background-size: 20px auto, auto;
}
/* one column: every logo on the same left edge, every name beside it */
.cl-pay .cl-pay__switchopt { justify-content: flex-start !important; gap: 12px !important; padding: 0 16px !important; }
.cl-pay .cl-pay__switchopt > span:last-child { text-align: left; }
.cl-pay .cl-pay__switchnote { text-align: left; padding-left: 16px; padding-right: 16px; }

/* ---- Shipping row: "(3 business days)Free" ran together with no gap, and the
   word was sentence case (Noah, 2026-09-22: "extra space ... and capitalize
   free"). Prices have no letters, so uppercase only affects the word. ---- */
.cl-ship-cost { margin-left: 12px !important; text-transform: uppercase; letter-spacing: 0.04em; }
.cl-ship-name { padding-right: 4px; }
/* an order still waiting on payment must not wear the green "all done" pill */
.cl-ty__pill--wait { background: rgba(247, 147, 26, 0.16) !important; color: #FFC46B !important;
  box-shadow: inset 0 0 0 1px rgba(247, 147, 26, 0.45) !important; }
/* the floating error grows with its content instead of clipping to one line */
html body form.checkout > .woocommerce-NoticeGroup { height: auto !important; max-height: 46vh; }
html body .woocommerce-NoticeGroup-checkout ul.woocommerce-error > li + li { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); }

/* ---- Cart line that can no longer be fulfilled (Noah, 2026-09-22). ---- */
.cl-drawer__short { margin: 4px 0 6px; font: 600 12.5px/1.45 var(--font-body);
  color: #FFC46B; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cl-drawer__fix { border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer;
  font: 800 11.5px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  color: #2A1A05; background: linear-gradient(180deg, #FFD08A, #F7A93A); }
.cl-drawer__step[disabled] { opacity: .35; cursor: not-allowed; }

/* ---- Address form on PHONES (Noah, 2026-09-22: "the text is so small ...
   bold print ... easy to read, centered ... different than desktop").
   Measured before: labels 13.5px / 700 / rgb(201,195,210) / left.
   Scoped to the address rows only — checkbox rows and payment rows keep theirs. ---- */
@media (max-width: 767px) {
  body.cl-embed form.checkout p.form-row > label,
  body.cl-embed .cl-am p.form-row > label,
  body.cl-embed .woocommerce-billing-fields p.form-row > label,
  body.cl-embed .woocommerce-shipping-fields p.form-row > label {
    display: block !important;
    margin: 0 0 8px !important;
    font: 800 15.5px/1.35 var(--font-body) !important;
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
    text-align: center !important;
    text-transform: none !important;
  }
  /* the required star should not shout louder than the label */
  body.cl-embed form.checkout p.form-row > label .required,
  body.cl-embed .cl-am p.form-row > label .required {
    color: #CFB2FF !important; text-decoration: none !important; opacity: .9;
  }
  /* roomier, easier targets under each label */
  body.cl-embed form.checkout p.form-row input.input-text,
  body.cl-embed form.checkout p.form-row select,
  body.cl-embed form.checkout p.form-row textarea,
  body.cl-embed .cl-am p.form-row input.input-text,
  body.cl-embed .cl-am p.form-row select {
    font-size: 17px !important;
    min-height: 54px !important;
    text-align: center !important;
  }
  body.cl-embed form.checkout p.form-row textarea { text-align: left !important; min-height: 96px !important; }
  body.cl-embed form.checkout p.form-row { margin-bottom: 18px !important; }
}
/* the shipping-address editor is a separate panel from the billing fields —
   same treatment, or half the form is bold and half is not */
@media (max-width: 767px) {
  body.cl-embed .cl-am label,
  body.cl-embed .woocommerce-shipping-fields label,
  body.cl-embed .woocommerce-address-fields label {
    display: block !important;
    margin: 0 0 8px !important;
    font: 800 15.5px/1.35 var(--font-body) !important;
    color: #FFFFFF !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
  }
  body.cl-embed .cl-am input.input-text,
  body.cl-embed .cl-am select,
  body.cl-embed .woocommerce-shipping-fields input.input-text,
  body.cl-embed .woocommerce-shipping-fields select {
    font-size: 17px !important; min-height: 54px !important; text-align: center !important;
  }
  body.cl-embed .cl-am p.form-row,
  body.cl-embed .woocommerce-shipping-fields p.form-row { margin-bottom: 18px !important; }
}
/* the editor panel is .cl-am__dialog, not .cl-am — that is why half the form
   stayed small and left-aligned on phones */
@media (max-width: 767px) {
  body.cl-embed .cl-am .cl-am__body p.form-row > label,
  body.cl-embed .cl-am__dialog .cl-am__body p.form-row > label,
  body.cl-embed .cl-am__dialog label.required_field {
    display: block !important;
    margin: 0 0 8px !important;
    font: 800 15.5px/1.35 var(--font-body) !important;
    color: #FFFFFF !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
  }
  body.cl-embed .cl-am .cl-am__body p.form-row input.input-text,
  body.cl-embed .cl-am .cl-am__body p.form-row select,
  body.cl-embed .cl-am__dialog input.input-text,
  body.cl-embed .cl-am__dialog select,
  body.cl-embed .cl-am__dialog textarea {
    font-size: 17px !important; min-height: 54px !important; text-align: center !important;
  }
  body.cl-embed .cl-am__dialog textarea { text-align: left !important; }
  body.cl-embed .cl-am__dialog p.form-row { margin-bottom: 18px !important; }
  body.cl-embed .cl-am__dialog label .required { color: #CFB2FF !important; text-decoration: none !important; }
}

/* ---- MOBILE CHECKOUT: what you bought goes first (Noah, 2026-09-22:
   "have it so the order summary shows up at the top... rather than the bottom").
   Measured: the summary sat at y=1900 on a 2384px page — nobody scrolls past
   the whole form to check what they are paying for. Desktop keeps its column. ---- */
@media (max-width: 767px) {
  body.cl-embed form.checkout { display: flex !important; flex-direction: column; }
  body.cl-embed form.checkout > .woocommerce-checkout-review-order {
    order: -1 !important;
    margin: 0 0 20px !important;
  }
  body.cl-embed form.checkout > .cl-ck__main { order: 1 !important; }
}

/* ---- Promo code, once it is applied: the code sits in the box, locked, with
   an X to drop it (Noah, 2026-09-22). ---- */
.cl-coupon__row--on { display: flex; align-items: center; gap: 10px; }
.cl-coupon__applied {
  flex: 1 1 auto; display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 0 14px; height: 52px; border-radius: 14px; box-sizing: border-box;
  background: rgba(61, 214, 140, 0.10); box-shadow: inset 0 0 0 1px rgba(61, 214, 140, 0.45);
  color: #6FE3AC;
}
.cl-coupon__appliedCode {
  font: 800 15px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase;
  color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-coupon__drop {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; text-decoration: none !important;
  font-size: 22px; line-height: 1; color: var(--ink-soft, #D2CADF) !important;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.cl-coupon__drop:hover { color: #fff !important; background: rgba(255, 255, 255, 0.12); }
.cl-coupon__note { margin: 7px 0 0; font: 500 12.5px/1.4 var(--font-body); color: #6FE3AC; }
@media (max-width: 767px) { .cl-coupon__note { text-align: center; } }

/* ---- Every checkout warning floats, none of them push the page around
   (Noah, 2026-09-22: "anytime there's a warning ... it should not take up a
   bunch of space and make the box smaller. It should just be a pop up at the
   top, like the other one"). The research-use notice already behaved; coupon
   and stock errors were inline blocks that squeezed the form. ---- */
body.cl-embed .woocommerce-error:not(.woocommerce-NoticeGroup .woocommerce-error),
body.cl-embed .woocommerce-message,
body.cl-embed .woocommerce-info:not(.cl-capnote):not(.woocommerce-shipping-methods *),
body.cl-embed form.checkout_coupon .woocommerce-error {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  left: 12px !important; right: 12px !important;
  z-index: 10050 !important;
  margin: 0 !important;
  max-height: 44vh; overflow-y: auto;
  border-radius: 16px !important;
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .95) !important;
  animation: cl-noticein .22s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes cl-noticein { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 768px) {
  body.cl-embed .woocommerce-error:not(.woocommerce-NoticeGroup .woocommerce-error),
  body.cl-embed .woocommerce-message,
  body.cl-embed .woocommerce-info:not(.cl-capnote):not(.woocommerce-shipping-methods *) {
    left: 50% !important; right: auto !important; width: 520px; transform: translateX(-50%);
  }
}

/* ---- "Change payment method" was a quiet line you had to scroll to find
   (Noah, 2026-09-22: "it needs to be way more visible ... put it above
   everything"). Now it sits at the top of the pay pop-up and looks like a
   control rather than a footnote. ---- */
.cl-pay .cl-pay__switch { order: -1; margin: 0 0 14px !important; }
.cl-pay .cl-pay__switchbtn {
  display: flex !important; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 50px; padding: 0 16px; box-sizing: border-box;
  border-radius: 14px !important;
  background: rgba(155, 93, 229, 0.16) !important;
  box-shadow: inset 0 0 0 1.5px rgba(207, 178, 255, 0.55) !important;
  color: #FFFFFF !important;
  font: 800 13.5px/1 var(--font-display) !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important;
}
.cl-pay .cl-pay__switchbtn:hover { background: rgba(155, 93, 229, 0.26) !important; }
.cl-pay .cl-pay__switchbtn svg { flex: 0 0 17px; width: 17px; height: 17px; }
/* empty category */
.cl-empty-cat { margin: 26px auto; padding: 30px 22px; max-width: 520px; text-align: center;
  border-radius: 18px; background: linear-gradient(180deg, rgba(36,24,56,.9), rgba(22,15,35,.92));
  box-shadow: inset 0 0 0 1px rgba(207,178,255,.28); }
.cl-empty-cat__title { margin: 0 0 8px; font: 800 17px/1.3 var(--font-display); letter-spacing: .08em;
  text-transform: uppercase; color: #fff; }
.cl-empty-cat__text { margin: 0 0 18px; font: 500 14px/1.6 var(--font-body); color: var(--ink-soft,#D2CADF); }
.cl-empty-cat__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; }

/* ---- PHONES: get the products on screen (Noah, 2026-09-22: "cut down on how
   much you have to scroll on the products page"; he thought Nootropics was
   empty because the first product started 800px down and the category has
   two). Chrome above the grid gets tighter; nothing is removed. ---- */
@media (max-width: 767px) {
  /* Wrapped, not a sideways scroller. The scrolling version hid half the
     categories off the right edge and cut the first one off on the left, and
     Noah preferred the wrapped layout (2026-09-23: "I don't want the
     categories to have to scroll horizontal, I liked the layout we had
     before"). */
  .cl-chips {
    display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px;
    padding: 2px 16px 10px !important; margin: 0 0 8px !important;
  }
  .cl-chip { flex: 0 0 auto; white-space: nowrap; min-height: 42px; }
  .cl-shop-toolbar { padding: 6px 16px 10px !important; margin: 0 !important; }
  .woocommerce-ordering { margin: 0 !important; }
  .woocommerce-ordering select.orderby { min-height: 44px; font-size: 15px; }
  /* the archive heading block carries a lot of air on a phone */
  .cl-chero, .woocommerce-products-header { padding-top: 14px !important; padding-bottom: 10px !important; }
  .cl-chero__title { margin-bottom: 8px !important; }
  .cl-chero__lede, .term-description { margin-bottom: 10px !important; font-size: 14.5px !important; line-height: 1.55 !important; }
  ul.products { margin-top: 4px !important; }
}
/* The catalogue hero is 575px on an 812px phone: a 290px decorative vial and an
   "Explore products" button that scrolls to the grid immediately below it. On a
   phone both just delay the thing you came for. Desktop keeps them. */
@media (max-width: 767px) {
  .cl-chero__stage, .cl-chero__float { display: none !important; }
  .cl-chero .cl-btn { display: none !important; }
  .cl-chero { min-height: 0 !important; padding-bottom: 6px !important; }
}

/* ---- Nothing under 12px on a phone (Noah, 2026-09-22: "make everything
   easier to read ... I don't know why you don't listen when I tell you").
   Measured across every page: the vial pill was 8.5px, the catalogue tab strip
   10px, feature tags and the sale badge 10.5px. ---- */
@media (max-width: 767px) {
  .cl-vial__pill { font-size: 12px !important; letter-spacing: 0.1em !important; }
  .cl-tabmini, .cl-tabmini * { font-size: 12px !important; }
  .cl-feat__tag { font-size: 12px !important; }
  span.onsale, .onsale { font-size: 12px !important; padding: 5px 11px !important; }
  .cl-picks__label, .cl-card__meta, .cl-trustbar__text small { font-size: 12.5px !important; }
  /* tap targets: 44px is the smallest a thumb reliably hits */
  .cl-drawer__remove, .cl-qv__x, .cl-popback, [class*="__x"] { min-height: 44px !important; min-width: 44px !important; }
}
/* the age gate and welcome pop-up were the last things under 12px */
@media (max-width: 767px) {
  .cl-agegate__ruo, .cl-promo__code-hint, .cl-promo__dismiss { font-size: 12.5px !important; line-height: 1.5 !important; }
  .cl-promo__dismiss { min-height: 44px !important; }
}
/* Second pass: fixing the worst offenders exposed the next tier. Same rule —
   nothing a customer has to read sits under 12px on a phone. */
@media (max-width: 767px) {
  .cl-topbar__calltag, .cl-icon-btn__cap, .cl-mobile__foot, .cl-mobile__foot *,
  .cl-hero2__trustText, .cl-atc__opts-label, .cl-chip,
  .cl-ticker__list li, .cl-ticker__track li { font-size: 12px !important; }
  span.onsale, .onsale { font-size: 12px !important; }
  .cl-mobile__foot b, .cl-mobile__foot strong,
  .cl-hero2__trustText b, .cl-hero2__trustText strong { font-size: 12px !important; }
}
/* Existing !important rules outrank a plain class selector, so these match with
   html+body in front. Last word on phone text size. */
@media (max-width: 767px) {
  html body .cl-topbar__calltag,
  html body .cl-icon-btn__cap,
  html body .cl-mobile__foot, html body .cl-mobile__foot b, html body .cl-mobile__foot strong,
  html body .cl-hero2__trustText, html body .cl-hero2__trustText b, html body .cl-hero2__trustText strong,
  html body .cl-atc__opts-label,
  html body .cl-chip,
  html body .cl-ticker__list li, html body .cl-ticker__track li,
  html body span.onsale, html body .onsale,
  html body .cl-vial__pill, html body .cl-feat__tag, html body .cl-tabmini {
    font-size: 12px !important;
  }
}

/* ---- "Need a human" as a top bar, not a modal (Noah, 2026-09-22). It offers
   and gets out of the way: no scrim, never over the cart or checkout, gone by
   itself after 9s, and only once per page load. ---- */
.cl-helpbar {
  position: fixed; left: 12px; right: 12px; z-index: 10060;
  top: max(10px, env(safe-area-inset-top));
  display: flex; align-items: center; gap: 10px;
  padding: 10px 44px 10px 14px; box-sizing: border-box;
  border-radius: 14px;
  background: rgba(18, 12, 28, 0.96);
  box-shadow: inset 0 0 0 1px rgba(206, 172, 255, 0.34), 0 16px 36px -14px rgba(0, 0, 0, .95);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translateY(-140%); opacity: 0;
  transition: transform .28s cubic-bezier(.2, .9, .3, 1), opacity .2s ease;
}
.cl-helpbar.is-open { transform: none; opacity: 1; }
.cl-helpbar__text { flex: 1 1 auto; min-width: 0; font: 500 12.5px/1.4 var(--font-body); color: var(--ink-soft, #D2CADF); }
.cl-helpbar__text b { color: #fff; font-weight: 800; }
.cl-helpbar__acts { flex: 0 0 auto; display: flex; gap: 7px; }
.cl-helpbar__btn {
  min-height: 38px; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 11.5px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(206, 172, 255, .3);
}
.cl-helpbar__btn--call { color: #062B16; background: linear-gradient(180deg, #5CE49B, #21B36A); box-shadow: none; }
.cl-helpbar__x {
  position: absolute; top: 6px; right: 6px; width: 34px; height: 34px;
  border: 0; border-radius: 10px; background: none; cursor: pointer;
  font-size: 21px; line-height: 1; color: var(--ink-soft, #D2CADF);
}
/* it must never appear over a pop-up the customer is using */
body:is(.cl-co-open, .cl-qv-open, .cl-acct-open, .cl-ref-open, .cl-menu-open, .cl-pay-open) .cl-helpbar,
body:has(#cl-drawer.is-open) .cl-helpbar { display: none !important; }
@media (max-width: 420px) {
  .cl-helpbar { flex-wrap: wrap; }
  .cl-helpbar__text { flex: 1 1 100%; }
  .cl-helpbar__acts { flex: 1 1 100%; }
  .cl-helpbar__btn { flex: 1 1 0; }
}
/* the element keeps .cl-needhelp so the existing open/close code still finds
   it, so the old full-screen modal geometry has to be cancelled here */
html body .cl-needhelp.cl-helpbar {
  position: fixed !important;
  inset: auto !important;
  top: max(10px, env(safe-area-inset-top)) !important;
  left: 12px !important; right: 12px !important; bottom: auto !important;
  width: auto !important; height: auto !important; max-height: none !important;
  display: flex !important; align-items: center !important;
  background: rgba(18, 12, 28, 0.96) !important;
  padding: 10px 44px 10px 14px !important;
}
html body .cl-needhelp.cl-helpbar::before,
html body .cl-needhelp.cl-helpbar::after { content: none !important; }

/* ---- Shipping address, inline and already open. No summary card, no pop-up,
   no second X (Noah, 2026-09-22). Two-up for the name, three-up for the
   country/state/ZIP line — the shape the old sheet used. ---- */
html body .cl-addr-inline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 10px; }
/* The old float rules size these rows at 47%/percentages of whatever contains
   them, which inside a grid column measured 99px and 48px for the two name
   fields and left the state select 1px wide. The row is the grid item now, so
   it takes the column, and every control fills its row. */
html body .cl-addr-inline > .form-row,
html body .cl-addr-inline > .form-row.form-row-first,
html body .cl-addr-inline > .form-row.form-row-last,
html body .cl-addr-inline > .form-row.form-row-wide {
  width: auto !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important; float: none !important;
}
html body .cl-addr-inline input.input-text,
html body .cl-addr-inline input[type="text"],
html body .cl-addr-inline input[type="tel"],
html body .cl-addr-inline input[type="email"],
html body .cl-addr-inline select:not(.select2-hidden-accessible),
html body .cl-addr-inline .select2-container,
html body .cl-addr-inline .woocommerce-input-wrapper {
  width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; display: block !important;
}
/* select2 keeps the real <select> in the page for screen readers and hides it
   off to one side. The rule above was stretching those hidden helpers to full
   width and making them blocks, so the country and state ones pushed the
   checkout 31px wider than the screen (measured 2026-09-23). They are not for
   looking at — leave them exactly as select2 parked them. */
html body .cl-addr-inline select.select2-hidden-accessible {
  width: 1px !important; max-width: 1px !important; display: block !important;
}
html body .cl-addr-inline > .form-row { grid-column: 1 / -1; margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; }
html body .cl-addr-inline > #shipping_first_name_field,
html body .cl-addr-inline > #shipping_state_field { grid-column: 1 / 2; }
html body .cl-addr-inline > #shipping_last_name_field,
html body .cl-addr-inline > #shipping_postcode_field { grid-column: 2 / 3; }
html body .cl-addr-inline > .form-row label { display: block; margin-bottom: 5px; font-weight: 600; }
/* No blanket hide here.
 *
 * There used to be `html body .cl-am-summary, html body .cl-am { display:none }`
 * to stop the shipping summary card reappearing — but the SAME markup is what
 * the billing address builds when someone ticks "use a different billing
 * address", so that rule made every billing field 0x0 and nobody with a
 * separate billing address could check out (caught 2026-09-22).
 *
 * It was never needed: build() is simply not called for shipping any more, so
 * there is no shipping card or sheet in the document to hide. */

/* ---- The address row is a heading, not a disclosure: always open, nothing to
   tap (Noah, 2026-09-22 — "I shouldn't have to click it down"). ---- */
html body .cl-ck__row--static > .cl-ck__head {
  pointer-events: none !important; cursor: default !important; list-style: none !important;
}
html body .cl-ck__row--static > .cl-ck__head::-webkit-details-marker,
html body .cl-ck__row--static > .cl-ck__head::marker { display: none !important; content: "" !important; }
html body .cl-ck__row--static > .cl-ck__head .cl-ck__value:empty { display: none !important; }

/* ============================================================
   SCROLL LOCK — the page behind a pop-up must not move.
   ============================================================
   Every overlay on this site sets `body.<name>-open { overflow: hidden }`,
   and not one of them was working: measured on an iPhone viewport, the page
   behind the cart drawer, the checkout pop-up and quick view all scrolled
   about a thousand pixels while the overlay was open (2026-09-22).

   The cause is two rules away from the overlays. `html { overflow-x: clip }`
   makes the root element's overflow something other than `visible`, and the
   body's overflow only propagates to the viewport while the root's IS
   visible. So the body rule was silently doing nothing, everywhere.

   The lock has to sit on the root element itself. `overflow: hidden` keeps
   the scroll offset, so the page is still where the customer left it when the
   overlay closes.
   ============================================================ */
/* The lock itself now lives in assets/scroll-lock.js.
 *
 * `overflow: hidden` on the root is correct everywhere except iOS Safari,
 * where it snaps a scrolled page to the top — so adding to the cart dropped
 * the page before the drawer appeared (Noah, 2026-09-23). The script holds the
 * document at its own offset instead, which no browser moves. */
html:has(> body.cl-nothing-at-all) {
  overflow: hidden !important;
}
/*
 * The list above is EVERY class this site puts on <body> to mean "something is
 * covering the page" — there are fifteen of them and only nine were locked, so
 * the Call-a-human sheet, the billing address sheet and the referral overlay
 * all still let the page scroll underneath (Noah, 2026-09-23: "scroll lock
 * needs to be applied on every single part of the website").
 *
 * cl-sg-open is deliberately absent: that is the search suggestion dropdown,
 * not a cover, and freezing the page behind a dropdown would be the bug.
 *
 * Adding a new overlay? Add its class here or its lock will silently do
 * nothing — see the note on html{overflow-x:clip} above for why.
 */

/* A fling that runs past the end of a panel must stop there, not hand the
   remaining momentum to the page behind it. The pay dialog and quick-view
   card already contain theirs; the cart drawer's scroller did not. */
html body .cl-drawer__inner { overscroll-behavior: contain; }
/* The checkout runs in an iframe, and a fling that reaches the end of it would
   otherwise hand the leftover momentum to the page behind the pop-up. This has
   to go on the iframe document's ROOT for the same propagation reason as the
   scroll lock above — on <body> it would be ignored. */
html:has(> body.cl-embed) { overscroll-behavior: none !important; }
html body.cl-embed { overscroll-behavior: none; }

/* ---- Taps land straight away ------------------------------------------
   touch-action was not set anywhere on this site. Without it a tap on a
   control has to wait to see whether a second tap is coming (double-tap to
   zoom) before the browser will dispatch the click, and that wait is what
   makes buttons feel half a beat behind on a phone.

   `manipulation` keeps panning and pinch-zoom exactly as they are and drops
   only that wait, so nothing about accessibility changes. It is scoped to
   things you actually press rather than the whole document. */
a, button, summary, label,
input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"],
select, [role="button"], [role="tab"], [role="switch"],
.cl-btn, .cl-chip, .cl-icon-btn, .cl-qty button, .cl-pm__row {
  touch-action: manipulation;
}

/* ---- Home / Shop bar: one line, never stacked -------------------------
   "Shop products" wrapped inside a 170px pill whose overflow is hidden, so
   SHOP rendered on top of a clipped PRODUCTS (Noah, 2026-09-23). It stays on
   one line now, and the second word steps aside on a narrow phone rather than
   wrapping underneath. */
html body .cl-pagenav__home,
html body .cl-pagenav__shop { white-space: nowrap; }
/* One word on every phone.
   At 430px the pill showed "SHOP PRODUCTS" and clipped it; at 390 it hid the
   word. Rather than hunt for the exact width where it happens to fit, phones
   always read "SHOP →" — which matches "HOME" beside it and cannot overflow at
   any size (measured 2026-09-23). */
@media (max-width: 767px) {
  html body .cl-pagenav__word { display: none; }
}

/* ---- "Secure" keeps the lock, loses the sweep -------------------------
   A skewed highlight swept across the pill every few seconds. Caught halfway
   it reads as a stray caret jammed against the text — the "drop arrow" that
   looked broken in the payment row (Noah, 2026-09-23) — and it repainted a
   fixed element continuously for decoration. The lock and the word stay. */
html body .woocommerce-checkout #payment .cl-pm__sub::after {
  content: none !important;
  animation: none !important;
  display: none !important;
}

/* ---- No pinch-zoom, and pop-ups sized to what the keyboard leaves ------
   Noah, 2026-09-23: "don't allow me to really fuck with the zooming ... then
   it can't mess up and be as glitchy", and "Apple sometimes pops the keyboard
   up and then it fucks up the pop-up".

   iOS Safari ignores user-scalable=no in the viewport tag but does honour
   touch-action, so the pinch gesture has to be refused here as well as there.
   pan-x/pan-y keep ordinary scrolling untouched. */
html { touch-action: pan-x pan-y; }

/* --cl-vh is the height visualViewport actually reports (assets/viewport-lock.js).
   A panel pinned with inset:0 keeps the FULL window height when the keyboard is
   up, so its lower half — the field being typed in, and the button under it —
   hides behind the keyboard. Sizing to --cl-vh keeps the whole panel on screen.
   Everything falls back to 100dvh where visualViewport is missing. */
@media (max-width: 767px) {
  html body .cl-co,
  html body .cl-drawer,
  html body .cl-ask,
  html body .cl-pay,
  html body .cl-qv,
  html body .cl-promo,
  html body .cl-am,
  html body .cl-mobile,
  html body .cl-callsheet,
  html body .cl-refmodal,
  html body #cl-agegate {
    top: var(--cl-vtop, 0px) !important;
    bottom: auto !important;
    height: var(--cl-vh, 100dvh) !important;
    max-height: var(--cl-vh, 100dvh) !important;
  }
  /* the drawer's own panel is 100dvh tall in its own right */
  html body .cl-drawer__panel { height: var(--cl-vh, 100dvh) !important; }
}

/* ---- Anything pinned to the bottom follows the VISIBLE bottom -----------
   env(safe-area-inset-bottom) covers the home indicator. It does not cover
   Safari's floating bottom toolbar, and viewport-fit=cover deliberately lets
   the layout viewport run underneath that toolbar — so a control sitting
   16px off the bottom ends up behind Safari's own chrome, and taps land on
   the browser instead of the button (Noah, 2026-09-23: "clicking the cart
   that floats at the bottom is buggy").

   --cl-vh / --cl-vtop (assets/viewport-lock.js) describe the part of the page
   actually on screen, so measuring down from there puts these above the
   toolbar, and above the keyboard when it is up. 100dvh keeps the old
   behaviour where visualViewport is unavailable. */
@media (max-width: 767px) {
  /* Only while the keyboard is up. Safari's bottom toolbar collapses and
     expands as you scroll, which changes --cl-vh on every frame — positioning
     from it full-time made the bar and the cart button jitter the whole way
     down the page (Noah, 2026-09-23: "the bottom cart with the secure checkout
     ... doesn't scroll well, it glitches"). html.cl-keyboard is only set when
     the visible area loses more than 120px, which a toolbar never does. */
  html.cl-keyboard body .cl-cart-fab {
    bottom: auto !important;
    top: calc(var(--cl-vtop, 0px) + var(--cl-vh, 100dvh)
              - 56px - 18px - env(safe-area-inset-bottom)) !important;
  }
  /* Raised by however much of the bottom is not visible. NOT via transform —
     that is what slides the bar in and out (translateY(110%) -> 0), and
     overriding it would have pinned the bar permanently on screen. */
  html.cl-keyboard body .cl-sticky-cart {
    bottom: calc(100dvh - var(--cl-vtop, 0px) - var(--cl-vh, 100dvh)) !important;
  }
}

/* ---- The menu footer must not eat the last item's taps ------------------
   "Research Use Only • Not For Human Consumption" sits at 758..828 while the
   last menu row runs to 785, so the bottom half of "Refer a Friend" was
   covered and simply did not respond (measured 2026-09-23). It is a line of
   text with nothing to click, so it stops intercepting, and the list gets
   room to scroll clear of it. */
html body .cl-mobile__foot { pointer-events: none; }
html body .cl-mobile__nav { padding-bottom: 76px; }

/* ============================================================
   MENU SHEET — the menu's pages, up from the bottom
   ============================================================ */
.cl-sheet { position: fixed; inset: 0; z-index: 10030; }
.cl-sheet[hidden] { display: none; }
.cl-sheet__scrim {
  position: absolute; inset: 0; background: rgba(6, 5, 10, 0.72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 240ms ease;
}
.cl-sheet.is-open .cl-sheet__scrim { opacity: 1; }
.cl-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  /* 92% of what is actually visible — never behind the browser bar or keyboard */
  height: calc(var(--cl-vh, 100dvh) * 0.92);
  max-height: calc(var(--cl-vh, 100dvh) * 0.92);
  background: var(--ink-950, #0A090D);
  border-top: 1px solid rgba(155, 93, 229, 0.35);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -24px 70px -20px rgba(0, 0, 0, 0.92);
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  overscroll-behavior: contain;
}
.cl-sheet.is-open .cl-sheet__panel { transform: translateY(0); }
.cl-sheet__grip {
  flex: 0 0 auto; width: 42px; height: 4px; margin: 10px auto 2px;
  border-radius: 999px; background: rgba(217, 212, 224, 0.35);
}
.cl-sheet__head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 10px 18px;
}
.cl-sheet__title {
  flex: 1 1 auto; margin: 0; min-width: 0;
  font: 700 15px/1.25 var(--font-display, "Poppins"), sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--mist-50, #F5F3F7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-sheet__x {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); color: var(--mist-200, #D9D4E0);
  cursor: pointer; touch-action: manipulation;
}
.cl-sheet__body { position: relative; flex: 1 1 auto; min-height: 0; }
.cl-sheet__frame { display: block; width: 100%; height: 100%; border: 0; background: var(--ink-950, #0A090D); }
.cl-sheet__loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ink-950, #0A090D); }
.cl-sheet__loading[hidden] { display: none; }
.cl-sheet__spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(155, 93, 229, 0.3); border-top-color: var(--ui-400, #9B5DE5);
  animation: cl-sheet-spin 700ms linear infinite;
}
@keyframes cl-sheet-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cl-sheet__panel, .cl-sheet__scrim { transition: none; }
  .cl-sheet__spin { animation: none; }
}
/* roomier on a tablet or desktop, still a sheet */
@media (min-width: 768px) {
  .cl-sheet__panel { left: 50%; right: auto; width: min(720px, 92vw); transform: translate(-50%, 100%); border-radius: 22px 22px 0 0; }
  .cl-sheet.is-open .cl-sheet__panel { transform: translate(-50%, 0); }
}

/* The help bar never shows over something. It is created when you leave
   checkout, and if an overlay opens afterwards it slid down across it mid-
   scroll, which read as the page glitching (measured 2026-09-23). */
html body[class*="-open"] .cl-needhelp { display: none !important; }

/* The second word must look like the first.
   An existing rule styles spans inside this pill for the arrow (weight 500,
   #E6E2EB), and the word "products" inherited it — so the button read as
   bright SHOP next to a dim PRODUCTS, which looked broken (Noah, 2026-09-23,
   screenshot). The arrow keeps its own look; the word matches the label. */
html body .cl-pagenav__shop .cl-pagenav__word,
html body .cl-pagenav__home .cl-pagenav__word {
  font-weight: inherit !important;
  color: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  opacity: 1 !important;
}

/* While the checkout sheet is sliding, its frame is not painted — see the note
   in assets/checkout-modal.js. visibility (not display) so the frame keeps its
   size and nothing reflows when it appears. */
html body .cl-co.is-settling .cl-co__frame { visibility: hidden !important; }
html body .cl-co.is-settling .cl-co__loading { display: flex !important; }

/* ---- A tap has to look like it landed -----------------------------------
   The hero's SHOP button had a :hover rule and nothing else. Phones have no
   hover, so pressing it changed nothing on screen until the next page
   arrived a second later — which reads as the button being broken rather
   than the page being slow (Noah, 2026-09-23: "the shop now button on mobile
   is glitched").

   transform and opacity only, so the feedback is drawn on the compositor and
   cannot itself stutter. 90ms out, 160ms back: quick enough to feel like the
   press, slow enough to be seen. */
@media (hover: none) {
  html body .cl-btn,
  html body .cl-hero2__shop,
  html body .cl-hero2__cta,
  html body .cl-pagenav__home,
  html body .cl-pagenav__shop,
  html body .cl-atc__btn,
  html body .add_to_cart_button,
  html body .cl-chip,
  html body .single_add_to_cart_button,
  html body .cl-drawer__cta,
  html body .cl-sheet__x,
  html body .cl-icon-btn {
    transition: transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1), opacity 160ms ease;
  }
  html body .cl-btn:active,
  html body .cl-hero2__shop:active,
  html body .cl-hero2__cta:active,
  html body .cl-pagenav__home:active,
  html body .cl-pagenav__shop:active,
  html body .cl-atc__btn:active,
  html body .add_to_cart_button:active,
  html body .cl-chip:active,
  html body .single_add_to_cart_button:active,
  html body .cl-drawer__cta:active,
  html body .cl-sheet__x:active,
  html body .cl-icon-btn:active {
    transform: scale(0.96);
    opacity: 0.88;
    transition-duration: 90ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .cl-btn:active, html body .cl-hero2__shop:active,
  html body .cl-atc__btn:active, html body .add_to_cart_button:active { transform: none; }
}

/* ---- "Tell me when it is back" on a sold-out card ---------------------- */
.cl-atc--out { display: flex; flex-direction: column; gap: 8px; }
.cl-wait__open {
  min-height: 44px;                 /* a fingertip, like every other control */
  padding: 8px 14px;
  border: 1px solid rgba(155, 93, 229, 0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--mist-100, #EDE9F2);
  font-family: var(--font-display, "Poppins"), sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer; touch-action: manipulation;
  transition: background 160ms ease, border-color 160ms ease;
}
.cl-wait__open:active { background: rgba(155, 93, 229, 0.18); }
.cl-wait__form { display: flex; gap: 6px; }
.cl-wait__form[hidden] { display: none; }
.cl-wait__email {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(155, 93, 229, 0.45);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--mist-50, #F5F3F7);
  font-size: 15px;                  /* 16px or less zooms the page on iOS; 15 is safe with zoom off */
}
.cl-wait__email::placeholder { color: var(--mist-400, #A39DAE); }
.cl-wait__go { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; font-size: 12.5px; }
.cl-wait__said {
  margin: 0; padding: 6px 2px;
  color: #3DD68C;
  font-size: 12.5px; line-height: 1.4; text-align: center;
}
.cl-wait__said[hidden] { display: none; }

/* ============================================================
   NOTHING UNDER 12px ON A PHONE
   ============================================================
   Noah asked more than once for the site to be easier to read, and eight
   things were still below the floor: "Sale!" at 10.5px, the nav captions and
   the hero trust line at 11px, the category chips, the research-use notice
   and the Strength label at 11.5px.

   Earlier attempts at this lost. `html body .cl-chip` (0,1,2) was beaten by
   `.cl-chips .cl-chip !important` (0,2,0), and it stayed 11.5px while being
   reported as fixed. Each selector below was checked with sc/css-wins.js and
   is specific enough to win, and sc/readable.js proves the rendered result.
   ============================================================ */
@media (max-width: 767px) {
  /* category chips — beat .cl-chips .cl-chip (0,2,0) */
  html body .cl-chips .cl-chip,
  html body .cl-chips a,
  html body .cl-chips .cl-chip.is-active { font-size: 12.5px !important; }

  /* the sale flash — beat .woocommerce ul.products li.product span.onsale (0,4,3) */
  html body .woocommerce ul.products li.product span.onsale,
  html body .woocommerce ul.products li.product .onsale,
  html body ul.products li.product span.onsale,
  html body .woocommerce span.onsale,
  html body span.onsale,
  html body .onsale {
    /* px, never em: `.woocommerce span.onsale { font-size: 0.857em }` scales
       off whatever it sits in, which is how this stayed at 10.5px. */
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }

  /* nav captions — must beat .cl-header .cl-icon-btn__cap (0,2,0) */
  html body .cl-header .cl-icon-btn__cap,
  html body .cl-header .cl-nav-label,
  html body .cl-icon-btn__cap,
  html body .cl-nav-label { font-size: 12px !important; }

  /* the research-use lines, wherever they appear. The hero one sits inside
     .cl-hero2, so the parent has to be named to out-rank its own rule. */
  html body .cl-hero2 .cl-hero2__trustText,
  html body .cl-hero2 .cl-hero2__trust strong,
  html body .cl-trustbar__item strong,
  html body .cl-ticker__item strong,
  html body .cl-hero2__trustText,
  html body .cl-ruo-notice,
  html body .cl-trustbar strong,
  html body .cl-ticker strong,
  html body .cl-chero__ruo { font-size: 12.5px !important; }

  /* form labels on the product page */
  html body .cl-atc__opts-label,
  html body form.cart .variations label,
  html body .variations th label,
  html body table.variations label { font-size: 12.5px !important; }
}

/* The sale flash, by its full path.
   Shorter selectors with !important kept losing to something this file could
   not see — the badge stayed 10.5px through three attempts. This names every
   step from the grid to the span, which nothing else in the stylesheet does. */
@media (max-width: 767px) {
  html body .woocommerce ul.products li.product a.woocommerce-LoopProduct-link span.onsale,
  html body ul.products li.product a span.onsale {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }
  html body .cl-hero2 .cl-hero2__trust .cl-hero2__trustText,
  html body .cl-hero2 p.cl-hero2__trustText { font-size: 12.5px !important; }
  html body .cl-trustbar strong, html body .cl-trustbar__item strong,
  html body .woocommerce-products-header strong,
  html body .term-description strong, html body .cl-chero strong { font-size: 12.5px !important; }
}

/* The trust bar's bold text, by the path the browser reported:
   ul.cl-trustbar > li.cl-trustbar__item > span.cl-trustbar__text > strong */
@media (max-width: 767px) {
  html body ul.cl-trustbar li.cl-trustbar__item span.cl-trustbar__text strong,
  html body .cl-trustbar__text strong { font-size: 12.5px !important; }
}

/* ============================================================
   CATALOGUE CARD: the strengths line
   ------------------------------------------------------------
   The home page's featured cards have always shown "5 · 10 · 20 MG"; the
   catalogue grid showed a price and a button and nothing about what sizes the
   product comes in (Noah, 2026-09-23). Same pill, same type, same plum tint —
   the two card styles should not look like two different shops.

   Centred, because on a phone every label on this site is (see the centring
   sweep). 12.5px is the readability floor, which sc/verify.js enforces.
   ============================================================ */
.woocommerce ul.products li.product .cl-cardsizes,
html body .cl-cardsizes {
  display: block !important;
  box-sizing: border-box !important;
  width: calc(100% - 24px) !important;
  margin: 2px auto 10px !important;
  padding: 7px 8px !important;
  border-radius: 999px !important;
  background: rgba(206, 172, 255, 0.16) !important;
  color: #D6BEFF !important;
  font: 600 12.5px/1.2 var(--font-body) !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 767px) {
  .woocommerce ul.products li.product .cl-cardsizes,
  html body .cl-cardsizes {
    width: calc(100% - 20px) !important;
    margin: 2px auto 9px !important;
    padding: 6px 6px !important;
  }
}

/* ============================================================
   CORE10 EMAIL POP-UP  (.cl-wb)
   ------------------------------------------------------------
   Two steps: ask, then email, then the code. Same dark glass as every other
   panel on the site — a pop-up that looks like a third-party plugin reads as
   an ad and gets dismissed unread.

   Type never goes under 12.5px: sc/verify.js enforces that floor and this is
   the screen where a discount is won or lost.
   ============================================================ */
.cl-wb {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: flex-end; justify-content: center;
}
.cl-wb[hidden] { display: none; }

.cl-wb__scrim {
  position: absolute; inset: 0;
  background: rgba(6, 4, 10, 0.72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 220ms ease;
}
.cl-wb.is-open .cl-wb__scrim { opacity: 1; }

.cl-wb__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 30px 22px calc(26px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, #17151C 0%, #0E0C13 100%);
  border: 1px solid rgba(206, 172, 255, 0.24);
  border-bottom: 0;
  box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, 0.95), 0 0 34px -18px rgba(155, 93, 229, 0.65);
  transform: translateY(102%);
  transition: transform 300ms cubic-bezier(.2, .9, .3, 1);
  text-align: center;
}
.cl-wb.is-open .cl-wb__panel { transform: translateY(0); }

.cl-wb__x {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, 0.06);
  color: var(--mist-300); border: 0; cursor: pointer;
}
.cl-wb__x:active { transform: scale(0.94); }

.cl-wb__badge {
  display: inline-block; margin: 0 0 14px; padding: 7px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #A970EC 0%, #7B3FB2 100%);
  color: #fff;
  font: 700 13px/1 var(--font-display);
  letter-spacing: 0.08em;
}

.cl-wb__title {
  margin: 0 0 8px;
  color: var(--mist-50);
  font: 700 22px/1.25 var(--font-display);
  letter-spacing: 0.01em;
}
.cl-wb__sub { margin: 0 0 20px; color: var(--mist-300); font: 400 14px/1.45 var(--font-body); }
.cl-wb__fine { margin: 14px 0 0; color: var(--mist-500); font: 400 12.5px/1.4 var(--font-body); }

.cl-wb__yes {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; box-sizing: border-box;
  margin: 0 0 10px; padding: 0 18px;
  border: 0; border-radius: 13px;
  background: linear-gradient(180deg, #A970EC 0%, #7B3FB2 100%);
  color: #fff; font: 700 16px/1 var(--font-display);
  box-shadow: 0 10px 22px -10px rgba(123, 63, 178, 0.85);
  cursor: pointer; text-decoration: none;
}
.cl-wb__yes:active { transform: scale(0.97); }
.cl-wb__yes[disabled] { opacity: 0.6; }

.cl-wb__no {
  width: 100%; min-height: 44px;
  background: none; border: 0;
  color: var(--mist-400);
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
}

.cl-wb__input {
  width: 100%; box-sizing: border-box;
  min-height: 52px; margin: 0 0 10px; padding: 0 16px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(206, 172, 255, 0.26);
  color: var(--mist-50);
  /* 16px exactly: anything smaller and iOS zooms the page on focus. */
  font: 400 16px/1 var(--font-body);
  text-align: center;
}
.cl-wb__input::placeholder { color: var(--mist-500); }
.cl-wb__input:focus { outline: 2px solid var(--ui-ring); outline-offset: 1px; }

.cl-wb__err { margin: 8px 0 0; color: #FF8B8B; font: 500 13px/1.4 var(--font-body); }
.cl-wb__err[hidden] { display: none; }

.cl-wb__code {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; box-sizing: border-box;
  min-height: 62px; margin: 0 0 14px; padding: 12px;
  border-radius: 13px;
  background: rgba(206, 172, 255, 0.12);
  border: 1px dashed rgba(206, 172, 255, 0.5);
  cursor: pointer;
}
.cl-wb__codeText {
  color: #EDE6F7;
  font: 700 26px/1 var(--font-display);
  letter-spacing: 0.16em;
}
.cl-wb__copyHint { color: var(--mist-500); font: 400 12.5px/1 var(--font-body); }

/* Desktop: centre it rather than letting a phone sheet stretch across a monitor. */
@media (min-width: 768px) {
  .cl-wb { align-items: center; }
  .cl-wb__panel { border-radius: 22px; border-bottom: 1px solid rgba(206, 172, 255, 0.24); transform: translateY(18px) scale(0.97); opacity: 0; transition: transform 260ms cubic-bezier(.2,.9,.3,1), opacity 200ms ease; }
  .cl-wb.is-open .cl-wb__panel { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-wb__panel, .cl-wb__scrim { transition: none; }
}

/* ============================================================
   PAYMENT PANELS — fade, never slide
   ------------------------------------------------------------
   WooCommerce animates these ~700px panels open and shut with jQuery
   slideUp/slideDown, which animates HEIGHT from JavaScript and relayouts the
   whole checkout every frame. Measured on desktop: every payment option threw
   2-5 frames over 100ms per click, worst 247ms (2026-09-23).

   Opacity and transform are composited — no layout, no reflow — so the panel
   arrives in one frame and fades. assets/payment-boxes.js ends the jQuery
   animation so these rules are what the shopper actually sees.

   `contain: layout paint` stops a change inside a panel from forcing the rest
   of the checkout to be re-laid out with it.
   ============================================================ */
.woocommerce-checkout .payment_box,
.wc_payment_method .payment_box {
  contain: layout paint;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.2, .9, .3, 1);
  will-change: opacity;
}

.woocommerce-checkout .payment_box.cl-pb-in,
.wc_payment_method .payment_box.cl-pb-in {
  opacity: 1;
  transform: translateY(0);
}

/* A panel that JS never reached must still be readable — never leave a
   shopper looking at an invisible payment instruction. */
.no-js .woocommerce-checkout .payment_box,
.woocommerce-checkout .payment_box:not(.cl-pb-in):not([style*="display: none"]) {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-checkout .payment_box,
  .wc_payment_method .payment_box { transition: none; }
}

/* ============================================================
   PAY POP-UP — give it an entrance
   ------------------------------------------------------------
   This modal had no transition at all: it appeared instantly while every
   other overlay on the site slides in. On a fresh load that hides inside the
   page render, but pressing BACK from the Stripe page restores the document
   instantly and the pop-up simply pops into existence — which is what Noah
   saw as a bad animation on the back arrow (2026-09-23).

   The "from" state is applied ONLY when JavaScript has added .cl-pay--anim,
   so if the script never runs the pop-up is still fully visible. An offer
   screen that depends on JS to be seen is a worse bug than no animation.
   ============================================================ */
.cl-pay.cl-pay--anim .cl-pay__dialog {
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.2, .9, .3, 1);
  will-change: transform;
}
.cl-pay.cl-pay--anim .cl-pay__overlay {
  opacity: 0;
  transition: opacity 240ms ease;
}

.cl-pay.cl-pay--anim.is-open .cl-pay__dialog { transform: translateY(0); }
.cl-pay.cl-pay--anim.is-open .cl-pay__overlay { opacity: 1; }

/* Desktop: a centred card should scale in, not slide off the bottom. */
@media (min-width: 600px) {
  .cl-pay.cl-pay--anim .cl-pay__dialog {
    transform: translateY(14px) scale(0.98);
    opacity: 0;
    transition: transform 280ms cubic-bezier(.2, .9, .3, 1), opacity 200ms ease;
  }
  .cl-pay.cl-pay--anim.is-open .cl-pay__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-pay.cl-pay--anim .cl-pay__dialog,
  .cl-pay.cl-pay--anim .cl-pay__overlay { transition: none; }
}

/* ============================================================
   THE PAY PAGE — strip it back to the job
   ------------------------------------------------------------
   Measured at 1440x900 before this (2026-09-23):

     announce bar   49px
     ticker         37px
     header + nav  154px   (search bar alone 81px)
     title block   153px
     order summary 233px
     ----------------------------------
     card form starts at 723px, on a 900px screen

   So the one thing this page exists for was below the fold. Someone paying
   for an order does not need a product search bar, a marketing ticker or a
   nav full of ways to leave.

   KEPT deliberately: the logo, the phone number and the order summary. Trust
   marks and "what am I paying for" belong here; everything else is an exit.
   ============================================================ */
body.cl-paypage .cl-ticker,
body.cl-paypage .cl-marquee,
body.cl-paypage .cl-search,
body.cl-paypage form[role="search"],
body.cl-paypage .cl-header__search,
body.cl-paypage .cl-navpill {
  display: none !important;
}

/* Nav links go; the logo stays. A page with no way home reads as a trap, so
   the wordmark remains clickable. */
body.cl-paypage .cl-header__nav,
body.cl-paypage .cl-header nav,
body.cl-paypage .cl-mobile,
body.cl-paypage .cl-menu-toggle,
body.cl-paypage .cl-cart-btn,
body.cl-paypage .cl-acct-btn {
  display: none !important;
}

body.cl-paypage .cl-header {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 0 !important;
}

/* The title does not need to shout on a page with one purpose. */
body.cl-paypage .cl-content > h1,
body.cl-paypage .entry-title,
body.cl-paypage h1.entry-title {
  margin: 0 0 14px !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
}

body.cl-paypage .cl-content,
body.cl-paypage .site-main,
body.cl-paypage main {
  padding-top: 18px !important;
}

/* Tighten the summary: it is a receipt, not a feature. */
body.cl-paypage .shop_table th,
body.cl-paypage .shop_table td {
  padding: 9px 14px !important;
}

/* The floating helper tabs sit right over the card fields on desktop. */
@media (min-width: 900px) {
  body.cl-paypage .cl-calltab,
  body.cl-paypage .cl-asktab { display: none !important; }
}

/*
 * Hide the stored payment method on the pay page.
 *
 * The summary prints "Payment method: Bitcoin" from the order record while
 * the shopper is standing on the CARD page about to pay by card. It
 * contradicts the thing they are doing, and on a payment screen a
 * contradiction reads as "something is wrong with my order" (2026-09-23).
 * What they are choosing is right below; the stale value adds nothing.
 */
body.cl-paypage .shop_table tfoot tr:last-child,
body.cl-paypage .woocommerce-order-pay .shop_table tfoot tr:last-child {
  display: none !important;
}

/* ============================================================
   THE 12.5px FLOOR — the last two places still under it
   ------------------------------------------------------------
   Found by the desktop sweep (2026-09-24), which measured every page at both
   widths rather than just phones:

     announcement bar   10px on MOBILE, 12px desktop
     ticker             12px mobile,    11px desktop

   The announcement bar is the worst of the two: it carries the phone number
   and the free-shipping threshold, at 10px, on the width 90% of people use.
   Everything else on this site holds a 12.5px floor and sc/verify.js enforces
   it — these slipped through because that check only walks three pages.

   Letter-spacing comes down a touch alongside the size increase, so the bar
   does not get longer and start wrapping.
   ============================================================ */
html body .cl-topbar__label,
html body .cl-topbar__calltag {
  font-size: 12.5px !important;
  letter-spacing: 0.06em !important;
}

html body .cl-ticker__list li {
  font-size: 12.5px !important;
}

@media (max-width: 560px) {
  /* Tight bar on a small phone: keep the size, buy the room back from the
     spacing rather than from the type. */
  html body .cl-topbar__label,
  html body .cl-topbar__calltag {
    letter-spacing: 0.03em !important;
  }
}

/* ---- The same 12px floor on a wide screen (2026-09-24).
   The floor above is wrapped in max-width:767px, so desktop kept the old sizes
   and three things ended up SMALLER on a 1440px monitor than on a phone:
   feature tags 10.5px, the hero trust line 11px, the menu footer 11px. Only
   those three are listed — a blanket 12px here would shrink chips, the ticker
   and the call tag, which are deliberately larger on desktop. ---- */
@media (min-width: 768px) {
  html body .cl-feat__tag,
  html body .cl-mobile__foot, html body .cl-mobile__foot *,
  html body .cl-mobile__foot b, html body .cl-mobile__foot strong {
    font-size: 12px !important;
  }
}

/* ---- Desktop, second pass (2026-09-24).
   Raising the hero trust line exposed the rest of the same class: the shop
   ticker's bold words at 11px, the sticky cart's shipping line at 11.5px, the
   research-use notice and the strength label at 11.5px — all of them correct
   on a phone and smaller on a 1440px monitor. The selectors below copy the
   shape of the rules that were winning (html body:not(.cl-x) main :is(...)),
   because a plainer selector loses to them no matter how late it appears. ---- */
@media (min-width: 768px) {
  html body:not(.cl-x) main :is(.cl-trustbar__text, .cl-trustbar__text strong,
    .cl-trustbar strong, .cl-trustbar__item strong,
    .cl-ticker strong, .cl-ticker__item strong,
    .cl-ticker__list li, .cl-ticker__track li),
  html body:not(.cl-x) :is(.cl-trustbar strong, .cl-trustbar__item strong,
    .cl-ticker strong, .cl-ticker__item strong,
    .cl-ticker__list li, .cl-ticker__track li),
  html body:not(.cl-x) main form label,
  html body:not(.cl-x) #cl-refsheet form label,
  html body:not(.cl-x) main .cl-ruo-notice,
  html body:not(.cl-x) .cl-ruo-notice,
  html body:not(.cl-x) .cl-sticky-cart__ship {
    font-size: 12px !important;
  }
}

/* ---- Starter pack spec block (2026-09-26).
   The tabbed description centres everything, which is fine for a paragraph and
   bad for a list of what is in a box — the eye has no left edge to run down.
   Here the contents get a real two-column row: what it is on the left, the
   detail on the right, one line each. Scanned in about two seconds instead of
   read. Matches the winning selector shape so it does not lose the cascade. ---- */
html body:not(.cl-x) .cl-pack {
  max-width: 460px !important;
  margin: 0 auto !important;
  text-align: left !important;
}
html body:not(.cl-x) .cl-pack__lede {
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  margin: 0 0 18px !important;
  text-align: left !important;
  color: var(--mist-200, #D7CFE4) !important;
}
html body:not(.cl-x) .cl-pack__list {
  list-style: none !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border-top: 1px solid rgba(190, 160, 255, 0.16) !important;
}
html body:not(.cl-x) .cl-pack__list li {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 11px 0 !important;
  border-bottom: 1px solid rgba(190, 160, 255, 0.16) !important;
  text-align: left !important;
  list-style: none !important;
}
html body:not(.cl-x) .cl-pack__what {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  color: #fff !important;
}
html body:not(.cl-x) .cl-pack__detail {
  font-size: 13px !important;
  color: var(--mist-400, #A79CBC) !important;
  white-space: nowrap !important;
  text-align: right !important;
}
html body:not(.cl-x) .cl-pack .cl-pack__syringe {
  display: block !important;
  width: 168px !important;
  height: auto !important;
  margin: 18px 0 16px !important;
  color: var(--accent-300, #A472F5) !important;
}
html body:not(.cl-x) .cl-pack__note,
html body:not(.cl-x) .cl-pack__ruo {
  font-size: 13px !important;
  line-height: 1.55 !important;
  text-align: left !important;
  margin: 0 0 10px !important;
  color: var(--mist-400, #A79CBC) !important;
}
html body:not(.cl-x) .cl-pack__ruo {
  margin: 14px 0 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(190, 160, 255, 0.16) !important;
}
/* a phone has no room for two columns on one line */
@media (max-width: 520px) {
  html body:not(.cl-x) .cl-pack__list li {
    display: block !important;
    padding: 10px 0 !important;
  }
  html body:not(.cl-x) .cl-pack__detail {
    display: block !important;
    text-align: left !important;
    white-space: normal !important;
    margin-top: 2px !important;
  }
}

/* ---- The Home / Shop bar needs its own ground (2026-09-26).
   On a phone .cl-pagenav had no background, so the buttons landed exactly on
   the seam where the black header stops and the purple hero starts — a hard
   line straight through them, which is the "shading" Noah saw. On desktop it
   had a gradient fading 0.88 -> 0.72, which smears under the buttons instead
   of ending cleanly.

   One flat band at both widths: the bar reads as the bottom of the header, the
   seam lands on its border instead of on the buttons, and nothing fades. ---- */
html body:not(.cl-x) .cl-pagenav {
  background: rgba(10, 8, 16, 0.96) !important;
  border-bottom: 1px solid rgba(206, 172, 255, 0.14) !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
@media (min-width: 768px) {
  html body:not(.cl-x) .cl-pagenav {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}
/* the buttons sit ON that band, so they carry their own edge */
html body:not(.cl-x) .cl-pagenav__home {
  background: rgba(30, 20, 46, 0.96) !important;
  border: 1px solid rgba(206, 172, 255, 0.34) !important;
  box-shadow: none !important;
}
html body:not(.cl-x) .cl-pagenav__shop {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
              0 6px 16px -8px rgba(30, 6, 70, 0.9) !important;
}

/* ---- Starter Bundles (2026-09-26).
   Two cards above "Start with these". Sizes are fixed at 1:1 with explicit
   width/height on the image so nothing shifts while it loads — the section is
   above the fold on a phone and a jump there costs the sale. ---- */
html body:not(.cl-x) .cl-bundles {
  padding: 54px 0 58px !important;
  background: #0A070D !important;
  border-top: 1px solid rgba(206, 172, 255, 0.14) !important;
  border-bottom: 1px solid rgba(206, 172, 255, 0.14) !important;
}
html body:not(.cl-x) .cl-bundles__inner { max-width: 1120px !important; margin: 0 auto !important; }
html body:not(.cl-x) .cl-bundles__eyebrow {
  font-family: var(--font-display) !important; font-size: 12.5px !important; font-weight: 600 !important;
  letter-spacing: 0.24em !important; text-transform: uppercase !important;
  color: var(--accent-300, #A472F5) !important; text-align: center !important; margin: 0 0 10px !important;
}
html body:not(.cl-x) .cl-bundles__title {
  font-family: var(--font-display) !important; font-size: clamp(25px, 4.4vw, 36px) !important;
  font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important;
  color: #F4F0FA !important; text-align: center !important; margin: 0 0 8px !important;
}
html body:not(.cl-x) .cl-bundles__lede {
  font-size: 15px !important; line-height: 1.55 !important; color: #C0B5D6 !important;
  text-align: center !important; max-width: 54ch !important; margin: 0 auto 32px !important;
}
html body:not(.cl-x) .cl-bundles__grid {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 26px !important; list-style: none !important; margin: 0 !important; padding: 0 !important;
}
html body:not(.cl-x) .cl-bundle {
  display: flex !important; flex-direction: column !important; list-style: none !important; margin: 0 !important;
  background: linear-gradient(180deg, #171021, #100B18) !important;
  border: 1px solid rgba(206, 172, 255, 0.20) !important;
  border-radius: 18px !important; overflow: hidden !important;
}
html body:not(.cl-x) .cl-bundle__media {
  display: block !important; aspect-ratio: 1 / 1 !important; background: #0A070D !important;
}
html body:not(.cl-x) .cl-bundle__img {
  width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important;
}
html body:not(.cl-x) .cl-bundle__body {
  display: flex !important; flex-direction: column !important; gap: 12px !important;
  padding: 22px !important; flex: 1 !important;
}
html body:not(.cl-x) .cl-bundle__name { margin: 0 !important; }
html body:not(.cl-x) .cl-bundle__name a {
  font-family: var(--font-display) !important; font-size: 16.5px !important; font-weight: 700 !important;
  letter-spacing: 0.10em !important; text-transform: uppercase !important; color: #fff !important;
  text-decoration: none !important;
}
html body:not(.cl-x) .cl-bundle__price,
html body:not(.cl-x) .cl-bundle__price .amount {
  font-family: var(--font-display) !important; font-size: 29px !important; font-weight: 700 !important;
  color: #fff !important; margin: 0 !important; font-variant-numeric: tabular-nums !important;
}
html body:not(.cl-x) .cl-bundle__desc {
  font-size: 13.5px !important; line-height: 1.55 !important; color: #B6AACD !important; margin: 0 !important;
}
html body:not(.cl-x) .cl-bundle__spec {
  list-style: none !important; margin: 0 !important; padding: 14px 0 0 !important;
  display: flex !important; flex-direction: column !important; gap: 8px !important;
  border-top: 1px solid rgba(206, 172, 255, 0.16) !important;
}
html body:not(.cl-x) .cl-bundle__spec li {
  display: flex !important; justify-content: space-between !important; gap: 14px !important;
  font-size: 13px !important; color: #B6AACD !important; margin: 0 !important; list-style: none !important;
}
html body:not(.cl-x) .cl-bundle__spec li span:first-child {
  font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: 0.05em !important;
  text-transform: uppercase !important; color: #fff !important; font-size: 12.5px !important;
}
html body:not(.cl-x) .cl-bundle__btn {
  margin-top: auto !important; display: flex !important; align-items: center !important;
  justify-content: center !important; min-height: 52px !important; border-radius: 12px !important;
  border: 1px solid rgba(206, 172, 255, 0.85) !important;
  background: linear-gradient(180deg, #8A4FD8 0%, #5E26A0 100%) !important;
  color: #fff !important; font-family: var(--font-display) !important; font-weight: 700 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important; font-size: 13px !important;
  text-decoration: none !important;
}
html body:not(.cl-x) .cl-bundle__btn:focus-visible {
  outline: 3px solid #CEACFF !important; outline-offset: 3px !important;
}
html body:not(.cl-x) .cl-bundle__ruo { font-size: 12px !important; color: #8E82A6 !important; margin: 0 !important; }

@media (max-width: 760px) {
  html body:not(.cl-x) .cl-bundles__grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  html body:not(.cl-x) .cl-bundle__btn { width: 100% !important; }
  html body:not(.cl-x) .cl-bundles { padding: 40px 0 44px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body:not(.cl-x) .cl-bundle,
  html body:not(.cl-x) .cl-bundle__btn { transition: none !important; animation: none !important; }
}

/* ---- Reserve the bundles' space before the images resolve (2026-09-26).
   Measured: with the section hidden the home page scores 0 layout shift; with
   it, 0.33 on desktop. The section is ~1170px tall and lands between the hero
   and "Start with these", so everything below it moves once it is laid out.
   Putting the ratio on the IMG itself — not only its wrapper — and sizing the
   `sizes` hint to the real slot lets the browser hold the space from the first
   pass instead of reflowing when the file arrives. ---- */
html body:not(.cl-x) .cl-bundle__img {
  aspect-ratio: 1 / 1 !important;
  max-width: 100% !important;
}
html body:not(.cl-x) .cl-bundle__media {
  contain: layout paint !important;
}
html body:not(.cl-x) .cl-bundles__grid { min-height: 1px !important; }

/* ---- Hold the hero's height before the vials arrive (2026-09-26).
   Measured on the live page: the stage was 20px at first paint and 600px once
   the three cut-outs loaded, so everything below the hero dropped 579px about
   a second in. Two causes, both fixed here and in inc/hero.php:

     1. The <img> slots declared width=420 height=420 — square — while the real
        cut-outs are 625x1374. Even a loaded image reserved less than half its
        true height. The attributes are corrected; this sets the ratio in CSS
        too so it holds whichever source the srcset picks.
     2. The slots render with [hidden] until the script fills them in, so the
        stage collapsed to nothing. min-height now reserves the height the
        centre vial will actually occupy: its width times the cut-out ratio
        (1374/625 = 2.198), plus the pill and gap beneath it. ---- */
html body:not(.cl-x) .cl-vial__img {
  aspect-ratio: 625 / 1374 !important;
  height: auto !important;
}
html body:not(.cl-x) .cl-hero2__stage {
  min-height: calc(clamp(100px, 24vw, 200px) * 2.198 + 46px) !important;
}
@media (min-width: 768px) {
  html body:not(.cl-x) .cl-hero2__stage {
    min-height: calc(clamp(180px, 18vw, 234px) * 2.198 + 62px) !important;
  }
}

/* ---- "Card payments are down" notice (2026-09-26) ---- */
html.cl-pn-open { overflow: hidden !important; }
html body:not(.cl-x) .cl-paynotice {
  position: fixed !important; inset: 0 !important; z-index: 10090 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 20px !important; opacity: 0; transition: opacity .22s ease;
}
html body:not(.cl-x) .cl-paynotice.is-open { opacity: 1; }
html body:not(.cl-x) .cl-paynotice[hidden] { display: none !important; }
html body:not(.cl-x) .cl-paynotice__scrim {
  position: absolute !important; inset: 0 !important;
  background: rgba(6, 4, 10, 0.78) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html body:not(.cl-x) .cl-paynotice__box {
  position: relative !important; width: min(440px, 100%) !important;
  /*
   * A flex column whose MIDDLE scrolls, so "Continue to the shop" is always
   * on screen. When the whole box scrolled, the button fell below the fold
   * inside the pop-up on any screen under ~700px tall — a 667px iPhone put it
   * at 721px, unreachable, with nothing indicating the box could scroll.
   * Uses dvh so a phone's shrinking address bar cannot push it off either.
   */
  display: flex !important; flex-direction: column !important;
  max-height: 88vh !important; max-height: 88dvh !important; overflow: hidden !important;
  background: linear-gradient(180deg, #1A1226, #100B18) !important;
  border: 1px solid rgba(190, 160, 255, 0.28) !important;
  border-radius: 20px !important; padding: 26px 24px 24px !important;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95) !important;
  transform: translateY(10px); transition: transform .22s ease;
}
html body:not(.cl-x) .cl-paynotice.is-open .cl-paynotice__box { transform: translateY(0); }
html body:not(.cl-x) .cl-paynotice__x {
  position: absolute !important; top: 8px !important; right: 8px !important;
  min-width: 44px !important; min-height: 44px !important; border: 0 !important;
  background: none !important; color: #A79CBC !important; font-size: 22px !important;
  cursor: pointer !important; border-radius: 12px !important;
}
html body:not(.cl-x) .cl-paynotice__x:focus-visible { outline: 3px solid #CEACFF !important; outline-offset: 2px !important; }
html body:not(.cl-x) .cl-paynotice__eb {
  font-family: var(--font-display) !important; font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: 0.20em !important; text-transform: uppercase !important;
  color: #F0B44B !important; margin: 0 0 8px !important;
}
html body:not(.cl-x) .cl-paynotice__title {
  font-family: var(--font-display) !important; font-size: 21px !important; font-weight: 700 !important;
  letter-spacing: 0.04em !important; color: #fff !important; margin: 0 0 10px !important; line-height: 1.25 !important;
}
html body:not(.cl-x) .cl-paynotice p {
  font-size: 14.5px !important; line-height: 1.6 !important; color: #C3B9D6 !important; margin: 0 0 14px !important;
}
html body:not(.cl-x) .cl-paynotice__ways {
  list-style: none !important; margin: 0 0 16px !important; padding: 14px 0 0 !important;
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  border-top: 1px solid rgba(190, 160, 255, 0.16) !important;
}
html body:not(.cl-x) .cl-paynotice__ways li {
  display: flex !important; align-items: center !important; gap: 9px !important;
  font-family: var(--font-display) !important; font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: 0.04em !important; color: #fff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(190, 160, 255, 0.18) !important;
  border-radius: 11px !important; padding: 11px 12px !important; margin: 0 !important;
}
html body:not(.cl-x) .cl-paynotice__dot {
  width: 8px !important; height: 8px !important; border-radius: 50% !important;
  background: #3DD68C !important; flex: 0 0 auto !important;
}
html body:not(.cl-x) .cl-paynotice__code {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 12px !important; background: rgba(124, 58, 237, 0.16) !important;
  border: 1px solid rgba(190, 160, 255, 0.42) !important;
  border-radius: 14px !important; padding: 14px 16px !important; margin: 0 0 16px !important;
}
html body:not(.cl-x) .cl-paynotice__code b {
  font-family: var(--font-display) !important; font-size: 19px !important;
  letter-spacing: 0.14em !important; color: #fff !important;
}
html body:not(.cl-x) .cl-paynotice__code span { font-size: 12.5px !important; color: #C3B9D6 !important; }
html body:not(.cl-x) .cl-paynotice__cta {
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 52px !important; border-radius: 13px !important;
  border: 1px solid rgba(206, 172, 255, 0.85) !important;
  background: linear-gradient(180deg, #8A4FD8, #5E26A0) !important; color: #fff !important;
  font-family: var(--font-display) !important; font-weight: 700 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  font-size: 13px !important; text-decoration: none !important;
}
html body:not(.cl-x) .cl-paynotice__cta:focus-visible { outline: 3px solid #CEACFF !important; outline-offset: 3px !important; }
html body:not(.cl-x) .cl-paynotice__foot {
  font-size: 12.5px !important; color: #8E82A6 !important; text-align: center !important; margin: 12px 0 0 !important;
}

/* The scrolling middle of the card-down notice (2026-09-27). */
html body:not(.cl-x) .cl-paynotice__scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;          /* without this a flex child refuses to shrink */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;      /* scrolling to the end must not scroll the page */
}
html body:not(.cl-x) .cl-paynotice__code { flex: 0 0 auto !important; }
html body:not(.cl-x) .cl-paynotice__cta { flex: 0 0 auto !important; margin-top: 14px !important; }
/* The footer sat flush against the button (measured 0px apart) — the phone
   number read as part of the button.
   Selector deliberately includes `p`: `html body:not(.cl-x) .cl-paynotice p`
   sets `margin: 0 0 14px !important` and, with one more type selector, it beat
   a plain `.cl-paynotice__foot` rule even with !important. Matching the p and
   adding the class outranks it. */
html body:not(.cl-x) .cl-paynotice p.cl-paynotice__foot {
  flex: 0 0 auto !important;
  margin: 14px 0 0 !important;
  padding-top: 2px !important;
}
/* A hint that there is more above, so nobody thinks the list is all of it. */
html body:not(.cl-x) .cl-paynotice__scroll::after { content: ''; display: block; height: 2px; }

@media (max-width: 430px) {
  html body:not(.cl-x) .cl-paynotice__ways { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body:not(.cl-x) .cl-paynotice,
  html body:not(.cl-x) .cl-paynotice__box { transition: none !important; }
}

/* ------------------------------------------------------------------
   Card option, shown struck through while the processor is down.

   Noah, 2026-09-26: "keep Stripe up, but just have like a line through
   it... so that way they know we have it." The gateway itself is removed
   server-side, so this row is information only — there is deliberately no
   input, no label and no hover state, and pointer events are off so it
   cannot be tapped or focused.
   ------------------------------------------------------------------ */
.woocommerce-checkout #payment ul.payment_methods li.cl-cardoff,
body.cl-embed #payment ul.payment_methods li.cl-cardoff {
  pointer-events: none;
  cursor: default;
  padding: 14px 16px !important;
  opacity: .62;
}
/* no radio, no tick, no selected state — it is not a choice */
.woocommerce-checkout #payment ul.payment_methods li.cl-cardoff::before,
.woocommerce-checkout #payment ul.payment_methods li.cl-cardoff::after {
  content: none !important;
}
.cl-cardoff__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cl-cardoff__name {
  font: 700 16px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: var(--mist-300, #C3BDCC);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.cl-cardoff__tag {
  font: 600 11px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mist-200, #D9D4E0);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 5px 9px;
  white-space: nowrap;
}
.cl-cardoff__sub {
  display: block;
  margin-top: 5px;
  font: 500 13px/1.35 var(--font-body, "Plus Jakarta Sans"), sans-serif;
  color: var(--mist-400, #A39DAE);
}
/* phones: keep the tag under the name rather than off the edge */
@media (max-width: 420px) {
  .cl-cardoff__row { gap: 8px; }
  .cl-cardoff__name { font-size: 15px; }
  .cl-cardoff__tag { font-size: 10px; padding: 4px 8px; }
}

/* The hero vials float up to 16px, and .cl-hero2 clips at its top edge — which
   sits exactly at the search bar's bottom, so anything rising above it is
   sliced and reads as "cropping under the search bar". Measured 2026-09-27:
   clear to 393px wide, cut 3px at 414, 7px at 430 — i.e. it only bites on the
   bigger iPhones. 22px of headroom clears the tallest float at every width. */
/* Headroom for the floating vials, put on the HERO, not the stage.
   The vials sit on a common baseline inside a flex stage, so padding on the
   stage cannot move them — two attempts at that changed the measured clearance
   by 0px. What clips them is .cl-hero2's own overflow:hidden at its top border
   edge, which lands exactly at the bottom of the search bar. Padding the hero
   pushes the content down while that clip edge stays put, which is the gap the
   float needs. Measured cut: 3px at 414 wide, 7px at 430. */
html body .cl-hero2 { padding-top: clamp(26px, 9vw, 46px); }

/* "Pay as <name>" on the pay screen (2026-09-27). Matching is by amount AND
   payer name, so the name we expect has to be visible before they send it. */
html body .cl-pay__row--name .cl-pay__v strong {
  display: inline-block;
  margin-bottom: 4px;
  color: #EDE6F7;
  font-size: 15px;
  letter-spacing: 0.02em;
}
html body .cl-pay__row--name .cl-pay__v {
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   PAY NOTICE: no taps until it has finished moving (2026-09-30)

   Noah: "when the screen was scrolling before the pop-up popped up it made it
   impossible to click... and then it bugged out and clicked the call somebody
   button."

   Reproduced by sc/pnghost.js at 360/390/414: a tap on Continue landed on the
   "Zelle" list item instead, the notice stayed open and the page stayed locked.
   The box slides in over .22s and was accepting taps the whole way, so the
   finger goes down where Continue is ABOUT to be, the button slides out from
   under it, and the tap hits whatever is there now.

   Nothing in the notice takes a pointer until the JS adds .cl-pn-ready, which
   it does on transitionend (with a timeout fallback, because a reduced-motion
   visitor gets no transitionend at all).
   --------------------------------------------------------------------------- */
/* NOT pointer-events:none — that lets the tap fall THROUGH to the page and
   land on a link underneath (measured at 360 and 390 on 2026-09-30: the click
   arrived on <body>). The notice keeps taking pointers the whole time so it
   BLOCKS them; the script below ignores them until .cl-pn-ready is set. */
html body:not(.cl-x) .cl-paynotice { pointer-events: auto !important; }

/* The shield that swallows the synthesised click after the notice closes.
   iOS fires a click ~300ms after touchend; by then the notice is gone and the
   click would land on the page underneath. */
html body:not(.cl-x) .cl-pn-shield {
  position: fixed !important; inset: 0 !important; z-index: 10095 !important;
  background: transparent !important; pointer-events: auto !important;
}

/* ---------------------------------------------------------------------------
   ZELLE DISCOUNT BADGE (2026-10-01)

   Noah wants Zelle pushed: it costs CORE LABS $1 a transaction against $4.65
   on a card, and it now lands in the First Citizens business account.

   The badge is CSS-only on purpose. Appending HTML to the gateway title would
   put raw markup into order emails, the admin order screen and the REST API,
   because those render the title escaped. A pseudo-element cannot leak.

   5%, not 10% — ten per cent was costed and loses money (see the note at the
   top of inc/zelle-discount.php). If the number changes, change it in BOTH
   places: that PHP file and the content below.
   --------------------------------------------------------------------------- */
/*
 * A REAL ELEMENT, not a pseudo-element.
 *
 * 2026-10-02: the first version put this on `label::after` — which is already
 * the row's expand chevron (see "a chevron so it reads as something that
 * opens" further up). That did two bad things at once: it deleted the chevron,
 * and because the row carries `cl-pm-open` the chevron's
 * `transform: rotate(180deg)` came with it, so the badge rendered UPSIDE DOWN
 * on every phone, permanently. Noah caught it on his own checkout.
 *
 * Both pseudo-elements on this label are spoken for (::before is the brand
 * icon), so the badge is injected as <span class="cl-zbadge"> by the script in
 * inc/zelle-discount.php. It is added client-side rather than through the
 * gateway title so no raw markup can leak into order emails, the admin order
 * screen or the REST API.
 */
.cl-zbadge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #2E7D32;
  color: #FFFFFF;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
  /* never inherit the chevron's flip, whatever the row state */
  transform: none;
  /* it lives inside the green "Secure" pill, so shed that pill's styling */
  text-shadow: none;
  flex: 0 0 auto;
}
/* the Secure pill clips its own shimmer; let the badge out of that box */
.woocommerce-checkout #payment .cl-pm__sub:has(.cl-zbadge) { overflow: visible; }

@media (max-width: 480px) {
  .cl-zbadge { font-size: 10px; margin-left: 6px; padding: 1px 6px; }
}

/* The discount line in the totals table reads as money off, not a charge. */
html body:not(.cl-x) .cart_totals .fee th,
html body:not(.cl-x) .woocommerce-checkout-review-order-table .fee th,
html body:not(.cl-x) .cart_totals .fee td,
html body:not(.cl-x) .woocommerce-checkout-review-order-table .fee td {
  color: inherit !important;
}

/* ---------------------------------------------------------------------------
   ZELLE DISCOUNT STRIP  (.cl-zbar — inc/zelle-banner.php)
   2026-10-01

   Noah: "just don't let it interrupt with the other that there's no credit
   card processor. Like that pop-up that we have."

   So: IN FLOW. No position:fixed, no z-index, no overlay, no transition. It
   physically cannot sit on top of the cards-down notice or the CORE10 promo
   because it never leaves the document flow. Kept deliberately small — the
   stylesheet is at 995 of a 1000 KB budget (sc/budget.js).

   Mobile is centred and wraps; 12px floor honoured at every width, desktop
   included (see the desktop-text-floor note).
   --------------------------------------------------------------------------- */
.cl-zbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 11px 14px;
  border: 1px solid rgba(46, 125, 50, 0.50);
  border-radius: 14px;
  /* A flat tint, not a gradient. The gradient was a second paint layer on a
     box that sits above the fold on /shop/, and it put first paint ~50ms over
     budget there (sc/budget.js) for a difference nobody can see. */
  background: rgba(38, 92, 44, 0.34);
  box-shadow: var(--cl-glow);
  text-align: center;
}
.cl-zbar__tag {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  background: #2E7D32;
  color: #FFFFFF;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.45;
  white-space: nowrap;
}
.cl-zbar__txt {
  color: #EDEAF2;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: .005em;
}
.cl-zbar__txt b {
  color: #FFFFFF;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
}

/* Home sits under the hero, so it needs the page gutter the hero already has. */
.cl-zbar--home { margin: 0 auto 26px; width: calc(100% - 32px); }

/* On a product page it is one line of reassurance under add-to-cart, not a
   banner — flat, left-aligned with the rest of the summary column. */
.cl-zbar--product {
  margin: 14px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  justify-content: flex-start;
  text-align: left;
}

/* Phones. Centre everything and let the sentence wrap — nothing off the edge. */
@media (max-width: 600px) {
  .cl-zbar {
    gap: 7px;
    padding: 10px 12px;
    border-radius: 12px;
  }
  .cl-zbar--home { width: calc(100% - 24px); margin-bottom: 20px; }
  .cl-zbar--product { justify-content: center; text-align: center; }
  .cl-zbar__txt { font-size: 13px; }
  .cl-zbar__tag { font-size: 12.5px; }
}

/* --- the Zelle discount inside the cards-down pop-up -----------------------
   Noah, 2026-10-01: "so people can see it and they're like, oh, yeah, so it's
   very known." This pop-up is the first thing a new visitor reads, so the
   discount is stated in it rather than in a pop-up of its own. */
.cl-paynotice__zelle {
  margin: 10px 0 2px;
  padding: 10px 12px;
  border: 1px solid rgba(46, 125, 50, 0.55);
  border-radius: 12px;
  background: rgba(46, 125, 50, 0.16);
  color: #FFFFFF;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
.cl-paynotice__save {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #2E7D32;
  color: #FFFFFF;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Win-back pop-up: the two new nodes from the 2026-10-04 claim-then-email
 * split (inc/winback-popup.php). The pop-up is suppressed while the cards-down
 * notice is up, so these are not visible today — but the moment that notice is
 * switched off this markup renders, and without these rules the Back link and
 * the proof strip would fall back to browser defaults on a dark panel.
 * Styled here, in the LIVE sheet, rather than only in theme-v2.css.
 * ------------------------------------------------------------------------- */
html body:not(.cl-x) .cl-wb__back {
  background: none; border: 0; padding: 0;
  color: #CEACFF; font-weight: 600; font-size: 13px;
  cursor: pointer; display: inline-block; margin-bottom: 10px;
}
html body:not(.cl-x) .cl-wb__back:hover { color: #E7D7FF; }
html body:not(.cl-x) .cl-wb__proof {
  list-style: none; margin: 18px 0 0; padding: 14px 0 0;
  display: flex; gap: 22px; justify-content: center;
  border-top: 1px solid rgba(206,172,255,.22);
}
html body:not(.cl-x) .cl-wb__proof li { display: grid; gap: 2px; text-align: center; }
html body:not(.cl-x) .cl-wb__proof b { color: #CEACFF; font-weight: 700; font-size: 16px; }
html body:not(.cl-x) .cl-wb__proof span { color: #A79CBC; font-size: 12px; }

/* ==================================================================
 * PAYPAL + CARD ROWS — brought in line with the other payment methods.
 *
 * Added when PayPal went live (2026-10-07). The CardsShield gateways print
 * their brand marks as loose <img> tags with no layout, so they stacked in a
 * ragged two-column dribble under the label, while Zelle/Venmo/Cash App/Bitcoin
 * each had a proper coloured tile. Measured: 5 images per row, no wrapper.
 * ================================================================== */
li.payment_method_mecom_paypal .payment_method_icons,
li.payment_method_mecom_paypal_cardfields .payment_method_icons,
li.payment_method_mecom_paypal label img,
li.payment_method_mecom_paypal_cardfields label img {
  display: inline-block;
  vertical-align: middle;
}

/* one tidy row of brand marks, wrapping only if it must */
li.payment_method_mecom_paypal label,
li.payment_method_mecom_paypal_cardfields label {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
li.payment_method_mecom_paypal label img,
li.payment_method_mecom_paypal_cardfields label img {
  height: 22px !important;
  width: auto !important;
  max-width: 36px;
  margin: 0 !important;
  border-radius: 4px;
  background: #FFFFFF;
  padding: 1px 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
}
/* Puts the brand marks on their own line under the name. Targets .cl-brands by
   name, NOT span:first-of-type — the Secure pill was added ahead of it on
   2026-10-07 and inherited the 100% width, stretching the pill to 268px while
   every other method's sat at 84px. */
li.payment_method_mecom_paypal label > .cl-brands,
li.payment_method_mecom_paypal_cardfields label > .cl-brands {
  flex: 1 0 100%;
}

/* ==================================================================
 * CREDIT / DEBIT CARD ROW — real brand logos, laid out horizontally.
 *
 * Noah, 2026-10-07: one payment option, not two; Visa as the big tile; the
 * rest lined up underneath, bigger, horizontal not vertical.
 *
 * The marks are the official SVGs (assets/pay/), not traced and not recoloured.
 * The gateway prints them as loose <img> with no wrapper, so they dribbled down
 * the row in a ragged two-column stack — this makes one clean line.
 * ================================================================== */

/* the big tile: real Visa mark on white, matching the other methods' tiles */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mecom_paypal > label::before {
  --cl-pay-bg: #FFFFFF;
  /* path is relative to THIS file (assets/woocommerce.css), so "pay/…" not "../pay/…" */
  --cl-pay-icon: url("pay/visa.svg");
  background:
    var(--cl-pay-icon) center / 26px auto no-repeat,
    #FFFFFF !important;
  box-shadow: inset 0 0 0 1px rgba(23,25,35,0.14);
}

/* the brand marks: ONE horizontal line, bigger, evenly spaced */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mecom_paypal > label {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mecom_paypal > label img {
  height: 30px !important;        /* was ~20px and staggered */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 5px !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 1px rgba(23,25,35,0.12) !important;
  display: inline-block !important;
  vertical-align: middle !important;
  float: none !important;
}
/* the name takes the full first line so the logos form their own row under it */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mecom_paypal > label > .cl-brands,
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mecom_paypal > label > .cl-pm__name {
  flex: 1 0 100% !important;
}

/* The theme zeroes the font on payment labels and gives it back on the
 * .cl-pm__name span its JS builds — but that JS only knows the corelabs_*
 * gateways, so "Credit / Debit Card" rendered at font-size 0 and vanished.
 * Measured: label font-size 0px, text node 0x0, no .cl-pm__name child.
 * Give this row its type back directly. */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mecom_paypal > label {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--mist-100, #E6E2EB) !important;
  gap: 6px !important;
}
/* one line, not two: six marks have to fit 390px minus the tile and padding */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mecom_paypal > label .cl-brands {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
}
.woocommerce-checkout #payment ul.payment_methods li.payment_method_mecom_paypal > label img.cl-brand {
  height: 26px !important;
  width: auto !important;
  flex: 0 1 auto;
  min-width: 0;
}

/* Blocks 105-106 moved here from theme-v2.css on 2026-10-07.
   theme-v2.css is NOT enqueued on the embedded checkout (?cl_embed=1) — that
   page loads style.css, woocommerce.css and calltab.css only, proven by
   walking document.styleSheets in the live embed. Anything that must style
   checkout belongs in THIS file. */

/* ---- 105. Card payment hint -------------------------------------------
   PayPal's own button takes card payments, so Place order is hidden while the
   card method is selected (assets/card-pay-button.js). This line says where to
   press instead. 16px body, per TYPOGRAPHY GUARDIAN — the message must not be
   shrunk to fit. */
.cl-cardhint {
  display: none;                 /* superseded by the skinned button, which
                                    now carries the instruction itself */
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--cl-line-br, rgba(124, 58, 237, 0.35));
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.10);
  color: var(--mist-100, #EDEAF2);
  font: 500 16px/1.45 var(--font-body, "DM Sans"), sans-serif;
  text-align: center;
}

/* ---- 106. PayPal express checkout block --------------------------------
   The plugin ships this on white, which punches a hole straight through the
   dark checkout, and renders "Express Checkout" in grey on that white where it
   is barely readable. The button itself is PayPal's cross-origin iframe and
   cannot be touched — everything around it can, so the surround is brought
   back to the site's own dark glass and spaced caps.
   Measured 2026-10-07: #paypal-button-express-text was bg rgb(255,255,255).
   NOT scoped to .woocommerce-checkout — the embedded checkout (?cl_embed=1)
   renders with body class "wp-singular page-template-default page", so that
   prefix matched nothing and the white stayed. Proven by walking
   document.styleSheets for rules matching the element: only the plugin's own
   rule came back. */
/* The "- OR -" separator. It has no id — it is a bare .cs_pp_element div, found
   by matching its text — and it sits INSIDE the white panel, where the site's
   pale mist ink (rgb(201,195,210)) was unreadable. The express label is excluded
   because it is lifted out onto the dark above the panel. */
#mecom-paypal-credit-form-container-custom .cs_pp_element:not(#paypal-button-express-text) {
  background: transparent !important;
  color: var(--mist-300, #B6AFC2) !important;
  font: 600 13px/1.25 var(--font-head, "Poppins"), sans-serif !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* PayPal paints its button on white INSIDE a cross-origin iframe. Scanning
   every element in the parent document for a white background returns nothing,
   which proves the white is the iframe's own document — it cannot be recoloured
   from here at any specificity. So it is made deliberate instead of left
   looking like a rendering fault: a clean light panel, with the label lifted
   out onto the dark above it. */
/* Express now runs on the product and cart pages only (Noah, 2026-10-07: the
   express button "doesn't need to be at the last checkout menu"). Those pages
   are dark, and PayPal's button iframe is transparent here — so the white
   panel this once needed is gone, and the block simply sits on the page. */
#mecom-paypal-credit-form-container-custom {
  position: relative;
  background: transparent !important;
  border: 0;
  border-radius: 14px;
  padding: 0;
  margin: 26px 0 14px;
  /* Do NOT add height/min-height/overflow here. Tried on 2026-10-07 to shrink
     the gap under the button; it collapsed the gateway's iframe to 0px wide
     (measured 0x49) and the button vanished. The gap stays. */
  /* NO overflow:hidden here. It clips at the padding box, which ate the
     EXPRESS CHECKOUT label sitting at top:-24px. It is not needed either:
     the panel is white and so is the iframe, so the iframe's square corners
     are invisible against it. */
}

/* The plugin pins this label absolutely over the button. Lift it clear of the
   panel so it sits on the dark and stops being clipped mid-word. */
#paypal-button-express-text {
  position: absolute !important;
  top: -24px !important;
  left: 2px !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--mist-200, #D9D4E0) !important;
  font: 600 13px/1.2 var(--font-head, "Poppins"), sans-serif !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Secure chip on the express block, inserted by assets/card-pay-button.js.
   Same green and the same lock mask as .cl-pm__sub on the payment rows, so the
   express panel carries the badge every other payment surface has. It sits on
   the dark beside the EXPRESS CHECKOUT label, not on the white panel. */
.cl-exsecure {
  position: absolute;
  top: -26px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #3DD68C;
  font: 600 13px/1.2 var(--font-body, "DM Sans"), sans-serif;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(61, 214, 140, 0.55);
  pointer-events: none;
}
.cl-exsecure::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The card button is PayPal's iframe (#payment-paypal-area, measured 302x55,
   transparent, radius 0). Its grey fill is painted inside a cross-origin
   document and cannot be recoloured from here. What CAN be done is make it
   read as a button instead of a dead slab: full width, rounded, lifted off the
   panel, with hover and press feedback. Noah, 2026-10-07: "make the button look
   clickable". */
#mecom-paypal-credit-form-container {
  width: 100% !important;
  border-radius: 14px;
  overflow: hidden;              /* clips the iframe's square corners */
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.85),
              0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  cursor: pointer;
}
#mecom-paypal-credit-form-container:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.9),
              0 0 0 1px rgba(255, 255, 255, 0.22);
}
#mecom-paypal-credit-form-container:active {
  transform: translateY(0) scale(0.995);
}
#payment-paypal-area {
  display: block;
  width: 100% !important;
  border-radius: 14px;
}
@media (prefers-reduced-motion: reduce) {
  #mecom-paypal-credit-form-container,
  #mecom-paypal-credit-form-container:hover,
  #mecom-paypal-credit-form-container:active { transition: none; transform: none; }
}

/* The .cl-cardskin overlay was removed on 2026-10-07: a fake button over a
   real payment control is exactly what the brief forbids, and it covered
   PayPal's required branding. The styled control is now the plugin's own
   #mecom-paypal-2-step-trigger. */

/* ------------------------------------------------------------------
   The card payment control: the plugin's own 2-Step Smart Button.

   This is a REAL <button id="mecom-paypal-2-step-trigger"> the gateway
   renders (enable_2_steps_smart_button). Pressing it reveals PayPal's own
   Smart Button, which keeps PayPal's required branding intact. Styling it is
   supported and needs no overlay — unlike the fake button that briefly sat on
   top of PayPal's iframe, which has been removed.

   It shipped 0x0: the theme sets font-size:0 on payment labels and the button
   carries no sizing of its own, so it collapsed and could not be pressed.
   Everything below is sizing first, branding second. */
#mecom-paypal-2-step-trigger-container {
  display: block !important;
  width: 100%;
  margin: 4px 0 2px;
}
#mecom-paypal-2-step-trigger,
#mecom-paypal-2-step-trigger.button.alt {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100% !important;
  min-height: 54px;          /* comfortable touch target on a phone */
  padding: 15px 18px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%) !important;
  box-shadow: 0 10px 22px -10px rgba(124, 58, 237, 0.85);
  color: #FFFFFF !important;
  /* font-size has to be restated — the payment label sets it to 0 */
  font: 700 16px/1 var(--font-head, "Poppins"), sans-serif !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
#mecom-paypal-2-step-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -10px rgba(124, 58, 237, 0.95);
  filter: brightness(1.04);
}
#mecom-paypal-2-step-trigger:active { transform: translateY(0) scale(0.995); }
#mecom-paypal-2-step-trigger::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  #mecom-paypal-2-step-trigger { transition: none; }
  #mecom-paypal-2-step-trigger:hover,
  #mecom-paypal-2-step-trigger:active { transform: none; }
}

/* ------------------------------------------------------------------
   PayPal Express inside the cart drawer.

   Sits under "Secure checkout" as the alternative, never above it — the
   drawer's own checkout stays the primary action. The separator uses the
   drawer's existing line token so it reads as part of the panel. */
.cl-express {
  margin: 14px 0 2px;
}
.cl-express__or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--mist-400, #A39DAE);
  font: 600 13px/1 var(--font-head, "Poppins"), sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cl-express__or::before,
.cl-express__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--cl-line, #E2E5EA);
  opacity: 0.18;
}
/* The gateway's express container is spaced for a page, not a drawer. */
.cl-express #mecom-paypal-credit-form-container-custom {
  margin: 0 !important;
}

/* The gateway prints its own "- OR -" above the express button. In the drawer
   that lands directly under ours, so there were two separators stacked. Keep
   the drawer's (it has the rules either side) and hide the gateway's. */
.cl-express #mecom-paypal-credit-form-container-custom .cs_pp_element:not(#paypal-button-express-text) {
  display: none !important;
}

/* PayPal's iframe is 55px tall but its button only fills the top ~47px, so the
   white of its own document showed as a sliver under the button inside our
   rounded container. The container already clips (overflow:hidden), so pulling
   the iframe up by the slack hides the strip without touching the button.
   Measured 2026-10-07: container 302x61, iframe 302x55. */
#mecom-paypal-credit-form-container { overflow: hidden; }
#payment-paypal-area { margin-bottom: -8px; }

/* ------------------------------------------------------------------
   PayPal Standard redirect notice.

   The gateway ships a 282x130 outlined browser illustration above its copy.
   At 390px that is a third of the payment row given over to a generic graphic,
   and it does not match anything else on the page. The drawing goes; the
   sentence stays, as a note in the same style as the other checkout notices —
   the buyer still gets told they are being redirected. */
.cs-pp-redirect-svg-container {
  display: none !important;
}
.cs-pp-payment-option-container {
  margin: 12px 0 4px;
  padding: 13px 15px;
  border: 1px solid var(--cl-line-br, rgba(124, 58, 237, 0.35));
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.08);
  color: var(--mist-200, #D9D4E0);
  font: 500 15px/1.5 var(--font-body, "DM Sans"), sans-serif;
  text-align: left;        /* prose reads left, per the site's copy rules */
}

/* ------------------------------------------------------------------
   Pay button tap target.

   In PayPal Standard mode the order button renders INSIDE the gateway's
   .payment_box, so it inherits that box's 12px padding on top of the section's
   own 16+14. Measured at 390px: 44px of gutter each side, leaving the button
   302 wide — and at 320px only 232, which wrapped the label onto two lines.

   The button reclaims the payment box's padding so it runs the full width of
   the panel. Widening the layout, not shrinking the type. */
/* The wrapper is a bare .form-row — it carries no .place-order class, which is
   why the first attempt at this matched nothing. Selected by what it contains
   instead. */
#payment .payment_box > .form-row:has(#place_order) {
  margin-left: -12px !important;
  margin-right: -12px !important;
  width: auto !important;
}
#payment .payment_box > .form-row:has(#place_order) #place_order {
  width: 100% !important;
  min-height: 56px;
}

/* ==================================================================
   CHECKOUT DESIGN SPEC — 2026-10-07
   ------------------------------------------------------------------
   Noah's exact measurements, applied as shared tokens rather than more
   one-off overrides. Scoped to the checkout, so product cards, nav and the
   rest of the site keep their own treatment.

   Audited before this block (375/768/1440): input heights 49-54px, font
   15.5-17px, borders 1px and 0px, radii 0/4/12px, padding 0/14/16px; payment
   boxes 1px / 8px radius / no padding; labels 11.5-15.5px; form 996px at 1440.
   All of those are normalised below.

   Boundary colour is #8B5CF6: measured 4.46:1 against the checkout surface,
   which clears the 3:1 required for essential control boundaries.

   NOT changed here: the dark palette. The brief asked for light backgrounds
   and dark text, which is the opposite of the approved design and would be a
   redesign, not an update. Flagged in PROJECT_STATUS.md for Noah's call.
   ================================================================== */
.woocommerce-checkout,
.cl-embed__main {
  --ck-field-h: 48px;
  --ck-btn-h: 52px;
  --ck-border: 2px;
  --ck-radius-field: 8px;
  --ck-radius-panel: 12px;
  --ck-pad-x: 16px;
  --ck-line: #8B5CF6;          /* 4.46:1 on the checkout surface */
  --ck-line-soft: rgba(139, 92, 246, 0.28);   /* 1px decorative dividers only */
  --ck-accent: #A78BFA;        /* selected state */
  --ck-gap-field: 16px;
  --ck-gap-block: 24px;
  --ck-gap-section: 32px;
}

/* --- fields: 48px min, 16px text, 16px padding, 2px border, 8px radius --- */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-selection--single {
  box-sizing: border-box !important;
  min-height: var(--ck-field-h) !important;
  height: auto !important;
  padding: 12px var(--ck-pad-x) !important;
  border: var(--ck-border) solid var(--ck-line) !important;
  border-radius: var(--ck-radius-field) !important;
  font-size: 16px !important;            /* 16px also stops iOS zoom on focus */
  line-height: 1.5 !important;
}

/* Border width never changes between states, so nothing shifts on hover or
   selection — only the colour moves. */
.woocommerce-checkout input:hover,
.woocommerce-checkout select:hover,
.woocommerce-checkout textarea:hover {
  border-width: var(--ck-border) !important;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-width: var(--ck-border) !important;
  border-color: var(--ck-accent) !important;
  outline: 3px solid var(--ck-accent) !important;
  outline-offset: 2px !important;
}
.woocommerce-checkout .woocommerce-invalid input,
.woocommerce-checkout .woocommerce-invalid select {
  border-width: var(--ck-border) !important;
  border-color: #FF6B6B !important;
}

/* --- labels: 14px / 600, above the field, 8px gap --- */
.woocommerce-checkout .form-row > label {
  display: block !important;
  margin: 0 0 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* --- selectable payment / shipping boxes: 2px, 12px radius, 16px mobile --- */
.woocommerce-checkout #payment ul.payment_methods > li,
.woocommerce-checkout .woocommerce-shipping-methods > li {
  box-sizing: border-box;
  border: var(--ck-border) solid var(--ck-line) !important;
  border-radius: var(--ck-radius-panel) !important;
  padding: 16px !important;
}
.woocommerce-checkout #payment ul.payment_methods > li:has(input:checked),
.woocommerce-checkout .woocommerce-shipping-methods > li:has(input:checked) {
  border-width: var(--ck-border) !important;
  border-color: var(--ck-accent) !important;
}

/* --- helper and error copy: 14px --- */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .form-row .description,
.woocommerce-checkout .cl-drawer__note { font-size: 14px !important; }

/* --- rhythm: 16 between field groups, 24 between blocks, 32 between sections */
.woocommerce-checkout .form-row { margin-bottom: var(--ck-gap-field) !important; }
.woocommerce-checkout .cl-ck__row { margin-bottom: var(--ck-gap-section) !important; }

/* --- decorative internal dividers stay 1px, boundaries stay 2px --- */
.woocommerce-checkout .cl-drawer__line,
.woocommerce-checkout #payment ul.payment_methods > li .payment_box hr {
  border: 0;
  border-top: 1px solid var(--ck-line-soft);
}

@media (min-width: 768px) {
  .woocommerce-checkout #payment ul.payment_methods > li,
  .woocommerce-checkout .woocommerce-shipping-methods > li { padding: 24px !important; }
}

/* --- primary buttons: 52px min, 16px/600, 24px h-padding, 8px radius ---
   Measured 64x / radius 14 / padding 16 before this. Scoped to checkout, so
   the site's 14px button radius elsewhere is untouched. */
.woocommerce-checkout #place_order,
.woocommerce-checkout .cl-btn--primary {
  box-sizing: border-box;
  min-height: 52px !important;
  padding: 14px 24px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
/* Main checkout button spans the available form width. */
.woocommerce-checkout #place_order { width: 100% !important; }

/* --- body copy inside checkout: 16px / 1.5 (was 16/26.4 = 1.65) --- */
.woocommerce-checkout,
.woocommerce-checkout p,
.woocommerce-checkout li { line-height: 1.5; }

/* --- content max-width 1120, centred (measured 996 at 1440) --- */
.woocommerce-checkout form.checkout,
.cl-embed__main > .woocommerce {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 767px) {
  .woocommerce-checkout form.checkout,
  .cl-embed__main > .woocommerce { padding-left: 16px; padding-right: 16px; }
}

/* ------------------------------------------------------------------
   Spec enforcement at matching specificity.

   The first pass lost: `body.cl-embed #payment #place_order {14px}` is
   (2,1,1) and beat `.woocommerce-checkout #place_order` at (1,1,0) even with
   !important, because !important ties are broken by specificity. These rules
   carry the body class and the ids so they win on their own merit rather than
   by stacking another override on top. */
body.cl-embed #payment #place_order,
body .woocommerce-checkout #payment #place_order {
  min-height: 52px !important;
  padding: 14px 24px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  width: 100% !important;
}

/* Fields: the shorthand `border` rules elsewhere beat a longhand, so the
   shorthand is restated here with the body class in front. */
body.cl-embed .woocommerce-checkout input[type="text"],
body.cl-embed .woocommerce-checkout input[type="email"],
body.cl-embed .woocommerce-checkout input[type="tel"],
body.cl-embed .woocommerce-checkout input[type="number"],
body.cl-embed .woocommerce-checkout textarea,
body.cl-embed .woocommerce-checkout select,
body .woocommerce-checkout input[type="text"],
body .woocommerce-checkout input[type="email"],
body .woocommerce-checkout input[type="tel"],
body .woocommerce-checkout input[type="number"],
body .woocommerce-checkout textarea,
body .woocommerce-checkout select {
  box-sizing: border-box !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  border: 2px solid #8B5CF6 !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Labels at 14px/600 — 375px was still showing 15.5px and 11.5px. */
body.cl-embed .woocommerce-checkout .form-row > label,
body .woocommerce-checkout .form-row > label {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

/* Select2 renders its own control (.select2-selection--single) in place of the
   native <select>, with its own 1px frame from .select2-container--default.
   Brought to the same field spec so a Select2 country box and a plain input
   sit level: same 2px boundary, 8px radius, 48px min, 16px text. */
body.cl-embed .woocommerce-checkout .select2-container--default .select2-selection--single,
body.cl-embed form.checkout .select2-container--default .select2-selection--single {
  box-sizing: border-box !important;
  min-height: 48px !important;
  height: 48px !important;
  border: 2px solid #8B5CF6 !important;
  border-radius: 8px !important;
  background: #0D0C11 !important;
  padding: 0 16px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center !important;
}
body.cl-embed .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
body.cl-embed form.checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
}
body.cl-embed .select2-container--default.select2-container--open .select2-selection--single {
  border-width: 2px !important;      /* width constant between states */
  border-color: #A78BFA !important;
  outline: 3px solid #A78BFA;
  outline-offset: 2px;
}

/* Label sizes, measured at 375px before this: 18 address labels at 15.5px and
   three shipping-method labels at 11.5px — the latter under the site's own
   12px floor as well as the 14px spec. Both are brought TO 14px; nothing is
   shrunk. The payment-method labels are left at 0px on purpose — the theme
   zeroes them and restores the size on .cl-pm__name. */
body.cl-embed form.checkout .form-row > label,
body.cl-embed form.checkout .woocommerce-shipping-fields label,
body.cl-embed form.checkout .woocommerce-billing-fields label {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}
body.cl-embed .woocommerce-shipping-methods label,
body.cl-embed #shipping_method label,
body.cl-embed ul#shipping_method li label {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Homepage express block — sits under the catalog, only when the cart has
   something in it. Same dark card treatment as the rest of the site; the
   Secure checkout button stays the primary action and PayPal is the
   alternative beneath it, matching the drawer's order. */
.cl-homeexpress { padding-top: 0; }
.cl-homeexpress__card {
  box-sizing: border-box;
  max-width: 520px;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid var(--cl-line-br, rgba(124, 58, 237, 0.35));
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.07);
}
.cl-homeexpress__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  font: 500 16px/1.4 var(--font-body, "DM Sans"), sans-serif;
}
.cl-homeexpress__line strong { font-size: 18px; }
.cl-homeexpress__cta { width: 100%; }
.cl-homeexpress__note {
  margin: 12px 0 0;
  font: 400 14px/1.45 var(--font-body, "DM Sans"), sans-serif;
  opacity: 0.75;
  text-align: center;
}