:root {
    --blc-navy: #1a2f5c;         /* brand navy, from the logo */
    --blc-navy-dark: #0e1b33;
    --blc-orange: #F15A3B;       /* brand orange, from the logo — used site-wide */
    --blc-orange-dark: #D44F34;
    --blc-text-on-dark: #ffffff;
    /* Gold accent — used ONLY inside the homepage hero, as a premium accent
       layered on top of the navy brand background. The rest of the site
       keeps the orange brand color untouched. */
    --blc-gold: #f0cf82;
    --blc-gold-light: #fff6e0;
    --blc-gold-dark: #c9a256;

    /* Homepage hero light theme — "soft luminous premium-tech". Scoped
       via body.home, but kept as root tokens so the palette is defined
       in one place. */
    --blc-lt-text-dark: #162B6B;
    --blc-lt-text-dark-alt: #1F2F63;
    --blc-lt-text-para: #243A73;
    --blc-lt-text-muted: #53648F;
    --blc-lt-orange: #F15A3B;
    --blc-lt-orange-deep: #F15A3B;
    --blc-lt-orange-glow: rgba(241, 90, 59, 0.28);
    --blc-lt-blue: #315BFF;
    --blc-lt-blue-soft: #5D7BFF;
    --blc-lt-blue-glow: rgba(73, 114, 255, 0.22);
    --blc-lt-lilac-blue: #6A72FF;

    /* How far the hero printer box is visually lifted (translateY) above
       its untransformed grid position, on desktop — shared so the
       compensating negative margin below it stays in sync. */
    --blc-printer-lift: 160px;
}

/* ---------------------------------------------------------------
   Floating glass header panel — confirmed against the live rendered
   HTML (not just the raw header_desktop_items theme_mod, whose
   top/main/bottom breakdown turned out to be unused — its "flag" is
   false, so Kadence falls back to its single-row default): there is
   only ONE row, .site-main-header-wrap > .site-main-header-inner-wrap,
   with logo in .site-header-main-section-left and nav (+ our appended
   .blc-nav-cta / .blc-cart-icon-item list items) in
   .site-header-main-section-right. #masthead is the fixed, transparent
   shell; .site-main-header-wrap is the actual floating card.
   --------------------------------------------------------------- */

#masthead {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: transparent !important;
    border-bottom: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

/* WordPress admin bar adds 32px (46px on narrow/mobile toolbar) to the
   top of the page when a logged-in user has it enabled — the fixed
   header needs to sit below it, not under it. */
body.admin-bar #masthead {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar #masthead {
        top: 46px !important;
    }
}

.site-header-wrap,
.site-header-inner-wrap,
.site-header-upper-wrap,
.site-header-upper-inner-wrap {
    background: transparent !important;
}

/* Kadence boxes header content via a customizer-controlled max-width
   on .site-container; neutralize it inside the header so the panel's
   own 1460px max-width below is the one that applies. */
#masthead .site-container {
    max-width: none !important;
}

.site-main-header-wrap {
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.98) 0%,
      rgba(250,251,255,0.95) 100%
    ) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(50,80,150,0.07) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow:
      0 4px 12px rgba(20,40,80,0.08),
      0 16px 40px rgba(55,90,180,0.10) !important;
    max-width: 1460px !important;
    margin: 16px auto 0 !important;
    padding: 6px 24px !important;
    box-sizing: border-box !important;
    transition: background 0.25s ease, padding 0.25s ease !important;
}

/* Scroll state: slightly tighter padding, more opaque panel.
   Horizontal matches the new resting 24px (was 28px, now stale since
   the resting padding shrank below it); vertical was already 6px. */
#masthead.scrolled .site-main-header-wrap {
    background: rgba(255, 255, 255, 0.98) !important;
    padding: 4px 24px !important;
}

/* Single flex row, everything vertically centered, no forced height */
.site-main-header-inner-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: unset !important;
}

.site-header-main-section-left,
.site-header-main-section-right {
    display: flex !important;
    align-items: center !important;
}

/* Nav link colors */
.site-header .main-navigation a,
.site-header nav a,
#site-navigation a {
    color: var(--blc-lt-text-dark) !important;
    transition: color 0.2s ease;
}

.site-header .main-navigation a:hover,
.site-header nav a:hover,
#site-navigation a:hover {
    color: #F15A3B !important;
}

/* Logo text — force a single line; the narrower floating panel gives
   the title less room than the old full-width bar did. */
.site-header .site-title a,
.site-header .site-title {
    color: var(--blc-lt-text-dark) !important;
    white-space: nowrap !important;
    font-size: 17px !important;
}

/* Nav item spacing + underline (hover + active) — the CTA pill and
   cart icon ride in the same <ul> (appended via wp_nav_menu_items in
   functions.php) but get their own look, so the underline is scoped
   to the plain text menu items only. nowrap (was wrap) now that the
   header is confirmed as one row — items shouldn't drop to a second
   line, they should just sit inline next to the logo. */
#site-navigation .primary-menu-container > ul {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
}

#site-navigation .primary-menu-container > ul > li {
    position: relative;
}

#site-navigation .primary-menu-container > ul > li:not(.blc-nav-cta):not(.blc-cart-icon-item) > a {
    position: relative;
    padding-bottom: 4px !important;
    font-size: 14px !important;
}

#site-navigation .primary-menu-container > ul > li:not(.blc-nav-cta):not(.blc-cart-icon-item) > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #F15A3B;
    transition: width 0.25s ease;
}

#site-navigation .primary-menu-container > ul > li:not(.blc-nav-cta):not(.blc-cart-icon-item) > a:hover::after {
    width: 100%;
}

#site-navigation .primary-menu-container > ul > li.current-menu-item > a,
#site-navigation .primary-menu-container > ul > li.current_page_item > a {
    font-weight: 600 !important;
    color: #1a2f5c !important;
}

#site-navigation .primary-menu-container > ul > li.current-menu-item > a::after,
#site-navigation .primary-menu-container > ul > li.current_page_item > a::after {
    width: 28px !important;
    bottom: -4px !important;
    border-radius: 99px !important;
}

/* "Design Online" CTA pill */
.blc-nav-cta a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    background: #F15A3B !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 22px rgba(241, 90, 59, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.blc-nav-cta a::after {
    content: "\2192";
    line-height: 1;
}

.blc-nav-cta a:hover {
    background: #D44F34 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(241, 90, 59, 0.3);
}

/* Mobile: keep the floating panel, just narrower and squarer — carried
   over from the original mobile spec (12px side margins, 18px radius),
   retargeted at #masthead (the outer inset) and the one real row-wrap
   now that there's no second row to split the radius across. */
@media (max-width: 767px) {
    #masthead {
        padding: 12px 12px 0 !important;
    }

    .site-main-header-wrap {
        border-radius: 18px !important;
    }
}

/* ---------------------------------------------------------------
   Hero section
   --------------------------------------------------------------- */

.blc-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--blc-text-on-dark);
}

.blc-hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.blc-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.blc-hero-slide.is-active {
    opacity: 1;
}

.blc-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(10, 18, 38, 0.88) 0%, rgba(10, 18, 38, 0.62) 45%, rgba(10, 18, 38, 0.38) 100%);
}

.blc-hero-grid {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 24px;
    width: 100%;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: stretch;
    min-height: 520px;
}

/* ---- Left column: headline / accent / subtext / CTAs ---- */

.blc-hero-content {
    max-width: 600px;
}

.blc-hero-textpanel {
    position: relative;
    overflow: hidden;
    background: rgba(10, 18, 38, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 20px;
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 480px;
}

/* Print-roll accent graphic — decorative only, sits behind the text,
   scales fluidly with the panel, and never intercepts clicks/taps. */
.blc-hero-print-rolls {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 55%;
    max-width: 340px;
    height: auto;
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
}

.blc-hero-textpanel > *:not(.blc-hero-print-rolls) {
    position: relative;
    z-index: 1;
}

/* Force white regardless of the parent theme's own h1/heading color rules —
   Kadence's typography settings otherwise paint headings dark here. */
h1.blc-hero-headline,
.blc-hero-textpanel h1 {
    color: var(--blc-text-on-dark) !important;
    font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 14px;
    text-shadow: 0 0 18px rgba(240, 207, 130, 0.35), 0 2px 6px rgba(0, 0, 0, 0.55);
}

.blc-hero-highlight {
    color: #f0cf82;
    text-shadow: 0 0 24px rgba(240, 207, 130, 0.45);
    font-style: italic;
}

.blc-hero-accent {
    margin: 0 0 20px;
}

.blc-hero-accent-inner {
    display: inline-block;
    font-style: italic;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--blc-orange);
    position: relative;
}

.blc-hero-subtext {
    font-size: 1.1rem;
    color: var(--blc-text-on-dark);
    opacity: 0.92;
    margin: 0 0 28px;
}

.blc-hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---- Right column: placeholder panel (inner pages — no printer) ---- */

.blc-hero-visual-placeholder {
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 18, 38, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
}

/* ---- Right column: 3D printer visual + frosted-glass stat cards ---- */

.blc-hero-visual {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Mount point for the 3D printer (hero-printer.js). It needs an explicit
   height for the canvas to size against — aspect-ratio gives it a fluid,
   responsive one that still clamps sensibly. Slightly larger + nudged down
   so the machine reads as the hero's centrepiece. */
.blc-hero-printer {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    max-height: 600px;
    /* Frosted backing panel (matches the text panel) so the moving slider
       photos don't show through the transparent canvas and the machine's
       contact shadow reads cleanly. */
    background: rgba(10, 18, 38, 0.42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
}

/* Soft brand glow behind the machine so it reads with depth over the
   dark hero instead of floating flat. Decorative, never clickable. */
.blc-hero-printer::before {
    content: '';
    position: absolute;
    inset: 6% 4% 2%;
    background:
        radial-gradient(60% 55% at 50% 42%, rgba(241, 90, 59, 0.20), rgba(241, 90, 59, 0) 70%),
        radial-gradient(70% 60% at 52% 58%, rgba(120, 160, 255, 0.16), rgba(120, 160, 255, 0) 72%);
    filter: blur(4px);
    z-index: 0;
    pointer-events: none;
}

.blc-hero-printer canvas {
    position: relative;
    z-index: 1;
}

/* Static on-brand fallback shown before/without WebGL. Hidden once the
   real 3D scene has initialised (JS adds .is-3d-ready to the mount). */
.blc-hero-printer-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: min(88%, 420px);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 340'><rect x='40' y='150' width='320' height='90' rx='10' fill='%23f2f4f8'/><rect x='40' y='138' width='320' height='16' rx='6' fill='%231a2f5c'/><rect x='70' y='190' width='260' height='10' rx='5' fill='%23263043'/><rect x='55' y='240' width='30' height='70' fill='%23263043'/><rect x='315' y='240' width='30' height='70' fill='%23263043'/><rect x='120' y='96' width='160' height='12' rx='6' fill='%2324407a'/><rect x='185' y='108' width='30' height='24' rx='4' fill='%231a2f5c'/><g><rect x='150' y='196' width='100' height='128' rx='4' fill='%23fff4e6'/><rect x='150' y='196' width='100' height='20' fill='%23ff5252'/><rect x='150' y='216' width='100' height='18' fill='%23ff9800'/><rect x='150' y='234' width='100' height='18' fill='%23ffd600'/><rect x='150' y='252' width='100' height='18' fill='%2366bb6a'/><rect x='150' y='270' width='100' height='18' fill='%2326c6da'/><rect x='150' y='288' width='100' height='36' fill='%235c6bc0'/></g></svg>");
}

.blc-hero-printer.is-3d-ready .blc-hero-printer-fallback {
    display: none;
}
#blc-products-guillotine.is-3d-ready .blc-hero-printer-fallback {
    display: none;
}

/* Stat cards now span the full hero width, sitting under BOTH the text
   panel and the printer as their own row. */
.blc-hero-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.blc-glass-card {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;
    padding: 26px 20px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(10, 18, 38, 0.25);
}

.blc-glass-card-value {
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 800;
    color: var(--blc-orange);
    line-height: 1.1;
    margin-bottom: 4px;
}

.blc-glass-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--blc-text-on-dark);
    opacity: 0.9;
    line-height: 1.3;
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */

.blc-btn {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.blc-btn:hover {
    transform: translateY(-1px);
}

.blc-btn-primary {
    background: var(--blc-orange);
    color: #ffffff;
}

.blc-btn-primary:hover {
    background: var(--blc-orange-dark);
    color: #ffffff;
}

/* Gold gradient primary button — scoped to the homepage hero only, so the
   rest of the site keeps the standard orange brand button untouched. */
.blc-hero .blc-btn-primary {
    background: linear-gradient(135deg, var(--blc-gold-light) 0%, var(--blc-gold) 55%, var(--blc-gold-dark) 100%);
    color: var(--blc-navy-dark);
}

.blc-hero .blc-btn-primary:hover {
    background: linear-gradient(135deg, var(--blc-gold) 0%, var(--blc-gold-dark) 100%);
    color: var(--blc-navy-dark);
}

.blc-btn-orange-pulse {
    background: #F15A3B !important;
    color: #ffffff !important;
    border: 2px solid #F15A3B !important;
    animation: blc-pulse-orange 2.2s ease-in-out infinite;
}

.blc-btn-outline {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.blc-btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--blc-text-on-dark);
}

/* Pulse animation — used on both the hero "Design Online" button and the
   header one (give the header button the same "blc-pulse-btn" CSS class
   via the Kadence Header Builder's button settings). Combines a soft
   glow ring with a gentle scale so it reliably catches the eye on load. */
.blc-pulse-btn {
    animation: blc-pulse 2.2s ease-in-out infinite;
}

@keyframes blc-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(241, 90, 59, 0.55);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(241, 90, 59, 0);
        transform: scale(1.045);
    }
}

/* Respect users who've asked their system to reduce motion — stop the
   pulse and the slider crossfade animation entirely for them. */
@media (prefers-reduced-motion: reduce) {
    .blc-pulse-btn {
        animation: none;
    }
    .blc-hero-slide {
        transition: none;
    }
}

/* ---------------------------------------------------------------
   Featured Products (homepage, below hero) — see template-parts/
   featured-products.php. The product grid itself (ul.products etc.) is
   WooCommerce's own shop-loop markup/CSS, untouched here — this only
   styles the section wrapper, heading, and "View more" button around it.
   The section has been visually updated to match the premium landing-page
   design system (Hero / "Everything Happens Online") with its own
   cleaner, more neutral container — more white, less blue saturation,
   softer shadow — so it reads as a premium showroom rather than a
   technical/lilac block.
   --------------------------------------------------------------- */

.blc-featured-products {
    padding: 56px 0;
    overflow: hidden;
}

/* WooCommerce/Kadence's own "no bullet" rule for ul.products li is scoped
   to body.woocommerce (the shop archive's own body class) — this section
   lives on the homepage (body.home), which never carries that class, so
   the browser's default list-item bullet shows through without this. */
.blc-featured-products ul.products li.product {
    list-style: none;
}

/* ---- Premium container (rounded, subtle gradient, inner glow) ---- */

.blc-featured-products-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(28px, 3vw, 48px);
    background:
        radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 255, 0.85) 40%, transparent 62%),
        radial-gradient(circle at 76% 66%, rgba(200, 215, 255, 0.08) 0%, rgba(200, 215, 255, 0.03) 30%, transparent 55%),
        linear-gradient(140deg, #FCFDFF 0%, #F8FAFF 50%, #F4F7FF 100%);
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 2px 8px rgba(22, 43, 107, 0.03),
        0 12px 40px rgba(22, 43, 107, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Subtle inner glow behind the cards */
.blc-featured-products-inner::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 5%;
    right: 5%;
    height: 50%;
    background: radial-gradient(circle at 50% 30%, rgba(180, 205, 255, 0.07) 0%, transparent 60%);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
}

/* ---- Decorative background elements ---- */

/* Top-right dotted pattern — same masked treatment as the Hero */
.blc-featured-products-inner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 260px;
    height: 260px;
    background-image: radial-gradient(rgba(140, 170, 255, 0.14) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 65%);
    mask-image: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 65%);
    pointer-events: none;
    z-index: 0;
}

/* Bottom-left circle outlines — same decorative pattern as the Hero */
.blc-featured-products-inner .blc-featured-decor {
    position: absolute;
    left: -70px;
    bottom: -70px;
    width: 300px;
    height: 300px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='88' fill='none' stroke='%238caaff' stroke-opacity='0.18' stroke-width='1'/><circle cx='100' cy='100' r='60' fill='none' stroke='%238caaff' stroke-opacity='0.18' stroke-width='1'/><circle cx='100' cy='100' r='30' fill='none' stroke='%23FF7A30' stroke-opacity='0.22' stroke-width='1'/></svg>");
    background-repeat: no-repeat;
    opacity: 0.65;
    pointer-events: none;
    z-index: 0;
}

/* ---- Section header (label + heading + description) ---- */

.blc-featured-header {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 48px;
}

.blc-featured-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blc-lt-orange);
    margin-bottom: 20px;
    padding: 4px 14px;
    border: 1px solid rgba(241, 90, 59, 0.25);
    border-radius: 999px;
    background: rgba(241, 90, 59, 0.06);
}

.blc-featured-heading {
    font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.9rem, 2vw + 0.85rem, 2.7rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--blc-lt-text-dark);
    margin: 0 0 18px;
}

.blc-featured-heading-highlight {
    color: var(--blc-lt-orange);
}

.blc-featured-desc {
    max-width: 640px;
    margin: 0 auto;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    font-weight: 500;
    color: var(--blc-lt-text-para);
    line-height: 1.55;
    opacity: 0.92;
}

/* ---- Product grid inside the premium container (cards untouched) ---- */

.blc-featured-products .blc-featured-products-inner > ul.products {
    position: relative;
    z-index: 1;
}

/* ---- CTA / View More lightweight link ---- */

.blc-featured-products-cta {
    text-align: center;
    margin-top: 52px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.blc-featured-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--blc-lt-text-dark);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    padding-bottom: 1px;
}

.blc-featured-link:hover {
    color: var(--blc-lt-orange);
    border-color: var(--blc-lt-orange);
}

.blc-featured-link-arrow {
    font-size: 19px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.blc-featured-link:hover .blc-featured-link-arrow {
    transform: translateX(4px);
}

/* ---- Featured Products responsive ---- */

@media (max-width: 900px) {
    .blc-featured-products {
        padding: 60px 0;
    }

    .blc-featured-products-inner {
        padding: 36px 24px;
        border-radius: 24px;
    }

    .blc-featured-header {
        margin-bottom: 36px;
    }

    .blc-featured-products-cta {
        margin-top: 36px;
    }
}

@media (max-width: 560px) {
    .blc-featured-products {
        padding: 40px 0;
    }

    .blc-featured-products-inner {
        padding: 28px 16px;
        border-radius: 20px;
    }

    .blc-featured-header {
        margin-bottom: 28px;
    }

    .blc-featured-products-cta {
        margin-top: 28px;
    }
}

/* ---------------------------------------------------------------
   Homepage content below the hero (normal editable area)
   --------------------------------------------------------------- */

.blc-homepage-content {
    max-width: 1240px;
    margin: 0 auto;
    padding: 60px 24px;
}

@media (max-width: 900px) {
    .blc-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 40px 20px;
    }
    .blc-hero-content {
        max-width: none;
        margin: 0 auto;
    }
    .blc-hero-ctas {
        justify-content: center;
    }
    .blc-hero-stats {
        grid-template-columns: 1fr 1fr;
    }
    .blc-hero-print-rolls {
        width: 42%;
        opacity: 0.35;
    }
    /* When the hero stacks to one column, keep the printer centered and
       cap its height so it doesn't dominate above the stat cards. */
    .blc-hero-visual {
    height: 100%;
    justify-content: stretch;
    height: 100%;
        max-width: 560px;
        margin: 0 auto;
        align-self: auto;
    }
    .blc-hero-printer {
        aspect-ratio: 5 / 3.8;
        max-height: 380px;
        margin-top: 0;
    }
    .blc-float-panel {
        display: none;
    }
}

@media (max-width: 560px) {
    .blc-hero {
        min-height: 0;
    }
    .blc-hero-textpanel {
        padding: 24px;
    }
    .blc-hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .blc-glass-card {
        padding: 18px 14px;
    }
    /* Below this width the panel is too narrow for the graphic to sit
       behind the text without crowding it — hide it rather than shrink
       it into illegibility. */
    .blc-hero-print-rolls {
        display: none;
    }
}

/* ---------------------------------------------------------------
   Shared Page Hero (Products / Gallery / Our Customers / About / Contact)
   Same structure everywhere — only text/icon/animation change per page.
   --------------------------------------------------------------- */

.blc-page-hero {
    background: var(--blc-navy);
    color: var(--blc-text-on-dark);
    padding: 64px 24px;
    text-align: center;
}

.blc-page-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}

.blc-page-hero-icon {
    display: inline-block;
    font-size: 40px;
    width: 40px;
    height: 40px;
    color: var(--blc-orange);
    margin-bottom: 16px;
}

.blc-page-hero-title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 12px;
}

.blc-page-hero-subtitle {
    font-size: 1.05rem;
    color: #c7d0e0;
    margin: 0;
}

.blc-page-content {
    max-width: 1240px;
    margin: 0 auto;
    padding: 60px 24px;
}

.blc-generic-content {
    max-width: 1240px;
    margin: 0 auto;
    padding: 60px 24px;
}

/* Animation variants — set per-page in the Page Hero Settings meta box */

.blc-anim-fade-up .blc-page-hero-inner {
    animation: blc-fade-up 0.6s ease-out both;
}

@keyframes blc-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blc-anim-float-icon .blc-page-hero-icon {
    animation: blc-float 3s ease-in-out infinite;
}

@keyframes blc-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .blc-anim-fade-up .blc-page-hero-inner,
    .blc-anim-float-icon .blc-page-hero-icon {
        animation: none;
    }
}

/* Override Kadence inline <head> style: target the exact compound selector
   Kadence uses so specificity wins without JS */
#masthead.site-header,
body #masthead,
html body #masthead {
    background: transparent !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
}

/* Fixed header no longer paints a bar of its own, so page content
   needs a matching top offset: 16px #masthead top padding + ~56px card
   (2px border + 12px padding top/bottom + ~42px tallest child, the
   cart icon) ≈ 72px, rounded up with a small buffer. Was previously
   scoped to body.home/.page/.woocommerce-shop/.single-product, but
   that's an allowlist that has to be kept in sync with every template
   the theme has — content was scrolling behind the fixed header on
   whatever body classes weren't listed (blog/archive/search/404/cart/
   checkout/my-account, etc). Applied to every page instead. */
body .wp-site-blocks {
    padding-top: 80px !important;
}

/* Same admin-bar offset as #masthead's top, added on top of the 80px
   header compensation above. */
body.admin-bar .wp-site-blocks {
    padding-top: 112px !important; /* 80px + 32px admin bar */
}

@media screen and (max-width: 782px) {
    body.admin-bar .wp-site-blocks {
        padding-top: 126px !important; /* 80px + 46px admin bar */
    }
}

/* Shop Now — золотой с пульсацией */
.blc-hero .btn-primary {
    background: linear-gradient(135deg, #fff6e0, #f0cf82 55%, #c9a256) !important;
    color: #0e1b33 !important;
    animation: blc-pulse 2.2s ease-in-out infinite !important;
}
@keyframes blc-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240,207,130,0.55); }
    50% { box-shadow: 0 0 0 12px rgba(240,207,130,0); }
}

/* Push nav to the far right of the header */
#masthead .site-main-header-inner-wrap {
    gap: 48px !important;
}

#masthead .site-header-main-section-right {
    margin-left: auto !important;
}

@keyframes blc-pulse-orange {
    0%, 100% { box-shadow: 0 0 0 0 rgba(241, 90, 59,0.6); }
    50% { box-shadow: 0 0 0 10px rgba(241, 90, 59,0); }
}

/* Hero "Our Products" button — orange with pulsing glow */
.btn-orange-pulse {
    background: #F15A3B !important;
    color: #ffffff !important;
    animation: blc-pulse-orange 2.2s ease-in-out infinite;
}

/* ---------------------------------------------------------------
   Custom Footer
   --------------------------------------------------------------- */

.blc-footer {
    background: #0e1226;
    border-top: 3px solid #F15A3B;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.blc-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 24px 48px;
}

.blc-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
}

.blc-footer-heading {
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 20px;
}

/* Brand column */
.blc-footer-brand .custom-logo-link img,
.blc-footer-brand .custom-logo {
    max-width: 140px;
    height: auto;
    display: block;
    margin-bottom: 16px;
}

.blc-footer-tagline {
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 20px;
    line-height: 1.5;
}

.blc-footer-phone {
    display: block;
    color: #F15A3B;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 8px;
    line-height: 1.2;
}

.blc-footer-phone:hover {
    color: #F47358;
}

.blc-footer-email {
    display: block;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
}

.blc-footer-email:hover {
    color: #F15A3B;
}

/* Nav lists */
.blc-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blc-footer-links li {
    margin-bottom: 10px;
}

.blc-footer-links a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blc-footer-links a:hover {
    color: #F15A3B;
}

/* Get In Touch column */
.blc-footer-address {
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 20px;
}

.blc-footer-social {
    display: flex;
    gap: 12px;
}

.blc-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.blc-footer-social a:hover {
    border-color: #F15A3B;
    color: #F15A3B;
}

/* Bottom bar */
.blc-footer-bar {
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.blc-footer-bar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 24px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.blc-footer-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blc-footer-badges {
    display: flex;
    align-items: center;
    gap: 0;
}

.blc-footer-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 8px;
    letter-spacing: 0.5px;
}

.blc-coredevil-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 13px;
}

.blc-coredevil-logo {
    /* !important needed — Kadence's own woocommerce.min.css has
       ".woocommerce img, .woocommerce-page img { height:auto; max-width:
       100% }" (specificity 0,1,1, beats this class selector's 0,1,0) —
       body carries those classes on EVERY WooCommerce-context page
       (product/shop/cart/checkout), wrapping this footer logo too, so
       without !important this rule's height:22px loses there and the
       logo renders at its native 720x80px with nothing constraining
       either dimension (the homepage has no such body class, so it
       looked correct there — this is the same "some other page's body
       class silently defeats a plain class selector" pattern already
       seen elsewhere in this file). */
    height: 22px !important;
    width: auto !important;
    opacity: 0.85;
}

.blc-coredevil-link:hover .blc-coredevil-logo {
    opacity: 1;
}

.blc-footer-copy {
    color: rgba(255, 255, 255, 0.4);
}

/* Responsive — 2 columns tablet */
@media (max-width: 900px) {
    .blc-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

/* Responsive — 1 column mobile */
@media (max-width: 560px) {
    .blc-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .blc-footer-inner {
        padding: 40px 20px 32px;
    }

    .blc-footer-bar-inner {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
}

/* ---------------------------------------------------------------
   Header 3D cart icon
   --------------------------------------------------------------- */

.blc-cart-icon-item {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    position: relative !important;
    list-style: none !important;
}

.blc-cart-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(26, 47, 92, 0.15) !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(26, 47, 92, 0.08) !important;
    text-decoration: none !important;
    color: var(--blc-lt-text-dark) !important;
    line-height: 1 !important;
    padding: 0 !important;
    transition: border-color 0.25s ease, transform 0.25s ease !important;
}

.blc-cart-link:hover {
    border-color: #F15A3B !important;
    transform: scale(1.05) !important;
}

.blc-cart-link svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

.blc-cart-count {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: #F15A3B !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
    line-height: 1 !important;
    pointer-events: none;
}

.blc-cart-count:empty,
.blc-cart-count[data-count="0"] {
    display: none !important;
}

/* Bounce in when WooCommerce fragment replaces the element */
.blc-cart-count:not(:empty) {
    animation: blc-cart-bounce 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes blc-cart-bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.5); }
    65%  { transform: scale(0.85); }
    82%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ============ Products guillotine + cards ============ */
.blc-hero-visual-placeholder .blc-hero-visual{ position:relative;overflow:hidden;border-radius:18px;min-height:580px;height:100%;width:100%; }
.blc-hero-visual-placeholder #blc-products-guillotine{ position:absolute;inset:0; }
.blc-hero-visual-placeholder #blc-products-guillotine .blc-hero-printer-fallback{ position:absolute;inset:0; }
.blc-hero-visual-placeholder #blc-products-guillotine canvas{ position:relative;z-index:1; }
.blc-hero-visual-placeholder [data-guillotine-cards]{ position:absolute;inset:0;pointer-events:none;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:22px 16px; }
.blc-hero-visual-placeholder .blc-gc-row{ display:flex;flex-wrap:wrap;gap:12px;justify-content:center; }
.blc-hero-visual-placeholder .blc-gc-card{ pointer-events:auto;display:inline-flex;align-items:center;gap:9px;background:rgba(14,27,51,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:9px 15px;color:#fff;font-weight:600;font-size:13px;line-height:1;text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.28);opacity:0;transform:translateY(14px) scale(.95);transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), border-color .2s ease; }
.blc-hero-visual-placeholder .blc-gc-card svg{ width:22px;height:22px;color:#f0b878;flex:none; }
.blc-hero-visual-placeholder .blc-gc-card:hover{ border-color:rgba(241, 90, 59,.65);transform:translateY(-3px) scale(1);color:#fff; }
.blc-hero-visual-placeholder [data-guillotine-cards].is-revealed .blc-gc-card{ opacity:1;transform:none; }
.blc-hero-visual-placeholder [data-guillotine-cards].is-revealed .blc-gc-top .blc-gc-card:nth-child(1){ transition-delay:0s; }
.blc-hero-visual-placeholder [data-guillotine-cards].is-revealed .blc-gc-top .blc-gc-card:nth-child(2){ transition-delay:.08s; }
.blc-hero-visual-placeholder [data-guillotine-cards].is-revealed .blc-gc-top .blc-gc-card:nth-child(3){ transition-delay:.16s; }
.blc-hero-visual-placeholder [data-guillotine-cards].is-revealed .blc-gc-bottom .blc-gc-card:nth-child(1){ transition-delay:.26s; }
.blc-hero-visual-placeholder [data-guillotine-cards].is-revealed .blc-gc-bottom .blc-gc-card:nth-child(2){ transition-delay:.34s; }
.blc-hero-visual-placeholder [data-guillotine-cards].is-revealed .blc-gc-bottom .blc-gc-card:nth-child(3){ transition-delay:.42s; }
@media (prefers-reduced-motion: reduce){ .blc-hero-visual-placeholder .blc-gc-card{ transition:none; } }

/* ============ Products hero: light redesign — guillotine visual + cards ============
   Right-column reskin for the shop landing page. The background/typography/
   button/stats/header rules above are already shared with body.home via
   combined selectors — this part is products-only because the guillotine's
   DOM (.blc-hero-visual-placeholder wrapper, #blc-products-guillotine,
   .blc-gc-card) is structurally different from the homepage's 3D printer,
   so it can't reuse those selectors directly. Values (glow recipe, glass
   card look) are copied from the matching home-hero treatment. */

/* No boxed dark panel behind the machine — same "no photo to hide, just a
   soft grounding glow" treatment as the homepage printer. */
body.woocommerce-shop .blc-hero-visual-placeholder {
    background: none;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Base rule centers its child via flexbox (row direction) — swap to
       the printer's own column/stretch behavior so the widened 120% box
       below sizes/positions predictably instead of fighting a flex
       justify-content:center on the main axis. */
    display: block;
}

/* Drop the rounded-corner clip box too — same borderless "floating over
   the light hero" treatment as body.home .blc-hero-printer, needed once
   the box above is widened/lifted past its grid cell (an overflow:hidden
   ancestor would otherwise clip the enlarged machine). */
body.woocommerce-shop .blc-hero-visual-placeholder .blc-hero-visual {
    overflow: visible;
    border-radius: 0;
}

/* Soft brand glow behind the guillotine — identical recipe to the
   homepage printer's glow (body.home .blc-hero-printer::before/::after). */
body.woocommerce-shop #blc-products-guillotine::before {
    content: '';
    position: absolute;
    inset: 6% 4% 2%;
    background: radial-gradient(circle at center, rgba(99, 134, 255, 0.26) 0%, rgba(99, 134, 255, 0.10) 28%, transparent 60%);
    filter: blur(6px);
    z-index: 0;
    pointer-events: none;
}

body.woocommerce-shop #blc-products-guillotine::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 2%;
    height: 22%;
    background:
        radial-gradient(circle, rgba(49, 91, 255, 0.35) 0%, rgba(49, 91, 255, 0.18) 35%, rgba(49, 91, 255, 0) 72%),
        radial-gradient(38% 70% at 82% 40%, rgba(241, 90, 59, 0.20) 0%, rgba(241, 90, 59, 0) 70%);
    filter: blur(18px);
    z-index: 0;
    pointer-events: none;
}

/* Category cards: light glassmorphism instead of the dark navy chips. */
body.woocommerce-shop .blc-hero-visual-placeholder .blc-gc-card {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 22px rgba(63, 93, 180, 0.16);
    color: var(--blc-lt-text-dark);
}

body.woocommerce-shop .blc-hero-visual-placeholder .blc-gc-card svg {
    color: var(--blc-lt-orange);
}

body.woocommerce-shop .blc-hero-visual-placeholder .blc-gc-card:hover {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(241, 90, 59, 0.65);
    color: var(--blc-lt-text-dark);
}

/* ============ Shop archive: "View Details" hover button ============ */
.woocommerce ul.products li.product .add_to_cart_button {
    color: #F15A3B !important;
}
.woocommerce ul.products li.product .add_to_cart_button:hover {
    color: #D44F34 !important;
}

/* ============ Homepage Featured Products: match the real shop archive's
   "View Details" button exactly ============
   Kadence's own flat/text-only loop-button style (background:transparent,
   no border, uppercase, 80% font-size — see
   .woocommerce ul.products:not(.woo-archive-btn-button)
   li:where(:not(.woo-archive-btn-button)) .button:not(.kb-button) in
   Kadence's own woocommerce.min.css) is itself scoped to a .woocommerce
   ancestor class, which this homepage section's body (body.home) never
   carries — without a .woocommerce wrapper, the button instead falls
   back to Kadence's much richer sitewide default button style (solid
   navy pill), which is why these cards' "View Details" button looked
   completely different from the real shop page's even though the card
   MARKUP itself (wc_get_template_part('content','product')) is already
   identical. Replicated here, scoped to .blc-featured-products instead
   of relying on .woocommerce, so the computed style matches exactly
   regardless of body class — values taken directly from the real shop
   page's own computed style, not guessed. */
.blc-featured-products ul.products li.product .button:not(.kb-button) {
    background: rgba(0, 0, 0, 0) !important;
    padding: 0.5em 0 !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    letter-spacing: 0.05em !important;
    font-size: 80% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline !important;
    transition: color 0.2s ease;
}
.blc-featured-products ul.products li.product .add_to_cart_button {
    color: #F15A3B !important;
}
.blc-featured-products ul.products li.product .add_to_cart_button:hover {
    color: #D44F34 !important;
}

/* Kadence's real shop archive hides this button until hover (the
   ul.products.woo-archive-action-on-hover mechanism), which needs THREE
   separate .woocommerce-scoped rules working together (the hidden/
   revealed .product-action-wrap position, li.product's clipping
   overflow:hidden, and a .entry-content-wrap transform to make room)
   to avoid the revealed row just getting clipped off — replicating all
   three outside .woocommerce proved fragile (the revealed button ended
   up clipped at the card edge). Falling back to the simpler, reliable
   option the task explicitly allows instead: the button is always
   visible here rather than hover-revealed. Nothing below needs
   .woo-archive-action-on-hover's absolute-position/opacity dance at all.

   The spinner/checkmark SVG icons (only ever meant to show during/after
   an AJAX add-to-cart click, toggled via .loading/.added classes
   Kadence's own JS adds) are hidden by default via ANOTHER
   .woocommerce-scoped rule — without it, both icons rendered
   permanently alongside the arrow icon, overlapping it. */
.blc-featured-products ul.products li.product .button .kadence-spinner-svg,
.blc-featured-products ul.products li.product .button .kadence-check-svg {
    display: none;
}

/* Card alignment: reserve a consistent 2-line height for the title
   regardless of its actual length, so the price/button below it starts
   at the same Y position on every card in the row — a 1-line title no
   longer leaves its card's price sitting higher than a 2-line title's. */
.blc-featured-products .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 2.6em;
}

/* Same reasoning for the price line — a short price ("$49.95 GST Incl.")
   fits on one line while a wider range ("$199.00 – $699.00 GST Incl.")
   wraps its "GST Incl." suffix onto a second, so without a reserved
   height here the button below still ends up at different Y positions
   even with the title heights already equalized above. */
.blc-featured-products ul.products li.product .price {
    display: block;
    min-height: 2.8em;
}

/* ============ Shop archive: remove empty WooCommerce title hero ============ */
.product-archive-hero-section {
    display: none !important;
}

/* ============ Homepage + Products hero: light redesign ============
   Full light-theme flip. Every class touched here (.blc-hero,
   .blc-hero-slider, .blc-hero-textpanel, .blc-btn-outline,
   .blc-glass-card, header/nav...) is shared with the other hero pages
   (shop/about/contact/gallery/our-customers), so overrides are scoped
   under body.home and body.woocommerce-shop (the Products/shop landing
   page) — those two share the exact same background/typography/button/
   stats/header treatment via combined selectors below, so values are
   defined once. The other inner pages (about/contact/gallery/our-
   customers) are NOT included, so they keep the original dark photo-hero
   look untouched. The 3D-visual column (printer vs guillotine) differs
   structurally between the two pages, so it is NOT combined here —
   printer-only sizing/glow rules stay under body.home further down, and
   the guillotine gets its own body.woocommerce-shop rules near the end
   of this file. */

/* Photo slider swapped for a flat light gradient — no background photo
   on the homepage hero anymore. */
body.home .blc-hero-slider,
body.woocommerce-shop .blc-hero-slider {
    display: none;
}

body.home .blc-hero-overlay,
body.woocommerce-shop .blc-hero-overlay {
    display: none;
}

body.home .blc-hero,
body.woocommerce-shop .blc-hero {
    background:
        radial-gradient(circle at 18% 30%, #F8FAFF 0%, #EEF3FF 35%, transparent 60%),
        radial-gradient(circle at 72% 62%, rgba(108, 146, 255, 0.30) 0%, rgba(108, 146, 255, 0.10) 28%, transparent 58%),
        radial-gradient(circle at 88% 28%, rgba(210, 195, 255, 0.28) 0%, rgba(210, 195, 255, 0.10) 25%, transparent 50%),
        linear-gradient(135deg, #F6F8FF 0%, #EAF0FF 40%, #E4ECFF 70%, #EEF3FF 100%);
    color: var(--blc-lt-text-dark);
}

/* Decorative dot-grid, top-right corner — masked so it fades out toward
   the middle instead of ending in a hard-edged block. Purely decorative. */
body.home .blc-hero::before,
body.woocommerce-shop .blc-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    height: 380px;
    background-image: radial-gradient(rgba(140, 170, 255, 0.28) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 68%);
    mask-image: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 68%);
    pointer-events: none;
    z-index: 0;
}

/* Thin circle-outline accent, bottom-left corner — purely decorative. */
body.home .blc-hero::after,
body.woocommerce-shop .blc-hero::after {
    content: '';
    position: absolute;
    left: -70px;
    bottom: -70px;
    width: 340px;
    height: 340px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='95' fill='none' stroke='%238caaff' stroke-opacity='0.32' stroke-width='1'/><circle cx='100' cy='100' r='65' fill='none' stroke='%238caaff' stroke-opacity='0.32' stroke-width='1'/><circle cx='100' cy='100' r='35' fill='none' stroke='%23FF7A30' stroke-opacity='0.4' stroke-width='1'/></svg>");
    background-repeat: no-repeat;
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}

body.home .blc-hero-textpanel,
body.woocommerce-shop .blc-hero-textpanel {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
}

body.woocommerce-shop .blc-hero-textpanel {
    justify-content: flex-start;
    padding-top: 50px;
}

/* The paper-roll accent graphic was tuned gold-on-navy; fade it down so
   it stays a quiet background flourish on the new light panel. */
body.home .blc-hero-print-rolls,
body.woocommerce-shop .blc-hero-print-rolls {
    opacity: 0.28;
}

body.home h1.blc-hero-headline,
body.home .blc-hero-textpanel h1,
body.woocommerce-shop h1.blc-hero-headline,
body.woocommerce-shop .blc-hero-textpanel h1 {
    color: var(--blc-lt-text-dark) !important;
    font-size: clamp(1.9rem, 2vw + 0.85rem, 2.7rem);
    line-height: 1.05;
    overflow-wrap: break-word;
    font-weight: 800;
    text-shadow: none;
}

body.home .blc-hero-highlight,
body.woocommerce-shop .blc-hero-highlight {
    color: var(--blc-lt-orange);
    text-shadow: none;
}

/* Eyebrow / preheading — "BOLD BANNERS," in blue, "BUILT TO LAST" in
   orange. Markup only gives us a single text node, so the split is done
   with a linear-gradient text clip: first half blue, second half orange. */
body.home .blc-hero-accent-inner,
body.woocommerce-shop .blc-hero-accent-inner {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-style: normal;
    font-weight: 800;
    font-size: clamp(1.1rem, 1.4vw, 1.4rem);
    background: linear-gradient(90deg, var(--blc-lt-blue) 0%, var(--blc-lt-blue) 46%, var(--blc-lt-orange) 54%, var(--blc-lt-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--blc-lt-blue);
}

body.home .blc-hero-subtext,
body.woocommerce-shop .blc-hero-subtext {
    color: var(--blc-lt-text-para);
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    opacity: 1;
    text-shadow: none;
}

body.home .blc-btn,
body.woocommerce-shop .blc-btn {
    padding: 12px 24px;
    font-weight: 700;
}

body.home .blc-hero-ctas .blc-btn-orange-pulse,
body.woocommerce-shop .blc-hero-ctas .blc-btn-orange-pulse {
    background: var(--blc-lt-orange) !important;
    border-color: var(--blc-lt-orange) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 30px var(--blc-lt-orange-glow);
    animation: blc-pulse-orange-light 2.2s ease-in-out infinite;
}

body.home .blc-hero-ctas .blc-btn-orange-pulse:hover,
body.woocommerce-shop .blc-hero-ctas .blc-btn-orange-pulse:hover {
    background: var(--blc-lt-orange-deep) !important;
    border-color: var(--blc-lt-orange-deep) !important;
}

@keyframes blc-pulse-orange-light {
    0%, 100% { box-shadow: 0 12px 30px var(--blc-lt-orange-glow), 0 0 0 0 rgba(241, 90, 59, 0.45); }
    50% { box-shadow: 0 12px 30px var(--blc-lt-orange-glow), 0 0 0 12px rgba(241, 90, 59, 0); }
}

body.home .blc-btn-outline,
body.woocommerce-shop .blc-btn-outline {
    background: rgba(255, 255, 255, 0.22) !important;
    color: var(--blc-lt-text-dark) !important;
    border: 1.5px solid rgba(22, 43, 107, 0.45) !important;
}

body.home .blc-btn-outline:hover,
body.woocommerce-shop .blc-btn-outline:hover {
    background: rgba(22, 43, 107, 0.08);
    color: var(--blc-lt-text-dark);
    border-color: rgba(22, 43, 107, 0.65) !important;
}

/* Bottom glass plaque: one frosted bar spanning the hero, the 4 stats
   living inside it as columns separated by thin dividers — not 4
   separate frosted cards. Markup adds .blc-glass-card-icon/-body only
   in front-page.php, so this layout override is scoped to body.home
   only — the shop/about/contact/gallery stat rows keep the original
   centered dark-glass cards (their markup has no icon element anyway). */
body.home .blc-hero-stats,
body.woocommerce-shop .blc-hero-stats {
    gap: 0;
    background: rgba(255, 255, 255, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: 30px;
    box-shadow:
        0 18px 50px rgba(63, 93, 180, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    overflow: hidden;
    margin-top: -45px;
}

body.home .blc-glass-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 18px 18px;
    box-shadow: none;
}

/* Products stats markup has no icon wrapper (just value + label, like
   the shop/about/contact/gallery cards), so it keeps the base centered/
   stacked card layout — only the glass styling (transparent, no border/
   shadow of its own, sits inside the shared frosted plaque) is flipped
   to match the home treatment. */
body.woocommerce-shop .blc-glass-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 18px 18px;
}

/* Divider between columns — skip before the first card. */
body.home .blc-glass-card:not(:first-child)::before,
body.woocommerce-shop .blc-glass-card:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: rgba(49, 91, 255, 0.18);
}

body.home .blc-glass-card-icon,
body.woocommerce-shop .blc-glass-card-icon,
body.blc-light-header .blc-glass-card-icon {
    flex: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(49, 91, 255, 0.10);
    color: var(--blc-lt-blue);
    border-radius: 12px;
}

body.home .blc-glass-card-icon svg,
body.woocommerce-shop .blc-glass-card-icon svg,
body.blc-light-header .blc-glass-card-icon svg {
    width: 24px;
    height: 24px;
}

body.home .blc-glass-card-body,
body.woocommerce-shop .blc-glass-card-body {
    min-width: 0;
}

body.home .blc-glass-card-label,
body.woocommerce-shop .blc-glass-card-label {
    color: var(--blc-lt-text-para);
    opacity: 0.85;
}

/* Per-card accent colors: 24Hr orange, 100% blue, Free blue/indigo,
   1000+ lilac-blue. Icon-background variants only fire on home (no icon
   element exists in the products stats markup). */
body.home .blc-glass-card:nth-child(1) .blc-glass-card-value,
body.home .blc-glass-card:nth-child(1) .blc-glass-card-icon,
body.woocommerce-shop .blc-glass-card:nth-child(1) .blc-glass-card-value {
    color: var(--blc-lt-orange);
}
body.home .blc-glass-card:nth-child(1) .blc-glass-card-icon {
    background: rgba(241, 90, 59, 0.12);
}

body.home .blc-glass-card:nth-child(2) .blc-glass-card-value,
body.home .blc-glass-card:nth-child(2) .blc-glass-card-icon,
body.woocommerce-shop .blc-glass-card:nth-child(2) .blc-glass-card-value {
    color: var(--blc-lt-blue);
}

body.home .blc-glass-card:nth-child(3) .blc-glass-card-value,
body.home .blc-glass-card:nth-child(3) .blc-glass-card-icon,
body.woocommerce-shop .blc-glass-card:nth-child(3) .blc-glass-card-value {
    color: var(--blc-lt-blue);
}

body.home .blc-glass-card:nth-child(4) .blc-glass-card-value,
body.home .blc-glass-card:nth-child(4) .blc-glass-card-icon,
body.woocommerce-shop .blc-glass-card:nth-child(4) .blc-glass-card-value {
    color: var(--blc-lt-lilac-blue);
}
body.home .blc-glass-card:nth-child(4) .blc-glass-card-icon {
    background: rgba(106, 114, 255, 0.12);
}

/* Printer container: bigger + dominant on the right half, no boxed
   frosted panel behind it (there's no photo to hide anymore) — just a
   soft grounding shadow under the machine instead of a dark plaque.
   The machine should read as almost as tall as the hero itself, its
   top edge level with the headline, sitting close to the text column
   instead of floating as an isolated island on the right. */
body.home .blc-hero,
body.woocommerce-shop .blc-hero {
    min-height: 0;
}

body.home .blc-hero-grid,
body.woocommerce-shop .blc-hero-grid {
    min-height: 0;
}

body.home .blc-hero-content,
body.woocommerce-shop .blc-hero-content {
    max-width: 640px;
}

body.home .blc-hero-printer {
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Desktop-only sizing: everything below is scoped above the 900px
   breakpoint where the grid stacks to a single column (see the shared
   @media (max-width: 900px) rule) — the mobile stack keeps its own
   compact aspect-ratio-based printer sizing untouched. */
@media (min-width: 901px) {
    /* Wider right column for the printer/guillotine (spec: ~44-46% text /
       54-56% visual), and much closer together than the base 48px gap so
       the machine doesn't read as an isolated island. Shared with the
       Products hero so the two pages sit at the identical height under
       the fixed navbar with the identical column gap. */
    body.home .blc-hero-grid {
        grid-template-columns: 46% 54%;
        /* Snug up under the fixed navbar instead of the generic 60px
           top padding, and a much smaller bottom padding so the checks
           row doesn't add extra dead space of its own. */
        padding: 20px 24px 24px;
        column-gap: 20px;
        row-gap: 16px;
    }

    /* Products/shop hero: text / 3D visual / floating features card —
       three real grid columns now that .blc-float-panel is a direct
       .blc-hero-grid child (see template-parts/hero-generic.php). */
    body.woocommerce-shop .blc-hero-grid {
        grid-template-columns: minmax(400px, 40%) 1fr 260px;
        align-items: start;
        padding: 20px 24px 24px;
        column-gap: 20px;
        row-gap: 16px;
    }

    /* Forces the grid row itself tall (align-items: stretch on the
       grid then stretches the text column to match) so the printer
       column gets real vertical room to grow into, instead of
       shrinking to the shorter text column's natural height. The
       printer's rendered SIZE is driven mainly by its WIDTH (see
       .blc-hero-printer below — width is comfortably >= this
       min-height, so width stays the camera auto-fit's limiting axis
       and the machine doesn't visibly shrink even though this box is
       shorter than before). */
    body.home .blc-hero-visual {
        min-height: 740px;
        /* The transform below visually lifts the printer box by
           --blc-printer-lift, but a CSS transform never changes the
           element's box for LAYOUT purposes — the grid row still
           reserves the full untransformed height. Left uncompensated,
           that's dead space at the bottom (pushing the stats bar/checks
           row down the page) PLUS the row gets stretched to match
           this column even though the text column's real content is
           much shorter. This negative margin pulls the reserved row
           height down close to the text column's own natural height,
           so the row after the hero starts right under the shorter of
           the two columns' actual visible content instead of an
           inflated stretch height — while staying short of the
           printer's own visible bottom edge (lift-compensated) so nothing
           overlaps the machine/banner. */
        margin-bottom: -220px;
    }

    /* The camera auto-fit in hero-printer.js centers the machine's
       bounding sphere inside whatever aspect ratio the container ends
       up with — since the container is much taller than the machine
       itself, that leaves empty canvas space above the model even
       though the container's own box already starts flush with the
       headline. A pure paint-time transform (no layout/JS impact)
       shifts the rendered canvas up so the model's top edge lands
       near the headline instead of floating mid-column; .blc-hero's
       overflow: hidden clips the now off-canvas empty space above.
       Widening the box past 100% (instead of just the grid cell's
       54%) makes the auto-fit camera render the machine noticeably
       bigger — the fit is driven by container pixel size, not the
       grid math — and translateX pulls that bigger box left, over
       the gap, so it reads as dominating the right half close to the
       text instead of a smaller island centered in its own column. */
    body.home .blc-hero-printer {
        width: 120%;
        max-height: 1040px;
        transform: translateY(calc(-1 * var(--blc-printer-lift))) translateX(-90px);
    }

    /* Guillotine equivalent of the two rules above: .blc-hero-visual-
       placeholder is the grid cell (plays the role of .blc-hero-visual on
       home), .blc-hero-visual-placeholder .blc-hero-visual is the bleeding
       box that actually holds #blc-products-guillotine (inset: 0, so it
       just inherits whatever size/position this box ends up at — no
       separate transform needed on the mount itself). Same lift/widen
       recipe and the same --blc-printer-lift value, so the guillotine
       reads at the same scale and sits at the same height as the printer. */
    body.woocommerce-shop .blc-hero-visual-placeholder {
        min-height: 740px;
        margin-bottom: -220px;
    }

    body.woocommerce-shop .blc-hero-visual-placeholder .blc-hero-visual {
        width: 112%;
        max-height: 1040px;
        transform: translateY(calc(-0.3 * var(--blc-printer-lift))) translateX(-80px);
    }

    /* Narrower text column (3-col grid) no longer fits all three trust
       badges on one row at their default wrap — force single row here,
       home's own .blc-hero-trustrow rule above is untouched. */
    body.woocommerce-shop .blc-hero-trustrow {
        flex-wrap: nowrap;
    }

    body.woocommerce-shop .blc-hero-trust-text {
        white-space: nowrap;
    }
}

/* Large soft glow behind the machine (replaces the dark-hero brand glow
   used on inner pages). */
body.home .blc-hero-printer::before {
    background: radial-gradient(circle at center, rgba(99, 134, 255, 0.26) 0%, rgba(99, 134, 255, 0.10) 28%, transparent 60%);
    filter: blur(6px);
}

/* "Stage" the machine stands on: a soft blue oval light pooling beneath
   it, plus a warm orange glow at the lower-right where the banner exits. */
body.home .blc-hero-printer::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 2%;
    height: 22%;
    background:
        radial-gradient(circle, rgba(49, 91, 255, 0.35) 0%, rgba(49, 91, 255, 0.18) 35%, rgba(49, 91, 255, 0) 72%),
        radial-gradient(38% 70% at 82% 40%, rgba(241, 90, 59, 0.20) 0%, rgba(241, 90, 59, 0) 70%);
    filter: blur(18px);
    z-index: 0;
    pointer-events: none;
}

/* ============ Free Templates hero: same light redesign, no visual
   column ============
   A THIRD page needs this exact "soft luminous premium-tech" light
   treatment (background gradient, text colors, buttons, stats), on top
   of body.home/body.woocommerce-shop above — added additively here
   rather than editing the many multi-selector rules above in place
   (each already lists two selectors per property across several lines;
   safer to add a parallel block than risk mis-editing those). Deliberately
   does NOT include anything from the .blc-hero-printer/.blc-hero-visual/
   guillotine rules right above — this page has no 3D visual column at
   all (its .blc-hero-visual-placeholder is left empty by page-free-
   templates.php), so only the background/text/button/stats treatment is
   needed. Uses the SAME body.blc-light-header marker class the header
   rules just below already key off of (see the body_class filter in
   functions.php) — one class now drives both header AND hero for this
   page, rather than inventing a second marker. Stats use the
   body.woocommerce-shop styling specifically (plain cards, no icon
   wrapper) since hero-generic.php's stat markup has no icon element,
   matching the Products page's own markup rather than home's. */
body.blc-light-header .blc-hero-slider,
body.blc-light-header .blc-hero-overlay {
    display: none;
}

body.blc-light-header .blc-hero {
    background:
        radial-gradient(circle at 18% 30%, #F8FAFF 0%, #EEF3FF 35%, transparent 60%),
        radial-gradient(circle at 72% 62%, rgba(108, 146, 255, 0.30) 0%, rgba(108, 146, 255, 0.10) 28%, transparent 58%),
        radial-gradient(circle at 88% 28%, rgba(210, 195, 255, 0.28) 0%, rgba(210, 195, 255, 0.10) 25%, transparent 50%),
        linear-gradient(135deg, #F6F8FF 0%, #EAF0FF 40%, #E4ECFF 70%, #EEF3FF 100%);
    color: var(--blc-lt-text-dark);
    min-height: 0;
}

body.blc-light-header .blc-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    height: 380px;
    background-image: radial-gradient(rgba(140, 170, 255, 0.28) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 68%);
    mask-image: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 68%);
    pointer-events: none;
    z-index: 0;
}

body.blc-light-header .blc-hero::after {
    content: '';
    position: absolute;
    left: -70px;
    bottom: -70px;
    width: 340px;
    height: 340px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='95' fill='none' stroke='%238caaff' stroke-opacity='0.32' stroke-width='1'/><circle cx='100' cy='100' r='65' fill='none' stroke='%238caaff' stroke-opacity='0.32' stroke-width='1'/><circle cx='100' cy='100' r='35' fill='none' stroke='%23FF7A30' stroke-opacity='0.4' stroke-width='1'/></svg>");
    background-repeat: no-repeat;
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}

body.blc-light-header .blc-hero-grid {
    min-height: 0;
}

body.blc-light-header .blc-hero-content {
    max-width: 640px;
}

body.blc-light-header .blc-hero-textpanel {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
}

body.blc-light-header .blc-hero-print-rolls {
    opacity: 0.28;
}

body.blc-light-header h1.blc-hero-headline,
body.blc-light-header .blc-hero-textpanel h1 {
    color: var(--blc-lt-text-dark) !important;
    font-size: clamp(1.9rem, 2vw + 0.85rem, 2.7rem);
    line-height: 1.05;
    overflow-wrap: break-word;
    font-weight: 800;
    text-shadow: none;
}

body.blc-light-header .blc-hero-highlight {
    color: var(--blc-lt-orange);
    text-shadow: none;
}

body.blc-light-header .blc-hero-accent-inner {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-style: normal;
    font-weight: 800;
    font-size: clamp(1.1rem, 1.4vw, 1.4rem);
    background: linear-gradient(90deg, var(--blc-lt-blue) 0%, var(--blc-lt-blue) 46%, var(--blc-lt-orange) 54%, var(--blc-lt-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--blc-lt-blue);
}

body.blc-light-header .blc-hero-subtext {
    color: var(--blc-lt-text-para);
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    opacity: 1;
    text-shadow: none;
}

body.blc-light-header .blc-btn {
    padding: 12px 24px;
    font-weight: 700;
}

body.blc-light-header .blc-hero-ctas .blc-btn-orange-pulse {
    background: var(--blc-lt-orange) !important;
    border-color: var(--blc-lt-orange) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 30px var(--blc-lt-orange-glow);
    animation: blc-pulse-orange-light 2.2s ease-in-out infinite;
}

body.blc-light-header .blc-hero-ctas .blc-btn-orange-pulse:hover {
    background: var(--blc-lt-orange-deep) !important;
    border-color: var(--blc-lt-orange-deep) !important;
}

body.blc-light-header .blc-btn-outline {
    background: rgba(255, 255, 255, 0.22) !important;
    color: var(--blc-lt-text-dark) !important;
    border: 1.5px solid rgba(22, 43, 107, 0.45) !important;
}

body.blc-light-header .blc-btn-outline:hover {
    background: rgba(22, 43, 107, 0.08);
    color: var(--blc-lt-text-dark);
    border-color: rgba(22, 43, 107, 0.65) !important;
}

body.blc-light-header .blc-hero-stats {
    gap: 0;
    background: rgba(255, 255, 255, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: 30px;
    box-shadow:
        0 18px 50px rgba(63, 93, 180, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    overflow: hidden;
}

body.blc-light-header .blc-glass-card {
    position: relative;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

body.blc-light-header .blc-glass-card:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: rgba(49, 91, 255, 0.18);
}

body.blc-light-header .blc-glass-card-label {
    color: var(--blc-lt-text-para);
    opacity: 0.85;
}

body.blc-light-header .blc-glass-card:nth-child(1) .blc-glass-card-value {
    color: var(--blc-lt-orange);
}
body.blc-light-header .blc-glass-card:nth-child(2) .blc-glass-card-value,
body.blc-light-header .blc-glass-card:nth-child(3) .blc-glass-card-value {
    color: var(--blc-lt-blue);
}
body.blc-light-header .blc-glass-card:nth-child(4) .blc-glass-card-value {
    color: var(--blc-lt-lilac-blue);
}

/* No 3D visual column on this page at all (unlike home's printer /
   shop's guillotine) — page-free-templates.php never passes a
   $visual_callable into hero-generic.php, so .blc-hero-visual-placeholder
   would otherwise show as a plain, unstyled gray box with nothing in it
   (its own default background, normally invisible on the other inner
   pages since the photo slider shows through behind it there — this
   page hides that slider instead). Hidden entirely, with the grid
   collapsed to one column so the text panel isn't left stranded next
   to empty space. */
body.blc-light-header .blc-hero-visual-placeholder {
    display: none;
}

@media (min-width: 901px) {
    body.blc-light-header .blc-hero-grid {
        grid-template-columns: 1fr;
        padding: 20px 24px 24px;
        row-gap: 16px;
    }
}

/* Our Customers is the one blc-light-header page that DOES get a 3D
   visual column (the showroom scene, inc/showroom-scene.php) — reverses
   the two rules just above, scoped via the .blc-showroom-active class
   (added only on this page) so About/Contact/Gallery/Banner Designer
   keep the no-visual, single-column layout untouched. Higher specificity
   (two classes vs one) wins over the broad rules above without !important. */
body.blc-light-header.blc-showroom-active .blc-hero-visual-placeholder {
    display: flex;
    overflow: hidden;
}

@media (min-width: 901px) {
    body.blc-light-header.blc-showroom-active .blc-hero-grid {
        grid-template-columns: 1.1fr 0.9fr;
        padding: 20px 24px 24px;
        row-gap: 16px;
    }
}

.blc-hero-visual-placeholder #blc-showroom-scene {
    position: relative;
    width: 100%;
    height: 100%;
}

.blc-hero-visual-placeholder #blc-showroom-scene canvas {
    position: relative;
    z-index: 1;
}

/* Showroom fallback glyph (simple building/skyline silhouette) instead of
   the printer glyph .blc-hero-printer-fallback uses by default elsewhere. */
.blc-hero-visual-placeholder #blc-showroom-scene .blc-hero-printer-fallback {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'><rect x='40' y='230' width='320' height='14' rx='4' fill='%231a2f5c'/><rect x='70' y='150' width='60' height='90' rx='4' fill='%2324407a'/><rect x='270' y='130' width='60' height='110' rx='4' fill='%2324407a'/><rect x='150' y='90' width='100' height='150' rx='6' fill='%231a2f5c'/><rect x='168' y='115' width='64' height='40' rx='3' fill='%239fc2ec'/><rect x='168' y='165' width='64' height='40' rx='3' fill='%239fc2ec'/><rect x='190' y='205' width='20' height='30' fill='%23e8622c'/></svg>");
}

#blc-showroom-scene.is-3d-ready .blc-hero-printer-fallback {
    display: none;
}

/* ---------------------------------------------------------------
   Hero trust row (under the CTAs) — 4 quiet reassurance points
   (2 x 2 grid by default, one line on desktop 1280px+)
   ---------------------------------------------------------------- */
body.home .blc-hero-trustrow,
body.woocommerce-shop .blc-hero-trustrow {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 14px 22px;
    margin-top: 22px;
}

body.home .blc-hero-trust-item,
body.woocommerce-shop .blc-hero-trust-item {
    display: flex;
    align-items: center;
    gap: 9px;
}

body.home .blc-hero-trust-icon,
body.woocommerce-shop .blc-hero-trust-icon {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--blc-lt-blue);
}

body.home .blc-hero-trust-text,
body.woocommerce-shop .blc-hero-trust-text {
    font-size: 13px;
    line-height: 1.28;
    font-weight: 600;
    color: var(--blc-lt-text-dark);
}

/* Desktop (1280px+): all four trust badges on one line. The shop hero's
   text column is narrower than home's, so its badges run slightly more
   compact to fit. Below 1280px the row stays a 2 x 2 grid (rule above). */
@media (min-width: 1280px) {
    body.home .blc-hero-trustrow,
    body.woocommerce-shop .blc-hero-trustrow {
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
    }

    body.home .blc-hero-trust-text,
    body.woocommerce-shop .blc-hero-trust-text {
        white-space: nowrap;
    }

    body.woocommerce-shop .blc-hero-trustrow {
        gap: 10px;
    }

    body.woocommerce-shop .blc-hero-trust-item {
        gap: 6px;
    }

    body.woocommerce-shop .blc-hero-trust-icon {
        width: 18px;
        height: 18px;
    }

    body.woocommerce-shop .blc-hero-trust-text {
        font-size: 12px;
    }
}

/* ---------------------------------------------------------------
   Hero bottom checkmark strip — quiet closing line under the stats
   ---------------------------------------------------------------- */
body.home .blc-hero-checks {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 18px;
    margin-top: 10px;
}

body.home .blc-hero-check-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--blc-lt-text-muted);
}

body.home .blc-hero-check-icon {
    flex: none;
    width: 14px;
    height: 14px;
    opacity: 0.85;
}

body.home .blc-hero-check-sep {
    color: var(--blc-lt-text-muted);
    opacity: 0.45;
    font-size: 12px;
}

@media (max-width: 560px) {
    body.home .blc-hero-checks {
        gap: 8px 12px;
    }
    body.home .blc-hero-check-sep {
        display: none;
    }
}

/* ---------------------------------------------------------------
 * Product Features (single product page) — see inc/product-features.php.
 * A static two-column checkmark grid (matsrus.moo.com "Key Features"
 * layout as the reference) — no expand/collapse, just an icon + short
 * title per entry, in the site's own navy/orange instead of that
 * reference's green.
 * --------------------------------------------------------------- */
.blc-product-features {
    /* The product gallery/summary columns are floated (float:left/right),
       not a grid — without this, this block starts filling the leftover
       inline space beside the still-active floats instead of below them. */
    clear: both;
    max-width: 900px;
    margin: 28px 0;
}

.blc-product-features-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--blc-lt-text-dark, #162B6B);
    margin: 0 0 16px;
}

.blc-product-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 36px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 600px) {
    .blc-product-features-grid {
        grid-template-columns: 1fr;
    }
}

.blc-product-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.blc-product-feature-check {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--blc-orange, #F15A3B);
}

.blc-product-feature-item span {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--blc-lt-text-dark, #162B6B);
}

/* .blc-avia-toggle is still used by any Description toggle content the
 * migration script left in place (flagged as not a short feature claim —
 * see blc-features-migration.php) — kept distinct from the grid above. */
.blc-avia-toggle {
    background: #fff;
    border: 1px solid rgba(26, 47, 92, 0.12);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

.blc-avia-toggle summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 18px;
    font-weight: 600;
    color: var(--blc-lt-text-dark, #162B6B);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.blc-avia-toggle summary::-webkit-details-marker {
    display: none;
}

.blc-avia-toggle summary::after {
    content: '+';
    font-size: 20px;
    line-height: 1;
    color: var(--blc-orange, #F15A3B);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.blc-avia-toggle[open] summary::after {
    transform: rotate(45deg);
}

.blc-avia-toggle summary:hover {
    background: rgba(26, 47, 92, 0.03);
}

.blc-avia-toggle > div {
    padding: 0 18px 16px;
    color: var(--blc-lt-text-para, #243A73);
    line-height: 1.6;
}

/* ============ Homepage: Online Design Experience section ============
   Large rounded container with headline + feature cards (top),
   monitors side-by-side + feature list + AR phone (middle),
   CTA anchored to left column, and bottom workflow.
   Typography, buttons and colors match the hero section exactly.
   ----------------------------------------------------------------- */

.blc-online {
    background: #ffffff;
    padding: 56px 0;
    overflow: hidden;
}

.blc-online-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(28px, 3vw, 48px);
    background:
        radial-gradient(circle at 18% 22%, #F8FAFF 0%, #EEF3FF 38%, transparent 62%),
        radial-gradient(circle at 78% 68%, rgba(108, 146, 255, 0.12) 0%, rgba(108, 146, 255, 0.04) 28%, transparent 55%),
        linear-gradient(135deg, #F6F8FF 0%, #EAF0FF 40%, #E4ECFF 70%, #F0F4FF 100%);
    border-radius: 32px;
    border: 1px solid rgba(49, 91, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.blc-online-container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 280px;
    background-image: radial-gradient(rgba(140, 170, 255, 0.18) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 65%);
    mask-image: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 65%);
    pointer-events: none;
    z-index: 0;
}

.blc-online-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blc-lt-orange);
    margin-bottom: 20px;
    padding: 4px 12px;
    border: 1px solid rgba(241, 90, 59, 0.25);
    border-radius: 999px;
    background: rgba(241, 90, 59, 0.06);
    position: relative;
    z-index: 1;
}

/* ---- TOP: Headline left + Feature cards right ---- */

.blc-online-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.blc-online-top-text {
    max-width: 520px;
    display: flex;
    flex-direction: column;
}

.blc-online-heading {
    font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.9rem, 2vw + 0.85rem, 2.7rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--blc-lt-text-dark);
    margin: 0 0 16px;
}

.blc-online-heading-highlight {
    color: var(--blc-lt-orange);
}

.blc-online-desc {
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    font-weight: 500;
    color: var(--blc-lt-text-para);
    line-height: 1.55;
    margin: 0 0 24px;
    opacity: 0.92;
}

/* CTA anchored to left column flow */
.blc-online-ctas {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.blc-online-ctas .blc-btn-orange-pulse {
    background: var(--blc-lt-orange) !important;
    border-color: var(--blc-lt-orange) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 30px var(--blc-lt-orange-glow);
    animation: blc-pulse-orange-light 2.2s ease-in-out infinite;
}

.blc-online-ctas .blc-btn-orange-pulse:hover {
    background: var(--blc-lt-orange-deep) !important;
    border-color: var(--blc-lt-orange-deep) !important;
}

.blc-online-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--blc-lt-text-dark);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
    padding-bottom: 1px;
}

.blc-online-link:hover {
    color: var(--blc-lt-orange);
    border-color: var(--blc-lt-orange);
}

.blc-online-link-arrow {
    font-size: 17px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.blc-online-link:hover .blc-online-link-arrow {
    transform: translateX(3px);
}

/* ---- Feature cards (top-right, 2x2) ---- */

.blc-online-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.blc-online-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 12px;
    box-shadow:
        0 1px 4px rgba(22, 43, 107, 0.03),
        0 1px 2px rgba(22, 43, 107, 0.01);
}

.blc-online-card-icon {
    flex: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(49, 91, 255, 0.07);
    border-radius: 6px;
    color: var(--blc-lt-blue);
}

.blc-online-card-icon svg {
    width: 14px;
    height: 14px;
}

.blc-online-card-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.blc-online-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--blc-lt-text-dark);
    line-height: 1.25;
}

.blc-online-card-badge {
    display: inline-flex;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--blc-lt-orange);
    background: rgba(241, 90, 59, 0.10);
    border: 1px solid rgba(241, 90, 59, 0.2);
    border-radius: 999px;
    padding: 0 5px;
    line-height: 1.3;
    margin: 1px 0;
}

.blc-online-card-desc {
    font-size: 11px;
    font-weight: 500;
    color: var(--blc-lt-text-muted);
    line-height: 1.3;
    opacity: 0.85;
}

/* ---- MAIN ROW: monitors + features + phone ---- */

.blc-online-main {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: clamp(24px, 2.5vw, 40px);
    align-items: center;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

/* Monitors pair */
.blc-online-monitors {
    display: flex;
    align-items: center;
    gap: 48px;
    position: relative;
}

/* Sync connection (between monitors only) */
.blc-online-sync {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blc-online-sync-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    z-index: 2;
    position: relative;
}

.blc-online-sync-icon svg {
    width: 14px;
    height: 14px;
    color: var(--blc-lt-orange);
}

.blc-online-sync-line {
    position: absolute;
    width: 60px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--blc-lt-orange), var(--blc-lt-blue));
    border-radius: 2px;
    opacity: 0.4;
}

.blc-online-sync-pulse {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blc-lt-orange);
    animation: blc-sync-pulse-ref 2.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(241, 90, 59, 0.4);
    opacity: 0.8;
}

@keyframes blc-sync-pulse-ref {
    0% { transform: translateX(-30px) scale(1); opacity: 0; }
    20% { opacity: 1; }
    50% { transform: translateX(30px) scale(1.1); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(-30px) scale(1); opacity: 0; }
}

.blc-online-sync-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--blc-lt-blue);
    animation: blc-sync-dot-ref 2.5s ease-in-out infinite;
    opacity: 0;
}

.blc-online-sync-dot-1 { animation-delay: 1.25s; }

@keyframes blc-sync-dot-ref {
    0% { transform: translateX(-35px); opacity: 0; }
    25% { opacity: 1; }
    50% { transform: translateX(35px); opacity: 1; }
    75% { opacity: 0; }
    100% { transform: translateX(-35px); opacity: 0; }
}

/* ---- Monitors ---- */

.blc-online-monitor {
    position: relative;
    width: clamp(275px, 24vw, 355px);
    flex: none;
}

.blc-online-monitor-body {
    background: #1a1a2e;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

.blc-online-screen { background: #0f1228; }

.blc-online-screen-topbar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    background: #1e1e36;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.blc-online-dot-close { width: 5px; height: 5px; border-radius: 50%; background: #ff5f56; flex: none; }
.blc-online-dot-min { width: 5px; height: 5px; border-radius: 50%; background: #ffbd2e; flex: none; }
.blc-online-dot-max { width: 5px; height: 5px; border-radius: 50%; background: #27c93f; flex: none; }

.blc-online-topbar-title {
    font-size: 6.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
}

.blc-online-top-tools {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}

.blc-online-top-tools svg { width: 7px; height: 7px; color: rgba(255, 255, 255, 0.25); flex: none; }

.blc-online-top-sep {
    width: 1px;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 2px;
}

.blc-online-screen-main {
    display: flex;
    height: clamp(110px, 12vw, 150px);
}

.blc-online-screen-tools {
    width: 22px;
    background: #14142b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 2px;
    flex: none;
}

.blc-online-tool {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.04);
    cursor: default;
}

.blc-online-tool svg { width: 10px; height: 10px; color: rgba(255, 255, 255, 0.3); flex: none; }

.blc-online-tool-active { background: rgba(241, 90, 59, 0.25); }
.blc-online-tool-active svg { color: var(--blc-lt-orange); }

.blc-online-screen-canvas {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    position: relative;
    background: #161b3a;
}

.blc-online-canvas-banner {
    width: 65%;
    height: 45%;
    border-radius: 3px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
    background: linear-gradient(135deg, #1a2f5c 0%, #24407a 100%);
    animation: blc-online-banner-move 6s ease-in-out infinite;
}

.blc-online-banner-b {
    animation: blc-online-banner-sync 6s ease-in-out infinite;
}

@keyframes blc-online-banner-move {
    0%, 20% { transform: translate(0, 0) scale(1); }
    35%, 45% { transform: translate(8px, 6px) scale(1.04); }
    55%, 100% { transform: translate(0, 0) scale(1); }
}

@keyframes blc-online-banner-sync {
    0%, 25% { transform: translate(0, 0) scale(1); }
    42%, 52% { transform: translate(8px, 6px) scale(1.04); }
    62%, 100% { transform: translate(0, 0) scale(1); }
}

.blc-online-banner-text {
    font-size: 6px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1;
}

.blc-online-banner-accent { color: var(--blc-lt-orange); }

.blc-online-handle {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #fff;
    border: 1px solid var(--blc-lt-orange);
    border-radius: 1px;
    opacity: 0.7;
}

.blc-handle-tl { top: -3px; left: -3px; }
.blc-handle-tr { top: -3px; right: -3px; }
.blc-handle-bl { bottom: -3px; left: -3px; }
.blc-handle-br { bottom: -3px; right: -3px; }

.blc-online-cursor {
    position: absolute;
    width: 11px;
    height: 15px;
    opacity: 0.85;
    pointer-events: none;
}

.blc-online-cursor svg { width: 100%; height: 100%; display: block; }

.blc-cursor-left { animation: blc-cursor-move-left 6s ease-in-out infinite; }
.blc-cursor-right { animation: blc-cursor-move-right 6s ease-in-out infinite; }

@keyframes blc-cursor-move-left {
    0% { left: 3px; top: 40px; opacity: 0; }
    5%, 18% { left: 3px; top: 40px; opacity: 0.85; }
    25%, 30% { left: 28px; top: 26px; opacity: 0.85; }
    35%, 42% { left: 38px; top: 34px; opacity: 0.85; }
    48%, 55% { left: 38px; top: 34px; opacity: 0.5; }
    60%, 70% { left: 3px; top: 40px; opacity: 0; }
    100% { left: 3px; top: 40px; opacity: 0; }
}

@keyframes blc-cursor-move-right {
    0% { left: 3px; top: 40px; opacity: 0; }
    5%, 18% { left: 3px; top: 40px; opacity: 0.35; }
    25%, 30% { left: 28px; top: 26px; opacity: 0.6; }
    35%, 42% { left: 38px; top: 34px; opacity: 0.85; }
    48%, 55% { left: 38px; top: 34px; opacity: 0.5; }
    60%, 70% { left: 3px; top: 40px; opacity: 0; }
    100% { left: 3px; top: 40px; opacity: 0; }
}

.blc-online-monitor-label {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
    flex-wrap: wrap;
}

.blc-online-label-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #22c55e;
    flex: none;
    animation: blc-online-dot-pulse 2s ease-in-out infinite;
}

@keyframes blc-online-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

.blc-online-label-designer { background: var(--blc-lt-orange); }

.blc-online-badge-joined {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--blc-lt-orange);
    background: rgba(241, 90, 59, 0.12);
    border: 1px solid rgba(241, 90, 59, 0.2);
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: auto;
}

.blc-online-monitor-stand {
    width: 18px;
    height: 22px;
    background: rgba(26, 26, 46, 0.3);
    margin: 0 auto;
    border-radius: 0 0 3px 3px;
}

.blc-online-monitor-base {
    width: 56px;
    height: 5px;
    background: rgba(26, 26, 46, 0.2);
    margin: 0 auto;
    border-radius: 3px;
}

.blc-online-monitor-left { z-index: 2; }
.blc-online-monitor-right { opacity: 0.88; z-index: 1; }

/* ---- Feature list (between monitors and phone) ---- */

.blc-online-features-list {
    flex: none;
    max-width: 220px;
}

.blc-online-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blc-online-features li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--blc-lt-text-dark-alt);
    line-height: 1.3;
}

.blc-online-features li svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--blc-lt-orange);
}

.blc-online-feature-optional {
    font-size: 10px;
    font-weight: 600;
    color: var(--blc-lt-orange);
    opacity: 0.75;
    margin-left: 1px;
}

/* ---- Phone (far right) with real AR image ---- */

.blc-online-phone {
    flex: none;
    width: clamp(150px, 11vw, 195px);
    filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.20));
    animation: blc-online-phone-float 6s ease-in-out infinite;
}

@keyframes blc-online-phone-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.blc-online-phone-body {
    position: relative;
    background: #1a1a2e;
    border-radius: 18px;
    padding: 5px;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.10);
}

.blc-online-phone-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 5px;
    background: #0a0a1a;
    border-radius: 4px;
    z-index: 2;
}

.blc-online-phone-screen {
    background: #0f1228;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 9 / 19;
}

.blc-online-ar-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Phone caption */
.blc-online-phone-caption {
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--blc-lt-text-muted);
    line-height: 1.35;
    margin: 8px 0 0;
    opacity: 0.7;
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Collab badge above monitors ---- */

.blc-online-collab-badge {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blc-lt-text-muted);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(22, 43, 107, 0.08);
    border-radius: 999px;
    padding: 3px 12px;
    white-space: nowrap;
    z-index: 4;
    opacity: 0.75;
}

.blc-online-collab-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #22c55e;
    flex: none;
    animation: blc-online-dot-pulse 2s ease-in-out infinite;
}

/* ---- Selection box on left monitor ---- */

.blc-online-selection-box {
    position: absolute;
    top: 20%;
    left: 15%;
    width: 55%;
    height: 40%;
    border: 1px dashed rgba(241, 90, 59, 0.5);
    border-radius: 3px;
    pointer-events: none;
    z-index: 2;
}

/* ---- Blinking cursor on left monitor ---- */

.blc-online-blink-cursor {
    position: absolute;
    top: 60%;
    left: 30%;
    width: 1.5px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    animation: blc-blink 1.2s step-end infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes blc-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ---- Guide lines on right monitor ---- */

.blc-online-guide-line {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    opacity: 0.35;
}

.blc-guide-h {
    top: 48%;
    left: 5%;
    right: 15%;
    height: 0.5px;
    background: rgba(49, 91, 255, 0.6);
}

.blc-guide-v {
    top: 5%;
    bottom: 10%;
    left: 55%;
    width: 0.5px;
    background: rgba(49, 91, 255, 0.6);
}

/* ---- Designer cursor (orange outline) ---- */

.blc-cursor-designer {
    animation: blc-cursor-designer-move 7s ease-in-out infinite;
}

.blc-cursor-designer svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes blc-cursor-designer-move {
    0% { left: 5px; top: 50px; opacity: 0; }
    5%, 15% { left: 5px; top: 50px; opacity: 0.7; }
    22%, 28% { left: 40px; top: 30px; opacity: 0.7; }
    35%, 42% { left: 30px; top: 55px; opacity: 0.7; }
    48%, 55% { left: 5px; top: 50px; opacity: 0.4; }
    60%, 100% { left: 5px; top: 50px; opacity: 0; }
}

/* ---- Synced badge on right monitor ---- */

.blc-online-synced-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #22c55e;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 4px;
    padding: 1px 5px;
    pointer-events: none;
    z-index: 2;
    line-height: 1.2;
}

/* ---- Bottom 5-step workflow ---- */

.blc-online-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(22, 43, 107, 0.06);
    position: relative;
    z-index: 1;
}

.blc-online-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blc-online-step-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 2px;
}

.blc-online-step-icon svg {
    width: 22px;
    height: 22px;
    color: var(--blc-lt-text-dark);
    opacity: 0.45;
}

.blc-online-step-badge-optional {
    display: inline-flex;
    align-items: center;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blc-lt-orange);
    background: rgba(241, 90, 59, 0.10);
    border: 1px solid rgba(241, 90, 59, 0.2);
    border-radius: 999px;
    padding: 1px 6px;
    line-height: 1.2;
}

.blc-online-step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--blc-lt-text-dark);
    margin: 0;
    line-height: 1.2;
}

.blc-online-step-desc {
    font-size: 12px;
    font-weight: 500;
    color: var(--blc-lt-text-para);
    margin: 0;
    line-height: 1.4;
    opacity: 0.8;
}

/* ---- Responsive ---- */

@media (max-width: 1100px) {
    .blc-online-main {
        grid-template-columns: 1fr auto;
        gap: 16px;
    }

    .blc-online-phone {
        grid-column: 2;
        grid-row: 1;
    }

    .blc-online-features-list {
        max-width: 200px;
    }
}

@media (max-width: 900px) {
    .blc-online { padding: 60px 0; }

    .blc-online-container {
        padding: 36px 24px;
        border-radius: 24px;
    }

    .blc-online-top {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 32px;
    }

    .blc-online-cards { grid-template-columns: 1fr 1fr; }

    .blc-online-main {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .blc-online-monitors { justify-content: center; }

    .blc-online-features-list { max-width: none; }

    .blc-online-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 20px;
    }

    .blc-online-phone {
        justify-self: center;
        width: 140px;
    }

    .blc-online-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        margin-top: 28px;
        padding-top: 24px;
    }
}

@media (max-width: 560px) {
    .blc-online { padding: 40px 0; }

    .blc-online-container {
        padding: 28px 16px;
        border-radius: 20px;
    }

    .blc-online-cards { grid-template-columns: 1fr; }

    .blc-online-heading { margin-bottom: 14px; }

    .blc-online-desc { margin-bottom: 20px; }

    .blc-online-monitors {
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .blc-online-monitor { width: 155px; }
    .blc-online-screen-main { height: 85px; }
    .blc-online-screen-tools { width: 20px; }
    .blc-online-tool { width: 14px; height: 14px; }
    .blc-online-tool svg { width: 9px; height: 9px; }

    .blc-online-features { grid-template-columns: 1fr; }

    .blc-online-phone { width: 120px; }
    .blc-online-phone-notch { width: 26px; }

    .blc-online-steps {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 24px;
        padding-top: 20px;
    }

    .blc-online-step {
        text-align: center;
        align-items: center;
    }

    .blc-online-step-icon { justify-content: center; }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .blc-online-sync-pulse,
    .blc-online-sync-dot,
    .blc-online-canvas-banner,
    .blc-online-banner-b,
    .blc-cursor-left,
    .blc-cursor-right,
    .blc-online-label-dot {
        animation: none;
    }

    .blc-online-handle {
        opacity: 0.4;
    }
}

/* blc-float-panel — /shop/ hero */

.blc-float-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: clamp(220px, 24vw, 280px);
    padding: 14px 16px;
    margin-top: 10px;
    color: #1a2f5c;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(26, 47, 92, 0.12);
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(26, 47, 92, 0.10);
    overflow: hidden;
}

.blc-float-panel::before {
    content: '';
    display: block;
    height: 4px;
    background: #F15A3B;
    margin: -22px -20px 16px -20px;
}

.blc-float-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.blc-float-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #F15A3B;
    background: rgba(241, 90, 59, 0.12);
    border: 1px solid rgba(241, 90, 59, 0.25);
    border-radius: 999px;
    padding: 3px 10px 3px 8px;
}

.blc-live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #22c55e;
    flex: none;
    animation: blc-online-dot-pulse 2s ease-in-out infinite;
}

.blc-float-section-title {
    font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #1a2f5c;
    margin: 0;
}

.blc-float-section-desc {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(26, 47, 92, 0.60);
    line-height: 1.5;
    margin: 0;
}

.blc-float-section-features {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blc-float-section-features li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(26, 47, 92, 0.75);
    line-height: 1.3;
}

.blc-float-section-features li svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: #F15A3B;
}

.blc-float-divider {
    height: 1px;
    background: rgba(26, 47, 92, 0.08);
}

.blc-float-ar-icon {
    display: none;
    justify-content: center;
    margin-top: 4px;
}

.blc-float-phone {
    width: 40px;
    height: auto;
    color: rgba(26, 47, 92, 0.25);
}

.blc-float-cta-wrap {
    margin-top: 2px;
}

.blc-float-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--blc-orange);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.blc-float-cta:hover {
    background: #D44F34;
    color: #ffffff;
    transform: translateY(-1px);
}

/* blc-ft-editor-demo — /free-templates/ hero: animated banner editor */

.blc-ft-editor-demo {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(26, 47, 92, 0.18);
    background: #ffffff;
    margin-top: 32px;
}

.blc-ft-toolbar {
    background: #1a2f5c;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 8px;
}

.blc-ft-toolbar-dots {
    display: flex;
    gap: 6px;
}

.blc-ft-toolbar-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
}

.blc-ft-toolbar-dots span:nth-child(1) { background: #ff5f56; }
.blc-ft-toolbar-dots span:nth-child(2) { background: #ffbd2e; }
.blc-ft-toolbar-dots span:nth-child(3) { background: #27c93f; }

.blc-ft-toolbar-title {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 4px;
}

.blc-ft-toolbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blc-ft-btn-save {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    font-size: 10px;
    padding: 4px 10px;
    border: none;
}

.blc-ft-btn-print {
    background: #F15A3B;
    color: #ffffff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 12px;
    border: none;
}

.blc-ft-editor-body {
    display: flex;
    background: #f0f3f9;
    height: 340px;
}

.blc-ft-sidebar {
    width: 64px;
    background: #f5f7fb;
    border-right: 1px solid rgba(26, 47, 92, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 4px;
}

.blc-ft-tool {
    width: 52px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 16px;
    color: rgba(26, 47, 92, 0.45);
    cursor: pointer;
}

.blc-ft-tool-label {
    font-size: 8px;
    font-weight: 600;
    color: rgba(26, 47, 92, 0.4);
    line-height: 1;
}

.blc-ft-tool-active {
    background: rgba(241, 90, 59, 0.1);
    color: #F15A3B;
}
.blc-ft-tool-active .blc-ft-tool-label {
    color: #F15A3B;
}

.blc-ft-canvas {
    flex: 1;
    background: #f0f3f9;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blc-ft-load-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #F15A3B;
    width: 0;
}

.blc-ft-banner {
    position: relative;
    width: 320px;
    height: 215px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(26, 47, 92, 0.28);
    opacity: 0;
    animation: blc-ft-banner-in 0.5s 1s forwards;
}

.blc-ft-banner-bg {
    position: absolute;
    inset: 0;
    transition: background 0.8s ease;
}

.blc-ft-banner-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px;
}

.blc-ft-banner-headline {
    font-size: 17px;
    font-weight: 900;
    color: #ffffff;
    text-align: center;
    line-height: 1.1;
    min-height: 36px;
}

.blc-ft-banner-sub {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.blc-ft-banner-cta {
    background: rgba(255, 255, 255, 0.2);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 8px;
    font-weight: 800;
    color: #ffffff;
}

.blc-ft-banner-img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55px;
    height: 75px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}

.blc-ft-selection {
    position: absolute;
    border: 2px solid #4a9eff;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s;
}

.blc-ft-cursor {
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
}

.blc-ft-cursor-ring {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(241, 90, 59, 0.6);
    border-radius: 50%;
    top: -3px;
    left: -3px;
    opacity: 0;
}

.blc-ft-tooltip {
    position: absolute;
    background: #1a2f5c;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
}

.blc-ft-print-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #22c55e;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 999px;
    opacity: 0;
    transform: scale(0);
}

.blc-ft-zoom-bar {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(26, 47, 92, 0.1);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(26, 47, 92, 0.5);
    backdrop-filter: blur(4px);
}
.blc-ft-zoom-bar span { color: #1a2f5c; font-weight: 800; }

@keyframes blc-ft-banner-in {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* Numbered steps (replaces trust-row on Free Templates only) */
body.blc-light-header .blc-hero-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 22px;
}

body.blc-light-header .blc-hero-step {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.blc-light-header .blc-hero-step-num {
    display: flex;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(241, 90, 59, 0.12);
    color: #F15A3B;
    font-size: 13px;
    font-weight: 800;
    align-items: center;
    justify-content: center;
}

body.blc-light-header .blc-hero-step-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--blc-lt-text-dark);
}

/* <em>Customise</em> in the headline — orange, matching the site's
   existing highlight-word convention instead of default italic */
body.blc-light-header .blc-hero-headline em {
    color: #F15A3B;
    font-style: normal;
}

/* Reverses the no-visual/single-column rules above (child-style.css:2097-
   2107) for Free Templates now that it has a real visual — same pattern
   as body.blc-light-header.blc-showroom-active for /our-customers/. */
body.blc-light-header.blc-ft-demo-active .blc-hero-visual-placeholder {
    display: flex;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    align-items: flex-start;
}

body.blc-light-header.blc-ft-demo-active .blc-hero-trustrow,
body.blc-light-header.blc-ft-demo-active .blc-hero-stats {
    display: none;
}

/* Убрать нижний padding у hero чтобы process прилипал */
body.blc-light-header.blc-ft-demo-active .blc-hero {
    padding-bottom: 0;
}

@media (min-width: 901px) {
    body.blc-light-header.blc-ft-demo-active .blc-hero-grid {
        grid-template-columns: 0.85fr 1.15fr;
        padding: 20px 24px 24px;
        row-gap: 16px;
        align-items: start;
    }
}

.blc-ft-props-panel {
    width: 160px;
    flex-shrink: 0;
    background: #ffffff;
    border-left: 1px solid rgba(26, 47, 92, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
}

.blc-ft-props-section {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(26, 47, 92, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blc-ft-props-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(26, 47, 92, 0.4);
}

.blc-ft-props-select {
    font-size: 11px;
    font-weight: 600;
    color: #1a2f5c;
    background: #f5f7fb;
    border: 1px solid rgba(26,47,92,0.1);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
}

.blc-ft-props-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blc-ft-props-stepper button {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(26,47,92,0.12);
    background: #f5f7fb;
    font-size: 13px;
    color: #1a2f5c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.blc-ft-props-stepper span {
    font-size: 12px;
    font-weight: 700;
    color: #1a2f5c;
    min-width: 24px;
    text-align: center;
}

.blc-ft-props-btns {
    display: flex;
    gap: 4px;
}

.blc-ft-props-btns button {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(26,47,92,0.12);
    background: #f5f7fb;
    font-size: 11px;
    font-weight: 700;
    color: rgba(26,47,92,0.5);
    cursor: pointer;
}

.blc-ft-props-btns button.active {
    background: rgba(241, 90, 59,0.1);
    border-color: rgba(241, 90, 59,0.3);
    color: #F15A3B;
}

.blc-ft-props-swatches {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.blc-ft-props-swatches span {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(26,47,92,0.15);
    cursor: pointer;
    display: block;
}

.blc-ft-props-slider {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blc-ft-props-slider input {
    flex: 1;
    height: 3px;
    accent-color: #F15A3B;
}

.blc-ft-props-slider span {
    font-size: 10px;
    font-weight: 700;
    color: #1a2f5c;
    min-width: 30px;
}

.blc-ft-process {
    background: #eef1f8;
    padding: 24px 40px 16px;
    margin: -50px auto 0;
    position: relative;
    z-index: 1;
    max-width: 1100px;
    border-radius: 20px;
    border: 1px solid rgba(26,47,92,0.08);
    box-shadow: 0 2px 16px rgba(26,47,92,0.06);
}

body.blc-light-header.blc-ft-demo-active .blc-ft-process {
    background: #eef1f8;
    padding: 24px 60px 16px;
    margin: -50px auto 0;
    position: relative;
    z-index: 1;
    max-width: 1100px;
    border-radius: 20px;
    border: 1px solid rgba(26,47,92,0.08);
    box-shadow: 0 2px 16px rgba(26,47,92,0.06);
}

.blc-ft-process .blc-online-steps {
    grid-template-columns: repeat(6, 1fr);
}

body.blc-light-header.blc-ft-demo-active .blc-ft-process-inner {
    justify-content: space-between;
}

body.blc-light-header.blc-ft-demo-active .blc-ft-process-icon {
    background: rgba(49, 91, 255, 0.07);
}

.blc-ft-process-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.blc-ft-process-step {
    display: flex;
    align-items: center;
    gap: 0;
}
.blc-ft-process-arrow {
    font-size: 16px;
    color: rgba(26,47,92,0.2);
    padding: 0 8px;
    margin-top: -20px;
}
.blc-ft-process-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 120px;
    gap: 6px;
    padding: 8px;
}
.blc-ft-process-optional {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(241, 90, 59,0.12);
    color: #F15A3B;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.blc-ft-process-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(49, 91, 255, 0.07);
    border-radius: 14px;
    font-size: 24px;
    color: var(--blc-lt-blue);
    flex: none;
}
.blc-ft-process-num {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 20px;
    height: 20px;
    background: #F15A3B;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(241, 90, 59,0.35);
}
.blc-ft-process-title {
    font-size: 13px;
    font-weight: 800;
    color: #1a2f5c;
    line-height: 1.2;
}
.blc-ft-process-desc {
    font-size: 11px;
    color: rgba(26,47,92,0.55);
    line-height: 1.4;
}

/* blc-about-hero — /about/ stats card */

/* Show visual placeholder (hidden by default on blc-light-header) */
body.blc-light-header.blc-about-active .blc-hero-visual-placeholder {
    display: flex;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    align-items: flex-start;
}

/* 2-column grid same as free-templates */
@media (min-width: 901px) {
    body.blc-light-header.blc-about-active .blc-hero-grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        padding: 40px 24px;
        column-gap: 48px;
    }
}

/* Hide trust row on about page */
body.blc-light-header.blc-about-active .blc-hero-trustrow,
body.blc-light-header.blc-about-active .blc-hero-stats {
    display: none;
}

/* Stats card */
.blc-about-stats-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(26, 47, 92, 0.1);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(26, 47, 92, 0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blc-about-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.blc-about-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 12px;
    border-radius: 12px;
    background: #f5f7fb;
}

.blc-about-stat-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.blc-about-stat-num {
    font-size: 32px;
    font-weight: 900;
    color: #1a2f5c;
    line-height: 1;
    font-family: 'Montserrat', -apple-system, sans-serif;
    min-height: 36px;
}

.blc-about-stat-num .blc-about-stat-suffix {
    color: #F15A3B;
    font-size: 28px;
}

.blc-about-stat-text {
    font-size: 15px;
    font-weight: 800;
    color: #1a2f5c;
    padding-top: 6px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.blc-about-stat-text.blc-about-stat-revealed {
    opacity: 1;
}

.blc-about-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(26, 47, 92, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    margin-top: 2px;
}

/* Trust strip */
.blc-about-trust-strip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(26, 47, 92, 0.04);
    border: 1px solid rgba(26, 47, 92, 0.08);
    border-radius: 12px;
}

.blc-about-trust-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex: none;
    margin-top: 3px;
    animation: blc-about-pulse 2s ease-in-out infinite;
}

@keyframes blc-about-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.blc-about-trust-text {
    font-size: 11px;
    font-weight: 600;
    color: rgba(26, 47, 92, 0.65);
    line-height: 1.55;
}

.blc-about-trust-text strong {
    color: #1a2f5c;
    font-weight: 800;
}

/* bd-templates-gallery — 4 columns, larger cards matching /shop/ product grid */
.bd-templates-gallery .bd-donl-template-row,
.bd-templates-catalog .bd-donl-template-row,
.bd-donl-template-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
}

.bd-templates-gallery .bd-donl-template-thumb {
    width: 100% !important;
    border-radius: 8px;
}

.bd-donl-template-thumb {
    width: 100% !important;
    display: flex !important;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.bd-donl-template-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    flex: 1;
}

.bd-donl-template-thumb .bd-donl-template-name {
    padding: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #1a2f5c;
    background: #fff;
    text-align: center;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .bd-templates-gallery .bd-donl-template-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .bd-templates-gallery .bd-donl-template-row {
        grid-template-columns: 1fr;
    }
}


/* blc-contact-hero — /contact-us/ banner-unroll animation (top-to-bottom) */

body.blc-light-header.blc-contact-active .blc-hero-visual-placeholder {
    display: flex;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    align-items: flex-start;
}

@media (min-width: 901px) {
    body.blc-light-header.blc-contact-active .blc-hero-grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        padding: 40px 24px;
        column-gap: 48px;
    }
}

body.blc-light-header.blc-contact-active .blc-hero-trustrow,
body.blc-light-header.blc-contact-active .blc-hero-stats {
    display: none;
}

.contact-hero-animation {
    width: 100%;
    max-width: 520px;
}

.contact-hero-animation svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Unroll: clip height 0 → 460px, roll cylinder moves down ---- */

@keyframes bd-clip-reveal-y {
    from { height: 0px; }
    to   { height: 460px; }
}

@keyframes bd-roll-down {
    from { transform: translateY(0); }
    to   { transform: translateY(460px); }
}

/* ---- Settle: bounce once, right after unroll ---- */

@keyframes bd-banner-bounce {
    0%   { transform: translateY(0); }
    60%  { transform: translateY(6px); }
    75%  { transform: translateY(-2px); }
    88%  { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

/* ---- Eyelet sway, once ---- */

@keyframes bd-eyelet-sway {
    0%   { transform: rotate(0deg); }
    30%  { transform: rotate(3deg); }
    60%  { transform: rotate(-2deg); }
    80%  { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
}

/* ---- Wind sway — infinite, CSS-only (SMIL confirmed non-functional in
   current Chromium — verified via an isolated test page with zero
   dependency on this markup; beginElement()/declarative begin= both
   silently no-op). Combined on the same element as the bounce via
   comma-separated animation-name so both play together. ---- */

@keyframes bd-wind-sway {
    0%   { transform: skewX(0deg); }
    20%  { transform: skewX(0.8deg); }
    40%  { transform: skewX(-0.5deg); }
    60%  { transform: skewX(0.6deg); }
    80%  { transform: skewX(-0.3deg); }
    100% { transform: skewX(0deg); }
}

/* Clip reveal */
#bdClipRect {
    animation-name: bd-clip-reveal-y;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-delay: 0.3s;
    animation-fill-mode: both;
    animation-play-state: paused;
}

/* Roll cylinder */
#bdRollGroup {
    animation-name: bd-roll-down;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-delay: 0.3s;
    animation-fill-mode: both;
    animation-play-state: paused;
}

/* Banner body: settle bounce (once, 2.4s→3.3s) then wind sway (infinite,
   starts right as the bounce ends) */
.bd-anim-banner-body {
    transform-box: fill-box;
    transform-origin: center;
    animation-name: bd-banner-bounce, bd-wind-sway;
    animation-duration: 0.9s, 4s;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.4, 0, 0.2, 1);
    animation-delay: 2.4s, 3.3s;
    animation-fill-mode: both, forwards;
    animation-iteration-count: 1, infinite;
    animation-play-state: paused, paused;
}

/* Eyelets */
.bd-anim-eyelet {
    animation-name: bd-eyelet-sway;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-delay: 2.5s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    transform-origin: center center;
}

/* Activate all on .bd-animate */
.contact-hero-animation.bd-animate #bdClipRect,
.contact-hero-animation.bd-animate #bdRollGroup,
.contact-hero-animation.bd-animate .bd-anim-banner-body,
.contact-hero-animation.bd-animate .bd-anim-eyelet {
    animation-play-state: running;
}

/* blc-contact-trust — stars, arrow, icons block under hero buttons */

.blc-contact-trust {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blc-contact-stars {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.blc-contact-stars__icons {
    color: #f5a623;
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1;
}

.blc-contact-stars__label {
    font-size: 14px;
    color: #1a2f5c;
    font-weight: 500;
    line-height: 1.4;
}

.blc-contact-arrow-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

.blc-contact-arrow-svg {
    width: 80px;
    height: 40px;
    flex-shrink: 0;
    transform: scaleX(-1);
}

.blc-contact-arrow-text {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    font-weight: 600;
    color: #F15A3B;
    line-height: 1.3;
}

.blc-contact-icons {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.blc-contact-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    flex: 1;
    min-width: 90px;
}

.blc-contact-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eef1f8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a2f5c;
    font-size: 24px;
    transition: background 0.2s;
}

.blc-contact-icon-item:hover .blc-contact-icon-circle {
    background: #fde8df;
    color: #F15A3B;
}

.blc-contact-icon-item strong {
    font-size: 13px;
    font-weight: 700;
    color: #1a2f5c;
    line-height: 1.3;
}

.blc-contact-icon-item span {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .blc-contact-icons {
        gap: 16px;
    }
    .blc-contact-icon-circle {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}

/* blc-contact-form-section */
.blc-contact-form-section {
    padding: 64px 24px;
    background: #f8f9fc;
}

.blc-contact-form-wrap {
    max-width: 860px;
    margin: 0 auto;
}

.blc-contact-form-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a2f5c;
    margin-bottom: 32px;
    text-align: center;
}

.blc-contact-form {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 48px;
    box-shadow: 0 4px 24px rgba(26,47,92,0.08);
}

.blc-contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.blc-contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blc-contact-form-field--full {
    margin-bottom: 20px;
}

.blc-contact-form-field label {
    font-size: 13px;
    font-weight: 600;
    color: #1a2f5c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blc-contact-form-field label span {
    color: #F15A3B;
}

.blc-contact-form-field input,
.blc-contact-form-field textarea {
    border: 1.5px solid #dde3ef;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    color: #1a2f5c;
    background: #fff;
    transition: border-color 0.2s;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.blc-contact-form-field input:focus,
.blc-contact-form-field textarea:focus {
    outline: none;
    border-color: #F15A3B;
    box-shadow: 0 0 0 3px rgba(241, 90, 59,0.12);
}

.blc-contact-form-field textarea {
    resize: vertical;
    min-height: 120px;
}

.blc-contact-form-submit {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.blc-contact-form-status {
    font-size: 14px;
    line-height: 1.4;
}

.blc-status-success { color: #2a7a4b; }
.blc-status-error   { color: #c0392b; }

@media (max-width: 640px) {
    .blc-contact-form {
        padding: 24px 20px;
    }
    .blc-contact-form-row {
        grid-template-columns: 1fr;
    }
}


/* blc-gallery-hero — PNG mockups composition */

body.blc-light-header.blc-gallery-active .blc-hero-visual-placeholder {
    display: flex;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    align-items: flex-end;
}

@media (min-width: 901px) {
    body.blc-light-header.blc-gallery-active .blc-hero-grid {
        grid-template-columns: 46% 54%;
        align-items: flex-end;
        padding: 20px 0 0 0;
        column-gap: 16px;
    }
}

.blc-gallery-animation {
    width: 100%;
    overflow: visible;
}

.blc-gallery-products {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    padding-bottom: 24px;
}

.blc-gallery-product {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(60px);
    transition: none;
}

.blc-gp-5 {
    flex: 1.2 1 0;
}

.blc-gallery-product img {
    width: 60%;
    height: auto;
    min-height: 280px;
    display: block;
    object-fit: contain;
    object-position: bottom;
}

.blc-gp-label {
    flex-shrink: 0;
    font-family: Montserrat, -apple-system, sans-serif;
    font-size: 11px;
    color: #5f6a80;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Entrance animations — staggered per product */
.blc-gallery-animation.bd-animate .blc-gallery-product {
    opacity: 1;
    transform: translateY(0);
}

.blc-gallery-animation.bd-animate .blc-gp-1 {
    transition: opacity 0.8s ease 0.1s, transform 0.8s cubic-bezier(0.4,0,0.2,1) 0.1s;
}
.blc-gallery-animation.bd-animate .blc-gp-2 {
    transition: opacity 0.8s ease 0.3s, transform 0.8s cubic-bezier(0.4,0,0.2,1) 0.3s;
}
.blc-gallery-animation.bd-animate .blc-gp-3 {
    transition: opacity 0.8s ease 0.5s, transform 0.8s cubic-bezier(0.4,0,0.2,1) 0.5s;
}
.blc-gallery-animation.bd-animate .blc-gp-4 {
    transition: opacity 0.8s ease 0.7s, transform 0.8s cubic-bezier(0.4,0,0.2,1) 0.7s;
}
.blc-gallery-animation.bd-animate .blc-gp-5 {
    transition: opacity 0.8s ease 0.9s, transform 0.8s cubic-bezier(0.4,0,0.2,1) 0.9s;
}

/* Wind sway — tear flag and feather flag only */
@keyframes bd-g-sway-png {
    0%,100% { transform: rotate(0deg); }
    30%     { transform: rotate(0.8deg); }
    70%     { transform: rotate(-0.6deg); }
}

.blc-gallery-animation.bd-animate .blc-gp-2 img,
.blc-gallery-animation.bd-animate .blc-gp-4 img {
    animation: bd-g-sway-png 3.5s ease-in-out 1.5s infinite;
    transform-origin: center bottom;
}

@media (max-width: 640px) {
    .blc-gallery-products { gap: 4px; }
    .blc-gp-label { font-size: 9px; }
}

.blc-gallery-header {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blc-gallery-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blc-gallery-line {
    flex: 1;
    height: 1px;
    background: #F15A3B;
    opacity: 0.5;
}

.blc-gallery-eyebrow-text {
    font-family: Montserrat, -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #5f6a80;
    white-space: nowrap;
}

.blc-gallery-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.blc-gallery-tag {
    font-family: Montserrat, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #1a2f5c;
    background: #ffffff;
    border: 1px solid #dde3ef;
    border-radius: 20px;
    padding: 4px 12px;
    white-space: nowrap;
}