/*
Theme Name: WFF8 Labs
Theme URI: https://wff8.shop/
Author: WFF8
Description: A custom WooCommerce storefront for research-material catalogues.
Version: 1.0.0
Text Domain: wff8-labs
*/

:root {
  --ink: #10263d;
  --ink-2: #173653;
  --blue: #2587d8;
  --blue-soft: #eaf5ff;
  --mist: #f5f8fb;
  --line: #dbe4ec;
  --paper: #ffffff;
  --copy: #546576;
  --white: #ffffff;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(16, 38, 61, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { clip: auto; width: auto; height: auto; z-index: 1000; padding: 12px 18px; margin: 0; left: 16px; top: 16px; background: var(--white); color: var(--ink); border-radius: 7px; box-shadow: var(--shadow); }

.notice-strip { min-height: 47px; display: flex; align-items: center; justify-content: center; padding: 10px 24px; background: var(--ink); color: #f8fbff; font-weight: 800; font-size: 14px; text-align: center; letter-spacing: .01em; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(219,228,236,.9); backdrop-filter: blur(12px); }
.header-inner { min-height: 98px; display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr); align-items: center; gap: 28px; max-width: 1440px; padding: 0 30px; margin: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark { position: relative; width: 44px; height: 44px; border: 3px solid var(--blue); border-radius: 13px; transform: rotate(30deg); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; border-radius: 50%; background: var(--blue); }
.brand-mark::before { width: 9px; height: 9px; left: 14px; top: 14px; }
.brand-mark::after { width: 5px; height: 5px; left: 5px; top: 5px; box-shadow: 26px 0 0 var(--blue), 0 26px 0 var(--blue), 26px 26px 0 var(--blue); }
.brand-word { display: grid; line-height: 1; letter-spacing: .11em; font-family: Rubik, Arial, sans-serif; font-size: 21px; font-weight: 800; }
.brand-word small { margin-top: 4px; font-size: 9px; letter-spacing: .31em; color: var(--blue); }
.primary-nav ul, .footer-nav ul { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.primary-nav a { color: #647384; font-weight: 800; transition: color .2s ease; }
.primary-nav .current-menu-item a, .primary-nav a:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.button, .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 900; line-height: 1.15; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.button:hover, .wp-element-button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { color: var(--white); background: var(--blue); border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(37,135,216,.25); }
.button--light { background: transparent; color: var(--ink); border-color: var(--ink); }
.button--light:hover { color: var(--ink); background: var(--blue-soft); }
.whatsapp-button { gap: 8px; }
.whatsapp-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 44px; color: var(--ink); }
.icon-link svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-count { position: absolute; top: 5px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 50%; background: #e05c6e; color: var(--white); font-size: 10px; font-weight: 900; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { content: ""; display: block; width: 24px; height: 2px; margin: 5px auto; background: currentColor; transition: transform .2s ease; }

.content-area { min-height: 56vh; }
.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.section { padding: 94px 0; }
.section--mist { background: var(--mist); }
.eyebrow { margin: 0 0 13px; color: var(--blue); font-weight: 900; font-size: 12px; letter-spacing: .17em; text-transform: uppercase; }
h1, h2, h3, h4 { margin: 0; font-family: Rubik, Arial, sans-serif; color: var(--ink); line-height: 1.04; letter-spacing: -.035em; }
h1 { font-size: clamp(42px, 5.2vw, 76px); }
h2 { font-size: clamp(31px, 3.6vw, 50px); }
h3 { font-size: 21px; }
.lead { max-width: 620px; font-size: 19px; color: var(--copy); }

.hero { min-height: 590px; overflow: hidden; position: relative; display: flex; align-items: stretch; background: linear-gradient(110deg, #eef5fa 0%, #f8fbfd 49%, #e2edf5 100%); }
.hero::before { content: ""; position: absolute; width: 560px; height: 560px; right: -160px; top: -110px; background: radial-gradient(circle at 40% 40%, rgba(37,135,216,.20), transparent 60%); filter: blur(3px); }
.hero-grid { width: min(1440px, 100%); margin: 0 auto; padding: 86px 30px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); align-items: center; gap: 45px; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { max-width: 670px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 27px; }
.hero-copy .lead { margin: 0; font-size: 18px; }
.hero-visual { position: relative; min-height: 420px; }
.vial { position: absolute; bottom: 10px; border: 9px solid rgba(255,255,255,.85); border-radius: 27px 27px 22px 22px; background: linear-gradient(130deg, rgba(255,255,255,.74), rgba(183,201,215,.60)); box-shadow: inset -17px 0 21px rgba(43,68,86,.14), 0 28px 38px rgba(24,49,70,.16); }
.vial::before { content: ""; position: absolute; height: 48px; left: -12px; right: -12px; top: -41px; border: 8px solid #e5ebef; border-bottom-width: 11px; border-radius: 12px 12px 6px 6px; background: linear-gradient(#d2dbe1, #f8fbfc 45%, #aebbc4); box-shadow: 0 2px 4px rgba(0,0,0,.12); }
.vial-label { position: absolute; top: 31%; left: 11%; right: 11%; min-height: 42%; padding: 15px 12px; border-radius: 5px; background: linear-gradient(160deg, #1d3b5b, #091b2e); color: white; font-family: Rubik, Arial, sans-serif; text-align: center; box-shadow: inset 0 0 0 1px rgba(102,190,255,.35); }
.vial-label b { display: block; color: #63c7ff; font-size: 11px; letter-spacing: .17em; }
.vial-label strong { display: block; margin-top: 21px; font-size: clamp(14px, 2vw, 25px); letter-spacing: -.04em; }
.vial-label span { display: block; margin-top: 7px; font-size: 8px; line-height: 1.35; color: #d2e5f2; }
.vial--main { width: 225px; height: 292px; right: 24%; z-index: 3; }
.vial--left { width: 146px; height: 192px; right: 57%; opacity: .88; z-index: 2; transform: rotate(-4deg); }
.vial--right { width: 175px; height: 226px; right: -1%; z-index: 1; transform: rotate(4deg); }
.vial--left .vial-label { padding: 8px; }.vial--right .vial-label { padding: 10px; }
.vial--left .vial-label strong, .vial--right .vial-label strong { margin-top: 13px; }
.hero-disclaimer { margin: 28px 0 0; color: #718090; font-size: 13px; }

.trust-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.trust-item { display: flex; gap: 14px; align-items: center; min-height: 112px; padding: 20px 28px; border-right: 1px solid var(--line); }
.trust-item:last-child { border-right: 0; }
.trust-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-weight: 900; }
.trust-item strong, .trust-item span { display: block; }
.trust-item strong { font-family: Rubik, Arial, sans-serif; font-size: 15px; }
.trust-item span { margin-top: 2px; color: var(--copy); font-size: 13px; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 40px; }
.section-heading .lead { margin: 13px 0 0; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.product-card { overflow: hidden; position: relative; min-height: 355px; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.product-card:hover { transform: translateY(-5px); border-color: #c5d9e9; box-shadow: var(--shadow); }
.product-card__media { height: 202px; display: grid; place-items: center; margin: -25px -25px 22px; background: linear-gradient(135deg, #eff6fa, #ffffff); }
.mini-vial { position: relative; width: 95px; height: 132px; border: 5px solid #f9fbfc; border-radius: 15px; background: linear-gradient(130deg, #ffffff, #becbd4); box-shadow: inset -9px 0 12px rgba(36,59,76,.15), 0 14px 19px rgba(22,46,66,.14); }
.mini-vial::before { content: ""; position: absolute; top: -24px; left: -8px; right: -8px; height: 31px; border: 5px solid #e5ecef; border-radius: 8px 8px 3px 3px; background: linear-gradient(#bcc9d1,#f9fbfc 55%,#b6c1c8); }
.mini-vial::after { content: attr(data-label); position: absolute; top: 35px; left: 8px; right: 8px; min-height: 55px; padding: 8px 2px; border-radius: 3px; background: var(--ink); color: #e8f6ff; font-size: 10px; font-weight: 900; line-height: 1.25; text-align: center; }
.product-card .product-category { color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.product-card h3 { margin: 8px 0 9px; font-size: 21px; }
.product-card .price { color: var(--copy); font-family: Rubik, Arial, sans-serif; font-weight: 700; }
.product-card .product-link { position: absolute; inset: 0; z-index: 1; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 58px; align-items: center; }
.feature-list { display: grid; gap: 24px; margin: 31px 0 0; }
.feature { display: grid; grid-template-columns: 46px 1fr; gap: 14px; }
.feature-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-family: Rubik, Arial, sans-serif; font-size: 13px; font-weight: 800; }
.feature h3 { font-size: 18px; }.feature p { margin: 5px 0 0; color: var(--copy); }
.certificate-panel { min-height: 420px; position: relative; display: grid; place-items: center; overflow: hidden; padding: 36px; border-radius: 24px; background: linear-gradient(145deg, #dbeaf5, #f7fbfd); }
.certificate { width: min(320px, 100%); min-height: 345px; padding: 30px; border: 1px solid #b7cad9; background: rgba(255,255,255,.9); box-shadow: 0 22px 38px rgba(26,52,73,.17); transform: rotate(3deg); }
.certificate::before { content: "WFF8"; display: block; margin-bottom: 30px; color: var(--blue); font-family: Rubik, Arial, sans-serif; font-size: 23px; font-weight: 900; letter-spacing: .13em; }
.certificate h3 { font-size: 27px; }.certificate p { color: var(--copy); font-size: 13px; }.certificate-line { height: 1px; margin: 14px 0; background: var(--line); }.certificate-seal { width: 58px; height: 58px; display: grid; place-items: center; margin-top: 24px; border: 2px solid var(--blue); border-radius: 50%; color: var(--blue); font-size: 9px; font-weight: 900; text-align: center; }

.category-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.category-card { position: relative; min-height: 220px; display: flex; align-items: end; padding: 26px; overflow: hidden; border-radius: var(--radius); background: linear-gradient(130deg, #183653, #2b76ad); color: var(--white); }
.category-card:nth-child(2) { background: linear-gradient(130deg, #395f79, #6aa3c2); }.category-card:nth-child(3) { background: linear-gradient(130deg, #142a42, #4a7793); }
.category-card::before { content: ""; position: absolute; width: 150px; height: 150px; right: -33px; top: -36px; border: 2px solid rgba(255,255,255,.34); border-radius: 50%; box-shadow: -28px 35px 0 -12px rgba(255,255,255,.14), -70px 75px 0 -28px rgba(255,255,255,.18); }
.category-card h3 { position: relative; color: var(--white); font-size: 27px; }.category-card span { position: relative; display: block; margin-top: 6px; color: #e5f5ff; font-weight: 800; }

.cta-panel { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: 50px 56px; border-radius: 24px; background: var(--ink); color: var(--white); }.cta-panel h2 { color: var(--white); max-width: 680px; }.cta-panel .button { background: var(--white); color: var(--ink); border-color: var(--white); }.cta-panel .button:hover { color: var(--white); background: var(--blue); border-color: var(--blue); }

.page-hero { padding: 82px 0 70px; background: linear-gradient(120deg, #eef5fa, #fff); border-bottom: 1px solid var(--line); }.page-hero .lead { margin: 18px 0 0; }
.page-body { padding: 72px 0 96px; }.entry-content { max-width: 830px; color: var(--copy); }.entry-content h2, .entry-content h3 { margin: 38px 0 14px; color: var(--ink); }.entry-content p, .entry-content ul { margin: 0 0 18px; }.entry-content li { margin-bottom: 7px; }

.shop-shell { padding: 58px 0 100px; }.woocommerce-result-count { color: var(--copy); }.woocommerce .woocommerce-ordering select { min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: white; }.woocommerce ul.products { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; margin: 36px 0 0; }.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }.woocommerce ul.products li.product { width: auto; float: none; margin: 0; padding: 0 0 22px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-align: left; transition: transform .2s ease, box-shadow .2s ease; }.woocommerce ul.products li.product:hover { transform: translateY(-5px); box-shadow: var(--shadow); }.woocommerce ul.products li.product a img { height: 250px; object-fit: contain; margin: 0 0 18px; padding: 28px; background: linear-gradient(135deg,#eff6fa,#fff); }.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0 20px; color: var(--ink); font-family: Rubik, Arial, sans-serif; font-size: 19px; }.woocommerce ul.products li.product .price { display: block; padding: 0 20px; color: var(--copy); font-weight: 800; }.woocommerce ul.products li.product .button { margin: 16px 20px 0; min-height: 41px; padding: 9px 16px; font-size: 13px; }
.woocommerce div.product { padding: 65px 0 100px; }.woocommerce div.product div.images img { border-radius: var(--radius); background: var(--mist); }.woocommerce div.product .product_title { font-size: clamp(36px, 4vw, 56px); }.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--blue); font-family: Rubik, Arial, sans-serif; font-size: 23px; font-weight: 800; }.woocommerce div.product form.cart { margin: 30px 0; }.woocommerce div.product form.cart .button { margin-left: 10px; }.woocommerce .quantity .qty { min-height: 48px; width: 62px; border: 1px solid var(--line); border-radius: 8px; }.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; border-bottom: 1px solid var(--line); }.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom: 0; }.woocommerce div.product .woocommerce-tabs ul.tabs li { border: 0; border-radius: 0; background: none; }.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--blue); background: none; }.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--ink); }.woocommerce-message, .woocommerce-info { border-top-color: var(--blue); background: var(--blue-soft); }.woocommerce-message::before, .woocommerce-info::before { color: var(--blue); }
.woocommerce-cart-form, .cart-collaterals, .woocommerce form.checkout, .woocommerce-MyAccount-content { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }.woocommerce table.shop_table { border-color: var(--line); border-radius: 8px; }.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { width: 100%; }.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { min-height: 48px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 7px; background: white; }.woocommerce-MyAccount-navigation { margin-bottom: 25px; }.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }.woocommerce-MyAccount-navigation li:last-child { border: 0; }.woocommerce-MyAccount-navigation a { display: block; padding: 13px 18px; font-weight: 800; }.woocommerce-MyAccount-navigation .is-active a { background: var(--blue-soft); color: var(--ink); }

.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; }.contact-details { display: grid; gap: 20px; margin-top: 34px; }.contact-detail { padding: 19px; border: 1px solid var(--line); border-radius: 12px; }.contact-detail strong, .contact-detail span { display: block; }.contact-detail span { color: var(--copy); }.wff8-form { display: grid; gap: 16px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--mist); }.wff8-form label { font-size: 13px; font-weight: 900; }.wff8-form input, .wff8-form textarea { width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: white; }.wff8-form textarea { min-height: 135px; resize: vertical; }

.site-footer { padding: 64px 0 25px; background: var(--ink); color: #dbe8f2; }.footer-grid { display: grid; grid-template-columns: 1.35fr .8fr .8fr; gap: 44px; padding-bottom: 52px; }.site-footer .brand { color: var(--white); }.site-footer .brand-word small { color: #70c8ff; }.footer-copy { max-width: 390px; margin: 20px 0 0; color: #b8c9d7; }.footer-title { color: white; font-family: Rubik,Arial,sans-serif; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }.footer-nav ul { display: grid; gap: 11px; margin-top: 18px; }.footer-nav a { color: #b8c9d7; font-weight: 700; }.footer-nav a:hover { color: white; }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.15); color: #9fb2c2; font-size: 13px; }.footer-bottom a { text-decoration: underline; }

:focus-visible { outline: 3px solid #73c8ff; outline-offset: 3px; }
@media (max-width: 1024px) { body { overflow-x: hidden; }.header-inner { grid-template-columns: minmax(0, 1fr) auto; min-height: 80px; }.primary-nav { position: fixed; inset: 127px 0 auto; max-height: 0; overflow: hidden; background: white; border-bottom: 1px solid var(--line); transition: max-height .25s ease; }.menu-open .primary-nav { max-height: 380px; }.primary-nav ul { display: grid; gap: 0; padding: 10px 24px 20px; }.primary-nav a { display: block; padding: 14px 0; }.menu-toggle { display: inline-block; }.hero-grid { grid-template-columns: 1fr 1fr; padding: 70px 32px; }.product-grid, .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); }.footer-grid { grid-template-columns: 1.4fr 1fr; }.footer-grid > :last-child { grid-column: 1 / -1; } }
@media (max-width: 720px) { .notice-strip { min-height: 43px; padding: 9px 15px; font-size: 11px; }.header-inner { min-height: 74px; gap: 8px; padding: 0 19px; }.brand-mark { width: 36px; height: 36px; border-width: 2px; border-radius: 10px; }.brand-mark::before { width: 7px; height: 7px; left: 12px; top: 12px; }.brand-mark::after { left: 4px; top: 4px; box-shadow: 21px 0 0 var(--blue), 0 21px 0 var(--blue), 21px 21px 0 var(--blue); }.brand-word { font-size: 18px; }.brand-word small { font-size: 7px; }.primary-nav { inset: 117px 0 auto; }.header-actions { gap: 4px; }.whatsapp-button { width: 48px; min-width: 48px; padding: 12px; }.whatsapp-button span { display: none; }.header-actions > .icon-link:first-of-type { display: none !important; }.hero { min-height: auto; }.hero-grid { grid-template-columns: 1fr; gap: 18px; padding: 60px 24px 37px; }.hero-visual { min-height: 295px; margin-top: 9px; }.vial--main { width: 168px; height: 222px; right: 21%; }.vial--left { width: 108px; height: 143px; right: 58%; }.vial--right { width: 128px; height: 166px; }.vial-label { padding: 9px 7px; }.vial-label strong { margin-top: 14px; }.trust-grid, .split, .contact-layout { grid-template-columns: 1fr; }.trust-item { min-height: 90px; border-right: 0; border-bottom: 1px solid var(--line); padding: 17px 24px; }.trust-item:last-child { border-bottom: 0; }.section { padding: 64px 0; }.wrap { width: min(100% - 40px, 1180px); }.section-heading { display: block; margin-bottom: 29px; }.section-heading .button { margin-top: 20px; }.product-grid, .woocommerce ul.products { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.product-card { min-height: 300px; padding: 16px; border-radius: 13px; }.product-card__media { height: 145px; margin: -16px -16px 15px; }.mini-vial { transform: scale(.78); }.product-card h3 { font-size: 17px; }.category-grid { grid-template-columns: 1fr; }.cta-panel { grid-template-columns: 1fr; padding: 34px 28px; }.page-hero { padding: 58px 0 54px; }.page-body { padding: 52px 0 74px; }.woocommerce div.product { padding: 45px 0 70px; }.woocommerce ul.products li.product a img { height: 180px; padding: 18px; }.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0 14px; font-size: 16px; }.woocommerce ul.products li.product .price { padding: 0 14px; }.woocommerce ul.products li.product .button { margin: 13px 14px 0; padding: 8px 11px; font-size: 12px; }.woocommerce-cart-form, .cart-collaterals, .woocommerce form.checkout, .woocommerce-MyAccount-content { padding: 18px; }.footer-grid { grid-template-columns: 1fr; gap: 30px; }.footer-grid > :last-child { grid-column: auto; }.footer-bottom { display: grid; }.certificate-panel { min-height: 380px; }.contact-layout { gap: 35px; } }
/* Homepage: a restrained scientific editorial layout. */
.hero--reference { min-height: 575px; background: radial-gradient(ellipse at 8% 32%, rgba(177,194,211,.72) 0%, rgba(218,227,237,.34) 34%, transparent 64%), linear-gradient(105deg, #cbd6e2 0%, #edf3f7 51%, #e8f0f5 100%); }
.hero--reference::before { width: 700px; height: 700px; right: -170px; top: -170px; background: radial-gradient(circle at 38% 46%, rgba(107,150,185,.18), transparent 61%); }
.hero--reference .hero-grid { min-height: 575px; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); padding-top: 78px; padding-bottom: 66px; }
.hero--reference .hero-copy { align-self: center; max-width: 640px; }
.hero--reference .hero-copy h1 { max-width: 630px; font-size: clamp(45px, 4.75vw, 66px); letter-spacing: -.046em; }
.hero--reference .hero-actions { margin: 29px 0 28px; }.button--solid-secondary { background: var(--ink); color: var(--white); }
.hero-intro, .hero-detail { max-width: 610px; color: #647280; font-size: 17px; line-height: 1.43; }.hero-intro { margin: 0 0 17px; }.hero-detail { margin: 0; }
.hero--reference .hero-visual { min-height: 470px; align-self: end; }.hero--reference .vial--main { width: 238px; height: 365px; right: 19%; bottom: -30px; border-radius: 31px 31px 22px 22px; }.hero--reference .vial--left { width: 142px; height: 203px; right: 56%; bottom: 5px; }.hero--reference .vial--right { width: 179px; height: 270px; right: -1%; bottom: -15px; }.hero--reference .vial-label { top: 31%; }.hero--reference .vial--main .vial-label { padding-top: 22px; }.hero--reference .vial--main .vial-label strong { margin-top: 28px; }
.assurance-strip { border-bottom: 1px solid #edf0f2; background: var(--paper); }.assurance-grid { display: grid; grid-template-columns: repeat(4, 1fr); }.assurance-item { min-height: 74px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 18px; border-right: 1px solid #edf0f2; color: #647280; font-size: 13px; font-weight: 800; }.assurance-item:last-child { border-right: 0; }.assurance-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #defaff; color: #20c6de; font-size: 12px; font-weight: 900; }
.quality-section { padding: 100px 0 94px; background: #fcfdfe; border-bottom: 1px solid var(--line); }.quality-intro { max-width: 815px; margin: 0 auto 65px; text-align: center; }.quality-intro .eyebrow { color: #25c4dc; }.quality-intro h2 { font-size: clamp(32px,3.8vw,51px); }.quality-intro p:last-child { max-width: 755px; margin: 22px auto 0; color: var(--copy); font-size: 17px; }.quality-grid { display: grid; grid-template-columns: minmax(230px,1fr) 260px minmax(230px,1fr); align-items: center; gap: 60px; }.quality-column { display: grid; gap: 76px; }.quality-card { position: relative; }.quality-column--left .quality-card { text-align: right; }.quality-icon { display: inline-grid; place-items: center; width: 47px; height: 47px; margin-bottom: 12px; border: 2px solid #27c5dc; color: #27c5dc; font-family: Rubik,Arial,sans-serif; font-size: 25px; font-weight: 600; line-height: 1; }.quality-card h3 { font-size: 20px; letter-spacing: -.02em; }.quality-card p { max-width: 350px; margin: 8px 0 0; color: var(--copy); font-size: 15px; }.quality-column--left .quality-card p { margin-left: auto; }.quality-bottle { position: relative; width: 190px; height: 284px; justify-self: center; border: 7px solid #f8fbfc; border-radius: 26px 26px 19px 19px; background: linear-gradient(130deg, rgba(255,255,255,.9), rgba(181,197,208,.75)); box-shadow: inset -15px 0 20px rgba(30,54,72,.16), 0 24px 34px rgba(20,44,65,.16); }.quality-bottle__cap { position: absolute; top: -42px; left: -10px; right: -10px; height: 50px; border: 7px solid #dfe7eb; border-bottom-width: 10px; border-radius: 12px 12px 4px 4px; background: linear-gradient(#b8c6cf, #f8fbfc 48%, #abb9c2); }.quality-bottle__label { position: absolute; inset: 31% 10% auto; min-height: 143px; padding: 18px 9px; border-radius: 5px; background: linear-gradient(160deg, #1d3b5b, #071b30); color: white; font-family: Rubik,Arial,sans-serif; text-align: center; box-shadow: inset 0 0 0 1px rgba(102,190,255,.35); }.quality-bottle__label b { display:block; color:#63c7ff; font-size:11px; letter-spacing:.17em; }.quality-bottle__label strong { display:block; margin-top:19px; font-size:21px; line-height:1.08; letter-spacing:-.05em; }.quality-bottle__label span { display:block; margin-top:10px; color:#d2e5f2; font-size:7px; letter-spacing:.08em; }.featured-section { padding: 90px 0 100px; }.featured-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 36px; align-items: end; margin-bottom: 43px; }.featured-heading h2 { font-size: clamp(32px,3.7vw,50px); }.featured-heading p { max-width: 720px; margin: 14px 0 0; color: var(--copy); }.featured-heading .button { margin-bottom: 4px; }
@media (max-width: 1024px) { .hero--reference .hero-grid { grid-template-columns: minmax(0, .94fr) minmax(340px, 1.06fr); }.quality-grid { grid-template-columns: minmax(0,1fr) 210px minmax(0,1fr); gap: 34px; }.quality-column { gap: 46px; }.assurance-grid { grid-template-columns: repeat(2,1fr); }.assurance-item:nth-child(2) { border-right:0; }.assurance-item:nth-child(-n+2) { border-bottom:1px solid #edf0f2; } }
@media (max-width: 720px) { .hero--reference .hero-grid { grid-template-columns:1fr; min-height:auto; padding-top:56px; padding-bottom:30px; }.hero--reference .hero-copy h1 { font-size:clamp(41px,12vw,54px); }.hero--reference .hero-intro,.hero--reference .hero-detail { font-size:16px; }.hero--reference .hero-detail { margin-bottom:20px; }.hero--reference .hero-visual { min-height:320px; }.hero--reference .vial--main { width:174px; height:260px; right:21%; bottom:-18px; }.hero--reference .vial--left { width:105px; height:150px; right:59%; bottom:6px; }.hero--reference .vial--right { width:128px; height:188px; bottom:-8px; }.assurance-grid { grid-template-columns:1fr; }.assurance-item { justify-content:flex-start; border-right:0; border-bottom:1px solid #edf0f2; padding-left:24px; }.assurance-item:nth-child(-n+2) { border-bottom:1px solid #edf0f2; }.quality-section { padding:66px 0; }.quality-intro { margin-bottom:46px; text-align:left; }.quality-intro p:last-child { margin-left:0; }.quality-grid { grid-template-columns:1fr; gap:36px; }.quality-column { gap:28px; }.quality-column--left .quality-card { text-align:left; }.quality-column--left .quality-card p { margin-left:0; }.quality-bottle { order:-1; margin:22px 0 30px; }.featured-section { padding:64px 0 70px; }.featured-heading { grid-template-columns:1fr; gap:18px; margin-bottom:29px; }.featured-heading .button { width:max-content; }.hero--reference .vial--main .vial-label strong { margin-top:19px; } }

/* Original WFF8 product photography replaces the illustrated placeholder vials. */
.hero--reference .hero-visual { overflow: hidden; border: 1px solid rgba(255,255,255,.76); border-radius: 28px 28px 18px 18px; background: #dfe8ef; box-shadow: 0 24px 45px rgba(24,49,70,.13); }
.hero-visual__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.quality-bottle { width: 230px; height: 345px; overflow: hidden; border: 1px solid #dce6ed; border-radius: 18px; background: #f4f8fb; box-shadow: 0 20px 36px rgba(20,44,65,.14); }
.quality-bottle__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 720px) { .quality-bottle { width: min(230px, 100%); height: auto; aspect-ratio: 2 / 3; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Certificate library migrated from the owner's Trimia Health site. */
.certificate-library { max-width: 1120px; }
.certificate-library__intro { display: grid; grid-template-columns: minmax(0, .95fr) minmax(280px, .7fr); align-items: end; gap: 58px; margin-bottom: 45px; }
.certificate-library__intro > p { margin: 0; color: var(--copy); font-size: 17px; }
.certificate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.certificate-card { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 8px 24px rgba(16,38,61,.04); transition: transform .2s ease, box-shadow .2s ease; }
.certificate-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.certificate-card__header { display: flex; justify-content: space-between; gap: 18px; padding: 21px 21px 17px; }
.certificate-card__header h3 { font-size: 20px; }.certificate-card__header p { margin: 5px 0 0; color: var(--copy); font-size: 13px; }
.certificate-card__purity { display: grid; align-content: start; text-align: right; }.certificate-card__purity span { color: var(--copy); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.certificate-card__purity strong { color: var(--blue); font-family: Rubik,Arial,sans-serif; font-size: 18px; }
.certificate-card__document { position: relative; display: grid; min-height: 315px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--mist); }
.certificate-card__document img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .3s ease; }.certificate-card__document:hover img { transform: scale(1.025); }
.certificate-card__document > span { position: absolute; right: 14px; bottom: 14px; padding: 8px 11px; border-radius: 999px; background: rgba(16,38,61,.91); color: white; font-size: 11px; font-weight: 900; }
.certificate-card__date { margin: 0; padding: 14px 21px 16px; color: var(--copy); font-size: 13px; }
.certificate-library__note { max-width: 760px; margin: 30px 0 0; color: var(--copy); font-size: 13px; }

/* Product selection system: native WooCommerce fields remain in place for checkout logic, while accessible buttons provide the purchase interface. */
.wff8-product-page { padding: 31px 0 96px; }
.wff8-product-breadcrumb .woocommerce-breadcrumb { margin: 0 0 30px; color: #718090; font-size: 13px; }.wff8-product-breadcrumb .woocommerce-breadcrumb a { color: #718090; }.wff8-product-breadcrumb .woocommerce-breadcrumb a:hover { color: var(--blue); }
.wff8-product-main { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(370px, .92fr); align-items: start; gap: clamp(42px, 6vw, 90px); }
.wff8-product-stage { min-height: 575px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg, #eef4f8, #fff 69%); }.wff8-product-stage img { display: block; width: 100%; height: 575px; object-fit: contain; padding: 55px; mix-blend-mode: multiply; }
.wff8-product-thumbnails { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }.wff8-product-thumbnails img { width: 76px; height: 76px; padding: 7px; object-fit: contain; border: 1px solid var(--line); border-radius: 9px; background: var(--mist); }
.wff8-product-summary { padding: 18px 0 0; }.wff8-product-kicker { margin: 0 0 13px; color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }.wff8-product-summary .product_title { max-width: 620px; font-size: clamp(38px, 4vw, 58px); }.wff8-product-intro { max-width: 570px; margin-top: 19px; color: var(--copy); font-size: 17px; }.wff8-product-intro p { margin: 0 0 12px; }
.wff8-product-buy { margin-top: 31px; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 14px 36px rgba(16,38,61,.05); }.wff8-product-stock { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; color: #336a4e; font-size: 13px; font-weight: 900; }.wff8-product-stock span { width: 8px; height: 8px; border-radius: 50%; background: #3aab70; box-shadow: 0 0 0 4px rgba(58,171,112,.12); }
.wff8-product-buy form.cart { margin: 0; }.wff8-product-buy table.variations { width: 100%; margin: 0; border: 0; }.wff8-product-buy table.variations td, .wff8-product-buy table.variations th { padding: 0; border: 0; }
.wff8-product-buy .wff8-native-variation-row { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }.wff8-product-buy .wff8-native-variation-row select { display: block; }
.wff8-variation-controls { display: grid; gap: 25px; }.wff8-choice-group { display: grid; gap: 10px; }.wff8-choice-label { margin: 0; color: #526474; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }.wff8-choice-options { display: grid; gap: 9px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wff8-choice-option { position: relative; min-height: 53px; padding: 10px 8px; border: 1px solid #cfdbe5; border-radius: 8px; background: #fff; color: var(--ink); font-weight: 900; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease; }.wff8-choice-option:hover { border-color: var(--blue); transform: translateY(-1px); }.wff8-choice-option.is-active { border-color: var(--ink); background: var(--ink); color: white; box-shadow: 0 7px 17px rgba(16,38,61,.14); }
.wff8-choice-group[data-choice-type="bundle"] .wff8-choice-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.wff8-choice-group[data-choice-type="bundle"] .wff8-choice-option { min-height: 93px; display: grid; align-content: center; justify-items: center; gap: 3px; border-radius: 10px; }.wff8-choice-group[data-choice-type="bundle"] .wff8-choice-option strong { font-family: Rubik,Arial,sans-serif; font-size: 15px; }.wff8-choice-group[data-choice-type="bundle"] .wff8-choice-option span { color: #718090; font-size: 11px; font-weight: 700; }.wff8-choice-group[data-choice-type="bundle"] .wff8-choice-option.is-active span { color: #d6e9f7; }.wff8-choice-group[data-choice-type="bundle"] .wff8-choice-option em { position: absolute; top: -10px; padding: 3px 8px; border-radius: 999px; background: var(--blue); color: white; font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.wff8-product-buy .reset_variations { justify-self: start; margin: -13px 0 0; color: var(--copy); font-size: 12px; font-weight: 800; text-decoration: underline; }.wff8-product-buy .woocommerce-variation { min-height: 0; margin-top: 22px; }.wff8-product-buy .woocommerce-variation-price .price { display: block; color: var(--ink); font-family: Rubik,Arial,sans-serif; font-size: 27px; font-weight: 800; }.wff8-product-buy .woocommerce-variation-availability { margin-top: 4px; color: var(--copy); font-size: 13px; }.wff8-product-buy .woocommerce-variation-add-to-cart { display: grid; margin-top: 17px; }.wff8-product-buy .quantity { display: none; }.wff8-product-buy .single_add_to_cart_button { width: 100%; min-height: 54px !important; margin: 0 !important; border-radius: 9px !important; background: var(--ink) !important; font-size: 15px; }.wff8-product-buy .single_add_to_cart_button:not(:disabled):hover { background: var(--blue) !important; border-color: var(--blue) !important; }.wff8-product-buy .single_add_to_cart_button:disabled { cursor: not-allowed; opacity: .54; }
.wff8-research-note { display: grid; gap: 5px; margin: 19px 0 0; padding: 14px 16px; border-left: 3px solid var(--blue); border-radius: 0 9px 9px 0; background: var(--blue-soft); color: #36526a; font-size: 12px; line-height: 1.52; }.wff8-research-note strong { color: var(--ink); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }.wff8-documentation-link { display: inline-flex; gap: 8px; margin-top: 19px; color: var(--ink); font-size: 13px; font-weight: 900; text-decoration: underline; text-underline-offset: 4px; }.wff8-documentation-link:hover { color: var(--blue); }
.wff8-product-specifications { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 55px; margin-top: 96px; padding: 57px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.wff8-product-specifications dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.wff8-product-specifications dl div { min-height: 108px; padding: 19px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.wff8-product-specifications dt { color: #697a8a; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.wff8-product-specifications dd { margin: 8px 0 0; color: var(--ink); font-weight: 800; line-height: 1.32; }.wff8-product-specifications dd a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.wff8-product-description { max-width: 810px; padding: 69px 0 22px; color: var(--copy); }.wff8-product-description h2 { margin-bottom: 20px; }.wff8-product-description p { margin: 0 0 16px; }.wff8-related-products { padding-top: 74px; }.wff8-related-products > h2 { margin-bottom: 34px; }.wff8-related-products .products { margin-top: 0 !important; }
@media (max-width: 920px) { .certificate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.wff8-product-main { grid-template-columns: 1fr; gap: 38px; }.wff8-product-stage, .wff8-product-stage img { min-height: 460px; height: 460px; }.wff8-product-summary { max-width: 680px; padding-top: 0; } }
@media (max-width: 720px) { .certificate-library__intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 30px; }.certificate-grid { grid-template-columns: 1fr; }.certificate-card__document { min-height: 360px; }.wff8-product-page { padding: 24px 0 70px; }.wff8-product-breadcrumb .woocommerce-breadcrumb { margin-bottom: 22px; }.wff8-product-stage, .wff8-product-stage img { min-height: 350px; height: 350px; }.wff8-product-stage img { padding: 28px; }.wff8-product-buy { padding: 20px; }.wff8-choice-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }.wff8-product-specifications { grid-template-columns: 1fr; gap: 31px; margin-top: 64px; padding: 43px 0; }.wff8-product-specifications dl { grid-template-columns: 1fr; }.wff8-product-specifications dl div { min-height: auto; }.wff8-product-description { padding-top: 52px; }.wff8-related-products { padding-top: 54px; } }

/* Homepage product photography: the background is built from the four real WFF8 bottle cutouts. */
.hero--product-showcase { min-height: max(575px, 44.2vw); background: #e5eef4 url("assets/images/wff8-hero-vials-v3.webp") center center / cover no-repeat; }
.hero--product-showcase::before { display: none; }
.hero--product-showcase .hero-grid { min-height: max(575px, 44.2vw); grid-template-columns: minmax(0, 56%) minmax(0, 44%); padding-top: 72px; padding-bottom: 66px; }
.hero--product-showcase .hero-copy { align-self: center; max-width: 640px; }
.hero--product-showcase .hero-copy h1 { max-width: 630px; font-size: clamp(45px, 4.75vw, 66px); letter-spacing: -.046em; }
.hero--product-showcase .hero-actions { margin: 29px 0 28px; }
.hero--product-showcase .hero-intro, .hero--product-showcase .hero-detail { color: #465b6d; }
.hero--product-showcase .hero-detail { text-wrap: pretty; }
.quality-bottle { display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #ffffff 0%, #edf4f8 58%, #dfeaf1 100%); }
.quality-bottle__image { object-fit: contain; padding: 15px 39px; filter: drop-shadow(0 15px 16px rgba(22, 48, 70, .17)); }

@media (max-width: 1100px) {
  .hero--product-showcase .hero-grid { grid-template-columns: minmax(0, 54%) minmax(0, 46%); padding-left: 32px; padding-right: 32px; }
  .hero--product-showcase .hero-copy h1 { font-size: clamp(40px, 5.1vw, 56px); }
}

@media (max-width: 720px) {
  .hero--product-showcase { min-height: max(1000px, calc(680px + 88vw)); background: url("assets/images/wff8-hero-vials-v2-mobile.webp") center bottom / 100% auto no-repeat, linear-gradient(140deg, #d5e2ec 0%, #f6fafc 72%); }
  .hero--product-showcase .hero-grid { min-height: max(1000px, calc(680px + 88vw)); grid-template-columns: 1fr; gap: 0; padding: 56px 24px 24px; }
  .hero--product-showcase .hero-copy { align-self: start; max-width: none; }
  .hero--product-showcase .hero-copy h1 { max-width: 610px; font-size: clamp(41px, 12vw, 54px); }
  .hero--product-showcase .hero-intro, .hero--product-showcase .hero-detail { max-width: 570px; color: #40576b; font-size: 16px; }
  .hero--product-showcase .hero-detail { margin-bottom: 0; }
  .quality-bottle__image { padding: 14px 38px; }
}