/*
Theme Name: Ascentides
Theme URI: https://ascentides.com
Description: Premium WooCommerce child theme based on Ascentides design. Clean white aesthetic with sky blue accents, 3D hero, and modern e-commerce features.
Author: Ascentides
Author URI: https://ascentides.com
Template: storefront
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ascentides
*/

/* ==========================================================================
   Design System: Ascentides-Derived - Clean White + Sky Blue
   ========================================================================== */

:root {
    /* Primary Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --text-primary: #000000;
    --text-secondary: #555555;
    --text-muted: #797979;

    /* SKY BLUE PALETTE (Standardized) */
    --sky-50: #f0f9ff;
    --sky-100: #e0f2fe;
    --sky-200: #bae6fd;
    --sky-300: #7dd3fc;
    --sky-400: #38bdf8;
    --sky-500: #0ea5e9;
    --sky-600: #0284c7;
    --sky-700: #0369a1;
    --sky-800: #075985;
    --sky-900: #0c4a6e;

    /* Legacy aliases (for backwards compatibility) */
    --text-dark: #000000;
    --text-medium: #555555;
    --cloud-white: #ffffff;
    --cloud-soft: #f8fafc;

    /* Trust Badge Accent Colors (Remapped to Sky Theme) */
    /* WAS Green -> NOW Sky Blue Light */
    --accent-green: var(--sky-100);
    --accent-green-icon: var(--sky-200);
    --accent-green-text: var(--sky-700);

    /* Blue stays Blue */
    --accent-blue: var(--sky-100);
    --accent-blue-icon: var(--sky-200);
    --accent-blue-text: var(--sky-600);

    /* Gold is okay for contrast, but keeping soft */
    --accent-gold: #fefeca;
    --accent-gold-icon: #fefeca;
    --accent-gold-text: #d97706;

    /* Brand Gradients (Sky Themed) */
    --gradient-hero: linear-gradient(180deg, var(--sky-50) 0%, var(--sky-100) 100%);
    --gradient-trust: linear-gradient(180deg, #ffffff 0%, var(--sky-50) 100%);
    --gradient-newsletter: linear-gradient(135deg, var(--sky-50) 0%, var(--sky-100) 100%);
    --gradient-features: var(--sky-50);

    /* Sky Theme Variables */
    --sky-deep: var(--sky-800);
    --sky-blue: var(--sky-500);
    --sky-light: var(--sky-300);
    --sky-pale: var(--sky-100);

    /* Shadows */
    --shadow-card: 0px 4px 40px 0px rgba(0, 0, 0, 0.06);
    --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Fixed green shadow to Sky Blue shadow */
    --shadow-feature: 0px 4px 12.5px 0px rgba(14, 165, 233, 0.25);

    /* Typography */
    --font-display: 'Poppins', system-ui, sans-serif;
    --font-body: 'Poppins', system-ui, sans-serif;

    /* Spacing */
    --nav-height-mobile: 64px;
    --nav-height-desktop: 70px;
    --nav-height: var(--nav-height-desktop);
    /* fallback */
    --content-max-width: 1400px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 28px;
    --radius-full: 9999px;
}

/* ==========================================================================
   Base Overrides - Ascentides Clean White Theme
   ========================================================================== */

html,
body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body {
    /* Clean white background (Ascentides style) */
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure main content areas are always white */
.site-main,
#primary,
.content-area {
    background-color: #ffffff;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Homepage uses sky gradient for 3D hero */
body.home {
    background: #87ceeb;
}

/* ==========================================================================
   GLOBAL: Disable Button Animations & Focus Highlights
   (Preserve floating vial animations)
   ========================================================================== */

/* Remove button-specific animations only (preserve CTA highlight animations) */
.ac-cta-button::before,
.ac-cta-button::after,
button::before,
button::after {
    animation: none !important;
}

/* Allow transitions for core interactive elements (FAQ accordion, hover effects) */
* {
    transition: opacity 0.15s ease, background-color 0.15s ease, max-height 0.3s ease, transform 0.2s ease !important;
}

/* Remove ALL focus outlines and highlights from buttons/links */
button,
a,
input,
select,
textarea,
.btn,
[role="button"],
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
.btn:focus,
[role="button"]:focus,
button:focus-visible,
a:focus-visible,
button:active,
a:active,
.btn:active {
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   CRITICAL: Full-Width Page Layout for ALL Pages
   Remove Storefront's default container restrictions so sections span full width.
   Individual sections use their own .content-container for constrained content.
   
   AGGRESSIVE OVERRIDES to beat Storefront parent theme specificity.
   ========================================================================== */

/* NUCLEAR OPTION: Override Storefront's .col-full on ALL pages */
.col-full,
.site .col-full,
#page .col-full,
.site-content .col-full,
body .col-full,
body:not(.woocommerce-page) .col-full,
.page-template .col-full,
.page-template-default .col-full,
.page-template-page-affiliate-php .col-full,
.page-template-page-contact-php .col-full,
.page-template-page-quality-php .col-full,
.page-template-page-faq-php .col-full,
.page-template-page-coa-php .col-full,
.page-template-page-research-php .col-full,
.page-template-page-shipping-php .col-full,
.page-template-page-returns-php .col-full,
.page-template-page-privacy-php .col-full,
.page-template-page-terms-php .col-full,
.page-template-page-disclaimer-php .col-full,
.page-template-page-research-use-php .col-full {
    width: 100% !important;
    max-width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin: 0 !important;
}

/* Global: All wrapper elements should not constrain width */
.site-content,
#content,
.content-area,
.hfeed,
#primary,
.site-main,
main#main {
    width: 100% !important;
    max-width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Page template sections should be full-width with backgrounds */
.page-template section,
.page-template-default section,
body:not(.home) section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* HOMEPAGE SPECIFIC: Additional hero-related overrides */
body.home .site-content,
body.home #content,
body.home .content-area,
body.home .hfeed,
body.home .col-full {
    overflow: visible !important;
    /* Fixes "thin blue bar" nested scrollbar */
    height: auto !important;
    /* Ensure it doesn't force height */
}

/* Homepage should not have padding-top from nav */
body.home .site-content {
    padding-top: 0 !important;
}

/* Homepage header - totally transparent, no white blend */
body.home .site-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide default header styling on homepage - we use floating nav */
body.home .site-header::before,
body.home .site-header::after {
    display: none !important;
}

/* Typography - Ascentides Style */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

p,
li {
    color: var(--text-secondary);
    line-height: 1.5;
}

span {
    color: inherit;
}

a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    opacity: 0.7;
}

/* ==========================================================================
   Ascentides Style Navigation Bar
   ========================================================================== */

/* Hide old Storefront header */
.site-header:not(.amino-navbar) {
    display: none !important;
}

/* Fixed navbar wrapper - stays at top always */
.amino-navbar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    /* Ensure navbar stays ABOVE the mobile menu overlay (10000) */
}

/* Add body padding to account for fixed navbar */
body {
    padding-top: 64px !important;
}

@media (min-width: 1024px) {
    body {
        padding-top: 70px !important;
    }
}

/* Homepage: No body padding, hero fills viewport */
body.home {
    padding-top: 0 !important;
}

/* Main navbar */
.amino-navbar {
    position: relative;
    width: 100%;
    height: 64px;
    background: #ffffff;
    border-bottom: 1px solid rgba(227, 227, 227, 0.6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .amino-navbar {
        height: 70px;
    }
}

.amino-navbar__container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .amino-navbar__container {
        padding: 0 1.5rem;
    }
}

/* Background overlay for subtle gradient */
.amino-navbar__bg-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 250, 252, 1) 100%);
}

/* Left section: Mobile toggle + Logo */
.amino-navbar__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Mobile toggle wrapper - hidden on desktop */
.amino-navbar__mobile-toggle-wrap {
    display: block;
}

@media (min-width: 1024px) {
    .amino-navbar__mobile-toggle-wrap {
        display: none;
    }
}

/* Logo */
.amino-navbar__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.amino-navbar__logo-img {
    height: 28px;
    width: auto;
}

@media (min-width: 640px) {
    .amino-navbar__logo-img {
        height: 32px;
    }
}

@media (min-width: 1024px) {
    .amino-navbar__logo-img {
        height: 36px;
    }
}

/* Desktop Navigation Menu - hidden on mobile */
.amino-navbar__menu {
    display: none;
    align-items: center;
    gap: 0.25rem;
}

@media (min-width: 1024px) {
    .amino-navbar__menu {
        display: flex;
    }
}

.amino-navbar__menu-link {
    position: relative;
    display: block;
    font-family: 'Poppins', var(--font-display), sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.75);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    transition: all 200ms ease;
}

.amino-navbar__menu-link:hover {
    color: #000000;
    background: rgba(0, 0, 0, 0.03);
}

.amino-navbar__menu-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Right Actions */
.amino-navbar__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

@media (min-width: 1024px) {
    .amino-navbar__actions {
        gap: 0.5rem;
    }
}

.amino-navbar__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: rgba(0, 0, 0, 0.7);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 200ms ease;
    text-decoration: none;
}

.amino-navbar__action-btn:hover {
    color: #000000;
    background: rgba(0, 0, 0, 0.03);
}

/* Hide account button on mobile, show on sm+ */
.amino-navbar__account-btn {
    display: none;
}

@media (min-width: 640px) {
    .amino-navbar__account-btn {
        display: flex;
    }
}

/* Cart with badge */
.amino-navbar__cart-btn {
    position: relative;
}

.amino-navbar__cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #000000;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    transition: transform 200ms ease;
}

/* Mobile Menu Toggle */
.amino-navbar__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: rgba(0, 0, 0, 0.7);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 200ms ease;
}

.amino-navbar__mobile-toggle:focus {
    outline: none;
}

/* CSS-GENERATED ICON (Reliable Fallback) */
.amino-navbar__mobile-toggle {
    background-color: transparent !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    /* Base64 Encoded Hamburger Icon (Black) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px auto !important;
}

/* Hide the problematic DOM SVG */
.amino-navbar__mobile-toggle svg {
    display: none !important;
}

/* Mobile Menu Drawer */
.amino-navbar__mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 150ms ease;
}

/* CRITICAL: Hide mobile menu completely on desktop screens */
@media (min-width: 1024px) {
    .amino-navbar__mobile-menu {
        display: none !important;
    }
}

.amino-navbar__mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
}

.amino-navbar__mobile-menu.is-open .amino-navbar__mobile-nav {
    transform: translateX(0);
}

.amino-navbar__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.amino-navbar__mobile-header .amino-navbar__logo img {
    height: 32px;
}

.amino-navbar__mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #000000;
    background: transparent;
    border: none;
    cursor: pointer;
}

.amino-navbar__mobile-nav {
    position: absolute;
    top: 0;
    left: 0;
    /* Align to Left */
    right: auto;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background: #ffffff;
    transform: translateX(-100%);
    /* Slide from Left */
    transition: transform 150ms ease;
    display: flex;
    flex-direction: column;
    padding-top: 70px;
}

.amino-navbar__mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    font-family: 'Poppins', var(--font-display), sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background 200ms ease;
}

.amino-navbar__mobile-link:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Desktop: Show menu, hide toggle */
@media (min-width: 1024px) {
    .amino-navbar__menu {
        display: flex;
    }

    .amino-navbar__mobile-toggle-wrap {
        display: none;
    }
}

/* Homepage: Adjust hero z-index to be below navbar */
body.home .hero-fullscreen {
    z-index: 1;
}

/* Homepage: Hero starts at top, navbar overlays it */

/* ==========================================================================
   3D Hero Section - FULLSCREEN CLOUDS + VIAL ONLY
   ========================================================================== */

.hero-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sky gradient - BLUE at top, white at bottom */
    background: linear-gradient(180deg,
            #87ceeb 0%,
            #a8d8f0 20%,
            #c4e4f7 40%,
            #e0f2fe 70%,
            #ffffff 100%);
}

/* Ensure hero is first thing user sees - no top margin */
#hero-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Cloud Background - Full coverage */
#hero-cloud-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

/* Realistic Cloud Layers */
.cloud-layer {
    position: absolute;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    background-size: 1500px auto;
}

.cloud-layer-1 {
    top: 5%;
    background:
        radial-gradient(ellipse 120px 80px at 10% 20%, rgba(255, 255, 255, 0.95) 0%, transparent 70%),
        radial-gradient(ellipse 180px 100px at 30% 15%, rgba(255, 255, 255, 0.9) 0%, transparent 70%),
        radial-gradient(ellipse 150px 90px at 55% 25%, rgba(255, 255, 255, 0.85) 0%, transparent 70%),
        radial-gradient(ellipse 200px 110px at 80% 10%, rgba(255, 255, 255, 0.9) 0%, transparent 70%);
    animation: cloudDrift 120s linear infinite;
    opacity: 0.9;
}

.cloud-layer-2 {
    top: 40%;
    background:
        radial-gradient(ellipse 250px 140px at 15% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 70%),
        radial-gradient(ellipse 180px 100px at 45% 45%, rgba(255, 255, 255, 0.75) 0%, transparent 70%),
        radial-gradient(ellipse 220px 120px at 75% 55%, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    animation: cloudDrift 90s linear infinite reverse;
    opacity: 0.8;
}

.cloud-layer-3 {
    bottom: 0;
    top: auto;
    height: 50%;
    background:
        radial-gradient(ellipse 300px 180px at 20% 80%, rgba(255, 255, 255, 0.95) 0%, transparent 60%),
        radial-gradient(ellipse 350px 200px at 50% 90%, rgba(255, 255, 255, 0.9) 0%, transparent 60%),
        radial-gradient(ellipse 280px 160px at 80% 75%, rgba(255, 255, 255, 0.95) 0%, transparent 60%);
    animation: cloudDrift 150s linear infinite;
    opacity: 1;
}

@keyframes cloudDrift {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Soft atmospheric glow */
.hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse 50% 50% at center,
            rgba(135, 206, 235, 0.3) 0%,
            transparent 70%);
    z-index: 1;
    pointer-events: none;
}

/* Model Viewer Container - FULL VIEWPORT with Entry Animation */
#hero-3d-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    /* Hidden until age verified */
    visibility: hidden;
    transform: translateY(100vh);
    opacity: 0;
}

/* Entry animation - triggered by vial-animate-in class on body */
body.vial-animate-in #hero-3d-container {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
    transition: transform 5s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease;
}

/* Model Viewer element styling */
#hero-3d-container model-viewer {
    width: 100%;
    height: 100%;
    --poster-color: transparent;
    transform: rotate(17deg) translateY(-10%);
}

/* Hide default model-viewer loading progress bar */
model-viewer::part(default-progress-bar) {
    display: none;
}

/* Hero Content - Positioned LOWER in viewport */
/* Initially invisible - waits for age verification and vial animation */
.hero-content {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(30px);
    z-index: 3;
    /* Above everything */
    text-align: center;
    width: 100%;
    max-width: 900px;
    padding: 0 2rem;
    margin-top: 10rem;
    visibility: hidden;
    opacity: 0;
}

/* Triggered by body.vial-animate-in - delayed to appear after vial rises */
body.vial-animate-in .hero-content {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
    transition: opacity 1.5s ease 4.5s, transform 1.5s ease 4.5s;
    /* 4.5s delay for vial animation */
}

/* Legacy keyframe for fallback - not used by default */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(30px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }
}

.hero-tagline {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sky-deep);
    background: rgba(255, 255, 255, 0.8);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    margin-bottom: 0.5rem;
    backdrop-filter: blur(8px);
}

.hero-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
    color: var(--text-dark);
    text-shadow: 0 2px 20px rgba(255, 255, 255, 0.5);
}

.hero-subtitle {
    font-size: 0.85rem;
    color: var(--text-medium);
    max-width: 450px;
    margin: 0 auto 1rem auto;
    line-height: 1.4;
}

/* CTA Buttons */
.hero-cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-cta-primary {
    background: linear-gradient(135deg, var(--sky-500) 0%, var(--sky-400) 100%);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.4);
}

.hero-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5);
    color: #ffffff;
}

.hero-cta-secondary {
    background: rgba(255, 255, 255, 0.95);
    color: #0c4a6e;
    /* Sky-900 */
    border: 1px solid rgba(12, 74, 110, 0.9);
    /* Darker border */
    backdrop-filter: blur(8px);
    font-weight: 700;
    /* Bolder text */
}

.hero-cta-secondary:hover {
    background: #ffffff;
    transform: translateY(-2px);
    color: var(--sky-deep);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-align: center;
    color: var(--text-medium);
    font-size: 0.875rem;
    opacity: 0;
    animation: fadeIn 1s ease 3s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 0.7;
    }
}

.scroll-indicator span {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-medium);
}

.scroll-arrow {
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-arrow svg {
    stroke: var(--sky-blue);
}

@keyframes scrollBounce {

    0%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(8px);
        opacity: 0.5;
    }
}

/* ==========================================================================
   Content Below Hero
   ========================================================================== */

.site-content {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding-top: var(--nav-height) !important;
}

/* Account pages: hero sits flush against the nav */
body.woocommerce-account .site-content {
    padding-top: 0 !important;
    background: #f9fafb !important;
}

body.woocommerce-account .site-header {
    margin-bottom: 0 !important;
}

body.woocommerce-account .content-area,
body.woocommerce-account #primary,
body.woocommerce-account .site-main {
    background-color: transparent !important;
    margin-bottom: 0 !important;
}

/* Remove default Storefront margin on WooCommerce notices in account pages */
body.woocommerce-account .woocommerce-notices-wrapper,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Push content below the absolute-positioned hero */
body.home #primary,
body.home .content-area {
    margin-top: 100vh !important;
}

.hero-content-below {
    padding-top: 4rem;
}

/* ==========================================================================
   Glass Cards - Light Theme
   ========================================================================== */

.glass-card,
.widget,
.hentry {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid rgba(135, 206, 235, 0.3);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
}

/* ==========================================================================
   Buttons - Light Theme
   ========================================================================== */

input[type="submit"],
.button {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
    color: #ffffff;
}

button:focus {
    outline: none;
}

/* ==========================================================================
   Forms - Light Theme
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(135, 206, 235, 0.5);
    border-radius: 8px;
    color: var(--text-dark);
    padding: 0.75rem 1rem;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--sky-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    outline: none;
}

/* ==========================================================================
   Footer - Light Theme
   ========================================================================== */

.site-footer {
    background: linear-gradient(180deg, #f8fafc 0%, #e0f2fe 100%);
    border-top: 1px solid rgba(135, 206, 235, 0.3);
    color: var(--text-medium);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
    color: var(--text-dark);
}

/* ==========================================================================
   WooCommerce - Light Theme
   ========================================================================== */

ul.products li.product {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(135, 206, 235, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

ul.products li.product:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(59, 130, 246, 0.15);
}

ul.products li.product .woocommerce-loop-product__title {
    color: var(--text-dark);
}

ul.products li.product .price {
    color: var(--sky-blue);
    font-weight: 600;
}

/* ==========================================================================
   Scrollbar - Light Theme
   ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f0f4f8;
}

::-webkit-scrollbar-thumb {
    background: #87ceeb;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sky-blue);
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .hero-fullscreen {
        min-height: 100svh;
    }

    .hero-fullscreen::after {
        /* Move blur down by reducing height (visual effect) */
        height: 280px !important;
        background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.4) 30%,
                rgba(255, 255, 255, 0.8) 70%,
                #ffffff 100%) !important;
    }

    /* Mobile: Vial 50% bigger (~0.82) & Centered Vertically/Horizontally */
    /* Mobile: Vial Left (translateX -20px) & Up */
    #hero-3d-container model-viewer {
        transform: translateX(-20px) rotate(17deg) translateY(calc(-12% - 10px)) scale(0.82) !important;
    }

    .hero-content {
        top: 47.5% !important;
        /* Up 5% from 52.5% */
        bottom: auto !important;
        transform: translate(-50%, -50%) scale(0.8) !important;
        /* Center relative to top-47.5% point + Scale Down */
        padding: 0 1.5rem;
        width: 100%;
    }

    .hero-tagline {
        font-size: 0.75rem;
    }

    .hero-cta-group {
        flex-direction: row;
        /* Side-by-side for compactness */
        align-items: center;
        flex-wrap: wrap;
    }

    .hero-cta {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* ==========================================================================
   Trust Badges Section - Ascentides Style (Extracted)
   ========================================================================== */

/* Section directly after hero - no white gap */
.trust-badges-section {
    position: relative;
    margin-top: calc(100vh - 67px);
    padding: 2rem 1rem;
    background: var(--gradient-trust);
    z-index: 1;
}

.trust-badges-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.trust-badges-header {
    margin-bottom: 1rem;
    text-align: center;
}

.trust-badges-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.05;
}

.trust-badges-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.24;
    margin: 0 auto;
}

/* Stack on mobile, horizontal on desktop */
.trust-badges-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Individual badge - skinny horizontal card with rounded corners */
.trust-badge {
    position: relative;
    background: white;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    height: 70px;
    flex: 1;
    border-radius: var(--radius-xl);
}

/* Left colored bar */
.trust-badge__bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
}

/* Badge content container */
.trust-badge__content {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 20px;
    padding-right: 12px;
    gap: 10px;
}

/* Circular icon holder */
.trust-badge__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-badge__icon svg {
    width: 20px;
    height: 20px;
}

/* Text container */
.trust-badge__text {
    text-align: left;
}

.trust-badge__title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0 0 0.1rem 0;
}

.trust-badge__description {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.2;
    margin: 0;
}

/* Purity - Green accent */
.trust-badge--purity .trust-badge__bar {
    background-color: var(--accent-green);
}

.trust-badge--purity .trust-badge__icon {
    background-color: var(--accent-green-icon);
    color: var(--accent-green-text);
}

/* Shipping - Blue accent */
.trust-badge--shipping .trust-badge__bar {
    background-color: var(--accent-blue);
}

.trust-badge--shipping .trust-badge__icon {
    background-color: var(--accent-blue-icon);
    color: var(--accent-blue-text);
}

/* CoA - Gold/Yellow accent */
.trust-badge--coa .trust-badge__bar {
    background-color: var(--accent-gold);
}

.trust-badge--coa .trust-badge__icon {
    background-color: var(--accent-gold-icon);
    color: var(--accent-gold-text);
}

/* Tablet - horizontal layout */
@media (min-width: 640px) {
    .trust-badges-section {
        padding: 2rem 1.5rem;
    }

    .trust-badges-stack {
        flex-direction: row;
        gap: 0.75rem;
    }

    .trust-badge {
        height: 75px;
    }

    .trust-badge__bar {
        width: 10px;
    }

    .trust-badge__content {
        padding-left: 24px;
        gap: 12px;
    }

    .trust-badge__icon {
        width: 40px;
        height: 40px;
    }

    .trust-badge__icon svg {
        width: 22px;
        height: 22px;
    }

    .trust-badge__title {
        font-size: 0.85rem;
    }

    .trust-badge__description {
        font-size: 0.75rem;
    }
}

/* Desktop - larger horizontal */
@media (min-width: 1024px) {
    .trust-badges-section {
        padding: 2.5rem 2rem;
    }

    .trust-badges-header {
        margin-bottom: 1.5rem;
    }

    .trust-badges-title {
        font-size: 1.5rem;
    }

    .trust-badges-subtitle {
        font-size: 1rem;
    }

    .trust-badges-stack {
        gap: 1rem;
    }

    .trust-badge {
        height: 85px;
    }

    .trust-badge__bar {
        width: 12px;
    }

    .trust-badge__content {
        padding-left: 28px;
        gap: 14px;
    }

    .trust-badge__icon {
        width: 48px;
        height: 48px;
    }

    .trust-badge__icon svg {
        width: 26px;
        height: 26px;
    }

    .trust-badge__title {
        font-size: 0.95rem;
    }

    .trust-badge__description {
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   Featured Products Section - Ascentides Style
   ========================================================================== */

.featured-products-section {
    padding: 4rem 2rem;
    background: var(--cloud-white);
}

.featured-products-container {
    max-width: 1400px;
    margin: 0 auto;
}

.featured-products-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 2rem;
    text-align: center;
}

.featured-products-slider {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.featured-product-card {
    background: var(--cloud-white);
    border-radius: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.featured-product-image-link {
    display: block;
    aspect-ratio: 1;
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    overflow: hidden;
}

.featured-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: transform 0.3s ease;
}

.featured-product-card:hover .featured-product-image {
    transform: scale(1.05);
}

.featured-product-info {
    padding: 1.25rem;
}

.featured-product-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.featured-product-name a {
    color: var(--text-dark);
    text-decoration: none;
}

.featured-product-name a:hover {
    color: var(--sky-blue);
}

.featured-product-tagline {
    font-size: 0.85rem;
    color: var(--text-medium);
    margin: 0 0 0.75rem;
    line-height: 1.4;
}

.featured-product-price {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.featured-product-actions {
    display: flex;
    gap: 0.75rem;
}

.featured-product-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.featured-product-btn--view {
    background: var(--text-dark);
    color: white;
}

.featured-product-btn--view:hover {
    background: var(--sky-deep);
}

.featured-products-cta {
    text-align: center;
    margin-top: 2rem;
}

.featured-products-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: transparent;
    border: 2px solid var(--text-dark);
    color: var(--text-dark);
    border-radius: 9999px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.featured-products-view-all:hover {
    background: var(--text-dark);
    color: white;
}

/* Responsive */
@media (max-width: 1100px) {
    .featured-products-slider {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .featured-products-slider {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .featured-products-section {
        padding: 3rem 1rem;
    }

    .featured-products-slider {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin: 0 auto 2rem;
    }
}

/* ==========================================================================
   Features Grid - Ascentides Style
   Green background with white feature cards
   ========================================================================== */

.features-section {
    padding: 4rem 1.5rem;
    background: var(--gradient-features);
}

.features-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.features-header {
    text-align: center;
    margin-bottom: 3rem;
}

.features-label {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-green-text);
    margin-bottom: 0.75rem;
}

.features-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.features-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Feature Card */
.feature-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-feature);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 8px 24px 0px rgba(14, 165, 233, 0.25);
}

.feature-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.feature-card__icon--green {
    background: var(--accent-green);
    color: var(--accent-green-text);
}

.feature-card__icon--blue {
    background: var(--accent-blue);
    color: var(--accent-blue-text);
}

.feature-card__icon--gold {
    background: var(--accent-gold);
    color: var(--accent-gold-text);
}

.feature-card__icon--purple {
    background: var(--sky-100);
    color: var(--sky-600);
}

.feature-card__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.feature-card__description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Tablet: 2 columns */
@media (min-width: 640px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .features-title {
        font-size: 2.25rem;
    }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .features-section {
        padding: 5rem 2rem;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .features-title {
        font-size: 2.5rem;
    }

    .feature-card {
        padding: 2rem;
    }
}

/* ==========================================================================
   Newsletter Section - Ascentides Style
   Gradient background with email signup form
   ========================================================================== */

.newsletter-section {
    padding: 4rem 1.5rem;
    background: var(--gradient-trust);
}

.newsletter-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-content {
    margin-bottom: 2rem;
}

.newsletter-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.newsletter-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.newsletter-form {
    width: 100%;
}

.newsletter-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.newsletter-input {
    flex: 1;
    padding: 0.875rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-xl);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.newsletter-input::placeholder {
    color: var(--text-muted);
}

.newsletter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bg-primary);
    background: var(--text-primary);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.newsletter-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.newsletter-btn svg {
    width: 16px;
    height: 16px;
}

.newsletter-privacy {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

.newsletter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-primary);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-card);
}

.newsletter-badge__icon {
    width: 32px;
    height: 32px;
    background: var(--accent-blue-icon);
    color: var(--accent-blue-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsletter-badge__icon svg {
    width: 16px;
    height: 16px;
}

.newsletter-badge span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Tablet: Inline form */
@media (min-width: 640px) {
    .newsletter-input-group {
        flex-direction: row;
    }

    .newsletter-title {
        font-size: 2.25rem;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .newsletter-section {
        padding: 5rem 2rem;
    }

    .newsletter-title {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
   Footer - Ascentides Style
   Dark theme with 5-column layout
   ========================================================================== */

.amino-footer {
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 4rem 1.5rem 2rem;
}

.amino-footer__container {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

/* Footer Grid - Mobile first, single column */
.amino-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Brand Column */
.amino-footer__brand {
    max-width: 280px;
}

.amino-footer__logo img {
    height: 36px;
    width: auto;
    margin-bottom: 1rem;
}

.amino-footer__tagline {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* Social Links */
.amino-footer__social {
    display: flex;
    gap: 0.75rem;
}

.amino-footer__social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
}

.amino-footer__social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--bg-primary);
    opacity: 1;
}

/* Columns */
.amino-footer__column {
    min-width: 0;
}

.amino-footer__heading {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bg-primary);
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

.amino-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.amino-footer__links li {
    margin-bottom: 0.5rem;
}

.amino-footer__links a {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.amino-footer__links a:hover {
    color: var(--bg-primary);
    opacity: 1;
}

/* Bottom Bar */
.amino-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.amino-footer__copyright {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.amino-footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.amino-footer__badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.amino-footer__badge svg {
    opacity: 0.7;
}

/* Tablet: 2 columns + brand */
@media (min-width: 640px) {
    .amino-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
    }

    .amino-footer__brand {
        grid-column: 1 / -1;
    }

    .amino-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* Desktop: 5 columns */
@media (min-width: 1024px) {
    .amino-footer {
        padding: 5rem 2rem 2rem;
    }

    .amino-footer__grid {
        grid-template-columns: 1.5fr repeat(4, 1fr);
        gap: 3rem;
    }

    .amino-footer__brand {
        grid-column: auto;
    }
}

/* ==========================================================================
   Trust Badges Section - Exact Ascentides Clone
   Split background with floating vials
   ========================================================================== */



.guarantee-bg--right {
    right: 0;
    width: 50%;
    background: linear-gradient(180deg, rgba(232, 229, 255, 0.75) 0%, rgba(248, 234, 237, 0.75) 100%);
}

/* Mobile: Right side gradient covers all */
@media (max-width: 1023px) {
    .guarantee-bg--left {
        display: none;
    }

    .guarantee-bg--right {
        width: 100%;
        left: 0;
    }
}

/* Container */
.guarantee-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    max-width: var(--content-max-width);
    margin: 0 auto;
    z-index: 1;
}

@media (min-width: 1024px) {
    .guarantee-container {
        grid-template-columns: 1fr 1fr;
    }
}

/* Floating Vials */
.guarantee-vials {
    display: none;
    position: relative;
    min-height: 300px;
    overflow: visible;
}

@media (min-width: 1024px) {
    .guarantee-vials {
        display: block;
    }
}

.guarantee-vial {
    position: absolute;
}

.guarantee-vial--1 {
    top: 10%;
    left: 15%;
    animation: float-slow 6s ease-in-out infinite;
}

.guarantee-vial--2 {
    top: 40%;
    right: 20%;
    animation: float-delayed 5s ease-in-out infinite;
}

.guarantee-vial img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
}

/* Float animations */
@keyframes float-slow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes float-delayed {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Guarantee Content */
.guarantee-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 768px) {
    .guarantee-content {
        padding: 2rem;
    }
}

@media (min-width: 1024px) {
    .guarantee-content {
        padding: 2.5rem 3.5rem 2.5rem 0;
    }
}

/* Header */
.guarantee-header {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .guarantee-header {
        margin-bottom: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .guarantee-header {
        margin-bottom: 2rem;
        padding-left: 3.5rem;
    }
}

.guarantee-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.05;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .guarantee-title {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .guarantee-title {
        font-size: 1.875rem;
    }
}

.guarantee-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.24;
    max-width: 420px;
}

@media (min-width: 768px) {
    .guarantee-subtitle {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .guarantee-subtitle {
        font-size: 1.125rem;
    }
}

/* Badges Stack */
.guarantee-badges {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: visible;
}

@media (min-width: 768px) {
    .guarantee-badges {
        gap: 0.625rem;
    }
}

@media (min-width: 1024px) {
    .guarantee-badges {
        gap: 0.75rem;
        margin-left: -24px;
    }
}

/* Individual Badge */
.guarantee-badge {
    position: relative;
    background: var(--bg-primary);
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.06);
    overflow: visible;
    height: 80px;
}

@media (min-width: 768px) {
    .guarantee-badge {
        height: 88px;
    }
}

@media (min-width: 1024px) {
    .guarantee-badge {
        height: 100px;
    }
}

/* Left colored bar */
.guarantee-badge__bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 12px;
}

@media (min-width: 1024px) {
    .guarantee-badge__bar {
        width: 24px;
    }
}

/* Badge inner content */
.guarantee-badge__inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 1.75rem;
    padding-right: 1rem;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .guarantee-badge__inner {
        padding-left: 2.25rem;
        gap: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .guarantee-badge__inner {
        padding-left: 2.5rem;
        gap: 1rem;
    }
}

/* Icon circle */
.guarantee-badge__icon {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .guarantee-badge__icon {
        width: 52px;
        height: 52px;
    }
}

@media (min-width: 1024px) {
    .guarantee-badge__icon {
        width: 60px;
        height: 60px;
    }
}

.guarantee-badge__icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .guarantee-badge__icon img {
        width: 28px;
        height: 28px;
    }
}

@media (min-width: 1024px) {
    .guarantee-badge__icon img {
        width: 32px;
        height: 32px;
    }
}

/* Badge text */
.guarantee-badge__title {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.24;
    margin: 0;
}

@media (min-width: 768px) {
    .guarantee-badge__title {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .guarantee-badge__title {
        font-size: 1.125rem;
    }
}

.guarantee-badge__desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.24;
    margin: 0;
}

@media (min-width: 768px) {
    .guarantee-badge__desc {
        font-size: 0.875rem;
    }
}

@media (min-width: 1024px) {
    .guarantee-badge__desc {
        font-size: 1rem;
    }
}

/* Color variants */
.guarantee-badge--purity .guarantee-badge__bar {
    background-color: var(--accent-green);
}

.guarantee-badge--purity .guarantee-badge__icon {
    background-color: var(--accent-green);
}

.guarantee-badge--shipping .guarantee-badge__bar {
    background-color: var(--accent-blue);
}

.guarantee-badge--shipping .guarantee-badge__icon {
    background-color: var(--accent-blue);
}

.guarantee-badge--coa .guarantee-badge__bar {
    background-color: var(--accent-gold);
}

.guarantee-badge--coa .guarantee-badge__icon {
    background-color: var(--accent-gold);
}

/* ==========================================================================
   Quality Verification Section - "Quality you can verify"
   ========================================================================== */

.quality-section {
    padding: 4rem 1.5rem;
    background: var(--bg-primary);
}

@media (min-width: 1024px) {
    .quality-section {
        padding: 5rem 2rem;
    }
}

.quality-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: var(--content-max-width);
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .quality-container {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }
}

/* Header */
.quality-header {
    margin-bottom: 2rem;
}

.quality-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .quality-title {
        font-size: 2rem;
    }
}

@media (min-width: 1024px) {
    .quality-title {
        font-size: 2.25rem;
    }
}

.quality-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .quality-subtitle {
        font-size: 1.125rem;
    }
}

/* Stats */
.quality-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.quality-stat {
    display: flex;
    flex-direction: column;
}

.quality-stat__value {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

@media (min-width: 768px) {
    .quality-stat__value {
        font-size: 3rem;
    }
}

.quality-stat__label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Tabs */
.quality-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.quality-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.quality-tab:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

.quality-tab--active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

.quality-tab--active:hover {
    background: var(--text-primary);
    color: var(--bg-primary);
}

.quality-tab svg {
    width: 18px;
    height: 18px;
}

/* Tab Panels */
.quality-panel {
    display: none;
    animation: qualityFadeIn 0.3s ease;
}

.quality-panel.active {
    display: block;
}

@keyframes qualityFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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


/* CTA */
.quality-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.quality-cta:hover {
    opacity: 0.7;
}

/* Visual */
.quality-visual {
    display: none;
    position: relative;
    justify-content: center;
    align-items: center;
}

@media (min-width: 1024px) {
    .quality-visual {
        display: flex;
    }
}

.quality-vial {
    position: relative;
}

.quality-vial img {
    width: 280px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.15));
}

.quality-vial__badge {
    position: absolute;
    top: 20%;
    right: -10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--bg-primary);
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.quality-vial__badge-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-green-text);
}

/* Quality Card - Replaces quality-visual */
.quality-card-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.quality-card {
    position: relative;
    background: linear-gradient(180deg, #f8f9fb 0%, #e8eef5 50%, #cddaeb 100%);
    border-radius: 28px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    overflow: hidden;
    width: 100%;
    max-width: 500px;
}

@media (min-width: 1024px) {
    .quality-card {
        border-radius: 32px;
        padding: 2.5rem;
        min-height: 500px;
    }
}

.quality-card__circle-bg {
    position: absolute;
    inset: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

@media (min-width: 1024px) {
    .quality-card__circle-bg {
        inset: 3rem;
    }
}

/* Floating Badge (Top Right) */
.quality-glass-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 12px;
    padding: 0.625rem 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.quality-glass-badge:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

@media (min-width: 1024px) {
    .quality-glass-badge {
        top: 1.5rem;
        right: 1.5rem;
        padding: 0.75rem 1rem;
    }
}

.quality-icon-circle {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .quality-icon-circle {
        width: 32px;
        height: 32px;
    }
}

.quality-icon-circle svg {
    width: 16px;
    height: 16px;
    color: #0ea5e9;
}

@media (min-width: 1024px) {
    .quality-icon-circle svg {
        width: 18px;
        height: 18px;
    }
}

/* Main Vial Image */
.quality-card__image {
    position: relative;
    z-index: 10;
    width: auto;
    height: 220px;
    object-fit: contain;
    transition: transform 0.5s ease;
    /* CSS Fix for black background on image */
    mix-blend-mode: screen;
    /* removed drop-shadow to avoid rectangular shadow */
}

.quality-card__image:hover {
    transform: scale(1.02);
}

@media (min-width: 1024px) {
    .quality-card__image {
        height: 420px;
    }
}

/* Bottom CTA Card */
.quality-glass-cta {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 20;
    display: block;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .quality-glass-cta {
        bottom: 1.5rem;
        left: 1.5rem;
        right: 1.5rem;
    }
}

.quality-glass-cta-inner {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quality-glass-cta-inner:hover {
    background: #ffffff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: scale(1.01);
}

.quality-cta-icon-box {
    width: 36px;
    height: 44px;
    background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .quality-cta-icon-box {
        width: 40px;
        height: 48px;
    }
}

.quality-cta-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.quality-glass-cta-inner:hover .quality-cta-arrow {
    background: #000000;
    color: #ffffff;
}

/* ==========================================================================
   FAQ Section - Accordion Style
   ========================================================================== */

.faq-section {
    padding: 4rem 1.5rem;
    background: var(--bg-secondary);
}

@media (min-width: 1024px) {
    .faq-section {
        padding: 5rem 2rem;
    }
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-header {
    text-align: center;
    margin-bottom: 2rem;
}

.faq-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

@media (min-width: 768px) {
    .faq-title {
        font-size: 2rem;
    }
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.faq-question:hover {
    background: rgba(0, 0, 0, 0.02);
}

.faq-question svg {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer__inner {
    padding: 0 1.5rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ==========================================================================
   Secondary CTA Section - Floating Vials
   ========================================================================== */

.secondary-cta-section {
    position: relative;
    padding: 5rem 1.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #e0f2fe 100%);
    overflow: hidden;
    text-align: center;
}

@media (min-width: 1024px) {
    .secondary-cta-section {
        padding: 6rem 2rem;
    }
}

.secondary-cta-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    z-index: 1;
}

.secondary-cta-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .secondary-cta-title {
        font-size: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .secondary-cta-title {
        font-size: 2rem;
    }
}

.secondary-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 2rem;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 1rem;
    font-weight: 500;
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.secondary-cta-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    opacity: 1;
}

.secondary-cta-btn svg {
    width: 24px;
    height: 10px;
}

/* Floating vials on sides */
.secondary-cta-vial {
    position: absolute;
    display: none;
}

@media (min-width: 1024px) {
    .secondary-cta-vial {
        display: block;
    }
}

.secondary-cta-vial--left {
    left: 5%;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
}

.secondary-cta-vial--right {
    right: 5%;
    top: 50%;
    transform: translateY(-50%) rotate(10deg);
}

.secondary-cta-vial img {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
}



/* =========================================
   Featured Products Section (Strict Port)
   ========================================= */

/* Typography Scaling (Reduced to ~0.875x) */
.ac-title-scaled {
    font-size: 1.3125rem;
    /* ~21px */
    line-height: 1.1;
}

.ac-subtitle-scaled {
    font-size: 0.75rem;
    /* ~12px */
    line-height: 1.4;
}

@media (min-width: 1024px) {
    .ac-title-scaled {
        font-size: 1.96875rem;
        /* ~31.5px */
    }

    .ac-subtitle-scaled {
        font-size: 0.875rem;
        /* ~14px */
    }
}

/* Navigation & Components (Overrides) */
.ac-container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

@media (min-width: 1024px) {
    .ac-container {
        padding-left: 48px;
        padding-right: 48px;
    }
}

.ac-arrow {
    background: #ffffff !important;
    /* Shorthand wipes out image, color, repeat, etc. */
    border: 1px solid #1a1a1a !important;
    color: #1a1a1a !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    display: flex !important;
    /* Position handled by utility classes now */
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    transform: none !important;
    flex-shrink: 0 !important;
    z-index: 30 !important;
}

.ac-arrow:hover {
    background-color: #f3f4f6 !important;
    /* gray-100 */
    transform: scale(1.05) !important;
    /* Subtle scale on hover */
    color: #000000 !important;
    cursor: pointer !important;
}

.ac-arrow:disabled {
    opacity: 0.3 !important;
    cursor: default !important;
    transform: none !important;
    border-color: #e5e7eb !important;
}

.ac-arrow svg {
    color: inherit !important;
    width: 18px !important;
    /* Slightly larger icon */
    height: 18px !important;
    display: block !important;
}

.ac-view-all {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    padding: 0 32px !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 9999px !important;
    /* Pill shape */
    color: #1a1a1a !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background-color: transparent !important;
    transition: all 0.2s ease !important;
}

.ac-view-all:hover {
    background-color: #f5f5f5 !important;
}

/* -- Tailwind Mappings -- */

/* Spacing */
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.pt-10 {
    padding-top: 2.5rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Gradient Utilities */
.bg-gradient-to-r {
    background: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-l {
    background: linear-gradient(to left, var(--tw-gradient-stops));
}

.from-white {
    --tw-gradient-from: #fff;
    --tw-gradient-to: rgba(255, 255, 255, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-transparent {
    --tw-gradient-to: transparent;
}

.z-\[1\] {
    z-index: 1;
}

.pointer-events-none {
    pointer-events: none;
}

.opacity-0 {
    opacity: 0;
}

.group-hover\:opacity-100:hover,
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-2 {
    gap: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.pt-3 {
    padding-top: 0.75rem;
}

.mt-auto {
    margin-top: auto;
}

.mb-0\.5 {
    margin-bottom: 0.125rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.h-9 {
    height: 2.25rem;
}

/* Desktop Spacing (lg:) */
@media (min-width: 1024px) {
    .lg\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .lg\:mb-8 {
        margin-bottom: 2rem;
    }

    .lg\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .lg\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .lg\:px-14 {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
    }

    .lg\:gap-4 {
        gap: 1rem;
    }

    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .lg\:w-\[280px\] {
        width: 280px;
    }

    .lg\:w-\[320px\] {
        width: 320px;
    }

    .lg\:rounded-\[24px\] {
        border-radius: 24px;
    }

    .lg\:p-4 {
        padding: 1rem;
    }

    .lg\:pt-4 {
        padding-top: 1rem;
    }

    .lg\:rounded-b-\[24px\] {
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
    }

    .lg\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .lg\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    .lg\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .lg\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .lg\:mb-4 {
        margin-bottom: 1rem;
    }

    .lg\:h-10 {
        height: 2.5rem;
    }
}

/* Typography */
.font-semibold {
    font-weight: 600;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-brand-black {
    color: #1a1a1a;
}

/* Assuming brand black */
.leading-tight {
    line-height: 1.25;
}

.text-gray-500 {
    color: #6b7280;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.font-normal {
    font-weight: 400;
}

.leading-none {
    line-height: 1;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.font-medium {
    font-weight: 500;
}

.text-white {
    color: #fff;
}

.text-\[10px\] {
    font-size: 10px;
}

.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

/* Layout / Flex */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.flex-none {
    flex: none;
}

.flex-grow {
    flex-grow: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.block {
    display: block;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.overflow-hidden {
    overflow: hidden;
}

.self-start {
    align-self: flex-start;
}

@media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction: row;
    }

    .sm\:items-end {
        align-items: flex-end;
    }

    .sm\:justify-between {
        justify-content: space-between;
    }

    .sm\:self-auto {
        align-self: auto;
    }

    .sm\:flex {
        display: flex;
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:px-12 {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .sm\:w-\[250px\] {
        width: 250px;
    }

    .sm\:w-\[300px\] {
        width: 300px;
    }

    .sm\:flex-1 {
        flex: 1 1 0%;
    }
}

/* Backgrounds & Borders */
.bg-white {
    background-color: #fff;
}

.rounded-full {
    border-radius: 9999px;
}

.border {
    border-width: 1px;
}

.border-brand-black {
    border-color: #1a1a1a;
}

.bg-brand-lavender {
    background-color: var(--sky-50);
}

.bg-brand-sky {
    background-color: var(--sky-100);
}

.bg-brand-mint {
    background-color: var(--sky-50);
}

.bg-brand-butter {
    background-color: var(--sky-50);
}

.bg-\[\#f9f9f9\] {
    background-color: #f9f9f9;
}

.rounded-\[20px\] {
    border-radius: 20px;
}

.rounded-b-\[20px\] {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.hover\:bg-gray-50:hover {
    background-color: #f9fafb;
}

.hover\:bg-gray-100:hover {
    background-color: #f3f4f6;
}

.hover\:bg-gray-800:hover {
    background-color: #1f2937;
}

.hover\:opacity-80:hover {
    opacity: 0.8;
}

.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

/* Transitions */
.transition-colors {
    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: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Specific Utilities */
.w-\[250px\] {
    width: 250px;
}

.aspect-\[4\/5\] {
    aspect-ratio: 4/5;
}

.object-cover {
    object-fit: cover;
}

.object-\[80\%_center\] {
    object-position: 80% center;
}

.z-10 {
    z-index: 10;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.top-1\/2 {
    top: 50%;
}

.-translate-y-1\/2 {
    transform: translateY(-50%);
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.w-10 {
    width: 2.5rem;
}

.h-10 {
    height: 2.5rem;
}

.w-4 {
    width: 1rem;
}

.h-4 {
    height: 1rem;
}

/* Scroll Hide */
.scrollnav-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrollnav-hide::-webkit-scrollbar {
    display: none;
}

/* =========================================
   Trust Badges Section (Refactored)
   ========================================= */
.trust-badges-section {
    background: var(--gradient-trust);
    padding: 60px 0;
    overflow: hidden;
}

.trust-badges-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.trust-badges-header {
    margin-bottom: 40px;
    padding-left: 14px;
    /* subtle alignment */
}

.trust-badges-title {
    font-size: 2rem;
    /* lg:text-3xl */
    font-weight: 600;
    line-height: 1.05;
    color: #000;
    margin-bottom: 0.5rem;
}

.trust-badges-subtitle {
    font-size: 1.125rem;
    /* lg:text-lg */
    color: #555;
    line-height: 1.24;
    max-width: 420px;
}

/* Grid Layout */
.trust-badges-grid {
    display: flex;
    flex-direction: column;
    /* Stack on mobile */
    gap: 1rem;
}

@media (min-width: 1024px) {
    .trust-badges-grid {
        flex-direction: row;
        /* One line on desktop */
        align-items: center;
        margin-left: -24px;
        /* offset for visual balance if needed, per user snippet */
    }
}

/* Badge Card */
.trust-badge {
    position: relative;
    background: #fff;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.06);
    height: 100px;
    /* lg:h-[100px] */
    display: flex;
    align-items: center;
    flex: 1;
    /* Distribute width equally */
    overflow: hidden;
    transition: transform 0.3s ease;
}

.trust-badge:hover {
    transform: translateY(-2px);
}

/* Side Bar & Background Colors */
.trust-badge__bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    /* lg:w-[24px] */
    background-color: #eee;
}

/* Specific Colors */
.trust-badge--verified .trust-badge__bar,
.trust-badge--verified .trust-badge__icon-wrapper {
    background-color: var(--sky-100);
}

.trust-badge--shipping .trust-badge__bar,
.trust-badge--shipping .trust-badge__icon-wrapper {
    background-color: var(--sky-200);
}

.trust-badge--coa .trust-badge__bar,
.trust-badge--coa .trust-badge__icon-wrapper {
    background-color: var(--sky-50);
}

/* Content */
.trust-badge__content {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 40px;
    /* lg:pl-10 (24px bar + padding) */
    padding-right: 16px;
    gap: 1rem;
    width: 100%;
}

/* Icon Wrapper */
.trust-badge__icon-wrapper {
    position: relative;
    width: 60px;
    /* lg:w-[60px] */
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trust-badge__icon {
    width: 32px;
    /* lg:w-8 */
    height: 32px;
    object-fit: contain;
    /* CSS Transparency Fix if assets fail */
    mix-blend-mode: multiply;
}

/* Text */
.trust-badge__text {
    display: flex;
    flex-direction: column;
}

.trust-badge__title {
    font-size: 1.125rem;
    /* lg:text-lg */
    font-weight: 600;
    color: #000;
    line-height: 1.24;
    margin: 0;
}

.trust-badge__description {
    font-size: 1rem;
    /* lg:text-base */
    color: #555;
    line-height: 1.24;
    margin: 0;
}

/* ==========================================================================
   Features Grid Section - "Everything you need to succeed"
   ========================================================================== */

.features-section {
    padding: 4rem 1.5rem;
    background: var(--bg-primary);
}

@media (min-width: 1024px) {
    .features-section {
        padding: 5rem 2rem;
    }
}

.features-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.features-header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.features-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.1;
    margin: 0;
}

@media (min-width: 768px) {
    .features-title {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .features-title {
        font-size: 3rem;
    }
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.feature-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-xl);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.feature-card__icon-wrapper {
    margin-bottom: 1.5rem;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 50%;
    flex-shrink: 0;
}

.feature-card__icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.feature-card__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem;
    line-height: 1.3;
}

.feature-card__description {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

/* Simple Card Variant */
.feature-card--simple {
    background: #f8f9fa;
    border: none;
    justify-content: flex-start;
}

.feature-card--simple .feature-card__icon-wrapper {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.feature-card--simple .feature-card__title {
    margin-bottom: 0;
}

/* =========================================
   Custom Utilities for Featured Products (Strict Port)
   ========================================= */

/* Layout & Box Model */
.ac-section-wrapper {
    width: 100%;
}

.ac-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.ac-mt-8 {
    margin-top: 2rem !important;
}

.ac-relative {
    position: relative !important;
}

.ac-absolute {
    position: absolute !important;
}

.ac-overflow-hidden {
    overflow: hidden !important;
}

.ac-overflow-x-auto {
    overflow-x: auto !important;
}

.ac-block {
    display: block !important;
}

/* Spacing */
.ac-px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.ac-px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ac-pl-0 {
    padding-left: 0 !important;
}

.ac-pr-4 {
    padding-right: 1rem !important;
}

.ac-py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.ac-p-4 {
    padding: 1rem !important;
}

.ac-pt-4 {
    padding-top: 1rem !important;
}

.ac-mb-1 {
    margin-bottom: 0.25rem !important;
}

.ac-mb-4 {
    margin-bottom: 1rem !important;
}

.ac-mt-auto {
    margin-top: auto !important;
}

/* Flexbox */
.ac-flex {
    display: flex !important;
}

.ac-flex-col {
    flex-direction: column !important;
}

.ac-items-center {
    align-items: center !important;
}

.ac-items-start {
    align-items: flex-start !important;
}

.ac-justify-center {
    justify-content: center !important;
}

.ac-justify-between {
    justify-content: space-between !important;
}

.ac-flex-none {
    flex: none !important;
}

.ac-flex-grow {
    flex-grow: 1 !important;
}

.ac-flex-shrink-0 {
    flex-shrink: 0 !important;
}

.ac-gap-2 {
    gap: 0.5rem !important;
}

.ac-gap-4 {
    gap: 1rem !important;
}

/* Positioning */
.ac-left-0 {
    left: 0 !important;
}

.ac-right-0 {
    right: 0 !important;
}

.ac-top-0 {
    top: 0 !important;
}

.ac-bottom-0 {
    bottom: 0 !important;
}

.ac-top-half {
    top: 50% !important;
}

.ac-translate-y-half {
    transform: translateY(-50%) !important;
}

.ac-z-10 {
    z-index: 10 !important;
}

.ac-z-1 {
    z-index: 1 !important;
}

.ac-pointer-events-none {
    pointer-events: none !important;
}

/* Sizing */
.ac-w-full {
    width: 100% !important;
}

.ac-h-full {
    height: 100% !important;
}

.ac-size-10 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
}

.ac-w-12 {
    width: 3rem !important;
}

.ac-h-10 {
    height: 2.5rem !important;
}

.ac-aspect-4-5 {
    aspect-ratio: 4/5 !important;
}

.ac-size-4 {
    width: 1rem !important;
    height: 1rem !important;
}

/* Visuals */
.ac-bg-white {
    background-color: #fff !important;
}

.ac-bg-lightgray {
    background-color: #f9f9f9 !important;
}

.ac-bg-black {
    background-color: #1a1a1a !important;
}

.ac-bg-gradient-l {
    background: linear-gradient(to right, #fff, transparent) !important;
}

.ac-bg-gradient-r {
    background: linear-gradient(to left, #fff, transparent) !important;
}

.ac-border {
    border-style: solid !important;
    border-width: 1px !important;
}

.ac-border-black {
    border-color: #1a1a1a !important;
}

.ac-rounded-full {
    border-radius: 9999px !important;
}

.ac-rounded-20 {
    border-radius: 20px !important;
}

.ac-rounded-b-20 {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

.ac-text-black {
    color: #1a1a1a !important;
}

.ac-text-white {
    color: #fff !important;
}

.ac-text-gray-500 {
    color: #6b7280 !important;
}

.ac-text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
}

.ac-text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.ac-text-base {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

.ac-text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
}

.ac-font-semibold {
    font-weight: 600 !important;
}

.ac-font-medium {
    font-weight: 500 !important;
}

.ac-leading-tight {
    line-height: 1.25 !important;
}

.ac-line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ac-object-cover {
    object-fit: cover !important;
}

/* Interactions */
.ac-cursor-not-allowed {
    cursor: not-allowed !important;
}

.ac-opacity-30 {
    opacity: 0.3 !important;
}

.ac-hover-gray:hover {
    background-color: #f9fafb !important;
}

.ac-hover-dark:hover {
    background-color: #333 !important;
}

.ac-hover-opacity:hover {
    opacity: 0.8 !important;
}

.ac-hover-shadow:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.group:hover .group-hover\:ac-scale-105 {
    transform: scale(1.05) !important;
}

.ac-transition-transform {
    transition: transform 0.3s ease !important;
}

/* HARD OVERRIDES FOR BUTTONS (Fix Purple Flash) */
button.ac-arrow:active,
button.ac-arrow:focus,
button.ac-arrow:focus-visible {
    background-color: #ffffff !important;
    border-color: #1a1a1a !important;
    color: #1a1a1a !important;
    outline: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

button.ac-arrow:hover {
    background-color: #f3f4f6 !important;
    /* light gray hover */
    border-color: #000000 !important;
    color: #000000 !important;
}

/* Responsive */
.ac-hidden {
    display: none !important;
}

@media (min-width: 640px) {
    .sm\:ac-flex {
        display: flex !important;
    }

    .sm\:ac-block {
        display: block !important;
    }

    .sm\:ac-hidden {
        display: none !important;
    }

    .sm\:ac-flex-row {
        flex-direction: row !important;
    }

    .sm\:ac-px-6 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .sm\:ac-px-12 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .sm\:ac-flex-1 {
        flex: 1 1 0% !important;
    }
}

@media (min-width: 1024px) {
    /* Specific overrides if needed */
}

/* =========================================
   Success Grid Section (Strict Port)
   ========================================= */

.ac-success-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #e0f2fe;
    width: 100%;
    overflow-x: hidden;
}

@media (min-width: 1024px) {
    .ac-success-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

.ac-success-title {
    font-size: 1.5rem;
    line-height: 1.05;
    font-weight: 600;
    color: #000000;
    text-align: center;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ac-success-title {
        font-size: 1.875rem;
    }
}

@media (min-width: 1024px) {
    .ac-success-title {
        font-size: 2.25rem;
        margin-bottom: 3rem;
    }
}

.ac-success-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .ac-success-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: 1.25rem;
    }
}

.ac-success-card {
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0px 4px 12.5px 0px rgba(14, 165, 233, 0.15);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    grid-column: span 1;
    min-height: 180px;
}

@media (min-width: 1024px) {
    .ac-success-card {
        border-radius: 28px;
        padding: 1.5rem;
        grid-column: span 6;
        min-height: 220px;
    }
}

/* Card Variants */
.ac-success-card--tall {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .ac-success-card--tall {
        grid-row: span 2;
        min-height: 300px;
    }
}

/* Card Variants */
.ac-success-card--tall {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Fixes button stretching */
}

.ac-success-card--center {
    display: flex;
    align-items: center;
}

@media (min-width: 1024px) {
    .ac-success-card--center {
        min-height: 140px;
    }
}

.ac-success-card--wide {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .ac-success-card--wide {
        grid-column: span 12;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: 140px;
        gap: 1.5rem;
    }
}

/* Typography inside cards */
.ac-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #000000;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

@media (min-width: 1024px) {
    .ac-card-title {
        font-size: 1.25rem;
    }
}

@media (min-width: 1280px) {
    .ac-card-title {
        font-size: 1.5rem;
    }
}

.ac-card-text {
    font-size: 0.875rem;
    color: #000000;
    line-height: 1.5;
    margin-bottom: 1rem;
    max-width: 70%;
}

@media (min-width: 1024px) {
    .ac-card-text {
        font-size: 1rem;
    }
}

/* Button inside cards */
.ac-card-btn {
    border: 1px solid #000000 !important;
    background-color: transparent !important;
    color: #000000 !important;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0 1.25rem;
    height: 2.5rem;
    border-radius: 9999px;
    transition: all 0.2s ease;
    line-height: 2.5rem;
    /* Match height for vertical center if flex fails */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
}

.ac-card-btn:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

@media (min-width: 1024px) {
    .ac-card-btn {
        font-size: 1rem;
        padding: 0 1.5rem;
        height: 2.75rem;
    }
}

/* Images */
.ac-card-img {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 5rem !important;
    height: 5rem !important;
    object-fit: contain;
    z-index: 10;
    display: block !important;
}

@media (min-width: 1024px) {
    .ac-card-img {
        width: 6rem !important;
        height: 6rem !important;
    }
}

/* Specific Image overrides based on snippet */
.ac-card-img--tall {
    width: 5rem !important;
    height: 5rem !important;
}

@media (min-width: 1024px) {
    .ac-card-img--tall {
        width: 7rem !important;
        height: 7rem !important;
    }
}

.ac-card-img--small {
    width: 4rem !important;
    height: 4rem !important;
}

@media (min-width: 1024px) {
    .ac-card-img--small {
        width: 5rem !important;
        height: 5rem !important;
    }
}

/* =========================================
   Newsletter Section (Added)
   ========================================= */
.newsletter-section {
    background: var(--gradient-newsletter);
    padding: 4rem 1.5rem;
    color: var(--text-primary);
}

.newsletter-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .newsletter-container {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 2rem;
    }
}

.newsletter-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.newsletter-btn {
    background: linear-gradient(135deg, var(--sky-500) 0%, var(--sky-400) 100%);
    color: #fff;
    border: none;
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.newsletter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
    background: linear-gradient(135deg, var(--sky-400) 0%, var(--sky-500) 100%);
    color: #fff;
}

/* =========================================
   Why Choose Section
   Now fully Tailwind-driven from why-choose.php
   Old ac-strict-* CSS removed in v2.1.0
   ========================================= */

/* ==========================================================================
   Restoration Layout Fixes - Hero & Trust Badges
   ========================================================================== */

/* Ensure wrapper doesn't trap the absolute hero */
.has-hero-3d #content {
    position: static !important;
}

/* 
 * The Hero is Position: Absolute.
 * The Trust Badges (now Guarantee) need to appear below it.
 * Push down by viewport height.
 */
.trust-badges-section {
    margin-top: 100vh !important;
    position: relative;
    z-index: 20;
    background: #ffffff;
    box-shadow: 0 -30px 60px rgba(255, 255, 255, 1);
    /* Stronger blend */
}

/* Hero Transition Fade - Gradient overlay at bottom of hero */
.hero-fullscreen::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 400px;
    /* Stronger blend */
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 30%,
            rgba(255, 255, 255, 0.8) 70%,
            #ffffff 100%);
    pointer-events: none;
    /* Z-Index: 2 (Above BG, Below Content) */
    z-index: 5;
}

/* Ensure Scroll Indicator is ABOVE the blur/gradient and PERFECTLY CENTERED */
.scroll-indicator {
    z-index: 20 !important;
    position: absolute;
    bottom: 30px;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    color: #4a5568 !important;
    /* Dark text for visibility */
}

/* Ensure no negative margins persist on body from old scripts */
body,
#page {
    margin-top: 0 !important;
    transform: none !important;
}

/* =========================================
   Secondary CTA (Peace of Mind) - v2
   Sky Blue / White Theme
   ========================================= */

.ac-cta-section {
    position: relative;
    padding-top: 3rem;
    padding-bottom: 5rem;
    margin-bottom: 0;
    background: linear-gradient(180deg, #ffffff 0%, #e0f2fe 100%);
    width: 100%;
    overflow: visible;
    /* Fixes nested scrollbar */
}

@media (min-width: 1024px) {
    .ac-cta-section {
        padding-top: 5rem;
        padding-bottom: 7rem;
    }
}

/* Floating Vials */
.ac-cta-vial {
    position: absolute;
    pointer-events: none;
    z-index: 10;
}

.ac-cta-vial--left {
    left: -15px;
    top: -20px;
    width: 55px;
    height: 110px;
    transform: translateY(-16px);
    transition: transform 0.1s ease-out;
}

.ac-cta-vial--right {
    right: -20px;
    bottom: -40px;
    width: 60px;
    height: 120px;
    transform: translateY(10px);
    transition: transform 0.1s ease-out;
    z-index: 70;
}

@media (min-width: 1024px) {
    .ac-cta-vial--left {
        left: 35px;
        top: -35px;
        width: 85px;
        height: 170px;
    }

    .ac-cta-vial--right {
        right: 40px;
        bottom: -70px;
        width: 95px;
        height: 190px;
    }
}

.ac-cta-vial-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.rotate-18 {
    transform: rotate(18deg);
}

.rotate-n8 {
    transform: rotate(-8deg);
}

.ac-cta-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Content */
.ac-cta-content {
    max-width: 48rem;
    /* 3xl */
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem;
}

.ac-cta-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #000;
    line-height: 1.35;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .ac-cta-title {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .ac-cta-title {
        font-size: 2.25rem;
        margin-bottom: 2rem;
    }
}

/* Highlight "Peace of Mind" Animation */
.ac-cta-highlight {
    position: relative;
    display: inline-block;
}

.ac-cta-highlight-text {
    position: relative;
    z-index: 10;
    /* animate-text-glow handled via color transition if needed, but mainly underline here */
}

/* Underline Bar */
.ac-cta-highlight-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 9999px;
}

@media (min-width: 1024px) {
    .ac-cta-highlight-bar {
        height: 5px;
    }
}

/* Base Gradient (Sky Blue) */
.ac-cta-highlight-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Sky Blue Gradient: roughly sky-300 to sky-500 */
    background: linear-gradient(to right, #7dd3fc, #38bdf8, #0ea5e9);
    border-radius: 9999px;
    transform-origin: left;
    transition: transform 1s ease-out;
}

/* Shimmer Overlay */
.ac-cta-highlight-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100%);
    animation: ac-shimmer 3s infinite;
}

/* Glow Blur Behind */
.ac-cta-highlight-glow {
    position: absolute;
    inset: 0;
    z-index: -10;
    filter: blur(12px);
    /* blur-xl */
    opacity: 0.4;
    background: linear-gradient(90deg, #7dd3fc, #38bdf8, #0ea5e9);
    animation: ac-pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Sparkles */
.ac-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    /* Radial gradient white center to sky blue edge */
    background: radial-gradient(circle, #ffffff 0%, #7dd3fc 50%, transparent 70%);
}

.ac-sparkle--1 {
    top: -8px;
    left: 20%;
    animation: ac-sparkle 2s infinite;
}

.ac-sparkle--2 {
    top: -5px;
    left: 50%;
    animation: ac-sparkle 3s infinite 0.5s;
}

.ac-sparkle--3 {
    top: -10px;
    left: 80%;
    animation: ac-sparkle 2.5s infinite 1s;
}

/* Button */
.ac-cta-button-link {
    text-decoration: none;
}

.ac-cta-button {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #000;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .ac-cta-button {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }
}

.ac-cta-button:hover {
    gap: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(1.05);
}

/* Button Shimmer Effect */
.ac-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.ac-cta-button:hover::before {
    left: 100%;
}

.ac-cta-arrow {
    transition: transform 0.3s ease;
    width: 24px;
    height: auto;
}

.ac-cta-button:hover .ac-cta-arrow {
    transform: translateX(4px);
}

/* =========================================
   Newsletter Section - v2
   Overlapping Card
   ========================================= */

.ac-newsletter-wrapper {
    position: relative;
    z-index: 30;
    margin-top: -2rem;
    /* Negative margin overlap */
    padding-bottom: 3rem;
}

@media (min-width: 640px) {
    .ac-newsletter-wrapper {
        margin-top: -2.5rem;
    }
}

@media (min-width: 1024px) {
    .ac-newsletter-wrapper {
        margin-top: -3rem;
    }
}

.ac-newsletter-card {
    position: relative;
    /* White/Sky Blue Gradient Card */
    /* Option C: White to Sky-300 */
    background: linear-gradient(180deg, #ffffff 0%, #7dd3fc 100%);
    border-radius: 1rem;
    padding: 1.5rem;
    overflow: hidden;
    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.06);
}

@media (min-width: 1024px) {
    .ac-newsletter-card {
        border-radius: 1.5rem;
        padding: 2rem;
    }
}

.ac-newsletter-content-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    .ac-newsletter-content-grid {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }
}

/* Text Column */
.ac-newsletter-text-col {
    flex: 1;
    max-width: 28rem;
}

.ac-newsletter-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #000;
    line-height: 1.25;
    margin-bottom: 0.375rem;
}

@media (min-width: 768px) {
    .ac-newsletter-title {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .ac-newsletter-title {
        font-size: 1.75rem;
    }
}

.ac-newsletter-desc {
    font-size: 0.875rem;
    color: #555;
    /* text-gray-500ish */
    line-height: 1.625;
    margin-bottom: 0.375rem;
}

@media (min-width: 1024px) {
    .ac-newsletter-desc {
        font-size: 1rem;
    }
}

.ac-newsletter-count {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.7);
}

@media (min-width: 1024px) {
    .ac-newsletter-count {
        font-size: 0.875rem;
    }
}

.ac-count-bold {
    font-weight: 600;
    color: #000;
}

/* Form Column */
.ac-newsletter-form-col {
    flex-shrink: 0;
    width: 100%;
}

@media (min-width: 1024px) {
    .ac-newsletter-form-col {
        width: auto;
        min-width: 340px;
    }
}

.ac-form-wrapper {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 9999px;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

@media (min-width: 1024px) {
    .ac-form-wrapper {
        padding: 0.375rem;
    }
}

.ac-newsletter-input {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ac-newsletter-input:focus,
.ac-newsletter-input:active,
.ac-newsletter-input:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.ac-newsletter-btn {
    flex-shrink: 0;
    background-color: #000;
    color: #fff;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ac-newsletter-btn:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

@media (min-width: 1024px) {
    .ac-newsletter-btn {
        padding: 0.625rem 1.5rem;
    }
}


/* Keyframe Animations */
@keyframes ac-shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes ac-pulse-glow {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes ac-sparkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* ===== Dashboard Styles ===== */

/* ===== Dashboard Reset ===== */
.woocommerce-MyAccount-content,
.ascentides-account-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
}

.entry-header,
.storefront-breadcrumb,
.post-edit-link,
article>footer {
    display: none !important;
}

/* Ensure layout sections render full width */
.col-full,
article,
.entry-content,
.woocommerce {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
}

.site-content {
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
    padding-top: var(--nav-height) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

body.woocommerce-account .site-content {
    padding-top: 0 !important;
}

/* ===== Hero Section ===== */
.dash-hero {
    background: linear-gradient(180deg, #0a192f 0%, #0d1f3c 60%, #f5f5f7 100%);
    padding: 60px 0 80px;
    position: relative;
    overflow: hidden;
}





.dash-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

.dash-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dash-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    flex-shrink: 0;
}

.dash-greeting {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    line-height: 1.2;
}

.dash-email {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 4px;
    font-family: 'Poppins', sans-serif;
}

.dash-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 24px;
    font-family: 'Poppins', sans-serif;
}

.dash-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dash-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    text-decoration: none !important;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    line-height: 1.4;
}

.dash-btn-primary {
    background: #fff;
    color: #0a192f;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.dash-btn-primary:hover {
    background: #f0f0f0;
    color: #0a192f;
}

.dash-btn-outline {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dash-btn-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ===== Page Background ===== */
.woocommerce-account .woocommerce-MyAccount-content {
    background-color: #f5f5f7;
}

/* ===== Content Area ===== */
.dash-content {
    max-width: 1100px;
    margin: -40px auto 0;
    padding: 0 24px 60px;
    position: relative;
    z-index: 2;
}

/* ===== Card Grid ===== */
.dash-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 32px;
}

.dash-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 24px;
    text-decoration: none !important;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.dash-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dash-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.dash-card:hover .dash-card-icon {
    background: #e5e7eb;
}

.dash-card-icon svg {
    width: 24px;
    height: 24px;
    color: #4b5563;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-card-text h3 {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin: 0 0 2px;
    font-family: 'Poppins', sans-serif;
}

.dash-card-text p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Partner Program card - purple gradient */
.dash-card-partner {
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    border: none;
    color: #fff;
}

.dash-card-partner:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #1d4ed8 100%);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

.dash-card-partner .dash-card-icon {
    background: rgba(255, 255, 255, 0.2);
}

.dash-card-partner:hover .dash-card-icon {
    background: rgba(255, 255, 255, 0.3);
}

.dash-card-partner .dash-card-icon svg {
    color: #fff;
}

.dash-card-partner .dash-card-text h3 {
    color: #fff;
}

.dash-card-partner .dash-card-text p {
    color: rgba(255, 255, 255, 0.8);
}

/* ===== Orders Section ===== */
.dash-orders {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.dash-orders-header {
    padding: 24px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-orders-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-orders-icon svg {
    width: 20px;
    height: 20px;
    color: #fff;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-orders-title h2 {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.dash-orders-title p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Empty state */
.dash-orders-empty {
    text-align: center;
    padding: 64px 24px;
}

.dash-orders-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.dash-orders-empty-icon svg {
    width: 40px;
    height: 40px;
    color: #9ca3af;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-orders-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin: 0 0 8px;
    font-family: 'Poppins', sans-serif;
}

.dash-orders-empty p {
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 32px;
    font-family: 'Poppins', sans-serif;
}

.dash-btn-shop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    background: #000;
    color: #fff !important;
    font-weight: 500;
    font-size: 15px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: background 0.2s;
    font-family: 'Poppins', sans-serif;
}

.dash-btn-shop:hover {
    background: rgba(0, 0, 0, 0.85);
    color: #fff !important;
}

/* Order list */
.dash-order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
    text-decoration: none !important;
}

.dash-order-item:hover {
    background: #fafafa;
}

.dash-order-item:last-child {
    border-bottom: none;
}

.dash-order-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-order-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: #f3f4f6;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-order-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-order-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin: 0 0 4px;
    font-family: 'Poppins', sans-serif;
}

.dash-order-info span {
    font-size: 13px;
    color: #6b7280;
    font-family: 'Poppins', sans-serif;
}

.dash-order-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-order-status {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
}

.dash-status-processing {
    background: #fef3c7;
    color: #92400e;
}

.dash-status-completed {
    background: #d1fae5;
    color: #065f46;
}

.dash-status-on-hold {
    background: #e0e7ff;
    color: #3730a3;
}

.dash-status-pending {
    background: #f3f4f6;
    color: #4b5563;
}

.dash-status-cancelled,
.dash-status-refunded,
.dash-status-failed {
    background: #fee2e2;
    color: #991b1b;
}

.dash-order-total {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
}

.dash-order-arrow {
    color: #d1d5db;
}

/* ===== Responsive ===== */
@media (max-width: 639px) {
    .dash-hero {
        padding: 40px 0 60px;
    }

    .dash-greeting {
        font-size: 24px;
    }

    .dash-content {
        margin-top: -24px;
    }

    .dash-order-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }
}

@media (min-width: 640px) {
    .dash-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash-card-partner {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .dash-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .dash-card-partner {
        grid-column: span 1;
    }
}


/* ===== Styles from my-address.php ===== */

/* ===== Addresses Page ===== */
.ascentides-account-wrapper,
.woocommerce-MyAccount-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
}

.entry-header,
.storefront-breadcrumb,
.post-edit-link,
article>footer {
    display: none !important;
}

.site-content,
.col-full,
article,
.entry-content,
.woocommerce {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.addr-hero {
    background: linear-gradient(180deg, #0a192f 0%, #0d1f3c 60%, #f5f5f7 100%);
    padding: 50px 0 70px;
}

.addr-hero-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

.addr-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none !important;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 24px;
    transition: color 0.2s;
}

.addr-back:hover {
    color: #fff;
}

.addr-back svg {
    width: 16px;
    height: 16px;
}

.addr-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.addr-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.addr-icon-circle svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.addr-title-row h1 {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.addr-title-row p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin: 4px 0 0;
    font-family: 'Poppins', sans-serif;
}

/* Address cards */
.addr-content {
    max-width: 800px;
    margin: -30px auto 60px;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

.addr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.addr-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 28px;
    position: relative;
}

.addr-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.addr-card-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.addr-card-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    color: #3b82f6;
    text-decoration: none !important;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
    font-family: 'Poppins', sans-serif;
}

.addr-card-edit:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.addr-card address {
    font-style: normal;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.7;
    font-family: 'Poppins', sans-serif;
}

.addr-card .addr-empty {
    color: #9ca3af;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
}

@media (max-width: 768px) {
    .addr-grid {
        grid-template-columns: 1fr;
    }

    .addr-title-row h1 {
        font-size: 22px;
    }
}


/* ===== Styles from form-edit-account.php ===== */

/* ===== Profile Page ===== */
.ascentides-account-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
}

.woocommerce-MyAccount-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
}

.entry-header,
.storefront-breadcrumb,
.post-edit-link,
article>footer {
    display: none !important;
}

.site-content,
.col-full,
article,
.entry-content,
.woocommerce {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.profile-page-hero {
    background: linear-gradient(180deg, #0a192f 0%, #0d1f3c 60%, #f5f5f7 100%);
    padding: 50px 0 70px;
}

.profile-page-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

.profile-page-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none !important;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 24px;
    transition: color 0.2s;
}

.profile-page-back:hover {
    color: #fff;
}

.profile-page-back svg {
    width: 16px;
    height: 16px;
}

.profile-page-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-page-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    flex-shrink: 0;
}

.profile-page-title h1 {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.profile-page-title p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin: 4px 0 0;
    font-family: 'Poppins', sans-serif;
}

/* Form container */
.profile-form-wrap {
    max-width: 800px;
    margin: -30px auto 60px;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

.profile-form-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 40px;
}

.profile-form-card .woocommerce-EditAccountForm {
    width: 100%;
}

.profile-form-card label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    font-family: 'Poppins', sans-serif;
}

.profile-form-card .form-row {
    margin-bottom: 20px;
    padding: 0 !important;
}

.profile-form-card .form-row-first,
.profile-form-card .form-row-last {
    width: 48% !important;
    display: inline-block !important;
    float: none !important;
}

.profile-form-card .form-row-first {
    margin-right: 4% !important;
}

.profile-form-card input[type="text"],
.profile-form-card input[type="email"],
.profile-form-card input[type="password"],
.profile-form-card input[type="tel"] {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-family: 'Poppins', sans-serif !important;
    color: #111 !important;
    background: #fff !important;
    transition: border-color 0.2s !important;
    box-sizing: border-box !important;
}

.profile-form-card input:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.profile-form-card em {
    font-size: 12px;
    color: #9ca3af;
    font-style: normal;
}

.profile-form-card fieldset {
    border: none;
    padding: 0;
    margin: 32px 0 0;
    border-top: 1px solid #f3f4f6;
    padding-top: 32px;
}

.profile-form-card fieldset legend {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    font-family: 'Poppins', sans-serif;
    padding: 0 8px 0 0;
}

.profile-form-card button[type="submit"],
.profile-form-card .woocommerce-Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    background: #000 !important;
    color: #fff !important;
    font-weight: 500;
    font-size: 15px;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'Poppins', sans-serif;
    margin-top: 12px;
}

.profile-form-card button[type="submit"]:hover {
    background: rgba(0, 0, 0, 0.85) !important;
}

@media (max-width: 768px) {

    .profile-form-card .form-row-first,
    .profile-form-card .form-row-last {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .profile-form-card {
        padding: 24px;
    }

    .profile-page-title h1 {
        font-size: 22px;
    }
}