/*
 * custom.css — Supplemental styles not covered by theme.json.
 *
 * Rules:
 * - Do not re-declare properties already controlled by theme.json.
 * - Reference design tokens via var(--wp--preset--*) format.
 * - Breakpoint variables: --wp--custom--breakpoints--{mobile|tablet|desktop|wide}
 */

/* ========================================
   Base Styles
   ======================================== */

/* Icon Styles — unified soft-block container */
.cclee-icon {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--border--radius--lg);
	background: var(--wp--preset--color--neutral-100);
	color: var(--wp--preset--color--primary);
	margin-bottom: var(--wp--preset--spacing--30);
	transition: transform var(--wp--custom--transition--normal) var(--wp--custom--easing--default),
	            box-shadow var(--wp--custom--transition--normal) var(--wp--custom--easing--default);
}
.cclee-icon:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.cclee-icon svg {
	width: 24px;
	height: 24px;
	color: inherit;
	transition: transform var(--wp--custom--transition--normal) var(--wp--custom--easing--default);
}
.cclee-icon:hover svg {
	transform: scale(1.08);
}
/* Accent tint variant */
.cclee-icon--accent {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
	color: var(--wp--preset--color--accent);
}
/* Dark background auto-adapt — only colors that are ALWAYS dark across all style variations */
:is(.has-surface-background-color,
    .has-neutral-800-background-color,
    .has-neutral-900-background-color) > :is(.cclee-icon, p .cclee-icon) {
	background: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--contrast);
}
:is(.has-surface-background-color,
    .has-neutral-800-background-color,
    .has-neutral-900-background-color) > :is(.cclee-icon--accent, p .cclee-icon--accent) {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent);
	color: var(--wp--preset--color--accent);
}

/* Skip to content - accessibility */
.skip-to-content-link {
    position: absolute;
    left: -9999px;
}
.skip-to-content-link:focus {
    left: 0;
    top: 0;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
}

/* Hide hamburger icon on mobile, keep menu functional */
.wp-block-navigation__responsive-container .wp-block-navigation__mobile-menu-icon {
    display: none;
}

/* Header height variable (dynamic via JS, fallback for SSR) */
:root {
    --header-height: 68px;
    --admin-bar-height: 0px;
}
.admin-bar {
    --admin-bar-height: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar {
        --admin-bar-height: 46px;
    }
}

/* Site header - sticky */
.site-header {
    position: fixed;
    top: var(--admin-bar-height);
    left: 0;
    right: 0;
    z-index: 100;
    background-color: var(--wp--preset--color--base);
    border-bottom: 1px solid var(--wp--preset--color--neutral-200);
    transition: background-color var(--wp--custom--transition--normal) var(--wp--custom--easing--default),
                box-shadow var(--wp--custom--transition--normal) var(--wp--custom--easing--default),
                backdrop-filter var(--wp--custom--transition--normal) var(--wp--custom--easing--default);
}

/* Header: Scrolled state (frosted glass effect) */
.site-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Header inner container - responsive padding */
.site-header__inner {
    padding-left: var(--wp--preset--spacing--50) !important;
    padding-right: var(--wp--preset--spacing--50) !important;
}

@media (max-width: 782px) {
    .site-header__inner {
        padding-left: var(--wp--preset--spacing--30) !important;
        padding-right: var(--wp--preset--spacing--30) !important;
    }
}

/* Header: Solid variant (for non-hero pages) */
.site-header--solid,
.site-header--centered {
    border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}

.site-header--solid .wp-block-site-title a,
.site-header--solid .wp-block-navigation a,
.site-header--centered .wp-block-site-title a,
.site-header--centered .wp-block-navigation a {
    color: var(--wp--preset--color--primary);
}

/* Header: Transparent variant (for hero pages) */
.site-header--transparent {
    background-color: transparent;
    border-bottom: none;
}

.site-header--transparent .wp-block-site-title a,
.site-header--transparent .wp-block-site-title,
.site-header--transparent .wp-block-navigation__container a,
.site-header--transparent .wp-block-navigation a,
.site-header--transparent .wp-block-navigation .wp-block-navigation-item__content,
.site-header--transparent .wp-block-loginout a {
    color: #ffffff;
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.site-header--transparent .wp-block-site-title a:hover,
.site-header--transparent .wp-block-navigation a:hover,
.site-header--transparent .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header--transparent .wp-block-loginout a:hover {
    color: var(--wp--preset--color--accent);
}

/* Transparent header: scrolled state (frosted glass) */
.site-header--transparent.is-scrolled {
    background-color: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.site-header--transparent.is-scrolled .wp-block-site-title a,
.site-header--transparent.is-scrolled .wp-block-site-title,
.site-header--transparent.is-scrolled .wp-block-navigation__container a,
.site-header--transparent.is-scrolled .wp-block-navigation a,
.site-header--transparent.is-scrolled .wp-block-navigation .wp-block-navigation-item__content,
.site-header--transparent.is-scrolled .wp-block-loginout a {
    color: var(--wp--preset--color--primary);
    text-shadow: none;
}

.site-header--transparent.is-scrolled .wp-block-site-title a:hover,
.site-header--transparent.is-scrolled .wp-block-navigation a:hover,
.site-header--transparent.is-scrolled .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header--transparent.is-scrolled .wp-block-loginout a:hover {
    color: var(--wp--preset--color--accent);
}

/* Header: Centered Logo variant */
.site-header--centered .site-header__inner .alignwide {
    justify-content: center;
}

.site-header--centered .wp-block-site-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Header: Centered Nav variant */
.site-header--nav-center .wp-block-navigation {
    flex: 1;
    justify-content: center;
}

/* Navigation Links - Premium Hover Effect */
.site-header .wp-block-navigation__container {
    gap: 24px;
}

.site-header .wp-block-navigation__container > .wp-block-navigation-item > a,
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    position: relative;
    font-size: 15px;
    letter-spacing: 0.02em;
    padding: 8px 2px;
    text-decoration: none;
    transition: transform var(--wp--custom--transition--fast) var(--wp--custom--easing--default),
                color var(--wp--custom--transition--fast) var(--wp--custom--easing--default);
}

.site-header .wp-block-navigation__container > .wp-block-navigation-item > a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--wp--preset--color--accent);
    transition: width var(--wp--custom--transition--normal) var(--wp--custom--easing--default);
}

.site-header .wp-block-navigation__container > .wp-block-navigation-item > a:hover {
    transform: translateY(-2px);
}

.site-header .wp-block-navigation__container > .wp-block-navigation-item > a:hover::after {
    width: 100%;
}

/* Navigation: Active page indicator */
.site-header .wp-block-navigation__container > .current-menu-item > a::after,
.site-header .wp-block-navigation__container > .current-menu-parent > a::after,
.site-header .wp-block-navigation__container > .current_page_item > a::after {
    width: 100%;
}

.site-header .wp-block-navigation__container > .current-menu-item > a,
.site-header .wp-block-navigation__container > .current-menu-parent > a,
.site-header .wp-block-navigation__container > .current_page_item > a {
    font-weight: 500;
}

/* Header: Search variant */
.cclee-header-search .wp-block-search__button {
    background: transparent;
    border: none;
    padding: 8px;
    color: var(--wp--preset--color--primary);
}

/* Header: Social Icons - Premium Style */
.cclee-header-social {
    gap: var(--wp--preset--spacing--20);
}

.cclee-header-social .wp-block-social-link {
    padding: 10px;
}

.cclee-header-social .wp-block-social-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--wp--preset--color--neutral-500);
    transition: transform var(--wp--custom--transition--fast) var(--wp--custom--easing--default),
                color var(--wp--custom--transition--fast) var(--wp--custom--easing--default);
}

.cclee-header-social .wp-block-social-link a:hover {
    color: var(--wp--preset--color--neutral-700);
    transform: translateY(-2px);
}

/* Transparent header: white social icons */
.site-header--transparent .cclee-header-social .wp-block-social-link a {
    color: rgba(255, 255, 255, 0.85);
}

.site-header--transparent .cclee-header-social .wp-block-social-link a:hover {
    color: rgba(255, 255, 255, 1);
}

.site-header--transparent.is-scrolled .cclee-header-social .wp-block-social-link a {
    color: var(--wp--preset--color--neutral-500);
}

.site-header--transparent.is-scrolled .cclee-header-social .wp-block-social-link a:hover {
    color: var(--wp--preset--color--neutral-700);
}

/* Header: Account Icon */
.cclee-account-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

/* Transparent header: white account icon */
.site-header--transparent .cclee-account-icon a {
    color: rgba(255, 255, 255, 0.9);
}

.site-header--transparent.is-scrolled .cclee-account-icon a {
    color: var(--wp--preset--color--primary);
}

/* Transparent header: white mini-cart icon */
.site-header--transparent .woo-cart-icon,
.site-header--transparent .woo-cart-icon a,
.site-header--transparent .woo-cart-icon svg {
    color: rgba(255, 255, 255, 0.9);
    fill: currentColor;
}

.site-header--transparent.is-scrolled .woo-cart-icon,
.site-header--transparent.is-scrolled .woo-cart-icon a,
.site-header--transparent.is-scrolled .woo-cart-icon svg {
    color: var(--wp--preset--color--primary);
}

/* Transparent header: white hamburger button */
.site-header--transparent .wp-block-navigation__responsive-container-open svg {
    fill: rgba(255, 255, 255, 0.9);
}

.site-header--transparent.is-scrolled .wp-block-navigation__responsive-container-open svg {
    fill: var(--wp--preset--color--primary);
}

/* Site branding: logo + title */
.site-branding {
    gap: 10px;
}
.site-branding .wp-block-site-logo img {
    max-height: 36px;
    width: auto;
}
.site-footer .site-branding .wp-block-site-logo img {
    max-height: 32px;
}

/* Footer: breathing room between brand elements */
.site-footer .wp-block-site-tagline {
    margin-top: var(--wp--preset--spacing--20);
    margin-bottom: 0;
}

/* Header actions group (cart + CTA) */
.site-header__actions {
    gap: 12px;
    align-items: center;
}

/* Hide WooCommerce account icon on desktop (available in mobile menu) */
.site-header .wp-block-woocommerce-customer-account {
    display: none;
}

@media (max-width: 782px) {
    .site-header .wp-block-woocommerce-customer-account {
        display: block;
    }
}

/* Header CTA button */
.cclee-header-cta {
    margin: 0;
}

.cclee-header-cta .wp-block-button__link {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Transparent header: CTA button outline style */
.site-header--transparent .cclee-header-cta .wp-block-button__link {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.site-header--transparent .cclee-header-cta .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}

.site-header--transparent.is-scrolled .cclee-header-cta .wp-block-button__link {
    background: var(--wp--preset--color--accent);
    border: 1px solid var(--wp--preset--color--accent);
    color: var(--wp--preset--color--base);
}

/* Footer: Newsletter variant */
.site-footer--newsletter .wp-block-buttons {
    margin-bottom: var(--wp--preset--spacing--60);
}

/* Footer: Columns variant */
.site-footer--columns .wp-block-columns {
    margin-bottom: var(--wp--preset--spacing--70);
}

.site-footer--columns .wp-block-column h4 {
    margin-bottom: var(--wp--preset--spacing--40);
}

.site-footer--columns .wp-block-navigation a {
    color: var(--wp--preset--color--neutral-400);
    text-decoration: none;
    padding: 6px 0;
    transition: color var(--wp--custom--transition--normal) var(--wp--custom--easing--default);
}

.site-footer--columns .wp-block-navigation a:hover {
    color: var(--wp--preset--color--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cclee-footer-social {
    margin-top: var(--wp--preset--spacing--50);
}

.cclee-footer-social .wp-social-link {
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--wp--preset--color--neutral-700);
    background: transparent;
    transition: background 0.2s ease-out, border-color 0.2s ease-out;
}

.cclee-footer-social .wp-social-link a {
    color: var(--wp--preset--color--neutral-400);
    padding: 0;
}

.cclee-footer-social .wp-social-link:hover {
    background: var(--wp--preset--color--neutral-700);
    border-color: var(--wp--preset--color--neutral-600);
}

.cclee-footer-social .wp-social-link:hover a {
    color: var(--wp--preset--color--neutral-200);
}

/* Footer paragraph links: inherit parent color, no underline */
.site-footer p a {
    color: inherit;
    text-decoration: none;
}
.site-footer p a:hover {
    color: var(--wp--preset--color--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Adjust main content for fixed header */
body:has(.site-header) .wp-site-blocks,
body:has(.site-header) main {
    padding-top: 0;
    margin-top: 0;
}

/* Transparent header: Hero section negative margin for overlay */
body:has(.site-header--transparent) .wp-site-blocks > .alignfull:nth-child(2) {
    margin-top: calc(-1 * var(--header-height) - var(--admin-bar-height)) !important;
    padding-top: calc(var(--wp--preset--spacing--80) + var(--header-height) + var(--admin-bar-height)) !important;
}

/* Hide WooCommerce mini-cart if Woo not active */
body:not(.woocommerce-active) .woo-cart-icon {
    display: none;
}

/* WooCommerce Progress Steps */
.woo-progress-step > .wp-block-group:first-child {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* WooCommerce Trust Badges */
.woo-trust-badges {
    gap: var(--wp--preset--spacing--30);
}
.woo-trust-badge {
    gap: var(--wp--preset--spacing--10);
    align-items: center;
}
.woo-trust-badge p {
    margin: 0;
}

/* Services pattern: bottom border rows */
.cclee-service-row.has-neutral-200-border-color {
    border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}

/* WooCommerce Sticky Sidebar */
.cclee-sticky-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--admin-bar-height) + var(--wp--preset--spacing--30));
}

/* Maintenance & Coming Soon Pages */
body.page-template-maintenance .wp-block-group.has-primary-background-color,
body.page-template-coming-soon .wp-block-group.has-primary-background-color {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Countdown Timer Boxes */
.cclee-countdown-box,
.wp-block-group.has-surface-background-color:has(.has-accent-color) {
    min-width: 80px;
    text-align: center;
    border-radius: var(--wp--custom--border--radius--lg);
}

body.page-template-coming-soon .wp-block-button__link.has-accent-background-color {
    border-radius: var(--wp--custom--border--radius--md);
}

/* ========================================
   Block Styles
   ======================================== */

/* Button: Outline */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid currentColor;
    color: currentColor;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: currentColor;
    color: var(--wp--preset--color--base);
}

/* Dark background auto-adapt for outline buttons */
:is(.has-surface-background-color,
    .has-neutral-800-background-color,
    .has-neutral-900-background-color,
    .has-primary-background-color,
    [class*="has-hero-gradient-background"],
    .has-accent-gradient-background) .wp-block-button.is-style-outline .wp-block-button__link {
    border-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--contrast);
}
:is(.has-surface-background-color,
    .has-neutral-800-background-color,
    .has-neutral-900-background-color,
    .has-primary-background-color,
    [class*="has-hero-gradient-background"],
    .has-accent-gradient-background) .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--primary);
}

/* Group: Card */
.wp-block-group.is-style-card {
    background-color: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--neutral-200);
    border-radius: 12px;
    padding: var(--wp--preset--spacing--40);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Separator: Thick */
.wp-block-separator.is-style-thick {
    height: 3px;
    background-color: var(--wp--preset--color--accent);
    border: none;
}

/* Quote: Accent Border */
.wp-block-quote.is-style-accent-border {
    border-left: 4px solid var(--wp--preset--color--accent);
    padding-left: var(--wp--preset--spacing--40);
    border-top: none;
    border-right: none;
    border-bottom: none;
}
.wp-block-quote.is-style-accent-border cite {
    font-style: normal;
    color: var(--wp--preset--color--neutral-500);
}

/* Image: Rounded */
.wp-block-image.is-style-rounded img {
    border-radius: var(--wp--custom--border--radius--lg);
}

/* Image: Shadow */
.wp-block-image.is-style-shadow img {
    box-shadow: var(--wp--preset--shadow--card);
    border-radius: var(--wp--custom--border--radius--md);
}

/* List: Checkmark */
.wp-block-list.is-style-checkmark {
    list-style: none;
    padding-left: 0;
}
.wp-block-list.is-style-checkmark li {
    position: relative;
    padding-left: 1.5em;
}
.wp-block-list.is-style-checkmark li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--wp--preset--color--accent);
    font-weight: 700;
}
.wp-block-list.is-style-checkmark li::marker {
    content: none;
}

/* Pricing Cards */
.wp-block-columns .wp-block-column .wp-block-group.has-accent-background-color {
    position: relative;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: scale(1.02);
    z-index: 1;
}

/* ========================================
   Pattern-Specific Styles
   ======================================== */

/* CTA Banner: Inner group z-index for pattern overlay */
.cta-inner-group {
    position: relative;
    z-index: 1;
}

/* CTA Banner: Button glow */
.cta-button .wp-block-button__link {
    box-shadow: var(--wp--preset--shadow--glow);
}
.cta-button .wp-block-button__link:hover {
    box-shadow: 0 0 30px color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent),
                var(--wp--preset--shadow--md);
}

/* Pricing: Month suffix style */
.pricing-mo {
    font-size: var(--wp--preset--font-size--medium);
    opacity: 0.8;
}

/* Timeline: Fixed circle dot */
.wp-block-group.cclee-timeline-dot {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    flex-shrink: 0 !important;
    aspect-ratio: unset !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 0 !important;
}

.wp-block-group.cclee-timeline-dot p {
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    overflow: visible !important;
}

.wp-block-columns .wp-block-column:has(.cclee-timeline-dot) {
    flex-shrink: 0 !important;
    flex-basis: 100px !important;
    width: 100px !important;
}

/* Features Grid: Card style for columns */
.is-pattern-pricing .wp-block-column > .wp-block-group,
.wp-block-columns.is-style-cards .wp-block-column > .wp-block-group {
    height: 100%;
    transition: transform var(--wp--custom--transition--normal) var(--wp--custom--easing--default),
                box-shadow var(--wp--custom--transition--normal) var(--wp--custom--easing--default);
}
.wp-block-columns.is-style-cards .wp-block-column > .wp-block-group:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Testimonial Cards: Quote decoration */
.wp-block-columns .wp-block-column .wp-block-group.has-base-background-color .wp-block-quote {
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
}
.wp-block-columns .wp-block-column .wp-block-group.has-base-background-color .wp-block-quote::before {
    content: '"';
    position: absolute;
    top: -0.3em;
    left: -0.1em;
    font-size: 4rem;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--wp--preset--color--accent);
    opacity: 0.2;
    line-height: 1;
    pointer-events: none;
}
.wp-block-columns .wp-block-column .wp-block-group.has-base-background-color .wp-block-quote p {
    font-style: italic;
    position: relative;
    z-index: 1;
}

/* ========================================
   Responsive Breakpoints
   ======================================== */

/* Mobile: < 640px */
@media screen and (max-width: 639px) {
    /* Columns: stack on mobile */
    .wp-block-columns {
        flex-direction: column;
        gap: var(--wp--preset--spacing--40);
    }
    .wp-block-column {
        flex-basis: 100% !important;
    }

    /* Headings: scale down */
    h1, .has-h-1-font-size {
        font-size: var(--wp--preset--font-size--xx-large) !important;
    }
    h2, .has-h-2-font-size {
        font-size: var(--wp--preset--font-size--x-large) !important;
    }

    /* Hero: reduce padding */
    [class*="hero"] .wp-block-group {
        padding-top: var(--wp--preset--spacing--50) !important;
        padding-bottom: var(--wp--preset--spacing--50) !important;
    }

    /* Buttons: full width on mobile */
    .wp-block-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .wp-block-button {
        width: 100%;
    }
    .wp-block-button .wp-block-button__link {
        text-align: center;
    }
}

/* Tablet: 640px - 1023px */
@media screen and (min-width: 640px) and (max-width: 1023px) {
    /* 4-column layouts (team): become 2x2 */
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: calc(50% - var(--wp--preset--spacing--30)) !important;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:nth-child(even) {
        margin-left: var(--wp--preset--spacing--30);
    }

    /* 2-column layouts (contact): maintain side by side */
    .wp-block-columns.has-2-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: calc(50% - var(--wp--preset--spacing--40)) !important;
    }
}

/* Desktop: 1024px - 1279px */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    /* Standard desktop - no special overrides */
}

/* Wide: >= 1280px */
@media screen and (min-width: 1280px) {
    /* Wide screens - full layout */
}

/* ========================================
   Interactive States
   ======================================== */

/* Card hover effect */
.wp-block-group.is-style-card,
.wp-block-columns .wp-block-column > .wp-block-group:not(.cclee-timeline-dot) {
    transition: transform var(--wp--custom--transition--normal) var(--wp--custom--easing--default),
                box-shadow var(--wp--custom--transition--normal) var(--wp--custom--easing--default);
}
.wp-block-group.is-style-card:hover,
.wp-block-columns .wp-block-column > .wp-block-group:not(.cclee-timeline-dot):hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* Reset hover for inner groups inside post template cards — only the outer card should lift */
.wp-block-post-template .wp-block-columns .wp-block-column > .wp-block-group {
    transition: none;
}
.wp-block-post-template .wp-block-columns .wp-block-column > .wp-block-group:hover {
    transform: none;
    box-shadow: none;
}

/* Reset hover for sidebar widget groups — informational, not interactive cards */
.wp-block-columns .wp-block-column > .wp-block-group.has-neutral-200-border-color {
    transition: none;
}
.wp-block-columns .wp-block-column > .wp-block-group.has-neutral-200-border-color:hover {
    transform: none;
    box-shadow: none;
}

/* Reset hover for single post title/nav groups — informational, not interactive cards */
#main .wp-block-columns .wp-block-column > .wp-block-group {
    transition: none;
}
#main .wp-block-columns .wp-block-column > .wp-block-group:hover {
    transform: none;
    box-shadow: none;
}

/* Reset hover for contact info rows — informational, not interactive cards */
.wp-block-columns .wp-block-column > .wp-block-group:has(.cclee-contact-icon) {
    transition: none;
}
.wp-block-columns .wp-block-column > .wp-block-group:has(.cclee-contact-icon):hover {
    transform: none;
    box-shadow: none;
}

/* Reset hover for footer groups — titles are informational, not interactive cards */
.site-footer .wp-block-columns .wp-block-column > .wp-block-group {
    transition: none;
}
.site-footer .wp-block-columns .wp-block-column > .wp-block-group:hover {
    transform: none;
    box-shadow: none;
}

/* Blog list card (outer bordered group) — hover lift + shadow */
.wp-block-post-template .wp-block-group.has-border-color {
    transition:
        transform var(--wp--custom--transition--normal) var(--wp--custom--easing--default),
        box-shadow var(--wp--custom--transition--normal) var(--wp--custom--easing--default);
}
.wp-block-post-template .wp-block-group.has-border-color:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* Blog list card image — subtle zoom on hover */
.wp-block-post-template .wp-block-post-featured-image img {
    transition: transform var(--wp--custom--transition--slow) var(--wp--custom--easing--default);
}
.wp-block-post-template .wp-block-group.has-border-color:hover .wp-block-post-featured-image img {
    transform: scale(1.03);
}

/* Button transitions */
.wp-block-button__link {
    transition: all var(--wp--custom--transition--normal) var(--wp--custom--easing--default);
    position: relative;
    overflow: hidden;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: var(--wp--preset--shadow--md);
}
.wp-block-button__link:active {
    transform: translateY(0) scale(0.98);
    box-shadow: var(--wp--preset--shadow--sm);
}

/* Button ripple effect */
.wp-block-button__link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}
.wp-block-button__link:active::after {
    width: 200%;
    height: 200%;
}

/* ========================================
   Link System — Underline Rules
   ========================================

   Three categories of links:

   1. Content links (paragraphs, lists, comments):
      Always underlined, color changes on hover.
      Defined globally in theme.json styles.elements.link.

   2. Title/Navigation links (nav, breadcrumbs, post titles,
      footer nav, sidebar, landing links):
      No underline by default; underline appears on hover.
      Overridden here with text-decoration: none.

   3. Interactive links (buttons, product cards, tags):
      No underline ever; feedback via color/shadow/movement.
      Handled in their component-specific rules.
   ======================================== */

/* Global link transition */
a {
    transition: color var(--wp--custom--transition--fast) var(--wp--custom--easing--default);
}

/* Content links: refine global underline from theme.json */
a[href]:not(.wp-element-button):not(.wp-block-button__link):not(.button) {
    text-underline-offset: 2px;
}

/* Post title links: no underline */
.wp-block-post-title a,
.wp-block-post-title a:hover {
    text-decoration: none;
}

/* ========================================
   Avatar & Icon Components
   ======================================== */

/* Avatar with initials - replaces emoji placeholders */
.cclee-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    background: linear-gradient(135deg, var(--wp--preset--color--neutral-200) 0%, var(--wp--preset--color--neutral-300) 100%);
    color: var(--wp--preset--color--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cclee-avatar--lg {
    width: 80px;
    height: 80px;
    font-size: 1.75rem;
}

.cclee-avatar--md {
    width: 48px;
    height: 48px;
    font-size: 1rem;
}

.cclee-avatar--sm {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.cclee-avatar--accent {
    background: var(--wp--preset--gradient--accent);
    color: var(--wp--preset--color--base);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
}

.cclee-avatar--ring {
    box-shadow: 0 0 0 3px var(--wp--preset--color--base), 0 0 0 5px var(--wp--preset--color--accent);
}

/* Icon container with background — unified with .cclee-icon */
.wp-block-html:has(.cclee-icon-box) {
    display: flex;
}

.cclee-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 14px;
    border-radius: var(--wp--custom--border--radius--lg);
    background: linear-gradient(135deg, var(--wp--preset--color--neutral-100) 0%, var(--wp--preset--color--neutral-200) 100%);
    color: var(--wp--preset--color--primary);
    transition: transform var(--wp--custom--transition--normal) var(--wp--custom--easing--default),
                box-shadow var(--wp--custom--transition--normal) var(--wp--custom--easing--default);
}

.cclee-icon-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.cclee-icon-box svg {
    width: 24px;
    height: 24px;
    color: inherit;
}
/* Accent tint variant for icon-box */
.cclee-icon-box--accent {
    background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
    color: var(--wp--preset--color--accent);
}
/* Dark background auto-adapt for icon-box — only always-dark colors */
:is(.has-surface-background-color,
    .has-neutral-800-background-color,
    .has-neutral-900-background-color) > :is(.cclee-icon-box, p .cclee-icon-box) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--wp--preset--color--contrast);
}
:is(.has-surface-background-color,
    .has-neutral-800-background-color,
    .has-neutral-900-background-color) > :is(.cclee-icon-box--accent, p .cclee-icon-box--accent) {
    background: color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent);
    color: var(--wp--preset--color--accent);
}

/* Contact icon wrapper — smaller variant, same color system */
.cclee-contact-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wp--custom--border--radius--md);
    background: var(--wp--preset--color--neutral-100);
    color: var(--wp--preset--color--primary);
    flex-shrink: 0;
}

.cclee-contact-icon svg {
    width: 20px;
    height: 20px;
    color: inherit;
}
/* Dark background auto-adapt for contact icons — only always-dark colors */
:is(.has-surface-background-color,
    .has-neutral-800-background-color,
    .has-neutral-900-background-color) > :is(.cclee-contact-icon, p .cclee-contact-icon) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--wp--preset--color--contrast);
}

/* Maintenance page icon — large display variant */
.cclee-maintenance-icon {
    display: flex;
    justify-content: center;
}
.cclee-maintenance-icon svg {
    width: 64px;
    height: 64px;
    color: var(--wp--preset--color--accent);
}

/* ========================================
   Decorative Elements
   ======================================== */

/* Hero background decoration */
.cclee-hero-deco {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    pointer-events: none;
}

.cclee-hero-deco--1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -100px;
    background: var(--wp--preset--color--base);
}

.cclee-hero-deco--2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: 10%;
    background: var(--wp--preset--color--base);
}

/* Dot pattern overlay */
.cclee-dots-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.08;
    pointer-events: none;
}

/* Grid pattern overlay */
.cclee-grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.05;
    pointer-events: none;
}

/* ========================================
   Glassmorphism
   ======================================== */

.cclee-glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.cclee-glass--dark {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
   Timeline Enhancement
   ======================================== */

/* Timeline connector line */
.cclee-timeline-item {
    position: relative;
}

.cclee-timeline-item::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 80px;
    bottom: -40px;
    width: 2px;
    background: linear-gradient(to bottom, var(--wp--preset--color--neutral-200) 0%, transparent 100%);
}

.cclee-timeline-item:last-child::before {
    display: none;
}

/* ========================================
   Stats Enhancement
   ======================================== */

/* Stats cards: fill column width for even alignment */
.is-not-stacked-on-mobile > .wp-block-column > .wp-block-group {
    width: 100%;
    box-sizing: border-box;
}

.cclee-stat-number {
    background: linear-gradient(135deg, currentColor 0%, var(--wp--preset--color--neutral-200) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   Entrance Animations
   ======================================== */

@keyframes cclee-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cclee-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cclee-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.cclee-animate-fade-in-up {
    animation: cclee-fadeInUp 0.6s var(--wp--custom--easing--default) forwards;
}

.cclee-animate-fade-in {
    animation: cclee-fadeIn 0.5s var(--wp--custom--easing--default) forwards;
}

.cclee-animate-scale-in {
    animation: cclee-scaleIn 0.4s var(--wp--custom--easing--default) forwards;
}

/* Staggered animation delays */
.cclee-animate-delay-1 { animation-delay: 0.1s; }
.cclee-animate-delay-2 { animation-delay: 0.2s; }
.cclee-animate-delay-3 { animation-delay: 0.3s; }
.cclee-animate-delay-4 { animation-delay: 0.4s; }

/* ========================================
   Price Gradient Text
   ======================================== */

.cclee-price-gradient {
    background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   Logo Cloud Enhancement
   ======================================== */

.cclee-logo-item {
    transition: transform var(--wp--custom--transition--normal) var(--wp--custom--easing--default),
                opacity var(--wp--custom--transition--normal) var(--wp--custom--easing--default);
    opacity: 0.6;
}

.cclee-logo-item:hover {
    transform: scale(1.05);
    opacity: 1;
}

/* ========================================
   Portfolio Card
   ======================================== */

/* Portfolio Card Hover Effect */
.cclee-portfolio-card {
    transition: box-shadow var(--wp--custom--transition--normal);
}
.cclee-portfolio-card:hover {
    box-shadow: var(--wp--preset--shadow--lg);
}
.cclee-portfolio-card img {
    transition: transform var(--wp--custom--transition--normal);
}
.cclee-portfolio-card:hover img {
    transform: scale(1.02);
}

/* ========================================
   Landing Page Styles
   ======================================== */

/* Landing Nav */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--wp--preset--color--neutral-100);
}

.landing-exit-link a {
    color: var(--wp--preset--color--neutral-500);
    text-decoration: none;
    transition: color var(--wp--custom--transition--fast);
}

.landing-exit-link a:hover {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Landing Footer */
.landing-footer a {
    color: var(--wp--preset--color--neutral-500);
    text-decoration: none;
    transition: color var(--wp--custom--transition--fast);
}

.landing-footer a:hover {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Landing Video Container */
.landing-video-container {
    position: relative;
    overflow: hidden;
}

.landing-video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.landing-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* Landing Countdown */
.landing-countdown-item {
    text-align: center;
}

.landing-countdown-number {
    font-family: var(--wp--preset--font-family--heading);
}

/* Landing Trust Logo */
.landing-trust-logo img {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all var(--wp--custom--transition--normal);
}

.landing-trust-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Landing Form */
.cclee-landing-form input:focus,
.cclee-landing-form textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
}

.cclee-landing-form button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.cclee-landing-form button:active {
    transform: translateY(0);
}

/* Landing Mobile Responsive */
@media screen and (max-width: 768px) {
    .landing-countdown-item {
        padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) !important;
    }

    .landing-countdown-number {
        font-size: 2rem !important;
    }

    .landing-nav {
        padding-left: var(--wp--preset--spacing--30) !important;
        padding-right: var(--wp--preset--spacing--30) !important;
    }
}

/* ========================================
   Mobile Bottom Navigation
   ======================================== */

.cclee-mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: none;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0 env(safe-area-inset-bottom, 8px);
    background: var(--wp--preset--color--base);
    border-top: 1px solid var(--wp--preset--color--neutral-200);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

/* Show only on mobile */
@media screen and (max-width: 768px) {
    .cclee-mobile-bottom-nav {
        display: flex;
    }

    /* Add bottom padding to body for mobile nav */
    body:has(.cclee-mobile-bottom-nav) {
        padding-bottom: 70px;
    }
}

.cclee-mobile-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--wp--preset--color--neutral-600);
    text-decoration: none;
    font-size: 11px;
    transition: color 0.2s;
    padding: 4px 12px;
    min-width: 60px;
}

.cclee-mobile-bottom-nav__item:hover,
.cclee-mobile-bottom-nav__item:focus {
    color: var(--wp--preset--color--accent);
}

.cclee-mobile-bottom-nav__item svg {
    width: 22px;
    height: 22px;
}

.cclee-mobile-bottom-nav__item--cart {
    position: relative;
}

.cclee-mobile-bottom-nav__cart-count {
    position: absolute;
    top: -4px;
    right: 4px;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--base);
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: none; /* Hidden by default, shown via JS */
    align-items: center;
    justify-content: center;
}

.cclee-mobile-bottom-nav__cart-count.is-visible {
    display: flex;
}

.cclee-mobile-bottom-nav__item--active {
    color: var(--wp--preset--color--accent);
}

/* ========================================
   Decorative Pattern Classes
   ======================================== */

.has-dots-pattern {
    position: relative;
}
.has-dots-pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.08;
    pointer-events: none;
    z-index: -1;
}

.has-grid-pattern {
    position: relative;
}
.has-grid-pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
}

/* ========================================
   Pattern Layout Utility Classes
   Replaces inline styles in Pattern files.
   ======================================== */

/* Section Padding */
.cclee-section--py-70 {
    padding-top: var(--wp--preset--spacing--70);
    padding-bottom: var(--wp--preset--spacing--70);
}
.cclee-section--py-80 {
    padding-top: var(--wp--preset--spacing--80);
    padding-bottom: var(--wp--preset--spacing--80);
}
.cclee-section--py-60 {
    padding-top: var(--wp--preset--spacing--60);
    padding-bottom: var(--wp--preset--spacing--60);
}
.cclee-section--py-50 {
    padding-top: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--50);
}

/* Card/Box Padding */
.cclee-box--p-30 {
    padding: var(--wp--preset--spacing--30);
}
.cclee-box--p-40 {
    padding: var(--wp--preset--spacing--40);
}
.cclee-box--p-50 {
    padding: var(--wp--preset--spacing--50);
}
.cclee-box--px-40-py-30 {
    padding-top: var(--wp--preset--spacing--30);
    padding-right: var(--wp--preset--spacing--40);
    padding-bottom: var(--wp--preset--spacing--30);
    padding-left: var(--wp--preset--spacing--40);
}
.cclee-box--px-50-py-40 {
    padding-top: var(--wp--preset--spacing--40);
    padding-right: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--40);
    padding-left: var(--wp--preset--spacing--50);
}
.cclee-box--px-40-py-50 {
    padding-top: var(--wp--preset--spacing--50);
    padding-right: var(--wp--preset--spacing--40);
    padding-bottom: var(--wp--preset--spacing--50);
    padding-left: var(--wp--preset--spacing--40);
}

/* Margin Utilities */
.cclee-mt-20 { margin-top: var(--wp--preset--spacing--20); }
.cclee-mt-30 { margin-top: var(--wp--preset--spacing--30); }
.cclee-mt-40 { margin-top: var(--wp--preset--spacing--40); }
.cclee-mt-50 { margin-top: var(--wp--preset--spacing--50); }
.cclee-mt-60 { margin-top: var(--wp--preset--spacing--60); }

.cclee-mb-20 { margin-bottom: var(--wp--preset--spacing--20); }
.cclee-mb-30 { margin-bottom: var(--wp--preset--spacing--30); }
.cclee-mb-40 { margin-bottom: var(--wp--preset--spacing--40); }
.cclee-mb-50 { margin-bottom: var(--wp--preset--spacing--50); }
.cclee-mb-60 { margin-bottom: var(--wp--preset--spacing--60); }

/* Border Radius */
.cclee-radius--sm { border-radius: 4px; }
.cclee-radius--md { border-radius: 8px; }
.cclee-radius--lg { border-radius: 12px; }
.cclee-radius--xl { border-radius: 16px; }
.cclee-radius--full { border-radius: 50px; }
.cclee-radius--circle { border-radius: 50%; }

/* Card Style */
.cclee-card {
    border-width: 1px;
    border-style: solid;
    border-radius: 12px;
    padding: var(--wp--preset--spacing--40);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.cclee-card--bordered {
    border-width: 1px;
    border-style: solid;
    border-radius: 12px;
}

/* Typography */
.cclee-text--uppercase {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.cclee-text--badge {
    font-weight: 700;
    letter-spacing: 0.05em;
}
.cclee-text--label {
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.cclee-text--italic {
    font-style: italic;
}

/* Column Width */
.cclee-col--50 { flex-basis: 50%; }
.cclee-col--60 { flex-basis: 60%; }
.cclee-col--40 { flex-basis: 40%; }

/* Flex Utilities */
.cclee-flex--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cclee-flex--row-center {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--10);
}

/* Shadow Utilities */
.cclee-shadow--card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.cclee-shadow--elevated {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.cclee-shadow--lg {
    box-shadow: var(--wp--preset--shadow--lg);
}

/* Form Card (Hero with Form pattern) */
.cclee-form-card {
    border-radius: 12px;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Column utilities */
.cclee-col--60-pr {
    flex-basis: 60%;
    padding-right: var(--wp--preset--spacing--60);
}
.cclee-col--40 {
    flex-basis: 40%;
}

/* Columns container with top padding */
.cclee-columns--pt-40 {
    padding-top: var(--wp--preset--spacing--40);
}

/* Additional utility classes */
.cclee-radius--md {
    border-radius: 8px;
}

.cclee-text--label {
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Spacing helpers */
.cclee-mt-40 { margin-top: var(--wp--preset--spacing--40); }
.cclee-mb-40 { margin-bottom: var(--wp--preset--spacing--40); }
.cclee-mb-50 { margin-bottom: var(--wp--preset--spacing--50); }

/* Overflow Utility */
.cclee-overflow-hidden {
    overflow: hidden;
}

/* Hero Simple: Content max-width */
.cclee-hero-content {
    max-width: 640px;
}

/* Single: Comments margin-top */
.wp-block-comments {
    margin-top: var(--wp--preset--spacing--60);
}

/* ===== Check List (Pricing) ===== */
.cclee-check-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.cclee-check-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
}
.cclee-check-list li svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--wp--preset--color--accent);
}

/* ===== Star Rating (Testimonial) ===== */
.cclee-stars {
	display: flex;
	gap: 2px;
}
.cclee-stars svg {
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--accent);
	fill: var(--wp--preset--color--accent);
}

/* ===== FAQ Chevron ===== */
.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
	padding-right: var(--wp--preset--spacing--20);
}
.wp-block-details summary::-webkit-details-marker {
	display: none;
}
.wp-block-details summary::after {
	content: '';
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.2s ease-out;
}
.wp-block-details[open] summary::after {
	transform: rotate(180deg);
}

/* ===== Social Links (Team) ===== */
.cclee-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--wp--preset--color--neutral-400);
	transition: color 0.2s ease, background-color 0.2s ease;
}
.cclee-social-link:hover {
	color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--neutral-100);
}
.cclee-social-link svg {
	width: 16px;
	height: 16px;
}

/* ========================================
   Product Cards — micro-interaction specs from ui-ux.md
   ======================================== */

/* Grid spacing — breathing room: elements >= 16px apart */
.cclee-products-wrapper.is-view-grid .wp-block-post-template {
	gap: var(--wp--preset--spacing--50);
}

/* Product image — fill card width */
.cclee-products-wrapper .wp-block-post-template .wp-block-post-featured-image {
	width: 100%;
	aspect-ratio: 1/1;
	overflow: hidden;
}
.cclee-products-wrapper .wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Card hover — translateY(-4px) + shadow deepen */
.cclee-products-wrapper .wp-block-post-template .wp-block-group.cclee-overflow-hidden {
	transition:
		transform var(--wp--custom--transition--normal) var(--wp--custom--easing--default),
		box-shadow var(--wp--custom--transition--normal) var(--wp--custom--easing--default);
}
.cclee-products-wrapper .wp-block-post-template .wp-block-group.cclee-overflow-hidden:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--elevated);
}

/* Image hover — scale(1.03), clipped by cclee-overflow-hidden */
.cclee-products-wrapper .wp-block-post-featured-image img {
	transition: transform var(--wp--custom--transition--slow) var(--wp--custom--easing--default);
}
.cclee-products-wrapper .wp-block-group.cclee-overflow-hidden:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* ========================================
   Blog Card Hover Effects
   ======================================== */

/* Blog card — smooth lift + shadow on hover */
.wp-block-query .wp-block-post-template .wp-block-group.cclee-overflow-hidden {
	transition:
		transform var(--wp--custom--transition--normal) var(--wp--custom--easing--default),
		box-shadow var(--wp--custom--transition--normal) var(--wp--custom--easing--default);
}
.wp-block-query .wp-block-post-template .wp-block-group.cclee-overflow-hidden:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* Blog card image — subtle zoom on hover */
.wp-block-query .wp-block-post-template .cclee-overflow-hidden .wp-block-post-featured-image img {
	transition: transform var(--wp--custom--transition--slow) var(--wp--custom--easing--default);
}
.wp-block-query .wp-block-post-template .cclee-overflow-hidden:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* Blog card title — color transition */
.wp-block-query .wp-block-post-template .wp-block-post-title a {
	transition: color var(--wp--custom--transition--fast) var(--wp--custom--easing--default);
}

/* Add to Cart button — hover darken + lift */
.cclee-products-wrapper .wp-block-button.wp-block-woocommerce-product-button .wp-element-button {
	transition:
		transform var(--wp--custom--transition--fast) var(--wp--custom--easing--default),
		box-shadow var(--wp--custom--transition--fast) var(--wp--custom--easing--default);
}
.cclee-products-wrapper .wp-block-button.wp-block-woocommerce-product-button .wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
}