/*
Theme Name: AuraAcademy
Author: Senior WP Architect
Author URI: http://example.com
Description: A fully custom, production-ready WooCommerce theme with modern UI/UX, high performance, and strong security practices.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: AuraAcademy
Tags: woocommerce, custom-background, custom-colors, custom-logo, custom-menu, e-commerce, featured-images, flexible-header, footer-widgets, full-width-template, theme-options, threaded-comments, translation-ready
*/


/* ╔════════════════════════════════════════════════════════════════╗
   ║  GLOBAL DESIGN SYSTEM                                        ║
   ║  Reta — Scalable foundation for typography, colors, spacing, ║
   ║  buttons, forms, and responsive defaults.                    ║
   ╚════════════════════════════════════════════════════════════════╝ */


/* ────────────────────────────────────────
   1. BOX MODEL & RESET
   ──────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}


/* ────────────────────────────────────────
   2. BODY DEFAULTS
   ──────────────────────────────────────── */
body {
    font-family: var(--font-body, 'Inter', system-ui, -apple-system, sans-serif);
    font-size: 1rem;            /* 16px base */
    line-height: 1.625;
    color: var(--color-text-main);
    background-color: var(--color-bg-body);
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}


/* ────────────────────────────────────────
   3. RESPONSIVE TYPOGRAPHY
   Mobile-first: base → sm(640) → md(768) → lg(1024) → xl(1280)
   ──────────────────────────────────────── */

/* ── Headings (shared) ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, 'Outfit', system-ui, sans-serif);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    margin-top: 0;
    margin-bottom: 0.75em;
    overflow-wrap: break-word;
}

/* H1 — Page/Hero titles */
h1 {
    font-size: 2.25rem;     /* 36px mobile */
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* H2 — Section headings */
h2 {
    font-size: 1.75rem;     /* 28px mobile */
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

/* H3 — Card/sub-section headings */
h3 {
    font-size: 1.375rem;    /* 22px mobile */
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* H4 — Minor headings */
h4 {
    font-size: 1.125rem;    /* 18px mobile */
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* H5 */
h5 {
    font-size: 1rem;        /* 16px mobile */
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
}

/* H6 */
h6 {
    font-size: 0.875rem;    /* 14px mobile */
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* ── Tablet (768px+) ── */
@media (min-width: 768px) {
    h1 { font-size: 3rem; }            /* 48px */
    h2 { font-size: 2.25rem; }         /* 36px */
    h3 { font-size: 1.5rem; }          /* 24px */
    h4 { font-size: 1.25rem; }         /* 20px */
    h5 { font-size: 1.125rem; }        /* 18px */
    h6 { font-size: 0.9375rem; }       /* 15px */
}

/* ── Desktop (1024px+) ── */
@media (min-width: 1024px) {
    h1 { font-size: 3.5rem; }          /* 56px */
    h2 { font-size: 2.5rem; }          /* 40px */
    h3 { font-size: 1.75rem; }         /* 28px */
    h4 { font-size: 1.375rem; }        /* 22px */
    h5 { font-size: 1.25rem; }         /* 20px */
    h6 { font-size: 1rem; }            /* 16px */
}

/* ── Large Desktop (1280px+) ── */
@media (min-width: 1280px) {
    h1 { font-size: 3.75rem; }         /* 60px */
    h2 { font-size: 2.75rem; }         /* 44px */
    h3 { font-size: 1.875rem; }        /* 30px */
}


/* ── Paragraph ── */
p {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 1rem;        /* 16px */
    line-height: 1.625;
    color: var(--color-text-main);
    /* margin-top: 0;
    margin-bottom: 1em; */
    overflow-wrap: break-word;
}
@media (min-width: 768px) {
    p { font-size: 1.0625rem; }         /* 17px */
}
@media (min-width: 1024px) {
    p { font-size: 1.0625rem; }         /* 17px — capped for readability */
}


/* ── Links ── */
a {
    color: var(--color-primary-600);
    text-decoration: none;
    transition: color var(--transition-fast, 0.2s ease);
}
/* a:hover {
    color: var(--color-primary-700);
} */
a:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    border-radius: 2px;
}


/* ── Lists ── */
ul, ol {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.625;
    color: var(--color-text-main);
    /* margin-top: 0;
    margin-bottom: 1em;
    padding-left: 1.5em; */
}
@media (min-width: 768px) {
    ul, ol { font-size: 1.0625rem; }
}

li {
    margin-bottom: 0.375em;
}
li:last-child {
    margin-bottom: 0;
}

/* Nested lists */
ul ul, ul ol, ol ul, ol ol {
    margin-top: 0.375em;
    margin-bottom: 0;
}


/* ── Small text ── */
small,
.text-small {
    font-size: 0.8125rem;   /* 13px */
    line-height: 1.5;
}
@media (min-width: 768px) {
    small, .text-small { font-size: 0.875rem; }  /* 14px */
}


/* ── Blockquote ── */
blockquote {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 1.125rem;
    line-height: 1.7;
    font-style: italic;
    color: var(--color-text-muted);
    border-left: 4px solid var(--color-primary-500);
    padding: 1rem 1.5rem;
    margin: 1.5em 0;
    background: var(--color-bg-surface);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
blockquote p {
    margin-bottom: 0;
}
blockquote cite {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    color: var(--color-text-main);
}

/* ── Code / Pre ── */
code {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border-radius: var(--radius-sm, 0.25rem);
}
pre {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
    overflow-x: auto;
    margin: 1.5em 0;
}
pre code {
    padding: 0;
    background: transparent;
    font-size: inherit;
}

/* ── Strong & Emphasis ── */
strong, b {
    font-weight: 700;
    color: var(--color-text-main);
}
em, i {
    font-style: italic;
}

/* ── Horizontal Rule ── */
hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2rem 0;
}

/* ── Selection ── */
::selection {
    background: var(--color-primary-200);
    color: var(--color-primary-900);
}

/* ── Prose / Block Editor Content Overrides ── */
.prose {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
    color: var(--color-text-main) !important;
    max-width: none !important;
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    font-family: var(--font-heading, 'Outfit', system-ui, sans-serif) !important;
    color: var(--color-text-main) !important;
    font-weight: 800 !important;
}
.prose p {
    color: var(--color-text-main) !important;
}
.prose a {
    color: var(--color-primary-600) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color var(--transition-fast, 0.2s ease) !important;
}
.prose a:hover {
    color: var(--color-primary-700) !important;
}
.prose strong {
    color: var(--color-text-main) !important;
    font-weight: 700 !important;
}
.prose blockquote {
    border-left-color: var(--color-primary-500) !important;
    background: var(--color-bg-surface) !important;
    color: var(--color-text-muted) !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}
.prose ol li::marker {
    color: var(--color-primary-600) !important;
    font-weight: 600 !important;
}
.prose ul li::marker {
    color: var(--color-primary-500) !important;
}
.prose code {
    background: var(--color-primary-50) !important;
    color: var(--color-primary-700) !important;
    font-weight: inherit !important;
}
.prose pre {
    background: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
}
.prose pre code {
    background: transparent !important;
    color: inherit !important;
}



/* ────────────────────────────────────────
   4. IMAGES & MEDIA
   ──────────────────────────────────────── */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
img {
    height: auto;
}
/* Let inline SVGs (icons) stay inline unless overridden */
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 1.5em 0;
}
figcaption {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
    text-align: center;
}


/* ────────────────────────────────────────
   5. FORM ELEMENTS — Global
   ──────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-main);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 0.5rem);
    padding: 0.625rem 0.875rem;
    width: 100%;
    transition: border-color var(--transition-fast, 0.2s ease),
                box-shadow var(--transition-fast, 0.2s ease);
    -webkit-appearance: none;
    appearance: none;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(6, 78, 53, 0.12);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 0.375rem;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

legend {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 0.75rem;
}

/* Disabled state */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--color-bg-body);
    opacity: 0.6;
    cursor: not-allowed;
}


/* ────────────────────────────────────────
   6. BUTTON SYSTEM
   Base + variants for consistency across
   the entire theme.
   ──────────────────────────────────────── */

/* Shared button base */
/* .btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-sm, 0.5rem);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-normal, 0.3s ease);
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
} */

/* Default button style (neutral) */
/* button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    background-color: var(--color-primary-700);
    color: var(--color-primary-50);
    border-color: var(--color-primary-700);
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--color-primary-800);
    border-color: var(--color-primary-800);
} */

/* ── .btn-primary — Main CTA ── */
.btn-primary {
    background-color: var(--color-primary-700);
    color: var(--color-primary-50);
    border-color: var(--color-primary-700);
}
.btn-primary:hover {
    background-color: var(--color-primary-800);
    border-color: var(--color-primary-800);
    box-shadow: 0 4px 16px rgba(6, 78, 53, 0.25);
    transform: translateY(-1px);
}

/* ── .btn-outline — Bordered ── */
.btn-outline {
    background-color: transparent;
    color: var(--color-text-main);
    border-color: var(--color-border);
}
.btn-outline:hover {
    background-color: var(--color-bg-body);
    border-color: var(--color-text-muted);
}

/* ── .btn-ghost — No border ── */
.btn-ghost {
    background-color: transparent;
    color: var(--color-text-main);
    border-color: transparent;
}
.btn-ghost:hover {
    background-color: var(--color-bg-body);
}

/* ── .btn-danger — Destructive ── */
.btn-danger {
    background-color: var(--color-error);
    color: #fff;
    border-color: var(--color-error);
}
.btn-danger:hover {
    background-color: var(--color-error-dark);
    border-color: var(--color-error-dark);
}

/* ── Size modifiers ── */
.btn-sm {
    font-size: 0.75rem;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-sm, 0.375rem);
}
.btn-lg {
    font-size: 1rem;
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-md, 0.75rem);
}

/* ── Pill shape ── */
.btn-pill {
    border-radius: var(--radius-full, 9999px);
}

/* ── Full-width ── */
.btn-block {
    display: flex;
    width: 100%;
}

/* ── Disabled state ── */
.btn:disabled,
button:disabled,
input[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* ── Focus for accessibility ── */
.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}


/* ────────────────────────────────────────
   7. TABLE DEFAULTS
   ──────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    margin-bottom: 1.5em;
}
th {
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    color: var(--color-text-main);
    background-color: var(--color-bg-body);
    border-bottom: 2px solid var(--color-border);
}
td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-main);
    vertical-align: top;
}
tr:last-child td {
    border-bottom: none;
}


/* ────────────────────────────────────────
   8. UTILITY HELPERS
   ──────────────────────────────────────── */

/* Text colors */
.text-main      { color: var(--color-text-main); }
.text-muted     { color: var(--color-text-muted); }
.text-primary   { color: var(--color-primary-600); }
.text-success   { color: var(--color-success); }
.text-error     { color: var(--color-error); }
.text-warning   { color: var(--color-warning); }

/* Background colors */
.bg-body        { background-color: var(--color-bg-body); }
.bg-surface     { background-color: var(--color-bg-surface); }

/* Font families */
.font-body      { font-family: var(--font-body); }
.font-display   { font-family: var(--font-heading); }

/* Font weights */
.fw-regular     { font-weight: 400; }
.fw-medium      { font-weight: 500; }
.fw-semibold    { font-weight: 600; }
.fw-bold        { font-weight: 700; }
.fw-extrabold   { font-weight: 800; }

/* Truncation */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Visually hidden (SR only) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Section spacing utility */
.section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
@media (min-width: 768px) {
    .section-padding {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}
@media (min-width: 1024px) {
    .section-padding {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

/* Container utility */
.container-narrow {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .container-narrow {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}


/* ────────────────────────────────────────
   9. ACCESSIBILITY
   ──────────────────────────────────────── */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ────────────────────────────────────────
   10. PRINT
   ──────────────────────────────────────── */
@media print {
    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }
    header, footer, .reta-back-to-top, .btn-forest, .btn-secondary {
        display: none !important;
    }
    a { color: #000; text-decoration: underline; }
    h1, h2, h3 { page-break-after: avoid; }
    img { max-width: 100% !important; }
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║  END GLOBAL DESIGN SYSTEM                                    ║
   ║  Page/component-specific styles below                        ║
   ╚════════════════════════════════════════════════════════════════╝ */


.woocommerce form .my-account-address-section .form-row {
    width: 100%;
}

.woocommerce form .my-account-address-section .form-row input,
.woocommerce form .my-account-address-section .form-row select {
    height: 40px;
}

.woocommerce form .my-account-address-section p#_address_2_field {
    display: none;
}

.woocommerce-checkout.woocommerce-page .woocommerce form .form-row-first,
.woocommerce-checkout.woocommerce-page .woocommerce form .form-row-last,
.woocommerce-checkout.woocommerce-page .woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
    width: 48% !important;
}

.woocommerce-checkout.woocommerce-page .woocommerce form .form-row-first {
    float: left !important;
    clear: left !important;
}

.woocommerce-checkout.woocommerce-page .woocommerce form .form-row-last {
    float: right !important;
    clear: right !important;
}

.woocommerce-checkout.woocommerce-page .woocommerce form .form-row-wide {
    clear: both !important;
    width: 100% !important;
}

/* Checkout Form Fields Styling */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    background-color: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0.75rem !important; /* rounded-xl */
    font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
    font-size: 0.875rem !important;
    color: var(--color-text-main) !important;
    padding: 0.75rem 1rem !important;
    height: 52px !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
}

.woocommerce-checkout .form-row textarea {
    height: 120px !important;
}

.woocommerce-checkout .form-row input[type="text"]:focus,
.woocommerce-checkout .form-row input[type="email"]:focus,
.woocommerce-checkout .form-row input[type="tel"]:focus,
.woocommerce-checkout .form-row input[type="password"]:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
    border-color: var(--color-primary-500) !important;
    box-shadow: 0 0 0 3px var(--color-primary-100) !important;
    background-color: var(--color-bg-surface) !important;
}

.woocommerce-checkout .form-row label {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--color-text-main) !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

.woocommerce-checkout .form-row label .required {
    color: var(--color-error) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

/* Select2 drop-downs styling */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    background-color: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0.75rem !important;
    height: 52px !important;
    padding: 0.75rem 1rem !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single:focus,
.woocommerce-checkout .select2-container--default .select2-selection--single.select2-container--focus {
    border-color: var(--color-primary-500) !important;
    box-shadow: 0 0 0 3px var(--color-primary-100) !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text-main) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: normal !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 52px !important;
    right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-text-muted) transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
}

.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--color-text-muted) transparent !important;
    border-width: 0 4px 5px 4px !important;
}

/* Checkboxes and Radios styling */
.woocommerce-checkout input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-radius: 0.375rem !important; /* rounded-md */
    width: 1.25rem !important;
    height: 1.25rem !important;
    vertical-align: middle !important;
}

.woocommerce-checkout input[type="checkbox"]:checked {
    background-color: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
}

.woocommerce-checkout input[type="checkbox"]:checked::after {
    content: "" !important;
    display: block !important;
    width: 0.375rem !important;
    height: 0.625rem !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) translate(-0.5px, -1.5px) !important;
}

.woocommerce-checkout input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-radius: 9999px !important; /* rounded-full */
    width: 1.25rem !important;
    height: 1.25rem !important;
    vertical-align: middle !important;
}

.woocommerce-checkout input[type="radio"]:checked {
    border-color: var(--color-primary-600) !important;
    background-color: var(--color-bg-surface) !important;
}

.woocommerce-checkout input[type="radio"]:checked::after {
    content: "" !important;
    display: block !important;
    width: 0.625rem !important;
    height: 0.625rem !important;
    border-radius: 9999px !important;
    background-color: var(--color-primary-600) !important;
}

.woocommerce-checkout input[type="checkbox"]:focus,
.woocommerce-checkout input[type="radio"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--color-primary-100) !important;
}

/* Dark mode checked states */
.dark .woocommerce-checkout input[type="checkbox"]:checked {
    background-color: var(--color-primary-500) !important;
    border-color: var(--color-primary-500) !important;
}

.dark .woocommerce-checkout input[type="radio"]:checked {
    border-color: var(--color-primary-500) !important;
}

.dark .woocommerce-checkout input[type="radio"]:checked::after {
    background-color: var(--color-primary-500) !important;
}

/* Card Selected/Active styling (using modern :has selector) */
.woocommerce-checkout .wc_payment_method:has(input[type="radio"]:checked) {
    border-color: var(--color-primary-600) !important;
    background-color: rgba(5, 150, 105, 0.03) !important;
    box-shadow: 0 0 0 1px var(--color-primary-600) !important;
}

.dark .woocommerce-checkout .wc_payment_method:has(input[type="radio"]:checked) {
    border-color: var(--color-primary-500) !important;
    background-color: rgba(16, 185, 129, 0.05) !important;
    box-shadow: 0 0 0 1px var(--color-primary-500) !important;
}

.woocommerce-checkout .reta-delivery-method-card:has(input.shipping_method:checked) {
    border-color: var(--color-primary-600) !important;
    background-color: rgba(5, 150, 105, 0.03) !important;
    box-shadow: 0 0 0 1px var(--color-primary-600) !important;
}

.dark .woocommerce-checkout .reta-delivery-method-card:has(input.shipping_method:checked) {
    border-color: var(--color-primary-500) !important;
    background-color: rgba(16, 185, 129, 0.05) !important;
    box-shadow: 0 0 0 1px var(--color-primary-500) !important;
}

/* Order Review Box Card styling */
.woocommerce-checkout-review-order {
    background-color: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 1.5rem !important; /* rounded-3xl */
    padding: 2rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.02), 0 4px 6px -2px rgba(0, 0, 0, 0.01) !important;
}

/* Place Order Submit button */
.woocommerce-checkout button#place_order {
    width: 100% !important;
    height: 56px !important;
    border-radius: 9999px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background-color: var(--color-primary-600) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.1), 0 2px 4px -1px rgba(5, 150, 105, 0.06) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 1.5rem !important;
}

.woocommerce-checkout button#place_order:hover {
    background-color: var(--color-primary-700) !important;
    box-shadow: 0 10px 15px -3px rgba(5, 150, 105, 0.2), 0 4px 6px -2px rgba(5, 150, 105, 0.1) !important;
    transform: translateY(-1px) !important;
}

.woocommerce-checkout button#place_order:active {
    transform: translateY(1px) !important;
}

/* Payment box overrides (remove default speech bubble) */
.woocommerce-checkout #payment div.payment_box {
    background-color: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    margin: 0.75rem 0 0 0 !important;
    color: var(--color-text-muted) !important;
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
}

.woocommerce-checkout #payment div.payment_box::before {
    display: none !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: none !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
    margin-bottom: 0.75rem !important;
    list-style: none !important;
}

/* Coupon section button */
.reta-coupon-section button.button {
    height: 52px !important;
    border-radius: 0.75rem !important;
    padding: 0 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    background-color: var(--color-primary-600) !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer;
}

.reta-coupon-section button.button:hover {
    background-color: var(--color-primary-700) !important;
}

/* WooCommerce Default Checkout Coupon Form and Info notice styling */
.woocommerce-checkout .woocommerce-info {
    border-top: 3px solid var(--color-primary-600) !important;
    background-color: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 4px solid var(--color-primary-600) !important;
    color: var(--color-text-main) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0.75rem !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.woocommerce-checkout .woocommerce-info a {
    color: var(--color-primary-600) !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    transition: color 0.2s ease !important;
}

.woocommerce-checkout .woocommerce-info a:hover {
    color: var(--color-primary-700) !important;
    text-decoration: none !important;
}

.woocommerce-checkout form.checkout_coupon {
    display: none; /* Handled by WooCommerce JS toggle */
    margin: 1.5rem auto !important;
    padding: 1.5rem !important;
    max-width: 40rem !important;
    background-color: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
    clear: both !important;
}

.woocommerce-checkout form.checkout_coupon .form-row-first {
    width: 65% !important;
    float: left !important;
    margin-bottom: 0 !important;
}

.woocommerce-checkout form.checkout_coupon .form-row-last {
    width: 32% !important;
    float: right !important;
    margin-bottom: 0 !important;
}

.woocommerce-checkout form.checkout_coupon input#coupon_code {
    width: 100% !important;
    height: 52px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    background-color: var(--color-bg-body) !important;
    color: var(--color-text-main) !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.woocommerce-checkout form.checkout_coupon input#coupon_code:focus {
    border-color: var(--color-primary-500) !important;
    box-shadow: 0 0 0 3px var(--color-primary-100) !important;
    background-color: var(--color-bg-surface) !important;
}

.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
    width: 100% !important;
    height: 52px !important;
    border-radius: 0.75rem !important;
    background-color: var(--color-primary-600) !important;
    color: #ffffff !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:hover {
    background-color: var(--color-primary-700) !important;
}

/* Mobile Navigation Menu */
#mobile-menu .mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

#mobile-menu .mobile-nav-menu li {
    list-style: none;
}

#mobile-menu .mobile-nav-menu li a {
    display: block;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-main);
    border-radius: 8px;
    transition: all 0.2s;
    text-decoration: none;
}

#mobile-menu .mobile-nav-menu li a:hover {
    background-color: var(--color-primary-50);
    color: var(--color-primary-600);
}

#mobile-menu .mobile-nav-menu li.current-menu-item>a {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    font-weight: 600;
}

/* Search Overlay */
#search-overlay.active {
    pointer-events: auto;
    opacity: 1;
}

#search-overlay.active .search-content {
    transform: translateY(0);
}

/* Back to Top Button */
.reta-back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 50;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-700);
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.reta-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.reta-back-to-top:hover {
    background-color: var(--color-primary-800);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Product Detail Action Buttons normalization */
.reta-product-form form.cart:not(.variations_form),
.reta-product-form .woocommerce-variation-add-to-cart,
.quick-look-add-to-cart form.cart:not(.variations_form),
.quick-look-add-to-cart .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    margin-top: 1.5rem !important;
}

/* Cart page quantity stepper styles */
.reta-cart-qty input.qty {
    -moz-appearance: textfield !important;
    width: 2.5rem !important;
    height: 1.25rem !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--color-text-main) !important;
    outline: none !important;
    box-shadow: none !important;
}

.reta-cart-qty input.qty::-webkit-outer-spin-button,
.reta-cart-qty input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Quantity input stepper */
.reta-product-form .quantity,
.quick-look-add-to-cart .quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 9999px !important;
    padding: 3px !important;
    height: 56px !important;
    background-color: var(--color-bg-surface) !important;
    position: relative !important;
    width: auto !important;
    margin: 0 !important;
}

.reta-product-form .quantity input.qty::-webkit-outer-spin-button,
.reta-product-form .quantity input.qty::-webkit-inner-spin-button,
.quick-look-add-to-cart .quantity input.qty::-webkit-outer-spin-button,
.quick-look-add-to-cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.reta-product-form .quantity input.qty,
.quick-look-add-to-cart .quantity input.qty {
    -moz-appearance: textfield !important;
    width: 3.5rem !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    color: var(--color-text-main) !important;
    outline: none !important;
    box-shadow: none !important;
}

.reta-product-form .quantity .reta-qty-minus,
.reta-product-form .quantity .reta-qty-plus,
.quick-look-add-to-cart .quantity .reta-qty-minus,
.quick-look-add-to-cart .quantity .reta-qty-plus {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    color: var(--color-text-muted) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    padding: 0 !important;
}

.reta-product-form .quantity .reta-qty-minus:hover,
.reta-product-form .quantity .reta-qty-plus:hover,
.quick-look-add-to-cart .quantity .reta-qty-minus:hover,
.quick-look-add-to-cart .quantity .reta-qty-plus:hover {
    color: var(--color-text-main) !important;
    background-color: var(--color-bg-body) !important;
}

/* Single product page and Quick Look Add to Cart Button */
.reta-product-form .single_add_to_cart_button,
.quick-look-add-to-cart .single_add_to_cart_button {
    height: 56px !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0 2.5rem !important;
    background-color: var(--color-text-main) !important;
    color: var(--color-bg-surface) !important;
    border: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.reta-product-form .single_add_to_cart_button:hover,
.quick-look-add-to-cart .single_add_to_cart_button:hover {
    background-color: var(--color-primary-600) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(5, 150, 105, 0.15), 0 4px 6px -2px rgba(5, 150, 105, 0.1) !important;
    transform: translateY(-1px) !important;
}

.reta-product-form .single_add_to_cart_button:active,
.quick-look-add-to-cart .single_add_to_cart_button:active {
    transform: translateY(1px) !important;
}

.reta-product-form .single_add_to_cart_button:disabled,
.quick-look-add-to-cart .single_add_to_cart_button:disabled {
    background-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.reta-action-row .reta-buy-now {
    height: 56px !important;
}

.reta-action-row .add-to-wishlist {
    height: 56px !important;
    width: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Variations Form Styling */
.reta-product-form table.variations,
.quick-look-add-to-cart table.variations {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 1.5rem !important;
    border: none !important;
    background: transparent !important;
}

.reta-product-form table.variations tr,
.quick-look-add-to-cart table.variations tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-bottom: 1.25rem !important;
    border: none !important;
    background: transparent !important;
}

@media (min-width: 640px) {
    .reta-product-form table.variations tr,
    .quick-look-add-to-cart table.variations tr {
        flex-direction: row !important;
        align-items: center !important;
        gap: 1.5rem !important;
    }
}

.reta-product-form table.variations th.label,
.quick-look-add-to-cart table.variations th.label {
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    min-width: 90px !important;
    background: transparent !important;
}

.reta-product-form table.variations th.label label,
.quick-look-add-to-cart table.variations th.label label {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--color-text-main) !important;
}

.reta-product-form table.variations td.value,
.quick-look-add-to-cart table.variations td.value {
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.75rem !important;
    background: transparent !important;
}

/* Custom swatches buttons inside product detail and quicklook */
.reta-product-form .variation-swatch,
.quick-look-add-to-cart .variation-swatch {
    height: 44px !important;
    padding: 0 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--color-text-main) !important;
    background-color: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 9999px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.reta-product-form .variation-swatch:hover:not(:disabled),
.quick-look-add-to-cart .variation-swatch:hover:not(:disabled) {
    border-color: var(--color-primary-500) !important;
    color: var(--color-primary-600) !important;
    background-color: var(--color-primary-50) !important;
}

.reta-product-form .variation-swatch.bg-primary-600,
.quick-look-add-to-cart .variation-swatch.bg-primary-600 {
    border-color: var(--color-primary-600) !important;
    background-color: var(--color-primary-600) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.1), 0 2px 4px -1px rgba(5, 150, 105, 0.06) !important;
}

/* Color swatches inside detail and quicklook */
.reta-product-form .reta-color-swatch,
.quick-look-add-to-cart .reta-color-swatch {
    border-color: var(--color-border) !important;
    transition: all 0.2s ease !important;
}

.reta-product-form .reta-color-swatch:hover:not(:disabled),
.quick-look-add-to-cart .reta-color-swatch:hover:not(:disabled) {
    border-color: var(--color-primary-500) !important;
    transform: scale(1.05) !important;
}

.reta-product-form .reta-color-swatch.border-primary-600,
.quick-look-add-to-cart .reta-color-swatch.border-primary-600 {
    border-color: var(--color-primary-600) !important;
    box-shadow: 0 0 0 2px var(--color-primary-100) !important;
}

/* Variation reset link */
.reta-product-form .reset_variations,
.quick-look-add-to-cart .reset_variations {
    display: inline-block !important;
    margin-top: 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--color-error) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.reta-product-form .reset_variations:hover,
.quick-look-add-to-cart .reset_variations:hover {
    color: var(--color-error-dark) !important;
}

/* Variation price section */
.reta-product-form .woocommerce-variation,
.quick-look-add-to-cart .woocommerce-variation {
    margin-bottom: 1rem !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.reta-product-form .woocommerce-variation .price,
.quick-look-add-to-cart .woocommerce-variation .price {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--color-text-main) !important;
}

/* Breadcrumbs Optimization */
.woocommerce-breadcrumb {
    font-size: 0.8125rem !important;
    color: var(--color-text-muted) !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 5px !important;
}

.woocommerce-breadcrumb::-webkit-scrollbar {
    display: none;
}

.woocommerce-breadcrumb a {
    color: var(--color-text-main) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.woocommerce-breadcrumb a:hover {
    color: var(--color-primary-600) !important;
}

.woocommerce div.product form.cart {
    margin: 0;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    color: var(--color-text-main);
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price ins {
    text-decoration: none;
}

.single-product.woocommerce div.product form.cart .variations {
    margin-bottom: 0;
}

.single-product .reta-product-form table.variations tr {
    margin-bottom: 0;
}

#primary-menu {
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    #primary-menu {
        gap: 2rem;
    }
}
#primary-menu li {
    list-style: none;
    display: inline-block;
}
#primary-menu li a {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-main);
    padding: 0.5rem 0.25rem;
    transition: color var(--transition-fast, 0.2s ease);
    position: relative;
}
#primary-menu li a:hover {
    color: var(--color-primary-600);
}
#primary-menu li.current_page_item a,
#primary-menu li.current-menu-item a {
    color: var(--color-primary-600);
    background: transparent !important;
}
#primary-menu li.current_page_item a::after,
#primary-menu li.current-menu-item a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 4px;
    right: 4px;
    height: 2px;
    background: var(--color-primary-500);
    border-radius: 99px;
}



@media (max-width: 768px) {
    .woocommerce-breadcrumb {
        margin-top: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
}

#reta-wishlist-content li.product {
    list-style: none;
}

/* ── Swiper Custom Pagination Styles ── */
.swiper-pagination-bullet-fp { background: var(--color-border); opacity: 1; display: inline-block; cursor: pointer; }
.swiper-pagination-bullet-active-fp { width: 1.5rem; background: var(--color-primary-600); }
.fp-product-carousel.overflow-visible { overflow: visible; clip-path: inset(-100vw -100vw -100vw -100vw); }


/* ════════════════════════════════════════════════
   FRONT-PAGE COMPONENTS
   ════════════════════════════════════════════════ */

/* ── Badges & Buttons ── */
.badge-forest {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-200);
}

.btn-forest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.875rem 1.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition: all 0.3s ease;
    background: var(--color-primary-700);
    color: var(--color-primary-50);
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-forest:hover {
    background: var(--color-primary-800);
    box-shadow: 0 8px 24px rgba(6, 78, 53, 0.3);
    transform: translateY(-1px);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition: all 0.3s ease;
    background: transparent;
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    cursor: pointer;
    text-decoration: none;
}
.btn-secondary:hover {
    border-color: var(--color-text-muted);
    background: var(--color-bg-body);
}

/* ── Hero Visual ── */
.fp-hero-visual {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: linear-gradient(145deg, var(--color-primary-800), var(--color-primary-900));
    box-shadow: 0 25px 60px -12px rgba(2, 44, 30, 0.35);
}

/* ── Floating Cards ── */
.fp-float-card {
    position: absolute;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    z-index: 20;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(8px);
    animation: floatCard 6s ease-in-out infinite;
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ── Category Cards ── */
.fp-cat-card {
    position: relative;
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    min-height: 260px;
    cursor: pointer;
    text-decoration: none;
}
.fp-cat-card:hover .absolute.inset-0:first-child {
    transform: scale(1.05);
}

/* ── Science Panel ── */
.fp-science-panel {
    border-radius: 1.5rem;
    padding: 2.5rem;
    background: linear-gradient(145deg, var(--color-primary-800), #011a12);
    box-shadow: 0 25px 60px -12px rgba(2, 44, 30, 0.35);
}
@media (min-width: 1024px) {
    .fp-science-panel {
        padding: 3rem;
    }
}

.fp-sci-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-radius: 1rem;
    padding: 1rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.fp-sci-feature:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.fp-sci-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Review Cards ── */
.fp-review-card {
    border-radius: 1rem;
    padding: 1.5rem;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.fp-review-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* ── Community CTA ── */
.fp-community-inner {
    border-radius: 1.5rem;
    padding: 2.5rem;
    background: linear-gradient(145deg, var(--color-primary-700), var(--color-primary-800));
    box-shadow: 0 25px 60px -12px rgba(6, 78, 53, 0.35);
}
@media (min-width: 1024px) {
    .fp-community-inner {
        padding: 3rem;
    }
}

.fp-community-input {
    width: 100%;
    border-radius: 9999px;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border: none;
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    backdrop-filter: blur(4px);
}
.fp-community-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.fp-community-input:focus {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* ── Scroll Reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in {
    opacity: 1;
    transform: translateY(0);
}


/* ════════════════════════════════════════════════
   ABOUT US PAGE
   ════════════════════════════════════════════════ */

/* ── Section 1 — Hero ── */
.about-s1 {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: var(--color-bg-body);
}
@media (min-width: 768px) {
    .about-s1 {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}
.about-s1-inner {
    max-width: 42rem;
}
.about-s1-inner p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--color-text-muted);
}

.about-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    margin-bottom: 1.5rem;
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-200);
}

/* ── Section 2 — Three Cards ── */
.about-s2 {
    padding-bottom: 5rem;
    background: var(--color-bg-body);
}
@media (min-width: 768px) {
    .about-s2 {
        padding-bottom: 7rem;
    }
}
.about-page .about-s2 {
    padding-top: 5rem;
    padding-bottom: 2.5rem;
    margin-top: -3rem;
    position: relative;
    z-index: 20;
}
@media (min-width: 768px) {
    .about-page .about-s2 {
        padding-top: 5rem;
        padding-bottom: 2.5rem;
    }
}
.about-page .about-s3 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
@media (min-width: 768px) {
    .about-page .about-s3 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}
.about-page .about-s4 {
    padding-top: 3rem;
    padding-bottom: 6rem;
}
@media (min-width: 768px) {
    .about-page .about-s4 {
        padding-top: 3rem;
        padding-bottom: 6rem;
    }
}
.about-s2-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .about-s2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .about-s2-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Shared card base */
.about-card-p {
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid var(--color-border);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.about-card-p:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}
.about-card-p h3 {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    color: var(--color-text-main);
}
.about-card-p p {
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--color-text-muted);
}

/* Card colour variants */
.about-card-beige {
    background: #faf7f2;
}
.dark .about-card-beige {
    background: var(--color-bg-surface);
}
.about-card-green {
    background: var(--color-primary-50);
}
.dark .about-card-green {
    background: var(--color-bg-surface);
}
.about-card-white {
    background: var(--color-bg-surface);
}

/* Card icon wrapper */
.about-ci {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}
.about-ci svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* ── Section 3 — Image + Text ── */
.about-s3 {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: var(--color-bg-surface);
}
@media (min-width: 768px) {
    .about-s3 {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}
.about-s3-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .about-s3-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5rem;
    }
}
.about-s3-img {
    border-radius: 1.5rem;
    overflow: hidden;
}
.about-s3-img-bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    border-radius: 1.5rem;
    aspect-ratio: 4 / 3;
    background: linear-gradient(145deg, var(--color-primary-800), var(--color-primary-900));
    color: rgba(255, 255, 255, 0.6);
}
.about-s3-img-bg svg {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1rem;
    stroke: rgba(134, 239, 182, 0.5);
}
.about-s3-img-bg span {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.about-s3-text h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    color: var(--color-text-main);
}
@media (min-width: 768px) {
    .about-s3-text h2 {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}
.about-s3-text p {
    font-size: 1rem;
    line-height: 1.625;
    margin-bottom: 2rem;
    color: var(--color-text-muted);
}

/* Checklist */
.about-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.about-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--color-text-main);
}
.about-checklist li + li {
    margin-top: 1rem;
}

.about-chk {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--color-primary-600);
}

/* ── Section 4 — CTA ── */
.about-s4 {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: var(--color-bg-body);
}
@media (min-width: 768px) {
    .about-s4 {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}
.about-s4-inner {
    text-align: center;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}
.about-s4-inner h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    color: var(--color-text-main);
}
@media (min-width: 768px) {
    .about-s4-inner h2 {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}
.about-s4-inner p {
    font-size: 1rem;
    line-height: 1.625;
    margin-bottom: 2rem;
    color: var(--color-text-muted);
}

.about-s4-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
}
.about-s4-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--color-primary-600);
}

.about-s4-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── 3D CARD FLIP ANIMATION FOR MY ACCOUNT ── */
.reta-flip-container.has-flip {
    perspective: 1500px;
    position: relative;
    width: 100%;
    height: 600px;
}
@media (min-width: 640px) {
    .reta-flip-container.has-flip {
        height: 550px;
    }
}

/* Reset WooCommerce default form styling on My Account login/register */
.woocommerce form.login,
.woocommerce form.register {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.reta-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.is-flipped .reta-flip-inner {
    transform: rotateY(180deg);
}

.reta-flip-front,
.reta-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.reta-flip-front {
    z-index: 2;
    transform: rotateY(0deg);
}

.reta-flip-back {
    transform: rotateY(180deg);
    z-index: 1;
}

/* Fallback/Default layout when flip is not active or disabled */
.reta-flip-container:not(.has-flip) .reta-flip-front {
    position: relative;
}

/* ════════════════════════════════════════════════
   SCIENCE PAGE STYLES
   ════════════════════════════════════════════════ */

.science-page {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--color-text-main);
    background: var(--color-bg-body);
}

.science-page h1,
.science-page h2,
.science-page h3,
.science-page h4 {
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
}

/* Container */
.science-page .container,
.about-page .container {
    max-width: 80rem; /* 1280px */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .science-page .container,
    .about-page .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .science-page .container,
    .about-page .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ── Section 1 — Hero ── */
.science-page .hero,
.about-page .hero {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: linear-gradient(180deg, #022c1e 0%, #011a12 100%);
    color: #ffffff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) {
    .science-page .hero,
    .about-page .hero {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}
.science-page .hero-inner,
.about-page .hero-inner {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
}
.science-page .hero h1,
.about-page .hero h1 {
    font-size: 2.5rem;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    color: #ffffff;
}
@media (min-width: 768px) {
    .science-page .hero h1,
    .about-page .hero h1 {
        font-size: 4rem;
    }
}
.science-page .hero h1 span,
.about-page .hero h1 span {
    color: var(--color-primary-400);
    background: linear-gradient(to right, var(--color-primary-400), #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.science-page .hero p,
.about-page .hero p {
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.75);
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}
.science-page .hero .badge-forest,
.about-page .hero .badge-forest {
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--color-primary-300);
}
.science-page .hero .badge-forest svg,
.about-page .hero .badge-forest svg {
    width: 1rem;
    height: 1rem;
}

/* ── Section 2 — Pillars ── */
.science-page .pillars {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: var(--color-bg-body);
    margin-top: -3rem;
    position: relative;
    z-index: 20;
}
.science-page .pillars-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .science-page .pillars-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .science-page .pillars-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.science-page .card-p {
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    border: 1px solid var(--color-border);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.science-page .card-p:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.science-page .card-p h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-main);
}
.science-page .card-p p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}
.science-page .card-white {
    background: var(--color-bg-surface);
}
.science-page .card-green {
    background: var(--color-primary-800);
    border-color: var(--color-primary-900);
    color: #ffffff;
}
.science-page .card-green h3 {
    color: #ffffff;
}
.science-page .card-green p {
    color: rgba(255, 255, 255, 0.8);
}
.science-page .card-beige {
    background: #FAF7F2;
    border-color: #EFEBE4;
}
.dark .science-page .card-beige {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
}

/* Card Icons */
.science-page .ci {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.science-page .card-white .ci,
.science-page .card-beige .ci {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-100);
}
.science-page .card-green .ci {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.science-page .ci svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* ── Section 3 — Transparency / COA ── */
.science-page .transparency {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.science-page .transparency-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .science-page .transparency-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5rem;
    }
}
.science-page .section-eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--color-primary-600);
    margin-bottom: 0.75rem;
}
.science-page .section-title {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
    .science-page .section-title {
        font-size: 2.5rem;
    }
}
.science-page .section-title span {
    color: var(--color-primary-700);
}
.science-page .section-sub {
    font-size: 1rem;
    line-height: 1.625;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

/* Checklist */
.science-page .checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
}
.science-page .checklist li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-main);
    margin-bottom: 1rem;
}
.science-page .chk {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary-600);
    flex-shrink: 0;
}

/* Metric Card */
.science-page .metric-card {
    background: #faf7f2;
    border: 1px solid #efebe4;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}
.dark .science-page .metric-card {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
}
.science-page .metric-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.science-page .metric-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.science-page .metric-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}
.science-page .metric-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.science-page .metric-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-text-main);
}
.science-page .purity-bar {
    width: 100%;
    height: 0.625rem;
    background: var(--color-border);
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 2rem;
}
.science-page .purity-fill {
    width: 99.8%;
    height: 100%;
    background: linear-gradient(to right, var(--color-primary-500), var(--color-primary-600));
    border-radius: 9999px;
}
.science-page .metric-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
}
.science-page .stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}
.science-page .stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-main);
}
.science-page .stat-value.green {
    color: var(--color-primary-600);
}

/* ── Section 4 — Peptide Science ── */
.science-page .peptide-science {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: var(--color-bg-body);
    text-align: center;
}
.science-page .peptide-science .section-sub {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}
.science-page .peptides-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
    text-align: left;
    margin-top: 3.5rem;
}
@media (min-width: 640px) {
    .science-page .peptides-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .science-page .peptides-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.science-page .peptide-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.science-page .peptide-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.06);
    border-color: var(--color-primary-200);
}
.science-page .peptide-tag {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 1.25rem;
}
.science-page .peptide-tag.fat-loss {
    background: #FFF7ED;
    color: #EA580C;
    border: 1px solid #FFEDD5;
}
.science-page .peptide-tag.metabolic {
    background: #F0FDFA;
    color: #0D9488;
    border: 1px solid #CCFBF1;
}
.science-page .peptide-tag.appetite {
    background: #FAF5FF;
    color: #7E22CE;
    border: 1px solid #F3E8FF;
}
.science-page .peptide-tag.energy {
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid #DBEAFE;
}
.science-page .peptide-card h4 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-main);
}
.science-page .peptide-card p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    flex-grow: 1;
}
.science-page .peptide-divider {
    height: 1px;
    background: var(--color-border);
    margin: 1.5rem 0 1rem 0;
}
.science-page .peptide-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.science-page .peptide-meta svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--color-primary-600);
}

/* ── Section 5 — Process ── */
.science-page .process {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: linear-gradient(180deg, #011a12 0%, #00100b 100%);
    color: #ffffff;
}
.science-page .process-inner {
    text-align: center;
}
.science-page .process .section-title {
    color: #ffffff;
}
.science-page .process .section-title span {
    color: var(--color-primary-400);
    background: linear-gradient(to right, var(--color-primary-400), #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.science-page .process .section-sub {
    color: rgba(255, 255, 255, 0.7);
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.5rem;
}
.science-page .steps-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
    text-align: left;
}
@media (min-width: 640px) {
    .science-page .steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .science-page .steps-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.science-page .step-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.25rem;
    padding: 2.25rem 2rem;
    transition: all 0.3s ease;
}
.science-page .step-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
}
.science-page .step-num {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-primary-400);
    line-height: 1;
    margin-bottom: 1.25rem;
    font-family: 'Outfit', sans-serif;
    opacity: 0.9;
}
.science-page .step-card h4 {
    font-size: 1.15rem;
    color: #ffffff;
    margin-bottom: 0.75rem;
}
.science-page .step-card p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
}

/* ── Section 6 — CTA ── */
.science-page .cta-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background: var(--color-bg-body);
    text-align: center;
}
.science-page .cta-inner {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}
.science-page .cta-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1.25rem;
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    border: 1px solid var(--color-primary-200);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}
.science-page .cta-icon svg {
    width: 2rem;
    height: 2rem;
}
.science-page .cta-inner h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--color-text-main);
    margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
    .science-page .cta-inner h2 {
        font-size: 2.5rem;
    }
}
.science-page .cta-inner p {
    font-size: 1.125rem;
    line-height: 1.625;
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: 2.5rem;
}
.science-page .cta-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Delay classes for reveals */
.reveal-d1 { transition-delay: 0.15s; }
.reveal-d2 { transition-delay: 0.3s; }
.reveal-d3 { transition-delay: 0.45s; }
.reveal-d4 { transition-delay: 0.60s; }

/* ════════════════════════════════════════════════
   CONTACT US PAGE STYLES
   ════════════════════════════════════════════════ */

.contact-page {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--color-text-main);
    background: var(--color-bg-body);
}

.contact-page h1,
.contact-page h2,
.contact-page h3,
.contact-page h4 {
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
}

/* Container */
.contact-page .container {
    max-width: 80rem; /* 1280px */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .contact-page .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .contact-page .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ── Hero Section ── */
.contact-page .contact-hero {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: linear-gradient(180deg, #022c1e 0%, #011a12 100%);
    color: #ffffff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) {
    .contact-page .contact-hero {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}
.contact-page .contact-hero-inner {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
}
.contact-page .contact-hero h1 {
    font-size: 2.5rem;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    color: #ffffff;
}
@media (min-width: 768px) {
    .contact-page .contact-hero h1 {
        font-size: 4rem;
    }
}
.contact-page .contact-hero h1 span {
    color: var(--color-primary-400);
    background: linear-gradient(to right, var(--color-primary-400), #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.contact-page .contact-hero p {
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.75);
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}
.contact-page .contact-hero .badge-forest {
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--color-primary-300);
}
.contact-page .contact-hero .badge-forest svg {
    width: 1rem;
    height: 1rem;
}

/* ── Contact Info Cards ── */
.contact-page .contact-info-section {
    padding-top: 5rem;
    padding-bottom: 3rem;
    background: var(--color-bg-body);
    margin-top: -3rem;
    position: relative;
    z-index: 20;
}
.contact-page .contact-info-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .contact-page .contact-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .contact-page .contact-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.contact-page .info-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-page .info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.contact-page .info-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.contact-page .info-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}
.contact-page .info-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-main);
}
.contact-page .info-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}
.contact-page .info-details {
    border-top: 1px solid var(--color-border);
    padding-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.contact-page .info-link {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary-700);
    text-decoration: none;
    transition: color 0.2s ease;
}
.contact-page .info-link:hover {
    color: var(--color-primary-800);
    text-decoration: underline;
}
.contact-page .info-subtext {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* ── Form & FAQ Section ── */
.contact-page .contact-form-section {
    padding-top: 2rem;
    padding-bottom: 6rem;
    background: var(--color-bg-body);
}
.contact-page .contact-form-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 4rem;
}
@media (min-width: 1024px) {
    .contact-page .contact-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6rem;
    }
}
.contact-page .form-container,
.contact-page .faq-container {
    display: flex;
    flex-direction: column;
}
.contact-page h2 {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 0.75rem;
}
.contact-page .form-desc,
.contact-page .faq-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 2.5rem;
}

/* Form inputs & styling */
.contact-page .theme-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.contact-page .form-row-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .contact-page .form-row-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.contact-page .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.contact-page .form-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-main);
}
.contact-page .theme-input,
.contact-page .theme-select,
.contact-page .theme-textarea {
    width: 100%;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: var(--color-text-main);
    transition: all 0.2s ease;
}
.contact-page .theme-input:focus,
.contact-page .theme-select:focus,
.contact-page .theme-textarea:focus {
    border-color: var(--color-primary-600);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-50);
}
.contact-page .btn-full {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
}

/* FAQs styling */
.contact-page .contact-faqs {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.contact-page .faq-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}
.contact-page .faq-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* ── Homepage Lab Reports Section ── */
.fp-lab-reports {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: var(--color-bg-body);
}
.fp-lab-reports-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}
@media (min-width: 768px) {
    .fp-lab-reports-card {
        padding: 2.5rem;
    }
}
.fp-lab-reports .section-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}
.fp-lab-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}
.fp-lab-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.fp-lab-table th {
    background: var(--color-bg-body);
    padding: 1rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-main);
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}
.fp-lab-table th:last-child {
    border-right: none;
}
.fp-lab-table td {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    vertical-align: middle;
}
.fp-lab-table td:last-child {
    border-right: none;
}
.fp-lab-table tr:last-child td {
    border-bottom: none;
}
.fp-lab-table td.peptide-name {
    font-weight: 700;
    color: var(--color-text-main);
}
.fp-lab-table td.peptide-name a {
    text-decoration: underline;
    color: inherit;
    transition: color 0.2s ease;
}
.fp-lab-table td.peptide-name a:hover {
    color: var(--color-primary-600);
}
.fp-lab-table td.purity-val {
    font-weight: 700;
    color: var(--color-text-main);
}
.fp-lab-reports .footer-note {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 1.25rem;
}
.fp-lab-reports .footer-note a {
    text-decoration: underline;
    color: inherit;
    transition: color 0.2s ease;
}
.fp-lab-reports .footer-note a:hover {
    color: var(--color-primary-600);
}

/* ────────────────────────────────────────
   SCROLLING ANNOUNCEMENT BAR
   ──────────────────────────────────────── */
.reta-announcement-bar {
    width: 100%;
    background-color: var(--color-primary-700); /* Sleek dark slate/charcoal background */
    color: #fff; /* Muted text color */
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.75rem; /* 12px for clinical readability */
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 8px 0;
    z-index: 60;
}

.reta-announcement-track {
    display: flex;
    width: max-content;
    animation: reta-marquee 50s linear infinite;
}

.reta-announcement-content {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

.reta-announcement-content span {
    padding: 0 3rem;
    display: inline-flex;
    align-items: center;
}

/* Bullet divider between announcements */
.reta-announcement-content span::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-primary-500, #34d399); /* Theme primary or emerald warning color */
    margin-left: 6rem; /* Large spacer before next item */
}

@keyframes reta-marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause scroll on hover for readability */
.reta-announcement-bar:hover .reta-announcement-track {
    animation-play-state: paused;
}

/* ────────────────────────────────────────
   MOBILE HEADER & ACTION BADGES OPTIMIZATION
   ──────────────────────────────────────── */

/* Custom logo responsive scaling */
.site-header .custom-logo-link img {
    height: auto;
    max-height: 38px;
    width: auto;
    display: block;
    transition: max-height 0.2s ease;
}

@media (min-width: 768px) {
    .site-header .custom-logo-link img {
        max-height: 48px;
    }
}

/* User Actions Container gap */
.header-user-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px default on mobile to prevent wrapping */
}

@media (min-width: 640px) {
    .header-user-actions {
        gap: 0.75rem; /* 12px on small screens */
    }
}

@media (min-width: 768px) {
    .header-user-actions {
        gap: 1.5rem; /* 24px on desktop */
    }
}

/* Unified Action Button bounding box */
.header-action-btn {
    width: 2.25rem; /* 36px */
    height: 2.25rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
}

.header-action-btn:hover {
    background-color: rgba(156, 163, 175, 0.1);
}

/* Action Badges styling and positioning */
.wishlist-count,
.cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    height: 16px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.wishlist-count {
    background-color: var(--color-error-dark, #8b1e1e);
}

.cart-count {
    background-color: var(--color-primary-700, #c25e00);
}

.header-action-btn:hover .wishlist-count,
.header-action-btn:hover .cart-count {
    transform: scale(1.1);
}

/* ────────────────────────────────────────
   RETAS DOSAGE CALCULATOR MINIMALIST REDESIGN
   ──────────────────────────────────────── */

.reta-dosage-calculator {
    font-family: var(--font-body, 'Inter', sans-serif);
}

.reta-dosage-calculator h4 {
    font-family: var(--font-heading, 'Outfit', sans-serif);
}

/* Custom Dropdown Trigger & Options */
#reta-calc-product-trigger {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#reta-calc-product-dropdown .calc-dropdown-option {
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    color: var(--color-text-main);
    font-weight: 700;
    font-size: 0.875rem;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    cursor: pointer;
}

#reta-calc-product-dropdown .calc-dropdown-option:hover {
    background-color: rgba(156, 163, 175, 0.08);
}

#reta-calc-product-dropdown .calc-select-badge {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.45rem;
    border-radius: 0.375rem;
    background-color: var(--color-primary-600);
    color: #ffffff;
    opacity: 0;
    transform: translateX(5px);
    transition: all 0.2s ease;
}

#reta-calc-product-dropdown .calc-dropdown-option:hover .calc-select-badge {
    opacity: 1;
    transform: translateX(0);
}

/* Pen Strength Selector Buttons */
.calc-strength-btn {
    padding: 0.75rem 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-surface);
    color: var(--color-text-main);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calc-strength-btn:hover {
    border-color: var(--color-primary-500);
}

.calc-strength-btn.active {
    background-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #ffffff;
    font-weight: 800;
}

/* Mode Switch Tabs */
.calc-mode-btn {
    padding: 0.375rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calc-mode-btn.active {
    background-color: var(--color-bg-surface);
    color: var(--color-text-main);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Input Wrapper & Error State */
#reta-calc-input-wrapper {
    transition: all 0.2s ease;
}

#reta-calc-input-wrapper.calc-input-error {
    border-color: var(--color-error, #ef4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Quick Select Pills */
.calc-quick-btn {
    padding: 0.4rem 0.875rem;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-body);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calc-quick-btn:hover {
    border-color: var(--color-primary-500);
    color: var(--color-primary-600);
    background-color: var(--color-bg-surface);
}

/* Premium Range Slider Restyle */
.reta-custom-range {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: var(--color-border);
    border-radius: 9999px;
    outline: none;
    transition: background 0.3s;
}

.reta-custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--color-primary-600);
    border: 3px solid var(--color-bg-surface);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease;
}

.reta-custom-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.dark .reta-custom-range::-webkit-slider-thumb {
    background: #ffffff;
    border-color: #111111;
}

/* Custom scrollbar for dropdowns */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Animations */
@keyframes slide-up {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.reta-dosage-calculator .animate-slide-up {
    animation: slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}