/* ---- kt-cart-css ---- */
.kt-mc-items{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;padding:2px 0}
.kt-mc-item{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid #f1f5f9}
.kt-mc-item:last-child{border-bottom:none}
.kt-mc-img{width:46px;height:46px;flex:0 0 46px;border-radius:8px;background:linear-gradient(160deg,#f8fbff,#eef4ff);display:flex;align-items:center;justify-content:center;overflow:hidden}
.kt-mc-img img{width:34px !important;height:34px !important;min-width:0 !important;max-width:none !important;object-fit:contain !important;margin:0 !important;display:block !important}
.kt-mc-meta{flex:1;min-width:0}
.kt-mc-name{font-size:13px;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kt-mc-qp{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#64748b;margin-top:2px}
.kt-mc-qp .amount{color:#334155}
.kt-mc-remove{flex:0 0 auto;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:17px;text-decoration:none;line-height:1}
.kt-mc-remove:hover{background:#fef2f2;color:#ef4444}
.kt-mini-cart-wait{padding:26px 4px;text-align:center;font-size:12.5px;color:#94a3b8;font-weight:600}
.kt-mc-foot{padding:12px 4px 2px;border-top:1px solid #e2e8f0;margin-top:2px}
.kt-mc-sub{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;color:#0f172a;margin-bottom:10px}
.kt-mc-sub .amount{color:#2563eb;font-family:'JetBrains Mono',monospace}
.kt-mc-btns{display:flex;gap:8px}
.kt-mc-view,.kt-mc-checkout{flex:1;text-align:center;height:40px;line-height:40px;border-radius:10px;font-size:13px;font-weight:700;text-decoration:none}
.kt-mc-view{border:1px solid #e2e8f0;color:#334155;background:#fff}
.kt-mc-view:hover{background:#f8fafc}
.kt-mc-checkout{color:#fff;background:linear-gradient(120deg,#2563eb,#1d4ed8)}
.kt-mc-checkout:hover{transform:translateY(-1px)}
/* ---- kt-stock-css ---- */
.kt-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
font-size:11px;font-weight:700;letter-spacing:.03em;line-height:1;white-space:nowrap;
border:1px solid transparent;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kt-badge i{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.kt-badge-full{background:rgba(220,252,231,.92);color:#15803d;border-color:rgba(22,163,74,.28)}
.kt-badge-full i{background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.kt-badge-low{background:rgba(254,243,199,.94);color:#b45309;border-color:rgba(245,158,11,.32)}
.kt-badge-low i{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.kt-badge-out{background:rgba(254,226,226,.94);color:#b91c1c;border-color:rgba(220,38,38,.3)}
.kt-badge-out i{background:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.18)}
/* pinned over the product image on catalogue cards */
.product-card .product-img{position:relative}
.kt-badge-pin{position:absolute;top:12px;left:12px;z-index:3;box-shadow:0 2px 10px -2px rgba(15,23,42,.24)}
@media(max-width:520px){.kt-badge-pin{top:9px;left:9px;padding:4px 8px;font-size:10px}}
/* 2026-10-06: stock signal moved off the image and onto the name row, right
next to the compound name, per Gus's request. Same badge markup/colours as
kt-badge-pin above - just static positioning instead of absolute, sized to
sit on one line with the product name. */
.kt-badge-inline{position:static;flex:0 0 auto;transform:none}
@media(max-width:520px){.kt-badge-inline{padding:4px 8px;font-size:10px}}
/* notify dialog */
.kt-nfy-back{position:fixed;inset:0;z-index:99998;background:rgba(15,23,42,.55);
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:22px}
.kt-nfy-back.on{display:flex}
.kt-nfy{width:100%;max-width:412px;background:#fff;border-radius:16px;padding:26px 24px 22px;
box-shadow:0 28px 70px -18px rgba(15,23,42,.5);position:relative;
font-family:var(--font,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif)}
.kt-nfy-x{position:absolute;top:11px;right:11px;width:30px;height:30px;border:none;background:transparent;
font-size:21px;line-height:1;color:#94a3b8;cursor:pointer;border-radius:8px}
.kt-nfy-x:hover{background:#f1f5f9;color:#0f172a}
.kt-nfy h3{margin:0 0 7px;font-size:18.5px;font-weight:650;color:#0f172a;letter-spacing:-.015em;padding-right:26px}
.kt-nfy p{margin:0 0 15px;font-size:13.5px;line-height:1.6;color:#64748b}
.kt-nfy-item{display:block;margin:0 0 15px;padding:9px 12px;border-radius:9px;background:#f7f9fc;
border:1px solid #e2e8f0;font-size:13px;font-weight:650;color:#0f172a}
.kt-nfy input[type=email]{width:100%;padding:12px 13px;border:1.5px solid #cbd5e1;border-radius:10px;
font-family:inherit;font-size:14.5px;color:#0f172a;background:#fff}
.kt-nfy input[type=email]:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.kt-nfy-go{width:100%;margin-top:11px;padding:13px;border:none;border-radius:10px;cursor:pointer;
font-family:inherit;font-size:14.5px;font-weight:700;color:#fff;background:#0f172a}
.kt-nfy-go:hover{background:#1e293b}
.kt-nfy-go:disabled{background:#94a3b8;cursor:not-allowed}
.kt-nfy-msg{margin:11px 0 0;font-size:13px;line-height:1.55;min-height:1px}
.kt-nfy-msg.err{color:#b91c1c}
.kt-nfy-msg.ok{color:#15803d}
.kt-nfy-fine{margin:13px 0 0;font-size:11.5px;color:#94a3b8;line-height:1.5}
/* the button that replaces add-to-cart */
.kt-notify-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
border:1.5px solid #cbd5e1;background:#fff;color:#0f172a;font-family:inherit;font-weight:700;
border-radius:10px;transition:.16s}
.kt-notify-btn:hover{border-color:#94a3b8;background:#f8fafc}
/* ---- kt2-card-add ---- */
.kt2-card{position:relative}.kt2-clink{position:absolute;inset:0;z-index:1;font-size:0;color:transparent;text-decoration:none}.kt2-cbot{position:relative;z-index:2}.kt2-cadd{cursor:pointer;border:none;padding:0;font:inherit;font-size:18px;line-height:1}.kt2-cadd{transition:background .2s,opacity .2s}.kt2-cadd.kt2-cadd-ok{background:#16a34a !important}
/* ---- kt-woo-polish ---- */
/* --- Login / Register: one clean card (kill the nested inner form border) --- */
.woocommerce-account:not(.logged-in) .u-column1 form.login,
.woocommerce-account:not(.logged-in) .u-column2 form.register{ border:0 !important; padding:0 !important; margin:0 !important; box-shadow:none !important; background:transparent !important; }
.woocommerce-account:not(.logged-in) .u-columns h2{ margin-top:0 !important; font-size:20px; font-weight:700; letter-spacing:-.01em; color:#0f172a; }
.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text{ font-size:12.5px; color:#94a3b8; line-height:1.6; }
.woocommerce-form-login__rememberme{ display:flex !important; align-items:center; gap:8px; margin:8px 0 14px !important; }
.woocommerce-form-login__rememberme input{ width:auto !important; margin:0 !important; }
.woocommerce-form-login__rememberme span{ font-size:13.5px; color:#475569; }
.woocommerce form .form-row input[type=checkbox]{ width:auto !important; }
/* --- Inputs everywhere in account/checkout classic --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type=text],
.woocommerce form .form-row input[type=email],
.woocommerce form .form-row input[type=password],
.woocommerce form .form-row input[type=tel],
.woocommerce-EditAccountForm input, .woocommerce-Address-fields input,
.woocommerce .woocommerce-form-login input, .woocommerce .woocommerce-form-register input,
.woocommerce form .form-row select, .woocommerce form .form-row textarea{
width:100%; padding:12px 14px !important; border:1px solid #cbd5e1 !important; border-radius:10px !important;
font-size:15px !important; background:#fff !important; color:#0f172a !important; box-sizing:border-box; transition:border-color .15s, box-shadow .15s;
}
.woocommerce form input:focus, .woocommerce form select:focus, .woocommerce form textarea:focus{ outline:none !important; border-color:#2563eb !important; box-shadow:0 0 0 3px rgba(37,99,235,.15) !important; }
.woocommerce form .form-row > label{ font-size:13px !important; font-weight:600 !important; color:#475569 !important; margin-bottom:6px !important; display:block; }
.woocommerce .password-input, .woocommerce .woocommerce-password-strength{ width:100%; }
/* --- Buttons: brand blue, consistent --- */
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-Button, .woocommerce button.woocommerce-button{
background:#2563eb !important; color:#fff !important; border:0 !important; border-radius:10px !important;
padding:12px 26px !important; font-weight:700 !important; font-size:14px !important; letter-spacing:.01em; cursor:pointer;
transition:transform .15s, background .15s; box-shadow:0 10px 22px -10px rgba(37,99,235,.55);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{ background:#1d4ed8 !important; transform:translateY(-1px); }
.woocommerce .button.wc-forward, .woocommerce .added_to_cart{ text-decoration:none; }
/* --- My Account dashboard (logged in): sidebar nav + content cards --- */
.woocommerce-account.logged-in .woocommerce{ display:grid; grid-template-columns:250px 1fr; gap:28px; max-width:1060px; margin:0 auto; align-items:start; }
.woocommerce-MyAccount-navigation{ background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:12px; box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 48px -32px rgba(37,99,235,.22); }
.woocommerce-MyAccount-navigation ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
.woocommerce-MyAccount-navigation-link{ margin:0 !important; }
.woocommerce-MyAccount-navigation-link a{ display:block; padding:11px 16px; border-radius:10px; color:#334155 !important; font-weight:600; font-size:14.5px; text-decoration:none; transition:background .15s, color .15s; }
.woocommerce-MyAccount-navigation-link a:hover{ background:#f1f5f9; }
.woocommerce-MyAccount-navigation-link.is-active a{ background:#2563eb; color:#fff !important; }
.woocommerce-MyAccount-content{ background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:30px 34px; box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 48px -32px rgba(37,99,235,.22); }
.woocommerce-MyAccount-content p{ color:#475569; line-height:1.7; }
.woocommerce-MyAccount-content a:not(.button){ color:#2563eb; }
.woocommerce-account.logged-in table{ border-collapse:separate; border-spacing:0; width:100%; }
.woocommerce-account.logged-in table th{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:#64748b; text-align:left; padding:10px 12px; border-bottom:1px solid #e2e8f0; }
.woocommerce-account.logged-in table td{ padding:12px; border-bottom:1px solid #f1f5f9; font-size:14px; color:#334155; }
@media(max-width:820px){ .woocommerce-account.logged-in .woocommerce{ grid-template-columns:1fr; } }
/* --- Account: password-change fieldset as a clean section (was a default box) --- */
.woocommerce-EditAccountForm fieldset{ border:0 !important; border-top:1px solid #e2e8f0 !important; margin:26px 0 0 !important; padding:22px 0 0 !important; }
.woocommerce-EditAccountForm fieldset legend{ font-size:15px !important; font-weight:700 !important; color:#0f172a !important; padding:0 !important; }
.woocommerce-account.logged-in address{ font-style:normal; color:#475569; line-height:1.7; }
.woocommerce-account.logged-in .woocommerce-Address{ background:#f8fafc; border:1px solid #eef2f7; border-radius:12px; padding:22px 24px; }
.woocommerce-account.logged-in .woocommerce-Address-title h3{ font-size:17px; font-weight:700; color:#0f172a; }
/* --- Block checkout: solid, themed inputs to match the cart's polish --- */
.wc-block-components-text-input input, .wc-blocks-components-select__select, .wc-block-components-textarea textarea{
border:1.5px solid #d7dfe8 !important; border-radius:11px !important; background:#fff !important;
min-height:56px !important; font-size:15px !important; box-shadow:0 1px 1px rgba(15,23,42,.02) !important; transition:border-color .15s, box-shadow .15s;
}
.wc-block-components-text-input input:focus, .wc-blocks-components-select__select:focus{ border-color:#2563eb !important; box-shadow:0 0 0 3px rgba(37,99,235,.14) !important; outline:none !important; }
.wc-block-components-text-input label, .wc-blocks-components-select__label{ font-size:12px !important; color:#64748b !important; }
.wc-block-checkout .wc-block-components-title, .wp-block-woocommerce-checkout-fields-block h2{ font-size:17px !important; font-weight:700 !important; color:#0f172a !important; }
.wc-block-components-checkout-place-order-button, .wp-block-woocommerce-checkout-actions-block button{ background:#2563eb !important; border-radius:12px !important; font-weight:800 !important; padding:16px !important; box-shadow:0 12px 26px -10px rgba(37,99,235,.55) !important; }
.wc-block-components-checkout-place-order-button:hover{ background:#1d4ed8 !important; }
/* ---- kt-catalog-filters ---- */
.catalog-filters {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 8px 0 36px;
padding: 6px;
background: var(--bg-card);
backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.04);
position: relative; z-index: 2;
}
.filter-pill {
font-family: 'Inter', sans-serif;
font-size: 13px; font-weight: 500;
padding: 9px 16px;
background: transparent;
border: 1px solid transparent;
color: var(--text-muted);
cursor: pointer;
border-radius: var(--radius-sm);
transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
display: inline-flex; align-items: center; gap: 8px;
white-space: nowrap;
}
.filter-pill:hover { color: var(--text); background: var(--bg-input); }
.filter-pill.active {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
border-color: #2563eb; color: #fff;
box-shadow: 0 2px 8px var(--primary-glow);
}
.filter-pill .filter-count {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; font-weight: 600;
padding: 2px 7px;
background: rgba(15,23,42,0.06);
color: var(--text-muted);
border-radius: 999px; line-height: 1;
}
.filter-pill.active .filter-count {
background: rgba(255,255,255,0.22); color: #fff;
}
.product-card.kt-hidden { display: none !important; }
.catalog-empty-filter {
text-align: center; padding: 60px 0;
color: var(--text-muted); font-size: 14px; display: none;
}
.catalog-empty-filter.show { display: block; }
/* ---- kt-site-overhaul ---- */
/* ═══════════════════ MOBILE HAMBURGER NAV ═══════════════════ */
.nav-burger {
display: none;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
width: 40px; height: 40px;
padding: 0;
cursor: pointer;
flex-direction: column;
align-items: center; justify-content: center;
gap: 5px;
transition: border-color 0.2s, background 0.2s;
}
.nav-burger:hover { border-color: var(--primary); background: var(--bg-input); }
.nav-burger span {
display: block; width: 18px; height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform 0.25s, opacity 0.2s;
transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile slide-down menu */
.nav-mobile {
display: none;
position: fixed;
top: var(--nav-h, 72px); left: 0; right: 0;
background: var(--bg-card);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
border-bottom: 1px solid var(--border);
box-shadow: 0 8px 24px rgba(15,23,42,0.08);
padding: 16px 24px 24px;
z-index: 9000;
transform: translateY(-110%);
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
max-height: calc(100vh - var(--nav-h, 72px));
overflow-y: auto;
}
.nav-mobile.open {
display: block;
transform: translateY(0);
}
.nav-mobile a {
display: block;
padding: 14px 8px;
color: var(--text);
text-decoration: none;
font-size: 17px; font-weight: 500;
border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
transition: color 0.15s, padding-left 0.2s;
}
.nav-mobile a:hover, .nav-mobile a:active { color: var(--primary); padding-left: 14px; }
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile .nav-mobile-cta {
margin-top: 16px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff !important;
text-align: center;
border-radius: var(--radius-sm);
border-bottom: none;
font-weight: 600;
padding: 14px;
}
body.nav-locked { overflow: hidden; }
/* Mobile breakpoint */
@media (max-width: 768px) {
.nav .nav-links { display: none !important; }
.nav .nav-cta-desktop { display: none !important; }
.nav-burger { display: inline-flex !important; }
.nav .container { display: flex; align-items: center; justify-content: space-between; }
}
@media (min-width: 769px) {
.nav-mobile { display: none !important; }
}
/* ═══════════════════ VIAL OUTLINE REPLACEMENT ═══════════════════ */
/* Hide actual product photos, show clean SVG outline instead */
/* CATALOG cards — replace the floating vial with outline */
body.page-id-228 .product-card /* product-vial-img display:none REMOVED */
.products-section .product-card .product-vial,
.products-section .product-card .product-img {
position: relative;
background: linear-gradient(180deg, rgba(37,99,235,0.04), rgba(37,99,235,0.01)) !important;
border: 1px solid rgba(37,99,235,0.12) !important;
border-radius: var(--radius-lg) !important;
padding: 32px 24px !important;
aspect-ratio: 3 / 4;
display: flex !important;
align-items: center;
justify-content: center;
overflow: hidden;
}
.products-section .product-card .product-vial::before,
.products-section .product-card .product-img::before {
content: '';
display: block;
width: 60%; max-width: 110px; height: 80%;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
filter: drop-shadow(0 6px 14px rgba(37,99,235,0.18));
transition: transform 0.3s;
}
.products-section .product-card:hover .product-vial::before,
.products-section .product-card:hover .product-img::before {
transform: translateY(-3px);
}
/* Make sure tag pill still shows above outline */
.products-section .product-card .product-tags {
position: absolute; top: 12px; right: 12px; z-index: 2;
}
/* SINGLE PRODUCT — same outline treatment */
body.single-product .woocommerce-product-gallery .wp-post-image,
body.single-product .woocommerce-product-gallery__image img {
display: none !important;
}
body.single-product .woocommerce-product-gallery {
position: relative;
}
body.single-product .woocommerce-product-gallery::after {
content: '';
position: absolute; inset: 32px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
filter: drop-shadow(0 12px 28px rgba(37,99,235,0.18));
pointer-events: none;
}
/* ═══════════════════ HOME — surface About + HPLC in trust bar ═══════════════════ */
/* Add visible "About" + "HPLC & COA" links in the hero or trust bar area */
body.home .hero-actions::after,
body.front-page .hero-actions::after {
content: '';
display: block; width: 100%;
margin-top: 14px;
}
body.home .hero-secondary-links,
body.front-page .hero-secondary-links {
margin-top: 18px;
display: flex; gap: 22px;
font-size: 13px;
flex-wrap: wrap;
}
body.home .hero-secondary-links a,
body.front-page .hero-secondary-links a {
color: var(--text-muted);
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
body.home .hero-secondary-links a:hover,
body.front-page .hero-secondary-links a:hover {
color: var(--primary);
border-bottom-color: var(--primary);
}
/* ═══════════════════ Footer org — emphasize Company section ═══════════════════ */
.footer-col h4 {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--primary);
margin-bottom: 14px;
}
.footer-col a {
display: block;
font-size: 14px;
color: var(--text-muted);
text-decoration: none;
padding: 4px 0;
transition: color 0.15s;
}
.footer-col a:hover { color: var(--text); }
/* ---- kt-pro-polish ---- */
/* ═══════════════════ NAV — extra polish + cart icon ═══════════════════ */
.nav .nav-links a {
position: relative;
padding: 8px 4px;
transition: color 0.2s;
}
.nav .nav-links a.active {
color: var(--primary) !important;
}
.nav .nav-links a.active::after {
content: '';
position: absolute; left: 4px; right: 4px; bottom: -2px;
height: 2px; background: var(--primary);
border-radius: 2px;
}
.nav-cart {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
margin-right: 8px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
text-decoration: none;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.nav-cart:hover { border-color: var(--primary); color: var(--primary); background: var(--bg-input); }
.nav-cart svg { width: 18px; height: 18px; stroke: currentColor; }
.nav-cart .cart-count {
position: absolute; top: -6px; right: -6px;
min-width: 18px; height: 18px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
border-radius: 999px;
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; font-weight: 700;
padding: 0 5px;
border: 2px solid var(--bg-body);
}
.nav-cart .cart-count.zero { display: none; }
@media (max-width: 768px) {
.nav-cart { margin: 0 8px 0 auto; }
}
/* ═══════════════════ CART PAGE ═══════════════════ */
body.woocommerce-cart main {
padding-top: calc(var(--nav-h, 72px) + 56px) !important;
padding-bottom: 80px !important;
}
body.woocommerce-cart .woocommerce {
max-width: 1140px; margin: 0 auto; padding: 0 28px;
}
body.woocommerce-cart .section-title,
body.woocommerce-cart h1 {
font-size: 34px !important; font-weight: 700 !important;
letter-spacing: -0.025em !important; margin: 0 0 28px !important;
}
.woocommerce-cart .woocommerce-cart-form {
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
margin-bottom: 24px;
}
.woocommerce-cart table.shop_table {
border: none !important; background: transparent !important;
border-radius: 0 !important;
border-collapse: collapse !important;
width: 100%;
}
.woocommerce-cart table.shop_table thead { display: none !important; }
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.18)) !important;
padding: 18px 12px !important;
vertical-align: middle !important;
}
.woocommerce-cart table.shop_table tr:last-child td { border-bottom: none !important; }
.woocommerce-cart .product-thumbnail img {
width: 64px !important; height: 64px !important;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
object-fit: cover;
background: var(--bg-input);
}
.woocommerce-cart .product-name a {
color: var(--text) !important; font-weight: 600;
text-decoration: none; font-size: 15px;
}
.woocommerce-cart .product-name a:hover { color: var(--primary) !important; }
.woocommerce-cart .product-price, .woocommerce-cart .product-subtotal {
font-family: 'JetBrains Mono', monospace; font-weight: 600;
}
.woocommerce-cart .product-remove a {
width: 26px !important; height: 26px !important;
font-size: 14px !important;
border-radius: 999px !important;
background: var(--bg-input) !important;
color: var(--text-muted) !important;
border: 1px solid var(--border) !important;
transition: all 0.2s;
}
.woocommerce-cart .product-remove a:hover {
background: rgba(239,68,68,0.08) !important;
color: var(--danger) !important;
border-color: rgba(239,68,68,0.25) !important;
}
/* Cart totals */
.woocommerce-cart .cart_totals {
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px 28px;
}
.woocommerce-cart .cart_totals h2 {
font-size: 18px !important; font-weight: 600 !important;
letter-spacing: -0.01em !important; margin: 0 0 18px !important;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
}
.woocommerce-cart .cart_totals table {
width: 100% !important;
border-collapse: collapse;
margin-bottom: 18px;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
padding: 10px 0 !important;
border: none !important;
border-bottom: 1px dashed var(--border-subtle, rgba(148,163,184,0.18)) !important;
text-align: right;
font-size: 14px;
}
.woocommerce-cart .cart_totals table th {
text-align: left;
font-weight: 500 !important;
color: var(--text-muted) !important;
text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px !important;
}
.woocommerce-cart .order-total th, .woocommerce-cart .order-total td {
border-bottom: none !important;
padding-top: 14px !important;
font-size: 18px !important;
font-weight: 700 !important;
}
.woocommerce-cart .order-total td {
background: linear-gradient(135deg, var(--blue-600, #2563eb), var(--cyan-500, #06b6d4));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
display: block !important; width: 100% !important; text-align: center;
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
color: #fff !important;
padding: 14px 28px !important;
font-size: 15px !important; font-weight: 600 !important;
border-radius: var(--radius-sm) !important;
border: 1px solid #2563eb !important;
text-decoration: none;
box-shadow: 0 2px 8px var(--primary-glow);
transition: all 0.2s;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(37,99,235,0.4) !important;
}
/* Empty cart messaging */
.cart-empty.woocommerce-info {
background: var(--bg-card) !important;
border: 1px dashed var(--border) !important;
color: var(--text) !important;
padding: 48px 24px !important;
text-align: center;
border-radius: var(--radius-lg) !important;
font-size: 16px;
}
.return-to-shop a {
display: inline-block;
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
color: #fff !important;
padding: 12px 28px !important;
font-size: 14px; font-weight: 600;
border-radius: var(--radius-sm) !important;
text-decoration: none;
margin-top: 16px;
box-shadow: 0 2px 8px var(--primary-glow);
}
/* Coupon */
.woocommerce-cart .coupon {
display: flex; gap: 8px; align-items: center; margin-bottom: 0;
}
.woocommerce-cart .coupon input.input-text {
font-family: 'Inter', sans-serif;
padding: 10px 14px !important;
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-sm) !important;
font-size: 14px;
width: auto !important; flex: 1;
}
.woocommerce-cart .coupon button {
background: var(--bg-input) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
padding: 10px 18px !important;
font-size: 13px; font-weight: 600;
border-radius: var(--radius-sm) !important;
cursor: pointer;
}
.woocommerce-cart button[name="update_cart"] {
background: var(--bg-input) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
}
/* ═══════════════════ CHECKOUT PAGE ═══════════════════ */
body.woocommerce-checkout main {
padding-top: calc(var(--nav-h, 72px) + 56px) !important;
padding-bottom: 80px !important;
}
body.woocommerce-checkout .woocommerce {
max-width: 1140px; margin: 0 auto; padding: 0 28px;
}
.woocommerce-checkout form.checkout {
display: grid !important;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 28px;
}
@media (max-width: 880px) {
.woocommerce-checkout form.checkout { grid-template-columns: 1fr !important; }
}
.woocommerce-checkout #customer_details,
.woocommerce-checkout-review-order,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px 28px;
}
.woocommerce-checkout #order_review_heading {
border-bottom: none; padding-bottom: 0; margin-bottom: 0;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.woocommerce-checkout #order_review {
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
border-top: none;
}
.woocommerce-checkout h3, .woocommerce-checkout #order_review_heading {
font-size: 18px !important; font-weight: 600 !important;
letter-spacing: -0.01em !important; margin: 0 0 18px !important;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
}
.woocommerce-checkout .form-row {
margin: 0 0 14px !important;
padding: 0 !important;
}
.woocommerce-checkout .form-row label {
font-size: 11px !important; font-weight: 700 !important;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-muted) !important;
margin-bottom: 7px !important;
}
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
width: 100% !important;
padding: 11px 14px !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-sm) !important;
color: var(--text) !important;
}
.woocommerce-checkout .form-row input:focus {
outline: none; border-color: var(--primary) !important;
box-shadow: 0 0 0 3px var(--primary-glow) !important;
}
.woocommerce-checkout #place_order {
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
color: #fff !important;
padding: 14px 28px !important;
font-size: 15px !important; font-weight: 600 !important;
border: 1px solid #2563eb !important;
border-radius: var(--radius-sm) !important;
width: 100%; cursor: pointer;
box-shadow: 0 2px 8px var(--primary-glow);
transition: all 0.2s;
}
.woocommerce-checkout #place_order:hover {
background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(37,99,235,0.4) !important;
}
.woocommerce-checkout table.shop_table {
width: 100% !important;
border-collapse: collapse;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
padding: 12px 0 !important;
border: none !important;
border-bottom: 1px dashed var(--border-subtle, rgba(148,163,184,0.18)) !important;
text-align: right;
font-size: 14px;
}
.woocommerce-checkout table.shop_table th {
text-align: left;
font-weight: 500 !important;
color: var(--text-muted) !important;
}
.woocommerce-checkout .order-total td {
background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 18px !important; font-weight: 700;
}
/* ═══════════════════ ARTICLES — index ═══════════════════ */
body.page-id-202 main, body.blog main {
padding-top: calc(var(--nav-h, 72px) + 56px) !important;
padding-bottom: 80px !important;
}
body.page-id-202 .container, body.blog .container {
max-width: 920px; margin: 0 auto;
}
.kt-articles-header {
margin: 0 0 40px;
text-align: left;
}
.kt-articles-header h1 {
font-size: 38px !important; font-weight: 700 !important;
letter-spacing: -0.025em !important;
margin: 0 0 12px !important;
}
.kt-articles-header p {
font-size: 17px; color: var(--text-muted); line-height: 1.55; max-width: 600px;
}
.kt-article-card {
display: block;
padding: 28px 30px;
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
text-decoration: none;
color: var(--text);
margin-bottom: 18px;
transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.kt-article-card:hover {
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(15,23,42,0.08), 0 0 0 3px var(--primary-glow);
color: var(--text);
}
.kt-article-card .kt-article-meta {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--primary);
margin-bottom: 10px;
}
.kt-article-card h2 {
font-size: 22px !important; font-weight: 600;
letter-spacing: -0.015em;
margin: 0 0 10px !important;
color: var(--text) !important;
}
.kt-article-card p {
font-size: 14px; line-height: 1.55;
color: var(--text-muted);
margin: 0 0 12px;
}
.kt-article-card .kt-article-cta {
font-size: 13px; font-weight: 600; color: var(--primary);
display: inline-flex; align-items: center; gap: 6px;
}
.kt-article-card:hover .kt-article-cta::after {
content: '→'; transform: translateX(3px); transition: transform 0.25s;
}
/* ═══════════════════ ARTICLES — single post ═══════════════════ */
body.single-post main {
padding-top: calc(var(--nav-h, 72px) + 56px) !important;
padding-bottom: 80px !important;
}
body.single-post .container, body.single-post article {
max-width: 720px !important; margin: 0 auto !important;
}
body.single-post article header h1 {
font-size: 36px !important; font-weight: 700 !important;
letter-spacing: -0.025em !important;
line-height: 1.15 !important;
margin: 0 0 14px !important;
}
body.single-post .entry-meta, body.single-post .post-meta {
font-size: 12px; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
margin-bottom: 28px;
}
body.single-post article .entry-content,
body.single-post article > div,
body.single-post .entry-content {
font-size: 17px; line-height: 1.65; color: var(--text);
}
body.single-post .entry-content h2 {
font-size: 24px !important; font-weight: 700 !important;
letter-spacing: -0.015em !important;
margin: 36px 0 16px !important;
color: var(--text) !important;
}
body.single-post .entry-content h3 {
font-size: 19px !important; font-weight: 600;
margin: 28px 0 12px !important;
}
body.single-post .entry-content p { margin: 0 0 18px; }
body.single-post .entry-content ul,
body.single-post .entry-content ol {
margin: 0 0 18px; padding-left: 24px;
}
body.single-post .entry-content li {
margin-bottom: 8px;
}
body.single-post .entry-content a {
color: var(--primary); text-decoration: underline;
text-decoration-color: rgba(37,99,235,0.3);
text-underline-offset: 3px;
}
body.single-post .entry-content a:hover {
text-decoration-color: var(--primary);
}
body.single-post .entry-content code {
font-family: 'JetBrains Mono', monospace;
background: var(--bg-input);
padding: 2px 7px;
border-radius: 4px;
font-size: 0.92em;
border: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
}
body.single-post .entry-content em {
color: var(--text-muted); font-style: italic;
}
/* ═══════════════════ Trust bar — keep it readable on mobile ═══════════════════ */
@media (max-width: 768px) {
.trust-bar .trust-item { font-size: 12px !important; }
}
/* ═══════════════════ ACCESS / SR — global polish ═══════════════════ */
:focus-visible {
outline: 2px solid var(--primary) !important;
outline-offset: 2px !important;
}
::selection { background: rgba(37,99,235,0.18); color: var(--text); }
/* ---- kt-world-class ---- */
/* ═══════════════════ GLOBAL — smooth scroll + better focus ═══════════════════ */
html { scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; }
:focus-visible {
outline: 2px solid var(--primary) !important;
outline-offset: 2px !important;
border-radius: 4px;
}
::selection { background: rgba(37,99,235,0.18); color: var(--text); }
/* ═══════════════════ COA GRID (HPLC page) ═══════════════════ */
.kt-coa-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin: 28px 0 16px;
}
.kt-coa-card {
display: flex; align-items: center; gap: 14px;
padding: 18px 20px;
background: var(--bg-card);
backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.kt-coa-card:hover {
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15,23,42,0.06), 0 0 0 3px var(--primary-glow);
}
.kt-coa-icon {
width: 44px; height: 44px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(6,182,212,0.10));
border: 1px solid rgba(37,99,235,0.18);
border-radius: var(--radius-sm);
font-size: 20px;
}
.kt-coa-body { flex: 1; min-width: 0; }
.kt-coa-title { font-weight: 600; font-size: 14px; color: var(--text); letter-spacing: -0.005em; margin-bottom: 4px; }
.kt-coa-meta { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-bottom: 6px; letter-spacing: 0.02em; }
.kt-coa-link {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 600;
color: var(--primary); text-decoration: none;
transition: gap 0.2s;
}
.kt-coa-link:hover { gap: 8px; }
.kt-coa-link.kt-coa-pending {
color: var(--text-muted); cursor: default;
padding: 3px 9px;
background: var(--bg-input);
border-radius: 999px;
font-family: 'JetBrains Mono', monospace; font-size: 10px;
border: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
}
.kt-coa-link.kt-coa-pending:hover { gap: 5px; }
/* ═══════════════════ TOAST NOTIFICATIONS ═══════════════════ */
#kt-toast-container {
position: fixed; bottom: 24px; right: 24px;
z-index: 99999;
display: flex; flex-direction: column-reverse; gap: 10px;
pointer-events: none;
max-width: 380px;
}
.kt-toast {
background: var(--bg-card);
backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--border);
border-left: 3px solid var(--primary);
border-radius: var(--radius);
padding: 14px 18px;
display: flex; align-items: center; gap: 12px;
box-shadow: 0 12px 32px rgba(15,23,42,0.12), 0 1px 3px rgba(15,23,42,0.06);
font-size: 14px; line-height: 1.4; color: var(--text);
pointer-events: auto;
animation: kt-toast-in 0.35s cubic-bezier(0.4,0,0.2,1);
transform-origin: bottom right;
}
.kt-toast.kt-toast-success { border-left-color: var(--success, #10b981); }
.kt-toast.kt-toast-error { border-left-color: var(--danger, #ef4444); }
.kt-toast.kt-toast-info { border-left-color: var(--primary); }
.kt-toast .kt-toast-icon { font-size: 18px; flex-shrink: 0; }
.kt-toast .kt-toast-body { flex: 1; }
.kt-toast .kt-toast-title { font-weight: 600; margin-bottom: 2px; font-size: 13px; }
.kt-toast .kt-toast-close {
background: transparent; border: none; color: var(--text-muted);
cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px;
}
.kt-toast.removing { animation: kt-toast-out 0.3s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes kt-toast-in {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kt-toast-out {
to { opacity: 0; transform: translateY(20px) scale(0.95); }
}
/* ═══════════════════ STICKY BUY BAR (single product) ═══════════════════ */
.kt-sticky-buy {
position: fixed; bottom: 0; left: 0; right: 0;
z-index: 90;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
border-top: 1px solid var(--border);
padding: 12px 20px;
box-shadow: 0 -8px 24px rgba(15,23,42,0.08);
transform: translateY(110%);
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
display: flex; align-items: center; gap: 14px;
}
.kt-sticky-buy.show { transform: translateY(0); }
.kt-sticky-buy .kt-sticky-title {
flex: 1; min-width: 0;
font-weight: 600; font-size: 14px; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kt-sticky-buy .kt-sticky-price {
font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px;
background: linear-gradient(135deg, #2563eb, #06b6d4);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.kt-sticky-buy .kt-sticky-btn {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff; text-decoration: none;
padding: 10px 22px; font-size: 14px; font-weight: 600;
border-radius: var(--radius-sm);
box-shadow: 0 2px 8px var(--primary-glow);
white-space: nowrap;
transition: transform 0.2s, box-shadow 0.2s;
}
.kt-sticky-buy .kt-sticky-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,0.4); }
@media (max-width: 500px) {
.kt-sticky-buy .kt-sticky-price { display: none; }
}
/* ═══════════════════ SCROLL REVEAL ═══════════════════ */
.reveal-on-scroll {
opacity: 0; transform: translateY(16px);
transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.reveal-on-scroll.revealed { opacity: 1; transform: translateY(0); }
.reveal-on-scroll[data-delay="1"] { transition-delay: 0.06s; }
.reveal-on-scroll[data-delay="2"] { transition-delay: 0.12s; }
.reveal-on-scroll[data-delay="3"] { transition-delay: 0.18s; }
.reveal-on-scroll[data-delay="4"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
.reveal-on-scroll { opacity: 1 !important; transform: none !important; }
html { scroll-behavior: auto; }
}
/* ═══════════════════ QUANTITY STEPPER ═══════════════════ */
.kt-qty-stepper {
display: inline-flex; align-items: stretch;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
height: 44px;
}
.kt-qty-stepper button {
width: 36px; background: var(--bg-input); border: none;
color: var(--text); font-size: 18px; font-weight: 600;
cursor: pointer; line-height: 1; padding: 0;
transition: background 0.15s;
}
.kt-qty-stepper button:hover { background: rgba(37,99,235,0.08); color: var(--primary); }
.kt-qty-stepper .qty {
width: 50px !important; height: auto !important;
border: none !important; border-radius: 0 !important;
border-left: 1px solid var(--border) !important;
border-right: 1px solid var(--border) !important;
background: #fff !important; box-shadow: none !important;
text-align: center !important;
}
/* ═══════════════════ HERO POLISH ═══════════════════ */
.hero { position: relative; }
.hero-actions .btn-primary,
.hero-actions .btn-outline {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 28px !important;
border-radius: var(--radius-sm) !important;
font-size: 15px !important; font-weight: 600 !important;
letter-spacing: -0.005em !important;
transition: transform 0.2s, box-shadow 0.2s !important;
text-decoration: none;
}
.hero-actions .btn-primary {
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
color: #fff !important;
border: 1px solid #2563eb !important;
box-shadow: 0 4px 14px var(--primary-glow) !important;
}
.hero-actions .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(37,99,235,0.4) !important;
}
.hero-actions .btn-outline {
background: var(--bg-card) !important;
backdrop-filter: blur(20px);
color: var(--text) !important;
border: 1px solid var(--border) !important;
}
.hero-actions .btn-outline:hover {
border-color: var(--primary) !important;
color: var(--primary) !important;
transform: translateY(-2px);
}
/* ═══════════════════ TRUST BAR — better ═══════════════════ */
.trust-bar {
background: linear-gradient(180deg, var(--bg-card), transparent);
border-top: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
padding: 18px 0;
overflow: hidden;
}
.trust-item {
font-weight: 500 !important; color: var(--text) !important;
font-size: 13.5px !important; letter-spacing: -0.005em;
}
.trust-item .icon { color: var(--primary); margin-right: 4px; }
.trust-sep { color: var(--text-dim); }
/* ═══════════════════ Footer enhancements ═══════════════════ */
.footer { padding-top: 60px !important; padding-bottom: 28px !important; background: linear-gradient(180deg, transparent, var(--bg-card)) !important; border-top: 1px solid var(--border-subtle, rgba(148,163,184,0.18)) !important; }
.footer-brand p { font-size: 13px; line-height: 1.6; color: var(--text-muted); max-width: 320px; }
.footer-bottom { padding-top: 28px !important; margin-top: 32px !important; border-top: 1px solid var(--border-subtle, rgba(148,163,184,0.18)) !important; display: flex !important; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-legal a { color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
.footer-legal a:hover { color: var(--primary); }
/* ═══════════════════ 404 + empty states ═══════════════════ */
.error404 main { padding-top: calc(var(--nav-h, 72px) + 80px) !important; padding-bottom: 80px !important; text-align: center; }
.error404 .container { max-width: 600px; }
.error404 h1 { font-size: 72px !important; font-weight: 700 !important; letter-spacing: -0.04em !important; margin: 0 0 14px !important; background: linear-gradient(135deg, var(--blue-600), var(--cyan-500)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.error404 p { font-size: 17px; color: var(--text-muted); margin: 0 0 24px; }
/* ═══════════════════ Loading skeleton ═══════════════════ */
.kt-skeleton {
background: linear-gradient(90deg, var(--bg-input) 25%, var(--bg-card) 50%, var(--bg-input) 75%);
background-size: 200% 100%;
animation: kt-skeleton 1.4s ease-in-out infinite;
border-radius: var(--radius-sm);
}
@keyframes kt-skeleton {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ═══════════════════ Microinteractions ═══════════════════ */
a, button { transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s; }
.product-card { transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s !important; }
.product-card:hover { transform: translateY(-3px); }
/* ═══════════════════ Section spacing ═══════════════════ */
section.section { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 768px) { section.section { padding-top: 56px; padding-bottom: 56px; } }
/* ═══════════════════ Print friendly ═══════════════════ */
@media print {
.nav, .nav-mobile, .footer, .nav-burger, .nav-cart, .kt-sticky-buy, #kt-toast-container, .trust-bar { display: none !important; }
body { background: #fff !important; color: #000 !important; }
main { padding-top: 0 !important; }
a { color: #000 !important; text-decoration: underline; }
.container { max-width: 100% !important; padding: 0 !important; }
}
/* ═══════════════════ Misc small fixes ═══════════════════ */
img { max-width: 100%; height: auto; }
.button:focus-visible, button:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; }
/* ---- kt-mega-polish ---- */
/* ═══════════════════ HERO — trust signals row ═══════════════════ */
.kt-trust-row {
display: flex; gap: 14px; flex-wrap: wrap;
margin-top: 26px; padding-top: 22px;
border-top: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
align-items: center;
}
.kt-trust-row .kt-trust-pill {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12px; font-weight: 500;
color: var(--text);
backdrop-filter: blur(20px);
}
.kt-trust-row .kt-trust-pill::before {
content: '✓';
color: var(--success, #10b981);
font-weight: 700;
font-size: 11px;
}
/* search bar removed */
/* ═══════════════════ ORDER CONFIRMATION (thank you page) ═══════════════════ */
body.woocommerce-order-received main {
padding-top: calc(var(--nav-h, 72px) + 56px) !important;
padding-bottom: 80px !important;
}
body.woocommerce-order-received .container, body.woocommerce-order-received .woocommerce {
max-width: 900px; margin: 0 auto;
}
.woocommerce-order .woocommerce-notice--success,
.woocommerce-thankyou-order-received {
background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(37,99,235,0.04)) !important;
border: 1px solid rgba(16,185,129,0.2) !important;
border-radius: var(--radius-lg) !important;
padding: 28px 32px !important;
font-size: 18px !important; font-weight: 600 !important;
color: var(--text) !important;
margin-bottom: 28px !important;
position: relative; padding-left: 76px !important;
}
.woocommerce-order .woocommerce-notice--success::before,
.woocommerce-thankyou-order-received::before {
content: '✓';
position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px;
background: linear-gradient(135deg, #10b981, #06b6d4);
color: #fff; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700;
box-shadow: 0 4px 14px rgba(16,185,129,0.3);
}
.woocommerce-order ul.woocommerce-order-overview {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
padding: 0 !important;
margin: 0 0 28px !important;
list-style: none !important;
}
.woocommerce-order ul.woocommerce-order-overview li {
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 18px !important;
text-transform: uppercase; letter-spacing: 0.08em;
font-size: 11px !important; font-weight: 600 !important;
color: var(--text-muted) !important;
border-right: 1px solid var(--border) !important;
}
.woocommerce-order ul.woocommerce-order-overview li strong {
display: block;
font-family: 'JetBrains Mono', monospace;
text-transform: none; letter-spacing: -0.005em;
font-size: 15px; font-weight: 700;
color: var(--text);
margin-top: 6px;
}
.woocommerce-order section.woocommerce-order-details,
.woocommerce-order section.woocommerce-customer-details {
background: var(--bg-card); backdrop-filter: blur(20px);
border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: 24px 28px !important;
margin-bottom: 22px !important;
}
.woocommerce-order section h2 {
font-size: 18px !important; font-weight: 600 !important;
margin: 0 0 18px !important;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
}
/* ═══════════════════ MY ACCOUNT — dashboard, orders, address, downloads ═══════════════════ */
body.woocommerce-account.logged-in main {
padding-top: calc(var(--nav-h, 72px) + 56px) !important;
padding-bottom: 80px !important;
}
body.woocommerce-account.logged-in .woocommerce {
max-width: 1140px; margin: 0 auto; padding: 0 28px;
display: grid !important;
grid-template-columns: 240px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
@media (max-width: 780px) {
body.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr !important; }
}
/* Orders table in dashboard */
.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table {
width: 100% !important;
border-collapse: collapse !important;
border: none !important; background: transparent !important;
}
.woocommerce-MyAccount-content table thead th {
background: var(--bg-input) !important;
font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.08em;
font-weight: 600 !important; color: var(--text-muted) !important;
padding: 10px 14px !important;
border: none !important;
}
.woocommerce-MyAccount-content table tbody td {
padding: 14px !important;
border: none !important;
border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.18)) !important;
background: transparent !important;
font-size: 14px;
}
.woocommerce-MyAccount-content table tbody tr:hover { background: var(--bg-input) !important; }
.woocommerce-MyAccount-content table a.button {
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
color: #fff !important; padding: 8px 14px !important;
font-size: 12px !important; border-radius: var(--radius-sm) !important;
border: 1px solid #2563eb !important;
text-decoration: none;
}
.woocommerce-MyAccount-content table mark.order-status {
display: inline-block;
padding: 3px 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase;
border-radius: 999px;
background: rgba(37,99,235,0.08);
color: var(--primary);
}
.woocommerce-MyAccount-content .woocommerce-Address {
background: var(--bg-input);
padding: 16px 20px;
border-radius: var(--radius-sm);
margin-bottom: 14px;
font-size: 14px; line-height: 1.55;
}
.woocommerce-MyAccount-content .edit a {
font-size: 12px;
background: var(--bg-card);
border: 1px solid var(--border);
padding: 6px 12px;
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--text);
}
/* ═══════════════════ RELATED PRODUCTS carousel ═══════════════════ */
.related.products ul.products,
.up-sells ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
gap: 18px !important;
padding: 0 !important; list-style: none !important;
margin: 0 !important;
}
.related.products li.product {
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px !important;
transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
list-style: none !important;
}
.related.products li.product:hover {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(15,23,42,0.06);
}
.related.products li.product a { text-decoration: none; color: var(--text); }
.related.products li.product h2 {
font-size: 15px !important; font-weight: 600 !important;
margin: 12px 0 6px !important;
color: var(--text) !important;
letter-spacing: -0.005em;
}
.related.products li.product .price {
font-family: 'JetBrains Mono', monospace;
font-size: 16px !important; font-weight: 700 !important;
color: var(--text) !important;
background: none !important;
}
.related.products li.product .button {
display: block !important; text-align: center;
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
color: #fff !important;
padding: 8px 14px !important;
font-size: 12px !important; font-weight: 600 !important;
border-radius: var(--radius-sm) !important;
border: 1px solid #2563eb !important;
margin-top: 10px !important;
text-decoration: none;
}
/* ═══════════════════ CHECKOUT loading skeleton (during AJAX update) ═══════════════════ */
.processing .blockOverlay { display: none !important; }
.processing #order_review {
position: relative;
}
.processing #order_review::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(37,99,235,0.06), transparent);
background-size: 200% 100%;
animation: kt-skel 1.2s ease-in-out infinite;
pointer-events: none;
border-radius: var(--radius-lg);
}
@keyframes kt-skel {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ---- kt-content-polish ---- */
/* ═══════════════════ UNIVERSAL PAGE CONTAINER ═══════════════════ */
/* Every on the site should be centered with consistent max-width + padding */
body main.section,
body main.site-main,
body.page main,
body.single-post main,
body.archive main,
body.search main,
body.error404 main {
width: 100%;
box-sizing: border-box;
}
body main.section > .container,
body main.site-main > .container,
body main > .container,
body main > .woocommerce {
max-width: 1140px !important;
margin: 0 auto !important;
padding-left: 28px !important;
padding-right: 28px !important;
box-sizing: border-box;
}
/* Pages with primarily text content — narrower for readability */
body.page-id-3 main .container, /* /privacy-policy/ */
body.page-id-7 main .container, /* /about/ */
body.page-id-25 main .container, /* /shipping-policy/ */
body.page-id-26 main .container, /* /refund-policy/ */
body.page-id-132 main .container, /* /hplc-coa/ */
body.page-id-147 main .container, /* /contact/ */
body.page-id-223 main .container,
body.page-id-224 main .container,
body.page-id-230 main .container,
body.page-id-231 main .container,
body.page-id-245 main .container,
body.page-id-133 main .container { /* /faq/ */
max-width: 820px !important;
}
/* Universal padding-top to clear nav */
body.page main.section,
body.page main.site-main,
body.single-post main,
body.woocommerce-cart main,
body.woocommerce-checkout main,
body.woocommerce-account main,
body.error404 main,
body.archive main,
body.search main {
padding-top: calc(var(--nav-h, 72px) + 56px) !important;
padding-bottom: 80px !important;
}
/* ═══════════════════ PAGE TITLE BLOCK ═══════════════════ */
/* page.php renders …
as the title — make it look like a hero */
body.page main .section-title,
body.single-post main h1.entry-title,
body.woocommerce-cart main .section-title,
body.woocommerce-checkout main .section-title,
body.woocommerce-account main .section-title {
font-size: 36px !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
color: var(--text) !important;
margin: 0 0 24px !important;
line-height: 1.15 !important;
text-align: left;
}
@media (max-width: 640px) {
body.page main .section-title,
body.single-post main h1.entry-title { font-size: 28px !important; }
}
/* Add a subtle accent bar above page titles for visual hierarchy */
body.page main .section-title::before {
content: '';
display: block;
width: 36px; height: 3px;
background: linear-gradient(90deg, var(--blue-600, #2563eb), var(--cyan-500, #06b6d4));
border-radius: 3px;
margin-bottom: 16px;
}
/* ═══════════════════ UNIVERSAL CONTENT TYPOGRAPHY ═══════════════════ */
/* Headings inside the_content() */
body.page main .container > h1,
body.page main .container > h2,
body.page main .container > h3,
body.page main .container > h4,
body.single-post main article h2,
body.single-post main article h3,
body.single-post main article h4,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
letter-spacing: -0.015em;
color: var(--text) !important;
font-family: 'Inter', sans-serif;
}
body.page main .container > h2,
.entry-content h2 {
font-size: 24px !important;
font-weight: 700 !important;
margin: 40px 0 14px !important;
padding-top: 8px;
position: relative;
}
body.page main .container > h2:first-of-type,
.entry-content h2:first-child {
margin-top: 0 !important;
}
body.page main .container > h3,
.entry-content h3 {
font-size: 18px !important;
font-weight: 600 !important;
margin: 28px 0 10px !important;
color: var(--text) !important;
}
/* Paragraphs */
body.page main .container > p,
body.single-post main article p,
.entry-content p {
font-size: 16px;
line-height: 1.65;
color: var(--text);
margin: 0 0 16px;
}
body.page main .container > p:first-of-type,
.entry-content > p:first-child {
font-size: 17px;
color: var(--text);
line-height: 1.65;
}
/* Lists */
body.page main .container > ul,
body.page main .container > ol,
body.single-post main article ul,
body.single-post main article ol,
.entry-content ul, .entry-content ol {
margin: 0 0 20px;
padding-left: 24px;
font-size: 16px;
line-height: 1.7;
color: var(--text);
}
body.page main .container > ul li,
body.page main .container > ol li,
.entry-content li {
margin-bottom: 6px;
}
body.page main .container > ul,
.entry-content ul {
list-style: none;
padding-left: 4px;
}
body.page main .container > ul li,
.entry-content ul li {
position: relative;
padding-left: 22px;
}
body.page main .container > ul li::before,
.entry-content ul li::before {
content: '';
position: absolute; left: 4px; top: 13px;
width: 6px; height: 6px;
border-radius: 50%;
background: linear-gradient(135deg, var(--blue-600, #2563eb), var(--cyan-500, #06b6d4));
}
body.page main .container > ol,
.entry-content ol {
counter-reset: kt-ol;
list-style: none;
padding-left: 4px;
}
body.page main .container > ol li,
.entry-content ol li {
counter-increment: kt-ol;
position: relative;
padding-left: 32px;
}
body.page main .container > ol li::before,
.entry-content ol li::before {
content: counter(kt-ol);
position: absolute; left: 0; top: 0;
width: 22px; height: 22px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; font-weight: 700;
color: var(--primary);
}
/* Links inside content */
body.page main .container a,
.entry-content a {
color: var(--primary);
text-decoration: underline;
text-decoration-color: rgba(37,99,235,0.3);
text-underline-offset: 3px;
transition: text-decoration-color 0.15s;
}
body.page main .container a:hover,
.entry-content a:hover {
text-decoration-color: var(--primary);
}
/* strong, em, code */
body.page main .container strong,
.entry-content strong { font-weight: 700; color: var(--text); }
body.page main .container em,
.entry-content em { color: var(--text-muted); font-style: italic; }
body.page main .container code,
.entry-content code {
font-family: 'JetBrains Mono', monospace;
background: var(--bg-input);
padding: 2px 7px;
border-radius: 4px;
font-size: 0.92em;
border: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
color: var(--text);
}
/* Blockquote */
body.page main .container blockquote,
.entry-content blockquote {
border-left: 3px solid var(--primary);
background: var(--bg-input);
padding: 14px 20px;
margin: 0 0 20px;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-size: 15px;
color: var(--text);
font-style: italic;
}
/* Tables */
body.page main .container table,
.entry-content table {
width: 100%;
border-collapse: collapse;
margin: 0 0 24px;
font-size: 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
body.page main .container table th,
.entry-content table th {
background: var(--bg-input);
text-align: left; padding: 10px 14px;
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-muted);
border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
}
body.page main .container table td,
.entry-content table td {
padding: 10px 14px;
border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
}
body.page main .container table tr:last-child td,
.entry-content table tr:last-child td { border-bottom: none; }
/* HR — section separator */
body.page main .container > hr,
.entry-content hr {
border: none;
height: 1px;
background: var(--border-subtle, rgba(148,163,184,0.18));
margin: 32px 0;
}
/* ═══════════════════ SINGLE PRODUCT — description tab content ═══════════════════ */
.woocommerce div.product .woocommerce-Tabs-panel--description {
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 32px !important;
}
.woocommerce-Tabs-panel--description h1,
.woocommerce-Tabs-panel--description h2,
.woocommerce-Tabs-panel--description h3 {
font-family: 'Inter', sans-serif;
letter-spacing: -0.015em;
color: var(--text) !important;
margin: 24px 0 10px !important;
}
.woocommerce-Tabs-panel--description h2 {
font-size: 20px !important; font-weight: 700 !important;
}
.woocommerce-Tabs-panel--description h2:first-child {
margin-top: 0 !important;
}
.woocommerce-Tabs-panel--description h3 {
font-size: 15px !important; font-weight: 600 !important;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--primary) !important;
margin: 28px 0 10px !important;
}
.woocommerce-Tabs-panel--description p {
font-size: 15px; line-height: 1.65; color: var(--text);
margin: 0 0 14px;
}
.woocommerce-Tabs-panel--description ul {
list-style: none; padding-left: 4px;
margin: 0 0 18px;
}
.woocommerce-Tabs-panel--description ul li {
position: relative; padding-left: 22px; margin-bottom: 6px;
font-size: 15px; line-height: 1.6; color: var(--text);
}
.woocommerce-Tabs-panel--description ul li::before {
content: '';
position: absolute; left: 4px; top: 11px;
width: 6px; height: 6px;
border-radius: 50%;
background: linear-gradient(135deg, var(--blue-600, #2563eb), var(--cyan-500, #06b6d4));
}
.woocommerce-Tabs-panel--description strong { color: var(--text); font-weight: 700; }
.woocommerce-Tabs-panel--description em { color: var(--text-muted); font-style: italic; font-size: 13px; }
.woocommerce-Tabs-panel--description hr {
border: none; height: 1px;
background: var(--border-subtle, rgba(148,163,184,0.18));
margin: 24px 0;
}
.woocommerce-Tabs-panel--description table {
width: 100%; border-collapse: collapse; margin: 0 0 18px;
font-size: 14px;
}
.woocommerce-Tabs-panel--description table td {
padding: 8px 12px;
border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
}
.woocommerce-Tabs-panel--description table td:first-child {
color: var(--text-muted); font-weight: 600; width: 35%;
}
/* Spec list (CAS / Purity / Form / Storage) as KV grid */
.woocommerce-Tabs-panel--description ul.product-specs,
.woocommerce-Tabs-panel--description .specifications + ul {
background: var(--bg-input);
border-radius: var(--radius-sm);
padding: 16px 20px !important;
border: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
}
/* FAQ details/summary if used */
.woocommerce-Tabs-panel--description details {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 16px;
margin-bottom: 8px;
}
.woocommerce-Tabs-panel--description summary {
cursor: pointer; font-weight: 600;
font-size: 14px; color: var(--text);
}
/* ═══════════════════ CART PAGE — extra alignment + responsive ═══════════════════ */
body.woocommerce-cart main {
padding-top: calc(var(--nav-h, 72px) + 56px) !important;
padding-bottom: 80px !important;
}
body.woocommerce-cart .woocommerce {
max-width: 1140px !important;
margin: 0 auto !important;
padding: 0 28px !important;
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 28px;
align-items: start;
}
@media (max-width: 880px) {
body.woocommerce-cart .woocommerce {
grid-template-columns: 1fr !important;
}
}
body.woocommerce-cart .woocommerce-notices-wrapper {
grid-column: 1 / -1;
}
body.woocommerce-cart form.woocommerce-cart-form { margin: 0 !important; }
body.woocommerce-cart .cart-collaterals { margin: 0 !important; width: 100% !important; max-width: none !important; float: none !important; }
body.woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; max-width: none !important; float: none !important; }
/* Empty cart center it */
body.woocommerce-cart .cart-empty {
grid-column: 1 / -1;
}
/* ═══════════════════ HERO + HOME centering ═══════════════════ */
.hero-content {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.hero-content .hero-badge { margin-left: auto; margin-right: auto; }
.hero-actions { justify-content: center; }
.hero-secondary-links { justify-content: center; }
.kt-trust-row { justify-content: center; }
/* ═══════════════════ FOOTER alignment ═══════════════════ */
.footer .container { max-width: 1140px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 880px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
.footer-brand { grid-column: auto; }
}
/* ═══════════════════ CATALOG header alignment ═══════════════════ */
.products-section .products-header {
display: flex !important; align-items: end; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
}
.products-section .products-header > div:first-child { flex: 1; min-width: 280px; }
.products-section .section-title,
.products-section h2.section-title {
font-size: 38px !important; font-weight: 700 !important;
letter-spacing: -0.025em !important;
margin: 4px 0 8px !important;
}
.products-section .section-label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--primary);
margin-bottom: 12px;
display: inline-flex; align-items: center; gap: 8px;
}
.products-section .section-label::before {
content: ''; width: 18px; height: 2px; background: var(--primary); border-radius: 2px;
}
.products-section .section-sub {
font-size: 16px; color: var(--text-muted); line-height: 1.55; max-width: 540px;
}
/* ═══════════════════ HPLC content boxes — special call-out treatment ═══════════════════ */
/* Wrap key sections in card-look on HPLC page automatically using nth-of-type tricks isn't reliable;
instead style h2 + following content as paired blocks via :has() */
body.page-id-132 main .container > p {
font-size: 16px;
}
body.page-id-132 main .container > p:first-of-type {
background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(6,182,212,0.02));
border: 1px solid rgba(37,99,235,0.12);
border-radius: var(--radius);
padding: 18px 22px;
font-size: 17px; line-height: 1.6;
}
/* ═══════════════════ ARTICLES — Index page styling boost ═══════════════════ */
body.page-id-202 main .container,
body.blog main .container {
display: flex;
flex-direction: column;
gap: 0;
}
body.page-id-202 .post,
body.blog .post {
display: block !important;
padding: 24px 28px !important;
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: 14px !important;
transition: all 0.25s;
list-style: none;
}
body.page-id-202 .post:hover,
body.blog .post:hover {
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(15,23,42,0.08), 0 0 0 3px var(--primary-glow);
}
body.page-id-202 .post h2,
body.blog .post h2 {
font-size: 20px !important; font-weight: 600 !important;
margin: 0 0 8px !important;
}
body.page-id-202 .post h2 a,
body.blog .post h2 a {
color: var(--text) !important;
text-decoration: none !important;
}
body.page-id-202 .post:hover h2 a,
body.blog .post:hover h2 a {
color: var(--primary) !important;
}
body.page-id-202 .post .entry-meta,
body.blog .post .entry-meta {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--primary); margin-bottom: 8px; font-weight: 600;
}
body.page-id-202 .post .entry-summary,
body.page-id-202 .post p,
body.blog .post p {
font-size: 14px; line-height: 1.55; color: var(--text-muted);
margin: 0 0 8px;
}
/* ═══════════════════ Misc small consistent fixes ═══════════════════ */
section { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }
.button, button { font-family: 'Inter', sans-serif; }
input, select, textarea { font-family: 'Inter', sans-serif; }
.container { box-sizing: border-box; }
/* Prevent horizontal overflow */
body { overflow-x: hidden; }
main { overflow-x: hidden; }
/* ---- kt-launch-polish ---- */
/* Force standard WooCommerce login + register forms visible even if a chooser class is re-added via JS */
html body.kt-show-chooser .woocommerce-form-login,
html body.kt-show-chooser .woocommerce-form-register,
html body.kt-show-chooser form.login,
html body.kt-show-chooser form.register,
html body.kt-show-chooser .u-column1.col-1,
html body.kt-show-chooser .u-column2.col-2,
html body.kt-show-chooser .u-column1.col-1 form,
html body.kt-show-chooser .u-column2.col-2 form,
html body.kt-show-chooser .u-columns h2 { display: block !important; }
html body.kt-show-chooser .kt-account-chooser { display: none !important; }
/* Clean two-column layout for the logged-out account page */
.woocommerce-account:not(.logged-in) .u-columns { display:grid !important; grid-template-columns:1fr 1fr; gap:28px; max-width:980px; margin:8px auto 64px; align-items:start; }
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:28px 30px; box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 48px -32px rgba(37,99,235,.25); }
.woocommerce-account:not(.logged-in) .u-columns h2 { font-size:20px; font-weight:700; letter-spacing:-.01em; color:#0f172a; margin:0 0 16px; }
.woocommerce-account:not(.logged-in) .woocommerce-form input[type=text],
.woocommerce-account:not(.logged-in) .woocommerce-form input[type=email],
.woocommerce-account:not(.logged-in) .woocommerce-form input[type=password] { width:100%; padding:12px 14px; border:1px solid #cbd5e1; border-radius:10px; font-size:15px; margin-top:6px; }
.woocommerce-account:not(.logged-in) .woocommerce-form label { font-size:13px; font-weight:600; color:#475569; display:block; }
.woocommerce-account:not(.logged-in) .woocommerce-form .button,
.woocommerce-account:not(.logged-in) .woocommerce-Button { background:#2563eb !important; color:#fff !important; border:0 !important; border-radius:10px !important; padding:12px 22px !important; font-weight:700 !important; margin-top:14px; cursor:pointer; }
@media(max-width:760px){ .woocommerce-account:not(.logged-in) .u-columns{ grid-template-columns:1fr !important; } }
/* Smoothness + safe performance (CSS only — no JS combine/defer, so cart stays intact) */
html{ scroll-behavior:smooth; }
img{ max-width:100%; height:auto; }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
/* ============ Unified ambient background — matches the home hero orbs, on every page ============ */
html{ background:#f8fafc; }
body{ background:transparent !important; }
body::before{ content:''; position:fixed; inset:-8%; z-index:-2; pointer-events:none;
background:
radial-gradient(720px 600px at 3% 0%, rgba(147,197,253,.60), transparent 62%), /* blue-300 */
radial-gradient(660px 560px at 99% 98%, rgba(34,211,238,.42), transparent 62%), /* cyan-400 */
radial-gradient(560px 520px at 70% 40%, rgba(191,219,254,.55), transparent 62%), /* blue-200 */
linear-gradient(180deg,#f4f8ff 0%, #f7fafc 62%);
filter: blur(32px) saturate(1.04); }
body::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.42;
background-image:linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.05) 1px,transparent 1px);
background-size:48px 48px;
-webkit-mask-image:radial-gradient(150% 95% at 50% -10%,#000 20%,transparent 74%); mask-image:radial-gradient(150% 95% at 50% -10%,#000 20%,transparent 74%); }
/* keep the home's own rich hero bg on top of our ambient */
.home #particle-canvas, .home .hero-bg{ z-index:0; }
/* ============ Catalog category tags — color-coded per mechanism ============ */
.product-tag{ font-weight:700 !important; }
.product-tag.tag-glp{ background:rgba(37,99,235,.12)!important; color:#1d4ed8!important; border:1px solid rgba(37,99,235,.28)!important; }
.product-tag.tag-growthfactor{ background:rgba(124,58,237,.12)!important; color:#6d28d9!important; border:1px solid rgba(124,58,237,.28)!important; }
.product-tag.tag-cellular{ background:rgba(6,182,212,.15)!important; color:#0e7490!important; border:1px solid rgba(6,182,212,.32)!important; }
.product-tag.tag-regenerative{ background:rgba(16,185,129,.15)!important; color:#047857!important; border:1px solid rgba(16,185,129,.32)!important; }
.product-tag.tag-melanocortin{ background:rgba(245,158,11,.17)!important; color:#b45309!important; border:1px solid rgba(245,158,11,.35)!important; }
.product-tag.tag-solvent{ background:rgba(100,116,139,.14)!important; color:#475569!important; border:1px solid rgba(100,116,139,.30)!important; }
/* ============ Article type tags ============ */
.kt-article-tag{ display:inline-block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; padding:4px 11px; border-radius:999px; margin:0 0 10px; }
.kt-article-tag.at-ref{ background:rgba(6,182,212,.15); color:#0e7490; }
.kt-article-tag.at-guide{ background:rgba(37,99,235,.12); color:#1d4ed8; }
.kt-article-tag.at-compare{ background:rgba(124,58,237,.12); color:#6d28d9; }
.kt-article-tag.at-es{ background:rgba(245,158,11,.17); color:#b45309; }
/* ============ Single product page — balanced, sticky image, cleaner type ============ */
body.single-product div.product{ align-items:start !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:52px !important; }
body.single-product .woocommerce-product-gallery{ position:sticky; top:104px; align-self:start; }
body.single-product .woocommerce-product-gallery img{ border-radius:18px; box-shadow:0 1px 2px rgba(15,23,42,.05),0 30px 60px -32px rgba(37,99,235,.28); background:#fff; }
body.single-product .product_title{ font-size:42px !important; line-height:1.06 !important; letter-spacing:-.025em !important; margin:0 0 12px !important; }
body.single-product .summary .price,
body.single-product .summary .price .woocommerce-Price-amount{ font-size:30px !important; font-weight:800 !important; color:#0f172a !important; }
body.single-product .summary .price{ margin:0 0 18px !important; }
body.single-product .woocommerce-product-details__short-description{ font-size:15.5px !important; line-height:1.65 !important; color:#475569 !important; }
body.single-product .product_meta{ font-size:12.5px !important; color:#64748b; }
@media(max-width:820px){
body.single-product div.product{ grid-template-columns:1fr !important; gap:26px !important; }
body.single-product .woocommerce-product-gallery{ position:static; }
}
/* ============ Related products — reuse the EXACT catalog .product-card design language ============ */
.kt-related{ margin:64px 0 0 !important; border-top:1px solid #eef2f7; padding-top:42px; grid-column:1 / -1 !important; clear:both; }
.kt-related-heading{ font-size:24px !important; font-weight:800 !important; letter-spacing:-.025em !important; color:#0f172a !important; margin:0 0 6px !important; }
.kt-related-sub{ font-size:13.5px !important; color:#64748b !important; margin:0 0 24px !important; }
.kt-related-grid{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)) !important; gap:22px !important; align-items:stretch !important; }
/* related cards ARE .product-card, so they inherit all catalog card styling; just ensure visible + tidy */
.kt-related-grid .product-card{ margin:0 !important; opacity:1 !important; transform:none !important; height:100%; }
@media(max-width:640px){ .kt-related-grid{ grid-template-columns:1fr 1fr !important; gap:14px !important; } }
@media(max-width:400px){ .kt-related-grid{ grid-template-columns:1fr !important; } }
/* ============ Fail-safe: catalog products must ALWAYS be visible, never hidden behind reveal JS ============ */
/* (reveal animation sets .reveal{opacity:0}; if the IntersectionObserver is delayed/errors on the
catalog page, products would stay invisible. A storefront must never gate products on JS.) */
.product-card, .products-grid .product-card, .product-card.reveal{ opacity:1 !important; transform:none !important; }
/* ============ Catalog cards: short teaser only (full detail lives on product page) ============ */
.product-card .product-desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
font-size:13.5px; line-height:1.5; color:#5c6470; min-height:0; }
/* (Reverted 2026-07-07 per Gus — catalog card image-sizing experiment removed; cards back to original look. Revisiting the catalog design tomorrow.) */
/* ============ Articles: compact 2-column grid so many more show per screen ============ */
.kt-articles-list{ display:grid !important; grid-template-columns:1fr 1fr; gap:16px !important; max-width:980px; margin:0 auto !important; }
.kt-article-card{ padding:18px 22px !important; }
.kt-article-card h2{ font-size:16.5px !important; line-height:1.25 !important; margin:5px 0 7px !important; }
.kt-article-card p{ font-size:13px !important; line-height:1.5 !important; margin:0 !important;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#5c6470; }
.kt-article-meta{ font-size:10.5px !important; letter-spacing:.12em; }
.kt-article-card .kt-article-cta{ display:none !important; } /* whole card is already a link */
.kt-art-search{ max-width:980px; }
@media(max-width:760px){ .kt-articles-list{ grid-template-columns:1fr !important; } }
/* ============ Nav always full-width (fixes cramped nav on 404 / single posts / archives) ============ */
html .nav > .container, html nav.nav > .container{ max-width:1180px !important; }
/* ============ Single article: narrow body text for readability ============ */
html body.single-post main .container{ max-width:760px !important; margin-left:auto !important; margin-right:auto !important; }
html body.single-post main .container p,
html body.single-post main .container li{ font-size:16.5px; line-height:1.75; }
html body.single-post main .container h2{ margin-top:1.8em; }
/* ---- kt-newbadge-css ---- */
.kt-newbadge{display:inline-flex;align-items:center;gap:5px;padding:5px 9px 5px 7px;border-radius:999px;
font-size:11px;font-weight:700;letter-spacing:.03em;line-height:1;white-space:nowrap;
background:rgba(238,242,255,.95);color:#4338ca;border:1px solid rgba(79,70,229,.28);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kt-newbadge svg{width:11px;height:11px;fill:#6366f1;flex:0 0 auto}
.kt-newbadge-pin{position:absolute;top:12px;right:12px;z-index:3;
box-shadow:0 2px 10px -2px rgba(15,23,42,.24)}
@media(max-width:520px){.kt-newbadge-pin{top:9px;right:9px;padding:4px 7px 4px 6px;font-size:10px}}
.kt2-newinline{margin-left:10px;vertical-align:middle;transform:translateY(-2px)}
/* ---- kinotype-brand-override ---- */
/* === HEADER: animated dot + bolder text matching wordmark === */
.nav-logo { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.03em !important; color: #0f172a !important; text-decoration: none !important; display: flex !important; align-items: center !important; gap: 10px !important; background: none !important; width: auto !important; height: auto !important; }
.nav-logo .dot { display: inline-block !important; width: 12px !important; height: 12px !important; border-radius: 50% !important; background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%) !important; box-shadow: 0 0 0 4px rgba(37,99,235,0.18) !important; animation: pulse-glow 3s infinite !important; }
.footer-brand .nav-logo { margin-bottom: 16px !important; }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(37,99,235,0.18), 0 0 20px rgba(37,99,235,0.35); } 50% { box-shadow: 0 0 0 6px rgba(6,182,212,0.22), 0 0 40px rgba(37,99,235,0.55); } }
@keyframes k-float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
/* K mark in CTA */
.nav-cta { position: relative !important; padding-left: 36px !important; }
.nav-cta::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%20200%22%3E%3Cg%20stroke=%22%23ffffff%22%20stroke-width=%2214%22%20stroke-linecap=%22round%22%20fill=%22none%22%3E%3Cline%20x1=%2260%22%20y1=%2250%22%20x2=%2260%22%20y2=%22150%22/%3E%3Cline%20x1=%2260%22%20y1=%22100%22%20x2=%22125%22%20y2=%2255%22/%3E%3Cline%20x1=%2260%22%20y1=%22100%22%20x2=%22125%22%20y2=%22145%22/%3E%3C/g%3E%3Ccircle%20cx=%22138%22%20cy=%2250%22%20r=%2211%22%20fill=%22%23ffffff%22/%3E%3C/svg%3E") no-repeat center / contain; opacity: 0.95; }
/* Hero watermark K */
.hero { position: relative !important; }
.hero::after { content: ''; position: absolute; right: 6%; bottom: 8%; width: clamp(180px, 26vw, 360px); height: clamp(180px, 26vw, 360px); background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%221%22%20y2=%221%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%232563eb%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%2306b6d4%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20stroke=%22url(%23g)%22%20stroke-width=%2214%22%20stroke-linecap=%22round%22%20fill=%22none%22%3E%3Cline%20x1=%2260%22%20y1=%2250%22%20x2=%2260%22%20y2=%22150%22/%3E%3Cline%20x1=%2260%22%20y1=%22100%22%20x2=%22125%22%20y2=%2255%22/%3E%3Cline%20x1=%2260%22%20y1=%22100%22%20x2=%22125%22%20y2=%22145%22/%3E%3C/g%3E%3Ccircle%20cx=%22138%22%20cy=%2250%22%20r=%2211%22%20fill=%22url(%23g)%22/%3E%3C/svg%3E") no-repeat center / contain; opacity: 0.10; pointer-events: none; z-index: 0; animation: k-float 8s ease-in-out infinite; }
.hero > * { position: relative; z-index: 1; }
/* Footer K accent */
.footer-brand { position: relative; }
.footer-brand::before { content: ''; display: block; width: 28px; height: 28px; background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%221%22%20y2=%221%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%232563eb%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%2306b6d4%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20stroke=%22url(%23g)%22%20stroke-width=%2214%22%20stroke-linecap=%22round%22%20fill=%22none%22%3E%3Cline%20x1=%2260%22%20y1=%2250%22%20x2=%2260%22%20y2=%22150%22/%3E%3Cline%20x1=%2260%22%20y1=%22100%22%20x2=%22125%22%20y2=%2255%22/%3E%3Cline%20x1=%2260%22%20y1=%22100%22%20x2=%22125%22%20y2=%22145%22/%3E%3C/g%3E%3Ccircle%20cx=%22138%22%20cy=%2250%22%20r=%2211%22%20fill=%22url(%23g)%22/%3E%3C/svg%3E") no-repeat center / contain; margin: 0 0 14px 0; }
/* Age-gate brand badge K */
#kino-age-gate-overlay .kino-age-brand .kino-age-dot { background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%221%22%20y2=%221%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%232563eb%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%2306b6d4%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20stroke=%22url(%23g)%22%20stroke-width=%2214%22%20stroke-linecap=%22round%22%20fill=%22none%22%3E%3Cline%20x1=%2260%22%20y1=%2250%22%20x2=%2260%22%20y2=%22150%22/%3E%3Cline%20x1=%2260%22%20y1=%22100%22%20x2=%22125%22%20y2=%2255%22/%3E%3Cline%20x1=%2260%22%20y1=%22100%22%20x2=%22125%22%20y2=%22145%22/%3E%3C/g%3E%3Ccircle%20cx=%22138%22%20cy=%2250%22%20r=%2211%22%20fill=%22url(%23g)%22/%3E%3C/svg%3E") no-repeat center / contain !important; width: 14px !important; height: 14px !important; border-radius: 0 !important; box-shadow: none !important; }
/* Chip color fix */
.kino-chip:hover { border-color: #06b6d4 !important; color: #0f172a !important; }
.kino-chip.kino-chip--on { background: linear-gradient(135deg,#2563eb,#06b6d4) !important; border-color: #2563eb !important; color: #fff !important; }
.kino-chip.kino-chip--on:hover { border-color: #1d4ed8 !important; color: #fff !important; }
/* ============================================================
LEGAL PAGES — clean prose, sticky TOC sidebar, cross-nav
============================================================ */
.kino-legal-page {
max-width: 1200px;
margin: 56px auto 80px;
padding: 0 24px;
display: grid;
grid-template-columns: 240px 1fr;
gap: 56px;
font-family: 'Inter', system-ui, sans-serif;
}
.kino-legal-page .klp-toc {
position: sticky;
top: 24px;
align-self: start;
max-height: calc(100vh - 48px);
overflow-y: auto;
padding: 4px 0 4px 4px;
}
.klp-toc-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #94a3b8;
margin: 0 0 14px;
padding-left: 14px;
}
.klp-toc ol {
list-style: none;
padding: 0;
margin: 0;
border-left: 1px solid #e2e8f0;
}
.klp-toc li { margin: 0; }
.klp-toc a {
display: block;
padding: 7px 14px;
font-size: 13px;
line-height: 1.45;
color: #64748b;
text-decoration: none;
border-left: 2px solid transparent;
margin-left: -1px;
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.klp-toc a:hover { color: #0f172a; background: #f8fafc; }
.klp-toc a.is-active {
color: #2563eb;
border-left-color: #2563eb;
font-weight: 600;
}
.kino-legal-page .kino-legal { max-width: none; margin: 0; padding: 0; }
.kino-legal h2 { scroll-margin-top: 90px; }
@media (max-width: 900px) {
.kino-legal-page { grid-template-columns: 1fr; gap: 24px; padding: 0 18px; }
.kino-legal-page .klp-toc {
position: static;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
border-bottom: 1px solid #e2e8f0;
padding: 0 0 14px;
}
.klp-toc-label { padding-left: 4px; }
.klp-toc ol { display: flex; gap: 6px; border-left: 0; border-bottom: 0; padding-bottom: 4px; }
.klp-toc li { flex-shrink: 0; }
.klp-toc a {
border-left: 0;
border: 1px solid #e2e8f0;
border-radius: 999px;
padding: 6px 12px;
font-size: 12px;
white-space: nowrap;
}
.klp-toc a.is-active {
border-color: #2563eb;
background: linear-gradient(135deg, #2563eb, #06b6d4);
color: #fff;
}
}
/* Prose styles for the legal content */
.kino-legal { color: #0f172a; line-height: 1.7; font-size: 15.5px; }
.kino-legal h2 {
font-size: 22px;
letter-spacing: -0.02em;
margin: 40px 0 12px;
font-weight: 700;
color: #0f172a;
border-top: 1px solid #e2e8f0;
padding-top: 24px;
}
.kino-legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.kino-legal p { margin: 0 0 14px; color: #1e293b; }
.kino-legal ul, .kino-legal ol { padding-left: 22px; margin: 0 0 14px; }
.kino-legal li { margin-bottom: 8px; color: #1e293b; }
.kino-legal a { color: #2563eb; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kino-legal a:hover { color: #1d4ed8; }
.kino-legal strong { color: #0f172a; font-weight: 600; }
.kino-legal-meta {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
color: #64748b;
letter-spacing: 0.04em;
margin: 0 0 28px;
padding-bottom: 20px;
border-bottom: 1px solid #e2e8f0;
}
/* Sources block */
.kino-legal-meta-soft {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11.5px;
color: #94a3b8;
letter-spacing: 0.04em;
margin: 0 0 14px;
}
.kino-legal-sources { list-style: decimal; padding-left: 26px; margin: 0 0 20px; }
.kino-legal-sources li { margin-bottom: 8px; font-size: 13.5px; line-height: 1.55; color: #475569; padding-left: 4px; }
.kino-legal-sources li::marker { color: #2563eb; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; font-size: 12px; }
.kino-legal-sources a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.kino-legal-sources a:hover { color: #1d4ed8; }
/* Cross-policy nav strip at the end of every legal page */
.klp-related {
grid-column: 1 / -1;
margin: 56px 0 0;
padding: 24px;
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
border: 1px solid #e2e8f0;
border-radius: 16px;
}
.klp-related-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #2563eb;
margin: 0 0 16px;
}
.klp-related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
}
.klp-related a {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
text-decoration: none;
color: #0f172a;
font-size: 13.5px;
font-weight: 600;
letter-spacing: -0.01em;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.klp-related a:hover {
border-color: #2563eb;
transform: translateY(-1px);
box-shadow: 0 6px 16px -10px rgba(37,99,235,0.40);
color: #0f172a;
}
.klp-related a svg { width: 18px; height: 18px; flex-shrink: 0; }
.klp-related a.is-current {
background: linear-gradient(135deg, #2563eb, #06b6d4);
color: #fff;
border-color: transparent;
pointer-events: none;
}
.klp-related a.is-current svg { color: #fff; }
/* ============================================================
DISCLAIMERS HUB V2 — card grid
============================================================ */
.kino-disclaimers-hub-v2 {
max-width: 1100px;
margin: 48px auto 80px;
padding: 0 24px;
font-family: 'Inter', system-ui, sans-serif;
color: #0f172a;
}
.kdh2-header { margin-bottom: 36px; max-width: 720px; }
.kdh2-eyebrow {
display: inline-block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #2563eb;
margin-bottom: 10px;
}
.kdh2-title {
font-size: 52px; line-height: 1.02; letter-spacing: -0.04em; font-weight: 700;
margin: 0 0 12px;
background: linear-gradient(135deg, #0f172a 0%, #2563eb 70%, #06b6d4 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.kdh2-sub { color: #475569; font-size: 16px; line-height: 1.6; margin: 0; }
.kdh2-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.kdh2-card {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px;
background: rgba(255,255,255,0.85);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid #e2e8f0;
border-radius: 16px;
text-decoration: none;
color: #0f172a;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
overflow: hidden;
}
.kdh2-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 16px;
padding: 1px;
background: linear-gradient(135deg, rgba(37,99,235,0) 0%, rgba(6,182,212,0) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
transition: background .25s ease;
}
.kdh2-card:hover {
transform: translateY(-2px);
box-shadow: 0 18px 38px -22px rgba(37,99,235,0.30);
border-color: transparent;
}
.kdh2-card:hover::before {
background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
}
.kdh2-icon {
display: inline-flex;
align-items: center; justify-content: center;
width: 44px; height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, #2563eb, #06b6d4);
color: #fff;
margin-bottom: 8px;
box-shadow: 0 8px 18px -8px rgba(37,99,235,0.55);
}
.kdh2-icon svg { width: 22px; height: 22px; }
.kdh2-card[data-color="cyan"] .kdh2-icon { background: linear-gradient(135deg, #06b6d4, #22d3ee); box-shadow: 0 8px 18px -8px rgba(6,182,212,0.55); }
.kdh2-card[data-color="indigo"] .kdh2-icon { background: linear-gradient(135deg, #4f46e5, #2563eb); box-shadow: 0 8px 18px -8px rgba(79,70,229,0.50); }
.kdh2-card[data-color="violet"] .kdh2-icon { background: linear-gradient(135deg, #7c3aed, #2563eb); box-shadow: 0 8px 18px -8px rgba(124,58,237,0.50); }
.kdh2-card[data-color="teal"] .kdh2-icon { background: linear-gradient(135deg, #0891b2, #14b8a6); box-shadow: 0 8px 18px -8px rgba(20,184,166,0.50); }
.kdh2-card[data-color="slate"] .kdh2-icon { background: linear-gradient(135deg, #475569, #0f172a); box-shadow: 0 8px 18px -8px rgba(15,23,42,0.40); }
.kdh2-card-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: #0f172a; }
.kdh2-card-desc { font-size: 13.5px; line-height: 1.55; color: #475569; margin: 0; flex: 1 1 auto; }
.kdh2-card-meta { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.05em; color: #94a3b8; margin-top: 4px; }
.kdh2-card-cta {
display: inline-flex; align-items: center; gap: 6px;
color: #2563eb; font-weight: 600; font-size: 13.5px;
margin-top: 6px;
transition: gap .15s ease;
}
.kdh2-card-cta svg { width: 14px; height: 14px; }
.kdh2-card:hover .kdh2-card-cta { gap: 10px; }
.kdh2-card-help { cursor: default; }
.kdh2-card-help:hover { transform: none; box-shadow: 0 8px 24px -16px rgba(15,23,42,0.20); }
.kdh2-card-help a { color: #2563eb; text-decoration: underline; text-underline-offset: 3px; }
.kdh2-foot {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: #94a3b8;
letter-spacing: 0.05em;
}
@media (max-width: 640px) {
.kdh2-title { font-size: 40px; }
}
/* ---- kt-toast2-css ---- */
/* retire the old container */
#kt-toast-container{display:none !important}
#kt-toast2{
position:fixed;z-index:99999;bottom:20px;right:20px;left:auto;
display:flex;flex-direction:column;align-items:flex-end;gap:8px;
pointer-events:none;max-width:min(320px,calc(100vw - 40px))}
@media(max-width:640px){
#kt-toast2{right:12px;left:12px;bottom:14px;align-items:center;max-width:none}}
.kt-t2{
display:inline-flex;align-items:center;gap:8px;
padding:9px 14px;border-radius:999px;
background:rgba(255,255,255,.96);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border:1px solid var(--border,#e2e8f0);
box-shadow:0 4px 16px rgba(15,23,42,.10);
font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
font-size:13px;font-weight:600;line-height:1.3;color:var(--text,#0f172a);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
opacity:0;transform:translateY(8px);
transition:opacity .22s ease,transform .22s ease}
.kt-t2.kt-t2-in{opacity:1;transform:translateY(0)}
.kt-t2 .kt-t2-i{
flex:0 0 16px;width:16px;height:16px;border-radius:50%;
background:#10b981 url("data:image/svg+xml;utf8,") center/10px no-repeat}
.kt-t2.kt-t2-error .kt-t2-i{background-color:#ef4444}
@media (prefers-reduced-motion:reduce){
.kt-t2{transition:opacity .01s}
.kt-t2,.kt-t2.kt-t2-in{transform:none}}
/* ---- kt-visual-cues ---- */
/* ════════════════════════════════════════════════════════
GLOBAL — animation primitives
════════════════════════════════════════════════════════ */
@keyframes kt-fade-in-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes kt-pulse-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.45); }
50% { box-shadow: 0 0 0 12px rgba(37,99,235,0); }
}
@keyframes kt-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes kt-water-fill {
from { transform: translateY(100%); }
to { transform: translateY(var(--fill-y, 50%)); }
}
@keyframes kt-bounce-soft {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@keyframes kt-rotate-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes kt-particle-dance {
0%, 100% { transform: translate(0, 0); opacity: 0.4; }
25% { transform: translate(4px, -3px); opacity: 0.6; }
50% { transform: translate(-2px, 2px); opacity: 0.3; }
75% { transform: translate(3px, 4px); opacity: 0.5; }
}
@keyframes kt-count-pop {
0% { transform: scale(0.85); opacity: 0; }
60% { transform: scale(1.08); }
100% { transform: scale(1); opacity: 1; }
}
/* Page fade-in */
body { animation: kt-fade-in-up 0.4s ease-out; }
.kt-recon-output-card {
position: relative;
overflow: hidden;
}
.kt-recon-output-card::before {
content: '';
position: absolute; top: 0; left: -100%; right: 0; height: 100%;
background: linear-gradient(90deg, transparent, rgba(37,99,235,0.06), transparent);
animation: kt-shimmer 3s ease-in-out infinite;
}
/* Animated result numbers — tick up effect */
.calc-out-row .val {
display: inline-block;
transition: color 0.2s;
}
.calc-out-row.updating .val {
animation: kt-count-pop 0.4s ease-out;
}
/* ════════════════════════════════════════════════════════
STEP indicator dots on calculators
════════════════════════════════════════════════════════ */
.kt-step-dots {
display: flex; gap: 6px;
justify-content: center;
margin: 8px 0 14px;
}
.kt-step-dot {
width: 6px; height: 6px;
background: var(--border);
border-radius: 50%;
transition: all 0.3s;
}
.kt-step-dot.filled {
background: linear-gradient(135deg, var(--blue-600, #2563eb), var(--cyan-500, #06b6d4));
width: 20px;
border-radius: 999px;
}
/* ════════════════════════════════════════════════════════
HOVER cues — site-wide
════════════════════════════════════════════════════════ */
.product-card, .kt-chooser-card, .kt-coa-card, .kt-section-card,
.kt-article-card, .kt-how-step, .filter-pill, .kt-day-card {
transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s, border-color 0.2s !important;
}
/* Buttons — gentle scale on hover */
.btn-primary, .btn-outline, .nav-cta, .single_add_to_cart_button,
.woocommerce-button.button, .checkout-button {
transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.btn-primary:hover, .single_add_to_cart_button:hover,
.woocommerce-button.button:hover, .checkout-button:hover {
transform: translateY(-2px) !important;
}
/* Pulse on primary "buy" button on product page */
body.single-product .single_add_to_cart_button:not(:hover):not(:focus) {
animation: kt-pulse-glow 3s ease-in-out infinite;
}
/* Calc chips — pop on click */
.calc-chip, .chip {
transition: all 0.18s ease !important;
}
.calc-chip:active, .chip:active {
transform: scale(0.95);
}
.calc-chip.active, .chip.active {
animation: kt-count-pop 0.3s ease-out;
}
/* Tab buttons — smooth ink underline */
.tab-btn, .tabs-nav button {
position: relative;
transition: color 0.2s !important;
}
/* ════════════════════════════════════════════════════════
TAB transition fade
════════════════════════════════════════════════════════ */
.tab-panel {
animation: kt-fade-in-up 0.35s ease-out;
}
/* ════════════════════════════════════════════════════════
DEAD SPACE compression
════════════════════════════════════════════════════════ */
/* Cart empty state — was too tall */
body.woocommerce-cart .cart-empty {
padding: 48px 32px !important;
}
/* Articles page — pull content closer */
body.page-id-202 .blog-section,
body.blog .blog-section {
padding-top: 56px !important;
padding-bottom: 60px !important;
}
/* Home How-it-works — tighten */
.kt-how-it-works {
padding: 64px 28px !important;
}
/* Single product summary — less bottom whitespace */
body.single-product .summary {
padding-bottom: 0 !important;
}
body.single-product .woocommerce-tabs {
margin-top: 32px !important;
}
/* Tools page hero — tighter */
body.page-id-201 .hero-head {
margin-bottom: 32px !important;
}
body.page-id-201 .tabs-nav {
margin-bottom: 32px !important;
}
/* Legal pages — tighter section spacing */
body.page-id-3 main .container > h2,
body.page-id-25 main .container > h2,
body.page-id-26 main .container > h2,
body.page-id-230 main .container > h2,
body.page-id-231 main .container > h2 {
margin-top: 28px !important;
}
/* HPLC sections tighter */
body.page-id-132 .kt-section-card {
margin-bottom: 14px !important;
padding: 24px 28px !important;
}
/* ════════════════════════════════════════════════════════
PROGRESS bar at top of page for legal/article reading
════════════════════════════════════════════════════════ */
.kt-read-progress {
height: 3px !important;
background: rgba(37,99,235,0.1) !important;
}
.kt-read-progress::after {
background: linear-gradient(90deg, var(--blue-600, #2563eb), var(--cyan-500, #06b6d4)) !important;
box-shadow: 0 0 14px rgba(37,99,235,0.5) !important;
}
/* ════════════════════════════════════════════════════════
SCROLL reveal — smoother
════════════════════════════════════════════════════════ */
.reveal-on-scroll {
transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1) !important;
}
/* ════════════════════════════════════════════════════════
ICON animations
════════════════════════════════════════════════════════ */
.kt-how-step-icon, .kt-find-icon, .kt-coa-icon,
.kt-pipe-icon, .kt-chooser-icon, .kt-chem-icon {
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.kt-how-step:hover .kt-how-step-icon,
.kt-find-item:hover .kt-find-icon,
.kt-coa-card:hover .kt-coa-icon,
.kt-pipe-item:hover .kt-pipe-icon,
.kt-chooser-card:hover .kt-chooser-icon {
transform: scale(1.08) rotate(-3deg);
}
/* ════════════════════════════════════════════════════════
INPUT focus glow
════════════════════════════════════════════════════════ */
input:focus, select:focus, textarea:focus {
animation: kt-pulse-glow 1.2s ease-out;
}
/* ════════════════════════════════════════════════════════
FILTER pill click feedback
════════════════════════════════════════════════════════ */
.filter-pill {
position: relative;
overflow: hidden;
}
.filter-pill::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at center, rgba(37,99,235,0.2) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
}
.filter-pill:active::after {
opacity: 1;
transition: opacity 0.1s;
}
/* ════════════════════════════════════════════════════════
LOADING spinner for placeholders
════════════════════════════════════════════════════════ */
.kt-loading {
display: inline-block;
width: 16px; height: 16px;
border: 2px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: kt-rotate-slow 0.8s linear infinite;
}
/* ---- kt-pro-polish-v2 ---- */
/* ════════════════════════════════════════════════════════
1. TRUST badges on single product (between short_desc and qty/button)
════════════════════════════════════════════════════════ */
.kt-trust-row-product {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 0 0 22px;
}
.kt-trust-row-product .kt-trust-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: rgba(37,99,235,0.05);
border: 1px solid rgba(37,99,235,0.18);
border-radius: 999px;
font-size: 11px; font-weight: 600;
color: var(--text);
letter-spacing: 0.005em;
transition: all 0.2s;
}
.kt-trust-row-product .kt-trust-pill:hover {
border-color: var(--primary);
transform: translateY(-1px);
}
.kt-trust-row-product .kt-trust-pill::before {
content: '✓';
color: var(--success, #10b981);
font-weight: 700;
font-size: 11px;
}
/* ════════════════════════════════════════════════════════
2. STOCK indicator (animated pulse)
════════════════════════════════════════════════════════ */
.kt-stock {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12px; font-weight: 600;
margin-bottom: 14px;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.02em;
}
.kt-stock .dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--success, #10b981);
position: relative;
}
.kt-stock .dot::before {
content: '';
position: absolute; inset: -2px;
border: 2px solid var(--success, #10b981);
border-radius: 50%;
animation: kt-pulse-ring 2s ease-out infinite;
opacity: 0;
}
@keyframes kt-pulse-ring {
0% { transform: scale(0.8); opacity: 0.8; }
100% { transform: scale(2); opacity: 0; }
}
.kt-stock.low .dot { background: var(--warning, #f59e0b); }
.kt-stock.low .dot::before { border-color: var(--warning, #f59e0b); }
.kt-stock.out .dot { background: var(--danger, #ef4444); }
.kt-stock.out .dot::before { border-color: var(--danger, #ef4444); }
.kt-stock-label { color: var(--text); }
.kt-stock-detail { color: var(--text-muted); font-weight: 500; }
/* ════════════════════════════════════════════════════════
3. HOME FAQ accordion
════════════════════════════════════════════════════════ */
.kt-home-faq {
max-width: 760px;
margin: 0 auto;
padding: 64px 28px;
}
.kt-home-faq-head {
text-align: center;
margin-bottom: 32px;
}
.kt-home-faq-head .label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--primary);
margin-bottom: 10px;
}
.kt-home-faq-head h2 {
font-size: clamp(26px, 4vw, 34px); font-weight: 700 !important;
letter-spacing: -0.025em;
margin: 0 !important;
color: var(--text);
}
.kt-faq-item {
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: 10px;
overflow: hidden;
transition: border-color 0.2s;
}
.kt-faq-item[open] {
border-color: var(--primary);
box-shadow: 0 4px 14px rgba(37,99,235,0.06);
}
.kt-faq-item summary {
cursor: pointer;
list-style: none;
padding: 18px 24px;
font-size: 15px; font-weight: 600;
letter-spacing: -0.005em;
color: var(--text);
position: relative;
padding-right: 48px;
transition: color 0.2s;
}
.kt-faq-item summary::-webkit-details-marker { display: none; }
.kt-faq-item summary::after {
content: '+';
position: absolute; right: 24px; top: 50%;
transform: translateY(-50%);
font-size: 22px; font-weight: 400;
color: var(--text-muted);
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
transition: transform 0.3s, color 0.2s;
}
.kt-faq-item[open] summary::after {
content: '−';
color: var(--primary);
}
.kt-faq-item[open] summary { color: var(--primary); }
.kt-faq-content {
padding: 0 24px 20px;
font-size: 14px; line-height: 1.65;
color: var(--text-muted);
}
.kt-faq-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
/* ════════════════════════════════════════════════════════
4. STICKY nav — shrinks on scroll
════════════════════════════════════════════════════════ */
.nav {
transition: padding 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}
body.scrolled .nav {
padding: 6px 0 !important;
box-shadow: 0 4px 14px rgba(15,23,42,0.08) !important;
background: rgba(248, 250, 252, 0.92) !important;
backdrop-filter: blur(16px) saturate(1.5) !important;
}
body.scrolled .nav .nav-logo { font-size: 15px !important; }
/* ════════════════════════════════════════════════════════
5. MINI CART preview on cart icon hover
════════════════════════════════════════════════════════ */
.nav-cart {
position: relative;
}
.kt-mini-cart {
position: absolute;
top: calc(100% + 12px);
right: 0;
width: 320px;
background: var(--bg-card);
backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 12px 32px rgba(15,23,42,0.12);
padding: 18px 20px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
z-index: 9000;
}
.nav-cart:hover .kt-mini-cart,
.nav-cart:focus-within .kt-mini-cart {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.kt-mini-cart-empty {
text-align: center;
padding: 16px 0;
}
.kt-mini-cart-empty-icon {
width: 36px; height: 36px;
background: linear-gradient(135deg, var(--blue-600, #2563eb), var(--cyan-500, #06b6d4));
border-radius: 50%;
margin: 0 auto 10px;
opacity: 0.3;
}
.kt-mini-cart-empty p {
font-size: 13px; color: var(--text-muted);
margin: 0 0 12px;
}
.kt-mini-cart-empty a {
display: inline-block;
font-size: 12px; font-weight: 600;
color: var(--primary);
text-decoration: none;
}
.kt-mini-cart-empty a:hover { text-decoration: underline; }
@media (max-width: 768px) {
.kt-mini-cart { display: none !important; }
}
/* ════════════════════════════════════════════════════════
6. CATALOG product card — "Quick add" on hover
════════════════════════════════════════════════════════ */
.product-card {
position: relative;
overflow: hidden;
}
.kt-quick-add {
position: absolute;
bottom: 12px; left: 12px; right: 12px;
padding: 10px 14px;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(8px);
color: #fff;
text-align: center;
font-size: 12px; font-weight: 600;
border-radius: var(--radius-sm);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.25s, transform 0.25s;
pointer-events: none;
z-index: 5;
}
.product-card:hover .kt-quick-add {
opacity: 0; /* keep off for now since catalog uses link wrap */
}
/* ════════════════════════════════════════════════════════
7. HOME testimonials placeholder section
════════════════════════════════════════════════════════ */
.kt-testimonials {
max-width: 1140px;
margin: 0 auto;
padding: 64px 28px;
text-align: center;
}
.kt-testimonials .label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--primary);
margin-bottom: 10px;
}
.kt-testimonials h2 {
font-size: clamp(26px, 4vw, 34px); font-weight: 700 !important;
letter-spacing: -0.025em;
margin: 0 0 36px !important;
color: var(--text);
}
.kt-testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
text-align: left;
}
.kt-testimonial-card {
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px 26px;
transition: all 0.25s;
}
.kt-testimonial-card:hover {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(15,23,42,0.06);
}
.kt-testimonial-stars {
display: flex; gap: 2px;
margin-bottom: 14px;
}
.kt-testimonial-stars span {
color: #f59e0b;
font-size: 14px;
}
.kt-testimonial-text {
font-size: 14px;
line-height: 1.65;
color: var(--text);
margin: 0 0 16px;
font-style: italic;
}
.kt-testimonial-author {
display: flex; align-items: center; gap: 10px;
padding-top: 14px;
border-top: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
}
.kt-testimonial-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--blue-600, #2563eb), var(--cyan-500, #06b6d4));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 700;
}
.kt-testimonial-meta {
font-size: 12px;
}
.kt-testimonial-meta strong { color: var(--text); font-weight: 600; display: block; }
.kt-testimonial-meta span { color: var(--text-muted); }
/* ════════════════════════════════════════════════════════
8. COMPARISON table on HPLC page
════════════════════════════════════════════════════════ */
.kt-comparison {
margin: 18px 0;
overflow-x: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.kt-comparison table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
background: var(--bg-card);
}
.kt-comparison th {
background: var(--bg-input);
padding: 12px 14px;
text-align: left;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
}
.kt-comparison th.kt-us {
background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(6,182,212,0.04));
color: var(--primary);
}
.kt-comparison td {
padding: 12px 14px;
border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.18));
}
.kt-comparison tr:last-child td { border-bottom: none; }
.kt-comparison td:first-child {
font-weight: 600; color: var(--text);
}
.kt-comparison td.kt-us {
background: rgba(37,99,235,0.04);
color: var(--text);
font-weight: 600;
}
.kt-check {
color: var(--success, #10b981); font-weight: 700;
}
.kt-cross {
color: var(--danger, #ef4444); font-weight: 700; opacity: 0.6;
}
.kt-half {
color: var(--warning, #f59e0b); font-weight: 700;
}
/* ---- kt-disclaimer-fix ---- */
body.page main { padding-top: calc(var(--nav-h, 72px) + 48px) !important; padding-bottom: 80px !important; }
.kt-legal-shell { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.kt-legal-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(6,182,212,0.08)); border: 1px solid rgba(37,99,235,0.20); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #2563eb; font-family: 'JetBrains Mono', 'SFMono-Regular', monospace; margin: 0 0 14px; }
.kt-legal-eyebrow::before { content: ''; width: 6px; height: 6px; background: #2563eb; border-radius: 50%; display: inline-block; }
.kt-legal-title { font-size: 44px !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.025em !important; color: #0f172a !important; margin: 0 0 12px !important; }
.kt-legal-sub { font-size: 17px !important; line-height: 1.6 !important; color: #475569 !important; margin: 0 0 24px !important; max-width: 720px !important; }
.kt-legal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; }
.kt-legal-meta-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; font-size: 12px; font-weight: 500; color: #475569; font-family: 'JetBrains Mono', monospace; }
.kt-legal-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 24px; box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 12px 32px rgba(15,23,42,0.04); padding: 0; overflow: hidden; position: relative; }
.kt-legal-card::before { content: ''; display: block; height: 5px; background: linear-gradient(90deg, #2563eb 0%, #06b6d4 50%, #2563eb 100%); }
.kt-legal-card-inner { padding: 44px 48px 48px; }
@media (max-width: 720px) {
.kt-legal-card-inner { padding: 28px 22px 32px; }
.kt-legal-title { font-size: 32px !important; }
}
.kt-legal-card-inner h1, .kt-legal-card-inner h2, .kt-legal-card-inner h3 { font-weight: 700 !important; letter-spacing: -0.015em !important; color: #0f172a !important; }
.kt-legal-card-inner h2 { font-size: 24px !important; margin: 36px 0 14px !important; padding-left: 14px; border-left: 4px solid #2563eb; }
.kt-legal-card-inner h2:first-child { margin-top: 0 !important; }
.kt-legal-card-inner h3 { font-size: 18px !important; margin: 24px 0 10px !important; color: #1e293b !important; }
.kt-legal-card-inner p { font-size: 15.5px !important; line-height: 1.78 !important; color: #334155 !important; margin: 0 0 16px !important; }
.kt-legal-card-inner strong { color: #0f172a !important; font-weight: 600 !important; }
.kt-legal-card-inner a { color: #2563eb !important; text-decoration: underline; text-decoration-color: rgba(37,99,235,0.3); text-underline-offset: 3px; }
.kt-legal-card-inner a:hover { text-decoration-color: #2563eb; }
.kt-legal-card-inner ul, .kt-legal-card-inner ol { margin: 0 0 18px !important; padding-left: 24px !important; }
.kt-legal-card-inner li { font-size: 15.5px !important; line-height: 1.7 !important; color: #334155 !important; margin: 0 0 8px !important; }
.kt-legal-card-inner blockquote { margin: 20px 0 !important; padding: 16px 22px !important; background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(6,182,212,0.03)) !important; border-left: 4px solid #2563eb !important; border-radius: 0 12px 12px 0 !important; font-style: italic !important; color: #1e293b !important; }
.kt-legal-card-inner hr { border: 0 !important; height: 1px !important; background: #e2e8f0 !important; margin: 32px 0 !important; }
.kt-legal-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; padding: 8px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; font-weight: 500; color: #475569 !important; text-decoration: none !important; transition: all 0.2s; }
.kt-legal-back:hover { background: #2563eb; border-color: #2563eb; color: #fff !important; transform: translateX(-2px); }
.kt-register-disclaimer { margin: 24px 0 28px !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.04) !important; overflow: hidden !important; }
.kt-register-disclaimer::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, #dc2626, #f87171, #dc2626); }
.kt-disc-head { display: flex !important; align-items: center !important; gap: 12px !important; padding: 18px 22px 14px !important; border-bottom: 1px solid #f1f5f9 !important; background: linear-gradient(135deg, rgba(220,38,38,0.04), rgba(220,38,38,0.02)) !important; }
.kt-disc-head .ico { flex: 0 0 32px !important; width: 32px !important; height: 32px !important; background: #dc2626 !important; color: #fff !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; font-size: 18px !important; font-family: 'JetBrains Mono', monospace !important; }
.kt-disc-head h4 { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; color: #0f172a !important; letter-spacing: -0.01em !important; }
.kt-disc-body { padding: 18px 22px 16px !important; }
.kt-disc-body p { font-size: 14px !important; line-height: 1.6 !important; color: #334155 !important; margin: 0 0 10px !important; }
.kt-disc-body ul { padding-left: 22px !important; margin: 4px 0 6px !important; }
.kt-disc-body li { font-size: 13.5px !important; line-height: 1.6 !important; color: #334155 !important; margin: 0 0 6px !important; }
.kt-disc-body strong { color: #0f172a !important; font-weight: 600 !important; }
.kt-disc-check { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 14px 22px 18px !important; background: #f8fafc !important; border-top: 1px solid #f1f5f9 !important; cursor: pointer !important; }
.kt-disc-check input[type=checkbox] { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin-top: 2px !important; accent-color: #2563eb !important; cursor: pointer !important; }
.kt-disc-check span { font-size: 13.5px !important; line-height: 1.55 !important; color: #1e293b !important; font-weight: 500 !important; }
.kt-vial-placeholder { display: flex; align-items: center; justify-content: center; height: 240px; background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #f8fafc 100%); border-radius: 12px; margin: 0 0 16px; position: relative; overflow: hidden; }
.kt-vial-placeholder::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 20%, rgba(37,99,235,0.06), transparent 50%); pointer-events: none; }
.kt-vial-placeholder svg { width: 80px; height: 120px; filter: drop-shadow(0 4px 12px rgba(37,99,235,0.12)); position: relative; z-index: 1; }
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail, .woocommerce ul.products li.product a img.wp-post-image { background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #f8fafc 100%); min-height: 200px; object-fit: contain; padding: 16px; }
/* Hide the noscript-wrapped server-side H1 visually (it's there only so search engines + no-JS readers see the title in the static HTML; CSS shows the JS-built one instead) */
/* removed noscript wrap */
/* ---- kt-prose-rhythm ---- */
/* ════════════════════════════════════════════════════════════
Kinotype — Prose containment + typography rhythm (mobile-first)
Fixes: long text blocks sitting directly on the page background
with no container/card/measure. Presentation only — no copy
changes, no pricing changes. Scoped to legal pages, FAQ, About.
Uses the existing brand vars (--bg-card, --border, --radius-lg,
--text, --text-muted) already defined in kinotype.css.
════════════════════════════════════════════════════════════ */
/* ---------- 1. LEGAL PAGES (disclaimer, privacy, shipping, refund, terms) ---------- */
body.page-id-452 main.section > .container,
body.page-id-453 main.section > .container,
body.page-id-454 main.section > .container,
body.page-id-455 main.section > .container,
body.page-id-456 main.section > .container {
max-width: 700px;
background: var(--bg-card);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px 18px 30px;
margin: 4px auto 48px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 20px 44px -28px rgba(15,23,42,0.10);
}
body.page-id-452 main.section > .container > p,
body.page-id-453 main.section > .container > p,
body.page-id-454 main.section > .container > p,
body.page-id-455 main.section > .container > p,
body.page-id-456 main.section > .container > p,
body.page-id-452 main.section > .container > ul,
body.page-id-453 main.section > .container > ul,
body.page-id-454 main.section > .container > ul,
body.page-id-455 main.section > .container > ul,
body.page-id-456 main.section > .container > ul,
body.page-id-452 main.section > .container > ol,
body.page-id-453 main.section > .container > ol,
body.page-id-454 main.section > .container > ol,
body.page-id-455 main.section > .container > ol,
body.page-id-456 main.section > .container > ol {
max-width: 68ch;
line-height: 1.7;
color: var(--text);
margin: 0 0 18px;
}
body.page-id-452 main.section > .container > ul,
body.page-id-453 main.section > .container > ul,
body.page-id-454 main.section > .container > ul,
body.page-id-455 main.section > .container > ul,
body.page-id-456 main.section > .container > ul,
body.page-id-452 main.section > .container > ol,
body.page-id-453 main.section > .container > ol,
body.page-id-454 main.section > .container > ol,
body.page-id-455 main.section > .container > ol,
body.page-id-456 main.section > .container > ol {
padding-left: 22px;
}
body.page-id-452 main.section > .container > li,
body.page-id-453 main.section > .container > li,
body.page-id-454 main.section > .container > li,
body.page-id-455 main.section > .container > li,
body.page-id-456 main.section > .container > li {
line-height: 1.7;
margin-bottom: 6px;
}
body.page-id-452 main.section > .container > h2,
body.page-id-453 main.section > .container > h2,
body.page-id-454 main.section > .container > h2,
body.page-id-455 main.section > .container > h2,
body.page-id-456 main.section > .container > h2 {
font-size: 19px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
margin: 28px 0 12px;
line-height: 1.3;
}
body.page-id-452 main.section > .container > h2:first-of-type,
body.page-id-453 main.section > .container > h2:first-of-type,
body.page-id-454 main.section > .container > h2:first-of-type,
body.page-id-455 main.section > .container > h2:first-of-type,
body.page-id-456 main.section > .container > h2:first-of-type {
margin-top: 6px;
}
body.page-id-452 main.section > .container > p:first-child,
body.page-id-453 main.section > .container > p:first-child,
body.page-id-454 main.section > .container > p:first-child,
body.page-id-455 main.section > .container > p:first-child,
body.page-id-456 main.section > .container > p:first-child {
color: var(--text-muted);
font-size: 14px;
}
body.page-id-452 main.section > .container > p:last-child,
body.page-id-453 main.section > .container > p:last-child,
body.page-id-454 main.section > .container > p:last-child,
body.page-id-455 main.section > .container > p:last-child,
body.page-id-456 main.section > .container > p:last-child {
margin-bottom: 0;
}
@media (min-width: 640px) {
body.page-id-452 main.section > .container,
body.page-id-453 main.section > .container,
body.page-id-454 main.section > .container,
body.page-id-455 main.section > .container,
body.page-id-456 main.section > .container {
padding: 40px 44px 46px;
}
}
/* ---------- 2. FAQ PAGE ---------- */
body.page-id-668 .ktfaq {
display: block;
}
body.page-id-668 .ktfaq-item {
background: var(--bg-card);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px 18px;
margin: 0 0 14px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
body.page-id-668 .ktfaq-q {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
line-height: 1.4;
margin: 0 0 10px;
}
body.page-id-668 .ktfaq-a p {
max-width: 68ch;
font-size: 15px;
line-height: 1.7;
color: var(--text-muted);
margin: 0;
}
@media (min-width: 640px) {
body.page-id-668 .ktfaq-item { padding: 26px 28px; }
body.page-id-668 .ktfaq-q { font-size: 17px; }
}
/* ---------- 3. ABOUT PAGE ---------- */
body.page-id-621 .kt-ab-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(6,182,212,0.08));
border: 1px solid rgba(37,99,235,0.20);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--primary);
font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
margin: 0 0 14px;
}
body.page-id-621 .kt-ab-h1 {
font-size: 32px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text);
margin: 0 0 14px;
}
body.page-id-621 .kt-ab-lede {
max-width: 68ch;
font-size: 16px;
line-height: 1.65;
color: var(--text-muted);
margin: 0 0 8px;
}
body.page-id-621 .kt-ab-card,
body.page-id-621 .kt-ab-block {
background: var(--bg-card);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 22px 18px;
margin: 0 0 18px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
body.page-id-621 .kt-ab-h2 {
font-size: 19px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 12px;
line-height: 1.3;
}
body.page-id-621 .kt-ab-block p,
body.page-id-621 .kt-ab-card p {
max-width: 68ch;
line-height: 1.7;
color: var(--text);
margin: 0 0 14px;
}
body.page-id-621 .kt-ab-block p:last-child,
body.page-id-621 .kt-ab-card p:last-child {
margin-bottom: 0;
}
@media (min-width: 640px) {
body.page-id-621 .kt-ab-h1 { font-size: 40px; }
body.page-id-621 .kt-ab-card,
body.page-id-621 .kt-ab-block { padding: 30px 32px; }
}
/* ---- kt-mobile-css ---- */
/* ---------------------------------------------------------------------------
1. Keep the layout viewport equal to the device width.
A decorative SVG in the hero sits past the right edge; without this the
browser widens the viewport to fit it and scales every page down to ~78%.
`clip` rather than `hidden` so position:sticky keeps working.
--------------------------------------------------------------------------- */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
@media (max-width:820px){
/* decorative hero layers must never define the page width */
.hero-orb,.hero-bg,.hero-canvas,.hero canvas,.hero > svg{max-width:100vw;pointer-events:none}
/* -------------------------------------------------------------------------
2. Cart: collapse the desktop two-column block into one full-width column.
Without this .wc-block-components-main keeps its desktop width and the
line-item table overflows it.
------------------------------------------------------------------------- */
.wp-block-woocommerce-cart .wc-block-cart,
.wp-block-woocommerce-cart .wc-block-cart__submit{display:block !important}
.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-cart .wc-block-components-main,
.wp-block-woocommerce-cart .wc-block-cart__sidebar,
.wp-block-woocommerce-cart .wc-block-components-sidebar{
width:100% !important;max-width:100% !important;min-width:0 !important;
flex:0 0 100% !important;float:none !important;
margin-left:0 !important;margin-right:0 !important;
padding-left:0 !important;padding-right:0 !important}
/* The cart nests padding on padding: .container adds 28px a side and the
Woo block adds another 24px, so 104px of a 390px screen was gutter and the
line-item table had 286px to work with. Drop the inner one. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{padding-left:0 !important;padding-right:0 !important}
/* A phone is too narrow for a three-column money table: whatever widths the
columns were given, the price kept landing past the right edge. Stack the
row instead — image beside the product, price underneath it. */
.wc-block-cart-items,
.wc-block-cart-items tbody{display:block !important;width:100% !important;max-width:100% !important}
.wc-block-cart-items__row{
display:grid !important;
grid-template-columns:56px minmax(0,1fr) !important;
grid-template-areas:"img prod" "img total" !important;
gap:4px 12px !important;
width:100% !important;max-width:100% !important;
padding:16px 0 !important;margin:0 !important;
border-bottom:1px solid rgba(15,23,42,.09) !important}
.wc-block-cart-items__row:last-child{border-bottom:0 !important}
.wc-block-cart-item__image{
grid-area:img !important;display:block !important;
width:56px !important;min-width:56px !important;padding:0 !important}
.wc-block-cart-item__image img{width:56px !important;height:auto !important;border-radius:8px}
.wc-block-cart-item__product{
grid-area:prod !important;display:block !important;
padding:0 !important;min-width:0 !important;width:auto !important}
.wc-block-cart-item__total{
grid-area:total !important;display:block !important;
padding:0 !important;min-width:0 !important;width:auto !important;
text-align:left !important}
.wc-block-cart-item__total .wc-block-components-formatted-money-amount{white-space:nowrap}
/* the same collapse for checkout, so nothing can clip a price there either */
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-fields-block,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-totals-block{
width:100% !important;max-width:100% !important;min-width:0 !important;
flex:0 0 100% !important;padding:20px 18px !important}
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-totals-block{position:static !important}
body.woocommerce-checkout .wp-block-woocommerce-checkout{padding:0 16px !important}
/* long strings — emails, batch codes — wrap instead of widening the page */
.wc-block-components-order-summary-item__description,
.woocommerce-order-overview li,
.kt-coa-card,.kt-acc-card{overflow-wrap:anywhere}
}
@media (max-width:430px){
.container{padding-left:20px !important;padding-right:20px !important}
}
/* ---- kt-final-brand-fix ---- */
/* ════════════════════════════════════════════════════════
1. CART empty state — KILL the sad face + brand cards
════════════════════════════════════════════════════════ */
/* Hide the default WC sad-face emoji + the "currently empty" text container styling */
body.woocommerce-cart p.cart-empty.woocommerce-info {
background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(6,182,212,0.03)) !important;
border: 1.5px dashed rgba(37,99,235,0.25) !important;
padding: 56px 32px 48px !important;
text-align: center !important;
border-radius: var(--radius-lg) !important;
font-size: 0 !important;
color: transparent !important;
position: relative;
margin: 0 0 32px !important;
list-style: none !important;
}
body.woocommerce-cart p.cart-empty.woocommerce-info::before {
content: '';
display: block;
width: 64px; height: 96px;
margin: 0 auto 20px;
background:
url("data:image/svg+xml;utf8,") no-repeat center / contain;
filter: drop-shadow(0 8px 18px rgba(37,99,235,0.18));
}
body.woocommerce-cart p.cart-empty.woocommerce-info::after {
content: 'Your cart is empty. Browse the catalog to find research compounds.';
display: block;
font-size: 17px !important;
font-weight: 600 !important;
letter-spacing: -0.015em !important;
color: var(--text) !important;
line-height: 1.5;
max-width: 420px;
margin: 0 auto;
}
/* Hide the 3 dots between empty + new in store */
body.woocommerce-cart .cart-empty + p:not(.return-to-shop):not(.add_to_cart_button) {
display: none !important;
}
/* New in store — proper cards with BUTTON-style Add to cart */
body.woocommerce-cart .cross-sells ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
gap: 18px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
body.woocommerce-cart .cross-sells ul.products li.product {
background: var(--bg-card) !important;
backdrop-filter: blur(20px);
border: 1px solid var(--border) !important;
border-radius: var(--radius-lg) !important;
padding: 22px !important;
margin: 0 !important;
text-align: center;
list-style: none !important;
transition: all 0.25s !important;
}
body.woocommerce-cart .cross-sells ul.products li.product:hover {
border-color: var(--primary) !important;
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(15,23,42,0.08);
}
body.woocommerce-cart .cross-sells ul.products li.product h2 {
font-size: 16px !important; font-weight: 600 !important;
color: var(--text) !important;
margin: 0 0 8px !important;
border-bottom: none !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price {
font-family: 'JetBrains Mono', monospace !important;
font-size: 18px !important; font-weight: 700 !important;
background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
-webkit-background-clip: text !important; background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin: 0 0 14px !important;
display: block !important;
}
/* The Add to cart link — MUST be a button, not text underline */
body.woocommerce-cart .cross-sells ul.products li.product a.add_to_cart_button,
body.woocommerce-cart .cross-sells ul.products li.product .button {
display: inline-block !important;
width: auto !important;
padding: 10px 22px !important;
font-size: 13px !important; font-weight: 600 !important;
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
color: #fff !important;
border: 1px solid #2563eb !important;
border-radius: var(--radius-sm) !important;
text-decoration: none !important;
box-shadow: 0 2px 8px var(--primary-glow) !important;
text-transform: none !important;
text-shadow: none !important;
line-height: 1.2;
transition: all 0.2s !important;
}
body.woocommerce-cart .cross-sells ul.products li.product a.add_to_cart_button:hover {
background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
transform: translateY(-1px);
color: #fff !important;
text-decoration: none !important;
}
/* ════════════════════════════════════════════════════════
2. RECONSTITUTION — bigger step indicator, visual richness
════════════════════════════════════════════════════════ */
/* Hide the small step dots, replace with prominent step bar */
#panel-recon .kt-step-dots {
display: none !important;
}
#panel-recon::before {
content: 'Step-by-step reconstitution math';
display: block;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--primary);
margin-bottom: 14px;
}
/* Step pills above each field */
#panel-recon .calc-field {
position: relative;
padding-left: 36px !important;
}
#panel-recon .calc-field::before {
content: counter(kt-recon-step);
counter-increment: kt-recon-step;
position: absolute;
left: 0; top: 0;
width: 26px; height: 26px;
background: var(--bg-input);
border: 2px solid var(--border);
border-radius: 50%;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 700;
color: var(--text-muted);
display: flex; align-items: center; justify-content: center;
transition: all 0.3s;
}
#panel-recon .calc-grid > div:first-child {
counter-reset: kt-recon-step;
}
/* Active step (when chip/input has value) — color the circle */
#panel-recon .calc-field.kt-filled::before {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
border-color: #2563eb;
box-shadow: 0 0 0 3px var(--primary-glow);
}
/* Result card on right — fill the empty space when no input */
#panel-recon .calc-out::before {
content: 'Enter values on the left to see the math.';
display: block;
padding: 18px 18px 0;
font-size: 13px;
color: var(--text-muted);
font-style: italic;
}
#panel-recon .calc-out.kt-has-data::before {
display: none;
}
/* ════════════════════════════════════════════════════════
3. Visual feedback: chip click ripple
════════════════════════════════════════════════════════ */
.calc-chip {
position: relative;
overflow: hidden;
}
.calc-chip::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(37,99,235,0.25) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
}
.calc-chip:active::after {
opacity: 1;
transition: opacity 0.1s;
}
/* Active chip — extra glow */
.calc-chip.active {
box-shadow: 0 0 0 3px var(--primary-glow), 0 2px 8px rgba(37,99,235,0.2) !important;
}
/* ---- kt-emergency-fix ---- */
/* ═══════════════════ NUKE the broken giant blue SVG fallback ═══════════════════ */
/* Remove the ::before that was rendering as solid blue */
.woocommerce ul.products li.product .woocommerce-loop-product__link::before,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::before,
.related .products li.product a::before,
ul.products li.product a::before {
display: none !important;
content: none !important;
background: none !important;
width: 0 !important;
height: 0 !important;
}
/* Just hide the actual placeholder images cleanly */
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img.wp-post-image,
.woocommerce ul.products li.product img[src*="placeholder"],
.related .products li.product img,
ul.products li.product .attachment-woocommerce_thumbnail {
display: none !important;
}
/* Replace with a simple, clean V6 vial outline mini-card */
.woocommerce ul.products li.product .woocommerce-loop-product__link::after,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::after,
.related .products li.product a::after {
content: '';
display: block;
width: 60px; height: 80px;
margin: 8px auto 14px;
border: 1.5px solid var(--primary, #2563eb);
border-radius: 4px 4px 8px 8px;
background: linear-gradient(180deg, transparent 0%, transparent 15%, rgba(37,99,235,0.05) 15%);
position: relative;
opacity: 0.4;
transition: opacity 0.2s;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__link::after,
.related .products li.product:hover a::after {
opacity: 0.7;
}
/* ═══════════════════ KILL leaked sidebar HTML ═══════════════════ */
/* Hit every possible selector for WP widget areas */
#secondary, #sidebar, #sidebar-1, #sidebar-2,
aside.sidebar, aside#secondary, aside.widget-area,
.widget-area, .sidebar, .sidebar-primary, .sidebar-secondary,
.wp-widget, .widget,
.wp-block-search, .wp-block-page-list, .wp-block-archives, .wp-block-categories, .wp-block-latest-posts,
section.widget, section.widget_search, section.widget_pages, section.widget_archive, section.widget_categories,
section.widget_recent_entries, section.widget_recent_comments, section.widget_meta, section.widget_text,
ul.wp-block-page-list, ul.children,
[id^="search-"], [id^="pages-"], [id^="archives-"], [id^="categories-"],
.has-search-widget {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
position: absolute !important;
left: -9999px !important;
}
/* The leaked widget headings */
main > h2:not(.section-title):not(.product_title):not(.kt-section-h),
main h2:has(+ a[href*="about"]),
main h2:has(+ ul > li > a[href*="about"]) {
/* Don't be too aggressive — only kill if it's clearly a widget heading */
}
/* If "Pages" / "Archives" / "Categories" headings leak as plain text, kill them */
.kt-killed-widget,
main > .container > h2 + ul:has(li > a[href*="kinotypelabs.com/about"]),
main > .container > h2 + ul:has(li > a[href*="kinotypelabs.com/articles"]):has(li > a[href*="kinotypelabs.com/cart"]) {
display: none !important;
}
/* Hide the "Search ..." input that appears as a widget */
input[type="search"][placeholder*="Search"][name="s"]:not(.kt-search-panel input):not(.no-hide) {
/* Be careful — main search panel uses this. Only hide standalone widget searches */
}
.widget input[type="search"], .wp-block-search input,
.widget label, .wp-block-search label {
display: none !important;
}
/* ---- kt-catalog-tweaks ---- */
.catalog-filters,.catalog-empty-filter{display:none !important;}.product-card .product-vial{background:transparent !important;border:none !important;width:auto !important;height:auto !important;padding:0 !important;}.product-card .product-vial::before{display:none !important;}.product-card .product-vial-img{height:190px !important;width:auto !important;max-width:88% !important;object-fit:contain !important;display:block !important;margin:0 auto !important;}
/* ---- kt-nav-tweaks ---- */
@media (min-width:769px){.nav .container{position:relative;}.nav .nav-logo{margin-right:auto;}.nav .nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:1;}.nav .nav-cta-desktop{margin-left:14px;}}
/* ---- kino-catalog-float-override ---- */
/* Catalog cards — kill all theme/plugin decorations, vial floats free */
body .product-card,
body .products-section .product-card,
body #catalog .product-card {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
body .product-card:hover {
border-color: transparent !important;
box-shadow: none !important;
transform: none !important;
}
body .product-card .product-img {
background: transparent !important;
background-image: none !important;
height: auto !important;
aspect-ratio: 3 / 4 !important;
overflow: visible !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
padding: 0 !important;
}
body .product-card .product-img::before,
body .product-card .product-img::after {
display: none !important;
content: none !important;
background: none !important;
background-image: none !important;
}
body .product-card .product-vial {
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: flex-end !important;
justify-content: center !important;
transform: none !important;
}
body .product-card .product-vial::before,
body .product-card .product-vial::after {
display: none !important;
content: none !important;
background: none !important;
background-color: transparent !important;
width: 0 !important;
height: 0 !important;
}
body .product-card:hover .product-vial {
transform: none !important;
}
body .product-card .product-vial-img {
width: auto !important;
height: 100% !important;
max-height: 100% !important;
max-width: 100% !important;
object-fit: contain !important;
object-position: bottom center !important;
display: block !important;
filter: drop-shadow(0 18px 30px rgba(15,23,42,0.20));
transition: transform 0.3s ease;
}
body .product-card:hover .product-vial-img {
transform: translateY(-4px);
}
body .product-card .product-info {
background: transparent !important;
padding: 14px 8px 8px !important;
}
/* Hide any vial-label/mg placeholder text that might still be in DOM */
body .product-card .vial-label,
body .product-card .vial-mg {
display: none !important;
}
/* ---- kt-catalog-img-force-css ---- */
/* FORCE product image visible */
body .product-card .product-vial-img,
body.page-id-228 .product-card .product-vial-img,
.page-template-page-catalog .product-card .product-vial-img,
.products-section .product-card .product-vial-img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
position: relative !important;
z-index: 5 !important;
}
/* Kill the CSS-painted vial placeholder */
body .product-card .product-vial::before,
body .product-card .product-vial::after,
body .product-card .product-img::before,
body .product-card .product-img::after,
.products-section .product-card .product-vial::before,
.products-section .product-card .product-vial::after {
display: none !important;
content: none !important;
background: none !important;
background-image: none !important;
}
/* Make the vial container actually contain the image */
body .product-card .product-vial,
body .product-card .product-img {
background: transparent !important;
padding: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 180px !important;
}
/* ---- kt-catalog-filter-css ---- */
/* ---- the column's own furniture ---------------------------------------- */
.kt-side-group{margin:0 0 24px}
.kt-side-group:last-of-type{margin-bottom:16px}
.kt-side-h{display:block;margin:0 0 9px;font-size:10.5px;font-weight:750;
letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim,#64748b)}
/* 2: sort sits at the TOP of the column */
.kt-cf-sort{width:100%;font:inherit;font-size:13.5px;font-weight:600;
color:var(--text,#0f172a);background:#fff;border:1px solid var(--border,#e2e8f0);
border-radius:8px;padding:10px 34px 10px 12px;cursor:pointer;appearance:none;
-webkit-appearance:none;-moz-appearance:none;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 11px center;background-size:15px}
.kt-cf-sort:hover{border-color:#cbd5e1}
.kt-cf-sort:focus{outline:none;border-color:var(--primary,#2563eb);
box-shadow:0 0 0 3px rgba(37,99,235,.15)}
/* ---- search box: matches the sort control, blue/cyan focus accent ------ */
.kt-cf-search-wrap{position:relative;display:flex;align-items:center}
.kt-cf-search-ic{position:absolute;left:11px;width:15px;height:15px;color:#94a3b8;pointer-events:none}
.kt-cf-search{width:100%;font:inherit;font-size:13.5px;color:var(--text,#0f172a);
background:#fff;border:1px solid var(--border,#e2e8f0);border-radius:8px;
padding:10px 12px 10px 34px;transition:border-color .16s,box-shadow .16s}
.kt-cf-search::placeholder{color:#94a3b8}
.kt-cf-search:hover{border-color:#cbd5e1}
.kt-cf-search:focus{outline:none;border-color:#2563eb;
box-shadow:0 0 0 3px rgba(37,99,235,.15),0 0 0 1px rgba(6,182,212,.25)}
.kt-cf-search::-webkit-search-cancel-button{cursor:pointer}
/* ---- 3: the compound-class filter. A flat list, NOT chips ---------------
Square corners, a colour square, a left colour bar on hover/selection, and
a tick plus a tinted row for the selected state. Nothing rounded. */
.kt-cf-list{display:flex;flex-direction:column;border-top:1px solid var(--border,#e2e8f0)}
.kt-cf-row{--kc:#64748b;display:flex;align-items:center;gap:9px;width:100%;
cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;text-align:left;
color:var(--text-muted,#475569);background:transparent;
border:0;border-bottom:1px solid var(--border,#e2e8f0);
border-left:3px solid transparent;border-radius:0;
padding:9px 9px 9px 8px;
transition:background .16s,color .16s,border-left-color .16s}
.kt-cf-row.is-all{--kc:#0f172a}
.kt-cf-sq{width:10px;height:10px;flex:none;border-radius:2px;background:var(--kc);
box-shadow:inset 0 0 0 1px rgba(15,23,42,.1)}
.kt-cf-row-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.kt-cf-row-n{flex:none;font-size:11px;font-weight:700;
font-variant-numeric:tabular-nums;color:var(--text-dim,#94a3b8)}
.kt-cf-tick{flex:none;width:14px;height:14px;opacity:0;color:var(--kc);
transition:opacity .16s}
.kt-cf-row:hover{background:var(--slate-50,#f8fafc);color:var(--text,#0f172a);
border-left-color:color-mix(in srgb,var(--kc) 45%,transparent)}
.kt-cf-row.is-here{background:color-mix(in srgb,var(--kc) 10%,transparent);
border-left-color:var(--kc);color:var(--kc);font-weight:750}
.kt-cf-row.is-here .kt-cf-tick{opacity:1}
.kt-cf-row.is-here .kt-cf-row-n{color:var(--kc)}
.kt-cf-row:focus-visible{outline:2px solid var(--kc);outline-offset:-2px}
@supports not (background:color-mix(in srgb,#000 10%,transparent)){
.kt-cf-row:hover{border-left-color:#cbd5e1}
.kt-cf-row.is-here{background:#f1f5f9}
}
/* peptides / ancillaries: a small flat segmented switch, also square-ish */
.kt-cf-seg{display:flex;gap:4px;background:var(--slate-50,#f8fafc);
border:1px solid var(--border,#e2e8f0);border-radius:8px;padding:3px}
.kt-cf-segb{flex:1 1 auto;min-width:0;cursor:pointer;border:0;background:none;
font:inherit;font-size:12.5px;font-weight:600;color:var(--text-dim,#64748b);
padding:7px 6px;border-radius:6px;
transition:background .18s,color .18s,box-shadow .18s}
.kt-cf-segb:hover{color:var(--text,#0f172a)}
.kt-cf-segb[aria-pressed="true"]{background:#fff;color:var(--primary,#2563eb);
box-shadow:0 1px 2px rgba(15,23,42,.09)}
.kt-cf-clear{display:none;width:100%;cursor:pointer;font:inherit;font-size:12.5px;
font-weight:600;color:var(--text-dim,#64748b);background:none;
border:1px solid var(--border,#e2e8f0);border-radius:8px;padding:9px 10px}
.kt-cf-clear:hover{color:var(--primary,#2563eb);border-color:#cbd5e1}
.kt-cf-clear.kt-cf-on{display:block}
/* page-catalog.php sets .products-section .product-card{display:flex!important}.
Equal specificity + equal !important means SOURCE ORDER decides, and that
block is printed later in the body - so hiding needs a heavier selector. */
.products-section .grid .product-card.kt-cf-hidden,
.products-section .product-card.kt-cf-hidden{display:none !important}
.kt-cf-none{display:none;padding:34px 0;color:var(--text-dim,#64748b);font-size:14px}
.kt-cf-none.kt-cf-on{display:block}
/* ---- the selected class, explained where people actually are ------------ */
.kt-cf-blurb{--kc:#64748b;margin:0 0 26px;padding:14px 18px;
border-left:3px solid var(--kc);border-radius:0 10px 10px 0;
background:color-mix(in srgb,var(--kc) 5%,transparent)}
@supports not (background:color-mix(in srgb,#000 10%,transparent)){
.kt-cf-blurb{background:var(--slate-50,#f8fafc)}
}
.kt-cf-blurb-name{display:block;margin-bottom:5px;font-size:10.5px;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;color:var(--kc)}
.kt-cf-blurb-text{margin:0 0 8px;font-size:14.5px;line-height:1.7;color:var(--text-muted,#475569)}
.kt-cf-blurb-text:last-of-type{margin-bottom:0}
.kt-cf-blurb-link{display:inline-block;margin-top:9px;font-size:13px;font-weight:600;
color:var(--kc);text-decoration:none}
.kt-cf-blurb-link:hover{text-decoration:underline}
/* 2026-10-03: several classes selected -> panels side by side in one block, equal size, slide in */
.kt-cf-blurb{overflow:hidden}
.kt-cf-blurb.kt-cf-multi{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;padding:0}
.kt-cf-multi .kt-cf-bpanel{padding:14px 18px;border-left:1px solid color-mix(in srgb,var(--kc) 22%,transparent);display:flex;flex-direction:column}
.kt-cf-multi .kt-cf-bpanel:first-child{border-left:0}
.kt-cf-multi .kt-cf-blurb-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;line-height:1.6;margin:0}
.kt-cf-multi .kt-cf-blurb-link{margin-top:auto;padding-top:9px}
.kt-cf-bnew{animation:ktBlurbIn .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes ktBlurbIn{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.kt-cf-bnew{animation:none}}
/* ---- 9: under 900px the column is one bar that opens a panel ------------ */
.kt-side-toggle{display:none}
@media(max-width:900px){
.kt-side-toggle{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;
font:inherit;font-size:13.5px;font-weight:700;color:var(--text,#0f172a);
background:var(--slate-50,#f8fafc);border:1px solid var(--border,#e2e8f0);
border-radius:8px;padding:11px 13px;text-align:left}
.kt-side-toggle-v{flex:1 1 auto;min-width:0;font-weight:600;font-size:12.5px;
color:var(--text-dim,#64748b);overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;text-align:right}
.kt-side-toggle::after{content:"";flex:none;width:8px;height:8px;
margin:0 2px 3px 0;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:rotate(45deg);
transition:transform .2s}
.kt-store-side.is-open .kt-side-toggle::after{transform:rotate(-135deg);margin-bottom:0}
.kt-side-body{display:none;margin-top:10px;padding:16px 14px 14px;background:#fff;
border:1px solid var(--border,#e2e8f0);border-radius:10px}
.kt-store-side.is-open .kt-side-body{display:block}
.kt-side-group{margin:0 0 18px}
.kt-cf-blurb{margin:0 0 20px;padding:12px 15px}
.kt-cf-blurb-text{font-size:14px}
}
@media(max-width:430px){
.kt-side-toggle{font-size:13px;padding:10px 11px}
.kt-side-body{padding:14px 12px 12px}
.kt-cf-row{font-size:13px;padding:9px 7px}
.kt-cf-segb{font-size:12px;padding:7px 4px}
}
/* ---- kt-store-layout-css ---- */
/* kt-catalog-filter.php builds .kt-store-wrap / .kt-store-side /
.kt-store-main and moves the existing .grid into the main column. The
SHAPE lives here so the filter file only has to care about controls. */
.kt-store-wrap{display:grid;grid-template-columns:252px minmax(0,1fr);
gap:44px;align-items:start}
.kt-store-side{position:sticky;top:calc(var(--nav-h,72px) + 22px);align-self:start;
max-height:calc(100vh - var(--nav-h,72px) - 44px);overflow:auto;
padding-right:4px;scrollbar-width:thin}
/* 2026-10-04 catalog-buggy hotfix: some other script on this page applies a
non-!important inline style="display:none" to the freshly-built
.kt-store-side aside (confirmed via DOM inspection - not set by this file
or kt-catalog-filter.php, which never touch its style; root script not
pinned down after an exhaustive review of every kt- mu-plugin, so this is
a defensive override rather than a root-fix). Without this the sidebar
drops out of the grid layout flow entirely, so .kt-store-main - the only
remaining grid item - collapses to the FIRST column width (228px/252px)
instead of the intended minmax(0,1fr) column, taking the whole product
grid down with it. !important beats a non-!important inline style, so this
is sufficient regardless of what sets the inline style or when. */
.kt-store-side{display:block !important}
.kt-store-main{min-width:0}
/* ---- header / filters separation (2026-10-03 catalog header/filter audit)
.products-header (breadcrumb + "Research Compounds Store" heading) and
.kt-store-wrap (the sidebar + grid, inserted right after it by
kt-catalog-filter.php's JS) were sitting close enough together, on the
same plain white background as the nav above them, that the three read as
one cramped block instead of nav / heading / filters+grid as three zones.
This adds a visible rule plus real breathing room between the heading
zone and the filters+grid zone. Catalog page only - .products-header is
shared markup with other product-grid pages, so the selector stays
scoped to body.kt-store-page. */
body.kt-store-page .products-section .products-header{
margin-bottom:0;
padding-bottom:36px;
border-bottom:1px solid var(--border,#e2e8f0);
}
body.kt-store-page .kt-store-wrap{
margin-top:40px;
}
/* Card scale. Sized so the main column fits 4 across at the 1200px container
and 5 across from 1360px up, where the container widens to 1560px. Below
1360px five tracks would clip the compound-type badges. */
.kt-store-main .grid.grid-5,
.kt-store-main .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important;
gap:34px 20px !important}
.kt-store-main .product-card .product-info{padding:14px 9px 9px !important}
.kt-store-main .product-card .product-name{font-size:15.5px;line-height:1.32}
.kt-store-main .product-card .product-price{font-size:17.5px}
@media(max-width:1180px){
.kt-store-wrap{grid-template-columns:224px minmax(0,1fr);gap:32px}
.kt-store-main .grid.grid-5,
.kt-store-main .grid{gap:34px 24px !important}
}
/* ---- wide screens: use the space instead of framing it ------------------
The theme caps every .container at 1200px, which on a 1440-1920px display
left a third of the window empty on each side. On the STORE PAGE ONLY the
cap goes up to 1560px, and the nav's own container goes with it so the logo
still sits directly above the sidebar's left edge. The page heading is
inside the same container as the sidebar, so it stays aligned for free.
The footer is deliberately left at 1200px - it is not part of this page's
content area. Nothing below 1360px is touched. */
@media(min-width:1360px){
body.kt-store-page .nav > .container,
body.kt-store-page .products-section > .container{
max-width:1560px;padding-left:28px;padding-right:28px}
/* 5 across once there is room for it. Fixed tracks rather than auto-fill so
the count is predictable at the breakpoint. */
.kt-store-wrap{grid-template-columns:228px minmax(0,1fr);gap:32px}
.kt-store-main .grid.grid-5,
.kt-store-main .grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important;
gap:34px 20px !important}
}
/* From 1560px up the container stops growing, so the extra width goes into
the gutters and the cards instead. */
@media(min-width:1560px){
body.kt-store-page .nav > .container,
body.kt-store-page .products-section > .container{
padding-left:40px;padding-right:40px}
.kt-store-wrap{grid-template-columns:252px minmax(0,1fr);gap:44px}
.kt-store-main .grid.grid-5,
.kt-store-main .grid{gap:40px 28px !important}
}
/* ---- 9: phones + tablets - the column becomes a bar above the grid ------ */
@media(max-width:900px){
.kt-store-wrap{display:block}
.kt-store-side{position:static;max-height:none;overflow:visible;
margin:0 0 22px;padding-right:0}
.kt-store-main .grid.grid-5,
.kt-store-main .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;
gap:28px 18px !important}
}
/* 360-430px: one column, tighter gutters, smaller type. */
@media(max-width:430px){
.kt-store-main .grid.grid-5,
.kt-store-main .grid{gap:24px 14px !important}
.kt-store-main .product-card .product-info{padding:13px 6px 8px !important}
.kt-store-main .product-card .product-name{font-size:15.5px}
.kt-store-main .product-card .product-price{font-size:18px}
}
/* ---- cohesion with the home-page card polish (2026-10-03 COA/catalog
visual-parity audit) -----------------------------------------------
kinotype.css gives #home-catalog .kthr-grid .product-card a resting
shadow, a hover lift + glow, pill-shaped class tags and a heavier price
-- then explicitly notes the store grid "keeps its existing flat
treatment". That made the store page the one place on the refreshed
site still using the OLD flat card look. This block is that same home-
page card treatment, same values, re-scoped to .kt-store-main instead of
#home-catalog .kthr-grid so the two grids read as one design system.
Grid shape, sidebar and card SIZE above are untouched -- surface only. */
body.kt-store-page .kt-store-main .product-card{
box-shadow:0 2px 8px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04) !important;
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
body.kt-store-page .kt-store-main .product-card:hover{
box-shadow:0 18px 38px rgba(15,23,42,.11),0 6px 14px rgba(37,99,235,.12) !important;
border-color:rgba(37,99,235,.28);transform:translateY(-4px) !important}
/* ---- vial background: homepage gradient + dot-grid pattern, scoped to the
image area only (2026-10-03 catalog/home visual-parity audit, part 2) ----
The hero (.hero-bg / .hero-grid in kinotype.css) carries the site's
blue-to-white gradient + faint dot/grid texture. The catalog vial box was
still on the plain flat .product-img background (slate-50 -> slate-100,
no blue, no texture). This reuses the hero's own gradient color stops and
its exact grid-line recipe (rgba(37,99,235,.08) 1px lines) rather than
inventing new values -- only the tile size changes, from the hero's
60x60px (meant for a full viewport) down to 16x16px so the pattern still
reads inside a ~190px-wide card. Layered UNDER the existing circular glow
(::before, below) and the vial art itself (.product-vial, z-index:2). */
body.kt-store-page .kt-store-main .product-img{
background:
linear-gradient(135deg,var(--blue-50,#eff6ff),#ffffff),
radial-gradient(ellipse 80% 60% at 20% 30%,rgba(37,99,235,.12) 0%,transparent 65%),
radial-gradient(ellipse 70% 50% at 80% 70%,rgba(6,182,212,.10) 0%,transparent 65%),
linear-gradient(rgba(37,99,235,.08) 1px,transparent 1px),
linear-gradient(90deg,rgba(37,99,235,.08) 1px,transparent 1px) !important;
background-size:auto,auto,auto,16px 16px,16px 16px !important;
}
/* soft circular glow behind the vial, same idiom as the home catalogue strip */
body.kt-store-page .kt-store-main .product-img::before{
content:'' !important;position:absolute;left:50%;top:47%;width:170px;height:170px;
transform:translate(-50%,-50%);border-radius:50%;
background:radial-gradient(circle at 50% 50%,rgba(37,99,235,.14) 0%,transparent 68%) !important;
z-index:0;pointer-events:none}
body.kt-store-page .kt-store-main .product-img .product-vial{z-index:2}
/* pill-shaped class tags, matching the home grid's rounded-full treatment
(kt-catalog-backdrop.php already makes .product-img overflow:visible,
so the slightly larger pill has room) */
body.kt-store-page .kt-store-main .kt-imgtag{
border-radius:999px;padding:3.5px 9px 3.5px 7px;gap:5px;
font-weight:800;letter-spacing:.05em;box-shadow:0 1px 3px rgba(15,23,42,.1)}
/* heavier price, same weight/contrast change as the home grid */
body.kt-store-page .kt-store-main .product-price{
color:var(--slate-900,#0f172a);font-weight:700;letter-spacing:-.015em}
body.kt-store-page .kt-store-main .product-price span{
font-size:11.5px;font-weight:500;color:var(--text-dim);letter-spacing:.04em}
@media(hover:none){
body.kt-store-page .kt-store-main .product-card:hover{transform:none !important}
}
@media(prefers-reduced-motion:reduce){
body.kt-store-page .kt-store-main .product-card{transition:none}
body.kt-store-page .kt-store-main .product-card:hover{transform:none !important}
}
/* ---- kt-single-product-image-fix ---- */
body.single-product div.product .woocommerce-product-gallery { opacity: 1 !important; align-self: flex-start !important; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; }
body.single-product div.product .woocommerce-product-gallery__wrapper { display: flex !important; }
body.single-product div.product .woocommerce-product-gallery__image { display: block !important; }
body.single-product div.product .woocommerce-product-gallery__image > a { display: block !important; }
body.single-product div.product .woocommerce-product-gallery img.wp-post-image,
body.single-product div.product .woocommerce-product-gallery__image img {
display: block !important; opacity: 1 !important; visibility: visible !important;
width: 100% !important; height: auto !important; max-width: 100% !important;
border-radius: 12px;
}
body.single-product div.product .woocommerce-product-gallery::before,
body.single-product div.product .woocommerce-product-gallery::after,
body.single-product div.product .woocommerce-product-gallery__wrapper::before,
body.single-product div.product .woocommerce-product-gallery__wrapper::after,
body.single-product div.product .woocommerce-product-gallery__image::before,
body.single-product div.product .woocommerce-product-gallery__image::after {
content: none !important; background: none !important; display: none !important;
}