:root {
  --primary: #0874f9;
  --primary-dark: #0755c8;
  --primary-soft: #eaf3ff;
  --accent: #39d500;
  --ink: #10243d;
  --muted: #64748b;
  --line: #dce5e9;
  --surface: #ffffff;
  --surface-soft: #f5f9ff;
  --shadow: 0 18px 50px rgba(8, 86, 190, 0.12);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --container: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--surface); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: var(--container); margin: 0 auto; }

.topbar { background: var(--primary-dark); color: rgba(255,255,255,.9); font-size: 13px; }
.topbar-inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topbar p { margin: 0; }
.topbar-links { display: flex; gap: 22px; }
.topbar a:hover { color: #fff; }

.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(220,229,233,.8); }
.nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 235px; }
.brand-logo { width: 58px; height: 58px; flex: 0 0 auto; object-fit: contain; border-radius: 11px; background: #fff; }
.brand-copy { min-width: 0; }
.brand-symbol { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 30px; line-height: 1; font-weight: 300; box-shadow: 0 8px 20px rgba(8,116,249,.25); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 19px; line-height: 1.1; letter-spacing: -.5px; }
.brand small { color: var(--muted); font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; }
.desktop-nav { display: flex; gap: 30px; }
.desktop-nav a { position: relative; color: #4a596a; font-size: 14px; font-weight: 600; padding: 28px 0 25px; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 18px; height: 2px; background: var(--primary); transition: .25s ease; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--primary); }
.desktop-nav a:hover::after, .desktop-nav a.active::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .mobile-toggle { border: 0; background: transparent; cursor: pointer; }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; transition: .2s; position: relative; }
.icon-button:hover { border-color: var(--primary); background: var(--primary-soft); }
.icon-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-button span { position: absolute; right: -5px; top: -5px; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: white; display: grid; place-items: center; font-size: 10px; font-weight: 800; border: 2px solid white; }
.mobile-toggle { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); padding: 11px; display: none; }
.mobile-toggle span { display: block; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 3px; transition: .25s; }
.mobile-nav { display: none; padding: 0 20px 18px; border-top: 1px solid var(--line); }
.mobile-nav a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 600; color: #4a596a; }

.hero { overflow: hidden; position: relative; background: linear-gradient(135deg, #eff9f7 0%, #fff 50%, #eef8f7 100%); }
.hero::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(8,116,249,.08); top: -210px; left: -140px; }
.hero-grid { min-height: 630px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 70px; padding-top: 60px; padding-bottom: 70px; }
.hero-content { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: currentColor; }
.hero h1 { margin: 18px 0 18px; font-size: clamp(44px, 5.4vw, 72px); line-height: 1.08; letter-spacing: -3px; max-width: 670px; }
.hero h1 span { color: var(--primary); }
.hero-content > p { margin: 0; color: var(--muted); font-size: 17px; max-width: 620px; }
.hero-actions { display: flex; gap: 13px; margin-top: 30px; }
.btn { min-height: 48px; padding: 0 23px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; font-weight: 750; font-size: 14px; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--primary); color: white; box-shadow: 0 10px 25px rgba(8,116,249,.22); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: white; border-color: var(--line); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-light { background: white; color: var(--primary-dark); }
.full { width: 100%; }
.hero-metrics { margin-top: 40px; padding-top: 25px; border-top: 1px solid rgba(100,116,139,.18); display: grid; grid-template-columns: repeat(3, 1fr); max-width: 600px; }
.hero-metrics div { padding-right: 20px; }
.hero-metrics div + div { padding-left: 25px; border-left: 1px solid var(--line); }
.hero-metrics strong, .hero-metrics span { display: block; }
.hero-metrics strong { font-size: 24px; letter-spacing: -.8px; }
.hero-metrics span { color: var(--muted); font-size: 12px; }
.hero-visual { position: relative; min-height: 500px; display: grid; place-items: center; }
.hero-visual::before { content: ""; position: absolute; width: 450px; height: 450px; border-radius: 48% 52% 59% 41% / 43% 42% 58% 57%; background: linear-gradient(150deg, #d8f1ec, #f7fbfa); transform: rotate(-8deg); }
.hero-card-main { width: min(480px, 90%); position: relative; z-index: 2; filter: drop-shadow(0 24px 34px rgba(18,58,56,.18)); }
.hero-card-main img { width: 100%; }
.floating-card { position: absolute; z-index: 3; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--shadow); border-radius: 16px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.floating-card strong, .floating-card small { display: block; white-space: nowrap; }
.floating-card strong { font-size: 13px; }
.floating-card small { color: var(--muted); font-size: 10px; }
.card-delivery { left: 0; top: 95px; }
.card-support { right: 0; bottom: 70px; }
.mini-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 900; }

.trust-strip { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-grid article { display: flex; align-items: flex-start; gap: 13px; padding: 30px 22px; }
.trust-grid article + article { border-left: 1px solid var(--line); }
.trust-grid article > span { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 900; font-size: 11px; }
.trust-grid strong { font-size: 13px; }
.trust-grid p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.section { padding: 90px 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.section-heading h2 { margin: 10px 0 0; font-size: clamp(32px, 3.5vw, 46px); line-height: 1.15; letter-spacing: -1.8px; }
.section-heading > a { color: var(--primary); font-weight: 750; font-size: 14px; }
.section-heading > a span { display: inline-block; margin-left: 5px; transition: .2s; }
.section-heading > a:hover span { transform: translateX(4px); }
.category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.category-card { min-height: 154px; padding: 22px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; transition: .23s ease; }
.category-card:hover, .category-card.active { border-color: var(--primary); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(8,86,190,.09); }
.category-card.active { background: var(--primary); color: white; }
.category-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--primary-soft); color: var(--primary); font-size: 22px; margin-bottom: 20px; }
.category-card.active .category-icon { background: rgba(255,255,255,.16); color: white; }
.category-card strong, .category-card small { display: block; }
.category-card strong { font-size: 14px; }
.category-card small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.category-card.active small { color: rgba(255,255,255,.75); }

.products-section { background: var(--surface-soft); }
.products-heading { align-items: end; }
.product-controls { display: flex; gap: 10px; }
.search-box { width: 230px; height: 44px; padding: 0 13px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.search-box svg { width: 18px; fill: none; stroke: #7a8998; stroke-width: 1.8; }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); }
.product-controls select { border: 1px solid var(--line); background: white; padding: 0 34px 0 13px; border-radius: 12px; color: #4a596a; outline: 0; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.product-card { position: relative; display: flex; flex-direction: column; height: 100%; background: white; border: 1px solid #e4ecef; border-radius: 20px; overflow: hidden; transition: .25s ease; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.product-media { position: relative; min-height: 240px; display: grid; place-items: center; background: linear-gradient(160deg, #f8fbfb, #eaf5f3); padding: 24px; }
.product-media img { height: 185px; width: 100%; object-fit: contain; transition: .25s; }
.product-card:hover .product-media img { transform: scale(1.04); }
.product-badge { position: absolute; left: 14px; top: 14px; padding: 6px 9px; border-radius: 8px; background: var(--accent); color: white; font-weight: 800; font-size: 10px; }
.wishlist { position: absolute; top: 13px; right: 13px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(220,229,233,.9); background: rgba(255,255,255,.9); cursor: pointer; font-size: 17px; color: #8795a2; transition: .2s; }
.wishlist.active, .wishlist:hover { color: #e25555; border-color: #f2caca; }
.product-info { padding: 19px; display: flex; flex-direction: column; flex: 1; }
.product-brand { color: var(--primary); font-size: 10px; font-weight: 850; letter-spacing: 1px; text-transform: uppercase; }
.product-title { margin: 7px 0 10px; font-size: 14px; line-height: 1.45; min-height: 41px; }
.rating { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.stars { color: #f5a524; letter-spacing: 1px; }
.product-price-row { margin-top: auto; padding-top: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.price strong, .price del { display: block; }
.price strong { color: var(--primary-dark); font-size: 17px; }
.price del { color: #9aa7b3; font-size: 10px; }
.add-cart { width: 42px; height: 42px; flex: 0 0 auto; border: 0; border-radius: 12px; background: var(--primary); color: white; cursor: pointer; font-size: 22px; transition: .2s; }
.add-cart:hover { background: var(--primary-dark); transform: rotate(5deg); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state strong { display: block; color: var(--ink); font-size: 20px; }
.empty-state p { margin: 6px 0 0; }

.promo-section { padding: 0 0 90px; background: var(--surface-soft); }
.promo-card { min-height: 370px; padding: 55px 70px; border-radius: var(--radius-lg); background: linear-gradient(120deg, #0874f9, #0755c8); color: white; overflow: hidden; position: relative; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 30px; }
.promo-card::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; border: 70px solid rgba(255,255,255,.06); right: -130px; top: -110px; }
.eyebrow.light { color: #bbf3eb; }
.promo-card h2 { margin: 14px 0 12px; font-size: clamp(32px, 4vw, 50px); line-height: 1.12; letter-spacing: -2px; }
.promo-card p { color: rgba(255,255,255,.75); margin: 0 0 26px; }
.promo-card img { position: relative; z-index: 2; width: 100%; max-height: 290px; }

.about-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 80px; align-items: center; }
.about-visual { min-height: 490px; background: var(--primary-soft); border-radius: var(--radius-lg); position: relative; overflow: hidden; display: grid; place-items: end center; }
.about-visual::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(8,116,249,.12); left: -80px; top: -80px; }
.about-visual img { width: 92%; position: relative; z-index: 1; }
.about-badge { position: absolute; right: 20px; bottom: 20px; z-index: 2; background: white; border-radius: 15px; padding: 14px 18px; box-shadow: var(--shadow); }
.about-badge strong, .about-badge span { display: block; }
.about-badge strong { color: var(--primary); font-size: 20px; }
.about-badge span { color: var(--muted); font-size: 10px; }
.about-content h2 { margin: 15px 0 18px; font-size: clamp(34px, 4vw, 50px); line-height: 1.12; letter-spacing: -2px; }
.about-content > p { color: var(--muted); font-size: 16px; }
.check-list { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 13px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; color: #405062; font-size: 14px; }
.check-list .check-icon { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 900; }
.check-list .check-text { flex: 1 1 auto; min-width: 0; width: auto; height: auto; display: block; background: transparent; color: inherit; font-weight: 400; line-height: 1.6; }
.text-link { color: var(--primary); font-weight: 800; font-size: 14px; }
.text-link span { display: inline-block; margin-left: 5px; transition: .2s; }
.text-link:hover span { transform: translateX(4px); }

.consultation-section { padding-top: 30px; }
.consultation-card { background: #f1f7ff; border-radius: var(--radius-lg); padding: 60px; display: grid; grid-template-columns: .92fr 1.08fr; gap: 70px; align-items: center; }
.consultation-copy h2 { margin: 15px 0 14px; font-size: clamp(34px, 4vw, 50px); line-height: 1.12; letter-spacing: -2px; }
.consultation-copy > p { color: var(--muted); }
.contact-list { margin-top: 28px; display: grid; gap: 12px; }
.contact-list a { display: flex; align-items: center; gap: 12px; width: fit-content; }
.contact-list a > span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: white; color: var(--primary); box-shadow: 0 8px 20px rgba(8,86,190,.08); }
.contact-list small, .contact-list strong { display: block; }
.contact-list small { color: var(--muted); font-size: 10px; }
.contact-list strong { font-size: 13px; }
.consultation-form { background: white; padding: 28px; border-radius: 20px; box-shadow: 0 18px 45px rgba(8,86,190,.08); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.consultation-form label { display: grid; gap: 7px; color: #405062; font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.consultation-form input, .consultation-form select, .consultation-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; outline: 0; background: white; color: var(--ink); transition: .2s; }
.consultation-form textarea { resize: vertical; }
.consultation-form input:focus, .consultation-form select:focus, .consultation-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8,116,249,.09); }
.privacy-note { display: block; text-align: center; color: #8a98a5; font-size: 9px; margin-top: 10px; }

.footer { margin-top: 70px; background: #071d3a; color: rgba(255,255,255,.76); }
.footer-grid { padding: 60px 0 45px; display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 45px; }
.brand-light { color: white; }
/* 2.0.76 - Footer brand: keep the logo visually separated from the company name. */
.footer-brand .brand-light {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}
.footer-brand .brand-copy { display: block; }
.footer-brand .brand-copy strong { line-height: 1.15; }
.footer-brand .brand-copy small { margin-top: 5px; line-height: 1.25; }
/* 2.0.77 - Keep the company description spacing/layout as before; block flex removes inline baseline gap. */
.footer-logo { width: 72px; height: 72px; padding: 4px; }
.brand-light small { color: rgba(255,255,255,.55); }
.footer h3 { margin: 0 0 16px; color: white; font-size: 14px; }
.footer a, .footer p { display: block; margin: 9px 0; font-size: 12px; }
.footer a:hover { color: white; }
.footer-category-links { display: flex; flex-direction: column; align-items: flex-start; }
.footer-category-links a { width: fit-content; }
.footer-category-empty { display: block; margin: 9px 0; font-size: 12px; color: rgba(255,255,255,.55); }
.footer-brand > p { max-width: 300px; line-height: 1.7; }
.socials { display: flex; gap: 8px; margin-top: 20px; }
.socials a { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; display: grid; place-items: center; margin: 0; }
.footer-bottom { min-height: 70px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.footer-bottom div { display: flex; gap: 18px; }
.footer-bottom a { margin: 0; }

.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(7,22,28,.48); opacity: 0; visibility: hidden; transition: .25s; }
.overlay.show { opacity: 1; visibility: visible; }
.cart-drawer { position: fixed; z-index: 110; top: 0; right: 0; width: min(420px, 100%); height: 100dvh; background: white; transform: translateX(100%); transition: .3s ease; display: flex; flex-direction: column; }
.cart-drawer.open { transform: translateX(0); }
.drawer-header { min-height: 80px; padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.drawer-header span, .drawer-header small { display: block; }
.drawer-header span { font-size: 20px; font-weight: 850; }
.drawer-header small { color: var(--muted); }
.drawer-header button, .modal-close { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: white; cursor: pointer; font-size: 25px; line-height: 1; }
.cart-items { overflow: auto; flex: 1; padding: 18px 22px; display: grid; align-content: start; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.cart-item img { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; background: var(--surface-soft); }
.cart-item strong, .cart-item small { display: block; }
.cart-item strong { font-size: 12px; line-height: 1.4; }
.cart-item small { color: var(--primary); font-weight: 800; margin-top: 5px; }
.cart-qty { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cart-qty button { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); background: white; cursor: pointer; }
.cart-remove { border: 0; background: transparent; color: #9aa7b3; cursor: pointer; font-size: 18px; }
.cart-empty { margin: auto; text-align: center; padding: 30px; color: var(--muted); }
.cart-empty > span { font-size: 42px; }
.cart-empty strong { display: block; color: var(--ink); margin-top: 12px; }
.cart-empty p { font-size: 12px; }
.drawer-footer { padding: 20px 22px 25px; border-top: 1px solid var(--line); }
.subtotal { display: flex; justify-content: space-between; margin-bottom: 16px; }
.subtotal strong { font-size: 20px; color: var(--primary-dark); }
.search-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: start center; padding-top: 12vh; background: rgba(7,22,28,.54); opacity: 0; visibility: hidden; transition: .25s; }
.search-modal.open { opacity: 1; visibility: visible; }
.search-modal-card { width: min(650px, calc(100% - 30px)); padding: 34px; border-radius: 24px; background: white; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.2); transform: translateY(-10px); transition: .25s; }
.search-modal.open .search-modal-card { transform: translateY(0); }
.modal-close { position: absolute; right: 20px; top: 20px; }
.search-modal h2 { margin: 12px 0 22px; font-size: 34px; letter-spacing: -1px; }
.modal-search-box { height: 58px; border: 1px solid var(--line); border-radius: 14px; display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.modal-search-box svg { width: 22px; fill: none; stroke: var(--primary); stroke-width: 1.8; }
.modal-search-box input { width: 100%; border: 0; outline: 0; font-size: 16px; }
.quick-keywords { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.quick-keywords button { border: 1px solid var(--line); background: white; border-radius: 999px; padding: 7px 11px; color: #4a596a; cursor: pointer; }
.quick-keywords button:hover { border-color: var(--primary); color: var(--primary); }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 200; transform: translate(-50%, 20px); background: #0d2c31; color: white; border-radius: 12px; padding: 12px 18px; opacity: 0; visibility: hidden; transition: .25s; box-shadow: var(--shadow); font-size: 13px; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@media (max-width: 1024px) {
  .desktop-nav { display: none; }
  .mobile-toggle { display: block; }
  .mobile-nav.open { display: block; }
  .hero-grid { grid-template-columns: 1fr; gap: 25px; padding-top: 70px; }
  .hero-content { text-align: center; }
  .hero-content > p, .hero-metrics { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { min-height: 430px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .trust-grid article:nth-child(4) { border-top: 1px solid var(--line); }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .promo-card { padding: 50px; }
  .about-grid, .consultation-card { grid-template-columns: 1fr; gap: 45px; }
  .about-visual { max-width: 650px; width: 100%; margin: 0 auto; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root { --container: min(100% - 28px, 1180px); }
  .topbar-inner { justify-content: center; text-align: center; min-height: 32px; }
  .topbar-links { display: none; }
  .nav-wrap { min-height: 68px; }
  .brand { min-width: 0; }
  .brand-logo { width: 50px; height: 50px; }
  .brand strong { font-size: 18px; }
  .brand-symbol { width: 36px; height: 36px; }
  .icon-button:first-child { display: none; }
  .hero-grid { min-height: auto; padding-top: 55px; padding-bottom: 55px; }
  .hero h1 { font-size: clamp(39px, 12vw, 56px); letter-spacing: -2.2px; }
  .hero-content > p { font-size: 15px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-metrics { grid-template-columns: 1fr; gap: 15px; text-align: left; }
  .hero-metrics div { display: flex; align-items: center; justify-content: space-between; padding: 0; }
  .hero-metrics div + div { padding: 15px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .hero-visual { min-height: 345px; }
  .hero-visual::before { width: 300px; height: 300px; }
  .card-delivery { left: -5px; top: 60px; }
  .card-support { right: -5px; bottom: 30px; }
  .floating-card { padding: 10px 11px; }
  .floating-card strong { font-size: 11px; }
  .floating-card small { font-size: 8px; }
  .mini-icon { width: 30px; height: 30px; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid article { padding: 20px 12px; }
  .trust-grid article + article { border-left: 0; border-top: 1px solid var(--line); }
  .section { padding: 68px 0; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .section-heading h2 { font-size: 35px; }
  .category-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .category-card { min-width: 178px; scroll-snap-align: start; }
  .products-heading { gap: 20px; }
  .product-controls { width: 100%; flex-direction: column; }
  .search-box { width: 100%; }
  .product-controls select { height: 44px; width: 100%; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-media { min-height: 180px; padding: 16px; }
  .product-media img { height: 135px; }
  .product-info { padding: 14px; }
  .product-title { font-size: 12px; min-height: 35px; }
  .rating { font-size: 9px; }
  .price strong { font-size: 14px; }
  .add-cart { width: 36px; height: 36px; }
  .promo-section { padding-bottom: 68px; }
  .promo-card { padding: 38px 25px; grid-template-columns: 1fr; }
  .promo-card h2 { font-size: 36px; }
  .promo-card img { max-height: 230px; }
  .about-visual { min-height: 380px; }
  .about-content h2, .consultation-copy h2 { font-size: 36px; }
  .consultation-card { padding: 36px 22px; }
  .form-row { grid-template-columns: 1fr; }
  .consultation-form { padding: 20px; }
  .footer { margin-top: 30px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; padding: 18px 0; }
  .search-modal { padding-top: 5vh; }
  .search-modal-card { padding: 26px 20px; }
  .search-modal h2 { font-size: 28px; padding-right: 35px; }
}

@media (max-width: 420px) {
  .brand small { display: none; }
  .product-grid { grid-template-columns: 1fr; }
  .product-media { min-height: 230px; }
  .product-media img { height: 180px; }
  .product-title { font-size: 14px; min-height: auto; }
}

/* Full-stack checkout and live data states */
.catalog-loading,.catalog-error{grid-column:1/-1;padding:48px;text-align:center;background:#fff;border:1px solid #dfe9e6;border-radius:18px;color:#51645f}.catalog-error p{margin:8px 0 18px}.stock-state{font-size:12px;color:#25835f;margin-top:8px}.stock-state.out{color:#b44848}.add-cart:disabled{opacity:.45;cursor:not-allowed}.checkout-modal{position:fixed;inset:0;z-index:1200;background:rgba(11,35,29,.62);display:none;align-items:center;justify-content:center;padding:20px}.checkout-modal.open{display:flex}.checkout-card{width:min(1040px,100%);max-height:94vh;overflow:auto;background:#fff;border-radius:24px;padding:28px;box-shadow:0 30px 80px rgba(5,30,24,.3)}.checkout-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}.checkout-header h2{margin:4px 0 0}.checkout-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:28px}.checkout-form{display:grid;gap:15px}.checkout-form label{display:grid;gap:7px;font-weight:700;color:#173b32}.checkout-form input,.checkout-form textarea,.checkout-form select{width:100%;border:1px solid #ccdcd7;border-radius:11px;padding:12px 13px;font:inherit;background:#fff}.checkout-form input:focus,.checkout-form textarea:focus,.checkout-form select:focus{outline:2px solid rgba(31,157,115,.18);border-color:#1f9d73}.checkout-summary{background:#f3f8f6;border:1px solid #dceae5;border-radius:17px;padding:20px;height:max-content}.checkout-summary h3{margin:0 0 15px}.checkout-summary>p{font-size:12px;color:#677a74;margin:14px 0 0}.checkout-item,.summary-line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #dbe7e3;font-size:14px}.checkout-item span{max-width:70%}.summary-line.total{font-size:18px;border-bottom:0;padding-top:16px}.summary-line.total strong{color:#16845f}.order-success{text-align:center;padding:45px 20px}.order-success>span{display:grid;place-items:center;margin:0 auto 18px;width:62px;height:62px;border-radius:50%;background:#e3f5ee;color:#16845f;font-size:30px;font-weight:800}.order-success h3{font-size:28px;margin:0 0 8px}.order-success p{margin:0 0 22px}.order-success strong{color:#16845f}.checkout-card [hidden]{display:none!important}@media(max-width:760px){.checkout-card{padding:20px 16px;border-radius:18px}.checkout-layout{grid-template-columns:1fr}.checkout-summary{order:-1}.checkout-form .form-row{grid-template-columns:1fr}.checkout-header h2{font-size:24px}}

/* CMS-managed hero title keeps only the highlighted phrase in blue. */
.hero-content h1 .hero-title-main{color:inherit}

/* Dynamic home hero slider - 2.0.19 fluid depth track motion */
.hero-slider {
  position: relative;
  z-index: 1;
  display: grid;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
}
.hero-slider.is-dragging { cursor: grabbing; }
.hero-slider img {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Every slide is a complete panel in the same grid cell. Instead of fading
   individual elements, the old and new panels travel together horizontally,
   like a physical carousel track. */
.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  display: block;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  transform: translate3d(100%, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.hero-slide > .hero-grid {
  position: relative;
  z-index: 1;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* A very soft light veil creates depth while the complete panel travels. It
   animates only opacity/transform, avoiding heavy blur filters that can make
   large hero sections stutter on integrated GPUs. */
.hero-slide::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -8%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 68% 42%, rgba(255,255,255,.28), rgba(255,255,255,0) 42%),
    linear-gradient(105deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 72%);
  transform: translate3d(var(--hero-light-base-x, 5%), 0, 0) scale(1.04);
  will-change: opacity, transform;
}
.hero-slide.active {
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transform: translate3d(0, 0, 0);
}
.hero-slide.hero-neighbor {
  visibility: visible;
  pointer-events: none;
  z-index: 3;
}
.hero-slider.hero-animating .hero-slide.active,
.hero-slider.hero-animating .hero-slide.hero-neighbor {
  transition: transform .76s cubic-bezier(.16, 1, .3, 1);
}
.hero-slider.hero-snapping .hero-slide.active,
.hero-slider.hero-snapping .hero-slide.hero-neighbor {
  transition: transform .42s cubic-bezier(.2, .82, .2, 1);
}

/* "Dreamy" depth without breaking the full-panel carousel model: the entire
   banner still travels as one panel, while its composition breathes by only a
   few pixels and about 1-2% scale. The small overshoot makes the landing feel
   softer instead of mechanically stopping at x=0. */
.hero-slide.hero-neighbor > .hero-grid {
  transform: translate3d(var(--hero-in-x, -10px), 0, 0) scale(.978);
  opacity: .9;
}
.hero-slider.hero-animating .hero-slide.active > .hero-grid {
  animation: heroPanelDepthOut .76s cubic-bezier(.16, 1, .3, 1) both;
}
.hero-slider.hero-animating .hero-slide.hero-neighbor > .hero-grid {
  animation: heroPanelDepthIn .76s cubic-bezier(.16, 1, .3, 1) both;
}
.hero-slider.hero-animating .hero-slide.active::after {
  animation: heroLightOut .76s cubic-bezier(.16, 1, .3, 1) both;
}
.hero-slider.hero-animating .hero-slide.hero-neighbor::after {
  animation: heroLightIn .76s cubic-bezier(.16, 1, .3, 1) both;
}
.hero-slider.hero-snapping .hero-slide.active > .hero-grid,
.hero-slider.hero-snapping .hero-slide.hero-neighbor > .hero-grid {
  transition: transform .42s cubic-bezier(.2, .82, .2, 1), opacity .3s ease;
}
.hero-slider.hero-snapping .hero-slide.active > .hero-grid {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}
.hero-slider.hero-snapping .hero-slide.hero-neighbor > .hero-grid {
  transform: translate3d(var(--hero-in-x, -10px), 0, 0) scale(.978);
  opacity: .9;
}

@keyframes heroPanelDepthOut {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  100% { transform: translate3d(var(--hero-out-x, 8px), 0, 0) scale(.986); opacity: .96; }
}
@keyframes heroPanelDepthIn {
  0% { transform: translate3d(var(--hero-in-x, -10px), 0, 0) scale(.978); opacity: .9; }
  68% { transform: translate3d(var(--hero-over-x, 1.5px), 0, 0) scale(1.004); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
@keyframes heroLightOut {
  0% { opacity: 0; transform: translate3d(var(--hero-light-out-start-x, -2%), 0, 0) scale(1.02); }
  55% { opacity: .055; }
  100% { opacity: 0; transform: translate3d(var(--hero-light-out-end-x, 4%), 0, 0) scale(1.04); }
}
@keyframes heroLightIn {
  0% { opacity: .14; transform: translate3d(var(--hero-light-in-x, 7%), 0, 0) scale(1.05); }
  72% { opacity: .035; }
  100% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); }
}
.hero-slide.hero-dragging {
  transition: none !important;
}
.hero-slider.hero-animating .hero-slide,
.hero-slider.hero-snapping .hero-slide {
  pointer-events: none;
}

/* Keep every element inside the panel visually locked to that panel. This is
   important for the "grab the whole banner" effect: copy, artwork and floating
   badges move as one composition rather than animating separately. */
.hero-slide .hero-content .eyebrow,
.hero-slide .hero-content h1,
.hero-slide .hero-content > p,
.hero-slide .hero-actions,
.hero-slide .hero-metrics,
.hero-slide .hero-metrics > div,
.hero-slide .hero-card-main,
.hero-slide .floating-card {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition: none;
}

.hero-slider-control {
  position: absolute;
  z-index: 8;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(8,116,249,.2);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(15,38,70,.12);
  color: var(--primary);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-slider-control::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform-origin: 50% 50%;
}
.hero-slider-prev::before { transform: rotate(-135deg); }
.hero-slider-next::before { transform: rotate(45deg); }
.hero-slider-control:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 14px 36px rgba(15,38,70,.18);
  background: #fff;
}
.hero-slider-control:active { transform: translateY(-50%) scale(.96); }
.hero-slider-control[hidden] { display: none; }
.hero-slider-prev { left: 22px; }
.hero-slider-next { right: 22px; }

.hero-slider-dots {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.hero-slider-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(8,116,249,.25);
  cursor: pointer;
  transition: width .28s ease, background .28s ease, transform .28s ease;
}
.hero-slider-dots button:hover { transform: scale(1.18); }
.hero-slider-dots button.active {
  width: 28px;
  background: var(--primary);
}

@media (max-width: 900px) {
  .hero-slider-control {
    width: 40px;
    height: 40px;
    font-size: 26px;
    top: auto;
    bottom: 18px;
  }
  .hero-slider-control:hover,
  .hero-slider-control:active { transform: none; }
  .hero-slider-prev { left: 20px; }
  .hero-slider-next { right: 20px; }
  .hero-slider-dots { bottom: 30px; }
}

@media (max-width: 560px) {
  .hero-slider-control { display: none !important; }
  .hero-slider-dots { bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider.hero-animating .hero-slide.active,
  .hero-slider.hero-animating .hero-slide.hero-neighbor,
  .hero-slider.hero-snapping .hero-slide.active,
  .hero-slider.hero-snapping .hero-slide.hero-neighbor,
  .hero-slider-control,
  .hero-slider-dots button,
  .hero-slider.hero-animating .hero-slide.active > .hero-grid,
  .hero-slider.hero-animating .hero-slide.hero-neighbor > .hero-grid,
  .hero-slider.hero-animating .hero-slide.active::after,
  .hero-slider.hero-animating .hero-slide.hero-neighbor::after,
  .hero-slider.hero-snapping .hero-slide.active > .hero-grid,
  .hero-slider.hero-snapping .hero-slide.hero-neighbor > .hero-grid {
    transition: none !important;
    animation: none !important;
  }
  .hero-slide.hero-neighbor > .hero-grid,
  .hero-slider.hero-snapping .hero-slide.hero-neighbor > .hero-grid {
    transform: none !important;
    opacity: 1 !important;
  }
  .hero-slide::after { display: none !important; }
  .hero-slide-biolife::before,
  .hero-slide-biolife .hero-grid-biolife::before {
    animation: none !important;
    transform: none !important;
  }
}

/* 2.0.3 - Better hero composition for banner templates */
.hero-content h1 {
  text-wrap: balance;
}
.hero-content h1 .hero-title-main,
.hero-content h1 > span:last-child {
  display: inline;
}
.hero-content h1 .hero-title-main br {
  display: block;
  content: "";
}
.hero-slide .hero-content {
  max-width: 690px;
}
.hero-slide .hero-content > p {
  line-height: 1.7;
}
.hero-visual-template {
  min-height: 540px;
  transform: translateY(-22px);
}
.hero-visual-template::before {
  width: 470px;
  height: 470px;
}
.hero-visual-template .hero-card-main {
  width: min(565px, 100%);
  transform: translateY(-8px);
}
.hero-visual-template .hero-card-main img {
  width: 100%;
  max-height: 430px;
  object-fit: contain;
}
.hero-visual-template .card-delivery {
  top: 78px;
}
.hero-visual-template .card-support {
  bottom: 86px;
}

@media (max-width: 1100px) {
  .hero-visual-template {
    min-height: 500px;
    transform: translateY(-12px);
  }
  .hero-visual-template .hero-card-main {
    width: min(525px, 100%);
  }
}

@media (max-width: 900px) {
  .hero-content h1 {
    text-wrap: pretty;
  }
  .hero-visual-template {
    min-height: 440px;
    transform: none;
  }
  .hero-visual-template .hero-card-main {
    width: min(520px, 94%);
    transform: none;
  }
  .hero-visual-template .card-delivery {
    top: 72px;
  }
  .hero-visual-template .card-support {
    bottom: 52px;
  }
}

@media (max-width: 560px) {
  .hero-content h1 {
    letter-spacing: -1.5px;
    line-height: 1.08;
  }
  .hero-visual-template {
    min-height: 350px;
  }
  .hero-visual-template .hero-card-main {
    width: min(420px, 100%);
  }
  .hero-visual-template .card-delivery {
    top: 42px;
  }
  .hero-visual-template .card-support {
    bottom: 32px;
  }
}



/* 2.0.6 - Clean template artwork and prevent floating-label collisions */
.hero-visual-template {
  isolation: isolate;
}
.hero-visual-template .hero-card-main {
  z-index: 2;
}
.hero-visual-template .floating-card {
  z-index: 4;
  max-width: 235px;
}
.hero-visual-template .floating-card strong,
.hero-visual-template .floating-card small {
  white-space: normal;
  line-height: 1.35;
}
.hero-visual-template .card-delivery {
  left: -18px;
  top: 52px;
}
.hero-visual-template .card-support {
  right: -14px;
  bottom: 58px;
}

@media (max-width: 1100px) {
  .hero-visual-template .card-delivery {
    left: -8px;
    top: 54px;
  }
  .hero-visual-template .card-support {
    right: -6px;
    bottom: 50px;
  }
}

@media (max-width: 900px) {
  .hero-visual-template .floating-card {
    max-width: 210px;
  }
  .hero-visual-template .card-delivery {
    left: 6px;
    top: 48px;
  }
  .hero-visual-template .card-support {
    right: 6px;
    bottom: 42px;
  }
}

@media (max-width: 560px) {
  .hero-visual-template .floating-card {
    max-width: 180px;
  }
  .hero-visual-template .card-delivery {
    left: 4px;
    top: 32px;
  }
  .hero-visual-template .card-support {
    right: 4px;
    bottom: 24px;
  }
}


/* 2.0.7 - Remove default hero blob from template banners and add safer card placement */
.hero-visual-template::before {
  display: none;
}
.hero-visual-template {
  overflow: visible;
}
.hero-visual-template .floating-card {
  max-width: 250px;
}
.hero-visual-template .card-delivery {
  left: -36px;
  top: 20px;
}
.hero-visual-template .card-support {
  right: -22px;
  bottom: 26px;
}

@media (max-width: 1100px) {
  .hero-visual-template .card-delivery {
    left: -18px;
    top: 24px;
  }
  .hero-visual-template .card-support {
    right: -10px;
    bottom: 20px;
  }
}

@media (max-width: 900px) {
  .hero-visual-template .card-delivery {
    left: 0;
    top: 18px;
  }
  .hero-visual-template .card-support {
    right: 0;
    bottom: 12px;
  }
}

@media (max-width: 560px) {
  .hero-visual-template .card-delivery {
    left: 0;
    top: 10px;
  }
  .hero-visual-template .card-support {
    right: 0;
    bottom: 6px;
  }
}


/* 2.0.13 - Distinct artwork shapes for Banner 2/3/4 and later slides.
   Banner 1 remains unchanged. */
.hero-visual.hero-artwork-oval .hero-card-main,
.hero-visual.hero-artwork-blob .hero-card-main,
.hero-visual.hero-artwork-layers .hero-card-main {
  filter: none;
  isolation: isolate;
}

/* Banner 2: wide soft oval / capsule. */
.hero-artwork-oval .hero-card-main img {
  display: block;
  border-radius: 50% / 44%;
  clip-path: ellipse(49% 45% at 50% 50%);
  filter: drop-shadow(0 24px 34px rgba(18, 93, 88, .18));
  transform: scale(1.035);
}
.hero-artwork-oval .hero-card-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7% -2% 4%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(217, 245, 235, .78), rgba(222, 243, 255, .46));
  transform: rotate(-4deg);
}

/* Banner 3: asymmetric organic microbiology blob. */
.hero-artwork-blob .hero-card-main img {
  display: block;
  border-radius: 42% 58% 53% 47% / 48% 38% 62% 52%;
  clip-path: inset(0 round 42% 58% 53% 47% / 48% 38% 62% 52%);
  filter: drop-shadow(0 24px 34px rgba(23, 113, 184, .18));
  transform: rotate(.35deg) scale(1.025);
}
.hero-artwork-blob .hero-card-main::before,
.hero-artwork-blob .hero-card-main::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.hero-artwork-blob .hero-card-main::before {
  width: 78%;
  height: 82%;
  left: 5%;
  top: 5%;
  border-radius: 55% 45% 62% 38% / 48% 60% 40% 52%;
  background: rgba(199, 233, 251, .6);
  transform: rotate(-8deg);
}
.hero-artwork-blob .hero-card-main::after {
  width: 54%;
  height: 58%;
  right: 2%;
  bottom: 1%;
  border-radius: 61% 39% 46% 54% / 43% 57% 43% 57%;
  border: 2px solid rgba(98, 183, 232, .22);
  transform: rotate(10deg);
}

/* Banner 4: layered ellipses for a greener, softer laboratory theme. */
.hero-artwork-layers .hero-card-main img {
  display: block;
  position: relative;
  z-index: 3;
  border-radius: 50%;
  clip-path: ellipse(47% 43% at 50% 50%);
  filter: drop-shadow(0 24px 36px rgba(51, 117, 58, .17));
  transform: scale(1.025);
}
.hero-artwork-layers .hero-card-main::before,
.hero-artwork-layers .hero-card-main::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.hero-artwork-layers .hero-card-main::before {
  z-index: 1;
  inset: 8% -1% 7%;
  background: linear-gradient(145deg, rgba(217, 240, 210, .88), rgba(244, 255, 242, .56));
  transform: rotate(-9deg);
}
.hero-artwork-layers .hero-card-main::after {
  z-index: 2;
  width: 72%;
  height: 74%;
  right: -3%;
  top: 4%;
  background: rgba(112, 187, 95, .10);
  border: 2px solid rgba(112, 187, 95, .15);
  transform: rotate(12deg);
}

/* Keep floating cards clear of the more sculpted artwork silhouettes. */
.hero-artwork-oval .card-delivery { left: -24px; top: 20px; }
.hero-artwork-oval .card-support { right: -12px; bottom: 24px; }
.hero-artwork-blob .card-delivery { left: -30px; top: 30px; }
.hero-artwork-blob .card-support { right: -10px; bottom: 20px; }
.hero-artwork-layers .card-delivery { left: -22px; top: 24px; }
.hero-artwork-layers .card-support { right: -16px; bottom: 20px; }

@media (max-width: 900px) {
  .hero-artwork-oval .hero-card-main img,
  .hero-artwork-blob .hero-card-main img,
  .hero-artwork-layers .hero-card-main img {
    transform: scale(1.01);
  }
  .hero-artwork-oval .card-delivery,
  .hero-artwork-blob .card-delivery,
  .hero-artwork-layers .card-delivery { left: 0; top: 18px; }
  .hero-artwork-oval .card-support,
  .hero-artwork-blob .card-support,
  .hero-artwork-layers .card-support { right: 0; bottom: 12px; }
}

@media (max-width: 560px) {
  .hero-artwork-oval .hero-card-main img,
  .hero-artwork-blob .hero-card-main img,
  .hero-artwork-layers .hero-card-main img { transform: none; }
  .hero-artwork-oval .card-delivery,
  .hero-artwork-blob .card-delivery,
  .hero-artwork-layers .card-delivery { top: 8px; }
  .hero-artwork-oval .card-support,
  .hero-artwork-blob .card-support,
  .hero-artwork-layers .card-support { bottom: 4px; }
}

/* 2.0.14 - Floating hero badges overlap the artwork intentionally.
   Template banners keep the badges inside the visual composition instead of
   leaving them outside the artwork silhouette. */
.hero-visual-template .floating-card {
  z-index: 6;
  box-shadow: 0 16px 38px rgba(15, 38, 70, .16);
}

/* Banner 2 / oval */
.hero-visual-template.hero-artwork-oval .card-delivery {
  left: 4%;
  top: 15%;
}
.hero-visual-template.hero-artwork-oval .card-support {
  right: 3%;
  bottom: 16%;
}

/* Banner 3 / organic blob */
.hero-visual-template.hero-artwork-blob .card-delivery {
  left: 3%;
  top: 16%;
}
.hero-visual-template.hero-artwork-blob .card-support {
  right: 3%;
  bottom: 15%;
}

/* Banner 4 / layered ellipses */
.hero-visual-template.hero-artwork-layers .card-delivery {
  left: 5%;
  top: 14%;
}
.hero-visual-template.hero-artwork-layers .card-support {
  right: 4%;
  bottom: 15%;
}

@media (max-width: 1100px) {
  .hero-visual-template.hero-artwork-oval .card-delivery,
  .hero-visual-template.hero-artwork-blob .card-delivery,
  .hero-visual-template.hero-artwork-layers .card-delivery {
    left: 4%;
    top: 14%;
  }
  .hero-visual-template.hero-artwork-oval .card-support,
  .hero-visual-template.hero-artwork-blob .card-support,
  .hero-visual-template.hero-artwork-layers .card-support {
    right: 3%;
    bottom: 14%;
  }
}

@media (max-width: 900px) {
  .hero-visual-template.hero-artwork-oval .card-delivery,
  .hero-visual-template.hero-artwork-blob .card-delivery,
  .hero-visual-template.hero-artwork-layers .card-delivery {
    left: 5%;
    top: 12%;
  }
  .hero-visual-template.hero-artwork-oval .card-support,
  .hero-visual-template.hero-artwork-blob .card-support,
  .hero-visual-template.hero-artwork-layers .card-support {
    right: 5%;
    bottom: 12%;
  }
}

@media (max-width: 560px) {
  .hero-visual-template .floating-card {
    max-width: 170px;
    padding: 9px 10px;
  }
  .hero-visual-template.hero-artwork-oval .card-delivery,
  .hero-visual-template.hero-artwork-blob .card-delivery,
  .hero-visual-template.hero-artwork-layers .card-delivery {
    left: 3%;
    top: 9%;
  }
  .hero-visual-template.hero-artwork-oval .card-support,
  .hero-visual-template.hero-artwork-blob .card-support,
  .hero-visual-template.hero-artwork-layers .card-support {
    right: 3%;
    bottom: 9%;
  }
}


/* 2.0.15 - Water banner title layout only; other banners are unchanged. */
.hero-slide-water .hero-content h1.hero-title-water {
  max-width: 720px;
  font-size: clamp(44px, 4.55vw, 60px);
  line-height: 1.08;
  letter-spacing: -2.6px;
  text-wrap: nowrap;
}
.hero-slide-water .hero-content h1.hero-title-water .hero-title-main,
.hero-slide-water .hero-content h1.hero-title-water > span:last-child {
  display: inline;
}
@media (max-width: 900px) {
  .hero-slide-water .hero-content h1.hero-title-water {
    max-width: 680px;
    font-size: clamp(42px, 7vw, 58px);
    text-wrap: balance;
  }
}
@media (max-width: 560px) {
  .hero-slide-water .hero-content h1.hero-title-water {
    max-width: 100%;
    font-size: clamp(38px, 11vw, 50px);
    letter-spacing: -1.8px;
  }
}

/* 2.0.20 - Keep the three hero metric columns visually even on every banner. */
@media (min-width: 761px) {
  .hero-slide .hero-metrics {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    align-items: stretch;
  }

  .hero-slide .hero-metrics > div,
  .hero-slide .hero-metrics > div + div {
    position: relative;
    min-width: 0;
    padding: 0;
    border-left: 0;
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
  }

  .hero-slide .hero-metrics > div + div::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -16px;
    width: 1px;
    background: var(--line);
  }

  .hero-slide .hero-metrics strong {
    min-height: 2.48em;
    display: flex;
    align-items: center;
    font-size: clamp(20px, 1.65vw, 24px);
    line-height: 1.24;
    letter-spacing: -.65px;
    text-wrap: balance;
  }

  .hero-slide .hero-metrics span {
    min-height: 3.2em;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    text-wrap: pretty;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .hero-slide .hero-metrics {
    max-width: 690px;
    column-gap: 40px;
  }

  .hero-slide .hero-metrics > div + div::before {
    left: -20px;
  }
}


/* 2.0.25 - Biolife public hero matches the approved Admin template.
   The artwork stays separate from all CMS-managed text, so admins can still
   edit the Banner 1 fields without baking copy into the image. */
.hero-slide-biolife {
  --primary: #0a8737;
  --primary-dark: #056829;
  --primary-soft: #edf8ef;
  /* 2.0.40 - the Biolife microbiology artwork is carried by an animated
     ambient layer behind the editable banner content. The base gradient stays
     on the slide so the page remains clean even while motion is disabled. */
  background-color: #ffffff;
  background-image:
    radial-gradient(circle at 88% 12%, rgba(111, 177, 86, .12), transparent 29%),
    linear-gradient(112deg, #ffffff 0 45%, #fbfefb 66%, #f0f8ed 100%);
  background-size: auto, auto;
  background-position: center, center;
  background-repeat: no-repeat;
}

/* Animated innermost background only: text, buttons, product photography and
   the complete slide panel remain fixed. Transform-only motion keeps the
   effect smooth and avoids continuously repainting the banner composition. */
.hero-slide-biolife::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -7%;
  pointer-events: none;
  background-image:
    url('/assets/biolife-microbiology-bg.svg?v=2.0.41'),
    radial-gradient(circle at 24% 66%, rgba(111, 177, 86, .055), transparent 25%),
    radial-gradient(circle at 78% 30%, rgba(166, 215, 202, .075), transparent 30%);
  background-size: cover, 64% 76%, 58% 68%;
  background-position: center, left bottom, right top;
  background-repeat: no-repeat;
  transform-origin: 50% 50%;
  transform: translate3d(-1.8%, -1%, 0) scale(1.06);
  opacity: .96;
  will-change: transform;
}

/* Only the visible/current transition panels animate, so additional hidden
   Biolife slides do not consume continuous animation work in the background. */
.hero-slide-biolife.active::before,
.hero-slide-biolife.hero-neighbor::before {
  animation: biolifeAmbientBackground 15s ease-in-out infinite alternate;
}

/* A second, extremely soft drift on the existing decorative halo prevents the
   movement from looking like one flat image sliding left/right. */
.hero-slide-biolife.active .hero-grid-biolife::before,
.hero-slide-biolife.hero-neighbor .hero-grid-biolife::before {
  animation: biolifeAmbientHalo 11s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes biolifeAmbientBackground {
  0% {
    transform: translate3d(-1.8%, -1%, 0) scale(1.06);
  }
  48% {
    transform: translate3d(1.05%, 1.45%, 0) scale(1.078);
  }
  100% {
    transform: translate3d(2.15%, -.75%, 0) scale(1.064);
  }
}

@keyframes biolifeAmbientHalo {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: .82;
  }
  100% {
    transform: translate3d(26px, 17px, 0) scale(1.06);
    opacity: 1;
  }
}
.hero-slide-biolife .hero-grid-biolife {
  position: relative;
  min-height: 690px;
  grid-template-columns: minmax(0, .86fr) minmax(520px, 1.14fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 58px;
  row-gap: 24px;
  padding-top: 54px;
  padding-bottom: 98px;
}
.hero-slide-biolife .hero-grid-biolife::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 340px;
  height: 340px;
  left: -225px;
  top: -205px;
  border-radius: 50%;
  background: rgba(75, 159, 69, .065);
  pointer-events: none;
}
.hero-slide-biolife .hero-content,
.hero-slide-biolife .hero-visual-biolife,
.hero-slide-biolife .hero-metrics-biolife {
  position: relative;
  z-index: 1;
}
.hero-slide-biolife .hero-content {
  align-self: center;
  padding: 12px 0 10px;
}
.hero-slide-biolife .eyebrow {
  color: #078235;
  font-weight: 850;
  letter-spacing: 1.85px;
}
.hero-slide-biolife .hero-content h1 {
  margin: 18px 0 22px;
  max-width: 590px;
  color: #07532b;
  font-size: clamp(68px, 6.25vw, 102px);
  line-height: .98;
  letter-spacing: -5px;
}
.hero-slide-biolife .hero-content h1 .hero-title-main,
.hero-slide-biolife .hero-content h1 > span:last-child {
  color: inherit;
}
.hero-slide-biolife .hero-content > p {
  max-width: 585px;
  color: #455b53;
  font-size: 17px;
  line-height: 1.78;
}
.hero-slide-biolife .hero-actions {
  gap: 16px;
  margin-top: 30px;
}
.hero-slide-biolife .hero-actions .btn {
  min-height: 58px;
  padding-inline: 28px;
  border-radius: 15px;
}
.hero-slide-biolife .hero-actions .btn-primary {
  box-shadow: 0 14px 30px rgba(10, 135, 55, .18);
}

/* Product photography uses the same rounded, green framed composition as the
   Admin preview rather than the generic oval/blob styles used by other slides. */
.hero-slide-biolife .hero-visual-biolife {
  min-height: 480px;
  display: grid;
  place-items: center;
  overflow: visible;
}
.hero-slide-biolife .hero-visual-biolife::before {
  display: none;
}
.hero-slide-biolife .hero-visual-biolife .hero-card-main {
  width: min(720px, 100%);
  max-width: none;
  position: relative;
  padding: 0;
  transform: none;
  filter: drop-shadow(0 24px 42px rgba(39, 94, 42, .16));
  isolation: isolate;
}
.hero-slide-biolife .hero-visual-biolife .hero-card-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14px -16px -15px 10px;
  border: 2px solid rgba(73, 146, 66, .22);
  border-radius: 38% 11% 34% 13% / 19% 18% 22% 19%;
  transform: rotate(-1.1deg);
  pointer-events: none;
}
.hero-slide-biolife .hero-visual-biolife .hero-card-main img {
  display: block;
  width: 100%;
  height: clamp(385px, 30vw, 455px);
  max-height: none;
  object-fit: cover;
  object-position: 50% 52%;
  border-radius: 48px 48px 44px 44px;
  clip-path: none;
  transform: none;
  filter: none;
  background: #d9eed0;
}
.hero-slide-biolife .hero-visual-biolife .floating-card {
  z-index: 6;
  max-width: 225px;
  border-color: rgba(205, 226, 205, .92);
  box-shadow: 0 16px 38px rgba(32, 81, 40, .13);
}
.hero-slide-biolife .hero-visual-biolife .card-delivery {
  left: 3%;
  top: 7%;
}
.hero-slide-biolife .hero-visual-biolife .card-support {
  right: 3%;
  bottom: 7%;
}

/* The approved Biolife sample has one full-width feature band below copy and
   photography. These values still come from the ordinary editable metric
   fields in the banner form. */
.hero-slide-biolife .hero-metrics-biolife {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px 22px;
  border: 1px solid rgba(163, 198, 164, .42);
  border-radius: 20px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 15px 36px rgba(37, 82, 42, .055);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  align-items: stretch;
  backdrop-filter: blur(8px);
}
.hero-slide-biolife .hero-metrics-biolife > div,
.hero-slide-biolife .hero-metrics-biolife > div + div {
  position: relative;
  min-width: 0;
  padding: 7px 28px;
  border: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 14px;
  align-items: center;
}
.hero-slide-biolife .hero-metrics-biolife > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(153, 182, 157, .35);
}
.hero-slide-biolife .hero-metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #087d32;
  background: #eff8ef;
}
.hero-slide-biolife .hero-metric-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-slide-biolife .hero-metric-copy {
  display: block;
  min-width: 0;
}
.hero-slide-biolife .hero-metrics-biolife .hero-metric-copy strong {
  min-height: 0;
  display: block;
  color: #0a5f2d;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -.15px;
}
.hero-slide-biolife .hero-metrics-biolife .hero-metric-copy > span {
  min-height: 0;
  margin-top: 3px;
  display: block;
  color: #596d64;
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .hero-slide-biolife .hero-grid-biolife {
    grid-template-columns: minmax(0, .9fr) minmax(470px, 1.1fr);
    column-gap: 40px;
  }
  .hero-slide-biolife .hero-content h1 {
    font-size: clamp(62px, 6vw, 88px);
  }
  .hero-slide-biolife .hero-visual-biolife .hero-card-main img {
    height: 410px;
  }
}

@media (max-width: 1024px) {
  .hero-slide-biolife .hero-grid-biolife {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 28px;
    padding-top: 64px;
    padding-bottom: 100px;
  }
  .hero-slide-biolife .hero-content {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }
  .hero-slide-biolife .hero-content h1,
  .hero-slide-biolife .hero-content > p {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-slide-biolife .hero-content h1 {
    font-size: clamp(62px, 9vw, 88px);
  }
  .hero-slide-biolife .hero-actions {
    justify-content: center;
  }
  .hero-slide-biolife .hero-visual-biolife {
    min-height: 430px;
    width: min(760px, 100%);
    margin: 0 auto;
  }
  .hero-slide-biolife .hero-visual-biolife .hero-card-main {
    width: min(700px, 94%);
  }
  .hero-slide-biolife .hero-visual-biolife .hero-card-main img {
    height: 420px;
  }
  .hero-slide-biolife .hero-metrics-biolife {
    grid-column: 1;
  }
}

@media (max-width: 760px) {
  .hero-slide-biolife .hero-grid-biolife {
    gap: 22px;
    padding-top: 48px;
    padding-bottom: 72px;
  }
  .hero-slide-biolife .hero-content h1 {
    margin-top: 14px;
    margin-bottom: 16px;
    font-size: clamp(52px, 17vw, 72px);
    letter-spacing: -3.5px;
  }
  .hero-slide-biolife .hero-content > p {
    font-size: 15px;
    line-height: 1.7;
  }
  .hero-slide-biolife .hero-actions .btn {
    min-height: 52px;
  }
  .hero-slide-biolife .hero-visual-biolife {
    min-height: 310px;
  }
  .hero-slide-biolife .hero-visual-biolife .hero-card-main {
    width: 100%;
  }
  .hero-slide-biolife .hero-visual-biolife .hero-card-main::before {
    inset: -7px -5px -9px 5px;
    border-radius: 32px;
  }
  .hero-slide-biolife .hero-visual-biolife .hero-card-main img {
    height: clamp(245px, 64vw, 330px);
    border-radius: 30px;
  }
  .hero-slide-biolife .hero-visual-biolife .floating-card {
    max-width: 165px;
    padding: 9px 10px;
  }
  .hero-slide-biolife .hero-metrics-biolife {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px 15px;
    text-align: left;
  }
  .hero-slide-biolife .hero-metrics-biolife > div,
  .hero-slide-biolife .hero-metrics-biolife > div + div {
    min-height: 72px;
    padding: 12px 6px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    display: grid;
    justify-content: initial;
  }
  .hero-slide-biolife .hero-metrics-biolife > div + div::before {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .hero-slide-biolife .hero-metric-icon {
    width: 40px;
    height: 40px;
  }
}


/* 2.0.28 - Biolife Petri sample: same editable Biolife form, with a softer
   organic image frame matching the Petri-dish quick template. */
.hero-slide-biolife-petri .hero-visual-biolife .hero-card-main {
  width: min(760px, 100%);
}
.hero-slide-biolife-petri .hero-visual-biolife .hero-card-main::before {
  inset: -12px -18px -15px 8px;
  border-radius: 42% 18% 38% 20% / 30% 25% 28% 24%;
  transform: rotate(-1.25deg);
}
.hero-slide-biolife-petri .hero-visual-biolife .hero-card-main img {
  height: clamp(390px, 31vw, 465px);
  object-position: 50% 52%;
  border-radius: 48% 20% 42% 22% / 32% 26% 30% 25%;
}
.hero-slide-biolife-petri .hero-visual-biolife .card-delivery {
  left: -2%;
  top: 5%;
}
.hero-slide-biolife-petri .hero-visual-biolife .card-support {
  right: 0;
  bottom: 4%;
}
@media (max-width: 760px) {
  .hero-slide-biolife-petri .hero-visual-biolife .hero-card-main img {
    height: clamp(245px, 66vw, 335px);
    border-radius: 38px 38px 48px 38px;
  }
  .hero-slide-biolife-petri .hero-visual-biolife .hero-card-main::before {
    border-radius: 42px;
  }
}

/* 2.0.41 - Visible Biolife ambient motion.
   v2.0.40 moved a very faint SVG by only a few percent, which was technically
   animated but almost impossible to perceive on the white hero background.
   This dedicated layer adds clearly visible, slow microbiology-inspired
   shapes behind all editable banner content. */
.hero-slide-biolife > .hero-grid-biolife {
  z-index: 2;
}

.biolife-motion-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
}

.biolife-motion-layer::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  right: -250px;
  top: -290px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 40%, rgba(108, 185, 100, .18) 0 9%, rgba(108, 185, 100, .07) 25%, transparent 63%),
    radial-gradient(circle at 63% 65%, rgba(139, 205, 181, .18), transparent 54%);
  transform: translate3d(0, 0, 0) scale(1);
}

.biolife-motion-layer::after {
  content: "";
  position: absolute;
  width: 660px;
  height: 420px;
  left: -160px;
  bottom: -190px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(83, 167, 83, .15), rgba(126, 195, 143, .06) 45%, transparent 72%);
  transform: translate3d(0, 0, 0) rotate(-8deg);
}

.hero-slide-biolife.active .biolife-motion-layer::before,
.hero-slide-biolife.hero-neighbor .biolife-motion-layer::before {
  animation: biolifeGlowDrift 9s ease-in-out infinite alternate;
}

.hero-slide-biolife.active .biolife-motion-layer::after,
.hero-slide-biolife.hero-neighbor .biolife-motion-layer::after {
  animation: biolifeGlowDriftBottom 11s ease-in-out infinite alternate;
}

.biolife-motion-orb,
.biolife-motion-cell {
  position: absolute;
  display: block;
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.biolife-motion-orb {
  border: 2px solid rgba(69, 151, 70, .22);
  background:
    radial-gradient(circle at 36% 34%, rgba(255,255,255,.72) 0 7%, transparent 8%),
    radial-gradient(circle at 62% 64%, rgba(85, 165, 86, .16) 0 9%, transparent 10%),
    radial-gradient(circle at center, rgba(126, 194, 126, .08), rgba(255,255,255,.10) 64%, transparent 66%);
  box-shadow: inset 0 0 0 9px rgba(123, 188, 117, .035), 0 12px 40px rgba(58, 126, 58, .07);
}

.biolife-motion-orb-a {
  width: 190px;
  height: 190px;
  left: 4%;
  top: 10%;
}
.biolife-motion-orb-b {
  width: 128px;
  height: 128px;
  left: 43%;
  top: 9%;
  opacity: .8;
}
.biolife-motion-orb-c {
  width: 156px;
  height: 156px;
  right: 6%;
  bottom: 14%;
  opacity: .72;
}

.biolife-motion-cell {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(86, 167, 88, .30) 36%, rgba(72, 145, 74, .12) 67%, transparent 70%);
  box-shadow: 0 0 0 8px rgba(94, 173, 96, .035);
  opacity: .86;
}
.biolife-motion-cell-a { left: 17%; top: 61%; width: 21px; height: 21px; }
.biolife-motion-cell-b { left: 34%; top: 30%; width: 14px; height: 14px; opacity: .70; }
.biolife-motion-cell-c { left: 58%; top: 69%; width: 19px; height: 19px; opacity: .72; }
.biolife-motion-cell-d { right: 18%; top: 20%; width: 16px; height: 16px; opacity: .66; }
.biolife-motion-cell-e { right: 28%; bottom: 12%; width: 12px; height: 12px; opacity: .72; }

.hero-slide-biolife.active .biolife-motion-orb-a,
.hero-slide-biolife.hero-neighbor .biolife-motion-orb-a {
  animation: biolifeOrbA 8.5s ease-in-out infinite alternate;
}
.hero-slide-biolife.active .biolife-motion-orb-b,
.hero-slide-biolife.hero-neighbor .biolife-motion-orb-b {
  animation: biolifeOrbB 10s ease-in-out infinite alternate;
}
.hero-slide-biolife.active .biolife-motion-orb-c,
.hero-slide-biolife.hero-neighbor .biolife-motion-orb-c {
  animation: biolifeOrbC 9.3s ease-in-out infinite alternate;
}
.hero-slide-biolife.active .biolife-motion-cell-a,
.hero-slide-biolife.hero-neighbor .biolife-motion-cell-a,
.hero-slide-biolife.active .biolife-motion-cell-d,
.hero-slide-biolife.hero-neighbor .biolife-motion-cell-d {
  animation: biolifeCellFloatA 6.8s ease-in-out infinite alternate;
}
.hero-slide-biolife.active .biolife-motion-cell-b,
.hero-slide-biolife.hero-neighbor .biolife-motion-cell-b,
.hero-slide-biolife.active .biolife-motion-cell-e,
.hero-slide-biolife.hero-neighbor .biolife-motion-cell-e {
  animation: biolifeCellFloatB 7.7s ease-in-out infinite alternate;
}
.hero-slide-biolife.active .biolife-motion-cell-c,
.hero-slide-biolife.hero-neighbor .biolife-motion-cell-c {
  animation: biolifeCellFloatC 6.2s ease-in-out infinite alternate;
}

@keyframes biolifeGlowDrift {
  0% { transform: translate3d(-24px, 8px, 0) scale(.96); }
  50% { transform: translate3d(34px, 38px, 0) scale(1.06); }
  100% { transform: translate3d(-8px, 72px, 0) scale(1.01); }
}
@keyframes biolifeGlowDriftBottom {
  0% { transform: translate3d(-22px, 10px, 0) rotate(-8deg) scale(.98); }
  100% { transform: translate3d(96px, -42px, 0) rotate(2deg) scale(1.07); }
}
@keyframes biolifeOrbA {
  0% { transform: translate3d(-26px, 2px, 0) rotate(-5deg) scale(.97); }
  100% { transform: translate3d(74px, 46px, 0) rotate(7deg) scale(1.06); }
}
@keyframes biolifeOrbB {
  0% { transform: translate3d(0, -18px, 0) scale(.94); }
  100% { transform: translate3d(-62px, 58px, 0) scale(1.08); }
}
@keyframes biolifeOrbC {
  0% { transform: translate3d(24px, 28px, 0) scale(1.02); }
  100% { transform: translate3d(-68px, -54px, 0) scale(.94); }
}
@keyframes biolifeCellFloatA {
  0% { transform: translate3d(-8px, 18px, 0) scale(.88); }
  100% { transform: translate3d(56px, -44px, 0) scale(1.22); }
}
@keyframes biolifeCellFloatB {
  0% { transform: translate3d(22px, -14px, 0) scale(1.08); }
  100% { transform: translate3d(-48px, 50px, 0) scale(.84); }
}
@keyframes biolifeCellFloatC {
  0% { transform: translate3d(-14px, -10px, 0) scale(.86); }
  100% { transform: translate3d(68px, 34px, 0) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide-biolife .biolife-motion-layer::before,
  .hero-slide-biolife .biolife-motion-layer::after,
  .hero-slide-biolife .biolife-motion-orb,
  .hero-slide-biolife .biolife-motion-cell {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .biolife-motion-orb-a { width: 125px; height: 125px; left: -5%; top: 12%; }
  .biolife-motion-orb-b { width: 96px; height: 96px; left: 54%; top: 7%; }
  .biolife-motion-orb-c { width: 112px; height: 112px; right: -5%; bottom: 24%; }
  .biolife-motion-layer::before { width: 480px; height: 480px; right: -260px; top: -180px; }
  .biolife-motion-layer::after { width: 430px; height: 300px; left: -190px; bottom: -130px; }
}

/* 2.0.42 - Real MP4 background motion for Biolife banners.
   Previous CSS-only ambient motion could be disabled by reduced-motion OS
   settings or be too subtle against the white hero. This layer uses an actual
   local, muted, looping H.264 video and keeps all CMS text/artwork above it. */
.hero-slide-biolife::before {
  display: none;
}
.hero-slide-biolife .biolife-motion-layer {
  display: none;
}
.hero-slide-biolife > .hero-grid-biolife {
  position: relative;
  z-index: 3;
}
.biolife-video-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 86% 20%, rgba(93, 173, 91, .15), transparent 36%),
    linear-gradient(112deg, #fff 0 37%, #fbfefb 62%, #eef8eb 100%);
}
.biolife-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: .90;
  filter: saturate(1.12) contrast(1.03);
  transform: scale(1.015);
  pointer-events: none;
}
/* Protect copy readability without hiding the moving shapes. */
.biolife-video-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.16) 34%, rgba(255,255,255,.02) 62%, transparent 100%),
    radial-gradient(circle at 47% 50%, transparent 0 42%, rgba(255,255,255,.035) 72%, rgba(255,255,255,.08) 100%);
  pointer-events: none;
}
@media (max-width: 760px) {
  .biolife-bg-video {
    object-position: 58% center;
    opacity: .82;
  }
  .biolife-video-veil {
    background: rgba(255,255,255,.16);
  }
}


/* 2.0.43 - One persistent video canvas behind every hero slide.
   The video never moves or restarts when the carousel changes; only the
   foreground banner panels translate across it. */
.hero#homeHero {
  isolation: isolate;
  background: #eef8ef;
}
.hero#homeHero::before {
  display: none;
}
.hero-fixed-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(112deg, #f7fcf8 0%, #edf8ee 100%);
}
.hero-fixed-video .biolife-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .98;
  filter: saturate(1.16) contrast(1.05);
  transform: scale(1.02);
}
.hero-fixed-video-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.54) 38%, rgba(255,255,255,.16) 68%, rgba(255,255,255,.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(240,250,241,.16));
}
.hero#homeHero .hero-slider {
  z-index: 2;
  background: transparent;
}
/* All CMS banners are now foreground panels. Their own full-width background
   is removed so the fixed video remains visible through every transition. */
.hero#homeHero .hero-slide,
.hero#homeHero .hero-slide-biolife {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}
.hero#homeHero .hero-slide::before,
.hero#homeHero .hero-slide-biolife::before,
.hero#homeHero .hero-slide .biolife-video-layer,
.hero#homeHero .hero-slide .biolife-motion-layer {
  display: none !important;
}
/* A subtle translucent surface makes each foreground banner read as a
   floating composition while still showing the moving video behind it. */
.hero#homeHero .hero-slide > .hero-grid {
  position: relative;
  z-index: 3;
}
.hero#homeHero .hero-slide > .hero-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 26px -18px 34px;
  border-radius: 34px;
  background: linear-gradient(115deg, rgba(255,255,255,.66), rgba(255,255,255,.20));
  border: 1px solid rgba(255,255,255,.54);
  box-shadow: 0 24px 70px rgba(31,92,57,.08);
  pointer-events: none;
}
/* Make the foreground slide motion visibly sweep across the fixed movie. */
.hero-slider.hero-animating .hero-slide.active,
.hero-slider.hero-animating .hero-slide.hero-neighbor {
  transition: transform .82s cubic-bezier(.18,.88,.22,1);
}
.hero-slider.hero-snapping .hero-slide.active,
.hero-slider.hero-snapping .hero-slide.hero-neighbor {
  transition: transform .46s cubic-bezier(.2,.82,.2,1);
}
@media (max-width: 900px) {
  .hero-fixed-video .biolife-bg-video { object-position: 58% center; }
  .hero-fixed-video-veil { background: rgba(255,255,255,.46); }
  .hero#homeHero .hero-slide > .hero-grid::before {
    inset: 20px 10px 28px;
    border-radius: 26px;
    background: rgba(255,255,255,.50);
  }
}
@media (max-width: 560px) {
  .hero-fixed-video .biolife-bg-video { opacity: .9; object-position: 62% center; }
  .hero-fixed-video-veil { background: rgba(255,255,255,.54); }
  .hero#homeHero .hero-slide > .hero-grid::before {
    inset: 10px 6px 16px;
    border-radius: 22px;
  }
}

/* 2.0.48 - Product cards open a dedicated product detail page. */
.product-card-link{cursor:pointer}
.product-card-link:focus-visible{outline:3px solid rgba(8,116,249,.25);outline-offset:4px}
.product-view-detail{display:inline-flex;align-items:center;align-self:flex-start;gap:7px;margin-top:13px;color:var(--primary);font-size:12px;font-weight:800;line-height:1.2}
.product-view-detail span{transition:transform .2s ease}
.product-card-link:hover .product-view-detail span{transform:translateX(4px)}

/* 2.0.64 - Keep the public product detail link aligned to the bottom-left of every card. */
.product-grid > .product-card .product-info{min-height:0}
.product-grid > .product-card .product-view-detail{min-height:18px}


/* 2.0.67 - Prevent the static HTML fallback banner from flashing on reload.
   The fixed background video can remain visible while the CMS/API banner data
   loads, but foreground banner content is revealed only after the real slider
   has been rendered. */
.hero#homeHero.hero-loading .hero-slider,
.hero#homeHero.hero-loading .hero-slider-control,
.hero#homeHero.hero-loading .hero-slider-dots {
  visibility: hidden !important;
}
.hero#homeHero.hero-loading .hero-slider {
  pointer-events: none;
}


/* 2.0.68 - No hard-coded hero banner during startup. The empty wait element
   preserves the hero height while only the persistent video is visible; the
   CMS slider replaces it after /api/banners finishes loading. */
.hero#homeHero .hero-video-wait {
  min-height: 630px;
  width: 100%;
  pointer-events: none;
}
.hero#homeHero.hero-video-only .hero-slider {
  visibility: visible !important;
  pointer-events: none;
}
.hero#homeHero.hero-video-only .hero-slider-control,
.hero#homeHero.hero-video-only .hero-slider-dots {
  display: none !important;
}
@media (max-width: 1024px) {
  .hero#homeHero .hero-video-wait { min-height: 760px; }
}
@media (max-width: 760px) {
  .hero#homeHero .hero-video-wait { min-height: 620px; }
}