/*
Theme Name: Reta
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.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
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
*/

:root {
    /* Primary - Using Figma D ORANGE (#F38501) and L ORANGE (#F99C01) */
    /* Humne shades ko design ke context ke mutabiq adjust kiya hai */
  /* Primary Scale: Apex Blue (#0E61B5) */
    --color-primary-50: #eef6ff;   /* Very light tint (e.g., active tab backgrounds) */
    --color-primary-100: #dceafb;  /* Light background */
    --color-primary-200: #b9d5f6;  /* Subtle borders */
    --color-primary-300: #8ebaf0;  /* Muted accents */
    --color-primary-400: #5c9ce8;  /* L BLUE / Hover states */
    --color-primary-500: #0E61B5;  /* D BLUE (Main CTA & Brand Color) */
    --color-primary-600: #0E61B5;  /* Active/Pressed button states */
    --color-primary-700: #0E61B5;  /* Deep UI elements */
    --color-primary-800: #052c55;  /* High contrast accents */
    --color-primary-900: #031b36;  /* Near black/blue for headers */

    /* Text - Using BLACK (#161518) and GREY (#A09B9B) */
    --color-text-main: #161518;    /* BLACK from Figma */
    --color-text-muted: #A09B9B;   /* GREY from Figma */

    /* Backgrounds - Using WHITE (#FFFFFF) and D BLUE (#0E1C31) */
    --color-bg-body: #FFFFFF;      /* WHITE */
    --color-bg-surface: #FFFFFF;
    
    /* Custom helper for Section Backgrounds */
    --color-bg-dark: #0E1C31;      /* D BLUE from Figma */

    /* Borders */
    --color-border: #E5E5E5;

    /* Success - Kept as is or can be adjusted if needed */
    --color-success: #006b4d;
    --color-success-light: #f0fdf7;
    --color-success-dark: #022c1e;

    /* Error */
    --color-error: #dc2626;
    --color-error-light: #fef2f2;
    --color-error-dark: #7f1d1d;

    /* Warning - Using Figma L ORANGE */
    --color-warning: #F99C01;
    --color-warning-light: #fffbeb;
    --color-warning-dark: #78350f;

    /* Info - Using Figma D BLUE */
    --color-info: #0E1C31;
    --color-info-light: #f0f4fd;
    --color-info-dark: #050d18;

    /* Typography, Radius, Shadows and others remain same as requested */
    --font-body: 'Inter', system-ui, sans-serif;
    --font-heading: 'Outfit', system-ui, sans-serif;
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-full: 9999px;
}


body {
    background-color: var(--color-bg-body);
    color: var(--color-text-main);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    font-family: 'Inter', sans-serif;
}

/* ╔════════════════════════════════════════════════════════════════╗
   ║  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;
}


/* Completely remove Flowbite's default modal backdrop */
div[modal-backdrop] {
    display: none !important;
}


/* ────────────────────────────────────────
   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;
}

/* Modern CSS Grid Layout for Checkout Fields */
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout form.checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout form.checkout .woocommerce-additional-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
}

.woocommerce-checkout form.checkout .form-row {
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

.woocommerce-checkout form.checkout .form-row-first,
.woocommerce-checkout form.checkout .form-row-last {
    grid-column: span 1 !important;
}

.woocommerce-checkout form.checkout .form-row-wide {
    grid-column: span 2 !important;
}

/* 
 * ABSOLUTE OVERRIDE FOR CHECKOUT TWO-COLUMN LAYOUT
 * Target specific field IDs to bypass WooCommerce's dynamic JS & PHP class injection 
 */
p#billing_city_field, p#shipping_city_field,
p#billing_state_field, p#shipping_state_field,
p#billing_postcode_field, p#shipping_postcode_field,
p#billing_phone_field, p#shipping_phone_field,
p#billing_email_field, p#shipping_email_field {
    grid-column: span 1 !important;
}

@media (max-width: 768px) {
    .woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper,
    .woocommerce-checkout form.checkout .woocommerce-shipping-fields__field-wrapper,
    .woocommerce-checkout form.checkout .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: 1fr !important;
    }
    /* Force every field 100% width on mobile. The ID rules above
       (p#billing_city_field, etc.) carry id-level specificity, so we repeat the
       same selectors here — the later source order wins the specificity tie. */
    .woocommerce-checkout form.checkout .form-row-first,
    .woocommerce-checkout form.checkout .form-row-last,
    .woocommerce-checkout form.checkout .form-row-wide,
    p#billing_city_field, p#shipping_city_field,
    p#billing_state_field, p#shipping_state_field,
    p#billing_postcode_field, p#shipping_postcode_field,
    p#billing_phone_field, p#shipping_phone_field,
    p#billing_email_field, p#shipping_email_field {
        grid-column: 1 / -1 !important;
    }
}

/* "Billing details" section heading — enlarged */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .reta-checkout-billing h3 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: var(--color-text-main) !important;
    margin-bottom: 1rem !important;
}

/* Privacy policy notice (under place-order / checkout) */
.woocommerce-privacy-policy-text p {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* Ship to a different address styling */
#ship-to-different-address {
    margin: 2rem 0 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--color-text-main) !important;
    display: flex !important;
    align-items: center !important;
}

#ship-to-different-address label {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

#ship-to-different-address input[type="checkbox"] {
    margin-right: 0.75rem !important;
    margin-top: 0 !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 */




/* 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(243, 133, 1, 0.05) !important;
    box-shadow: 0 0 0 1px var(--color-primary-600) !important;
}


.woocommerce-checkout .reta-delivery-method-card:has(input.shipping_method:checked) {
    border-color: var(--color-primary-600) !important;
    background-color: rgba(243, 133, 1, 0.05) !important;
    box-shadow: 0 0 0 1px var(--color-primary-600) !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(243, 133, 1, 0.15), 0 2px 4px -1px rgba(243, 133, 1, 0.08) !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(243, 133, 1, 0.25), 0 4px 6px -2px rgba(243, 133, 1, 0.12) !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(243, 133, 1, 0.15), 0 4px 6px -2px rgba(243, 133, 1, 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(243, 133, 1, 0.1), 0 2px 4px -1px rgba(243, 133, 1, 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;
    margin: 0;
}
#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); }

/* Swiper sets overflow:hidden on .swiper, which clips at the PADDING box. The
   card's hover lift (translateY(-8px)) and its shadow would be sliced off the
   top — taking the rounded corners with them — because the element only had
   bottom padding (pb-12). Pad the top and pull it back with a negative margin
   so the clip edge moves up but the layout does not.
   Horizontal padding is deliberately NOT used: it would let the neighbouring
   slide peek into the padding strip instead of staying clipped. */
/* Doubled-up class (.swiper.fp-product-carousel) on purpose: swiper-bundle.css
   is enqueued AFTER style.css and sets `.swiper { padding: 0 }`, which beats a
   single-class selector on load order alone. This is also why the `pb-12`
   utility on the markup never applied. */
.swiper.fp-product-carousel {
    padding-top: 10px;
    margin-top: -10px;
}


/* ════════════════════════════════════════════════
   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 ──
   The slide renders (1536x1024) carry their own soft lavender backdrop with the
   product on the right and empty space on the left. --hero-ambient is sampled
   from that empty edge, so the section gradient meets the image seamlessly —
   change it if the renders are ever re-exported with a different backdrop. */
/* Mobile-first: the render fills the section and the copy is centred on top of
   it, over a white scrim. From lg up this becomes the two-up split layout. */
.fp-hero {
    --hero-ambient-top: #eae8f2;
    --hero-ambient-mid: #e6e6f1;
    --hero-ambient-bot: #dfe0f2;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 20rem;
    padding: 5rem 0 3.5rem;
    text-align: center;
    /* Matches the vertical falloff of the render's own backdrop, so the section
       and the image meet in the same colour wherever the image's edge lands. */
    background: linear-gradient(to bottom,
        var(--hero-ambient-top) 0%,
        var(--hero-ambient-mid) 50%,
        var(--hero-ambient-bot) 100%);
}

/* Mint wash on the copy side. This sits ABOVE the render rather than in the
   section background: the image's left edge moves with the viewport (it is
   anchored right and scaled to section height), so a wash underneath it would
   cut off at that edge and read as a seam. Over the top, both sides tint
   equally. It must fade out before the product, which starts ~50% in. */
.fp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to right,
        color-mix(in srgb, var(--color-success-light) 85%, transparent) 0%,
        color-mix(in srgb, var(--color-success-light) 40%, transparent) 18%,
        transparent 42%);
}

/* Legibility scrim — only needed while the copy sits over the render. */
.fp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(255, 255, 255, .68);
}

.fp-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.fp-hero__copy { margin: 0 auto; }

.fp-hero__title {
    font-size: clamp(1.9rem, 7.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--color-text-main);
    margin: 0 0 0.875rem;
}
.fp-hero__accent { color: var(--color-primary-500); }

/* The muted token (#A09B9B) only clears ~2:1 against the render behind it on
   mobile, so the copy is darkened while it overlaps the product. From lg it sits
   on the plain ambient beside the product and reverts to the theme's muted. */
.fp-hero__lede {
    max-width: 26rem;
    margin: 0 auto 1.5rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-text-main) 80%, #ffffff);
}

/* Both buttons must share one row down to 360px, so the mobile sizing below is
   tuned to fit — check it before growing the padding or label text. */
.fp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
}

/* ── Hero buttons ── */
.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.8rem;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.btn-hero:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary-500);
    box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--color-primary-700) 45%, transparent);
}
.btn-hero__icon {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    color: var(--color-primary-500);
}
.btn-hero__arrow {
    width: 0.7rem;
    height: 0.7rem;
    flex-shrink: 0;
    transition: transform .3s ease;
}
.btn-hero:hover .btn-hero__arrow { transform: translateX(3px); }

.btn-hero--primary {
    border-color: color-mix(in srgb, var(--color-text-main) 18%, transparent);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35);
}

/* ── Hero media ──
   Mobile fills the section with `cover`. How much of the 3:2 render survives
   depends entirely on the section's aspect: the closer the hero is to 3:2, the
   less is cropped. At min-height 20rem the crop is mild — grow the hero height
   (or its padding) and the sides get cut progressively harder.
   From lg the render switches to `contain`, anchored right beside the copy. */
.fp-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.fp-hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* All slides but the first stay hidden until their animation-delay elapses. */
.fp-hero__media.is-cycling .fp-hero__slide + .fp-hero__slide { opacity: 0; }
.fp-hero__media.is-cycling .fp-hero__slide {
    animation: heroSlideFade var(--hero-cycle, 15s) linear infinite;
}

/* Visible for one slot, then crossfades out; fades back in at the end of the
   cycle as the last slide fades out. Percentages assume a 3-slide (15s) cycle. */
@keyframes heroSlideFade {
    0%      { opacity: 1; }
    28.33%  { opacity: 1; }
    33.33%  { opacity: 0; }
    95%     { opacity: 0; }
    100%    { opacity: 1; }
}

/* ── Hero scroll cue ── */
.fp-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: -1.375rem;
    border-radius: 9999px;
    color: #fff;
    background: color-mix(in srgb, var(--color-text-main) 55%, transparent);
    backdrop-filter: blur(6px);
    transition: background .3s ease, transform .3s ease;
    animation: heroScrollBob 2.4s ease-in-out infinite;
}
.fp-hero__scroll:hover {
    background: var(--color-primary-500);
    animation-play-state: paused;
    transform: translateY(2px);
}
.fp-hero__scroll svg { width: 1.125rem; height: 1.125rem; }

@keyframes heroScrollBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

/* ── Trust strip ── */
.fp-trust {
    background: color-mix(in srgb, var(--color-success-light) 85%, var(--color-bg-body));
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.fp-trust__grid {
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.fp-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 1rem 0.875rem;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
/* 2-up: top row needs no rule above it, right column needs one to its left. */
.fp-trust__item:nth-child(-n+2) { border-top: 0; }
.fp-trust__item:nth-child(even) { border-left: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); }
.fp-trust__icon {
    width: 1.625rem;
    height: 1.625rem;
    flex-shrink: 0;
    color: var(--color-text-main);
}
.fp-trust__title {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-main);
}
.fp-trust__desc {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

@media (min-width: 640px) {
    .fp-hero { min-height: 34rem; }
    .fp-hero__inner { padding: 0 1.5rem; }
    .fp-hero__lede { font-size: 0.9375rem; }
    .btn-hero { padding: 0.8rem 1.25rem; font-size: 0.65rem; gap: 0.5rem; letter-spacing: 0.08em; }
    .btn-hero__icon { width: 1rem; height: 1rem; }
    .btn-hero__arrow { width: 0.875rem; height: 0.875rem; }
    .fp-trust__item { gap: 0.875rem; padding: 1.375rem 1.5rem; }
}

@media (min-width: 1024px) {
    /* min-height drives how large `contain` renders the product: the image is
       3:2, so its painted width is height x 1.5, anchored to the right edge. */
    .fp-hero {
        min-height: 38rem;
        padding: 5rem 0 6rem;
        text-align: left;
    }
    /* The copy no longer sits over the product, so the scrim would only wash out
       the render. */
    .fp-hero::after { content: none; }

    .fp-hero__inner { padding: 0 2rem; }
    /* The render is anchored right and scaled to the section height, so the
       product creeps leftward as the viewport narrows — around 1024px it reaches
       x~505. The vw cap keeps the copy clear of it there; 34rem wins from
       ~1280px up, where there is room to spare. */
    .fp-hero__copy { max-width: min(34rem, 44vw); margin: 0; }

    .fp-hero__title {
        font-size: clamp(2.75rem, 6vw, 5.25rem);
        line-height: 0.98;
        letter-spacing: -0.035em;
        margin: 0 0 1.5rem;
    }
    .fp-hero__lede {
        max-width: 30rem;
        margin: 0 0 2.25rem;
        font-size: 1.0625rem;
        line-height: 1.7;
        color: var(--color-text-muted);
    }
    .fp-hero__actions { justify-content: flex-start; gap: 0.75rem; }

    .fp-hero__slide {
        object-fit: contain;
        object-position: right center;
    }

    .fp-trust__grid { grid-template-columns: repeat(4, 1fr); }
    .fp-trust__item { border-top: 0; }
    .fp-trust__item + .fp-trust__item { border-left: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); }
}

/* Full-size buttons only once the copy column is wide enough to hold both on one
   row — between 1024 and 1280 the column is capped to clear the product. */
@media (min-width: 1280px) {
    .btn-hero { padding: 0.9rem 1.5rem; font-size: 0.72rem; gap: 0.625rem; letter-spacing: 0.09em; }
}

/* Very wide viewports: cap the render so it doesn't drift away from the copy. */
@media (min-width: 1600px) {
    .fp-hero__media { left: auto; width: min(62%, 60rem); }
}

@media (prefers-reduced-motion: reduce) {
    .fp-hero__scroll { animation: none; }
    /* Hold the first slide; the stacked slides keep their opacity: 0 base. */
    .fp-hero__media.is-cycling .fp-hero__slide { animation: none; }
}

/* The renders bake in a light backdrop and can't be recoloured, so the hero
   stays a light island in dark mode. Re-declaring the tokens it reads keeps the
   copy legible without overriding each child rule. */
.dark .fp-hero {
    --color-text-main: #161518;
    --color-text-muted: #A09B9B;
    --color-bg-surface: #FFFFFF;
    --color-border: #E5E5E5;
}
.dark .fp-trust { background: var(--color-bg-surface); }

/* ════════════════════════════════════════════════
   PRODUCT CARD  (template-parts/product-card.php)
   Shared by the WooCommerce loop and the front-page carousel.
   ════════════════════════════════════════════════ */

.reta-card-li {
    position: relative;
    height: 100%;
    list-style: none;
}
/* Lift the hovered card above its neighbours while it is scaled up. */
.reta-card-li:hover { z-index: 5; }

.reta-card {
    --card-hover-scale: 1.012;
    --card-media-bg: #d7d7dd;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    background: var(--color-bg-surface);
    overflow: hidden;
    transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
}

/* ── Media ── */
.reta-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--card-media-bg);
    overflow: hidden;
}
.reta-card__media-link {
    display: block;
    width: 100%;
    height: 100%;
}
/* mix-blend-multiply drops the product shots' white backdrop onto the grey
   panel, which is why the media area is tinted rather than white. */
.reta-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: opacity .5s ease;
}
.reta-card__img--hover { opacity: 0; }
/* Only crossfade when the product actually has a gallery image to swap to;
   the modifier class is added in PHP. */
.reta-card--has-hover:hover .reta-card__img--main  { opacity: 0; }
.reta-card--has-hover:hover .reta-card__img--hover { opacity: 1; }

.reta-card__badge {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    z-index: 2;
    border-radius: 9999px;
    padding: 0.3rem 0.65rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--color-primary-100);
    color: var(--color-primary-800);
}

/* ── Overlay actions (quick look / wishlist / share) ── */
.reta-card__actions {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.reta-card__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    transition: color .25s ease, background .25s ease, transform .25s ease;
}
.reta-card__action:hover { transform: scale(1.08); }
/* Wins over the w-5/h-5 and .text-muted utilities the wishlist/share helpers
   emit, so all three icons match the quick-look one instead of rendering pale. */
.reta-card__action svg {
    width: 1.05rem;
    height: 1.05rem;
    color: currentColor;
}
.reta-card__action.reta-wishlist-btn:hover svg,
.reta-card__action.reta-wishlist-btn.active svg { color: var(--color-error); }
.reta-card__action.reta-share-btn:hover svg { color: var(--color-primary-600); }

/* ── Body ── */
.reta-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.reta-card__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.reta-card__title a {
    color: var(--color-text-main);
    text-decoration: none;
}
.reta-card__title a:hover { color: var(--color-primary-600); }

/* --color-text-muted (#A09B9B) sits at ~2:1 on white, so the blurb uses a
   darker mix of the text token to stay legible at this size. */
.reta-card__desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-text-main) 62%, #ffffff);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reta-card__cat {
    display: inline-flex;
    align-items: center;
    border-radius: 0.5rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

/* ── Footer ── */
.reta-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin-top: auto;
    padding-top: 0.875rem;
}
.reta-card__price {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text-main);
}
/* get_price_html() emits <del>/<ins> for sale prices. */
.reta-card__price ins { text-decoration: none; }
.reta-card__price del {
    margin-right: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: .55;
}

.reta-card__cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-shrink: 0;
    margin: 0;
    border-radius: 9999px;
    padding: 0.7rem 1.05rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background: var(--color-primary-700);
    color: var(--color-primary-50);
    transition: background .25s ease, transform .25s ease;
}
.reta-card__cart:hover {
    background: var(--color-primary-800);
    color: var(--color-primary-50);
    transform: translateY(-1px);
}
.reta-card__cart:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}
.reta-card__cart-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}
/* WooCommerce appends this to the button after an AJAX add. */
.reta-card__cart.added { display: inline-flex; }
.reta-card__foot .added_to_cart {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary-600);
    white-space: nowrap;
}

/* ── Hover-capable pointers only ──
   Touch devices have no hover, so the scale would stick after a tap and the
   overlay actions would be unreachable. Actions stay visible there instead. */
@media (hover: hover) {
    .reta-card__actions {
        opacity: 0;
        transform: translateY(-0.35rem);
        transition: opacity .3s ease, transform .3s ease;
    }
    .reta-card:hover .reta-card__actions,
    .reta-card:focus-within .reta-card__actions {
        opacity: 1;
        transform: translateY(0);
    }
    .reta-card:hover {
        transform: translateY(-8px) scale(var(--card-hover-scale)) !important;
        box-shadow: 0 18px 40px -12px rgba(14, 28, 49, .28);
    }
}

@media (max-width: 639px) {
    .reta-card__body { padding: 1rem; }
    .reta-card__price { font-size: 1.125rem; }
    .reta-card__cart { padding: 0.6rem 0.8rem; font-size: 0.5625rem; }
}

@media (prefers-reduced-motion: reduce) {
    .reta-card,
    .reta-card__img,
    .reta-card__actions,
    .reta-card__cart { transition: none; }
    /* Must stay !important to outrank the hover rule, which is itself
       !important — without this, reduced-motion users still get the lift. */
    .reta-card:hover { transform: none !important; }
}

.dark .reta-card { --card-media-bg: #c9c9d2; }

/* ════════════════════════════════════════════════
   FLOATING SOCIAL ICONS  (inc/theme-options.php → wp_footer)
   Right side, stacked just above the Back to Top button.
   ════════════════════════════════════════════════ */

.reta-floating-social {
    position: fixed;
    right: 2rem;                       /* aligns with .reta-back-to-top */
    bottom: calc(2rem + 44px + 0.85rem); /* sits above the 44px back-to-top */
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.reta-floating-social__link {
    --fs-brand: var(--color-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-bg-surface);
    color: var(--fs-brand);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.reta-floating-social__link:hover {
    background: var(--fs-brand);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
.reta-floating-social__link svg { width: 1.35rem; height: 1.35rem; }

/* Per-platform brand colours (icon tint, fills on hover). */
.reta-floating-social__link--discord   { --fs-brand: #5865F2; }
.reta-floating-social__link--whatsapp  { --fs-brand: #25D366; }
.reta-floating-social__link--telegram  { --fs-brand: #229ED9; }
.reta-floating-social__link--facebook  { --fs-brand: #1877F2; }
.reta-floating-social__link--instagram { --fs-brand: #E4405F; }
.reta-floating-social__link--twitter,
.reta-floating-social__link--x          { --fs-brand: #111111; }
.reta-floating-social__link--youtube   { --fs-brand: #FF0000; }
.reta-floating-social__link--linkedin  { --fs-brand: #0A66C2; }
.reta-floating-social__link--tiktok    { --fs-brand: #111111; }

@media (max-width: 640px) {
    .reta-floating-social {
        right: 1rem;
        bottom: calc(1.25rem + 44px + 0.75rem);
    }
    .reta-floating-social__link { width: 40px; height: 40px; }
    .reta-floating-social__link svg { width: 1.2rem; height: 1.2rem; }
}

@media print { .reta-floating-social { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
    .reta-floating-social__link { transition: background .2s ease, color .2s ease; }
    .reta-floating-social__link:hover { transform: none; }
}

/* ════════════════════════════════════════════════
   OFFLINE / MANUAL PAYMENT  (inc/offline-payment.php)
   Checkout notice + thank-you payment instructions.
   ════════════════════════════════════════════════ */

/* Visually hide the forced payment_method radio — it must stay in the DOM and
   checked for WooCommerce, but the customer never sees a selector. (Tailwind's
   sr-only isn't in the purged build, so this is a real rule.) */
.reta-offline-method {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Checkout notice card ── */
.reta-offline-notice {
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    background: var(--color-bg-surface);
    box-shadow: 0 10px 30px -20px rgba(14, 28, 49, .35);
}
.reta-offline-notice__head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}
.reta-offline-notice__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: var(--color-primary-50);
    color: var(--color-primary-600);
}
.reta-offline-notice__icon svg { width: 1.35rem; height: 1.35rem; }
.reta-offline-notice__intro { min-width: 0; flex: 1 1 auto; }

.reta-offline__heading {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text-main);
}
.reta-offline__lead {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* ── Options as chips ── */
.reta-offline__options-wrap { margin-top: 1.2rem; }
.reta-offline__label {
    margin: 0 0 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.reta-offline__options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.reta-offline__options li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
    background: var(--color-success-light);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-main);
}
.reta-offline__options svg {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    color: var(--color-success);
}

/* ── WhatsApp note ── */
.reta-offline__note {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1.2rem 0 0;
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    background: var(--color-primary-50);
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--color-text-main);
}
.reta-offline__note svg {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    color: #25D366; /* WhatsApp brand green */
}

/* ── Thank-you variant: sits inside the template's info panel (no extra card) ── */
.reta-offline-details .reta-offline__lead { margin-bottom: 0; }
.reta-offline-details .reta-offline__note { background: color-mix(in srgb, var(--color-info-dark) 8%, transparent); }

/* Research Use Only tag — single product page (replaces the category label). */
.reta-research-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1.15rem;
    border-radius: 9999px;
    border: 1px solid var(--color-primary-300);
    background: transparent;
    color: var(--color-primary-600);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}

/* ════════════════════════════════════════════════
   BEAUTIFUL RESULTS  (before/after marquee + lightbox)
   ════════════════════════════════════════════════ */

.reta-results {
    --results-gap: 1rem;
    --results-h: clamp(9rem, 14vw, 12.5rem);
    --results-speed: 90s;
    padding: 2.5rem 0 3rem;
    overflow: hidden;
}

.reta-results__head {
    text-align: center;
    margin: 1.75rem auto;
    padding: 0 1rem;
}
.reta-results__eyebrow {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    border: 1px solid var(--color-primary-200);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.reta-results__title {
    margin: 0.9rem 0 0;
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
}

/* Rows: a full-bleed viewport with a track that scrolls forever. */
.reta-results__row {
    overflow: hidden;
    padding: calc(var(--results-gap) / 2) 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.reta-results__track {
    display: flex;
    gap: var(--results-gap);
    width: max-content;
    animation: retaMarquee var(--results-speed) linear infinite;
}
/* The track is two identical halves; -50% loops seamlessly. */
.reta-results__row--rtl .reta-results__track { animation-direction: reverse; }
/* Pause only the row whose image is under the cursor — not the whole section. */
.reta-results__track:has(.reta-results__item:hover) { animation-play-state: paused; }

@keyframes retaMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.reta-results__item {
    flex: 0 0 auto;
    height: var(--results-h);
    padding: 0;
    border: 0;
    border-radius: 0.9rem;
    overflow: hidden;
    background: var(--color-bg-body);
    cursor: pointer;
    box-shadow: 0 6px 18px -10px rgba(14, 28, 49, .3);
    transition: transform .3s ease, box-shadow .3s ease;
    width: clamp(250px, 21.5vw, 318px) !important;
    height: clamp(168px, 15vw, 222px) !important;
    border-radius: 24px !important;
    cursor: pointer !important;
}
.reta-results__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px -12px rgba(14, 28, 49, .45);
}
.reta-results__item img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* ── Lightbox ── */
.reta-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(14, 28, 49, 0.9);
    backdrop-filter: blur(3px);
}
.reta-lightbox.is-open { display: flex; }
.reta-lightbox__img {
    max-width: min(92vw, 900px);
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
    animation: retaLbIn .25s ease;
}
@keyframes retaLbIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.reta-lightbox__close,
.reta-lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    transition: background .2s ease;
}
.reta-lightbox__close:hover,
.reta-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.reta-lightbox__close {
    top: 1.25rem;
    right: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
}
.reta-lightbox__close svg { width: 1.4rem; height: 1.4rem; }
.reta-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
}
.reta-lightbox__nav--prev { left: 1.25rem; }
.reta-lightbox__nav--next { right: 1.25rem; }
.reta-lightbox__nav svg { width: 1.6rem; height: 1.6rem; }

@media (max-width: 640px) {
    .reta-lightbox__nav { width: 2.5rem; height: 2.5rem; }
    .reta-lightbox__nav--prev { left: 0.5rem; }
    .reta-lightbox__nav--next { right: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .reta-results__track { animation: none; }
    .reta-results__row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .reta-lightbox__img { animation: none; }
}

/* ════════════════════════════════════════════════
   PRODUCT REVIEWS  (woocommerce/content-single-product.php)
   Wraps WooCommerce's single-product-reviews.php output.
   ════════════════════════════════════════════════ */

.reta-reviews__heading {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    margin: 0 0 1.5rem;
}

/* ── Layout: summary card on top, review grid below ── */
.reta-reviews__layout {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Star ratings — gold glyphs (WC renders a % width over ★ glyphs). */
.reta-reviews .star-rating span::before,
.reta-reviews .stars a { color: var(--color-warning); }
.reta-reviews .star-rating::before { color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border)); }

/* Star glyph fixes. `overflow: hidden` is REQUIRED — WooCommerce hides the
   accessible "Rated 5 out of 5…" text that lives inside .star-rating purely by
   clipping it (the inner span pushes the text to padding-top:1.5em, below the
   box). The real cause of the earlier clipping was the theme's global
   letter-spacing widening the glyphs past the 5.4em width, so reset tracking
   instead. Height stays under 1.5em so the label text remains hidden. */
.reta-reviews .star-rating {
    overflow: hidden;
    letter-spacing: normal;
    width: 5.4em;
    height: 1.4em;
    line-height: 1.4;
}
/* Push the accessible label text (2em) well below the clipped box (1.4em) so it
   stays hidden with margin to spare; the filled-star ::before is absolute at
   top:0 and is unaffected by this padding. */
.reta-reviews .star-rating span {
    overflow: hidden;
    padding-top: 2em;
}

/* ── Summary card (full-width, top) ── */
.reta-reviews__summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--color-primary-500) 15%, var(--color-border));
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--color-primary-50) 55%, var(--color-bg-surface));
}
.reta-reviews__summary-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.reta-reviews__score {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.reta-reviews__avg {
    font-family: var(--font-heading);
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text-main);
}
.reta-reviews__score .star-rating { font-size: 1rem; margin: 0; }
.reta-reviews__count {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.reta-reviews__count--empty { margin: 0; }
.reta-reviews__bars {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.reta-reviews__bar-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.reta-reviews__bar-label { flex-shrink: 0; width: 2rem; }
.reta-reviews__bar-track {
    flex: 1 1 auto;
    height: 0.5rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-primary-500) 14%, var(--color-bg-surface));
    overflow: hidden;
}
.reta-reviews__bar-fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: var(--color-primary-500);
    transition: width .4s ease;
}
.reta-reviews__bar-count { flex-shrink: 0; width: 2.75rem; text-align: right; }

/* "Write a review" button in the rating-analytics (summary) card. */
.reta-reviews__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    align-self: flex-start;
    margin-top: 1rem;
    padding: 0.6rem 1.15rem;
    border-radius: 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    background: var(--color-primary-700);
    color: var(--color-primary-50);
    transition: background .2s ease, transform .2s ease;
}
.reta-reviews__cta:hover { background: var(--color-primary-800); transform: translateY(-1px); }
.reta-reviews__cta svg { width: 0.95rem; height: 0.95rem; }

/* Star ratings float left (overrides WooCommerce's default float:right). */
.woocommerce .star-rating { float: left; }
/* Keep the summary average stars inline beside the score (float would drop
   them below). The review-card stars line uses flow-root to contain its
   floated star — see the .reta-review__stars rule in the review-grid block. */
.reta-reviews__score .star-rating { float: none; }

/* ── WooCommerce review list + form (right) ── */
.reta-reviews__body #reviews .woocommerce-Reviews-title {
    /* Our themed <h2> already heads the section. */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
/* ── Review grid (2-up desktop, 1-up mobile) ──
   The #reviews #comments id chain deliberately mirrors WooCommerce's own
   default selectors (+ .reta-reviews) so these rules win, undoing WC's nested
   border, absolutely-positioned avatar and li margins. WC also adds clearfix
   ::before/::after on the commentlist — those become empty grid items (the
   "stagger" / empty first cell), so we remove them. */
.reta-reviews #reviews #comments ol.commentlist {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.reta-reviews #reviews #comments ol.commentlist::before,
.reta-reviews #reviews #comments ol.commentlist::after { content: none; display: none; }

.reta-reviews #reviews #comments ol.commentlist li.review {
    --review-h: 11rem;
    height: var(--review-h);
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-bg-surface);
    padding: 1.15rem 1.25rem;
    box-shadow: 0 6px 20px -14px rgba(14, 28, 49, .3);
    overflow: hidden;
}
.reta-reviews #reviews #comments ol.commentlist li.review.reta-review--hidden { display: none; }

/* Undo WooCommerce's default .comment-text (nested border + 50px avatar offset). */
.reta-reviews #reviews #comments ol.commentlist li.review .comment-text {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}
.reta-reviews #reviews #comments ol.commentlist li.review .comment-text::before,
.reta-reviews #reviews #comments ol.commentlist li.review .comment-text::after { content: none; display: none; }

/* Avatar — reset WC's absolute positioning; render as a flex item. */
.reta-reviews #reviews #comments ol.commentlist li.review img.avatar {
    position: static;
    float: none;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    margin: 0;
    border-radius: 9999px;
    background: var(--color-primary-50);
    border: 1px solid var(--color-border);
    box-shadow: none;
    flex-shrink: 0;
}

.reta-review__inner {
    display: flex;
    gap: 0.85rem;
    height: 100%;
    min-height: 0;
}
.reta-review__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
}
.reta-review__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
}
.reta-review__nameline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.reta-review__author {
    font-weight: 700;
    font-style: normal;
    color: var(--color-text-main);
    font-size: 0.9rem;
    line-height: 1.2;
}
.reta-review__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    font-size: 0.68rem;
    font-weight: 700;
    font-style: normal;
    color: var(--color-success);
}
.reta-review__verified svg { width: 0.8rem; height: 0.8rem; }
.reta-review__stars { display: flow-root; margin-top: 0.4rem; } /* contains the floated .star-rating */
.reta-review__stars .star-rating { font-size: 0.8rem; margin: 0; }
.reta-review__date {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Scrollable content region — fixed card height, content scrolls inside. */
.reta-review__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-top: 0.7rem;
    padding-right: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-primary-500) 45%, transparent) transparent;
}
.reta-review__scroll::-webkit-scrollbar { width: 6px; }
.reta-review__scroll::-webkit-scrollbar-track { background: transparent; }
.reta-review__scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-primary-500) 40%, transparent);
    border-radius: 9999px;
}
.reta-review__scroll:hover::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-primary-500) 65%, transparent);
}
.reta-review__title {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-main);
}
.reta-review__body {
    font-size: 0.83rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-text-main) 68%, #ffffff);
}
/* Beat WC's default `.comment-text p { margin: 0 0 1em }`. */
.reta-reviews #reviews #comments ol.commentlist li.review .comment-text .reta-review__body p { margin: 0 0 0.5rem; }
.reta-reviews #reviews #comments ol.commentlist li.review .comment-text .reta-review__body p:last-child { margin-bottom: 0; }

.reta-reviews__sentinel { width: 100%; height: 1px; }

/* Pagination. paginate_comments_links( type => list ) => ul.page-numbers. */
.reta-reviews__body .woocommerce-pagination { margin: 0 0 1.5rem; }
.reta-reviews__body .woocommerce-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.reta-reviews__body .woocommerce-pagination a.page-numbers,
.reta-reviews__body .woocommerce-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text-main);
    background: var(--color-bg-surface);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.reta-reviews__body .woocommerce-pagination a.page-numbers:hover {
    border-color: var(--color-primary-500);
    color: var(--color-primary-600);
}
.reta-reviews__body .woocommerce-pagination span.current {
    background: var(--color-primary-700);
    border-color: var(--color-primary-700);
    color: var(--color-primary-50);
}

/* Empty state / "no reviews yet". */
.reta-reviews__body .woocommerce-noreviews {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: 1rem;
    color: var(--color-text-muted);
    background: var(--color-bg-surface);
}
.reta-reviews__body .woocommerce-verification-required {
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: 1rem;
    color: var(--color-text-muted);
    background: var(--color-bg-surface);
}

/* Review form. */
.reta-reviews__body #review_form_wrapper {
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    background: var(--color-bg-surface);
    padding: 1.5rem;
}
.reta-reviews__body #reply-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-main);
    display: block;
    margin-bottom: 1rem;
}
.reta-reviews__body .comment-form-rating label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.875rem; color: var(--color-primary-600); }
.reta-reviews__body .comment-form p { margin: 0 0 1rem; }
.reta-reviews__body .comment-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-main);
}
.reta-reviews__body .comment-form .required { color: var(--color-error); }
/* Star-select widget WooCommerce swaps the <select> for. */
.reta-reviews__body .comment-form-rating .stars a { color: var(--color-warning); }
.reta-reviews__body .comment-form input[type="text"],
.reta-reviews__body .comment-form input[type="email"],
.reta-reviews__body .comment-form textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-bg-body);
    color: var(--color-text-main);
    font-size: 0.9rem;
    font-family: var(--font-body);
}
.reta-reviews__body .comment-form input:focus,
.reta-reviews__body .comment-form textarea:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}
/* Submit button — high specificity + !important so it wins over WooCommerce's
   default button colour (the teal it ships with) and Tailwind base resets. */
.reta-reviews__body .comment-form .form-submit input#submit,
.reta-reviews__body .comment-form input#submit,
.reta-reviews__body #respond input#submit,
.reta-reviews__body .comment-form #submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    border-radius: 9999px;
    padding: 0.8rem 1.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: var(--color-primary-700) !important;
    color: var(--color-primary-50) !important;
    transition: background .25s ease, transform .25s ease;
}
.reta-reviews__body .comment-form input#submit:hover,
.reta-reviews__body .comment-form #submit:hover {
    background: var(--color-primary-800) !important;
    transform: translateY(-1px);
}

/* Top-of-page rating link → reviews section. */
.reta-reviews-jump { cursor: pointer; text-decoration: none; }
.reta-reviews-jump:hover .reta-reviews-jump__label {
    color: var(--color-primary-600);
    text-decoration: underline;
}

/* Fixed-header offset for native anchor jumps (JS also handles this). */
#reviews-section, #respond, #review_form_wrapper, #products { scroll-margin-top: 7rem; }

@media (min-width: 768px) {
    /* Summary: score/count on the left, distribution bars on the right. */
    .reta-reviews__summary {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        align-items: center;
        gap: 2.5rem;
        padding: 1.75rem 2rem;
    }
    /* Reviews: two cards per row. */
    .reta-reviews #reviews #comments ol.commentlist {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reta-reviews__bar-fill,
    .reta-reviews__body .comment-form #submit { transition: none; }
}

/* ── 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;
}

.about-card-green {
    background: var(--color-primary-50);
}

.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;
}


/* 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);
}

.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);
}


/* 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;
}

/* ════════════════════════════════════════════════
   COMMUNITY POPUP  (inc/community-popup.php + CF7 form)
   ════════════════════════════════════════════════ */

.tha-pop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-family: var(--font-body);
}
.tha-pop.is-open { display: flex; }
body.tha-pop-lock { overflow: hidden; }

.tha-pop__overlay {
    position: absolute;
    inset: 0;
    background: rgba(14, 28, 49, 0.55);
    backdrop-filter: blur(2px);
    animation: thaFade .25s ease;
}
@keyframes thaFade { from { opacity: 0; } to { opacity: 1; } }

.tha-pop__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 28rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.5rem clamp(1.1rem, 3.5vw, 1.75rem) 1.35rem;
    border-radius: 0.9rem;
    background: var(--color-bg-surface);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .45);
    text-align: center;
    animation: thaPopIn .35s cubic-bezier(.22,.61,.36,1);
}
/* Brand accent bar across the top. */
.tha-pop__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary-600);
    border-radius: 0.9rem 0.9rem 0 0;
}
@keyframes thaPopIn {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.tha-pop__close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.tha-pop__close:hover { background: var(--color-text-main); color: var(--color-bg-surface); }
.tha-pop__close svg { width: 1rem; height: 1rem; }

.tha-pop__logo { text-align: left; margin-bottom: 0.9rem; }
.tha-pop__logo .custom-logo { max-height: 32px; width: auto; }
.tha-pop__wordmark {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-text-main);
    letter-spacing: -0.02em;
}

.tha-pop__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-primary-600);
}
.tha-pop__title {
    font-family: var(--font-heading);
    margin: 0 0 0.65rem;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--color-text-main);
}
.tha-pop__accent { display: block; color: var(--color-primary-600); }
.tha-pop__desc {
    max-width: 26rem;
    margin: 0 auto 1.25rem;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* ── CF7 form (classes come from the form markup) ── */
.tha-pop__form .wpcf7 { margin: 0; }
.tha-pop__form .wpcf7-form { margin: 0; }
.thaPopFields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 0.9rem;
    text-align: left;
}
.thaPopField { display: flex; flex-direction: column; }
.thaPopField.is-wide { grid-column: 1 / -1; }
.thaPopField > label {
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-main);
}
.thaPopInput,
.thaDial {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    background: var(--color-bg-body);
    font-size: 0.82rem;
    font-family: var(--font-body);
    color: var(--color-text-main);
    box-sizing: border-box;
}
.thaPopInput::placeholder { color: var(--color-text-muted); }
/* Age number field: hide the spinner arrows for a cleaner look. */
.thaPopInput[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.thaPopInput[type="number"]::-webkit-outer-spin-button,
.thaPopInput[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.thaPopInput:focus,
.thaDial:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}
.thaPhoneRow {
    display: grid;
    grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
    gap: 0.5rem;
}
.thaDial { padding-right: 1.4rem; }

/* Age + Phone on one line: a narrow fixed Age beside the flexible Phone. */
.thaAgePhone {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.thaAgePhone__age { flex: 0 0 5rem; }
.thaAgePhone__phone { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
    .thaAgePhone { gap: 0.5rem; }
    .thaAgePhone__age { flex: 0 0 4rem; }
    .thaAgePhone .thaPhoneRow { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); }
}

/* CF7 wraps each control in a span — make it fill the column. */
.tha-pop__form .wpcf7-form-control-wrap { display: block; width: 100%; }
.thaPhoneRow .wpcf7-form-control-wrap { display: block; }

.thaPopBtn {
    width: 100%;
    margin-top: 1rem;
    padding: 0.8rem 1.25rem;
    border: none;
    border-radius: 0.65rem;
    background: var(--color-primary-700);
    color: var(--color-primary-50);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.thaPopBtn:hover { background: var(--color-primary-800); transform: translateY(-1px); }

/* CF7 validation / response messages */
.tha-pop__form .wpcf7-not-valid-tip { color: var(--color-error); font-size: 0.72rem; margin-top: 0.25rem; }
.tha-pop__form .wpcf7-not-valid { border-color: var(--color-error); }
.tha-pop__form .wpcf7-response-output {
    margin: 0.9rem 0 0;
    padding: 0.6rem 0.85rem;
    border-radius: 0.55rem;
    font-size: 0.78rem;
    text-align: center;
}
.tha-pop__form .wpcf7-spinner { margin: 0.5rem auto 0; }

@media (max-width: 480px) {
    .thaPopFields { grid-template-columns: 1fr; }
    .thaPhoneRow { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .tha-pop__overlay,
    .tha-pop__card { animation: none; }
    .thaPopBtn { transition: none; }
}

/* Contact page — social row (managed via Theme Options). */
.contact-social {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2.5rem;
}
.contact-social__label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.contact-social__list {
    display: flex;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.contact-social__list a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.contact-social__list a:hover {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #fff;
}
.contact-social__list svg { width: 1.15rem; height: 1.15rem; }

/* ════════════════════════════════════════════════
   FOOTER  (footer.php)
   ════════════════════════════════════════════════ */

.reta-footer {
    margin-top: auto;
    background: var(--color-bg-dark);
    color: rgba(255, 255, 255, 0.66);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.reta-footer__inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 3.5rem 1.25rem 2rem;
}

/* Top: brand + link columns */
.reta-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.reta-footer__brand { max-width: 22rem; }
.reta-footer__logo {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
}
/* A logo image sits on a dark panel — cap its size. */
.reta-footer__brand .custom-logo,
.reta-footer__logo-img { max-height: 48px; width: auto; }
.reta-footer__logo-link { display: inline-block; }
.reta-footer__tagline {
    margin: 1rem 0 1.25rem;
    font-size: 0.875rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
}
.reta-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.82);
}
.reta-footer__badge svg { width: 0.95rem; height: 0.95rem; color: var(--color-primary-300); }

.reta-footer__social {
    display: flex;
    gap: 0.6rem;
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}
.reta-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.75);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.reta-footer__social a:hover {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #fff;
}
.reta-footer__social svg { width: 1.05rem; height: 1.05rem; }

/* Link columns */
.reta-footer__heading {
    margin: 0 0 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}
.reta-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.reta-footer__links li { margin: 0; }
.reta-footer__links a {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color .2s ease, padding-left .2s ease;
}
.reta-footer__links a:hover {
    color: #fff;
    padding-left: 0.25rem;
}

/* Trust strip */
.reta-footer__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    margin-top: 2.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.reta-footer__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
}
.reta-footer__trust-item svg { width: 1.15rem; height: 1.15rem; color: var(--color-primary-300); flex-shrink: 0; }

/* Bottom bar */
.reta-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.reta-footer__copy {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}
.reta-footer__disclaimer {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 640px) {
    .reta-footer__top { grid-template-columns: 1fr 1fr; }
    .reta-footer__brand { grid-column: 1 / -1; max-width: none; }
}

@media (min-width: 1024px) {
    .reta-footer__inner { padding: 4.5rem 2rem 2rem; }
    .reta-footer__top {
        grid-template-columns: 1.8fr 1fr 1fr 1fr;
        gap: 3rem;
        align-items: start;
    }
    .reta-footer__brand { grid-column: auto; }
    .reta-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reta-footer__social a,
    .reta-footer__links a { transition: none; }
}