*, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; } button { cursor: pointer; background: none; border: none; padding: 0; } a { color: inherit; text-decoration: none; } /* Plus Jakarta Sans is loaded via Google Fonts in HTML . */ body { font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; color: #001f3f; background: #f6f7f9; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; } :focus-visible { outline: 2px solid #0097a7; outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .section { padding-block: clamp(3rem, 6vw, 5rem); } .section--tight { padding-block: clamp(2rem, 4vw, 3rem); } .is-hidden { display: none !important; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #0a2a4a; } h1 { font-size: clamp(2rem, 5vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); } h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); } p { color: #4a5c6a; } .text-lead { font-size: clamp(1rem, 2vw, 1.125rem); line-height: 1.7; max-width: 40rem; } .eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #00838f; } .section-title { text-align: center; margin-bottom: 2rem; } .section-title h1, .section-title h2 { color: #001f3f; } .section-title .eyebrow { margin-bottom: 0.75rem; } .section-title p { margin-inline: auto; margin-top: 1rem; } .container { width: min(100% - 32px, 1200px); margin-inline: auto; } .container--narrow { width: min(100% - 32px, 800px); margin-inline: auto; } .site-top { position: sticky; top: 0; z-index: 50; } .announce-bar { background: #001f3f; color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .announce-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.5rem; min-height: 2.25rem; padding-block: 0.4rem; } .announce-bar__item { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.92); } .announce-bar__item img { width: 0.9rem; height: 0.9rem; filter: brightness(0) invert(1); } .announce-bar__item--flag img { width: 1.45rem; height: auto; border-radius: 2px; filter: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); } @media (max-width: 767.98px) { .announce-bar__hide-sm { display: none; } } .site-header { transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .site-header--solid { position: relative; background: #ffffff; border-bottom: 1px solid rgba(0, 31, 63, 0.1); } .site-header--solid .logo { color: #0a2a4a; } .site-header--solid .logo__tag { color: rgba(10, 42, 74, 0.55); } .site-header--solid .nav__link { color: rgba(10, 42, 74, 0.62); } .site-header--solid .nav__link:hover, .site-header--solid .nav__link[aria-current=page] { color: #0a2a4a; } .site-header--solid .nav-toggle { color: #0a2a4a; border-color: rgba(10, 42, 74, 0.14); background: rgba(10, 42, 74, 0.04); } .site-header--solid .nav-toggle img { filter: none; } .site-header--solid.site-header--scrolled { border-bottom-color: rgba(0, 31, 63, 0.1); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.75rem; } @media (min-width: 1024px) { .site-header__inner { min-height: 5.25rem; gap: 1.5rem; } } .logo { display: inline-flex; align-items: center; gap: 0.75rem; min-width: 0; flex-shrink: 0; } .logo__mark { width: auto; height: 4.5rem; max-width: 3.25rem; object-fit: contain; object-position: center center; flex-shrink: 0; } @media (min-width: 768px) { .logo__mark { height: 5.25rem; max-width: 3.75rem; } } .logo__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .logo__name { font-weight: 800; font-size: clamp(0.9375rem, 1.8vw, 1.125rem); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .logo__tag { font-size: clamp(0.5625rem, 1.2vw, 0.6875rem); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } @media (max-width: 479.98px) { .logo__tag { display: none; } } .nav { display: none; flex: 1; align-items: center; justify-content: center; flex-wrap: nowrap; gap: clamp(0.75rem, 2vw, 2rem); min-width: 0; } @media (min-width: 1024px) { .nav { display: flex; } } .nav__link { position: relative; flex-shrink: 0; white-space: nowrap; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding-block: 0.5rem; transition: color 0.2s ease; } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 999px; background: #00838f; transform: scaleX(0); transition: transform 0.2s ease; } .nav__link:hover::after, .nav__link[aria-current=page]::after { transform: scaleX(1); } .site-header__actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .site-header__actions .site-header__cta { display: none; } @media (min-width: 1024px) { .site-header__actions .site-header__cta { display: inline-flex; } } .nav-toggle { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 0.5rem; transition: background 0.2s ease, border-color 0.2s ease; } .nav-toggle:hover { background: rgba(10, 42, 74, 0.08); border-color: rgba(10, 42, 74, 0.22); } @media (min-width: 1024px) { .nav-toggle { display: none; } } .nav-toggle img { width: 1.25rem; height: 1.25rem; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded=true] { background: rgba(10, 42, 74, 0.1); } .nav-toggle[aria-expanded=true] .icon-menu { display: none; } .nav-toggle[aria-expanded=true] .icon-close { display: block; } .nav-mobile { display: none; background: #fff; border-top: 1px solid rgba(0, 31, 63, 0.1); } .nav-mobile.is-open { display: block; } @media (min-width: 1024px) { .nav-mobile { display: none !important; } } .nav-mobile__inner { padding-block: 1rem 1.5rem; } .nav-mobile__links { display: grid; } .nav-mobile__link { display: flex; align-items: center; min-height: 3rem; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(10, 42, 74, 0.06); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(10, 42, 74, 0.78); transition: background 0.2s ease, color 0.2s ease; } .nav-mobile__link:hover { color: #0a2a4a; background: rgba(0, 131, 143, 0.06); } .nav-mobile__link[aria-current=page] { color: #00838f; background: rgba(0, 131, 143, 0.08); } .nav-mobile__cta { margin-top: 1.5rem; } body.nav-open { overflow: hidden; } .site-footer { position: relative; background: #001f3f; color: #fff; padding-block: 4rem 2rem; margin-top: auto; } .site-footer__grid { position: relative; z-index: 1; display: grid; gap: 3rem; } @media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } .site-footer__brand .logo { color: #fff; margin-bottom: 1rem; } .site-footer__brand .logo .logo__tag { color: rgba(255, 255, 255, 0.65); } .site-footer__brand p { color: rgba(255, 255, 255, 0.72); max-width: 28rem; } .site-footer__title { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; color: #fff; } .site-footer__links { display: grid; gap: 0.75rem; } .site-footer__links a { color: rgba(255, 255, 255, 0.75); font-size: 0.9375rem; transition: color 0.2s ease; } .site-footer__links a:hover { color: #fff; } .site-footer__contact a { color: #5cd5de; font-weight: 600; } .site-footer__contact a:hover { color: #fff; } .site-footer__marks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; } .footer-mark { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .footer-mark img { width: 0.9rem; height: 0.9rem; filter: brightness(0) invert(1); } .footer-mark--flag img { width: 1.5rem; height: auto; border-radius: 2px; filter: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); } .site-footer__bottom { position: relative; z-index: 1; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); } .disclaimer { font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); margin-top: 1rem; max-width: 40rem; } .lightbox__close img { filter: brightness(0) invert(1); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.75rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.01em; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; text-align: center; } .btn:disabled { opacity: 0.5; pointer-events: none; } .btn--primary { background: #00838f; color: #fff; } .btn--primary:hover { background: #006d78; } .btn--secondary { background: #ffffff; color: #0a2a4a; border: 1px solid rgba(0, 31, 63, 0.1); } .btn--secondary:hover { border-color: #00838f; color: #00838f; } .btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); } .btn--outline { background: #ffffff; color: #0a2a4a; border: 1px solid rgba(0, 31, 63, 0.1); } .btn--outline:hover { border-color: #00838f; color: #00838f; } .btn--sm { min-height: 2.25rem; padding: 0.5rem 1rem; font-size: 0.8125rem; } .btn--block { width: 100%; } .badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .badge--soft { background: rgba(0, 131, 143, 0.08); color: #006d78; border: 1px solid rgba(0, 31, 63, 0.1); } .badge--gradient { background: #00838f; color: #fff; } .badge--lab { background: #001f3f; color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.55rem 0.85rem; gap: 0.75rem; } .badge--lab .badge__icon { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: #00838f; } .badge--lab .badge__icon svg { width: 1rem; height: 1rem; } .product-badge { display: inline-flex; align-items: stretch; overflow: hidden; color: #fff; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: clamp(0.75rem, 1.8vw, 0.875rem); background: #001f3f; border-radius: 0.5rem; } .product-badge span { padding: 0.75rem 1.05rem; } .product-badge span + span { border-left: 1px solid rgba(255, 255, 255, 0.16); } .product-badge--skew { transform: none; border-radius: 0.5rem; } .product-badge--skew span { transform: none; display: inline-block; } .product-card { display: flex; flex-direction: column; height: 100%; background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 0.75rem; overflow: hidden; transition: border-color 0.2s ease; } .product-card:hover { border-color: rgba(0, 131, 143, 0.45); } .product-card:hover .product-card__media img { transform: none; } .product-card__media { position: relative; flex-shrink: 0; width: 100%; height: 15rem; min-height: 15rem; max-height: 15rem; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; background: #eceef2; border-bottom: 1px solid rgba(10, 42, 74, 0.07); } @media (max-width: 767.98px) { .product-card__media { height: 11.5rem; min-height: 11.5rem; max-height: 11.5rem; } } .product-card__media img { display: block; width: 100%; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center center; transition: transform 0.35s ease; } .product-card__media-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .product-card__chips { position: absolute; inset: 0.5rem 0.5rem auto; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 0.35rem; pointer-events: none; } .product-card__content { display: flex; flex-direction: column; flex: 0 0 auto; width: 100%; height: 8.75rem; min-height: 8.75rem; max-height: 8.75rem; gap: 0.25rem; padding: 0.75rem; background: #ffffff; box-sizing: border-box; } @media (min-width: 768px) { .product-card__content { height: 9rem; min-height: 9rem; max-height: 9rem; } } .product-card__header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.375rem; flex-shrink: 0; } .product-card__title { margin: 0; min-width: 0; flex: 1; font-size: 0.9375rem; font-weight: 800; line-height: 1.2; color: #006b3f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-card__title a { color: inherit; font: inherit; } .product-card__title a:hover { color: #006d78; } .product-card__dose { flex-shrink: 0; padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(0, 107, 63, 0.1); border: 1px solid rgba(0, 107, 63, 0.22); color: #006b3f; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .product-card__name { margin: 0; flex-shrink: 0; min-height: 1.05rem; font-size: 0.6875rem; font-weight: 500; line-height: 1.35; color: #4a5c6a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-card__form { margin: 0 0 0.25rem; flex-shrink: 0; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #006d78; line-height: 1.2; } .product-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; flex-shrink: 0; min-height: 2rem; } .product-card__pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; min-width: 0; } .product-card__price { font-size: 0.9375rem; font-weight: 800; color: #001f3f; line-height: 1; } .product-card__was { font-size: 0.6875rem; font-weight: 500; color: #4a5c6a; text-decoration: line-through; } .product-card__cta { flex-shrink: 0; margin-left: auto; min-height: 2rem; padding: 0.35rem 0.75rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .review-card { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; height: 100%; } .review-card__stars { display: flex; gap: 0.15rem; color: #f59e0b; } .review-card__stars svg, .review-card__stars img { width: 1rem; height: 1rem; } .review-card__stars img { filter: invert(64%) sepia(79%) saturate(1200%) hue-rotate(360deg) brightness(102%) contrast(96%); } .review-card__title { font-size: 1rem; margin: 0; } .review-card__content { font-size: 0.9375rem; flex: 1; } .review-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.8125rem; color: #4a5c6a; padding-top: 0.75rem; border-top: 1px solid rgba(0, 31, 63, 0.1); } .review-card__author { font-weight: 700; color: #0a2a4a; } .coa-card { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; overflow: hidden; cursor: zoom-in; transition: border-color 0.2s ease; } .coa-card:hover { border-color: rgba(0, 131, 143, 0.45); } .coa-card__media { aspect-ratio: 4/5; background: #fff; } .coa-card__media img { width: 100%; height: 100%; object-fit: cover; } .coa-card__body { padding: 1rem; } .coa-card__title { font-size: 0.9375rem; margin: 0 0 0.25rem; } .coa-card__hint { font-size: 0.8125rem; } .info-card { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; padding: 2rem; display: flex; gap: 1.5rem; align-items: flex-start; } .info-card__icon { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 131, 143, 0.08); color: #006d78; border: 1px solid rgba(0, 131, 143, 0.14); } .info-card__icon svg, .info-card__icon img { width: 1.25rem; height: 1.25rem; } .info-card h3 { margin-bottom: 0.5rem; } .card-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 0.2rem 0.45rem; border-radius: 999px; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; } .card-chip--hot { background: #00838f; color: #fff; } .card-chip--lab { background: rgba(255, 255, 255, 0.92); color: #001f3f; border: 1px solid rgba(0, 31, 63, 0.1); } .page-hero { position: relative; background: #001f3f; color: #fff; padding-block: clamp(2.5rem, 5vw, 4rem); text-align: center; } .page-hero .container { position: relative; z-index: 1; } .page-hero h1 { color: #fff; } .page-hero p { color: rgba(255, 255, 255, 0.78); margin-inline: auto; margin-top: 1rem; } .page-hero .eyebrow { color: #5cd5de; margin-bottom: 0.75rem; background: none; -webkit-background-clip: unset; background-clip: unset; } .hero { position: relative; overflow: hidden; background: #ffffff; padding-top: clamp(2rem, 5vw, 4.5rem); } .hero__grid { position: relative; z-index: 1; display: grid; gap: 1.5rem; align-items: center; padding-bottom: clamp(2rem, 4vw, 3.5rem); grid-template-areas: "intro" "visual" "rest"; } @media (min-width: 1024px) { .hero__grid { grid-template-areas: "intro visual" "rest visual"; grid-template-columns: 1.05fr 0.95fr; column-gap: 4rem; row-gap: 1rem; min-height: 32rem; align-items: start; } } .hero__intro { grid-area: intro; max-width: 38rem; } .hero__rest { grid-area: rest; max-width: 38rem; } .hero__copy { max-width: 38rem; } .hero__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .hero__qc { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.7rem 0.35rem 0.45rem; border-radius: 999px; background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); color: #001f3f; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .hero__qc img { width: 1.5rem; height: auto; border-radius: 2px; filter: none; box-shadow: 0 0 0 1px rgba(0, 31, 63, 0.1); } .hero h1 { font-size: clamp(1.85rem, 5.4vw, 3.6rem); letter-spacing: -0.035em; color: #001f3f; } .hero__lead { margin-top: 0; font-size: clamp(1rem, 2vw, 1.125rem); line-height: 1.7; color: #4a5c6a; max-width: 34rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } .hero__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(0, 31, 63, 0.08); } .hero__fact { display: flex; flex-direction: column; gap: 0.15rem; min-width: 6.5rem; } .hero__fact strong { font-size: 1.125rem; font-weight: 800; color: #001f3f; letter-spacing: -0.02em; } .hero__fact span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #4a5c6a; } .hero__visual { position: relative; grid-area: visual; min-height: 16rem; display: grid; place-items: center; overflow: visible; } @media (min-width: 768px) { .hero__visual { min-height: 24rem; } } @media (min-width: 1024px) { .hero__visual { min-height: 30rem; align-self: center; } } .hero__molecule { position: absolute; z-index: 0; width: min(36rem, 148%); max-width: none; height: auto; left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); transform-origin: center center; pointer-events: none; opacity: 0.95; animation: molecule-drift 22s ease-in-out infinite; } @media (max-width: 1023.98px) { .hero__molecule { width: min(28rem, 125%); opacity: 0.82; } } @media (max-width: 479.98px) { .hero__molecule { width: 112%; opacity: 0.7; } } .hero__vial { position: relative; z-index: 1; width: min(17rem, 56%); height: auto; object-fit: contain; justify-self: center; margin: 0; } @media (min-width: 768px) { .hero__vial { width: min(19rem, 58%); } } @keyframes molecule-drift { 0%, 100% { transform: translate(-50%, -50%) rotate(-6deg); } 50% { transform: translate(-50%, -56%) rotate(5deg); } } @media (prefers-reduced-motion: reduce) { .hero__molecule { animation: none; } } .hero__float { position: absolute; z-index: 2; display: none; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 0.75rem; } @media (min-width: 768px) { .hero__float { display: flex; } } .hero__float strong { display: block; font-size: 0.8125rem; font-weight: 800; color: #001f3f; line-height: 1.2; } .hero__float span { font-size: 0.6875rem; color: #4a5c6a; } .hero__float--purity { left: 0; top: 18%; } .hero__float--coa { right: 2%; bottom: 22%; } .catalog { background: transparent; } .catalog__promo { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; padding: 1rem 1.5rem; margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; background: rgba(0, 131, 143, 0.08); border-color: rgba(0, 131, 143, 0.22); box-shadow: none; } .catalog__promo p { color: #0a2a4a; font-weight: 600; } .catalog__toolbar { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } @media (min-width: 1024px) { .catalog__toolbar { flex-direction: row; align-items: center; justify-content: space-between; } } .catalog__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; } @media (max-width: 767.98px) { .catalog__filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -0.25rem; padding: 0.15rem 0.25rem 0.35rem; scrollbar-width: thin; } } .catalog-search { position: relative; width: 100%; } @media (min-width: 1024px) { .catalog-search { width: 17.5rem; flex-shrink: 0; } } .catalog-search img { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 1.05rem; height: 1.05rem; opacity: 0.45; pointer-events: none; } .catalog-search input { width: 100%; min-height: 2.75rem; padding: 0.55rem 1rem 0.55rem 2.5rem; border-radius: 999px; border: 1px solid rgba(0, 131, 143, 0.16); background: rgba(255, 255, 255, 0.92); color: #001f3f; font: inherit; font-size: 0.875rem; font-weight: 600; box-shadow: none; } .catalog-search input::placeholder { color: #4a5c6a; font-weight: 500; } .catalog-search input:focus { outline: none; border-color: #00838f; box-shadow: none; } .catalog__count { margin: 0 0 1.5rem; font-size: 0.8125rem; font-weight: 600; color: #4a5c6a; } .catalog__empty { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; padding: 3rem 1.5rem; text-align: center; color: #4a5c6a; font-weight: 600; } .filter-btn { padding: 0.55rem 0.9rem; border-radius: 999px; border: 1px solid rgba(0, 131, 143, 0.15); background: rgba(255, 255, 255, 0.85); color: #4a5c6a; font-size: 0.75rem; font-weight: 700; transition: all 0.2s ease; min-height: 2.5rem; white-space: nowrap; flex-shrink: 0; } .filter-btn:hover { color: #00838f; border-color: rgba(0, 131, 143, 0.35); background: #fff; } .filter-btn.is-active { background: #00838f; border-color: #00838f; color: #fff; } .catalog__grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } @media (min-width: 480px) { .catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } } @media (min-width: 1024px) { .catalog__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1280px) { .catalog__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .product-card.is-hidden { display: none; } .trust-bar, .trust-ribbon { position: relative; color: #fff; } .trust-ribbon { background: #00838f; padding-block: 1.5rem; } .trust-bar { background: #001f3f; } .trust-ribbon__grid { position: relative; z-index: 1; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } @media (min-width: 768px) { .trust-ribbon__grid { grid-template-columns: repeat(4, 1fr); gap: 0; } } .trust-ribbon__item { display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; } @media (min-width: 768px) { .trust-ribbon__item { justify-content: center; padding-inline: 1rem; border-left: 1px solid rgba(255, 255, 255, 0.18); } .trust-ribbon__item:first-child { border-left: 0; } } .trust-ribbon__icon { flex-shrink: 0; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 0.5rem; background: rgba(255, 255, 255, 0.08); } .trust-ribbon__icon img { width: 1.15rem; height: 1.15rem; filter: brightness(0) invert(1); } .trust-ribbon__text { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; color: #fff; } .trust-bar { padding-block: 2rem; } .trust-bar__grid { position: relative; z-index: 1; display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; } @media (min-width: 768px) { .trust-bar__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } } .trust-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; text-align: left; } @media (min-width: 768px) { .trust-item { align-items: center; text-align: center; } } .trust-item__icon { width: 2.5rem; height: 2.5rem; border: 1px solid rgba(0, 163, 173, 0.4); border-radius: 0.5rem; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); } .trust-item__icon svg, .trust-item__icon img { width: 1.15rem; height: 1.15rem; } .trust-item__icon img { filter: brightness(0) invert(1); } .trust-item__title { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; } .trust-item__text { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); margin: 0; } .featured, .why, .coa-proof, .reviews-home, .promise, .faq-teaser { position: relative; } .featured { background: #f6f7f9; } .featured__grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .featured__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } } .why { background: #ffffff; } .why__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .why-card { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; height: 100%; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; } .why-card__icon { width: 3rem; height: 3rem; border-radius: 0.5rem; display: grid; place-items: center; background: rgba(0, 131, 143, 0.08); border: 1px solid rgba(0, 31, 63, 0.1); } .why-card__icon img { width: 1.35rem; height: 1.35rem; } .why-card h3 { margin: 0; font-size: 1.125rem; } .why-card p { margin: 0; font-size: 0.9375rem; line-height: 1.65; } .coa-proof { background: #f6f7f9; } .coa-proof__grid { display: grid; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .coa-proof__grid { grid-template-columns: 1fr 1.05fr; gap: 4rem; } } .coa-proof__stat { display: flex; flex-direction: column; gap: 1rem; max-width: 34rem; } .coa-proof__number { font-size: clamp(3.25rem, 8vw, 5.25rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: #001f3f; } .coa-proof__label { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #006d78; } .coa-proof__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } .coa-proof__docs { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 480px) { .coa-proof__docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .reviews-home__head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; text-align: center; align-items: center; } .reviews-home__rating { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.9rem; border-radius: 999px; background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); font-size: 0.875rem; font-weight: 700; color: #001f3f; } .reviews-home__rating img { width: 1rem; height: 1rem; filter: invert(64%) sepia(79%) saturate(1200%) hue-rotate(360deg) brightness(102%) contrast(96%); } .reviews-home__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .reviews-home__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .reviews-home__more { margin-top: 2rem; text-align: center; } .promise { background: #ffffff; } .promise__grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } @media (min-width: 1024px) { .promise__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } } .promise-card { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; min-height: 100%; } .promise-card__icon { width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; display: grid; place-items: center; background: rgba(0, 131, 143, 0.08); border: 1px solid rgba(0, 31, 63, 0.1); } .promise-card__icon img { width: 1.2rem; height: 1.2rem; } .promise-card__icon img[src*=flag-usa] { width: 1.65rem; height: auto; border-radius: 2px; } .promise-card h3 { margin: 0; font-size: 1rem; } .promise-card p { margin: 0; font-size: 0.875rem; line-height: 1.6; } .faq-teaser .accordion { max-width: 48rem; margin-inline: auto; } .faq-teaser__more { margin-top: 2rem; text-align: center; } .stats-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-bottom: 3rem; } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stat-card { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; padding: 1.5rem 1rem; text-align: center; } .stat-card strong { display: block; font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 800; letter-spacing: -0.03em; color: #001f3f; } .stat-card span { display: block; margin-top: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4a5c6a; } .timeline { display: grid; gap: 1rem; margin-bottom: 3rem; } @media (min-width: 768px) { .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .timeline__item { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; padding: 1.5rem; position: relative; } .timeline__item time { display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #006d78; margin-bottom: 0.75rem; } .timeline__item h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; } .timeline__item p { margin: 0; font-size: 0.9375rem; } .accordion { display: grid; gap: 0.75rem; } .accordion__item { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; overflow: hidden; } .accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; text-align: left; font-weight: 700; color: #0a2a4a; font-size: 1rem; } .accordion__trigger::after { content: ""; width: 0.6rem; height: 0.6rem; border-right: 2px solid #00838f; border-bottom: 2px solid #006b3f; rotate: 45deg; transition: transform 0.2s ease; flex-shrink: 0; } .accordion__trigger[aria-expanded=true]::after { transform: rotate(180deg) translate(-2px, -2px); } .accordion__panel { display: none; padding: 0 1.5rem 1.5rem; color: #4a5c6a; font-size: 0.9375rem; line-height: 1.7; } .accordion__panel.is-open { display: block; } .lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0, 20, 40, 0.9); } .lightbox.is-open { display: flex; } .lightbox__inner { position: relative; max-width: min(900px, 100%); max-height: 90vh; } .lightbox__inner img { max-height: 85vh; width: auto; margin-inline: auto; border-radius: 0.75rem; background: #fff; } .lightbox__close { position: absolute; top: -2.5rem; right: 0; color: #fff; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; } .lightbox__close svg { width: 1.5rem; height: 1.5rem; } .page-content { padding-block: clamp(3rem, 6vw, 5rem); } .content-card { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; padding: clamp(1.5rem, 4vw, 2.5rem); } .content-card--center { text-align: center; } .content-card--spaced { margin-bottom: 2rem; } .policy-heading { text-align: center; margin-bottom: 2rem; } .coa-card { width: 100%; text-align: left; font: inherit; color: inherit; } .reviews-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 480px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } } .coa-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 480px) { .coa-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .coa-grid { grid-template-columns: repeat(3, 1fr); } } .coa-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.5rem; } .info-stack { display: grid; gap: 1.5rem; } .story-block { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 800px; margin-inline: auto; } .story-block h2 { text-align: center; margin-bottom: 1.5rem; } .story-block p + p { margin-top: 1rem; } .pdp { padding-block: clamp(2rem, 5vw, 4rem); } .pdp__grid { display: grid; gap: 3rem; align-items: start; } @media (min-width: 1024px) { .pdp__grid { grid-template-columns: 0.92fr 1.08fr; gap: 4rem; } } .pdp__media { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; position: relative; overflow: hidden; background: #eceef2; display: grid; place-items: center; min-height: 22rem; padding: 2rem; } .pdp__media img { width: min(22rem, 100%); height: auto; } .pdp__chips { position: absolute; inset: 1rem 1rem auto; display: flex; flex-wrap: wrap; gap: 0.5rem; } .pdp__info { display: flex; flex-direction: column; gap: 1.5rem; } .pdp__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .pdp h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); color: #006b3f; letter-spacing: -0.035em; } .pdp__name { margin: 0; font-size: 1.125rem; font-weight: 600; color: #4a5c6a; } .pdp__form { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #006d78; } .pdp__price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem; } .pdp__price { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; color: #001f3f; line-height: 1; } .pdp__was { font-size: 1.125rem; color: #4a5c6a; text-decoration: line-through; } .pdp__options { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pdp-option { min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid rgba(0, 131, 143, 0.16); background: #ffffff; color: #001f3f; font-weight: 700; font-size: 0.875rem; transition: all 0.2s ease; } .pdp-option:hover { border-color: rgba(0, 131, 143, 0.4); } .pdp-option.is-active { background: #00838f; border-color: #00838f; color: #fff; } .pdp__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .pdp__specs { background: #ffffff; border: 1px solid rgba(0, 31, 63, 0.1); border-radius: 1rem; box-shadow: none; overflow: hidden; } .pdp__specs table { width: 100%; border-collapse: collapse; } .pdp__specs th, .pdp__specs td { padding: 0.85rem 1.15rem; text-align: left; font-size: 0.875rem; border-bottom: 1px solid rgba(0, 31, 63, 0.1); } .pdp__specs tr:last-child th, .pdp__specs tr:last-child td { border-bottom: 0; } .pdp__specs th { width: 42%; font-weight: 700; color: #001f3f; background: rgba(0, 131, 143, 0.04); } .pdp__specs td { color: #4a5c6a; } .pdp__note { font-size: 0.8125rem; color: #4a5c6a; line-height: 1.6; } .pdp-related { padding-bottom: clamp(3rem, 6vw, 5rem); } .pdp-related__grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .pdp-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } } .page { min-height: 100vh; display: flex; flex-direction: column; }