html,
body {
max-width: 100%;
overflow-x: clip;
position: relative;
}
/* Direct Response CSS Design System for Sacred Origin Landing Page */
:root {
--primary-color: #2C4A3B;
/* Deep Forest */
--primary-light: #3D6450;
--accent-color: #B89B5E;
/* Muted Gold */
--accent-hover: #9e824c;
--text-main: #111111;
/* Stark black for maximum readability */
--text-muted: #7D827F;
--bg-main: #F5F0E6;
--bg-secondary: #ecdcc1;
--alert-color: #A86F54;
--border-radius: 6px;
/* Tighter radius for a more solid feel */
--transition-speed: 0.2s;
--container-max: 1100px;
/* Tighter container for focus */
--shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-hard: 0 4px 12px rgba(0, 0, 0, 0.15);
--font-heading: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
font-size: 19px;
/* Increased base size for senior readability */
color: var(--text-main);
background-color: var(--bg-main);
line-height: 1.45;
/* Tighter line height to save space */
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6,
.product-title,
.stat-number {
font-family: var(--font-heading);
}
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 15px;
/* Minimal side padding */
}
/* Utilities */
.text-center {
text-align: center;
}
.bg-secondary {
background-color: var(--bg-secondary);
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
}
.section-title {
font-size: 2.4rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 15px;
color: var(--primary-color);
letter-spacing: -0.5px;
}
.section-subtitle {
max-width: 800px;
margin: 0 auto 25px;
color: var(--text-muted);
font-size: 1.25rem;
font-weight: 500;
}
section {
padding: 40px 0;
/* Reduced wasted vertical space */
}
/* Announcement Bar */
.announcement-bar {
background-color: var(--alert-color);
color: white;
text-align: center;
padding: 8px;
font-size: 1rem;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
/* Header */
.site-header {
border-bottom: 1px solid #ddd;
padding: 10px 0;
position: sticky;
top: 0;
background: #fff;
z-index: 100;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 2rem;
font-weight: 900;
color: var(--primary-color);
letter-spacing: -1px;
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 1.8rem;
cursor: pointer;
color: var(--primary-color);
}
.cart-container {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
font-weight: 700;
font-size: 1.1rem;
}
/* Hero Section */
.hero-section {
padding: 20px 0 40px;
/* Bring image closer to top */
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: flex-start;
}
.product-gallery {
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
max-width: 100%;
}
.main-image {
position: relative;
overflow: hidden;
border-radius: var(--border-radius);
border: 1px solid #eaeaea;
}
.main-image .carousel-slide {
width: 100%;
display: none;
aspect-ratio: 1/1;
object-fit: cover;
}
.main-image .carousel-slide:first-child {
display: block;
}
.thumbnail-grid {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.thumb {
width: 70px;
height: 70px;
border-radius: 4px;
cursor: pointer;
border: 2px solid transparent;
object-fit: cover;
}
.thumb.active {
border-color: var(--primary-color);
}
/* Mobile swipeable product gallery */
@media (max-width: 992px) {
.product-gallery {
overflow: hidden;
position: relative;
}
.main-image {
display: flex;
overflow-x: scroll;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: none;
overscroll-behavior: none;
}
.main-image::-webkit-scrollbar {
display: none;
}
.main-image .carousel-slide {
display: block;
flex: 0 0 100%;
min-width: 100%;
max-width: 100%;
scroll-snap-align: start;
}
.thumbnail-grid {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: none;
gap: 8px;
}
.thumbnail-grid::-webkit-scrollbar {
display: none;
}
.thumb {
width: 70px;
height: 70px;
flex-shrink: 0;
}
}
.product-details {
padding-top: 10px;
}
.product-title {
background: radial-gradient(ellipse at top left, #111111 10%, #3e5246 150%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
font-size: 2.6rem;
font-weight: 800;
line-height: 1.05;
margin-bottom: 10px;
letter-spacing: -0.5px;
}
.reviews-badge {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 15px;
font-size: 1.1rem;
font-weight: 700;
}
.stars {
color: #f39c12;
letter-spacing: 1px;
font-size: 1.2rem;
}
.benefits-list {
list-style: none;
margin-bottom: 20px;
}
.benefits-list li {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
font-weight: 500;
white-space: normal;
color: #333;
letter-spacing: -0.3px;
}
.benefits-list li strong {
font-weight: 800;
color: var(--text-main);
}
.benefits-list .icon {
display: flex;
justify-content: center;
align-items: center;
background: var(--primary-color);
color: #fff;
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 0.85rem;
flex-shrink: 0;
font-weight: bold;
box-shadow: 0 2px 4px rgba(44, 74, 59, 0.25);
}
.stock-warning {
background-color: #fff9f9;
border: 2px dashed var(--alert-color);
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
}
.stock-warning strong {
color: var(--alert-color);
display: block;
margin-bottom: 5px;
font-size: 1.1rem;
text-transform: uppercase;
}
.stock-warning p {
font-size: 0.95rem;
font-weight: 500;
}
/* Giant DR Button */
.btn-primary {
width: 100%;
padding: 20px 10px;
background-color: var(--accent-color);
color: #000;
font-size: 1.5rem;
font-weight: 900;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 4px 0 #8c7647;
text-transform: uppercase;
transition: all 0.1s ease;
animation: pulse 2s infinite;
}
.btn-primary:active {
transform: translateY(4px);
box-shadow: 0 0 0 #8c7647;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}
.payment-methods {
text-align: center;
margin-top: 15px;
color: var(--text-muted);
font-size: 0.85rem;
font-weight: 700;
}
/* Info Grid (4 Benefits) */
.info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.info-card {
text-align: center;
background: #fff;
padding: 15px;
border-radius: var(--border-radius);
box-shadow: var(--shadow-soft);
border: 1px solid #efefef;
}
.carousel-controls {
display: none;
}
.info-card-img {
width: 100%;
border-radius: 4px;
margin-bottom: 10px;
aspect-ratio: 1;
object-fit: cover;
}
.info-card h3 {
margin-bottom: 4px;
font-size: 1.25rem;
font-weight: 800;
line-height: 1.2;
}
.info-card p {
font-size: 1rem;
line-height: 1.4;
color: #333;
}
/* UGC Videos Horizontal Scroll */
.ugc-videos {
padding: 40px 0;
}
.video-grid {
display: flex;
overflow-x: auto;
gap: 15px;
padding-bottom: 15px;
/* Smooth native scrolling */
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
margin-top: 20px;
}
.video-grid::-webkit-scrollbar {
height: 8px;
}
.video-grid::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4px;
}
.ugc-video {
flex: 0 0 45vw;
width: 45vw;
max-width: 200px;
aspect-ratio: 9/16;
height: auto;
border-radius: var(--border-radius);
box-shadow: var(--shadow-hard);
background: #000;
object-fit: cover;
scroll-snap-align: center;
border: 2px solid #eaeaea;
}
@media (min-width: 768px) {
.ugc-video {
flex: 0 0 220px;
width: 220px;
}
}
/* Accordions */
.accordion-container {
max-width: 900px;
margin: 0 auto;
}
.accordion-item {
border-bottom: 2px solid #eee;
}
.accordion-header {
width: 100%;
padding: 18px 0;
background: none;
border: none;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.4rem;
font-weight: 800;
cursor: pointer;
color: var(--primary-color);
text-align: left;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.accordion-content.active {
max-height: 1000px;
padding-bottom: 15px;
}
.accordion-content p,
.accordion-content li {
font-size: 1.15rem;
color: #222;
}
.accordion-content ul {
margin-left: 20px;
margin-top: 10px;
margin-bottom: 15px;
}
.accordion-content li {
margin-bottom: 5px;
}
/* Clinically Studied Section (Missing block) */
.clinically-studied-section {
background: linear-gradient(90deg, #20382d 0%, var(--primary-color) 25%, #305442 50%, var(--primary-color) 75%, #20382d 100%);
background-image: linear-gradient(rgba(44, 74, 59, 0.88), rgba(44, 74, 59, 0.88)), url("images/clinical_laboratory_bg.png");
background-size: cover;
background-position: center;
color: #ffffff;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.clinical-grid {
display: flex;
flex-wrap: wrap;
gap: 60px;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.clinical-stats {
flex: 1 1 50%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.clinical-stat-item {
border-top: 1px solid rgba(255, 255, 255, 0.3);
padding-top: 8px;
}
.clinical-stat-item:nth-child(1),
.clinical-stat-item:nth-child(2) {
border-top: none;
padding-top: 0;
}
.stat-number {
font-size: 3.5rem;
font-weight: 800;
line-height: 1;
margin-bottom: 5px;
color: #f6f7ef;
}
.stat-heading {
font-size: 1.1rem;
font-weight: 800;
margin-bottom: 5px;
display: block;
line-height: 1.3;
}
.stat-subtext {
font-size: 1rem;
opacity: 0.9;
line-height: 1.3;
}
.clinical-content {
flex: 1 1 40%;
text-align: center;
}
.clinical-content h2 {
font-size: 2.2rem;
font-weight: 900;
margin-bottom: 20px;
color: #fff;
line-height: 1.1;
}
.clinical-content p {
font-size: 1.15rem;
margin-bottom: 15px;
}
.clinical-cta {
display: inline-block;
background-color: var(--bg-main);
color: var(--text-main);
padding: 15px 30px;
font-size: 1.2rem;
font-weight: 800;
border-radius: 6px;
text-decoration: none;
transition: transform 0.2s;
text-transform: uppercase;
}
.clinical-cta:hover {
transform: translateY(-3px);
}
/* Deep Dive */
.deep-dive-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 1000px;
margin: 0 auto;
}
.deep-card {
background: #fff;
padding: 20px;
border-radius: var(--border-radius);
box-shadow: var(--shadow-soft);
border: 1px solid #ddd;
}
.deep-card img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 15px;
}
.deep-card h3 {
color: var(--primary-color);
margin-bottom: 5px;
font-size: 1.4rem;
font-weight: 900;
}
.deep-card p {
font-size: 1.1rem;
margin-bottom: 4px;
}
/* Trust Mini Grid */
.trust-mini-grid {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-top: 25px;
}
.trust-mini-grid div {
text-align: center;
font-weight: 800;
font-size: 1.1rem;
}
/* Scroll Marquee */
.marquee-banner {
background-color: var(--primary-color);
color: #fff;
overflow: hidden;
padding: 10px 0;
display: flex;
}
.marquee-track {
display: flex;
width: max-content;
animation: text-marquee-scroll 25s linear infinite;
will-change: transform;
}
.marquee-content-group {
display: flex;
flex-shrink: 0;
}
.marquee-item {
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
padding-right: 2rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.marquee-item svg { width: 20px; height: 20px; opacity: 0.9;}
@keyframes text-marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Timeline Visual Section */
.timeline-visual-section {
padding: 35px 0 40px;
background-color: #fffaf5;
background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
background-size: 20px 20px;
overflow: hidden;
}
.timeline-path {
position: relative;
max-width: 900px;
margin: 0 auto;
}
.timeline-path-line {
position: absolute;
top: 20px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
background-color: var(--primary-color);
}
.timeline-node {
display: flex;
justify-content: flex-start;
align-items: flex-start;
position: relative;
margin-bottom: 30px;
width: 50%;
}
.timeline-node.right {
margin-left: 50%;
padding-left: 45px;
}
.timeline-node.left {
margin-left: 0;
padding-right: 45px;
text-align: right;
justify-content: flex-end;
}
@media (max-width: 768px) {
.timeline-path-line {
left: 20px;
transform: translateX(0);
}
.timeline-node {
width: 100%;
margin-left: 0 !important;
padding-left: 60px !important;
padding-right: 15px !important;
text-align: left !important;
justify-content: flex-start !important;
}
}
.node-circle {
position: absolute;
top: 5px;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.timeline-node.left .node-circle {
right: -16px;
}
.timeline-node.right .node-circle {
left: -16px;
}
@media (max-width: 768px) {
.timeline-node.left .node-circle,
.timeline-node.right .node-circle {
left: 5px;
right: auto;
}
}
.node-circle.filled {
background-color: var(--primary-color);
border: 3px solid #fffaf5;
}
.node-circle.unfilled {
background-color: #fffaf5;
border: 3px solid #ccc;
color: #ccc;
}
.node-circle.unfilled svg path {
stroke: var(--primary-color);
}
.node-content {
max-width: 320px;
}
.node-time {
font-size: 0.85rem;
color: #888;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 4px;
}
.node-title {
font-size: 1.6rem;
font-weight: 900;
color: #222;
margin-bottom: 12px;
line-height: 1.1;
}
.node-bullets {
list-style: none;
padding: 0;
margin: 0;
}
.node-bullets li {
font-size: 0.95rem;
color: #444;
font-weight: 500;
margin-bottom: 8px;
line-height: 1.3;
}
.timeline-node.right .node-bullets li {
display: flex;
align-items: flex-start;
gap: 8px;
text-align: left;
}
.timeline-node.left .node-bullets li {
display: flex;
align-items: flex-start;
gap: 8px;
text-align: right;
justify-content: flex-end;
flex-direction: row-reverse;
}
@media (max-width: 768px) {
.timeline-node.left .node-bullets li {
text-align: left;
justify-content: flex-start;
flex-direction: row;
}
}
.bullet-check {
font-size: 0.85rem;
font-weight: 900;
color: #333;
padding-top: 2px;
flex-shrink: 0;
}
/* Testimonials */
.testimonials-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.testimonial-card {
background: linear-gradient(145deg, #ffffff 0%, #faf8f5 100%);
border: 1px solid rgba(184, 155, 94, 0.1) !important;
background: white;
padding: 25px;
border-radius: var(--border-radius);
box-shadow: var(--shadow-hard);
display: flex;
flex-direction: column;
border-top: 5px solid var(--primary-color);
}
.testimonial-card h4 {
margin-top: 5px;
margin-bottom: 10px;
font-size: 1.35rem;
font-weight: 900;
line-height: 1.25;
}
.testimonial-card p {
font-size: 1.1rem;
font-weight: 500;
}
.testimonial-card .author {
margin-top: auto;
padding-top: 8px;
font-weight: 800;
font-size: 1.1rem;
}
.verified {
color: #27ae60;
font-size: 0.9rem;
margin-left: 5px;
text-transform: uppercase;
}
/* Sticky Bottom Bar */
.sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1000;
padding: 10px 0;
border-top: 1px solid #eaeaea;
}
.sticky-bar.visible {
transform: translateY(0);
}
.sticky-bar-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 0 10px;
}
.sticky-product-info {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
/* allows text to wrap properly and clip */
}
.sticky-thumb {
width: 60px;
height: auto;
object-fit: contain;
flex-shrink: 0;
}
.sticky-text {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.sticky-title {
font-size: 0.95rem;
font-weight: 800;
line-height: 1.15;
color: var(--text-main);
margin-bottom: 2px;
display: -webkit-box;
-webkit-line-clamp: 2;
/* restrict to 2 lines cleanly */
-webkit-box-orient: vertical;
overflow: hidden;
}
.sticky-pricing {
display: flex;
align-items: baseline;
gap: 6px;
}
.sticky-price {
font-size: 1.1rem;
font-weight: 900;
color: var(--primary-color);
}
.sticky-strike {
font-size: 0.95rem;
font-weight: 800;
text-decoration: line-through;
color: #4a4a4a;
}
.sticky-btn {
background-color: var(--primary-color);
color: #fff;
font-size: 0.95rem;
font-weight: 900;
border: none;
border-radius: 6px;
padding: 12px 16px;
text-transform: uppercase;
cursor: pointer;
flex-shrink: 0;
white-space: normal;
letter-spacing: 0.5px;
}
@media (min-width: 768px) {
.sticky-bar-content {
justify-content: center;
gap: 40px;
}
.sticky-title {
font-size: 1.25rem;
}
.sticky-price {
font-size: 1.35rem;
}
.sticky-btn {
padding: 15px 35px;
font-size: 1.1rem;
}
}
/* Specific DR Adjustments for Mobile */
@media (max-width: 992px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.product-title {
background: radial-gradient(ellipse at top left, #111111 10%, #3e5246 150%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
font-size: 2.2rem;
}
/* 4-Slide Native CSS Carousel Pattern matching top-tier D2C implementations */
.info-grid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
gap: 15px;
padding-bottom: 25px;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
scrollbar-width: none;
}
.info-grid::-webkit-scrollbar {
display: none;
}
.info-grid .info-card {
flex: 0 0 100%;
scroll-snap-align: start;
max-width: 100%;
min-width: 100%;
box-sizing: border-box;
margin: 0;
}
.carousel-controls {
display: flex !important;
justify-content: center;
align-items: center;
gap: 25px;
margin-top: 25px;
}
.carousel-arrow {
background: #fff;
border: 1px solid rgba(44, 74, 59, 0.2);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
color: var(--primary-color);
font-size: 1.2rem;
transition: all 0.2s;
}
.carousel-arrow:active {
transform: scale(0.95);
background: #f5f0e6;
}
.carousel-dots {
display: flex;
gap: 12px;
}
.carousel-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(44, 74, 59, 0.2);
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-dot.active {
background: var(--primary-color);
transform: scale(1.2);
}
.clinical-grid {
flex-direction: column-reverse;
gap: 40px;
}
.clinical-stats {
grid-template-columns: 1fr;
}
.clinical-stat-item:nth-child(2) {
border-top: 1px solid rgba(255, 255, 255, 0.3);
padding-top: 8px;
}
.clinical-content h2 {
font-size: 2rem;
}
}
@media (max-width: 768px) {
body {
font-size: 19px;
}
h1,
h2,
h3,
h4,
h5,
h6,
.product-title,
.stat-number {
font-family: var(--font-heading);
}
/* Still large but adjusted for mobile */
.mobile-menu-btn {
display: block;
}
.cart-text {
display: none;
}
.deep-dive-grid,
.testimonials-grid {
grid-template-columns: 1fr;
}
.comparison-wrapper {
grid-template-columns: 1fr;
}
.section-title {
font-size: 2rem;
}
.accordion-header {
font-size: 1.25rem;
}
.hero-section {
padding-bottom: 0px;
}
.stock-warning {
margin-bottom: 0px;
}
.accordions-section {
padding-top: 15px;
/* Leaves a sensible, intentional 15px margin instead of 80+px of blank space */
}
}
.countdown-bar-wrapper {
background-color: var(--alert-color);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
/* Prevents timer from stacking under the text */
gap: 15px;
padding: 10px 15px;
width: 100%;
}
.countdown-text-block {
display: flex;
flex-direction: column;
align-items: flex-end;
/* Keeps text snug against the timer */
text-align: right;
justify-content: center;
line-height: 1.2;
flex-shrink: 1;
}
.countdown-title {
font-size: 1rem;
font-weight: 900;
letter-spacing: 0.5px;
white-space: normal;
}
.countdown-subtitle {
font-size: 0.85rem;
font-weight: 600;
white-space: normal;
}
.countdown-timer {
display: flex;
gap: 3px;
align-items: center;
font-family: monospace;
flex-shrink: 0;
}
.timer-colon {
font-size: 1rem;
font-weight: bold;
margin-bottom: 2px;
}
.time-block {
min-width: 32px;
padding: 3px 4px;
background: rgba(0, 0, 0, 0.25);
border-radius: 4px;
text-align: center;
line-height: 1;
}
.time-block span {
font-size: 1rem;
font-weight: 900;
}
.time-block small {
font-size: 0.85rem;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
}
@media (min-width: 768px) {
.countdown-bar-wrapper {
gap: 30px;
padding: 12px 20px;
}
.countdown-title {
font-size: 1.6rem;
}
.countdown-subtitle {
font-size: 0.95rem;
}
.countdown-timer {
gap: 10px;
}
.timer-colon {
font-size: 1.5rem;
margin-bottom: 5px;
}
.time-block {
min-width: 45px;
padding: 5px 8px;
}
.time-block span {
font-size: 1.4rem;
}
.time-block small {
font-size: 0.85rem;
}
}
.option-badge {
background: var(--alert-color);
color: white;
font-size: 0.85rem;
font-weight: 900;
padding: 3px 8px;
border-radius: 4px;
position: absolute;
top: -10px;
right: 15px;
text-transform: uppercase;
}
.purchase-option {
position: relative;
display: flex;
justify-content: space-between;
}
/* New Quantity Selector Styles */
.low-stock-divider {
display: flex;
align-items: center;
text-align: center;
color: var(--alert-color);
font-weight: 800;
margin-bottom: 20px;
font-size: 1.1rem;
}
.low-stock-divider::before,
.low-stock-divider::after {
content: '';
flex: 1;
border-bottom: 2px solid var(--alert-color);
opacity: 0.2;
}
.low-stock-divider::before {
margin-right: 1em;
border-bottom: none !important;
height: 2px;
background: linear-gradient(to right, transparent, var(--alert-color));
}
.low-stock-divider::after {
margin-left: 1em;
border-bottom: none !important;
height: 2px;
background: linear-gradient(to left, transparent, var(--alert-color));
}
.pricing-options {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 20px;
}
.purchase-option {
position: relative;
display: flex;
align-items: center;
padding: 15px 20px;
border: 1px solid #dcdcdc;
border-radius: var(--border-radius);
cursor: pointer;
background: #fff;
transition: all var(--transition-speed);
}
.purchase-option.active-option {
border: 2px solid var(--alert-color);
background-color: var(--bg-secondary);
box-shadow: none;
}
/* Custom Radio Button */
.custom-radio {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid #ccc;
margin-right: 15px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.purchase-option.active-option .custom-radio {
border-color: var(--alert-color);
}
.purchase-option.active-option .custom-radio::after {
content: '';
width: 12px;
height: 12px;
background: var(--alert-color);
border-radius: 50%;
position: absolute;
}
.purchase-option input[type="radio"] {
display: none;
}
.option-details-flex {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
.option-left {
display: flex;
flex-direction: column;
}
.option-title {
font-size: 1.15rem;
color: var(--text-main);
font-weight: 500;
}
.option-subtitle {
font-size: 0.95rem;
color: var(--alert-color);
}
.option-right {
display: flex;
flex-direction: column;
text-align: right;
}
.option-price {
font-size: 1.25rem;
font-weight: 800;
color: var(--text-main);
}
.option-strike {
font-size: 0.95rem;
color: #888;
text-decoration: line-through;
font-weight: 500;
}
.option-badge {
position: absolute;
top: -12px;
right: 20px;
background: var(--alert-color);
color: #fff;
font-size: 0.85rem;
font-weight: 800;
padding: 4px 12px;
border-radius: 20px;
text-transform: none;
}
/* Subscribe Checkbox Box */
.subscribe-upsell {
border: 2px dashed var(--alert-color);
border-radius: var(--border-radius);
padding: 15px 20px;
display: flex;
align-items: center;
margin-bottom: 15px;
cursor: pointer;
background: #fff;
}
/* Custom checkbox */
.custom-checkbox {
width: 24px;
height: 24px;
border: 2px solid var(--alert-color);
border-radius: 4px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.subscribe-upsell input[type="checkbox"]:checked+.custom-checkbox::after,
.subscribe-upsell.active .custom-checkbox::after {
content: '✓';
color: var(--alert-color);
font-weight: 900;
font-size: 16px;
}
.subscribe-upsell input[type="checkbox"] {
display: none;
}
.subs-text {
display: flex;
flex-direction: column;
}
.subs-title {
color: var(--alert-color);
font-weight: 900;
font-size: 1.1rem;
}
.subs-desc {
color: var(--text-main);
font-size: 0.85rem;
font-weight: 500;
}
/* Cart Drawer Styles */
.cart-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 2000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.cart-overlay.active {
opacity: 1;
pointer-events: auto;
}
.cart-drawer-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 420px;
max-width: 100vw;
background: #fff;
z-index: 2001;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}
.cart-drawer-container.active {
transform: translateX(0);
}
.cart-close-btn {
font-size: 28px;
font-weight: 500;
cursor: pointer;
line-height: 1;
}
.cart-reservation-banner {
background: var(--primary-color);
color: #fff;
text-align: center;
padding: 10px;
font-weight: 700;
font-size: 0.9rem;
}
.progress-track {
background: #e0e0e0;
border-radius: 10px;
height: 8px;
overflow: hidden;
position: relative;
margin-top: 10px;
}
.progress-fill {
background: repeating-linear-gradient(45deg,
var(--primary-color),
var(--primary-color) 10px,
var(--accent-color) 10px,
var(--accent-color) 20px);
background-size: 28px 28px;
height: 100%;
border-radius: 10px;
transition: width 0.3s ease;
animation: moveStripes 1.5s linear infinite;
}
@keyframes moveStripes {
0% {
background-position: 0 0;
}
100% {
background-position: 28px 0;
}
}
.cart-item {
display: flex;
gap: 15px;
}
.cart-item-img {
width: 80px;
height: 80px;
object-fit: contain;
background: #f9f9f9;
border: 1px solid #eaeaea;
border-radius: 6px;
padding: 5px;
}
.cart-item-details {
flex: 1;
}
.cart-item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.cart-item-title {
font-size: 0.95rem;
font-weight: 800;
line-height: 1.2;
color: var(--text-main);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
padding-right: 10px;
}
.cart-item-remove {
cursor: pointer;
color: #888;
font-size: 1.1rem;
}
.cart-item-variant {
font-size: 0.85rem;
color: #555;
margin-top: 4px;
}
.cart-item-subscription {
font-size: 0.85rem;
color: #555;
margin-bottom: 4px;
}
.cart-item-bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.qty-selector {
display: flex;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.qty-btn {
background: #f9f9f9;
border: none;
padding: 5px 12px;
font-size: 1rem;
cursor: pointer;
}
.qty-selector input {
width: 30px;
text-align: center;
border: none;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
font-weight: 700;
}
.cart-item-pricing {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.cart-item-strike {
font-size: 0.85rem;
color: #888;
text-decoration: line-through;
line-height: 1;
}
.cart-item-price {
font-size: 1.15rem;
font-weight: 900;
color: var(--primary-color);
}
.cart-item-savings {
font-size: 0.9rem;
font-weight: 800;
text-align: right;
margin-top: 2px;
color: var(--primary-color);
}
/* Toggle Switch Styles */
.switch {
position: relative;
display: inline-block;
width: 46px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: var(--primary-color);
}
input:checked+.slider:before {
-webkit-transform: translateX(22px);
-ms-transform: translateX(22px);
transform: translateX(22px);
}
.slider.round {
border-radius: 24px;
}
.slider.round:before {
border-radius: 50%;
}
/* --- AOS CSS BUNDLED FOR OFFLINE --- */
[data-aos][data-aos][data-aos-duration="50"],
body[data-aos-duration="50"] [data-aos] {
transition-duration: 50ms
}
[data-aos][data-aos][data-aos-delay="50"],
body[data-aos-delay="50"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="50"].aos-animate,
body[data-aos-delay="50"] [data-aos].aos-animate {
transition-delay: 50ms
}
[data-aos][data-aos][data-aos-duration="100"],
body[data-aos-duration="100"] [data-aos] {
transition-duration: .1s
}
[data-aos][data-aos][data-aos-delay="100"],
body[data-aos-delay="100"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="100"].aos-animate,
body[data-aos-delay="100"] [data-aos].aos-animate {
transition-delay: .1s
}
[data-aos][data-aos][data-aos-duration="150"],
body[data-aos-duration="150"] [data-aos] {
transition-duration: .15s
}
[data-aos][data-aos][data-aos-delay="150"],
body[data-aos-delay="150"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="150"].aos-animate,
body[data-aos-delay="150"] [data-aos].aos-animate {
transition-delay: .15s
}
[data-aos][data-aos][data-aos-duration="200"],
body[data-aos-duration="200"] [data-aos] {
transition-duration: .2s
}
[data-aos][data-aos][data-aos-delay="200"],
body[data-aos-delay="200"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="200"].aos-animate,
body[data-aos-delay="200"] [data-aos].aos-animate {
transition-delay: .2s
}
[data-aos][data-aos][data-aos-duration="250"],
body[data-aos-duration="250"] [data-aos] {
transition-duration: .25s
}
[data-aos][data-aos][data-aos-delay="250"],
body[data-aos-delay="250"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="250"].aos-animate,
body[data-aos-delay="250"] [data-aos].aos-animate {
transition-delay: .25s
}
[data-aos][data-aos][data-aos-duration="300"],
body[data-aos-duration="300"] [data-aos] {
transition-duration: .3s
}
[data-aos][data-aos][data-aos-delay="300"],
body[data-aos-delay="300"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="300"].aos-animate,
body[data-aos-delay="300"] [data-aos].aos-animate {
transition-delay: .3s
}
[data-aos][data-aos][data-aos-duration="350"],
body[data-aos-duration="350"] [data-aos] {
transition-duration: .35s
}
[data-aos][data-aos][data-aos-delay="350"],
body[data-aos-delay="350"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="350"].aos-animate,
body[data-aos-delay="350"] [data-aos].aos-animate {
transition-delay: .35s
}
[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
transition-duration: .4s
}
[data-aos][data-aos][data-aos-delay="400"],
body[data-aos-delay="400"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="400"].aos-animate,
body[data-aos-delay="400"] [data-aos].aos-animate {
transition-delay: .4s
}
[data-aos][data-aos][data-aos-duration="450"],
body[data-aos-duration="450"] [data-aos] {
transition-duration: .45s
}
[data-aos][data-aos][data-aos-delay="450"],
body[data-aos-delay="450"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="450"].aos-animate,
body[data-aos-delay="450"] [data-aos].aos-animate {
transition-delay: .45s
}
[data-aos][data-aos][data-aos-duration="500"],
body[data-aos-duration="500"] [data-aos] {
transition-duration: .5s
}
[data-aos][data-aos][data-aos-delay="500"],
body[data-aos-delay="500"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="500"].aos-animate,
body[data-aos-delay="500"] [data-aos].aos-animate {
transition-delay: .5s
}
[data-aos][data-aos][data-aos-duration="550"],
body[data-aos-duration="550"] [data-aos] {
transition-duration: .55s
}
[data-aos][data-aos][data-aos-delay="550"],
body[data-aos-delay="550"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="550"].aos-animate,
body[data-aos-delay="550"] [data-aos].aos-animate {
transition-delay: .55s
}
[data-aos][data-aos][data-aos-duration="600"],
body[data-aos-duration="600"] [data-aos] {
transition-duration: .6s
}
[data-aos][data-aos][data-aos-delay="600"],
body[data-aos-delay="600"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="600"].aos-animate,
body[data-aos-delay="600"] [data-aos].aos-animate {
transition-delay: .6s
}
[data-aos][data-aos][data-aos-duration="650"],
body[data-aos-duration="650"] [data-aos] {
transition-duration: .65s
}
[data-aos][data-aos][data-aos-delay="650"],
body[data-aos-delay="650"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="650"].aos-animate,
body[data-aos-delay="650"] [data-aos].aos-animate {
transition-delay: .65s
}
[data-aos][data-aos][data-aos-duration="700"],
body[data-aos-duration="700"] [data-aos] {
transition-duration: .7s
}
[data-aos][data-aos][data-aos-delay="700"],
body[data-aos-delay="700"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="700"].aos-animate,
body[data-aos-delay="700"] [data-aos].aos-animate {
transition-delay: .7s
}
[data-aos][data-aos][data-aos-duration="750"],
body[data-aos-duration="750"] [data-aos] {
transition-duration: .75s
}
[data-aos][data-aos][data-aos-delay="750"],
body[data-aos-delay="750"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="750"].aos-animate,
body[data-aos-delay="750"] [data-aos].aos-animate {
transition-delay: .75s
}
[data-aos][data-aos][data-aos-duration="800"],
body[data-aos-duration="800"] [data-aos] {
transition-duration: .8s
}
[data-aos][data-aos][data-aos-delay="800"],
body[data-aos-delay="800"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="800"].aos-animate,
body[data-aos-delay="800"] [data-aos].aos-animate {
transition-delay: .8s
}
[data-aos][data-aos][data-aos-duration="850"],
body[data-aos-duration="850"] [data-aos] {
transition-duration: .85s
}
[data-aos][data-aos][data-aos-delay="850"],
body[data-aos-delay="850"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="850"].aos-animate,
body[data-aos-delay="850"] [data-aos].aos-animate {
transition-delay: .85s
}
[data-aos][data-aos][data-aos-duration="900"],
body[data-aos-duration="900"] [data-aos] {
transition-duration: .9s
}
[data-aos][data-aos][data-aos-delay="900"],
body[data-aos-delay="900"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="900"].aos-animate,
body[data-aos-delay="900"] [data-aos].aos-animate {
transition-delay: .9s
}
[data-aos][data-aos][data-aos-duration="950"],
body[data-aos-duration="950"] [data-aos] {
transition-duration: .95s
}
[data-aos][data-aos][data-aos-delay="950"],
body[data-aos-delay="950"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="950"].aos-animate,
body[data-aos-delay="950"] [data-aos].aos-animate {
transition-delay: .95s
}
[data-aos][data-aos][data-aos-duration="1000"],
body[data-aos-duration="1000"] [data-aos] {
transition-duration: 1s
}
[data-aos][data-aos][data-aos-delay="1000"],
body[data-aos-delay="1000"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1000"].aos-animate,
body[data-aos-delay="1000"] [data-aos].aos-animate {
transition-delay: 1s
}
[data-aos][data-aos][data-aos-duration="1050"],
body[data-aos-duration="1050"] [data-aos] {
transition-duration: 1.05s
}
[data-aos][data-aos][data-aos-delay="1050"],
body[data-aos-delay="1050"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1050"].aos-animate,
body[data-aos-delay="1050"] [data-aos].aos-animate {
transition-delay: 1.05s
}
[data-aos][data-aos][data-aos-duration="1100"],
body[data-aos-duration="1100"] [data-aos] {
transition-duration: 1.1s
}
[data-aos][data-aos][data-aos-delay="1100"],
body[data-aos-delay="1100"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1100"].aos-animate,
body[data-aos-delay="1100"] [data-aos].aos-animate {
transition-delay: 1.1s
}
[data-aos][data-aos][data-aos-duration="1150"],
body[data-aos-duration="1150"] [data-aos] {
transition-duration: 1.15s
}
[data-aos][data-aos][data-aos-delay="1150"],
body[data-aos-delay="1150"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1150"].aos-animate,
body[data-aos-delay="1150"] [data-aos].aos-animate {
transition-delay: 1.15s
}
[data-aos][data-aos][data-aos-duration="1200"],
body[data-aos-duration="1200"] [data-aos] {
transition-duration: 1.2s
}
[data-aos][data-aos][data-aos-delay="1200"],
body[data-aos-delay="1200"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1200"].aos-animate,
body[data-aos-delay="1200"] [data-aos].aos-animate {
transition-delay: 1.2s
}
[data-aos][data-aos][data-aos-duration="1250"],
body[data-aos-duration="1250"] [data-aos] {
transition-duration: 1.25s
}
[data-aos][data-aos][data-aos-delay="1250"],
body[data-aos-delay="1250"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1250"].aos-animate,
body[data-aos-delay="1250"] [data-aos].aos-animate {
transition-delay: 1.25s
}
[data-aos][data-aos][data-aos-duration="1300"],
body[data-aos-duration="1300"] [data-aos] {
transition-duration: 1.3s
}
[data-aos][data-aos][data-aos-delay="1300"],
body[data-aos-delay="1300"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1300"].aos-animate,
body[data-aos-delay="1300"] [data-aos].aos-animate {
transition-delay: 1.3s
}
[data-aos][data-aos][data-aos-duration="1350"],
body[data-aos-duration="1350"] [data-aos] {
transition-duration: 1.35s
}
[data-aos][data-aos][data-aos-delay="1350"],
body[data-aos-delay="1350"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1350"].aos-animate,
body[data-aos-delay="1350"] [data-aos].aos-animate {
transition-delay: 1.35s
}
[data-aos][data-aos][data-aos-duration="1400"],
body[data-aos-duration="1400"] [data-aos] {
transition-duration: 1.4s
}
[data-aos][data-aos][data-aos-delay="1400"],
body[data-aos-delay="1400"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1400"].aos-animate,
body[data-aos-delay="1400"] [data-aos].aos-animate {
transition-delay: 1.4s
}
[data-aos][data-aos][data-aos-duration="1450"],
body[data-aos-duration="1450"] [data-aos] {
transition-duration: 1.45s
}
[data-aos][data-aos][data-aos-delay="1450"],
body[data-aos-delay="1450"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1450"].aos-animate,
body[data-aos-delay="1450"] [data-aos].aos-animate {
transition-delay: 1.45s
}
[data-aos][data-aos][data-aos-duration="1500"],
body[data-aos-duration="1500"] [data-aos] {
transition-duration: 1.5s
}
[data-aos][data-aos][data-aos-delay="1500"],
body[data-aos-delay="1500"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1500"].aos-animate,
body[data-aos-delay="1500"] [data-aos].aos-animate {
transition-delay: 1.5s
}
[data-aos][data-aos][data-aos-duration="1550"],
body[data-aos-duration="1550"] [data-aos] {
transition-duration: 1.55s
}
[data-aos][data-aos][data-aos-delay="1550"],
body[data-aos-delay="1550"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1550"].aos-animate,
body[data-aos-delay="1550"] [data-aos].aos-animate {
transition-delay: 1.55s
}
[data-aos][data-aos][data-aos-duration="1600"],
body[data-aos-duration="1600"] [data-aos] {
transition-duration: 1.6s
}
[data-aos][data-aos][data-aos-delay="1600"],
body[data-aos-delay="1600"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1600"].aos-animate,
body[data-aos-delay="1600"] [data-aos].aos-animate {
transition-delay: 1.6s
}
[data-aos][data-aos][data-aos-duration="1650"],
body[data-aos-duration="1650"] [data-aos] {
transition-duration: 1.65s
}
[data-aos][data-aos][data-aos-delay="1650"],
body[data-aos-delay="1650"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1650"].aos-animate,
body[data-aos-delay="1650"] [data-aos].aos-animate {
transition-delay: 1.65s
}
[data-aos][data-aos][data-aos-duration="1700"],
body[data-aos-duration="1700"] [data-aos] {
transition-duration: 1.7s
}
[data-aos][data-aos][data-aos-delay="1700"],
body[data-aos-delay="1700"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1700"].aos-animate,
body[data-aos-delay="1700"] [data-aos].aos-animate {
transition-delay: 1.7s
}
[data-aos][data-aos][data-aos-duration="1750"],
body[data-aos-duration="1750"] [data-aos] {
transition-duration: 1.75s
}
[data-aos][data-aos][data-aos-delay="1750"],
body[data-aos-delay="1750"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1750"].aos-animate,
body[data-aos-delay="1750"] [data-aos].aos-animate {
transition-delay: 1.75s
}
[data-aos][data-aos][data-aos-duration="1800"],
body[data-aos-duration="1800"] [data-aos] {
transition-duration: 1.8s
}
[data-aos][data-aos][data-aos-delay="1800"],
body[data-aos-delay="1800"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1800"].aos-animate,
body[data-aos-delay="1800"] [data-aos].aos-animate {
transition-delay: 1.8s
}
[data-aos][data-aos][data-aos-duration="1850"],
body[data-aos-duration="1850"] [data-aos] {
transition-duration: 1.85s
}
[data-aos][data-aos][data-aos-delay="1850"],
body[data-aos-delay="1850"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1850"].aos-animate,
body[data-aos-delay="1850"] [data-aos].aos-animate {
transition-delay: 1.85s
}
[data-aos][data-aos][data-aos-duration="1900"],
body[data-aos-duration="1900"] [data-aos] {
transition-duration: 1.9s
}
[data-aos][data-aos][data-aos-delay="1900"],
body[data-aos-delay="1900"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1900"].aos-animate,
body[data-aos-delay="1900"] [data-aos].aos-animate {
transition-delay: 1.9s
}
[data-aos][data-aos][data-aos-duration="1950"],
body[data-aos-duration="1950"] [data-aos] {
transition-duration: 1.95s
}
[data-aos][data-aos][data-aos-delay="1950"],
body[data-aos-delay="1950"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="1950"].aos-animate,
body[data-aos-delay="1950"] [data-aos].aos-animate {
transition-delay: 1.95s
}
[data-aos][data-aos][data-aos-duration="2000"],
body[data-aos-duration="2000"] [data-aos] {
transition-duration: 2s
}
[data-aos][data-aos][data-aos-delay="2000"],
body[data-aos-delay="2000"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2000"].aos-animate,
body[data-aos-delay="2000"] [data-aos].aos-animate {
transition-delay: 2s
}
[data-aos][data-aos][data-aos-duration="2050"],
body[data-aos-duration="2050"] [data-aos] {
transition-duration: 2.05s
}
[data-aos][data-aos][data-aos-delay="2050"],
body[data-aos-delay="2050"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2050"].aos-animate,
body[data-aos-delay="2050"] [data-aos].aos-animate {
transition-delay: 2.05s
}
[data-aos][data-aos][data-aos-duration="2100"],
body[data-aos-duration="2100"] [data-aos] {
transition-duration: 2.1s
}
[data-aos][data-aos][data-aos-delay="2100"],
body[data-aos-delay="2100"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2100"].aos-animate,
body[data-aos-delay="2100"] [data-aos].aos-animate {
transition-delay: 2.1s
}
[data-aos][data-aos][data-aos-duration="2150"],
body[data-aos-duration="2150"] [data-aos] {
transition-duration: 2.15s
}
[data-aos][data-aos][data-aos-delay="2150"],
body[data-aos-delay="2150"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2150"].aos-animate,
body[data-aos-delay="2150"] [data-aos].aos-animate {
transition-delay: 2.15s
}
[data-aos][data-aos][data-aos-duration="2200"],
body[data-aos-duration="2200"] [data-aos] {
transition-duration: 2.2s
}
[data-aos][data-aos][data-aos-delay="2200"],
body[data-aos-delay="2200"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2200"].aos-animate,
body[data-aos-delay="2200"] [data-aos].aos-animate {
transition-delay: 2.2s
}
[data-aos][data-aos][data-aos-duration="2250"],
body[data-aos-duration="2250"] [data-aos] {
transition-duration: 2.25s
}
[data-aos][data-aos][data-aos-delay="2250"],
body[data-aos-delay="2250"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2250"].aos-animate,
body[data-aos-delay="2250"] [data-aos].aos-animate {
transition-delay: 2.25s
}
[data-aos][data-aos][data-aos-duration="2300"],
body[data-aos-duration="2300"] [data-aos] {
transition-duration: 2.3s
}
[data-aos][data-aos][data-aos-delay="2300"],
body[data-aos-delay="2300"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2300"].aos-animate,
body[data-aos-delay="2300"] [data-aos].aos-animate {
transition-delay: 2.3s
}
[data-aos][data-aos][data-aos-duration="2350"],
body[data-aos-duration="2350"] [data-aos] {
transition-duration: 2.35s
}
[data-aos][data-aos][data-aos-delay="2350"],
body[data-aos-delay="2350"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2350"].aos-animate,
body[data-aos-delay="2350"] [data-aos].aos-animate {
transition-delay: 2.35s
}
[data-aos][data-aos][data-aos-duration="2400"],
body[data-aos-duration="2400"] [data-aos] {
transition-duration: 2.4s
}
[data-aos][data-aos][data-aos-delay="2400"],
body[data-aos-delay="2400"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2400"].aos-animate,
body[data-aos-delay="2400"] [data-aos].aos-animate {
transition-delay: 2.4s
}
[data-aos][data-aos][data-aos-duration="2450"],
body[data-aos-duration="2450"] [data-aos] {
transition-duration: 2.45s
}
[data-aos][data-aos][data-aos-delay="2450"],
body[data-aos-delay="2450"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2450"].aos-animate,
body[data-aos-delay="2450"] [data-aos].aos-animate {
transition-delay: 2.45s
}
[data-aos][data-aos][data-aos-duration="2500"],
body[data-aos-duration="2500"] [data-aos] {
transition-duration: 2.5s
}
[data-aos][data-aos][data-aos-delay="2500"],
body[data-aos-delay="2500"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2500"].aos-animate,
body[data-aos-delay="2500"] [data-aos].aos-animate {
transition-delay: 2.5s
}
[data-aos][data-aos][data-aos-duration="2550"],
body[data-aos-duration="2550"] [data-aos] {
transition-duration: 2.55s
}
[data-aos][data-aos][data-aos-delay="2550"],
body[data-aos-delay="2550"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2550"].aos-animate,
body[data-aos-delay="2550"] [data-aos].aos-animate {
transition-delay: 2.55s
}
[data-aos][data-aos][data-aos-duration="2600"],
body[data-aos-duration="2600"] [data-aos] {
transition-duration: 2.6s
}
[data-aos][data-aos][data-aos-delay="2600"],
body[data-aos-delay="2600"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2600"].aos-animate,
body[data-aos-delay="2600"] [data-aos].aos-animate {
transition-delay: 2.6s
}
[data-aos][data-aos][data-aos-duration="2650"],
body[data-aos-duration="2650"] [data-aos] {
transition-duration: 2.65s
}
[data-aos][data-aos][data-aos-delay="2650"],
body[data-aos-delay="2650"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2650"].aos-animate,
body[data-aos-delay="2650"] [data-aos].aos-animate {
transition-delay: 2.65s
}
[data-aos][data-aos][data-aos-duration="2700"],
body[data-aos-duration="2700"] [data-aos] {
transition-duration: 2.7s
}
[data-aos][data-aos][data-aos-delay="2700"],
body[data-aos-delay="2700"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2700"].aos-animate,
body[data-aos-delay="2700"] [data-aos].aos-animate {
transition-delay: 2.7s
}
[data-aos][data-aos][data-aos-duration="2750"],
body[data-aos-duration="2750"] [data-aos] {
transition-duration: 2.75s
}
[data-aos][data-aos][data-aos-delay="2750"],
body[data-aos-delay="2750"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2750"].aos-animate,
body[data-aos-delay="2750"] [data-aos].aos-animate {
transition-delay: 2.75s
}
[data-aos][data-aos][data-aos-duration="2800"],
body[data-aos-duration="2800"] [data-aos] {
transition-duration: 2.8s
}
[data-aos][data-aos][data-aos-delay="2800"],
body[data-aos-delay="2800"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2800"].aos-animate,
body[data-aos-delay="2800"] [data-aos].aos-animate {
transition-delay: 2.8s
}
[data-aos][data-aos][data-aos-duration="2850"],
body[data-aos-duration="2850"] [data-aos] {
transition-duration: 2.85s
}
[data-aos][data-aos][data-aos-delay="2850"],
body[data-aos-delay="2850"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2850"].aos-animate,
body[data-aos-delay="2850"] [data-aos].aos-animate {
transition-delay: 2.85s
}
[data-aos][data-aos][data-aos-duration="2900"],
body[data-aos-duration="2900"] [data-aos] {
transition-duration: 2.9s
}
[data-aos][data-aos][data-aos-delay="2900"],
body[data-aos-delay="2900"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2900"].aos-animate,
body[data-aos-delay="2900"] [data-aos].aos-animate {
transition-delay: 2.9s
}
[data-aos][data-aos][data-aos-duration="2950"],
body[data-aos-duration="2950"] [data-aos] {
transition-duration: 2.95s
}
[data-aos][data-aos][data-aos-delay="2950"],
body[data-aos-delay="2950"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="2950"].aos-animate,
body[data-aos-delay="2950"] [data-aos].aos-animate {
transition-delay: 2.95s
}
[data-aos][data-aos][data-aos-duration="3000"],
body[data-aos-duration="3000"] [data-aos] {
transition-duration: 3s
}
[data-aos][data-aos][data-aos-delay="3000"],
body[data-aos-delay="3000"] [data-aos] {
transition-delay: 0
}
[data-aos][data-aos][data-aos-delay="3000"].aos-animate,
body[data-aos-delay="3000"] [data-aos].aos-animate {
transition-delay: 3s
}
[data-aos][data-aos][data-aos-easing=linear],
body[data-aos-easing=linear] [data-aos] {
transition-timing-function: cubic-bezier(.25, .25, .75, .75)
}
[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
transition-timing-function: ease
}
[data-aos][data-aos][data-aos-easing=ease-in],
body[data-aos-easing=ease-in] [data-aos] {
transition-timing-function: ease-in
}
[data-aos][data-aos][data-aos-easing=ease-out],
body[data-aos-easing=ease-out] [data-aos] {
transition-timing-function: ease-out
}
[data-aos][data-aos][data-aos-easing=ease-in-out],
body[data-aos-easing=ease-in-out] [data-aos] {
transition-timing-function: ease-in-out
}
[data-aos][data-aos][data-aos-easing=ease-in-back],
body[data-aos-easing=ease-in-back] [data-aos] {
transition-timing-function: cubic-bezier(.6, -.28, .735, .045)
}
[data-aos][data-aos][data-aos-easing=ease-out-back],
body[data-aos-easing=ease-out-back] [data-aos] {
transition-timing-function: cubic-bezier(.175, .885, .32, 1.275)
}
[data-aos][data-aos][data-aos-easing=ease-in-out-back],
body[data-aos-easing=ease-in-out-back] [data-aos] {
transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
}
[data-aos][data-aos][data-aos-easing=ease-in-sine],
body[data-aos-easing=ease-in-sine] [data-aos] {
transition-timing-function: cubic-bezier(.47, 0, .745, .715)
}
[data-aos][data-aos][data-aos-easing=ease-out-sine],
body[data-aos-easing=ease-out-sine] [data-aos] {
transition-timing-function: cubic-bezier(.39, .575, .565, 1)
}
[data-aos][data-aos][data-aos-easing=ease-in-out-sine],
body[data-aos-easing=ease-in-out-sine] [data-aos] {
transition-timing-function: cubic-bezier(.445, .05, .55, .95)
}
[data-aos][data-aos][data-aos-easing=ease-in-quad],
body[data-aos-easing=ease-in-quad] [data-aos] {
transition-timing-function: cubic-bezier(.55, .085, .68, .53)
}
[data-aos][data-aos][data-aos-easing=ease-out-quad],
body[data-aos-easing=ease-out-quad] [data-aos] {
transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}
[data-aos][data-aos][data-aos-easing=ease-in-out-quad],
body[data-aos-easing=ease-in-out-quad] [data-aos] {
transition-timing-function: cubic-bezier(.455, .03, .515, .955)
}
[data-aos][data-aos][data-aos-easing=ease-in-cubic],
body[data-aos-easing=ease-in-cubic] [data-aos] {
transition-timing-function: cubic-bezier(.55, .085, .68, .53)
}
[data-aos][data-aos][data-aos-easing=ease-out-cubic],
body[data-aos-easing=ease-out-cubic] [data-aos] {
transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}
[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],
body[data-aos-easing=ease-in-out-cubic] [data-aos] {
transition-timing-function: cubic-bezier(.455, .03, .515, .955)
}
[data-aos][data-aos][data-aos-easing=ease-in-quart],
body[data-aos-easing=ease-in-quart] [data-aos] {
transition-timing-function: cubic-bezier(.55, .085, .68, .53)
}
[data-aos][data-aos][data-aos-easing=ease-out-quart],
body[data-aos-easing=ease-out-quart] [data-aos] {
transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}
[data-aos][data-aos][data-aos-easing=ease-in-out-quart],
body[data-aos-easing=ease-in-out-quart] [data-aos] {
transition-timing-function: cubic-bezier(.455, .03, .515, .955)
}
[data-aos^=fade][data-aos^=fade] {
opacity: 0;
transition-property: opacity, transform
}
[data-aos^=fade][data-aos^=fade].aos-animate {
opacity: 1;
transform: translateZ(0)
}
[data-aos=fade-up] {
transform: translate3d(0, 100px, 0)
}
[data-aos=fade-down] {
transform: translate3d(0, -100px, 0)
}
[data-aos=fade-right] {
transform: translate3d(-100px, 0, 0)
}
[data-aos=fade-left] {
transform: translate3d(100px, 0, 0)
}
[data-aos=fade-up-right] {
transform: translate3d(-100px, 100px, 0)
}
[data-aos=fade-up-left] {
transform: translate3d(100px, 100px, 0)
}
[data-aos=fade-down-right] {
transform: translate3d(-100px, -100px, 0)
}
[data-aos=fade-down-left] {
transform: translate3d(100px, -100px, 0)
}
[data-aos^=zoom][data-aos^=zoom] {
opacity: 0;
transition-property: opacity, transform
}
[data-aos^=zoom][data-aos^=zoom].aos-animate {
opacity: 1;
transform: translateZ(0) scale(1)
}
[data-aos=zoom-in] {
transform: scale(.6)
}
[data-aos=zoom-in-up] {
transform: translate3d(0, 100px, 0) scale(.6)
}
[data-aos=zoom-in-down] {
transform: translate3d(0, -100px, 0) scale(.6)
}
[data-aos=zoom-in-right] {
transform: translate3d(-100px, 0, 0) scale(.6)
}
[data-aos=zoom-in-left] {
transform: translate3d(100px, 0, 0) scale(.6)
}
[data-aos=zoom-out] {
transform: scale(1.2)
}
[data-aos=zoom-out-up] {
transform: translate3d(0, 100px, 0) scale(1.2)
}
[data-aos=zoom-out-down] {
transform: translate3d(0, -100px, 0) scale(1.2)
}
[data-aos=zoom-out-right] {
transform: translate3d(-100px, 0, 0) scale(1.2)
}
[data-aos=zoom-out-left] {
transform: translate3d(100px, 0, 0) scale(1.2)
}
[data-aos^=slide][data-aos^=slide] {
transition-property: transform
}
[data-aos^=slide][data-aos^=slide].aos-animate {
transform: translateZ(0)
}
[data-aos=slide-up] {
transform: translate3d(0, 100%, 0)
}
[data-aos=slide-down] {
transform: translate3d(0, -100%, 0)
}
[data-aos=slide-right] {
transform: translate3d(-100%, 0, 0)
}
[data-aos=slide-left] {
transform: translate3d(100%, 0, 0)
}
[data-aos^=flip][data-aos^=flip] {
backface-visibility: hidden;
transition-property: transform
}
[data-aos=flip-left] {
transform: perspective(2500px) rotateY(-100deg)
}
[data-aos=flip-left].aos-animate {
transform: perspective(2500px) rotateY(0)
}
[data-aos=flip-right] {
transform: perspective(2500px) rotateY(100deg)
}
[data-aos=flip-right].aos-animate {
transform: perspective(2500px) rotateY(0)
}
[data-aos=flip-up] {
transform: perspective(2500px) rotateX(-100deg)
}
[data-aos=flip-up].aos-animate {
transform: perspective(2500px) rotateX(0)
}
[data-aos=flip-down] {
transform: perspective(2500px) rotateX(100deg)
}
[data-aos=flip-down].aos-animate {
transform: perspective(2500px) rotateX(0)
}
.cart-checkout-btn,
#main-atc {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.05) 100%) !important;
box-shadow: 0 4px 15px rgba(44, 74, 59, 0.25);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
}
.cart-checkout-btn:hover,
#main-atc:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(44, 74, 59, 0.35);
}
.trust-bar {
background: linear-gradient(90deg, #20382d 0%, var(--primary-color) 25%, #305442 50%, var(--primary-color) 75%, #20382d 100%) !important;
}
/* Premium Feature Split Section (Unlike Regular Pills UI) */
.premium-feature-split {
padding: 40px 20px;
background-color: var(--bg-main);
}
.pfs-grid {
display: flex;
gap: 30px;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.pfs-media {
flex: 0 0 32%;
background: linear-gradient(135deg, rgba(44, 74, 59, 0.95), rgba(30, 50, 40, 0.95)), url('images/clinical_laboratory_bg.png');
background-size: cover;
background-position: center;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.2);
}
.pfs-media img {
max-width: 90%;
width: 100%;
border-radius: 12px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}
.pfs-content {
flex: 0 0 calc(68% - 30px);
background-color: #FAFAFA;
border-radius: 20px;
padding: 25px 35px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.03);
}
.pfs-content h2 {
font-size: 2rem;
font-weight: 400;
line-height: 1.2;
margin-bottom: 5px;
color: var(--text-main);
font-family: var(--font-heading);
}
.pfs-content h2 em {
font-style: italic;
font-weight: 300;
}
.pfs-content h2 strong {
font-weight: 800;
display: block;
margin-top: 5px;
}
.pfs-subtitle {
font-size: 1rem;
color: #555;
max-width: 85%;
line-height: 1.4;
margin-bottom: 10px;
}
/* Elegant Grid Matrix replacing messy absolute positions */
.pfs-interactive-area {
display: grid;
grid-template-columns: 1fr 140px 1fr;
grid-template-rows: auto auto;
align-items: center;
gap: 0px 30px;
margin-top: 10px;
}
.pfs-pill-video {
grid-column: 2 / 3;
grid-row: 1 / 3;
width: 100%;
height: auto;
max-height: 160px;
object-fit: contain;
mix-blend-mode: multiply;
}
.pfs-item {
position: relative;
padding-top: 6px;
border-top: 1.5px solid var(--alert-color);
}
.pfs-item h4 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 2px;
color: var(--text-main);
}
.pfs-item p {
font-size: 0.9rem;
color: #666;
line-height: 1.3;
}
/* "Feel Like Yourself Again" (Top Right) */
.pfs-item-top-right {
grid-column: 3 / 4;
grid-row: 1 / 2;
align-self: flex-end;
}
/* Left-pointing dot for the right-hand text block */
.pfs-item-top-right::before {
content: '';
position: absolute;
top: -4px;
left: -4px;
width: 7px;
height: 7px;
background: var(--alert-color);
border-radius: 50%;
}
/* "Benefits Only" (Bottom Left) */
.pfs-item-bottom-left {
grid-column: 1 / 2;
grid-row: 2 / 3;
align-self: flex-start;
}
/* Right-pointing dot for the left-hand text block */
.pfs-item-bottom-left::after {
content: '';
position: absolute;
top: -4px;
right: -4px;
width: 7px;
height: 7px;
background: var(--alert-color);
border-radius: 50%;
}
/* Mobile Overrides */
@media (max-width: 992px) {
.premium-feature-split {
padding: 40px 15px;
}
.pfs-grid {
flex-direction: column;
gap: 20px;
max-width: 100%;
}
.pfs-media {
flex: 0 0 auto;
padding: 30px 20px;
}
.pfs-media img {
max-width: 60%;
}
.pfs-content {
flex: 0 0 auto;
padding: 30px 20px;
}
.pfs-content h2 {
font-size: 1.6rem;
}
.pfs-subtitle {
max-width: 100%;
font-size: 1rem;
margin-bottom: 15px;
}
/* Mobile Interactive Space - Text on Left, Pill on Right */
.pfs-interactive-area {
grid-template-columns: 1fr 100px;
gap: 20px 15px;
margin-top: 15px;
}
.pfs-pill-video {
max-height: 160px;
}
/* Both Text callouts stack on the left side now natively */
.pfs-item-top-right {
grid-column: 1 / 2;
grid-row: 1 / 2;
align-self: center;
}
/* Convert dot direction because text is now on the left pointing right at the pill */
.pfs-item-top-right::before {
display: none;
}
.pfs-item-top-right::after {
content: '';
position: absolute;
top: -4px;
right: -4px;
width: 7px;
height: 7px;
background: var(--alert-color);
border-radius: 50%;
}
.pfs-item-bottom-left {
grid-column: 1 / 2;
grid-row: 2 / 3;
align-self: center;
}
}
/* Feel Better Section */
.feel-better-section {
background: linear-gradient(180deg, var(--accent-color) 0%, rgba(95, 75, 45, 1) 100%);
color: #fff;
padding: 80px 20px 0;
position: relative;
overflow: hidden;
text-align: center;
}
.fb-pattern-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 800px;
z-index: 1;
pointer-events: none;
}
.fb-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px dashed rgba(255, 255, 255, 0.4);
border-radius: 50%;
}
.fb-circle-1 {
width: 300px;
height: 300px;
}
.fb-circle-2 {
width: 450px;
height: 450px;
}
.fb-circle-3 {
width: 600px;
height: 600px;
border-color: rgba(255, 255, 255, 0.2);
}
.fb-circle-4 {
width: 750px;
height: 750px;
border-color: rgba(255, 255, 255, 0.1);
}
.fb-circle-5 {
width: 900px;
height: 900px;
border-color: rgba(255, 255, 255, 0.05);
}
.fb-container {
position: relative;
z-index: 2;
max-width: 1100px;
margin: 0 auto;
}
.fb-title {
font-size: 2.8rem;
font-weight: 800;
margin-bottom: 15px;
color: #fff;
font-family: var(--font-heading);
}
.fb-subtitle {
font-size: 1.25rem;
max-width: 800px;
margin: 0 auto 50px;
line-height: 1.5;
opacity: 0.95;
color: #fff;
}
.fb-subtitle strong {
font-weight: 800;
}
.fb-content-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.fb-benefits-grid {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px 30px;
}
.fb-benefit {
display: flex;
flex-direction: column;
align-items: center;
}
.fb-icon {
width: 64px;
height: 64px;
margin-bottom: 20px;
color: #fff;
}
.fb-icon svg {
width: 100%;
height: 100%;
}
.fb-benefit h3 {
font-size: 1.3rem;
font-weight: 700;
color: #fff;
margin: 0;
font-family: var(--font-heading);
}
.fb-product-container {
flex: 0 0 45%;
position: relative;
display: flex;
justify-content: center;
}
.fb-product {
position: relative;
z-index: 3;
width: 100%;
max-width: 500px;
line-height: 0;
}
.fb-product img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
filter: drop-shadow(0 -10px 40px rgba(0, 0, 0, 0.3));
}
/* Mobile overrides */
@media (max-width: 768px) {
.feel-better-section {
padding-top: 60px;
}
.fb-title {
font-size: 2.2rem;
}
.fb-subtitle {
font-size: 1.1rem;
margin-bottom: 40px;
}
.fb-content-wrapper {
flex-direction: column;
gap: 60px;
}
.fb-benefits-grid {
gap: 30px 15px;
}
.fb-icon {
width: 44px;
height: 44px;
margin-bottom: 12px;
}
.fb-benefit h3 {
font-size: 1.05rem;
}
.fb-product-container {
width: 100%;
max-width: 320px;
margin: 0 auto -140px auto;
/* Requested threshold */
}
.fb-pattern-container {
/* Move pattern slightly down on mobile so it centers with the top visible half of the pack */
top: 38%;
}
.fb-circle-1 {
width: 250px;
height: 250px;
}
.fb-circle-2 {
width: 400px;
height: 400px;
}
.fb-circle-3 {
width: 550px;
height: 550px;
}
}
/* Proven Benefits Section */
.proven-benefits-section {
background-color: #F8F6F2;
padding: 80px 20px;
text-align: center;
}
.pb-container {
max-width: 1050px;
margin: 0 auto;
}
.pb-title {
font-size: 2.6rem;
font-weight: 800;
color: var(--text-main);
margin-bottom: 15px;
line-height: 1.2;
font-family: var(--font-heading);
}
.pb-highlight {
color: var(--primary-color);
/* Matches the site's primary green */
}
.pb-subtitle {
font-size: 1.15rem;
color: #444;
max-width: 800px;
margin: 0 auto 50px;
line-height: 1.5;
}
.pb-subtitle strong {
font-weight: 700;
color: var(--text-main);
}
.pb-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
text-align: left;
}
.pb-card {
background: transparent;
perspective: 1200px;
cursor: pointer;
border: none;
padding: 0;
}
.pb-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
transform-style: preserve-3d;
display: grid;
}
.pb-card.flipped .pb-card-inner {
transform: rotateY(180deg);
}
.pb-card-front,
.pb-card-back {
grid-area: 1 / 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: #fff;
border: 1px solid #E5E5E5;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
display: flex;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pb-card-front {
align-items: center;
}
.pb-card-back {
transform: rotateY(180deg);
align-items: center;
justify-content: space-between;
background: #F8F6F2;
border: 1px solid var(--primary-color);
}
.pb-card-back p {
font-size: 0.95rem;
color: var(--text-main);
line-height: 1.5;
margin: 0;
flex: 1;
}
.pb-close-icon {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid #CCC;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 20px;
font-weight: 300;
margin-left: 15px;
flex-shrink: 0;
background: #fff;
transition: all 0.2s ease;
}
.pb-card:hover .pb-card-front {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}
.pb-card:hover .pb-card-back {
transform: rotateY(180deg) translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}
.pb-card-img {
width: 85px;
height: 85px;
object-fit: cover;
border-radius: 8px;
margin-right: 20px;
flex-shrink: 0;
}
.pb-card-content {
flex: 1;
}
.pb-card-content h3 {
font-size: 1.3rem;
font-weight: 500;
color: var(--text-main);
margin-bottom: 4px;
font-family: var(--font-body);
/* Screenshot shows a sans-serif that looks non-bolded but medium weight */
}
.pb-card-content p {
font-size: 0.95rem;
color: #555;
margin: 0;
}
.pb-plus-icon {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid #CCC;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 20px;
font-weight: 300;
margin-left: 15px;
flex-shrink: 0;
background: #fff;
transition: all 0.2s ease;
}
.pb-card:hover .pb-plus-icon {
border-color: var(--primary-color);
color: var(--primary-color);
}
/* Mobile Overrides */
@media (max-width: 768px) {
.proven-benefits-section {
padding: 60px 15px;
}
.pb-title {
font-size: 2rem;
}
.pb-subtitle {
font-size: 1.05rem;
margin-bottom: 35px;
}
.pb-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.pb-card-front,
.pb-card-back {
padding: 15px;
}
.pb-card-img {
width: 70px;
height: 70px;
margin-right: 15px;
}
.pb-card-content h3 {
font-size: 1.15rem;
}
.pb-card-content p {
font-size: 0.9rem;
}
.pb-plus-icon,
.pb-close-icon {
width: 28px;
height: 28px;
font-size: 18px;
margin-left: 10px;
}
.pb-card-back p {
font-size: 0.85rem;
}
}
/* Blood Pressure Comparison Section */
.bp-comparison-section {
padding: 80px 20px;
background: #fff;
}
.bp-content-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
max-width: 1050px;
margin: 0 auto;
}
.bp-text-content {
flex: 0 0 40%;
}
.bp-eyebrow {
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 1.5px;
color: #555;
text-transform: uppercase;
display: block;
margin-bottom: 15px;
}
.bp-title {
font-size: 2.8rem;
font-weight: 800;
color: var(--text-main);
line-height: 1.1;
margin-bottom: 20px;
font-family: var(--font-heading);
}
.bp-subtitle {
font-size: 1.15rem;
color: #444;
line-height: 1.5;
}
.bp-graphic-container {
flex: 1;
background: #fff;
}
.bp-images-row {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}
.bp-image-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.bp-col-title {
font-size: 0.85rem;
font-weight: 800;
color: var(--primary-color);
letter-spacing: 0.5px;
text-transform: uppercase;
text-align: center;
margin-bottom: 20px;
}
.bp-body-img {
height: 300px;
width: auto;
object-fit: contain;
}
/* Basic tinting for placeholder silhouette images */
.bp-red-tint {
filter: sepia(1) hue-rotate(330deg) saturate(4) brightness(0.9);
}
.bp-green-tint {
filter: sepia(1) hue-rotate(80deg) saturate(3) brightness(0.9);
}
.bp-arrow {
width: 40px;
height: 40px;
color: #777;
flex-shrink: 0;
margin: 0 10px;
margin-top: 40px;
/* offset for column headers so it centers with the bodies */
}
.bp-stats-row {
display: flex;
justify-content: center;
align-items: center;
}
.bp-stat-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 20px;
}
.bp-stat-divider {
width: 1px;
height: 80px;
background-color: #eee;
}
.bp-stat-label {
font-size: 1.05rem;
color: #555;
margin-bottom: 12px;
}
.bp-stat-number {
font-size: 2.8rem;
font-weight: 800;
margin-bottom: 15px;
font-family: var(--font-heading);
}
.bp-red-text {
color: #8F2B2F;
}
.bp-green-text {
color: var(--primary-color);
}
.bp-stat-badge {
padding: 8px 30px;
border-radius: 6px;
font-size: 1rem;
font-weight: 500;
width: 100%;
max-width: 200px;
}
.bp-red-badge {
background-color: #F8E3E4;
color: #8F2B2F;
}
.bp-green-badge {
background-color: #E6F0E8;
color: var(--primary-color);
}
/* Mobile Overrides */
@media (max-width: 768px) {
.bp-comparison-section {
padding: 60px 15px;
}
.bp-content-wrapper {
flex-direction: column;
gap: 40px;
}
.bp-text-content {
flex: 1;
text-align: left;
}
.bp-title {
font-size: 2.3rem;
}
.bp-body-img {
height: 220px;
}
.bp-arrow {
margin-top: 30px;
width: 30px;
height: 30px;
margin-left: 5px;
margin-right: 5px;
}
.bp-stat-number {
font-size: 2.2rem;
}
.bp-stat-label {
font-size: 0.95rem;
}
.bp-stat-badge {
font-size: 0.9rem;
padding: 6px 20px;
}
.bp-col-title {
font-size: 0.75rem;
}
}
/* Real Stories Section */
.real-stories-section {
padding: 80px 0;
background: #fff;
overflow: hidden;
}
.rs-header {
text-align: center;
margin-bottom: 25px;
padding: 0 20px;
}
.rs-stars {
color: #FFB800;
font-size: 1.5rem;
letter-spacing: 2px;
margin-bottom: 10px;
}
.rs-title {
font-size: 2.8rem;
font-weight: 800;
color: var(--text-main);
font-family: var(--font-heading);
margin-bottom: 10px;
}
.rs-highlight {
color: var(--alert-color);
/* Match rust red color from screenshot */
}
.rs-subtitle {
font-size: 1.15rem;
color: #444;
}
/* Marquee */
.rs-marquee-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
position: relative;
padding: 20px 0 60px;
}
.rs-marquee-track {
display: inline-flex;
animation: rs-marquee-scroll 45s linear infinite;
gap: 15px;
}
.rs-marquee-track img {
height: 220px;
width: 220px;
object-fit: cover;
border-radius: 12px;
}
.rs-marquee-track:hover {
animation-play-state: paused;
}
@keyframes rs-marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-50% - 7.5px));
}
/* The -7.5px makes the loop gap perfect */
}
/* Reviews Carousel */
.rs-carousel-wrapper {
max-width: 1220px;
margin: 0 auto;
padding: 0 50px;
position: relative;
}
.rs-carousel {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 25px;
scrollbar-width: none;
/* Firefox */
}
.rs-carousel::-webkit-scrollbar {
display: none;
}
/* Webkit */
.rs-card {
flex: 0 0 calc(33.333% - 14px);
/* Desktop: 3 cards */
scroll-snap-align: start;
background: #FFFcfc;
/* subtle warm white */
border: 1px solid #f2ebeb;
border-radius: 6px;
padding: 30px 25px;
display: flex;
flex-direction: column;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}
.rs-card-stars {
color: #FFB800;
font-size: 1.1rem;
letter-spacing: 2px;
margin-bottom: 15px;
}
.rs-card-title {
font-size: 1.15rem;
font-weight: 800;
color: var(--text-main);
line-height: 1.4;
margin-bottom: 15px;
font-family: var(--font-heading);
}
.rs-card-text {
font-size: 0.95rem;
line-height: 1.6;
color: #444;
flex-grow: 1;
/* Pushes the author block to bottom */
margin-bottom: 30px;
}
.rs-author {
display: flex;
align-items: center;
}
.rs-author-avatar {
position: relative;
width: 48px;
height: 48px;
margin-right: 15px;
}
.rs-author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.rs-verified {
position: absolute;
top: -2px;
right: -2px;
background: #34A853;
color: #fff;
font-size: 9px;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
font-weight: bold;
}
.rs-author-info {
display: flex;
flex-direction: column;
}
.rs-author-info strong {
font-size: 1rem;
color: var(--text-main);
font-weight: 700;
}
.rs-author-info span {
font-size: 0.8rem;
color: #666;
}
.rs-carousel-wrapper {
position: relative;
}
.rs-carousel {
cursor: grab;
}
.rs-carousel.active {
cursor: grabbing;
}
.rs-carousel-controls {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none;
}
.rs-control-btn {
pointer-events: auto;
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
border: 1px solid #ddd;
color: #555;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.rs-control-btn svg {
width: 20px;
height: 20px;
}
.rs-control-btn:hover {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
transform: scale(1.05);
}
/* Mobile Overrides */
@media (max-width: 900px) {
.rs-card {
flex: 0 0 calc(50% - 10px);
}
}
@media (max-width: 768px) {
.real-stories-section {
padding: 60px 0;
}
.rs-title {
font-size: 2.3rem;
}
.rs-marquee-track img {
height: 160px;
width: 160px;
}
.rs-card {
flex: 0 0 calc(100% - 20px);
padding: 25px 20px;
}
/* The -20px gives a hint of the next card on mobile so users know to scroll horizontally */
}
/* Discover Experts Section */
.experts-section {
padding: 80px 20px;
background-color: var(--primary-color);
color: #fff;
text-align: center;
}
.ex-container {
max-width: 1050px;
margin: 0 auto;
}
.ex-title {
font-size: 2.7rem;
font-weight: 800;
margin-bottom: 30px;
font-family: var(--font-heading);
color: #fff;
line-height: 1.2;
}
/* Tabs */
.ex-tabs-container {
display: inline-flex;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 40px;
padding: 4px;
margin-bottom: 50px;
background: transparent;
z-index: 1;
}
.ex-tab-indicator {
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
width: calc((100% - 8px) / 3);
/* Will be perfectly overridden by JS */
background: #fff;
border-radius: 35px;
z-index: -1;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease;
}
.ex-tab {
background: transparent;
color: rgba(255, 255, 255, 0.9);
border: none;
padding: 12px 30px;
font-size: 1rem;
font-weight: 600;
font-family: var(--font-body);
border-radius: 35px;
cursor: pointer;
transition: color 0.3s ease;
}
.ex-tab:hover {
color: #fff;
}
.ex-tab.active-tab-btn {
background: transparent;
color: var(--primary-color);
}
/* Content Area */
.ex-content-wrapper {
display: none;
align-items: flex-start;
gap: 50px;
text-align: left;
animation: fadeInTab 0.4s ease forwards;
}
.ex-content-wrapper.active-content {
display: flex;
}
@keyframes fadeInTab {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ex-image-col {
flex: 0 0 45%;
}
.ex-featured-img {
width: 100%;
height: auto;
border-radius: 12px;
object-fit: cover;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.ex-text-col {
flex: 1;
}
.ex-content-title {
font-size: 2rem;
font-weight: 800;
margin-bottom: 25px;
line-height: 1.3;
color: #fff;
font-family: var(--font-heading);
}
.ex-paragraph {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 20px;
color: rgba(255, 255, 255, 0.9);
}
.ex-text-col strong {
font-weight: 700;
color: #fff;
}
/* List with checkmarks */
.ex-benefits-list {
list-style: none;
padding: 0;
margin: 30px 0 0;
}
.ex-benefits-list li {
font-size: 1.05rem;
margin-bottom: 12px;
padding-left: 28px;
position: relative;
color: rgba(255, 255, 255, 0.95);
font-weight: 500;
}
.ex-benefits-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 2px;
color: #fff;
font-weight: bold;
}
/* Mobile Overrides */
@media (max-width: 900px) {
.ex-content-wrapper {
gap: 30px;
}
}
@media (max-width: 768px) {
.experts-section {
padding: 60px 15px;
}
.ex-content-wrapper {
flex-direction: column;
gap: 40px;
}
.ex-image-col {
flex: 0 0 100%;
}
.ex-title {
font-size: 2.2rem;
}
.ex-tabs-container {
display: flex;
width: 100%;
}
.ex-tab {
flex: 1;
padding: 10px 5px;
font-size: 0.85rem;
}
}
/* Comparison Section */
.comparison-section {
padding: 120px 20px 80px;
background-color: #f7f3ed; /* light cohesive background instead of overwhelming red */
color: #333;
}
.comp-wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
}
/* LEFT: Graphic Area */
.comp-graphic-area {
flex: 1.2;
display: flex;
justify-content: center;
padding-top: 100px; /* Space for absolute bags */
}
/* True Layout based on Reference */
.comp-graphic-container {
display: flex;
flex-direction: row;
position: relative;
max-width: 650px;
width: 100%;
}
/* Col Base Settings */
.cg-brand-col, .cg-generic-col {
position: relative;
border-radius: 16px;
padding: 0 20px 30px;
display: flex;
flex-direction: column;
}
.cg-brand-col {
background-color: var(--primary-color);
color: #fff;
width: 55%;
z-index: 5;
box-shadow: 15px 0 35px rgba(0,0,0,0.25), 0 20px 40px rgba(0,0,0,0.15);
transform: scale(1.05); /* Make it taller to match reference */
transform-origin: center;
}
.cg-generic-col {
background-color: #fce8e8;
color: #333;
width: 45%;
z-index: 1; /* Slips behind brand col */
box-shadow: 0 15px 30px rgba(0,0,0,0.08);
margin-left: -5%; /* Overlap smoothly */
padding-left: calc(5% + 20px); /* Adjust padding for overlap */
transform: scale(0.95); /* Make it shorter to match reference */
transform-origin: right center;
}
/* Graphics / Pouches */
.cg-brand-pack, .cg-generic-pack {
position: absolute;
left: 50%;
transform: translateX(-50%);
filter: drop-shadow(0 15px 15px rgba(0,0,0,0.3));
z-index: 10;
}
.cg-brand-pack {
top: -120px;
height: 240px;
}
.cg-generic-pack {
top: -90px;
height: 180px;
}
/* Brand Pill */
.cg-pill-wrap {
text-align: center;
margin-top: 130px;
margin-bottom: 5px;
}
.cg-pill {
background: #fff;
color: var(--primary-color);
font-size: 0.85rem;
font-weight: 800;
padding: 4px 14px;
border-radius: 20px;
display: inline-block;
letter-spacing: 0.5px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* Sub-Titles */
.cg-brand-title, .cg-generic-title {
text-align: center;
font-family: var(--font-heading);
font-weight: 800;
margin: 0 0 20px;
line-height: 1.25;
}
.cg-brand-title {
font-size: 1.5rem;
color: #fff;
}
.cg-generic-title {
margin-top: 100px;
font-size: 1.3rem;
color: #333;
}
/* Rows & Icons */
.cg-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: 16px 5px;
}
.cg-brand-col .cg-row {
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.cg-generic-col .cg-row {
border-bottom: 1px solid rgba(0,0,0,0.15);
}
.cg-row.cg-border-none {
border-bottom: none !important;
}
.cg-icon {
flex-shrink: 0;
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.cg-icon svg {
width: 20px;
height: 20px;
}
.check-svg { fill: #4CAF50; }
.cross-svg { fill: #FF1744; }
.cg-text {
font-size: 1.05rem;
font-weight: 600;
line-height: 1.35;
}
/* RIGHT: Text & CTA Layout */
.comp-text-area {
flex: 0.8;
display: flex;
flex-direction: column;
align-items: flex-start; /* Align CTA content to left on desktop per instructions */
margin-top: 20px;
}
.comp-title {
font-size: 3.2rem;
font-weight: 800;
line-height: 1.1;
font-family: var(--font-heading);
margin-bottom: 30px;
color: #111;
text-align: left;
}
.comp-benefits-list {
list-style: none;
padding: 0;
margin: 0 0 40px;
}
.comp-benefits-list li {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 20px;
padding-left: 40px;
position: relative;
color: #333;
}
.comp-benefits-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #4CAF50;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
}
.comp-cta-wrap {
width: 100%;
text-align: center; /* Center CTA within its wrap */
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
}
.comp-cta-btn {
width: 100%;
max-width: 380px;
background: var(--alert-color);
color: #fff;
text-align: center;
padding: 22px 30px;
font-size: 1.4rem;
font-weight: 800;
border-radius: 8px;
text-transform: uppercase;
transition: all 0.3s ease;
border: none;
cursor: pointer;
box-shadow: 0 10px 25px rgba(220,53,69, 0.4); /* Refined shadow */
}
.comp-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(220,53,69, 0.5);
}
.comp-guarantee {
margin-top: 20px;
font-size: 1.05rem;
color: #555;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
.guar-icon {
width: 18px;
height: 18px;
margin-right: 8px;
}
.desktop-only-title { display: block; }
.mobile-only-title { display: none; }
/* Mobile Overrides */
@media (max-width: 1000px) {
.comparison-section {
padding-top: 30px;
padding-bottom: 40px;
}
.comp-wrapper {
flex-direction: column;
gap: 20px;
}
.comp-title {
text-align: center;
margin-bottom: 20px;
font-size: 2.5rem;
}
.desktop-only-title { display: none; }
.mobile-only-title {
display: block;
margin-bottom: 0px;
}
.comp-graphic-area {
width: 100%;
padding-top: 120px;
margin-bottom: 40px;
}
.comp-text-area {
align-items: center; /* Center benefits list on mobile */
}
.comp-benefits-list li {
font-size: 1.15rem;
}
/* Keep exact graphic overlap logic but scale it for mobile width */
.comp-graphic-container {
max-width: 100vw;
padding: 0 10px;
}
.cg-brand-col {
width: 55%;
padding: 0 12px 20px;
}
.cg-generic-col {
width: 50%; /* Make slightly wider than 45 to compensate scale */
margin-left: -5%;
padding: 0 12px 20px;
padding-left: calc(5% + 12px);
}
.cg-pill-wrap { margin-top: 105px; }
.cg-brand-title {
font-size: 1.25rem;
margin-bottom: 15px;
}
.cg-generic-title {
font-size: 1.15rem;
margin-top: 90px;
margin-bottom: 15px;
}
.cg-brand-pack {
height: 190px;
top: -100px;
}
.cg-generic-pack {
height: 140px;
top: -70px;
}
.cg-row {
padding: 10px 0;
}
.cg-text {
font-size: 0.9rem;
word-break: break-word; /* Ensure bioavailability fits */
line-height: 1.2;
}
.cg-icon {
margin-right: 6px;
}
.cg-icon svg {
width: 16px;
height: 16px;
}
}
@media (max-width: 480px) {
.cg-text {
font-size: 0.8rem;
}
.cg-brand-pack { height: 160px; top: -85px; }
.cg-generic-pack { height: 120px; top: -60px; }
.cg-pill-wrap { margin-top: 90px; }
.cg-generic-title { margin-top: 80px; }
.cg-brand-title, .cg-generic-title { font-size: 1.05rem; }
}
/* Site Footer */
.site-footer {
background: linear-gradient(135deg, var(--primary-color) 0%, #16281e 100%);
color: #fff;
padding: 30px 0 20px;
text-align: left;
}
.footer-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.footer-brand .logo {
max-height: 35px !important;
}
.footer-brand p {
font-size: 0.85rem;
color: #b8c5be;
margin-top: 2px;
font-weight: 500;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px 20px;
}
.footer-links a {
color: #fff;
text-decoration: none;
font-size: 0.85rem;
font-weight: 700;
transition: color 0.2s;
}
.footer-links a:hover {
color: var(--accent-color);
}
.footer-contact {
display: flex;
flex-direction: column;
align-items: flex-end;
font-size: 0.85rem;
color: #b8c5be;
font-weight: 500;
}
.footer-contact strong {
color: #fff;
margin-bottom: 5px;
font-weight: 700;
}
.footer-contact p {
margin: 2px 0;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 15px;
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.footer-bottom p {
font-size: 0.8rem;
color: #a0b0a8;
line-height: 1.4;
}
/* Mobile Tweak: Allow minimal wrap if screens are incredibly small, but default to row layout */
@media (max-width: 500px) {
.footer-content {
flex-wrap: wrap;
justify-content: center;
text-align: center;
gap: 15px;
}
.footer-brand p {
text-align: center;
}
.footer-links {
justify-content: center;
}
.footer-contact {
align-items: center;
}
}
/* Trusted Customers Banner */
.trusted-customers-banner {
display: flex;
align-items: center;
background-color: #f7f7f7;
border-radius: 50px;
padding: 10px 25px 10px 10px;
max-width: 100%;
width: fit-content;
box-sizing: border-box;
margin: 0 auto 25px;
gap: 15px;
}
.trusted-avatars {
display: flex;
align-items: center;
flex-shrink: 0;
}
.trusted-avatar {
width: 54px;
height: 54px;
border-radius: 50%;
border: 3px solid #fff;
object-fit: cover;
margin-right: -15px;
position: relative;
z-index: 1;
}
.trusted-avatar:nth-child(2) {
z-index: 2;
}
.trusted-avatar-wrapper {
position: relative;
margin-right: 0;
z-index: 3;
width: 54px;
height: 54px;
border-radius: 50%;
border: 3px solid #fff;
background: #eaeaea;
}
.trusted-avatar-wrapper img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.trusted-checkmark {
position: absolute;
top: -4px;
right: -4px;
background-color: #4ade80;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #fff;
}
.trusted-text {
display: flex;
flex-direction: column;
text-align: left;
line-height: 1.35;
min-width: 0;
}
.trusted-text strong {
font-size: 1.15rem;
font-weight: 800;
color: #111;
}
.trusted-text span {
font-size: 0.95rem;
color: #333;
}
@media (max-width: 600px) {
.trusted-customers-banner {
padding: 8px 15px 8px 8px;
gap: 8px;
width: 100%;
border-radius: 30px;
}
.trusted-avatar,
.trusted-avatar-wrapper {
width: 40px;
height: 40px;
margin-right: -10px;
}
.trusted-text {
line-height: 1.2;
}
.trusted-text strong {
font-size: 0.9rem;
}
.trusted-text span {
font-size: 0.75rem;
word-wrap: break-word;
}
}
/* Price Total Mode Overrides */
body.price-total-mode .option-per-day-wrapper,
body.price-total-mode .drawer-per-day-wrapper {
display: none !important;
}
body.price-total-mode .option-total-wrapper {
font-size: 1.8rem !important;
font-weight: 900 !important;
color: var(--primary-color) !important;
margin-top: 0 !important;
line-height: 1.1 !important;
}
body.price-total-mode .drawer-total-wrapper {
font-size: 1.5rem !important;
font-weight: 900 !important;
color: var(--primary-color) !important;
margin-top: 0 !important;
line-height: 1.1 !important;
}
body.price-total-mode .total-text-label,
body.price-total-mode .drawer-total-text-label {
display: none !important;
}
body.price-total-mode .option-strike {
font-size: 1.05rem !important;
font-weight: 700 !important;
color: #888 !important;
text-decoration: line-through !important;
margin-right: 5px !important;
vertical-align: baseline;
}
body.price-total-mode .cart-item-strike {
font-size: 0.95rem !important;
font-weight: 700 !important;
color: #888 !important;
text-decoration: line-through !important;
margin-right: 3px !important;
vertical-align: baseline;
}
body.price-total-mode .option-price,
body.price-total-mode .cart-item-price {
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
vertical-align: baseline;
}