/*
Theme Name: XOMM 
Author: Elaine Malone 
Author URI: https://elainemalone.com
Text Domain: xomm
Version: 1.0
*/

/* --- GLOBAL RESET & SAFETY --- */

/* 1. Scope max-width to the front-end HTML */
html {
    max-width: 100%;
} 

/* 2. Scope overflow strictly to the front-end body. 
Applying this to the editor body can break WP admin scrolling! */
body:not(.wp-admin) {
    overflow-x: hidden; 
    max-width: 100%;
}

/* 3. Scope box-sizing strictly to the front-end.
Leaving this global is what breaks Gutenberg's hidden UI toolbars. */
body:not(.wp-admin) *, 
body:not(.wp-admin) *::before, 
body:not(.wp-admin) *::after {
    box-sizing: border-box;
}

/* 2. THE SAFETY NET FOR ANY STRAY OVERFLOWS (e.g. from the Ambient Glow)
html, body {
    max-width: 100%;
    overflow-x: hidden;
} */

/* --- 1. Variable Mappings --- */
:root {
    /* DARK / NAVY TONES */
    --valhalla: var(--wp--preset--color--valhalla);
    --bright-gray: var(--wp--preset--color--bright-gray);
    --comet: var(--wp--preset--color--comet);
    --manatee: var(--wp--preset--color--manatee);
    --periwinkle-gray: var(--wp--preset--color--periwinkle-gray);

    /* BLUES */
    --torea-bay: var(--wp--preset--color--torea-bay);
    --moody-blue: var(--wp--preset--color--moody-blue);
    --perano: var(--wp--preset--color--perano);
    --hawkes-blue: var(--wp--preset--color--hawkes-blue);

    /* PURPLES */
    --eminence: var(--wp--preset--color--eminence);
    --bright-lilac: var(--wp--preset--color--bright-lilac);
    --rich-brilliant-lavender: var(--wp--preset--color--rich-brilliant-lavender);
    --shampoo: var(--wp--preset--color--shampoo);

    /* ACCENTS & NEUTRALS */
    --mindaro: var(--wp--preset--color--mindaro);
    --alabaster: var(--wp--preset--color--alabaster);
    
    --white: #FFFFFF;

    /* FONTS */
    --font-heading: var(--wp--preset--font-family--fraunces);
    
    /* FIX: Added '-sans' to match theme.json slug */
    --font-body: var(--wp--preset--font-family--plus-jakarta-sans);

    /* BORDER RADIUS */
    /* --radius-card: 24px; */
    --radius-mini: 12px;
    --radius-card: 30px;
    --radius-pill: 50px;
    --radius-circle: 50%;
}

/* =========================================
   SCROLL ANIMATIONS
   ========================================= */

/* --- 1. The Setup --- */
[data-animate] {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

/* --- 2. The Animations --- */
[data-animate="fade-up"] { transform: translateY(40px); }
[data-animate="fade-in"] { transform: translateY(0); }

/* --- 3. The Trigger --- */
[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 4. SAFETY FIXES --- */
.editor-styles-wrapper [data-animate], 
.wp-admin [data-animate] {
    opacity: 1 !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Standard Animation Spec */
[data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(50px); 
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

[data-animate="fade-up"].in-view {
    opacity: 1;
    transform: translateY(0);
}

section:first-of-type[data-animate="fade-up"] {
    transition-delay: 0.3s;
}

/* --- STICKY Element FIX --- */
.wp-block-group.is-position-sticky {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 10px) !important;
    z-index: 10; 
}

/* @media (max-width: 768px) {
    .wp-block-group.is-position-sticky {
        position: static !important;
        top: auto !important;
    }
} */

/* =========================================
   HEADER & NAVIGATION
   ========================================= */
.header-nav .wp-block-navigation-item__content {
    padding: 8px 18px;
    border-radius: var(--radius-card);
    transition: 0.3s;
}

.header-nav .wp-block-navigation-item__content:hover, 
.header-nav .wp-block-navigation-submenu:hover .wp-block-navigation-item__content {
    background: #F9F9FB; /* Light Grey */
    color: var(--valhalla);
    box-shadow: none;
    text-decoration: none;
}

.header-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
    background: var(--valhalla);
    color: var(--white);
}

.header-nav .wp-block-navigation__submenu-container {
    background: #FFFFFF;
    border-radius: var(--radius-card); 
    padding: 20px;
    box-shadow: 0 20px 60px rgba(50, 44, 66, 0.1);
    border: 1px solid rgba(0,0,0,0.05); top: 100%; margin-top: 15px !important;
}
.header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 10px 15px; border-radius: var(--radius-mini);
}
.header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: #F9F9FB;
}

/* --- STICKY HEADER FIX --- */
.header-nav:has(>.is-position-sticky) {
	position: sticky;
	top: calc( 0px + var( --wp-admin--admin-bar--height, 0px ) );
	z-index: 100;
}

@media (max-width: 600px) {
	.header-nav:has(>.is-position-sticky) {
		top: 0;
	}
}

/* --- MEGA MENU --- */
.is-mega-menu .wp-block-navigation__submenu-container {
    width: 380px !important;
    padding: 15px !important;
    border-radius: var(--radius-card) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px !important;
    background: #FFFFFF !important;
}

/* Invisible Bridge */
.is-mega-menu .wp-block-navigation__submenu-container::before {
    content: '';
    position: absolute; top: -20px; left: 0;
    width: 100%; height: 20px;
    background: transparent; display: block;
}

.is-mega-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: grid !important;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 15px; row-gap: 2px;
    align-items: center;
    padding: 12px !important;
    background: #FFFFFF !important; 
    border-radius: var(--radius-mini); transition: 0.2s;
    white-space: normal;
}

.is-mega-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: #F9F9FB !important;
}

/* Highlight Card */
.is-mega-menu .wp-block-navigation__submenu-container .highlight-card .wp-block-navigation-item__content {
    background: #FDFFEF !important;
}
.is-mega-menu .wp-block-navigation__submenu-container .highlight-card .wp-block-navigation-item__content:hover {
    background: #F8FADD !important;
}

/* Mega Menu Text */
.is-mega-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
    font-weight: 600; color: var(--valhalla); font-size: 0.95rem;
    grid-column: 2; grid-row: 1; align-self: end; display: block;
}
.is-mega-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
    font-size: 0.8rem; color: #999; font-weight: 600;
    grid-column: 2; grid-row: 2; align-self: start;
    margin: 0; display: block !important; line-height: 1.4;
}

/* Mega Menu Icons */
.is-mega-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
    content: ''; width: 40px; height: 40px; border-radius: var(--radius-circle);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    grid-column: 1; grid-row: 1 / span 2;
}
.is-mega-menu .wp-block-navigation__submenu-container .is-item-rocket .wp-block-navigation-item__content::before {
    content: '🚀'; background: #f6ffd6;
}
.is-mega-menu .wp-block-navigation__submenu-container .is-item-notepad .wp-block-navigation-item__content::before {
    content: '📝'; background: #dfe7ff;
}
.is-mega-menu .wp-block-navigation__submenu-container .is-item-laptop .wp-block-navigation-item__content::before {
    content: '💻'; background: #ffeffb;
}
.is-mega-menu .wp-block-navigation__submenu-container .is-item-web .wp-block-navigation-item__content::before {
    content: '🕸️'; background: #EFEFF5;
}

@media (max-width: 900px) {
    .is-mega-menu .wp-block-navigation__submenu-container {
        width: auto !important; left: 0 !important; transform: none !important;
        position: relative !important; box-shadow: none !important; border: none !important;
    }
    .is-mega-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before { display: none; }
    .is-mega-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        display: flex !important; flex-direction: column; align-items: flex-start;
    }
}

/* --- NOTIFY BAR --- */
.notify-slim {
    background-color: var(--valhalla); 
    color: var(--white);
    font-size: 0.85rem; height: 46px; 
    display: flex; justify-content: center; align-items: center;
    position: relative; z-index: 2000; overflow: hidden;
    opacity: 1; transition: height 0.4s ease, opacity 0.4s ease;
}
.notify-slim.closed { height: 0; opacity: 0; pointer-events: none; }
.notify-inner { display: flex; align-items: center; gap: 15px; }

.notify-close {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: rgba(255,255,255,0.6);
    cursor: pointer; font-size: 1rem; padding: 5px; transition: 0.2s; z-index: 10;
}
.notify-close:hover { color: var(--white); }


/* =========================================
   BUTTON STYLES
   ========================================= */

/* Default Button */
.wp-block-button__link {
    transition: all 0.2s ease;
    border-radius: var(--radius-pill);
}
.wp-block-button__link:hover {
    background-color: var(--torea-bay) !important; /* Matches --deep-3 hover */
    color: var(--white) !important;
}

/* Outline */
.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    border: 1px solid rgba(50, 44, 66, 0.22) !important;
    color: var(--valhalla) !important;
}
.is-style-outline .wp-block-button__link:hover {
    background-color: transparent !important;
    border-color: var(--moody-blue) !important; /* Matches --purple hover */
    color: var(--moody-blue) !important;
}

/* Ghost */
.is-style-ghost .wp-block-button__link {
    background-color: transparent !important;
    color: var(--valhalla) !important;
    border: none !important; padding: 0 !important;
    font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
    box-shadow: none !important;
}
.is-style-ghost .wp-block-button__link:hover {
    color: var(--perano) !important; transform: translateX(5px);
}
.is-style-ghost .wp-block-button__link::after {
    content: '→'; display: inline-block; transition: transform 0.3s ease;
}
.is-style-ghost .wp-block-button__link:hover::after { transform: translateX(3px); }

/* Morph */
.is-style-morph-btn .wp-block-button__link {
    background-color: var(--mindaro); color: var(--valhalla); border-radius: var(--radius-pill);
    padding: 12px 28px; font-weight: 600; font-size: 0.9rem; transition: all 0.4s ease;
    display: flex; align-items: center; gap: 8px;
}
.is-style-morph-btn .wp-block-button__link:hover {
    background-color: var(--valhalla); color: var(--mindaro); padding-right: 40px;
}
.is-style-morph-btn .wp-block-button__link::after {
    content: '→'; opacity: 0; transform: translateX(-10px); transition: all 0.4s ease;
    position: absolute; right: 20px;
}
.is-style-morph-btn .wp-block-button__link:hover::after { opacity: 1; transform: translateX(0); }

/* Emoji Button */
.is-style-emoji-btn .wp-block-button__link {
    background: var(--valhalla) !important;
    color: var(--white) !important;
    padding: 15px 30px !important;
    border-radius: var(--radius-pill) !important;
    border: none !important;
    font-size: 1rem !important; font-weight: 600 !important;
    transition: 0.2s !important;
    display: inline-flex; align-items: center; gap: 10px;
}
.is-style-emoji-btn .wp-block-button__link:hover { transform: scale(1.05); }

.is-style-emoji-btn .emoji-bounce { display: inline-block; transition: transform 0.3s ease; }
.is-style-emoji-btn .wp-block-button__link:hover .emoji-bounce {
    animation: waveHand 1s infinite; transform-origin: 70% 70%;
}
@keyframes waveHand {
    0% { transform: rotate( 0.0deg) }
    10% { transform: rotate(14.0deg) }  
    20% { transform: rotate(-8.0deg) }
    30% { transform: rotate(14.0deg) }
    40% { transform: rotate(-4.0deg) }
    50% { transform: rotate(10.0deg) }
    60% { transform: rotate( 0.0deg) } 
    100% { transform: rotate( 0.0deg) }
}

/* .is-style-eyebrow-heading { 
    font-style: normal; font-weight: 600; letter-spacing: 0.125rem;
    line-height: 1; text-transform: uppercase; 
    font-size: var(--wp--preset--font-size--xsmall);
    color: var(--manatee);
} */

.is-style-eyebrow-heading { 
    font-style: normal; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.12em;
    font-size: 0.65rem;
    /* font-size: var(--wp--preset--font-size--xsmall); */
    margin-bottom: 0.875rem;
    display: block;
    color: var(--manatee); /* Default gray */
}

/* --- IMAGE MASKS --- */
.is-style-arch-mask img {
    border-radius: 200px 200px 24px 24px !important;
    object-fit: cover; height: 100%;
}
.is-style-reverse-arch-mask img {
    border-radius: 24px 24px 200px 200px !important;
    object-fit: cover; height: 100%;
}

@media (max-width: 900px) {
    .zigzag-row, .stats-bar-block, .values-grid-block { grid-template-columns: 1fr; }
    .zigzag-row.reverse .text-col { order: 1; } 
    .zigzag-row.reverse .img-col { order: 2; }
    .stat-divider { display: none; }
    .stats-bar-block { gap: 40px; }
    .polaroid { transform: rotate(0deg); margin: 0 auto; }
}

/* --- SCROLL CIRCLE --- */
.scroll-circle {
    position: fixed; bottom: 100px; right: 30px; 
    width: 50px; height: 50px;
    background: var(--white); border-radius: var(--radius-circle); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center; 
    cursor: pointer; z-index: 999; 
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0; pointer-events: none;
}
.scroll-circle.visible { opacity: 1; pointer-events: all; }
.scroll-circle:hover { transform: translateY(-5px); }
.progress-ring__circle {
    stroke-dasharray: 126; stroke-dashoffset: 126;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.1s; stroke: var(--mindaro);
}
.arrow-up { 
    position: absolute; font-weight: 600; color: var(--valhalla); font-size: 1.2rem; 
}

/* --- MISC UI --- */
.floating-badge-position { position: absolute; bottom: 120px; right: 80px; }
.floated-outline {border: 2px solid transparent; transition: 0.3s;}
.floated-outline:hover {transform: translateY(-5px); border-color: var(--perano);}
.special-outline {border: 2px solid transparent; transition: 0.3s;}
.special-outline:hover {border-color: var(--mindaro);}
.floating {transition: 0.3s;}
.floating:hover {transform: translateY(-5px); }

/* --- Custom Block Styles: Paragraphs & Groups --- */

/* --- 1. The Pill Badge ("Eyebrow" tags) --- */
p.is-style-mm-pill-badge {
    /* display: inline-block;  <-- Removed so margins can work! */
    width: fit-content; /* Shrink-wraps the text perfectly */
    max-width: 100%; /* Prevents breaking out on mobile */
    background-color: var(--hawkes-blue); 
    color: var(--valhalla);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: var(--wp--preset--font-size--xsmall);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.125rem;
    line-height: 1;
    border: 0px solid rgba(50, 44, 66, 0.1); 
}

/* Handle Center Alignment */
p.is-style-mm-pill-badge.has-text-align-center {
    margin-left: auto;
    margin-right: auto;
}

/* Handle Right Alignment */
p.is-style-mm-pill-badge.has-text-align-right {
    margin-left: auto;
    margin-right: 0;
}

/* Handle Left Alignment (Default) */
p.is-style-mm-pill-badge.has-text-align-left {
    margin-left: 0;
    margin-right: auto;
}

/* --- 2. Lead Text (For the intro paragraph of a blog post or service page) */
p.is-style-mm-lead-text {
    font-size: var(--wp--preset--font-size--large);
    color: var(--valhalla); /* Darker text for more impact */
    line-height: 1.6;
    font-weight: 600;
}

/* --- 2. Special Text (For the intro paragraph of a blog post or service page) */
p.is-style-mm-special-text {
    font-size: var(--wp--preset--font-size--xxlarge);
    font-family: var(--font-heading);
    color: var(--valhalla); /* Darker text for more impact */
    line-height: 1.6;
    font-weight: 500;
}

/* --- 3. Ambient Glow Block Style --- */
.is-style-mm-ambient-glow {
    position: relative;
    isolation: isolate;
    padding: 0; 
    overflow: visible !important; 
    z-index: 0;
}

.is-style-mm-ambient-glow::before,
.is-style-mm-ambient-glow::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(100px); 
    z-index: -1; 
    pointer-events: none;
    /* opacity: 0.35; */
    opacity: 0.15;
    will-change: transform; 
    animation: orbDrift 12s ease-in-out infinite;
}

/* Orb 1: Lilac (Top Right) */
.is-style-mm-ambient-glow::before {
    width: 600px;
    height: 600px;
    top: -100px; 
    right: -100px;
    background: var(--lilac, #E591F6); 
    animation-duration: 14s;
}

/* Orb 2: Perano (Bottom Left) */
.is-style-mm-ambient-glow::after {
    width: 700px;
    height: 700px;
    bottom: -150px;
    left: -150px;
    background: var(--perano, #B2BBFA); 
    animation-delay: -4s;
    animation-duration: 18s;
}

/**
 * Enhanced Keyframes: 
 * Increased the translate distance so the 
 * movement is visible despite the heavy blur.
 */
@keyframes orbDrift {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        /* Moved from 30px to 100px for a clearer drift */
        transform: translate(100px, -80px) scale(1.1);
    }
    66% {
        /* Moved from -20px to -60px */
        transform: translate(-60px, 40px) scale(0.9);
    }
}

/* --- 3. The Card --- */
.wp-block-group.is-style-mm-card {
    background-color: var(--white);
    padding: 40px;
    border-radius: var(--radius-card); /* 24px from your mockup */
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

/* --- 3. The Elevated Card */
.wp-block-group.is-style-mm-elevated-card {
    background-color: var(--white);
    padding: 40px;
    border-radius: var(--radius-card); /* 24px from your mockup */
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Optional: Add the same hover lift as the Values cards */
.wp-block-group.is-style-mm-elevated-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.04);
}

/* --- 4. The Deliverable Card (Row Block) --- */

.wp-block-group.is-style-mm-deliverable-card {
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius-card); /* Usually 24px */
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    
    /* Enforce the layout */
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect */
.wp-block-group.is-style-mm-deliverable-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}

/* Styling the Icon */
.wp-block-group.is-style-mm-deliverable-card > p:first-child {
    font-size: var(--wp--preset--font-size--large);
    background: var(--alabaster); /* Light Grey background */
    width: 60px;
    height: 60px;
    border-radius: var(--radius-circle); /* Makes it a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevents the circle from squishing if text is long */
    margin: 0; /* Removes default paragraph margins */
}

/* Ensure the text group next to the icon takes up the rest of the space */
.wp-block-group.is-style-mm-deliverable-card > .wp-block-group {
    flex-grow: 1;
}

/* Tighten the spacing between the heading and paragraph inside the card */
.wp-block-group.is-style-mm-deliverable-card h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.25rem;
}

.wp-block-group.is-style-mm-deliverable-card p:not(:first-child) {
    margin: 0;
    color: var(--text-body);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- 5. The Stacked Card (Group/Stack Block) --- */

.wp-block-group.is-style-mm-stacked-card {
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius-card); /* Usually 24px */
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Keeps everything aligned to the left */
    gap: 12px; /* Controls spacing between the icon, heading, and text */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect */
.wp-block-group.is-style-mm-stacked-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}

/* Styling the Icon */
.wp-block-group.is-style-mm-stacked-card > p:first-child {
    font-size: 2rem;
    background: var(--alabaster); /* Light Grey background */
    width: 60px;
    height: 60px;
    border-radius: var(--radius-circle); /* Makes it a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    margin-bottom: 8px; /* Gives a little extra breathing room before the heading */
}

/* Heading Styling */
.wp-block-group.is-style-mm-stacked-card h2,
.wp-block-group.is-style-mm-stacked-card h3,
.wp-block-group.is-style-mm-stacked-card h4 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--valhalla);
}

/* Paragraph Text Styling */
.wp-block-group.is-style-mm-stacked-card p:not(:first-child) {
    margin: 0;
    color: var(--text-body);
    font-size: var(--wp--preset--font-size--small);
}

/* --- 4. Tech Note (A special callout style for technical tips or important notes) */
p.is-style-mm-tech-note {
    background-color: #EFEFF5; /* Light Grey */
    color: var(--text-body);
    padding: 24px 30px;
    border-radius: var(--radius-mini);
    font-size: 0.95rem;
    line-height: 1.6;
    border-left: 4px solid var(--valhalla); /* Optional: Navy accent line */
    margin: 30px 0;
    position: relative;
}

p.is-style-mm-tech-note::before {
    /* content: '💡 '; */
    font-weight: 600;
    color: var(--valhalla);
    display: inline;
}

/* --- Core WP Separator Block --- */

hr.wp-block-separator {
    border: none; /* Reset WP's default border styling */
    border-top: 1px solid var(--periwinkle-gray);
    width: 200px; 
    margin-left: auto; /* Centers the line horizontally */
    margin-right: auto; 
    opacity: 1 !important; /* Forces WP to stop greying out the line */
}

hr.wp-block-separator.is-style-wide {
    width: 100%; /* Makes it span the full container */
    border-top: 1px solid var(--periwinkle-gray); /* Maybe a thinner, darker line for wide ones? */
}

hr.wp-block-separator.is-style-dots::before {
    color: var(--mindaro); /* Changes the dot color to your Lime */
}

/* --- Clickable Card Utility --- */

/* 1. The Container (Group Block) */
.clickable-card {
    position: relative; /* Essential: This acts as the anchor for the link */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; /* Shows the hand cursor on the whole card */
}

/* Hover Effect (Optional but recommended) */
.clickable-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

/* 2. The Magic Link Expander */
/* This targets the existing link inside your card (Title or Read More) */
.clickable-card a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Puts the link layer on top of everything */
}

/* 3. Fix for nested links (e.g. Categories) */
/* If you have category links inside the card, we need to lift them ABOVE the stretched link
   so they remain clickable separately. */
.clickable-card .taxonomy-category,
.clickable-card .wp-block-post-terms {
    position: relative;
    z-index: 2; /* Sits on top of the big link */
}

/* Align Center */
.mm-aligncenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Custom Search Block Styling --- */

/* 1. The Container (Acts as the visible "field") */
.wp-block-search__inside-wrapper {
    background-color: var(--white);
    border: 1px solid var(--periwinkle-gray); /* Using your defined border color */
    border-radius: var(--radius-pill); /* Full pill shape */
    padding: 4px; /* Creates a tiny gap between the border and the button */
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Subtle lift */
}

/* Focus State: Highlights the whole container when typing */
.wp-block-search__inside-wrapper:focus-within {
    border-color: var(--perano);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* 2. The Input Field (Transparent & Roomy) */
.wp-block-search__input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 12px 24px !important; /* generous padding as requested */
    color: var(--valhalla);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    width: 100%;
    outline: none !important; /* Handled by focus-within above */
}

/* Placeholder styling */
.wp-block-search__input::placeholder {
    color: var(--manatee);
    opacity: 0.8;
}

/* 3. The Button (Icon Circle) */
.wp-block-search__button {
    background-color: var(--mindaro) !important; /* Your brand Lime */
    color: var(--valhalla) !important;
    border-radius: var(--radius-circle) !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy hover */
    flex-shrink: 0; /* Prevents button from squishing on small screens */
}

/* Button Hover Effect */
.wp-block-search__button:hover {
    background-color: var(--valhalla) !important;
    color: var(--white) !important;
    transform: scale(1.1) rotate(10deg); /* A fun little interaction */
}

/* --- Core WP List Block --- */

/* 1. Unordered Lists (Bullets) */
ul.wp-block-list {
    list-style: none; /* Strips out the default browser dots */
    padding-left: 0;
    margin-bottom: 32px;
}

ul.wp-block-list li {
    position: relative;
    padding-left: 28px; /* Creates space for our custom bullet */
    margin-bottom: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif; 
    color: var(--text-body);
}

/* Custom Soft Blue Bullet */
ul.wp-block-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 8px;
    height: 8px;
    background-color: var(--perano); /* Brand Soft Blue */
    border-radius: var(--radius-circle);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Dev Flex: A subtle interaction when hovering over the list item */
ul.wp-block-list li:hover::before {
    background-color: var(--mindaro); /* Flashes to Lime */
    transform: scale(1.2);
}

/* 2. Ordered Lists (Numbers) */
ol.wp-block-list {
    list-style: none;
    counter-reset: mm-counter; /* Initializes a custom CSS counter */
    padding-left: 0;
    margin-bottom: 32px;
}

ol.wp-block-list li {
    position: relative;
    padding-left: 36px;
    margin-bottom: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-body);
    counter-increment: mm-counter; /* Increments the counter for each item */
}

/* Custom Editorial Numbers */
ol.wp-block-list li::before {
    content: counter(mm-counter) ".";
    position: absolute;
    left: 0;
    top: -2px; /* Slight optical adjustment for the serif font */
    font-family: 'Fraunces', serif; /* Brings the editorial flair back! */
    font-weight: 600;
    color: var(--valhalla); /* Brand Navy */
    font-size: 1.2rem;
}

/* --- Custom Block Styles for Lists --- */

/* Increase left padding to make room for the larger 1.2em custom icons */
ul.wp-block-list.is-style-mm-checkmarks li,
ul.wp-block-list.is-style-mm-crosses li,
ul.wp-block-list.is-style-mm-arrows li {
    padding-left: 40px; 
}

/* Ensure the custom icons are vertically aligned with the 1.7 line height */
ul.wp-block-list.is-style-mm-checkmarks li::before,
ul.wp-block-list.is-style-mm-crosses li::before,
ul.wp-block-list.is-style-mm-arrows li::before {
    border-radius: 0; 
    width: 1.2em; 
    height: 1.2em;
    top: 0.25em; /* This perfectly centers a 1.2em icon inside a 1.7em line-height */
}

/* Base setup for all custom icons to override the default blue circle */
ul.wp-block-list.is-style-mm-checkmarks li::before,
ul.wp-block-list.is-style-mm-crosses li::before,
ul.wp-block-list.is-style-mm-arrows li::before {
    border-radius: 0; 
    width: 1.2em; 
    height: 1.2em;
    top: 0.25em; /* Adjusted slightly for the larger icon size */
}

/* 1. Checkmarks (Mindaro Lime) */
ul.wp-block-list.is-style-mm-checkmarks li::before {
    background-color: var(--mindaro); 
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>') no-repeat center / contain;
}

/* 2. Crosses (Valhalla Navy) */
ul.wp-block-list.is-style-mm-crosses li::before {
    background-color: var(--valhalla); 
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') no-repeat center / contain;
}

/* 3. Arrows (Perano Soft Blue) */
ul.wp-block-list.is-style-mm-arrows li::before {
    background-color: var(--perano); 
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>') no-repeat center / contain;
}

/* --- Core WP Blockquote Styling (Default Style Only) --- */

/* Target all quotes EXCEPT the "Plain" style */
.wp-block-quote:not(.is-style-plain) {
    margin: 48px auto;
    padding: 40px;
    background-color: var(--white);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--radius-card);
    border-left: 6px solid var(--perano);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

/* The Quote Text */
.wp-block-quote:not(.is-style-plain) p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    color: var(--valhalla);
    line-height: 1.4;
    margin-bottom: 20px;
    margin-top: 0;
    font-style: italic;
}

/* The Citation */
.wp-block-quote:not(.is-style-plain) cite {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--text-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-style: normal;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* The Little Lime Dash */
.wp-block-quote:not(.is-style-plain) cite::before {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--mindaro);
    border-radius: 2px;
}

/* --- Plain Quote Style (Just Italic Text, No Box) --- */
.wp-block-quote.is-style-plain p {
    font-style: italic;
}

/* --- Google Calendar Embed Fixes --- */

/* 1. Force the wrapper to center its content */
/* .mm-calendar-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
} */

/* 2. Style the iframe itself */
.mm-calendar-content iframe {
    width: 100% !important;
    min-height: 900px !important; 
    border: none !important;
}

/* On mobile, we might need even more height as the calendar stacks */
@media (max-width: 600px) {
    .mm-calendar-content iframe {
        min-height: 1100px !important;
    }
}

/* --- TEXT HIGHLIGHTS (Dynamic Colors) --- */
.highlight-marker {
    --marker-color: #D5ED75; 
    background: linear-gradient(to top, var(--marker-color) 30%, transparent 35%); 
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.highlight-under { 
    --underline-color: #D5ED75;
    text-decoration: underline; 
    text-decoration-color: var(--underline-color); 
    text-decoration-thickness: 3px; 
    text-underline-offset: 4px; 
}

.highlight-ios {
    --ios-bg: #B2BBFA;
    background-color: var(--ios-bg); 
    color: white; padding: 2px 6px; 
    border-radius: 6px; font-size: 0.85em; 
    vertical-align: middle;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* --- "In a Rush?" Summary Box --- */

.wp-block-group.mm-summary-box {
    background-color: #F4F6FF;
    border-left: 6px solid var(--perano);
    border-radius: var(--radius-mini);
    padding: 32px;
    margin: 40px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.mm-summary-box h2 {
    margin-top: 0;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mm-summary-box ul {
    margin: 0;
    padding-left: 20px;
}

.mm-summary-box li {
    margin-bottom: 8px;
    font-size: var(--wp--preset--font-size--small);
}

/* --- "All Posts" Button Styling --- */

/* 1. Match the Category Pill Style */
.mm-all-posts-btn .wp-block-button__link {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.05) !important; /* Force border override */
    color: var(--text-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 10px rgba(0,0,0,0.01);
    transition: all 0.2s ease;
    text-decoration: none;
}

/* 2. Hover State (Same as categories) */
.mm-all-posts-btn .wp-block-button__link:hover {
    transform: translateY(-2px);
    border-color: var(--perano) !important;
    color: var(--valhalla);
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
    background: var(--white); /* Prevent default button hover colors */
}

/* 3. The "Active" State Magic */
body.blog .mm-all-posts-btn .wp-block-button__link,
body.home .mm-all-posts-btn .wp-block-button__link {
    background: var(--valhalla);
    color: var(--white);
    border-color: var(--valhalla) !important;
    cursor: default; /* Optional: Shows you are already here */
    transform: none; /* remove hover lift on active item */
}

/* 4. Fix Vertical Alignment */
.mm-sticky-filter-bar {
    align-items: center;
}

ul.wp-block-categories-list.mm-category-pills {
    margin-bottom: 0; /* Remove any lingering bottom margin */
}

/* --- Sticky Category Filter Bar --- */

/* 1. The Container (Handles the sticky behavior) */
.mm-sticky-filter-bar {
    position: sticky;
    top: 20px; /* Adjust based on your header height */
    z-index: 900;
    padding: 10px 0 20px 0; /* Extra bottom padding for scroll space */
    margin-bottom: 40px;
    background: transparent; /* Or var(--alabaster) if you need to hide content behind it */
    display: flex;
    justify-content: center;
}

.admin-bar .mm-sticky-filter-bar {
    top: calc(20px + var(--wp-admin--admin-bar--height, 0px));
}

/* 2. The List (Resets the vertical list to a flex row) */
ul.wp-block-categories-list.mm-category-pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* 3. The Pills (Styling the Links) */
ul.wp-block-categories-list.mm-category-pills li {
    margin: 0; /* Remove default list margins */
}

ul.wp-block-categories-list.mm-category-pills li a,
.taxonomy-category.meta-pill a {
    display: inline-block;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.05);
    padding: 10px 24px;
    border-radius: var(--radius-pill); /* Your --radius-pill */
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-body);
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.01);
}

/* Hover State */
ul.wp-block-categories-list.mm-category-pills li a:hover,
.taxonomy-category.meta-pill a:hover {
    transform: translateY(-2px);
    border-color: var(--perano); /* Soft Blue */
    color: var(--valhalla);
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
}

/* 4. Active State (Automatically applied by WP on category pages) */
ul.wp-block-categories-list.mm-category-pills li.current-cat a {
    background: var(--valhalla);
    color: var(--white);
    border-color: var(--valhalla);
}

/* --- 404 Page Custom Styling --- */
.mm-404-container {
        display: flex; 
        justify-content: center; 
        align-items: center; 
        gap: 15px;
        font-family: 'Fraunces', serif; 
        font-weight: 700; 
        font-size: clamp(6rem, 15vw, 10rem); /* Responsive sizing */
        color: var(--valhalla);
        line-height: 1;
        margin-bottom: 40px;
    }

    .mm-zero-wrapper {
        position: relative;
        width: clamp(80px, 12vw, 140px); /* Responsive sizing */
        height: clamp(80px, 12vw, 140px);
        background: var(--white);
        border-radius: var(--radius-circle);
        border: clamp(8px, 1.5vw, 12px) solid var(--valhalla);
        display: flex; 
        justify-content: center; 
        align-items: center;
        overflow: hidden;
    }

    .mm-eye-pupil {
        width: clamp(25px, 4vw, 40px); 
        height: clamp(25px, 4vw, 40px);
        background: var(--mindaro);
        border-radius: var(--radius-circle);
        position: relative;
    }
    
    /* The little white reflection in the eye */
    .mm-eye-pupil::after {
        content: ''; 
        position: absolute; 
        top: 20%; right: 20%; 
        width: 25%; height: 25%; 
        background: white; 
        border-radius: var(--radius-circle);
    }

/* --- Gravity Forms Overrides (Marketing Malone Style) --- */

/* 1. The Form Card Wrapper */
/* Add the class 'mm-form-card' to the Group Block holding the form */
.wp-block-group.mm-form-card {
    background: var(--white);
    padding: 50px;
    border-radius: var(--radius-card);
    box-shadow: 0 20px 60px rgba(50, 44, 66, 0.05);
    border: 1px solid rgba(0,0,0,0.02);
}

/* 2. Inputs & Textareas */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
    width: 100%;
    padding: 16px 20px !important;
    border-radius: var(--radius-mini) !important;
    border: 2px solid #F0F0F5 !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem !important;
    color: var(--valhalla);
    transition: 0.3s;
    background-color: var(--white);
    line-height: 1.5;
}

/* Focus State */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    border-color: var(--perano) !important;
    background: #FDFDFF;
    outline: none;
}

/* 3. Labels */
.gform_wrapper label.gfield_label {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--valhalla);
}

/* 4. The Submit Button */
.gform_wrapper .gform_footer input[type="submit"] {
    background: var(--valhalla) !important;
    color: var(--white) !important;
    width: 100%;
    padding: 18px !important;
    border-radius: var(--radius-pill) !important; /* Pill Shape */
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s transform ease, 0.3s background ease;
    margin-top: 10px;
}

.gform_wrapper .gform_footer input[type="submit"]:hover {
    background: #4A4260 !important;
    transform: translateY(-2px);
}

/* --- Fix Thin Gravity Forms Dropdowns --- */

.gform_wrapper.gravity-theme select {
    /* 1. Strip native browser styling so padding works */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* 2. Match the exact height/padding of your text inputs */
    padding: 16px 20px !important;
    height: auto !important; 
    line-height: 1.5 !important;
    
    /* 3. Re-add the arrow as a background image (Valhalla color) */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23322C42%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 16px !important;
    
    /* 4. Ensure text doesn't overlap the new arrow */
    padding-right: 45px !important;
    
    /* 5. Ensure border/radius matches inputs */
    border-radius: var(--radius-mini) !important;
    border: 2px solid #F0F0F5 !important;
    background-color: var(--white) !important;
    color: var(--valhalla) !important;
}

/* Hover state for the dropdown */
.gform_wrapper.gravity-theme select:hover {
    border-color: var(--perano) !important;
    cursor: pointer;
}

/* Focus state */
.gform_wrapper.gravity-theme select:focus {
    border-color: var(--perano) !important;
    outline: none;
}

/* 5. The "Copy to Clipboard" Email Box */
.mm-copy-box {
    background: #EFEFF5; 
    padding: 12px 16px; 
    border-radius: var(--radius-mini);
    display: flex; justify-content: space-between; align-items: center;
    font-family: monospace; font-size: 0.9rem; color: var(--valhalla);
    cursor: pointer; transition: 0.2s;
    margin-bottom: 20px;
}
.mm-copy-box:hover { background: #E0E0E8; }

/* --- FAQ (Details Block) Styling --- */

/* 1. Base Container */
details.mm-faq-item {
    border-bottom: 1px solid #eee;
    padding: 24px 0;
}

/* 2. The Question (Summary) */
details.mm-faq-item summary {
    font-family: 'Fraunces', serif;
    font-size: 1.2rem;
    color: var(--valhalla);
    cursor: pointer;
    list-style: none; /* Hides default triangle */
    position: relative;
    padding-right: 30px;
}

/* Hide default marker in Safari/Webkit */
details.mm-faq-item summary::-webkit-details-marker {
    display: none;
}

/* 3. Custom Plus Sign */
details.mm-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--text-body);
    transition: transform 0.3s ease;
}

/* Rotate to 'X' when open */
details.mm-faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

/* 4. The Answer */
details.mm-faq-item p {
    margin-top: 16px;
    color: #666;
    font-size: 0.95rem;
    animation: slideDown 0.3s ease;
}

/* --- FIX: Editor UI Jumps (Smart Logic) --- */

/* 1. Float the UI elements so they don't take up physical space */
/* We position them absolute so they float 'over' the layout instead of pushing it */
.block-editor-block-list__block > .components-dropdown,
.block-editor-block-list__block > .block-editor-inserter {
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 99;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}

/* 2. THE MAGIC FIX: Only remove margin if the UI element is at the very START */
/* This prevents the "Top of Page" jump (snapping down) */
.block-editor-block-list__block > .components-dropdown:first-child + *,
.block-editor-block-list__block > .block-editor-inserter:first-child + * {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

/* 3. Handle the "Combo" scenario at the start (Dropdown -> Inserter -> Content) */
.block-editor-block-list__block > .components-dropdown:first-child + .block-editor-inserter + * {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

/* --- Product Card ACF Styles --- */

/* Price Styling */
.prod-price { 
    font-family: var(--wp--preset--font-family--plus-jakarta-sans);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--comet);
    font-weight: 300; 
    margin-top: auto; 
    padding-top: 15px; 
}

/* Action Row Layout */
.prod-actions { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-top: 20px; 
    border-top: 1px solid rgba(50, 44, 66, 0.08); /* Soft line matching your design */
    padding-top: 20px; 
}

/* "Details" Link */
.btn-quick { 
    background: transparent; 
    border: none; 
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    color: var(--wp--preset--color--comet);
    cursor: pointer; 
    transition: 0.2s; 
    text-decoration: none;
}

.btn-quick:hover { 
    color: var(--wp--preset--color--bright-gray);
}

/* "Buy Now" Button */
.btn-buy {
    background: var(--wp--preset--color--mindaro);
    color: var(--wp--preset--color--bright-gray);
    padding: 10px 24px; 
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: var(--wp--preset--font-size--small);
    border: none; 
    cursor: pointer; 
    transition: 0.3s ease; 
    text-decoration: none;
    font-family: var(--wp--preset--font-family--plus-jakarta-sans);
}

.btn-buy:hover { 
    background: var(--valhalla, #322C42); 
    color: var(--white, #FFFFFF); 
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(50, 44, 66, 0.15);
}

/* --- Single Product Styles --- */

/* Sidebar Tag */
.pc-tag {
    font-family: 'Plus Jakarta Sans', sans-serif; 
    font-weight: 300; 
    text-transform: uppercase;
    letter-spacing: 0.1em; 
    color: var(--valhalla, #322C42); 
    background: var(--mindaro, #D5ED75);
    padding: 6px 16px; 
    border-radius: 20px; 
    font-size: var(--wp--preset--font-size--large);
    display: inline-block; 
}

/* Sidebar Excerpt */
.pc-excerpt { 
    font-size: var(--wp--preset--font-size--medium);
    color: var(--text-body)
}

/* Add a line under the price in the sidebar */
.purchase-card .prod-price {
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--comet);
    font-weight: 300;
    margin-bottom: 32px; 
    padding-bottom: 32px; 
    border-bottom: 1px solid rgba(50, 44, 66, 0.08);
}

/* Sidebar Full-Width Checkout Button */
.btn-checkout {
    background-color: var(--wp--preset--color--mindaro);
    color: var(--wp--preset--color--bright-gray);
    padding: 18px; 
    border-radius: var(--radius-pill);
    text-decoration: none; 
    font-weight: 500;
    font-size: var(--wp--preset--font-size--small);
    display: block; 
    text-align: center; 
    width: 100%; 
    transition: 0.3s ease; 
    border: none;
    font-family: var(--wp--preset--font-family--plus-jakarta-sans);
    cursor: pointer;
}

.btn-checkout:hover { 
    background: var(--wp--preset--color--valhalla);
    color: var(--white);
    transform: translateY(-2px); 
    box-shadow: 0 10px 20px rgba(50,44,66,0.15); 
}

/* Mobile Responsiveness for Grid */
@media (max-width: 960px) {
    .wp-block-group[style*="grid-column: span 2"],
    .wp-block-group[style*="grid-column: span 1"] {
        grid-column: span 3 !important; /* Stack columns on mobile */
    }
    .wp-block-group[style*="position:sticky"] {
        position: static !important;
        order: -1; /* Puts the purchase card ABOVE the content on mobile */
        margin-bottom: 40px;
    }
}

/* Sticky Sidebar Fix */
.mm-sticky-sidebar {
    position: sticky !important;
    top: 120px; /* Adjust this if your nav height changes */
    align-self: start; /* The magic bullet that stops Grid stretching */
    z-index: 10;
}

/* --- Success Page Styles --- */

/* Confetti Animation */
.confetti {
    position: absolute; width: 10px; height: 10px; background: var(--mindaro, #D5ED75);
    animation: fall 3s linear forwards; opacity: 0;
}
.c1 { top: -10px; left: 10%; background: var(--perano, #B2BBFA); animation-delay: 0.1s; }
.c2 { top: -10px; left: 30%; background: var(--mindaro, #D5ED75); animation-delay: 0.3s; }
.c3 { top: -10px; left: 60%; background: #FFD166; animation-delay: 0.2s; }
.c4 { top: -10px; left: 80%; background: var(--valhalla, #322C42); animation-delay: 0.5s; }

@keyframes fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(300px) rotate(360deg); opacity: 0; }
}

.icon-wrapper {
    width: 80px; height: 80px; background: var(--mindaro, #D5ED75);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 30px; font-size: 2.5rem; color: var(--valhalla, #322C42);
    box-shadow: 0 10px 20px rgba(213, 237, 117, 0.4);
}

/* Status Tracker */
.tracker {
    display: flex; justify-content: space-between; align-items: center;
    background: #F9F9FB; padding: 20px; border-radius: 20px;
    margin-bottom: 40px; position: relative;
}

.tracker::before {
    content: ''; position: absolute; top: 35px; left: 40px; right: 40px; height: 2px; background: #ddd; z-index: 0;
}

.step { position: relative; z-index: 1; width: 33%; text-align: center; }
.step-dot {
    width: 30px; height: 30px; background: var(--white, #FFFFFF); border: 2px solid #ddd;
    border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #ddd;
}
.step-label { font-size: 0.8rem; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.05em; }

/* Tracker Active States */
.step.done .step-dot { background: var(--mindaro, #D5ED75); border-color: var(--mindaro, #D5ED75); color: var(--valhalla, #322C42); }
.step.done .step-label { color: var(--valhalla, #322C42); }

.step.active .step-dot {
    border-color: var(--perano, #B2BBFA); background: var(--white, #FFFFFF); color: var(--perano, #B2BBFA);
    animation: pulse 2s infinite;
}
.step.active .step-label { color: var(--perano, #B2BBFA); }

@keyframes pulse { 
    0% { box-shadow: 0 0 0 0 rgba(178, 187, 250, 0.4); } 
    70% { box-shadow: 0 0 0 10px rgba(178, 187, 250, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(178, 187, 250, 0); } 
}

@media (max-width: 600px) {
    .success-card { padding: 30px !important; }
    .tracker::before { display: none; }
    .tracker { flex-direction: column; gap: 20px; align-items: flex-start; }
    .step { width: 100%; display: flex; align-items: center; gap: 15px; text-align: left; }
    .step-dot { margin: 0; }
}