/*
Theme Name: CustomFit Theme
Theme URI: http://customfit.ro/
Author: Antigravity
Author URI: http://customfit.ro/
Description: A modern, glassmorphism-based WooCommerce theme inspired by our admin dashboard. Ready for WordPress 7 and WooCommerce 10.5.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: customfit
Tags: woocommerce, modern, glassmorphism, tailwindcss, dark-mode
*/

/* 
 * Very basic resets to prevent WordPress/WooCommerce default styles 
 * from destroying our Tailwind layouts before Tailwind kicks in.
 */

body.woocommerce-page,
body.woocommerce {
    background-color: var(--cf-body-bg);
    color: var(--cf-text-base);
    letter-spacing: 0.02em;
    /* Global tracking increase */
}

/* High-End Typography Overrides */
h1,
h2,
h3,
h4,
h5,
h6,
.cf-display-font {
    letter-spacing: 0.05em !important;
}

/* Hide default WooCommerce messages if we style our own, or at least make them dark */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border-top-color: #3b82f6 !important;
    color: white !important;
    border-radius: 1rem;
    padding: 1rem 1.5rem !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.woocommerce-error {
    border-top-color: #ef4444 !important;
}

.woocommerce-info {
    border-top-color: #10b981 !important;
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
}

/* Fix stupid floating issues with default woo */
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt {
    background-color: #3b82f6;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    border-radius: 1rem;
    padding: 1rem 2rem;
    font-weight: 800;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover {
    background-color: #2563eb;
    color: #fff;
}

/* Force smaller single product title and description */
h1.cf-single-product-title {
    font-size: 1.5rem !important;
    /* Slightly smaller on mobile */
    line-height: 1.2 !important;
}

div.cf-single-product-description {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
}

@media (min-width: 768px) {
    h1.cf-single-product-title {
        font-size: 1.6rem !important;
    }

    div.cf-single-product-description {
        font-size: 0.9rem !important;
    }
}

/* Ascunde destinatia de livrare (ex: "Shipping to Bucuresti") din totalul cosului */
tr.woocommerce-shipping-totals p.woocommerce-shipping-destination {
    display: none !important;
}

/* Ascunde header-ul de "Shipping" / "Shipment 1" de e pe stanga in cos */
tr.woocommerce-shipping-totals th {
    display: none !important;
}

/* Evidentiere buton X (Stergere produs) din pagina de Cart - Inversat pentru contrast */
.cf-cart-item-remove a,
.woocommerce a.remove,
.woocommerce-cart table.cart td.product-remove a.remove,
.woocommerce table.shop_table a.remove {
    color: white !important;
    background: #ef4444 !important;
    /* Red-500 solid */
    font-weight: 900 !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    opacity: 0.9 !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important;
    border: none !important;
}

.cf-cart-item-remove a:hover,
.woocommerce a.remove:hover,
.woocommerce-cart table.cart td.product-remove a.remove:hover,
.woocommerce table.shop_table a.remove:hover {
    color: white !important;
    background: #dc2626 !important;
    /* Red-600 la hover */
    opacity: 1 !important;
    transform: scale(1.15) !important;
}

/* ─── EXTRACTED FROM header.php ──────────────────────────── */

/* Custom scrollbar for webkit */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Glass effect utilities */
.glass {
    background: var(--cf-surface-2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--cf-surface-3);
}

/* Hide scrollbar for clean UI but allow scroll */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Essential WooCommerce resets to match Tailwind */
.woocommerce form .form-row {
    padding: 3px;
    margin: 0 0 6px;
}

.woocommerce form .form-row [type="email"],
.woocommerce form .form-row [type="number"],
.woocommerce form .form-row [type="password"],
.woocommerce form .form-row [type="search"],
.woocommerce form .form-row [type="tel"],
.woocommerce form .form-row [type="text"],
.woocommerce form .form-row [type="url"],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    width: 100%;
}

/* Add basic image responsiveness for Woo */
.woocommerce img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Page transition overlay — covers page on load, fades out when ready */
#cf-page-enter {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

#cf-page-enter.cf-fade-out {
    opacity: 0;
}

/* Loading spinner keyframe */
@keyframes cf-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ─── EXTRACTED FROM functions.php — Page Title Hide ─────── */
header.entry-header,
.page-header,
.entry-header,
h1.entry-title,
.single-page-header,
.page-title,
.elementor-page-title,
.hfeed .hentry .entry-title {
    display: none !important;
}

/* ─── EXTRACTED FROM functions.php — Phone Hint ──────────── */
.cf-phone-hint {
    font-size: 0.72rem;
    margin-top: 0.3rem;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    display: none;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.cf-phone-hint.warning {
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
    display: block;
}

.cf-phone-hint.info {
    background: rgba(219, 187, 117, 0.08);
    color: var(--cf-logo-color, #dbbb75);
    border: 1px solid rgba(219, 187, 117, 0.25);
    display: block;
}

/* ─── EXTRACTED FROM functions.php — Cookie Banner ───────── */
.cky-consent-bar .cky-title,
.cky-consent-bar .cky-notice-des,
.cky-consent-bar .cky-notice-des p {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.cky-notice-btn-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    flex-direction: row !important;
}

.cky-btn-customize,
[data-cky-tag="detail-button"],
.cky-btn-reject,
[data-cky-tag="reject-button"] {
    flex: 1 1 45% !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    margin: 0 !important;
}

.cky-btn-accept,
[data-cky-tag="accept-button"] {
    flex: 1 1 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.cky-revisit-bottom-left,
.cky-revisit-bottom-right,
[data-cky-tag="revisit-consent"],
.cky-revisit-hide {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ─── EXTRACTED FROM class-customfit-300-hero-widget.php ──── */
.cf-hw-hero {
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: #fff;
    margin-bottom: 4rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.cf-hw-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cf-hw-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 0 20px;
    animation: cfHwFadeIn 1.5s ease;
}

.cf-hw-title {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 4.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #fff;
}

.cf-hw-subtitle {
    font-family: var(--font-body, 'Space Grotesk', sans-serif);
    font-size: 1.25rem;
    font-weight: 300;
    margin-bottom: 2.5rem;
    color: rgba(255, 255, 255, 0.8);
}

.cf-hw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    background-color: var(--cf-logo-color, #dbbb75);
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.85rem;
    font-weight: 800;
    border-radius: 99px;
    transition: all 0.4s ease;
    border: 1px solid var(--cf-logo-color, #dbbb75);
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-body, 'Space Grotesk', sans-serif);
}

.cf-hw-btn:hover {
    background-color: transparent;
    color: var(--cf-logo-color, #dbbb75);
}

@keyframes cfHwFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@media (max-width: 1024px) {
    .cf-hw-title {
        font-size: 3.5rem;
    }
}

@media (max-width: 768px) {
    .cf-hw-title {
        font-size: 2.8rem;
    }
}

/* ─── EXTRACTED FROM class-customfit-301-trust-bar-widget.php ── */
.cf-301-trust-bar {
    display: flex;
    justify-content: space-around;
    padding: 2rem 5%;
    background-color: var(--cf-surface-1, #1a1a1a);
    border-top: 1px solid var(--cf-border, rgba(255, 255, 255, 0.08));
    border-bottom: 1px solid var(--cf-border, rgba(255, 255, 255, 0.08));
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 6rem;
}

.cf-301-trust-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cf-301-trust-item svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: var(--cf-logo-color, #dbbb75);
    stroke-width: 1.5;
}

.cf-301-trust-text {
    font-family: var(--font-body, 'Space Grotesk', sans-serif);
}

.cf-301-trust-text h4 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cf-301-trust-text p {
    font-size: 0.8rem;
    color: var(--cf-text-muted, #999);
    margin: 0;
}

@media (max-width: 768px) {
    .cf-301-trust-bar {
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem 10%;
    }
}

/* ─── EXTRACTED FROM class-customfit-302-collections-widget.php ── */
.cf-302-collections {
    padding: 4rem 5%;
    text-align: center;
    margin-bottom: 4rem;
    font-family: var(--font-body, 'Space Grotesk', sans-serif);
    color: var(--cf-text-base);
}

.cf-302-section-title {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 2.5rem;
    margin-bottom: 5px;
    color: var(--cf-text-base);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cf-302-section-subtitle {
    font-size: 1rem;
    color: var(--cf-text-muted, #999);
    margin-bottom: 50px;
    font-weight: 400;
}

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

.cf-302-card {
    position: relative;
    height: 60vh;
    min-height: 400px;
    overflow: hidden;
    border-radius: var(--border-radius-lg, 1.25rem);
    border: 1px solid var(--cf-border, rgba(255, 255, 255, 0.08));
    text-align: left;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    text-decoration: none;
}

.cf-302-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

.cf-302-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.cf-302-card:hover .cf-302-image {
    transform: scale(1.05);
}

.cf-302-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.2) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
}

.cf-302-card-title {
    color: #fff;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 2.2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem 0;
    line-height: 1.1;
}

.cf-302-card-subtitle {
    font-size: 0.8rem;
    color: var(--cf-logo-color, #dbbb75);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    margin: 0;
}

@media (max-width: 1024px) {
    .cf-302-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cf-302-grid {
        grid-template-columns: 1fr;
    }

    .cf-302-card {
        height: 400px;
    }
}

/* ─── EXTRACTED FROM class-customfit-303-trending-widget.php ── */
.cf-303-trending {
    padding: 4rem 5%;
    background-color: var(--cf-surface-1, #1a1a1a);
    border-top: 1px solid var(--cf-border, rgba(255, 255, 255, 0.08));
    font-family: var(--font-body, 'Space Grotesk', sans-serif);
    color: #fff;
}

.cf-303-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.cf-303-title {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 2.5rem;
    margin-bottom: 0;
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cf-303-view-all {
    color: var(--cf-text-muted, #999);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--cf-logo-color, #dbbb75);
    text-decoration: none;
    padding-bottom: 2px;
    transition: color 0.3s ease;
}

.cf-303-view-all:hover {
    color: #fff;
}

.cf-303-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.cf-303-card {
    position: relative;
    border-radius: var(--border-radius-lg, 1.25rem);
    overflow: hidden;
    border: 1px solid var(--cf-border, rgba(255, 255, 255, 0.08));
    display: block;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    aspect-ratio: 3/4;
    background: var(--cf-surface-3, #2a2a2a);
}

.cf-303-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
}

.cf-303-card-bg {
    position: absolute;
    inset: 0;
}

.cf-303-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.cf-303-card:hover .cf-303-card-bg img {
    transform: scale(1.06);
}

.cf-303-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
}

.cf-303-card-content {
    position: absolute;
    inset: 0;
    padding: 1.5rem;
    pointer-events: none;
}

.cf-303-prop-title {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.4rem;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.1;
    max-width: 80%;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    margin: 0;
}

.cf-303-prop-price {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--cf-logo-color, #dbbb75);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.cf-303-prop-badge-nou {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    background: var(--cf-logo-color, #dbbb75);
    color: black;
    padding: 0.35rem 0.75rem;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

@media (max-width: 1024px) {
    .cf-303-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cf-303-grid {
        grid-template-columns: 1fr;
    }

    .cf-303-card {
        height: 450px;
    }
}

/* ─── EXTRACTED FROM class-customfit-304-story-widget.php ─── */
.cf-304-story-section {
    display: flex;
    align-items: center;
    padding: 8rem 5%;
    gap: 4rem;
    max-width: 1400px;
    margin: 0 auto;
    font-family: var(--font-body, 'Space Grotesk', sans-serif);
    color: var(--cf-text-base);
}

.cf-304-story-content {
    flex: 1;
}

.cf-304-story-title {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    color: var(--cf-text-base);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.cf-304-story-desc {
    font-size: 1.1rem;
    color: var(--cf-text-light, rgba(255, 255, 255, 0.6));
    margin-bottom: 2rem;
    font-weight: 300;
}

.cf-304-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    background-color: transparent;
    color: var(--cf-text-base);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.85rem;
    font-weight: 800;
    border-radius: 99px;
    transition: all 0.4s ease;
    border: 1px solid var(--cf-surface-3);
    cursor: pointer;
    text-decoration: none;
}

.cf-304-btn-outline:hover {
    background-color: #fff;
    color: #000;
    border-color: #fff;
}

.cf-304-story-image {
    flex: 1;
    border-radius: var(--border-radius-lg, 1.25rem);
    overflow: hidden;
    border: 1px solid var(--cf-border, rgba(255, 255, 255, 0.08));
}

.cf-304-story-image img {
    width: 100%;
    height: auto;
    transform: scale(1);
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.cf-304-story-image:hover img {
    transform: scale(1.03);
}

@media (max-width: 1024px) {
    .cf-304-story-section {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .cf-304-story-title {
        font-size: 2.5rem;
    }

    .cf-304-story-section {
        padding: 4rem 5%;
    }
}

/* ─── EXTRACTED FROM class-customfit-305-footer-widget.php ── */
.cf-305-footer {
    position: relative;
    background: linear-gradient(to bottom, var(--cf-surface-1, #0f0f0f), #000000);
    color: #fff;
    padding: 6rem 5% 3rem;
    border-top: 1px solid var(--cf-border, rgba(255, 255, 255, 0.05));
    font-family: var(--font-body, 'Space Grotesk', sans-serif);
    margin-top: auto;
    overflow: hidden;
}

/* Subtle glow effect behind the footer */
.cf-305-footer::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 50vw;
    height: 100px;
    background: var(--cf-logo-color, #dbbb75);
    filter: blur(120px);
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}

.cf-305-footer-grid,
.cf-305-bottom {
    position: relative;
    z-index: 1;
}

.cf-305-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
    margin: 0 auto 4rem;
    max-width: 100%;
}

/* Brand title with gradient text */
.cf-305-brand h3 {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 1.2rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cf-305-brand-desc {
    color: var(--cf-text-light, rgba(255, 255, 255, 0.5));
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 90%;
    font-weight: 300;
}

/* Pill-shaped Glass Newsletter Input */
.cf-305-newsletter {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    padding: 0.35rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
    max-width: 400px;
}

.cf-305-newsletter:focus-within {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.cf-305-newsletter input {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0.75rem 1.2rem;
    flex: 1;
    outline: none;
    font-family: var(--font-body, 'Space Grotesk', sans-serif);
    font-size: 0.9rem;
    width: 100%;
}

.cf-305-newsletter input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.cf-305-newsletter button {
    background: var(--cf-logo-color, #dbbb75);
    color: #000;
    border: none;
    cursor: pointer;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    padding: 0.8rem 1.5rem;
    border-radius: 99px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cf-305-newsletter button:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(219, 187, 117, 0.4);
    background: #fff;
}

/* Links Section */
.cf-305-links h4 {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cf-305-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cf-305-links li {
    margin-bottom: 1rem;
}

.cf-305-links a {
    color: var(--cf-text-light, rgba(255, 255, 255, 0.45));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-block;
    position: relative;
}

/* Underline animation on hover */
.cf-305-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

.cf-305-links a:hover {
    color: #ffffff;
    transform: translateX(4px);
}

.cf-305-links a:hover::after {
    width: 100%;
}

/* Bottom Bar */
.cf-305-bottom {
    border-top: 1px solid var(--cf-border, rgba(255, 255, 255, 0.05));
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--cf-text-muted, #777);
    max-width: 100%;
    margin: 0 auto;
}

/* Elegant Social Buttons */
.cf-305-socials {
    display: flex;
    gap: 15px;
    font-size: 1.1rem;
}

.cf-305-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.02);
    color: var(--cf-text-muted, #999);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.cf-305-socials a:hover {
    background: var(--cf-logo-color, #dbbb75);
    color: #000;
    border-color: var(--cf-logo-color, #dbbb75);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(219, 187, 117, 0.3);
}

.cf-305-legal a {
    margin-left: 20px;
    color: var(--cf-text-muted, #777);
    text-decoration: none;
    transition: color 0.3s ease;
}

.cf-305-legal a:hover {
    color: #fff;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .cf-305-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .cf-305-footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .cf-305-brand-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .cf-305-newsletter {
        margin-left: auto;
        margin-right: auto;
    }

    .cf-305-footer::before {
        height: 150px;
        width: 100vw;
    }

    .cf-305-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .cf-305-socials {
        justify-content: center;
    }

    .cf-305-legal a {
        margin: 0 10px;
    }
}

/* ─── EXTRACTED FROM page.php ──────────────────────────────── */
.content-styles {
    color: var(--cf-text-muted);
    line-height: 1.8;
    font-size: 1.125rem;
}

.content-styles h2 {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin: 2.5rem 0 1.5rem;
    line-height: 1.2;
}

.content-styles h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 2rem 0 1rem;
}

.content-styles h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin: 1.5rem 0 1rem;
}

.content-styles p {
    margin-bottom: 1.5rem;
}

.content-styles ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.content-styles ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.content-styles li {
    margin-bottom: 0.5rem;
}

.content-styles a {
    color: var(--cf-logo-color);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    border-bottom: 1px solid transparent;
}

.content-styles a:hover {
    color: var(--cf-text-muted);
    border-bottom-color: var(--cf-text-muted);
}

.content-styles blockquote {
    border-left: 4px solid var(--cf-btn-bg);
    padding: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--cf-text-muted);
    background: var(--cf-surface-1);
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.content-styles img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    margin: 2rem 0;
}

.content-styles pre {
    background: var(--cf-surface-3);
    padding: 1.5rem;
    border-radius: 1rem;
    overflow-x: auto;
    margin: 2rem 0;
    border: 1px solid var(--cf-surface-2);
}

.content-styles code {
    font-family: monospace;
    background: var(--cf-surface-2);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    color: var(--cf-logo-color);
}

/* ---EXTRACTED FROM woocommerce/cart/cart.php--- */
/* ─── CART PAGE — PREMIUM PRODUCT-CARD STYLE ─────────── */
.cf-cart,
.cf-cart * {
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif;
    box-sizing: border-box;
}

/* ─── CART ITEMS LIST ─────────────────────────────────── */
.cf-cart-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cf-cart-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.75rem;
}

.cf-cart-item:last-child {
    border-bottom: none;
}

.cf-cart-item:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateX(4px);
}

/* Thumbnail — proportional, not 1:1 */
.cf-cart-item-thumb {
    width: 72px;
    min-height: 90px;
    border-radius: 0.75rem;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.cf-cart-item-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cf-cart-item-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Product Info */
.cf-cart-item-info {
    flex: 1;
    min-width: 0;
}

.cf-cart-item-name {
    color: white;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
    letter-spacing: 0.02em;
}

.cf-cart-item-name:hover {
    color: var(--cf-logo-color);
}

.cf-cart-item-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.cf-cart-item-meta .cf-badge-mto {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.12rem 0.45rem;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #34d399;
    font-size: 0.48rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

/* Quantity */
.cf-cart-item-qty {
    flex-shrink: 0;
}

.cf-cart-item-qty .quantity {
    display: flex;
    align-items: center;
}

.cf-cart-item-qty input.qty {
    width: 2.8rem !important;
    text-align: center !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: white !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    padding: 0.35rem 0.2rem !important;
    border-radius: 0.5rem !important;
    outline: none !important;
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif !important;
    backdrop-filter: blur(4px);
}

.cf-cart-item-qty input.qty:focus {
    border-color: var(--cf-logo-color) !important;
    box-shadow: 0 0 0 2px rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.12) !important;
}

/* Price */
.cf-cart-item-price {
    flex-shrink: 0;
    text-align: right;
    min-width: 75px;
}

.cf-cart-item-price .cf-price-value {
    color: var(--cf-logo-color);
    font-size: 0.85rem;
    font-weight: 800;
}

.cf-cart-item-price .cf-price-regular {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none !important;
    margin-right: 0.15rem;
}

/* X drawn over regular price — matching single product page */
.cf-cart-item-price .cf-price-regular::before,
.cf-cart-item-price .cf-price-regular::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: 2px;
    background-color: currentColor;
    transform-origin: center;
    opacity: 0.8;
    border-radius: 2px;
}

.cf-cart-item-price .cf-price-regular::before {
    transform: translateY(-50%) rotate(18deg);
}

.cf-cart-item-price .cf-price-regular::after {
    transform: translateY(-50%) rotate(-18deg);
}

.cf-cart-item-price .cf-price-unit {
    display: block;
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.48rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.1rem;
}

.cf-cart-item-price .cf-price-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

/* Savings Badge */
.cf-savings-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 0.75rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.15);
    margin-top: 1rem;
    text-align: center;
}

.cf-savings-badge .cf-savings-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #34d399;
}

.cf-savings-badge .cf-savings-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.65rem;
    font-weight: 600;
}

.cf-savings-badge .cf-savings-amount {
    color: #34d399;
    font-weight: 900;
    font-size: 0.85rem;
}

/* Remove Button */
.cf-cart-item-remove a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: white;
    background: #ef4444;
    /* Solid Red-500 */
    border: none;
    transition: all 0.3s;
    flex-shrink: 0;
}

.cf-cart-item-remove a:hover {
    color: white;
    background: #dc2626;
    /* Hover Red-600 */
    transform: scale(1.15);
}

/* ─── ACTIONS ROW ────────────────────────────────────── */
.cf-cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cf-cart-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cf-cart-coupon {
    display: flex;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.cf-cart-coupon input {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: white !important;
    font-size: 0.75rem !important;
    padding: 0.55rem 0.75rem !important;
    border-radius: 0.6rem !important;
    outline: none !important;
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif !important;
    transition: border-color 0.25s !important;
    backdrop-filter: blur(4px);
}

.cf-cart-coupon input:focus {
    border-color: var(--cf-logo-color) !important;
}

.cf-cart-coupon input::placeholder {
    color: rgba(255, 255, 255, 0.18) !important;
    font-size: 0.7rem !important;
}

.cf-cart-coupon button {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0.6rem !important;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif !important;
}

.cf-cart-coupon button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: white !important;
}

.cf-cart-update-btn button {
    background: none !important;
    color: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 9999px !important;
    padding: 0.35rem 0.85rem !important;
    font-size: 0.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif !important;
}

.cf-cart-update-btn button:hover {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ─── CART TOTALS ────────────────────────────────────── */
.cf-cart-totals-section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cf-cart-totals-section .cart_totals {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.cf-cart-totals-section h2 {
    display: none !important;
}

.cf-cart-totals-section .shop_table {
    background: none !important;
    border: none !important;
    border-collapse: collapse !important;
}

.cf-cart-totals-section .shop_table th {
    background: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.4rem 0 !important;
}

.cf-cart-totals-section .shop_table td {
    background: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.4rem 0 !important;
    text-align: right !important;
}

.cf-cart-totals-section .shop_table .order-total th {
    color: white !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
}

.cf-cart-totals-section .shop_table .order-total td {
    color: var(--cf-logo-color) !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
}

/* ─── PROCEED TO CHECKOUT BUTTON ─────────────────────── */
.cf-checkout-btn-wrapper {
    margin-top: 1.25rem;
}

.cf-checkout-btn-wrapper .wc-proceed-to-checkout {
    padding: 0;
}

.cf-checkout-btn-wrapper .checkout-button,
.cf-checkout-cta {
    width: 100% !important;
    padding: 1rem 2rem !important;
    border: none !important;
    border-radius: 0.75rem !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: linear-gradient(135deg, var(--cf-btn-bg), var(--cf-btn-grad)) !important;
    color: white !important;
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}

.cf-checkout-btn-wrapper .checkout-button:hover,
.cf-checkout-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.4) !important;
    filter: brightness(1.1) !important;
}

.cf-checkout-btn-wrapper .checkout-button::after {
    content: "→";
    font-size: 1.1rem;
    transition: transform 0.3s;
}

.cf-checkout-btn-wrapper .checkout-button:hover::after {
    transform: translateX(4px);
}

/* ─── CTA SUBLABEL ───────────────────────────────────── */
.cf-cta-sublabel {
    text-align: center;
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 0.65rem;
}

/* ─── TRUST CARDS GRID ───────────────────────────────── */
.cf-cart-trust-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 600px) {
    .cf-cart-trust-cards {
        grid-template-columns: 1fr;
    }
}

.cf-trust-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1rem;
    cursor: default;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s;
}

.cf-trust-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
}

.cf-trust-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cf-trust-card-bg img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.18;
    filter: grayscale(1);
    transition: all 0.7s ease-out;
}

.cf-trust-card:hover .cf-trust-card-bg img {
    opacity: 0.32;
    filter: grayscale(0);
    transform: scale(1.08);
}

.cf-trust-card-bg .cf-trust-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%);
}

.cf-trust-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.cf-trust-card-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    backdrop-filter: blur(8px);
}

.cf-trust-card-heading {
    color: white;
    font-size: 1.15rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.cf-trust-card-desc {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.5;
    max-width: 220px;
}

.cf-trust-stars {
    display: flex;
    gap: 0.2rem;
}

.cf-trust-stars svg {
    width: 14px;
    height: 14px;
    color: #facc15;
    fill: currentColor;
    filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.4));
}

/* ─── NLP REASSURANCE SECTION ────────────────────────── */
.cf-cart-reassurance {
    margin-top: 2rem;
    padding: 1.75rem;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.cf-cart-reassurance-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cf-cart-reassurance-bg img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.12;
    filter: grayscale(1);
}

.cf-cart-reassurance-bg .cf-reassurance-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.8) 100%);
}

.cf-cart-reassurance-content {
    position: relative;
    z-index: 2;
}

/* ─── HIDE DEFAULT WOO STUFF ─────────────────────────── */
.cf-cart .woocommerce-cart-form>.shop_table {
    display: none !important;
}

/* Hide default WooCommerce Proceed to checkout from cart_totals */
.cf-cart-totals-section .wc-proceed-to-checkout {
    display: none !important;
}

.cf-cart-totals-section .cart_totals>h2 {
    display: none !important;
}

/* Hide cross-sells (handled separately if needed) */
.cf-cart .cross-sells {
    display: none !important;
}

/* WooCommerce notice overrides */
.cf-cart .woocommerce-message,
.cf-cart .woocommerce-info,
.cf-cart .woocommerce-error {
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif !important;
    font-size: 0.72rem !important;
    border-radius: 0.6rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-top: 3px solid var(--cf-logo-color) !important;
    border-left: none !important;
    margin-bottom: 0.75rem !important;
    padding: 0.85rem 1.25rem !important;
}

.cf-cart .woocommerce-message::before,
.cf-cart .woocommerce-info::before {
    color: var(--cf-logo-color) !important;
}

.cf-cart .woocommerce-message a,
.cf-cart .woocommerce-info a {
    color: var(--cf-logo-color) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.3) !important;
    transition: all 0.2s !important;
}

.cf-cart .woocommerce-message a:hover,
.cf-cart .woocommerce-info a:hover {
    border-bottom-color: var(--cf-logo-color) !important;
}

.cf-cart .woocommerce-error {
    border-top-color: #f87171 !important;
}

.cf-cart .woocommerce-error::before {
    color: #f87171 !important;
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 640px) {
    .cf-cart-item {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 0.6rem;
        padding: 0.85rem 0;
    }

    .cf-cart-item-thumb {
        width: 52px;
        min-height: 68px;
    }

    .cf-cart-item-info {
        flex: 1;
        min-width: 0;
    }

    .cf-cart-item-qty input.qty {
        width: 2.2rem !important;
        font-size: 0.7rem !important;
        padding: 0.25rem 0.15rem !important;
    }

    .cf-cart-item-price {
        min-width: 55px;
    }

    .cf-cart-item-price .cf-price-value {
        font-size: 0.75rem;
    }

    .cf-cart-item-remove a {
        width: 22px;
        height: 22px;
    }

    /* Smaller coupon on mobile */
    .cf-cart-coupon {
        gap: 0.3rem;
    }

    .cf-cart-coupon input {
        font-size: 0.65rem !important;
        padding: 0.4rem 0.5rem !important;
    }

    .cf-cart-coupon input::placeholder {
        font-size: 0.6rem !important;
    }

    .cf-cart-coupon button {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.5rem !important;
    }

    .cf-cart-update-btn button {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.45rem !important;
    }

    .cf-cart-reassurance {
        padding: 1.25rem 0.75rem;
    }

    .cf-cart-trust-cards {
        grid-template-columns: 1fr;
    }
}

/* ─── EMPTY CART ──────────────────────────────────────── */
.cf-cart-empty {
    text-align: center;
    padding: 3rem 1.5rem;
}

.cf-cart-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.06);
    border: 2px solid rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--cf-logo-color);
}

.cf-cart-empty-title {
    color: white;
    font-size: 1.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.cf-cart-empty-subtitle {
    color: var(--cf-logo-color);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
}

.cf-cart-empty-msg {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-weight: 400;
    max-width: 360px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.cf-cart-empty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--cf-btn-bg), var(--cf-btn-grad));
    color: white;
    font-size: 0.85rem;
    font-weight: 800;
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3);
}

.cf-cart-empty-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.4);
    filter: brightness(1.1);
    color: white;
}

.cf-cart-empty-btn::after {
    content: "→";
    font-size: 1.1rem;
    transition: transform 0.3s;
}

.cf-cart-empty-btn:hover::after {
    transform: translateX(4px);
}

/* Recommended products in empty cart */
.cf-empty-recs {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cf-empty-recs-title {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
}

.cf-empty-recs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

@media (max-width: 600px) {
    .cf-empty-recs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cf-empty-rec-item {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: block;
}

.cf-empty-rec-item:hover {
    border-color: rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.3);
}

.cf-empty-rec-item img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
    filter: brightness(0.85);
    transition: all 0.4s;
    border-radius: 0.75rem;
}

.cf-empty-rec-item:hover img {
    filter: brightness(1);
    transform: scale(1.05);
}

/* CUSTOM FIT ultra big text background */
.cf-cart-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif;
    font-size: 8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.025);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

@media (max-width: 600px) {
    .cf-cart-watermark {
        font-size: 4rem;
    }
}

/* Hide "added to cart" message on the cart page */
.cf-cart .woocommerce-message .added_to_cart,
.woocommerce-cart .woocommerce-message:has(.added_to_cart) {
    display: none !important;
}

/* ─── FULL-WIDTH NLP CARD ─────────────────────────────── */
.cf-cart-nlp-full {
    grid-column: 1 / -1;
    min-height: 180px;
}

/* ---EXTRACTED FROM woocommerce/checkout/form-checkout.php--- */
/* ─── MULTI-STEP CHECKOUT STYLES ──────────────────────── */
.cf-checkout,
.cf-checkout * {
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif;
    box-sizing: border-box;
}

/* ─── PRODUCT SUMMARY (compact, below button) ─────────── */
.cf-checkout-summary {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cf-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.cf-summary-item-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1;
}

.cf-summary-item-name {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-summary-item-name .cf-qty {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 0.2rem;
}

.cf-badge-mto {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #34d399;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    flex-shrink: 0;
}

.cf-summary-item-price {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.cf-price-regular {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.62rem;
    font-weight: 500;
    text-decoration: line-through;
}

.cf-price-current {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    font-weight: 600;
}

.cf-price-current.cf-on-sale {
    color: #34d399;
}

.cf-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 0.15rem;
}

.cf-summary-total-label {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-left: auto;
    margin-right: 0.5rem;
}

.cf-summary-total-value {
    color: var(--cf-logo-color);
    font-size: 1.05rem;
    font-weight: 900;
}

/* ─── STEP HEADER ROW (title left, dots right) ───────── */
.cf-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cf-step-header .cf-step-indicator {
    margin-bottom: 0;
    flex-shrink: 0;
    order: 2;
}

.cf-step-header .cf-step-title {
    margin-bottom: 0;
    text-align: left;
    order: 1;
}

@media (max-width: 420px) {
    .cf-step-header {
        flex-direction: column;
        gap: 0.4rem;
    }

    .cf-step-header .cf-step-title {
        text-align: center;
        order: 1;
    }

    .cf-step-header .cf-step-indicator {
        order: 2;
    }
}

/* ─── STEP INDICATOR ─────────────────────────────────── */
.cf-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 0.75rem;
}

.cf-step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: default;
}

.cf-step-dot.active {
    background: var(--cf-logo-color);
    border-color: var(--cf-logo-color);
    box-shadow: 0 0 12px rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.35);
    transform: scale(1.15);
}

.cf-step-dot.completed {
    background: rgba(16, 185, 129, 0.6);
    border-color: rgba(16, 185, 129, 0.8);
}

.cf-step-line {
    width: 30px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.4s;
}

.cf-step-line.completed {
    background: rgba(16, 185, 129, 0.4);
}

/* ─── STEP PANELS ────────────────────────────────────── */
.cf-step-panel {
    display: none;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.cf-step-panel.active {
    display: block;
}

.cf-step-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── STEP TITLE ─────────────────────────────────────── */
.cf-step-title {
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 0.85rem;
    padding-bottom: 0;
    border-bottom: none;
    text-align: center;
}

.cf-step-title.cf-step-title-large {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.cf-step-subtitle {
    display: block;
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin-top: 0.2rem;
    text-transform: none;
}

/* ─── LABELS ─────────────────────────────────────────── */
.cf-checkout label {
    display: block;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 0.4rem !important;
}

.cf-checkout label .required {
    color: var(--cf-logo-color) !important;
}

/* ─── FORM ROWS ──────────────────────────────────────── */
.cf-checkout .form-row {
    margin-bottom: 0.85rem !important;
}

.cf-checkout .woocommerce-input-wrapper {
    display: block;
}

/* ─── INPUTS ─────────────────────────────────────────── */
.cf-checkout input[type="text"],
.cf-checkout input[type="email"],
.cf-checkout input[type="tel"],
.cf-checkout input[type="password"],
.cf-checkout input[type="number"],
.cf-checkout select,
.cf-checkout textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: white !important;
    font-size: 0.95rem !important;
    padding: 0.85rem 1rem !important;
    border-radius: 0.75rem !important;
    transition: border-color 0.25s, box-shadow 0.25s;
    outline: none !important;
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif !important;
    backdrop-filter: blur(4px);
}

.cf-checkout input:focus,
.cf-checkout select:focus,
.cf-checkout textarea:focus {
    border-color: var(--cf-logo-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.12) !important;
}

.cf-checkout input::placeholder,
.cf-checkout textarea::placeholder {
    color: rgba(255, 255, 255, 0.18) !important;
    font-size: 0.85rem !important;
}

.cf-checkout textarea {
    min-height: 100px;
    resize: vertical;
}

/* ─── NEXT / ACTION BUTTON ───────────────────────────── */
.cf-step-btn {
    width: 100%;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.75rem;
    font-size: 0.85rem;
    font-weight: 800;
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--cf-btn-bg, linear-gradient(135deg, #d4a017, #f5c842));
    color: var(--cf-btn-text, #000);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    position: relative;
    overflow: hidden;
}

.cf-step-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.4);
    filter: brightness(1.1);
}

.cf-step-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    filter: none !important;
}

.cf-step-btn .cf-btn-arrow {
    transition: transform 0.3s;
    font-size: 1.1rem;
}

.cf-step-btn:hover .cf-btn-arrow {
    transform: translateX(4px);
}

/* ─── SKIP LINK ──────────────────────────────────────── */
.cf-step-skip {
    display: block;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 0.75rem;
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif;
}

.cf-step-skip:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* ─── VALIDATION ─────────────────────────────────────── */
.cf-checkout .cf-field-error input,
.cf-checkout .cf-field-error textarea {
    border-color: rgba(239, 68, 68, 0.5) !important;
    animation: cf-shake 0.4s ease;
}

.cf-field-error-msg {
    color: rgba(239, 68, 68, 0.8);
    font-size: 0.65rem;
    font-weight: 600;
    margin-top: 0.3rem;
    letter-spacing: 0.05em;
}

@keyframes cf-shake {

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

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

/* ─── SUCCESS STATE ──────────────────────────────────── */
.cf-checkout-success {
    text-align: center;
    padding: 2rem 0;
}

.cf-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: #34d399;
}

.cf-success-title {
    color: white;
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.cf-success-msg {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    font-weight: 500;
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ─── SPINNER ─────────────────────────────────────────── */
.cf-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: cf-spin 0.6s linear infinite;
}

@keyframes cf-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ─── LOADING OVERLAY ────────────────────────────────── */
.cf-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.cf-loading-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ─── SELECT2 ────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0.75rem !important;
    height: 46px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: white !important;
    line-height: 44px !important;
    padding-left: 1rem !important;
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif !important;
    font-size: 0.95rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
}

.select2-dropdown {
    background: var(--cf-surface-1) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0.6rem !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
}

.select2-container--default .select2-results__option {
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    padding: 0.55rem 0.9rem !important;
    font-size: 0.8rem !important;
}

.select2-container--default .select2-results__option--highlighted {
    background: var(--cf-surface-3) !important;
    color: white !important;
}

/* ─── NOTICES ────────────────────────────────────────── */
.woocommerce-NoticeGroup,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    border-radius: 0.6rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-top-color: var(--cf-logo-color) !important;
}

/* Hide the default WooCommerce "added to cart" notice on checkout */
.woocommerce-checkout .woocommerce-message {
    display: none !important;
}

.woocommerce-info a,
.woocommerce-message a {
    color: var(--cf-logo-color) !important;
}

/* ─── COMPACT VIEW CART LINK ─────────────────────────── */
.cf-summary-view-cart {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: all 0.2s;
    padding: 0.25rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    white-space: nowrap;
}

.cf-summary-view-cart:hover {
    color: var(--cf-logo-color);
    border-color: rgba(var(--cf-logo-color-rgb, 255, 210, 80), 0.3);
}

.cf-summary-view-cart svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* ─── TRUST CARDS (Product-Card Style) ─────────────── */
.cf-trust-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 540px) {
    .cf-trust-cards {
        grid-template-columns: 1fr;
    }
}

.cf-trust-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1rem;
    cursor: default;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s;
}

.cf-trust-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
}

.cf-trust-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cf-trust-card-bg img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    filter: grayscale(1);
    transition: all 0.7s ease-out;
}

.cf-trust-card:hover .cf-trust-card-bg img {
    opacity: 0.35;
    filter: grayscale(0);
    transform: scale(1.08);
}

.cf-trust-card-bg .cf-trust-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%);
}

.cf-trust-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.cf-trust-card-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    backdrop-filter: blur(8px);
}

.cf-trust-card-heading {
    color: white;
    font-size: 1.15rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.cf-trust-card-desc {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.5;
    max-width: 220px;
}

.cf-trust-stars {
    display: flex;
    gap: 0.2rem;
}

.cf-trust-stars svg {
    width: 16px;
    height: 16px;
    color: #facc15;
    fill: currentColor;
    filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.4));
}

/* ─── HIDE WOOCOMMERCE DEFAULT STUFF ─────────────────── */
.cf-checkout .woocommerce-billing-fields>h3,
.cf-checkout .woocommerce-additional-fields>h3,
.cf-checkout .woocommerce-shipping-fields>h3 {
    display: none !important;
}

/* ─── COUPON FORM STYLING ────────────────────────────── */
.cf-checkout .checkout_coupon {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cf-checkout .checkout_coupon .form-row-first input {
    background: rgba(0, 0, 0, 0.3) !important;
}

.cf-checkout .checkout_coupon .button {
    background: var(--cf-surface-3) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.6rem !important;
    padding: 0.7rem 1.2rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.cf-checkout .checkout_coupon .button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ─── HIDE EVERYTHING WE MANAGE OURSELVES ────────────── */
.cf-checkout #order_review_heading {
    display: none !important;
}

/* Hide the real checkout review & payment in the DOM
   (we submit via AJAX instead) */
.cf-checkout #order_review {
    display: none !important;
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 640px) {
    .cf-checkout-summary {
        margin-top: 0.75rem;
        padding-top: 0.65rem;
    }

    .cf-summary-total-value {
        font-size: 0.95rem;
    }
}

/* ─── INFO PANEL (Policy / Made-to-Order notice) ─────── */
.cf-info-panel {
    text-align: center;
    padding: 0.5rem 0;
}

.cf-info-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.cf-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(250, 204, 21, 0.08);
    border: 2px solid rgba(250, 204, 21, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #facc15;
}

.cf-info-title {
    color: white;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cf-info-text {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto 1.25rem;
    text-align: left;
}

.cf-info-text strong {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.cf-info-highlight {
    display: inline-block;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin: 0.75rem auto;
    color: rgba(52, 211, 153, 0.9);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.cf-info-welcome {
    color: var(--cf-logo-color);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 0.75rem;
}


/* --- Tip Option Selection (checkout step 4) --- */
.cf-tip-option input[type="radio"]:checked+div {
    background: rgba(250, 204, 21, 0.1) !important;
    border-color: rgba(250, 204, 21, 0.4) !important;
    color: #facc15;
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.15);
}

.cf-tip-option input[type="radio"]:checked+div #cf_custom_tip_amount {
    color: #facc15 !important;
    border-bottom-color: #facc15 !important;
}

#cf_custom_tip_amount:focus {
    border-bottom-color: #facc15 !important;
}

/* Hide arrows for number input */
#cf_custom_tip_amount::-webkit-outer-spin-button,
#cf_custom_tip_amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#cf_custom_tip_amount[type=number] {
    -moz-appearance: textfield;
}

/* ---EXTRACTED FROM woocommerce/myaccount/my-account.php (Block 1  Nav) --- */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 1rem 1.5rem;
    color: #94a3b8;
    font-weight: 700;
    text-decoration: none;
    border-radius: 1rem;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.2);
}

/* ---EXTRACTED FROM woocommerce/myaccount/my-account.php (Block 2 — Content/Forms) --- */
/* Make the default Woo content fit the theme */
.woocommerce-MyAccount-content.content-styles {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2.5rem;
    border-radius: 1.5rem;
    shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    color: #cbd5e1;
}

.content-styles h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
}

.content-styles h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.content-styles p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.content-styles a:not(.button) {
    color: #60a5fa;
    font-weight: 600;
    text-decoration: none;
}

.content-styles a:not(.button):hover {
    color: #93c5fd;
    text-decoration: underline;
}

.content-styles mark {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-weight: bold;
}

/* Tables (Orders, Addresses) */
.content-styles table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.content-styles table th {
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: left;
}

.content-styles table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: white;
    vertical-align: middle;
}

.content-styles table tr:last-child td {
    border-bottom: none;
}

.content-styles .button {
    background: #3b82f6;
    color: white;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
    font-size: 0.875rem;
}

.content-styles .button:hover {
    background: #2563eb;
}

/* Forms */
.content-styles label {
    display: block;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.content-styles input[type="text"],
.content-styles input[type="email"],
.content-styles input[type="password"],
.content-styles input[type="tel"],
.content-styles select,
.content-styles textarea {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
}

.content-styles input:focus,
.content-styles select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.content-styles button[type="submit"] {
    background: linear-gradient(to right, #3b82f6, #4f46e5);
    color: white;
    font-weight: 800;
    padding: 1rem 2rem;
    border-radius: 1rem;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
    margin-top: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
}

.content-styles button[type="submit"]:hover {
    transform: translateY(-2px);
}

/* Addresses grid */
.u-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .u-columns {
        grid-template-columns: 1fr 1fr;
    }
}

.woocommerce-Address {
    background: rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.woocommerce-Address-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.woocommerce-Address-title h3 {
    margin: 0;
}

.woocommerce-Address address {
    font-style: normal;
    line-height: 1.6;
    color: #cbd5e1;
}

/* ---EXTRACTED FROM woocommerce/myaccount/form-login.php--- */
/* Shared form styles */
.form-glass-overrides h2 {
    color: white;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 2rem;
    letter-spacing: -0.05em;
    text-align: center;
}

.form-glass-overrides .form-row {
    margin-bottom: 1.5rem;
}

.form-glass-overrides label {
    display: block;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.form-glass-overrides input[type="text"],
.form-glass-overrides input[type="email"],
.form-glass-overrides input[type="password"] {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    transition: all 0.2s;
}

.form-glass-overrides input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.form-glass-overrides .button {
    width: 100%;
    font-weight: 900;
    padding: 1rem;
    border-radius: 1rem;
    font-size: 1.125rem;
    transition: all 0.3s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    border: none;
    cursor: pointer;
}

.form-glass-overrides .button:hover {
    transform: translateY(-2px);
}

.btn-login {
    background: linear-gradient(to right, #3b82f6, #4f46e5);
    color: white;
}

.btn-register {
    background: linear-gradient(to right, #10b981, #059669);
    color: white;
}

.woocommerce-LostPassword {
    text-align: center;
    margin-top: 1.5rem;
}

.woocommerce-LostPassword a {
    color: #60a5fa;
    font-weight: 600;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.woocommerce-LostPassword a:hover {
    color: #93c5fd;
}

.woocommerce-form-login__rememberme {
    display: flex;
    items: center;
    gap: 0.5rem;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    margin-bottom: 1.5rem;
    cursor: pointer;
}

.woocommerce-form-login__rememberme input {
    width: auto;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
}

/* ---EXTRACTED FROM woocommerce/single-product.php--- */
.woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

/* Aggressively remove WooCommerce underline on sales prices */
.price-simplifier ins,
.price-simplifier .price-active-sale {
    text-decoration: none !important;
    background: none !important;
    /* Some woo themes add backgrounds to ins */
}

/* Custom X drawn over regular price, sized larger than text */
.price-crossed-out {
    text-decoration: none !important;
}

.price-crossed-out::before,
.price-crossed-out::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -15%;
    width: 130%;
    height: 3px;
    background-color: currentColor;
    transform-origin: center;
    opacity: 0.9;
    border-radius: 2px;
}

.price-crossed-out::before {
    transform: translateY(-50%) rotate(20deg);
}

.price-crossed-out::after {
    transform: translateY(-50%) rotate(-20deg);
}

.quantity {
    display: none !important;
}

/* Psychological Action Button */
button.single_add_to_cart_button {
    width: 100%;
    background: linear-gradient(to right, var(--cf-btn-bg), var(--cf-btn-grad));
    color: white;
    font-weight: 900;
    padding: 1.25rem 2rem;
    border-radius: 9999px;
    box-shadow: 0 10px 20px -5px color-mix(in srgb, var(--cf-btn-bg) 40%, transparent);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

/* Safari-safe floating clone */
button.cf-floating-action-btn {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translate(-50%, 0);
    width: calc(100% - 3rem);
    max-width: 450px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), 0 10px 20px -5px color-mix(in srgb, var(--cf-btn-bg) 60%, transparent);
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

button.cf-floating-action-btn.is-active {
    opacity: 1;
    pointer-events: auto;
}

button.cf-floating-action-btn.is-hidden-down {
    transform: translate(-50%, 150%);
}

button.single_add_to_cart_button::after {
    content: "→";
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.3s;
}

button.single_add_to_cart_button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 30px -5px color-mix(in srgb, var(--cf-btn-bg) 50%, transparent);
}

button.cf-floating-action-btn:hover {
    transform: translate(-50%, -3px) scale(1.02);
}

button.single_add_to_cart_button:hover::after {
    transform: translateX(4px);
}

.product-add-to-cart-wrapper select {
    display: none !important;
}

.product-add-to-cart-wrapper select:focus {
    outline: none;
    border-color: var(--cf-btn-bg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-btn-bg) 20%, transparent);
}

.variations {
    width: 100%;
    margin-bottom: 0.5rem;
}

.variations td {
    display: block;
    width: 100%;
    text-align: center;
}

.variations th,
.variations td.label,
.variations .label {
    display: none !important;
}

.woocommerce-product-details__short-description p {
    margin-bottom: 1rem;
}

.stock {
    display: none;
}

/* Handled custom above */
a.reset_variations {
    display: none !important;
}

/* ---EXTRACTED FROM inc/trust-cards.php (frontend display styles)--- */
.cd-builder {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
    max-width: 900px;
}

.cd-block-item {
    background: #fff;
    border: 1px solid #ccc;
    border-left: 4px solid #dbbb75;
    padding: 12px;
    margin-bottom: 15px;
    position: relative;
    border-radius: 3px;
    cursor: move;
}

.cd-block-header {
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cd-block-remove {
    color: #d63638;
    cursor: pointer;
    font-weight: normal;
    font-size: 12px;
}

.cd-block-remove:hover {
    color: #d00;
    text-decoration: underline;
}

.cd-textarea {
    width: 100%;
    height: 200px;
    font-family: monospace;
    font-size: 13px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
    color: #333;
    line-height: 1.5;
    margin-top: 10px;
}

.cd-input {
    width: 100%;
    padding: 6px;
    font-size: 14px;
    margin-top: 4px;
}

.cd-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #fff;
    padding: 12px;
    border: 1px solid #ddd;
    border-top: none;
}

/* ---EXTRACTED FROM woocommerce/archive-product.php--- */
/* ─── SHOP PAGE — PREMIUM CATEGORY SLIDERS ─────────────── */
.cf-shop {
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif;
}

/* Hide the default page title */
.cf-shop-header {
    display: none;
}

/* ─── CATEGORY ROW ─────────────────────────────────────── */
.cf-cat-row {
    position: relative;
    margin-bottom: 3.5rem;
}

/* Sticky category title above slider */
.cf-cat-title {
    position: sticky;
    left: 0;
    text-align: center;
    padding: 1rem 1rem 2.5rem;
    font-size: 3.2rem;
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cf-logo-color, #dbbb75);
    z-index: 2;
}

@media (max-width: 768px) {
    .cf-cat-title {
        font-size: 2.2rem;
        padding: 0.5rem 1rem 2rem;
    }
}

/* Watermark removed from row — now inside label card */

/* ─── SLIDER CONTAINER ─────────────────────────────────── */
.cf-cat-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.75rem;
    padding: 0 1rem 1rem;
    position: relative;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: none;
    cursor: grab;
}

.cf-cat-slider:active {
    cursor: grabbing;
}

.cf-cat-slider::-webkit-scrollbar {
    display: none;
}

.cf-cat-slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ─── CATEGORY LABEL CARD (first card) ─────────────────── */
.cf-cat-label-card {
    flex-shrink: 0;
    scroll-snap-align: start;
    width: 140px;
    min-height: 75vh;
    max-height: 76vh;
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1.75rem 1rem;
    background: transparent;
    border: none;
    position: relative;
    overflow: visible;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s;
}

.cf-cat-label-card.has-baby-tc {
    width: 56vw;
    max-width: 280px;
    padding: 0;
    overflow: hidden;
}

.cf-cat-label-card.has-baby-tc .cf-cat-label-watermark {
    z-index: 5;
    left: 70px;
}

.cf-cat-label-card.has-baby-tc .cf-cat-label-card-arrow {
    position: absolute;
    bottom: 0.35rem;
    left: 1rem;
    z-index: 30;
}

/* Vertical watermark inside the label card */
.cf-cat-label-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.1em;
    word-spacing: -0.4em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.04);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    /* Font size will be set inline based on card height */
    font-size: 6rem;
}

@media (max-width: 768px) {
    .cf-cat-label-card {
        width: 110px;
        min-height: 60vh;
        padding: 1.25rem 0.75rem;
    }

    .cf-cat-label-card.has-baby-tc {
        width: 53vw;
        padding: 0;
    }

    .cf-cat-label-card.has-baby-tc .cf-cat-label-watermark {
        left: 55px;
    }

    .cf-cat-label-watermark {
        font-size: 4rem;
    }
}

.cf-cat-label-card-name {
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: white;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .cf-cat-label-card-name {
        font-size: 1.2rem;
    }
}

.cf-cat-label-card-count {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--cf-logo-color);
}

.cf-cat-label-card-line {
    width: 30px;
    height: 2px;
    border-radius: 2px;
    background: var(--cf-logo-color);
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.cf-cat-label-card-arrow {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.4);
}

.cf-cat-label-card-arrow span {
    font-size: 1.6rem;
    animation: cfSlideRightLeft 1.5s ease-in-out infinite;
}

@keyframes cfSlideRightLeft {

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

    50% {
        transform: translateX(8px);
    }
}

/* ─── SWIPE ANIMATION & COUNT ───────────── */
.cf-cat-label-count-stroke {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 5rem;
    font-weight: 900;
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
    margin-bottom: 0.25rem;
    text-align: left;
}

.cf-cat-label-count-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.6);
    text-align: left;
}

@media (max-width: 768px) {
    .cf-cat-label-count-stroke {
        font-size: 3.5rem;
    }

    .cf-cat-label-count-label {
        font-size: 0.6rem;
    }
}

.cf-swipe-icon-wrapper {
    position: absolute;
    top: 25%;
    right: -35px;
    z-index: 999;
    pointer-events: none;
}

/* ─── BABY TRUSTCARD (inside category label) ───────────── */
.cf-baby-trust-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
    background: transparent;
    z-index: 10;
}

@media (max-width: 768px) {
    .cf-baby-trust-card {
        /* Inherits absolute inset 0 */
    }
}

/* ─── PRODUCT CARD ─────────────────────────────────────── */
.cf-shop-card {
    flex-shrink: 0;
    scroll-snap-align: center;
    width: 85vw;
    max-width: 420px;
    min-height: 68vh;
    max-height: 78vh;
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: block;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s;
}

@media (max-width: 768px) {
    .cf-shop-card {
        width: 80vw;
        max-width: none;
        min-height: 51vh;
    }
}

/* ─── SLIDE NAVIGATION ARROWS ──────────────────────────── */
.cf-slide-nav-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0;
    z-index: 50;
    pointer-events: none;
    /* Let the card clicks pass through to the link */
}

.cf-slide-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.45);
    /* Ușor mai ștearsă (45% opacitate) */
    transition: all 0.4s ease;
    pointer-events: auto;
    /* Re-enable events if needed so they could be clicked, though not strictly required */
    padding: 0;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7));
    /* Umbră un pic mai puternică pt lizibilitate */
}

.cf-slide-arrow-left {
    transform: translateX(-24px);
    /* Pushes the icon itself left to counter SVG whitespace */
}

.cf-slide-arrow-right {
    transform: translateX(24px);
    /* Pushes the icon itself right to counter SVG whitespace */
}

.cf-slide-arrow svg {
    width: 72px;
    /* Mult mai mare pe desktop */
    height: 72px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cf-shop-card:hover .cf-slide-arrow {
    color: rgba(255, 255, 255, 1);
    /* Alb curat la hover */
}

@media (max-width: 768px) {
    .cf-slide-arrow {
        padding: 0;
    }

    .cf-slide-arrow-left {
        transform: translateX(-14px);
    }

    .cf-slide-arrow-right {
        transform: translateX(14px);
    }

    .cf-slide-arrow svg {
        width: 44px;
        /* Mai mare și pe mobil */
        height: 44px;
    }
}

.cf-shop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
}

/* Background image */
.cf-shop-card-bg {
    position: absolute;
    inset: 0;
    background: var(--cf-surface-3);
}

.cf-shop-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.cf-shop-card:hover .cf-shop-card-bg img {
    transform: scale(1.06);
}

/* Gradient overlay */
.cf-shop-card-overlay {
    display: none;
}

/* ─── PROPOSAL STYLES (Backend Selected) ───────────────── */

/* Price Simplifier for all proposals */
.cf-shop-card ins,
.cf-bundle-price-badge ins {
    text-decoration: none !important;
    background: none !important;
}

.cf-shop-card .price-crossed-out,
.cf-bundle-price-badge .price-crossed-out {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    font-weight: bold;
    color: var(--cf-text-muted);
    text-decoration: none !important;
}

.cf-shop-card .price-crossed-out::before,
.cf-bundle-price-badge .price-crossed-out::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -15%;
    width: 130%;
    height: 2px;
    background-color: currentColor;
    transform-origin: center;
    opacity: 0.9;
    border-radius: 2px;
}

.cf-shop-card .price-crossed-out::before,
.cf-bundle-price-badge .price-crossed-out::before {
    transform: translateY(-50%) rotate(-10deg);
}


/* P1: The Glass Base */
.cf-prop-1 .cf-shop-card-overlay {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem 0.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 60%, transparent 100%);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cf-prop-1 .prop-title {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.2;
}

.cf-prop-1 .prop-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.cf-prop-1 .prop-price {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--cf-logo-color);
    letter-spacing: -0.02em;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* P4: The Magazine Corner */
.cf-prop-4 .cf-shop-card-overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, 0.1) 100%);
    pointer-events: none;
}

.cf-prop-4 .cf-shop-card-content {
    position: absolute;
    inset: 0;
    padding: 1.5rem;
    pointer-events: none;
}

.cf-prop-4 .prop-title {
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
    padding: 0 4.5rem;
    box-sizing: border-box;
    font-size: 1.6rem;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.1;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}

@media (max-width: 768px) {
    .cf-prop-4 .prop-title {
        font-size: 1.25rem;
        padding: 0 4.5rem;
    }
}

.cf-prop-4 .prop-price {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--cf-logo-color);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

/* ─── NOU BADGES ────────────────────────────── */

/* NOU Badge Style 1: Neon Glow (Prop 1) */
.cf-prop-1 .prop-badge-nou {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* NOU Badge Style 2: Solid Accent (Prop 4) */
.cf-prop-4 .prop-badge-nou {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    background: var(--cf-logo-color);
    color: black;
    padding: 0.35rem 0.75rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* ─── SALE LABELS ────────────────────────────── */

/* Sale 1: The Sleek Corner Ribbon (Top Right Diagonal) */
.cf-sale-prop-1 {
    position: absolute;
    top: 2rem;
    right: -2.5rem;
    background: var(--cf-logo-color);
    color: black;
    width: 12rem;
    padding: 0.4rem 0;
    text-align: center;
    transform: rotate(45deg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.cf-sale-prop-1 .sale-text {
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
}

.cf-sale-prop-1 .sale-pct {
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    margin-top: 0.1rem;
}

/* Sale 4: The Bold Box (Top Right Anchor) */
.cf-sale-prop-4 {
    position: absolute;
    top: 0;
    right: 0;
    background: #e60000;
    color: white;
    padding: 0.85rem 1.1rem;
    border-bottom-left-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 20;
}

.cf-sale-prop-4 .sale-text {
    font-size: 0.45rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.cf-sale-prop-4 .sale-pct {
    font-size: 1.1rem;
    font-weight: 900;
    color: white;
    line-height: 1;
    margin-top: 0.1rem;
}

@media (max-width: 768px) {
    .cf-sale-prop-4 {
        padding: 0.65rem 0.8rem;
    }

    .cf-sale-prop-4 .sale-pct {
        font-size: 0.95rem;
    }
}

/* ─── NO PRODUCTS ──────────────────────────────────────── */
.cf-shop-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Trust cards — match product card height */
.cf-shop-trust-card {
    flex-shrink: 0;
    scroll-snap-align: center;
    width: 85vw;
    max-width: 480px;
    /* Increased from 420px to give text more breathing room */
    min-height: 75vh;
    max-height: 77vh;
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 3rem;
    /* Increased padding slightly for edges */
    text-align: center;
    background: var(--cf-surface-3);
}

@media (max-width: 768px) {
    .cf-shop-trust-card {
        width: 80vw;
        max-width: none;
        min-height: 51vh;
        padding: 1.5rem 2rem;
        /* Keep existing padding on mobile */
    }
}


/* ─── DYNAMIC ATTENTION TEXTS ──────────────────────────── */
.cf-attention-banner {
    width: 100vw;
    max-width: 100%;
    margin-left: calc(50% - 50vw);
    padding: 4rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 250px;
    position: relative;
    overflow: hidden;
}

.cf-attention-text {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    max-width: 900px;
    opacity: 0;
    /* Hidden by default until JS observer triggers */
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.cf-attention-text strong {
    font-weight: 800;
    color: white;
}

.cf-attention-text em {
    font-style: italic;
    color: var(--cf-logo-color);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.cf-att-highlight {
    color: var(--cf-logo-color);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.1em;
}

.cf-att-badge {
    display: inline-block;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--cf-text-muted);
    margin-top: 1rem;
}

.cf-att-svg {
    width: 48px;
    height: 48px;
    fill: none;
    stroke: var(--cf-logo-color);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .cf-attention-banner {
        padding: 3rem 1.5rem;
        min-height: 200px;
    }

    .cf-attention-text {
        font-size: 1.3rem;
        gap: 1rem;
    }

    .cf-att-svg {
        width: 36px;
        height: 36px;
    }

    .cf-att-badge {
        font-size: 0.6rem;
    }
}

/* Animation Classes added by JS Observer */
.cf-anim-fade-up {
    opacity: 0;
    transform: translateY(30px);
}

.cf-anim-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cf-anim-slide-right {
    opacity: 0;
    transform: translateX(-40px);
}

.cf-anim-slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.cf-anim-blur {
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.95);
}

.cf-anim-blur.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* ─── CATEGORY DESCRIPTIONS SLIDE ─── */
.cf-category-desc-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    align-self: stretch;
    /* Match height of adjacent product cards */
    background: transparent;
    border: none;
    padding: 0 1rem;
    text-align: center;
    box-sizing: border-box;
}

.cf-category-desc-inner {
    width: 100%;
    max-width: 380px;
    color: var(--cf-text-base);
    opacity: 0.85;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.85rem;
    line-height: 1.4;
}

.cf-category-desc-inner p {
    margin-bottom: 0.5rem;
}

.cf-category-desc-inner .cf-att-svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: var(--cf-logo-color, #dbbb75);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
    margin-bottom: 0.75rem !important;
}

.cf-category-desc-inner .cf-att-highlight {
    color: var(--cf-logo-color);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── SUBCATEGORY QUICK NAV ───────────────────────────── */
.cf-subcat-nav {
    padding: 1.5rem 1rem 3rem;
    text-align: center;
}

.cf-subcat-nav-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--cf-text-base);
    opacity: 0.35;
    margin-bottom: 1.25rem;
}

.cf-subcat-nav-hint svg {
    width: 14px;
    height: 14px;
    stroke: var(--cf-logo-color, #dbbb75);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: cfBounceDown 1.8s ease-in-out infinite;
}

@keyframes cfBounceDown {

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

    50% {
        transform: translateY(4px);
    }
}

.cf-subcat-nav-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.65rem;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 800px;
}

.cf-subcat-nav-list li {}

.cf-subcat-nav-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1.5rem;
    border-radius: 99px;
    border: 1px solid var(--cf-text-muted);
    background: transparent;
    color: var(--cf-text-base);
    opacity: 0.9;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Space Grotesk', system-ui, sans-serif;
}

.cf-subcat-nav-list a:hover {
    border-color: var(--cf-logo-color, #dbbb75);
    color: var(--cf-logo-color, #dbbb75);
    background: rgba(219, 187, 117, 0.08);
}

.cf-subcat-nav-list a svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .cf-subcat-nav {
        padding: 1rem 0.75rem 2rem;
    }

    .cf-subcat-nav-list li {
        min-width: 150px;
    }

    .cf-subcat-nav-list a {
        font-size: 0.75rem;
        padding: 0.55rem 1rem;
    }
}

.cf-sold-out-overlay {
    background-color: rgba(0, 0, 0, 0.4);
}

.cf-sold-out-single {
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
    border: none;
    padding: 1.5rem;
}