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

    /* Home page only: the front-page carousel runs two cards per view on phones
       (main.js), leaving each card ~170px wide. The blurb and category chip are
       dropped and the footer stacks so the price and the cart button both fit.
       The shop grid stays one card per row there, so it keeps the full card. */
    .home .reta-card__desc,
    .home .reta-card__cat { display: none; }

    .home .reta-card__body { padding: 0.75rem; gap: 0.4rem; }
    .home .reta-card__title { font-size: 0.9375rem; }
    .home .reta-card__badge {
        top: 0.5rem;
        left: 0.5rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.5625rem;
    }

    .home .reta-card__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        padding-top: 0.7rem;
    }
    .home .reta-card__price { font-size: 1rem; }
    .home .reta-card__price del { display: block; margin: 0 0 0.1rem; }
    .home .reta-card__cart { width: 100%; padding: 0.6rem 0.5rem; }
}

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

/* ════════════════════════════════════════════════
   AIRPAY — "How to Pay" panel under the checkout
   order summary (woocommerce/checkout/form-checkout.php)
   ════════════════════════════════════════════════ */
.reta-airpay-help {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
    background: var(--color-bg-surface);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.02), 0 4px 6px -2px rgba(0, 0, 0, 0.01);
}
/* Keep the panel clear of the mobile sticky "Complete Order" bar. */
@media (max-width: 1023px) {
    .reta-airpay-help { margin-bottom: 7.5rem; }
}

.reta-airpay-help__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.reta-airpay-help__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: var(--color-primary-50);
    color: var(--color-primary-600);
}
.reta-airpay-help__icon svg { width: 1.2rem; height: 1.2rem; }
.reta-airpay-help__heading {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text-main);
}

.reta-airpay-help__steps {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    counter-reset: none;
}
.reta-airpay-help__steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0;
}
.reta-airpay-help__num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.05rem;
    border-radius: 9999px;
    background: var(--color-primary-600);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.reta-airpay-help__text {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-main);
}

.reta-airpay-help__note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 1.25rem 0 0;
    padding: 0.85rem 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
    background: var(--color-warning-light);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-main);
}
.reta-airpay-help__note svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--color-warning);
}
.reta-airpay-help__note strong { font-weight: 700; }
.reta-airpay-help__note a {
    font-weight: 600;
    color: #128C7E; /* WhatsApp brand green (readable on the amber note) */
    text-decoration: underline;
}
.reta-airpay-help__note a:hover { text-decoration: none; }

/* 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; }
}
/* ════════════════════════════════════════════════
   CERTIFICATE OF ANALYSIS CARD  (single product, above Buy Now)
   ════════════════════════════════════════════════ */

.reta-test-report {
    margin-top: 1.5rem;
    border: 1px solid var(--color-primary-200);
    border-radius: 0.75rem;
    background: var(--color-bg-surface);
    box-shadow: 0 1px 2px rgba(5, 44, 85, 0.05), 0 10px 24px -18px rgba(5, 44, 85, 0.42);
    overflow: hidden;
}

/* ── Header strip ───────────────────────────── */
.reta-test-report__banner {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1.15rem;
    background: linear-gradient(100deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
    color: #fff;
}

.reta-test-report__banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    border-radius: var(--radius-full, 9999px);
    background: rgba(255, 255, 255, 0.16);
}

.reta-test-report__banner-icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.reta-test-report__banner-text {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* ── Body ───────────────────────────────────── */
.reta-test-report__body {
    padding: 1rem 1.15rem 1.15rem;
}

/* Peptide/lab left, purity right, both vertically centred on one row. */
.reta-test-report__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.reta-test-report__head {
    min-width: 0;
}

.reta-test-report__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-main);
}

.reta-test-report__subtitle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.reta-test-report__lab-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--color-primary-400);
}

.reta-test-report__lab-icon svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* ── Purity figure (right of the row) ───────── */
.reta-test-report__purity {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: right;
    color: var(--color-primary-600);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* ── Call to action ─────────────────────────── */
.reta-test-report__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.7rem 1.35rem;
    border: 0;
    border-radius: var(--radius-full, 9999px);
    background: linear-gradient(100deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 16px -8px rgba(14, 97, 181, 0.9);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.reta-test-report__cta:hover,
.reta-test-report__cta:focus-visible {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -10px rgba(14, 97, 181, 0.95);
    filter: saturate(1.12);
}

.reta-test-report__cta:focus-visible {
    outline: 2px solid var(--color-primary-800);
    outline-offset: 3px;
}

.reta-test-report__cta:active {
    transform: translateY(0);
}

.reta-test-report__cta svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.reta-test-report__cta-arrow {
    display: inline-flex;
    transition: transform 0.25s ease;
}

.reta-test-report__cta:hover .reta-test-report__cta-arrow,
.reta-test-report__cta:focus-visible .reta-test-report__cta-arrow {
    transform: translateX(3px);
}

/* ── Small screens ──────────────────────────── */
/* Below ~420px the two columns stop fitting side by side, so stack them and
   flip the purity figure back to the left edge rather than letting it overflow. */
@media (max-width: 420px) {
    .reta-test-report__main {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .reta-test-report__purity {
        text-align: left;
    }

    .reta-test-report__cta {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reta-test-report__cta,
    .reta-test-report__cta-arrow {
        transition: none;
    }
    .reta-test-report__cta:hover,
    .reta-test-report__cta:focus-visible {
        transform: none;
    }
    .reta-test-report__cta:hover .reta-test-report__cta-arrow,
    .reta-test-report__cta:focus-visible .reta-test-report__cta-arrow {
        transform: none;
    }
}


/* ════════════════════════════════════════════════
   AGE VERIFICATION GATE  (inc/quiz-gate.php)

   Full-screen, page-like overlay shown on the first
   visit: one question, two answers, no way out but
   a "Yes". Built from the theme's own tokens so the
   gate reads as part of the site: the header logo,
   the theme's own .btn-forest / .btn-secondary pills
   and --color-border hairlines.
   ════════════════════════════════════════════════ */

.tha-quiz {
    /* Local aliases — one place to retune the gate without touching the
       brand scale, and they keep these rules readable. */
    --q-accent: var(--color-primary-500);
    --q-accent-deep: var(--color-primary-700);
    --q-accent-dark: var(--color-primary-800);
    --q-accent-soft: var(--color-primary-50);
    --q-accent-line: var(--color-primary-200);
    --q-ink: var(--color-text-main);
    --q-muted: var(--color-text-muted);
    --q-body: #4b5563;          /* long-form copy — --color-text-muted is too pale to read at length */
    --q-line: var(--color-border);
    --q-surface: var(--color-bg-surface);
    --q-page: #fafbfc;
    --q-danger: #b42318;
    --q-danger-soft: #fef3f2;
    --q-danger-line: #fecdca;

    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    font-family: var(--font-body);
    background: var(--q-page);
}
.tha-quiz.is-open { display: block; }
.tha-quiz[hidden] { display: none; }

/* Locking <body> alone is not enough here. The base rules set `overflow-x: clip`
   on <html> (§1, near the top of this file), and <body>'s overflow only
   propagates to the viewport while <html> is `visible` in BOTH axes — so the
   page scrollbar stays live behind the overlay and you get two scrollbars.
   Lock the root as well, and pad it by the scrollbar width JS measures so the
   page underneath doesn't jump as the gate opens and closes. */
html.tha-quiz-lock {
    overflow: hidden;
    padding-right: var(--tha-quiz-sbw, 0px);
}
body.tha-quiz-lock { overflow: hidden; }

.tha-quiz__shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* dvh keeps the panel centred under mobile browser chrome. */
    height: 100dvh;
    animation: thaQuizIn .32s cubic-bezier(.22,.61,.36,1);
}
@keyframes thaQuizIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Scroll area ─────────────────────────────── */

/* One short panel, so it is centred in the viewport and only starts scrolling
   on very short screens. */
.tha-quiz__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tha-quiz__inner {
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    padding: clamp(1.75rem, 5vw, 3.25rem) clamp(1rem, 4vw, 2rem);
}
.tha-quiz__panel[hidden] { display: none !important; }
.tha-quiz__panel { animation: thaQuizPanel .3s ease both; }
@keyframes thaQuizPanel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Question ────────────────────────────────── */

.tha-quiz__step { text-align: center; }
.tha-quiz__head { position: relative; z-index: 1; }

/* The site logo stands in for a heading badge. Unlinked (see quiz-gate.php),
   and height-capped so a wide wordmark and a square mark both sit right. */
.tha-quiz__brand { margin-bottom: 1.5rem; }
.tha-quiz__logo {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: min(15rem, 70%);
    max-height: 4.5rem;
    object-fit: contain;
}
.tha-quiz__logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--color-primary-600);
}

.tha-quiz__title {
    margin: 0;
    font-size: clamp(1.6rem, 5vw, 2.35rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.04em;   /* the theme's `tracking-tighter` heading treatment */
    color: var(--q-ink);
}
/* --color-text-muted is too pale for instructional copy at this size, so the
   sub-line uses the darker body grey; --q-muted stays for incidental meta. */
.tha-quiz__sub {
    margin: 0.7rem 0 0;
    font-size: clamp(0.9rem, 2vw, 1rem);
    line-height: 1.55;
    color: var(--q-body);
}

/* ── Answers ─────────────────────────────────── */

/* The buttons themselves are the theme's .btn-forest / .btn-secondary pills —
   these rules only lay them out and size them up for a full-screen decision. */
.tha-quiz__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.tha-quiz__btn {
    min-width: 9.5rem;
    padding: 0.95rem 2.25rem;
    font-size: 0.9375rem;
    animation: thaQuizOption .32s ease both;
}
.tha-quiz__btn:nth-child(2) { animation-delay: 60ms; }
@keyframes thaQuizOption { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.tha-quiz__btn svg { width: 1.0625rem; height: 1.0625rem; flex: none; }

/* .btn-forest's hover shadow is sampled from the old forest palette; on the
   near-white gate the blue it actually paints should cast the blue shadow. */
.tha-quiz__btn.btn-forest {
    box-shadow: 0 8px 20px -10px rgba(14, 97, 181, .55);
}
.tha-quiz__btn.btn-forest:hover,
.tha-quiz__btn.btn-forest:focus-visible {
    box-shadow: 0 10px 26px -10px rgba(14, 97, 181, .7);
    outline: none;
}
.tha-quiz__btn.btn-secondary { background: var(--q-surface); }
/* The "No" pill only turns red on approach — it reads as a neutral choice at
   rest, so neither answer is nudged. */
.tha-quiz__btn.btn-secondary:hover,
.tha-quiz__btn.btn-secondary:focus-visible {
    border-color: var(--q-danger-line);
    background: var(--q-danger-soft);
    color: var(--q-danger);
    outline: none;
}

/* ── Not eligible ────────────────────────────── */

/* No border and no card behind it — the notice sits straight on the gate, the
   same as the question panel it replaces. */
.tha-quiz__denied {
    text-align: center;
    padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 4vw, 2.25rem);
}
.tha-quiz__denied:focus { outline: none; }

.tha-quiz__denied-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.1rem;
    border-radius: 9999px;
    background: var(--q-danger-soft);
    color: var(--q-danger);
}
.tha-quiz__denied-icon svg { width: 1.75rem; height: 1.75rem; }

.tha-quiz__denied-title {
    margin: 0;
    font-size: clamp(1.4rem, 4.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: var(--q-danger);
}
.tha-quiz__denied-text {
    margin: 0.75rem 0 0;
    font-size: clamp(0.9rem, 2vw, 1rem);
    line-height: 1.6;
    color: var(--q-body);
}

/* A quiet text link, not a button — it is a correction for a misclick, not a
   second chance being offered. */
.tha-quiz__retry {
    margin-top: 1.5rem;
    border: none;
    background: none;
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--q-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.3s ease;
}
.tha-quiz__retry:hover,
.tha-quiz__retry:focus-visible { color: var(--q-ink); outline: none; }

/* ── Small screens ───────────────────────────── */

@media (max-width: 420px) {
    /* Below this the pills get too narrow side by side, so they stack full-width. */
    .tha-quiz__actions { flex-direction: column; gap: 0.6rem; }
    .tha-quiz__btn { width: 100%; }
    .tha-quiz__logo { max-height: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tha-quiz__shell,
    .tha-quiz__panel,
    .tha-quiz__btn { animation: none; }
    .tha-quiz__btn,
    .tha-quiz__retry { transition: none; }
    .tha-quiz__btn:hover { transform: none; }
}

/* ════════════════════════════════════════════════
   SALE OFFER COUNTDOWN  (single product, on-sale only)
   ════════════════════════════════════════════════ */

.reta-offer-timer {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    /* The detail column is a stretch flex container — without this the card
       would span its full width instead of hugging its content. */
    align-self: flex-start;
    max-width: 100%;
    margin-bottom: 1.5rem;
    padding: 0.7rem 1.35rem 0.7rem 0.8rem;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-error) 22%, transparent);
    background: linear-gradient(135deg, var(--color-error-light) 0%, var(--color-bg-surface) 100%);
    box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--color-error) 60%, transparent);
}

/* ── Clock face ──────────────────────────────── */

.reta-offer-timer__clock {
    position: relative;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-bg-surface);
    box-shadow: 0 1px 3px rgba(22, 21, 24, 0.12);
}

.reta-offer-timer__dial {
    width: 100%;
    height: 100%;
    /* Start the arc at 12 o'clock rather than 3. */
    transform: rotate(-90deg);
}

.reta-offer-timer__dial-track,
.reta-offer-timer__dial-fill {
    fill: none;
    stroke-width: 3;
}

.reta-offer-timer__dial-track {
    stroke: color-mix(in srgb, var(--color-error) 15%, transparent);
}

.reta-offer-timer__dial-fill {
    stroke: var(--color-error);
    stroke-linecap: round;
    /* 2πr for r=21. JS drains the offset as the countdown runs. */
    stroke-dasharray: 131.95;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.9s linear;
}

.reta-offer-timer__hand {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    border-radius: 9999px;
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(0deg);
}

.reta-offer-timer__hand--minute {
    height: 0.7rem;
    background: var(--color-error-dark);
}

.reta-offer-timer__hand--second {
    width: 1.5px;
    height: 0.95rem;
    background: var(--color-error);
    transition: transform 0.3s cubic-bezier(0.4, 1.8, 0.5, 1);
}

.reta-offer-timer__pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-error-dark);
    transform: translate(-50%, -50%);
}

/* ── Copy + digits ───────────────────────────── */

.reta-offer-timer__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.reta-offer-timer__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    line-height: 1;
}

.reta-offer-timer__badge {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-error);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.reta-offer-timer__label {
    color: var(--color-error-dark);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.reta-offer-timer__digits {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.reta-offer-timer__unit {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.7rem;
    padding: 0.28rem 0.4rem 0.22rem;
    border-radius: 0.5rem;
    background: linear-gradient(180deg, #2c2b30 0%, var(--color-text-main) 100%);
    overflow: hidden;
}

/* Hairline split across the tile — reads as a flip-clock card. */
.reta-offer-timer__unit::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.reta-offer-timer__num {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.reta-offer-timer__unit-label {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
}

.reta-offer-timer__colon {
    color: var(--color-error);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    /* Sits above the unit labels so it lines up with the digits. */
    margin-bottom: 0.55rem;
    animation: reta-offer-blink 1s steps(1, end) infinite;
}

@keyframes reta-offer-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0.25; }
}

@media (max-width: 400px) {
    .reta-offer-timer { gap: 0.7rem; padding: 0.6rem 1rem 0.6rem 0.7rem; }
    .reta-offer-timer__clock { width: 2.6rem; height: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .reta-offer-timer__colon { animation: none; }
    .reta-offer-timer__dial-fill,
    .reta-offer-timer__hand--second { transition: none; }
}

/* ════════════════════════════════════════════════
   THANK-YOU — PAYMENT CALL TO ACTION
   The Payment Instructions panel is printed first on the order-received page
   (woocommerce/checkout/thankyou.php) because with Airpay the order is not
   paid yet. That template also tags the gateway's own action link — "No SMS?
   Pay here instead." — with .reta-pay-now so it can be a real button here.
   ════════════════════════════════════════════════ */
.reta-payment-instructions .reta-pay-now {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.8rem 1.6rem;
    border: 0;
    border-radius: 9999px;
    /* !important: the gateway prints this link, and may colour it inline. */
    background: var(--color-primary-700) !important;
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    transform-origin: center;
    will-change: transform;
    animation: reta-pay-beat 1.6s ease-in-out infinite;
}

.reta-payment-instructions .reta-pay-now::after {
    content: "→";
    font-size: 1rem;
    line-height: 1;
}

/* Pause the beat once the customer is actually on the button — it has done
   its job at that point and a moving target is hostile to click. */
.reta-payment-instructions .reta-pay-now:hover,
.reta-payment-instructions .reta-pay-now:focus-visible {
    background: var(--color-primary-800) !important;
    color: #fff !important;
    text-decoration: none !important;
    animation-play-state: paused;
}

.reta-payment-instructions .reta-pay-now:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary-300) 80%, transparent);
    outline-offset: 2px;
}

/* Double-thump heartbeat + an expanding ring, looping forever: the order is
   stuck until this is clicked, so the nudge never stops. */
@keyframes reta-pay-beat {
    0% {
        transform: scale(1);
        box-shadow: 0 8px 20px -10px rgba(14, 28, 49, .5),
                    0 0 0 0 color-mix(in srgb, var(--color-primary-600) 55%, transparent);
    }
    12% { transform: scale(1.08); }
    24% { transform: scale(1); }
    36% { transform: scale(1.05); }
    48% { transform: scale(1); }
    70%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 20px -10px rgba(14, 28, 49, .5),
                    0 0 0 18px transparent;
    }
}

@media print {
    .reta-payment-instructions .reta-pay-now { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .reta-payment-instructions .reta-pay-now {
        animation: none;
        box-shadow: 0 8px 20px -10px rgba(14, 28, 49, .5);
    }
}

/* ── Payment Instructions panel — mobile ─────────────────────────────────
   The gateway (Airpay) prints the panel body itself — a spinner, a
   "Waiting for your payment…" heading, a paragraph and the pay link — so
   the markup is not ours to edit and everything below is defensive:
   normalise its spacing, keep long strings inside the card, and make the
   pay button a full-width tap target instead of a two-line pill. */
.reta-payment-instructions {
    /* Gateway text can contain long unbroken URLs / reference ids. */
    overflow-wrap: anywhere;
}

.reta-payment-instructions > *:first-child { margin-top: 0; }
.reta-payment-instructions > *:last-child { margin-bottom: 0; }

/* :not([class]) so the theme's own instruction panels (.reta-offline__lead
   and friends) keep the spacing they were designed with — this only tidies
   the gateway's unstyled markup. */
.reta-payment-instructions p:not([class]) {
    margin: 0 0 0.6rem;
    line-height: 1.55;
}

/* The gateway's status line ("Waiting for your payment…") is a heading with
   an inline spinner beside it. Line the two up on one baseline row and let
   the label take the width it needs rather than wrapping under the spinner. */
.reta-payment-instructions h1,
.reta-payment-instructions h2,
.reta-payment-instructions h3,
.reta-payment-instructions h4,
.reta-payment-instructions h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
}

.reta-payment-instructions img,
.reta-payment-instructions svg,
.reta-payment-instructions .spinner {
    flex: 0 0 auto;
    vertical-align: middle;
}

.reta-payment-instructions img { max-width: 100%; height: auto; }

@media (max-width: 640px) {
    /* Full-width button: "No SMS? Pay here instead." fits on one line at
       phone widths only if it owns the row. */
    .reta-payment-instructions .reta-pay-now {
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 0.85rem 1.1rem;
        font-size: 0.875rem;
        white-space: normal;
        /* Softer beat: a full-width button scaled 8% would push past the
           card padding and give the page a horizontal scrollbar. */
        animation-name: reta-pay-beat-sm;
    }

    .reta-payment-instructions .reta-pay-now::after {
        /* The arrow rides along with the label rather than pinning right. */
        margin-left: 0.1rem;
    }
}

@keyframes reta-pay-beat-sm {
    0% {
        transform: scale(1);
        box-shadow: 0 8px 20px -10px rgba(14, 28, 49, .5),
                    0 0 0 0 color-mix(in srgb, var(--color-primary-600) 55%, transparent);
    }
    12% { transform: scale(1.03); }
    24% { transform: scale(1); }
    36% { transform: scale(1.02); }
    48% { transform: scale(1); }
    70%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 20px -10px rgba(14, 28, 49, .5),
                    0 0 0 12px transparent;
    }
}

/* Panel chrome. Written here rather than as Tailwind responsive utilities
   because the compiled assets/css/tailwind.css is a checked-in build and
   these variants are not in it. */
.reta-payment-alert__icon { display: flex; }

@media (min-width: 640px) {
    /* Indent the body under the heading, clearing the 2.5rem icon + gap. */
    .reta-payment-alert .reta-payment-instructions { padding-left: 3.25rem; }
}

@media (max-width: 640px) {
    .reta-payment-alert__icon { width: 2.25rem; height: 2.25rem; }
    .reta-payment-alert__icon svg { width: 1.15rem; height: 1.15rem; }
    .reta-payment-alert__title { font-size: 1rem; line-height: 1.4; }
}

@media print, (prefers-reduced-motion: reduce) {
    /* Re-assert over the mobile beat defined above. */
    .reta-payment-instructions .reta-pay-now { animation: none; }
}

/* ════════════════════════════════════════════════
   TRUST STRIP + DELIVERY ESTIMATE  (single product, around Add to Cart)
   ════════════════════════════════════════════════ */

/* ── Assurance badges, sitting just above the Add to Cart button ── */
/* The four badges must read as one unbroken line. Their total width is almost
   exactly 52.5 × the font size, so the type scales with the column (a query
   container) instead of wrapping: ~100cqw / 55 keeps a little slack either side.
   The plain rem value above it is the fallback for engines without cqw. */
.reta-trust-strip-wrap {
    container-type: inline-size;
    margin: 0 0 1rem;
}

.reta-trust-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;                   /* Last resort on very narrow screens. */
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* legacy Edge */
    overscroll-behavior-x: contain;
}

.reta-trust-strip::-webkit-scrollbar { display: none; }

.reta-trust-strip__item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.38em;
    font-size: 0.66rem;
    font-size: clamp(0.58rem, 1.8cqw, 0.78rem);
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--color-text-main);
}

/* Hairline separators between badges, matching the reference strip. */
.reta-trust-strip__item + .reta-trust-strip__item {
    margin-left: 0.65em;
    padding-left: 0.65em;
    border-left: 1px solid var(--color-border);
}

.reta-trust-strip__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--color-primary-600);
}

.reta-trust-strip__icon svg {
    width: 1.3em;
    height: 1.3em;
}

/* Phones are too narrow for four badges at a legible size, so the row scrolls.
   The fade on the trailing edge is the only hint that there is more to see. */
@media (max-width: 640px) {
    .reta-trust-strip {
        padding-right: 1.25rem;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent 100%);
    }
}

/* ── Delivery estimate card, directly below the Add to Cart button ── */
.reta-delivery {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    overflow: hidden;
    border: 1px solid var(--color-primary-200);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-primary-50) 85%, var(--color-bg-surface));
}

/* Soft halo in the bottom-right corner (decorative). */
.reta-delivery::after {
    content: "";
    position: absolute;
    right: -3.5rem;
    bottom: -4.5rem;
    width: 11rem;
    height: 11rem;
    border-radius: var(--radius-full, 9999px);
    /* Radial, not a flat fill: a solid disc leaves a visible hard edge behind
       the note text. */
    background: radial-gradient(circle at center,
        color-mix(in srgb, var(--color-primary-400) 16%, transparent) 0%,
        transparent 72%);
    pointer-events: none;
}

.reta-delivery__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    background: var(--color-primary-800);
    color: #fff;
}

.reta-delivery__icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.reta-delivery__body {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.reta-delivery__label {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--color-text-muted);
}

.reta-delivery__headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0.3rem 0 0;
}

.reta-delivery__lead {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-main);
}

/* The date itself — the one thing a shopper scans for. */
.reta-delivery__date {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary-600);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
}

.reta-delivery__note {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .reta-delivery {
        padding: 0.9rem 1rem;
        gap: 0.7rem;
    }

    .reta-delivery__icon {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.65rem;
    }

    .reta-delivery__icon svg { width: 1.15rem; height: 1.15rem; }
    .reta-delivery__lead { font-size: 1rem; }
}

/* ════════════════════════════════════════════════
   PRODUCT VERIFICATION  (single product, below the results marquee)
   ════════════════════════════════════════════════ */

/* Dark panel on --color-bg-dark rather than black, so it reads as the same
   family as the footer and the COA card rather than a foreign block. */
.reta-verify {
    background: var(--color-bg-dark);
    padding: 3.5rem 1rem;
}

.reta-verify__inner {
    display: grid;
    /* minmax(0, …), not 1fr: a bare 1fr track floors at the 1492px intrinsic
       width of the guide image and pushes the whole row off-screen on phones. */
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    max-width: 80rem;
    margin: 0 auto;
}

.reta-verify__figure,
.reta-verify__body { min-width: 0; }

@media (min-width: 1024px) {
    .reta-verify {
        padding: 4.5rem 2rem;
    }

    .reta-verify__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 3.5rem;
    }
}

/* ── Guide image ───────────────────────────── */
.reta-verify__figure {
    margin: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    /* A hairline of the brand blue keeps the artwork from floating on the navy. */
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary-400) 35%, transparent),
                0 24px 48px -24px rgba(0, 0, 0, .65);
}

.reta-verify__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Copy column ───────────────────────────── */
.reta-verify__eyebrow {
    margin: 0 0 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--color-primary-300);
}

.reta-verify__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #fff;
}

/* ── Batch code callout ────────────────────── */
.reta-verify__callout {
    margin-top: 1.75rem;
    border: 1px solid color-mix(in srgb, var(--color-primary-400) 30%, transparent);
    border-left-width: 3px;
    border-left-color: var(--color-primary-400);
    border-radius: 0.9rem;
    padding: 1.05rem 1.35rem;
    background: color-mix(in srgb, var(--color-primary-500) 16%, transparent);
}

.reta-verify__callout-label {
    margin: 0 0 0.4rem;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--color-primary-300);
}

.reta-verify__callout-text {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

/* ── Call to action ────────────────────────── */
/* Light blue fill with dark type: primary-600 on this navy is too close in
   value to carry a button. */
.reta-verify__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
    border-radius: var(--radius-full, 9999px);
    padding: 0.95rem 1.9rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--color-primary-400);
    color: var(--color-bg-dark);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.reta-verify__cta:hover,
.reta-verify__cta:focus-visible {
    background: var(--color-primary-300);
    color: var(--color-bg-dark);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -14px var(--color-primary-300);
}

.reta-verify__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.reta-verify__cta svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .reta-verify__cta { transition: none; }
    .reta-verify__cta:hover,
    .reta-verify__cta:focus-visible { transform: none; }
}