/*
Theme Name: Krambu
Theme URI: https://www.krambu.com/
Author: Krambu
Author URI: https://www.krambu.com/
Description: A modern, premium WordPress theme for Krambu - pioneering direct liquid cooling for next-generation AI servers. Features WooCommerce integration optimized for high-value enterprise server products.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: krambu
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, woocommerce
*/

/* ============================================
   KRAMBU THEME - Custom Styles
   ============================================
   Most styling is handled via theme.json. 
   These are additional enhancements and animations.
   ============================================ */

/* Safari iOS overscroll bounce color — body is dark for overscroll,
   wp-site-blocks paints white on top for page content */
html, body {
    background-color: #0d0415 !important;
}

.wp-site-blocks {
    background-color: var(--wp--preset--color--base);
}

/* --- Root Variables (CSS Custom Properties) --- */
:root {
    --krambu-transition-fast: 150ms ease;
    --krambu-transition-base: 200ms ease;
    --krambu-transition-slow: 300ms ease-out;
    --krambu-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --krambu-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --krambu-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --krambu-shadow-purple: 0 4px 14px 0 rgb(126 0 255 / 0.25);
    --krambu-shadow-glass: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* --- Animations --- */
@keyframes krambu-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes krambu-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes krambu-pulse-subtle {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.85;
    }
}

@keyframes krambu-gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

main {
    margin-block-start: 0;
}

/* --- Utility Classes --- */
.krambu-animate-fade-in {
    animation: krambu-fade-in 0.5s var(--krambu-transition-slow) forwards;
}

.krambu-animate-fade-in-up {
    animation: krambu-fade-in-up 0.6s var(--krambu-transition-slow) forwards;
}

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

.krambu-typewriter {
    background: linear-gradient(135deg, var(--wp--preset--color--accent-primary) 0%, var(--wp--preset--color--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border-right: 3px solid var(--wp--preset--color--accent-primary);
    padding-right: 4px;
    animation: krambu-blink 0.7s step-end infinite;
}

@keyframes krambu-blink {
    0%, 100% { border-color: var(--wp--preset--color--accent-primary); }
    50% { border-color: transparent; }
}

.krambu-gradient-bg {
    background: linear-gradient(135deg, var(--wp--preset--color--accent-primary) 0%, var(--wp--preset--color--accent-secondary) 100%);
}

.krambu-glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    will-change: transform;
}

.krambu-glass-dark {
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    will-change: transform;
}

/* --- Header Enhancements --- */
.krambu-header {
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hide/show applies to <header> so the blur pseudo moves with it */
header:has(.krambu-header) {
    transition: transform 0.3s ease;
}

header.header--hidden {
    transform: translateY(-100%);
}

/* Logo transition on contrast swap */
.krambu-header .site-logo img {
    transition: opacity 0.25s ease;
}

/* Blur surface — single pseudo-element covers header + mega */
header:has(.krambu-header)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Show blur on scroll or mega open */
header:has(.krambu-header.is-scrolled)::before {
    opacity: 1;
}

/* Extend blur to cover mega panel */
header.krambu-mega-active::before {
    opacity: 1;
    height: var(--blur-height, 100%);
}

/* Glass bar on scroll — no backdrop-filter here, pseudo handles it */
.krambu-header.is-scrolled {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 4px 20px rgba(0, 0, 0, 0.15);
}

/* When mega is open — no border/shadow on header, mega carries shadow */
.krambu-mega-active .krambu-header {
    border-bottom-color: transparent;
    box-shadow: none;
}

/* Dark header state — white logo + white nav (dark hero or scrolled) */
.krambu-header.header--on-dark .krambu-primary-nav .menu-item a,
.krambu-mega-active .krambu-primary-nav .menu-item a {
    color: rgba(255, 255, 255, 0.85);
}

.krambu-header.header--on-dark .krambu-primary-nav .menu-item a:hover,
.krambu-mega-active .krambu-primary-nav .menu-item a:hover {
    color: #ffffff;
}

/* Light header state — default (light hero, not scrolled) */
.krambu-header:not(.header--on-dark) .krambu-primary-nav .menu-item a {
    color: var(--wp--preset--color--contrast);
}

.krambu-header:not(.header--on-dark) .krambu-primary-nav .menu-item a:hover {
    color: var(--wp--preset--color--accent-primary);
}

/* Override light colors when mega is open */
.krambu-mega-active .krambu-header:not(.header--on-dark) .krambu-primary-nav .menu-item a {
    color: rgba(255, 255, 255, 0.85);
}

.krambu-mega-active .krambu-header:not(.header--on-dark) .krambu-primary-nav .menu-item a:hover {
    color: #ffffff;
}

/* --- Button Enhancements --- */
.wp-block-button__link {
    transition: all var(--krambu-transition-base);
    position: relative;
    overflow: hidden;
}

.wp-block-button__link:hover {
    transform: translateY(-1px);
}

.wp-block-button__link:active {
    transform: translateY(0);
}

/* Primary button with purple gradient */
.wp-block-button.is-style-krambu-primary .wp-block-button__link {
    background: linear-gradient(135deg, var(--wp--preset--color--accent-primary) 0%, var(--wp--preset--color--accent-secondary) 100%);
    border: none;
}

.wp-block-button.is-style-krambu-primary .wp-block-button__link:hover {
    box-shadow: 0 4px 12px 0 rgb(126 0 255 / 0.15);
}

/* Gradient divider — horizontal rule with faded edges */
/* Section divider — gradient fade */
.krambu-gradient-divider {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.15) 85%, transparent 100%) !important;
    max-width: none !important;
    width: 90% !important;
    margin: 0 auto !important;
}

.krambu-gradient-divider--light {
    border: none !important;
    height: 2px !important;
    background: var(--wp--preset--color--border, #E5E5E5) !important;
    max-width: none !important;
    width: 90% !important;
    margin: var(--wp--preset--spacing--30) auto !important;
}

.wp-block-button.krambu-btn-glass .wp-block-button__link {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}
.wp-block-button.krambu-btn-glass .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* --- Card Effects --- */
.krambu-card {
    border-radius: 6px;
}


/* --- Product Cards (WooCommerce) --- */
.woocommerce ul.products li.product {
    transition: transform var(--krambu-transition-base),
        box-shadow var(--krambu-transition-base);
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
}

/* Product image container - dark background for server images */
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce div.product div.images img {
    background-color: var(--wp--preset--color--surface-dark, #0A0A0F);
    border-radius: 8px;
}

/* --- Specification Tables --- */
.krambu-specs-table {
    width: 100%;
    border-collapse: collapse;
}

.krambu-specs-table th,
.krambu-specs-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--wp--preset--color--border, #E5E5E5);
}

.krambu-specs-table tr:nth-child(even) {
    background-color: var(--wp--preset--color--base-alt, #F8F7FC);
}

.krambu-specs-table th {
    font-weight: 600;
    color: var(--wp--preset--color--contrast-muted, #484B49);
    width: 40%;
}

.krambu-specs-table td {
    font-weight: 500;
}

/* Section header in spec table */
.krambu-specs-table tr.section-header td {
    background: var(--wp--preset--color--surface-dark, #0A0A0F);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Navigation --- */
.wp-block-navigation-item__content {
    position: relative;
    transition: color var(--krambu-transition-fast);
}

.wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--wp--preset--color--accent-primary);
    transition: width var(--krambu-transition-base);
}

.wp-block-navigation-item__content:hover::after,
.current-menu-item .wp-block-navigation-item__content::after,
.krambu-primary-nav .menu-item a:hover::after,
.krambu-primary-nav .current-menu-item>a::after {
    width: 100%;
}

/* --- Dynamic Menu Support (krambu/menu-location) --- */

/* Header Menu Layout */
.krambu-primary-nav {
    display: flex;
    justify-content: center;
    align-items: stretch;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--wp--preset--spacing--50);
}

/* Glassmorphism Capsule Style - Light Structured Pill */
.krambu-blur-card-dark {
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(64px);
    -webkit-backdrop-filter: blur(64px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    will-change: transform;
    contain: layout style paint;
}

.krambu-blur-card-clear {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(64px);
    -webkit-backdrop-filter: blur(64px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    will-change: transform;
    contain: layout style paint;
}

.krambu-primary-nav {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    gap: 2rem;
    transition: color 0.25s ease;
    color: inherit;
    overflow: visible !important;
    z-index: 1000;
}

/* Ensure header doesn't clip megas on desktop */
@media (min-width: 769px) {
    .krambu-header,
    .krambu-header .wp-block-group {
        overflow: visible !important;
    }
}

.krambu-header {
    position: relative;
    z-index: 9999;
}

/* Fixed header — applied to the <header> template-part wrapper */
header:has(.krambu-header) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

/* Push header below WP admin bar when logged in */
.admin-bar header:has(.krambu-header) {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar header:has(.krambu-header) {
        top: 46px;
    }
}

/* Offset body content for fixed header */
header:has(.krambu-header) + * {
    padding-top: 68px;
}

/* Pages with full-bleed heroes — no offset, hero extends behind header */
header:has(.krambu-header) + *:has(> .krambu-hero-section:first-child) {
    padding-top: 0;
}

/* Pull hero pages up behind admin bar so they start at viewport top */
.admin-bar header:has(.krambu-header) + *:has(> .krambu-hero-section:first-child) {
    margin-top: -32px;
}

@media (max-width: 782px) {
    .admin-bar header:has(.krambu-header) + *:has(> .krambu-hero-section:first-child) {
        margin-top: -46px;
    }
}

.krambu-primary-nav:hover {
    transform: none;
}

.krambu-primary-nav .menu-item {
    padding: 0;
}

.krambu-primary-nav .menu-item a {
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    position: relative;
    transition: color var(--krambu-transition-fast);
    display: flex;
    align-items: center;
    height: 100%;
}

/* Replicate underline effect for standard menu items */
.krambu-primary-nav>.menu-item>a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width var(--krambu-transition-base);
    pointer-events: none;
}

/* Light pages: purple underline on non-dropdown links only */
.krambu-header:not(.header--on-dark) .krambu-primary-nav>.menu-item:not(.menu-item-has-children)>a::after {
    background: var(--wp--preset--color--accent-primary);
}

/* --- Mega Menu --- */
.krambu-primary-nav .menu-item {
    position: static;
}


.krambu-primary-nav .menu-item-has-children {
    position: relative;
}

.krambu-mega {
    position: absolute;
    top: 100%;
    left: 0;
    background: transparent;
    padding: 8px 0 0.75rem 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease, visibility 0s 150ms;
    z-index: 100;
}

.krambu-primary-nav .menu-item:hover > .krambu-mega {
    opacity: 1;
    visibility: visible;
    transition: opacity 150ms ease, visibility 0s 0s;
}

.krambu-mega__inner {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.krambu-mega--flipped .krambu-mega__inner {
    flex-direction: row-reverse;
}

.krambu-mega--flipped .krambu-mega__links {
    align-items: flex-start;
}

.krambu-mega--flipped .krambu-mega__link {
    text-align: left;
}

.krambu-mega--flipped .krambu-mega__desc {
    text-align: right;
}

.krambu-mega__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.krambu-mega__item {
    list-style: none;
}

.krambu-mega__link {
    display: inline-block;
    padding: 0.35rem 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    text-align: right;
    transition: color 100ms ease;
    position: relative;
}

.krambu-mega__link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width 200ms ease;
}

.krambu-mega__link:hover {
    color: #fff;
}

.krambu-mega__link:hover::after {
    width: 100%;
}

.krambu-mega__desc {
    flex: 1;
    min-width: 0;
}

.krambu-mega__desc p {
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    padding-top: 0.35rem;
    transition: opacity 100ms ease;
}

/* Desc-only variant (no children, just description) */
.krambu-mega--desc-only .krambu-mega__desc {
    text-align: left;
    max-width: none;
}


/* Footer Menu Styling */
.krambu-footer-menu {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0;
    line-height: 2.2;
}

.krambu-footer-menu .menu-item a {
    text-decoration: none;
    color: inherit;
    transition: color var(--krambu-transition-fast);
}

.krambu-footer-menu .menu-item a:hover {
    color: var(--wp--preset--color--accent-primary);
    text-decoration: underline;
}

/* --- Focus States (Accessibility) --- */
:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-primary);
    outline-offset: 2px;
}

/* --- Selection Color --- */
::selection {
    background-color: var(--wp--preset--color--accent-primary);
    color: white;
}

/* --- Scroll Behavior --- */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Mobile Navigation --- */
.krambu-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.krambu-menu-toggle:hover {
    background: rgba(0, 0, 0, 0.08);
}

.krambu-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #1a1a1a;
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.krambu-menu-toggle.krambu-menu-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.krambu-menu-toggle.krambu-menu-open span:nth-child(2) {
    opacity: 0;
}

.krambu-menu-toggle.krambu-menu-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* GPU hero text: long by default, short on mobile */
.krambu-gpu-hero__content .krambu-gpu-hero-text--short {
    display: none;
}

@media (max-width: 768px) {
    .krambu-hero-stats,
    .krambu-hero-pill {
        display: none !important;
    }

    .krambu-gpu-hero__content .krambu-gpu-hero-text--long {
        display: none;
    }

    .krambu-gpu-hero__content .krambu-gpu-hero-text--short {
        display: block;
    }
}

@media (max-width: 768px) {
    .krambu-menu-toggle {
        display: flex;
    }

    .krambu-primary-nav {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        margin: 8px 0 0 0;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0;
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        z-index: 1000;
    }

    .krambu-primary-nav.krambu-nav-open {
        display: flex;
    }

    .krambu-primary-nav:hover {
        transform: none;
    }

    .krambu-primary-nav .menu-item {
        width: 100%;
    }

    .krambu-primary-nav .menu-item a {
        padding: 0.75rem 1.25rem;
        font-size: 0.9375rem;
        color: #1a1a1a !important;
    }

    .krambu-primary-nav .menu-item a:hover {
        color: var(--wp--preset--color--accent-primary) !important;
    }

    /* Hamburger — light pages */
    .krambu-menu-toggle,
    .krambu-menu-toggle:hover,
    .krambu-menu-toggle:active,
    .krambu-menu-toggle.krambu-menu-open {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
    }

    .krambu-menu-toggle span,
    .krambu-menu-toggle.krambu-menu-open span {
        background: #1a1a1a !important;
    }

    /* Dark hero pages — dark mobile nav */
    .krambu-header-dark .krambu-primary-nav {
        background: rgba(10, 10, 15, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    }

    .krambu-header-dark .krambu-primary-nav .menu-item a {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .krambu-header-dark .krambu-primary-nav .menu-item a:hover {
        color: #fff !important;
    }

    .krambu-header-dark .krambu-menu-toggle,
    .krambu-header-dark .krambu-menu-toggle:hover,
    .krambu-header-dark .krambu-menu-toggle:active,
    .krambu-header-dark .krambu-menu-toggle.krambu-menu-open {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

    .krambu-header-dark .krambu-menu-toggle span,
    .krambu-header-dark .krambu-menu-toggle.krambu-menu-open span {
        background: #fff !important;
    }

    .krambu-primary-nav > .menu-item > a::after {
        display: none;
    }

    .krambu-primary-nav .menu-item::after {
        display: none;
    }

    .krambu-mega {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        padding: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border: none;
        transition: none;
    }

    .krambu-mega__inner {
        padding: 0;
        gap: 0;
    }

    .krambu-mega__desc {
        display: none;
    }

    .krambu-mega__links {
        padding: 0 0 0 1rem;
    }

    .krambu-mega__link {
        padding: 0.5rem 0.75rem;
        color: #666 !important;
        font-size: 0.85rem;
    }

    .krambu-mega--desc-only {
        display: none;
    }

    /* Also handle the Contact Us button in transparent header */
    .krambu-header--transparent .wp-block-buttons {
        display: none;
    }
}

/* --- Consistent hero height across all pages --- */
.krambu-hero-section {
    height: 600px;
    overflow: hidden !important;
}

/* Compact hero for secondary pages (compliance, legal, etc.) */
.krambu-hero-section--compact {
    height: auto;
}

/* Override spacing-90 padding inside heroes for consistent sizing */
.krambu-hero-inner,
.krambu-gpu-hero__content,
.krambu-cloud-hero__content {
    padding-top: 100px !important;
    padding-bottom: 48px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.4);
}

.krambu-topo-section--light .krambu-hero-inner {
    text-shadow: none;
}

.krambu-topo-section--light .krambu-hero-inner .krambu-gradient-text {
    filter: none;
}

/* Safari mobile: account for dynamic toolbar pushing content up */
@supports (-webkit-touch-callout: none) {
    .krambu-hero-inner,
    .krambu-gpu-hero__content,
    .krambu-cloud-hero__content {
        padding-top: calc(100px + env(safe-area-inset-top, 0px)) !important;
    }
}

/* --- Cloud Services Hero with Canvas --- */
.krambu-cloud-hero {
    position: relative;
    background: #0a0a0f !important;
    overflow: hidden;
}


/* Lift all non-canvas children above the canvas */
.krambu-cloud-hero > *:not(canvas) {
    background-color: transparent !important;
    position: relative;
    z-index: 2;
}

#krambu-cloud-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

#krambu-cloud-canvas.is-active {
    opacity: 1;
}

.krambu-cloud-hero__content {
    position: relative;
    z-index: 2;
}



/* --- GPU Page Background (triangle canvas wrapper) --- */
.krambu-gpu-page-bg {
    position: relative;
    background: #0a0a0f !important;
    overflow: hidden;
}


#krambu-gpu-triangles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Lift all non-canvas children above canvas */
.krambu-gpu-page-bg > *:not(canvas) {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
}

/* --- GPU Clusters Hero (inside page-bg wrapper) --- */
.krambu-gpu-hero {
    position: relative;
    z-index: 5;
    height: 600px;
    overflow: hidden !important;
    margin-block-start: 0 !important;
    cursor: crosshair;
}

#krambu-cube-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

#krambu-cube-canvas.is-active {
    opacity: 1;
}

.krambu-gpu-hero__content {
    position: relative;
    z-index: 1;
    transition: opacity 0.25s;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(0,0,0,0.3);
}

.krambu-gpu-hero__content.is-dimmed {
    opacity: 0;
    pointer-events: none;
}

/* --- GPU Partner Credentials Bar / Quote Crossfade --- */
.krambu-gpu-partners {
    background: #0a0a0f;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
    margin-block-start: 0 !important;
}

.krambu-gpu-partners__crossfade {
    position: relative;
    padding: 0 2rem;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.4s ease;
}

.krambu-gpu-partners__layer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: opacity 0.8s ease;
}

.krambu-gpu-partners__layer--brands {
}

.krambu-gpu-partners__layer--brands.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.krambu-gpu-partners__layer--quote {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
}

.krambu-gpu-partners__layer--quote.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.krambu-gpu-partners__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

.krambu-gpu-partners__label {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.krambu-gpu-partners__logos {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.krambu-gpu-partners__logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.6);
    transition: filter 0.25s ease;
}

.krambu-gpu-partners__logo:hover {
    filter: brightness(0) invert(1) opacity(1);
}

.krambu-gpu-partners__logo--supermicro {
    height: 32px;
}

.krambu-gpu-partners__logo--nvidia {
    height: 28px;
}

.krambu-gpu-partners__divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.15);
}

/* --- Embedding Voyage Canvas (hero background) --- */
#krambu-embedding-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    cursor: default;
}

#krambu-embedding-canvas.is-interactive {
    z-index: 4;
    pointer-events: none;
}

.krambu-embedding-overlay {
    flex-direction: column;
    text-align: center;
    width: 100%;
}

.krambu-embedding-overlay__title {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(174, 100, 255, 0.5);
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.krambu-embedding-overlay__text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--wp--preset--font-family--body, Cantarell, sans-serif);
    font-style: italic;
    max-width: none;
    margin: 0 3rem;
}

.krambu-embedding-overlay__text .krambu-embedding-anchor {
    color: inherit;
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none;
    transition: color 0.25s;
}

.krambu-embedding-overlay__text .krambu-embedding-anchor:hover {
    color: rgba(255, 255, 255, 0.85);
}

.krambu-embedding-overlay__text .krambu-embedding-anchor--active {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(126, 0, 255, 0.6);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.krambu-embedding-overlay__attribution {
    font-style: normal;
    color: rgba(255, 255, 255, 0.35);
}

.krambu-embedding-overlay__word {
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0.5rem;
    background: linear-gradient(135deg, #7E00FF, #5DBFEC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    min-height: 1.4rem;
}

.krambu-embedding-labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

.krambu-embedding-label {
    position: absolute;
    font-size: 0.65rem;
    font-family: 'JetBrains Mono', monospace;
    color: #fff;
    white-space: nowrap;
    transform: translateX(-50%);
    transition: opacity 0.2s;
    letter-spacing: 0.02em;
}

.krambu-embedding-label--active {
    font-weight: 700;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .krambu-embedding-voyage {
        height: 350px;
    }
    .krambu-embedding-overlay__text {
        font-size: 0.8rem;
        margin: 0 1rem;
    }

    .krambu-gpu-partners__crossfade {
        height: auto;
        min-height: 86px;
    }
    .krambu-gpu-partners__layer--quote {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        padding: 1rem 0;
    }
    .krambu-gpu-partners__layer--quote:not(.is-visible) {
        display: none;
    }
    .krambu-gpu-partners__crossfade.is-quote-active .krambu-gpu-partners__layer--brands {
        display: none;
    }
}

/* --- GPU Platform Intro --- */
.krambu-gpu-platform {
    margin-block-start: 0 !important;
}

.krambu-gpu-platform__card {
    text-align: center;
    padding: 3rem;
    border-radius: 8px;
    position: relative;
    background: linear-gradient(135deg, rgba(126, 0, 255, 0.08) 0%, rgba(10, 10, 15, 0.6) 40%, rgba(93, 191, 236, 0.06) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(126, 0, 255, 0.12) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.krambu-gpu-platform__badge {
    display: inline-block;
    color: rgba(174, 100, 255, 1);
    background: rgba(126, 0, 255, 0.12);
    padding: 6px 16px;
    border-radius: 2px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
}

.krambu-gpu-platform__title {
    color: #fff;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 1.25rem;
    line-height: 1.15;
}

.krambu-gpu-platform__text {
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.8;
    font-size: 1.05rem;
    margin: 0;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* --- GPU Showcase Sections --- */
.krambu-gpu-showcase {
    margin-block-start: 0 !important;
    overflow: visible !important;
}

.krambu-gpu-showcase__inner {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 4rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Rack image column */
.krambu-gpu-showcase__rack {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: sticky;
    top: 120px;
}

.krambu-gpu-showcase__rack img {
    max-width: 260px;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 8px 40px rgba(0, 0, 0, 0.5));
}

.krambu-gpu-showcase__rack-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(126, 0, 255, 0.15) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.krambu-gpu-showcase__rack-glow--cyan {
    background: radial-gradient(ellipse at center, rgba(93, 191, 236, 0.15) 0%, transparent 70%);
}

/* Reverse layout for liquid-cooled */
.krambu-gpu-showcase--reverse .krambu-gpu-showcase__inner {
    grid-template-columns: 1fr 320px;
}

.krambu-gpu-showcase--reverse .krambu-gpu-showcase__rack {
    order: 2;
}

.krambu-gpu-showcase--reverse .krambu-gpu-showcase__details {
    order: 1;
}

/* Details column */
.krambu-gpu-showcase__label {
    display: inline-block;
    color: var(--wp--preset--color--accent-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.krambu-gpu-showcase__title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 0.75rem;
}

.krambu-gpu-showcase__subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 2rem;
}

/* Node callout card */
.krambu-gpu-showcase__node {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 2.5rem;
    background: linear-gradient(145deg, rgba(126, 0, 255, 0.1) 0%, rgba(15, 15, 25, 0.7) 60%, rgba(126, 0, 255, 0.04) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(126, 0, 255, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.krambu-gpu-showcase__node--cyan {
    background: linear-gradient(145deg, rgba(93, 191, 236, 0.1) 0%, rgba(15, 15, 25, 0.7) 60%, rgba(93, 191, 236, 0.04) 100%) !important;
    border: 1px solid rgba(93, 191, 236, 0.15) !important;
}

.krambu-gpu-showcase__node img {
    width: 140px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 8px;
}

.krambu-gpu-showcase__node-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.krambu-gpu-showcase__node-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
}

.krambu-gpu-showcase__node-name {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

/* Spec groups */
.krambu-gpu-showcase__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.krambu-gpu-showcase__spec-group h4 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.krambu-gpu-showcase__spec-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.krambu-gpu-showcase__spec-group ul li {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.55;
    padding-left: 0.875rem;
    position: relative;
    margin-bottom: 0.35rem;
}

.krambu-gpu-showcase__spec-group ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--wp--preset--color--accent-primary);
}

.krambu-gpu-showcase__node--cyan ~ .krambu-gpu-showcase__specs .krambu-gpu-showcase__spec-group ul li::before {
    background: var(--wp--preset--color--accent-tertiary);
}

/* Highlight stats row */
.krambu-gpu-showcase__highlights {
    display: flex;
    gap: 1.5rem;
}

.krambu-gpu-showcase__highlight {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.krambu-gpu-showcase__highlight:hover {
    border-color: rgba(126, 0, 255, 0.25);
    background: rgba(126, 0, 255, 0.05);
}

.krambu-gpu-showcase__highlights--cyan .krambu-gpu-showcase__highlight:hover {
    border-color: rgba(93, 191, 236, 0.25);
    background: rgba(93, 191, 236, 0.05);
}

.krambu-gpu-showcase__highlight-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.krambu-gpu-showcase__highlight-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
}

/* --- GPU Content Light Mode --- */
/* --- Dark iridescent gradient container (homepage) --- */
.krambu-gpu-content--dark {
    position: relative;
    background: #0f0a18 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    overflow: hidden;
}

/* Hex-flowers pattern as a single continuous layer */
.krambu-gpu-content--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("assets/images/hex-flowers.png");
    background-size: auto;
    background-repeat: repeat;
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
}

/* Vignette — subtle, doesn't block the gradient */
.krambu-gpu-content--dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(15,10,24,0.6) 100%);
    pointer-events: none;
    z-index: 2;
}

.krambu-gpu-content--dark > * {
    position: relative;
    z-index: 3;
}

/* Strip all per-section backgrounds inside the dark container */
.krambu-gpu-content--dark .krambu-bg-matrix-triangles {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
.krambu-gpu-content--dark .krambu-bg-matrix-triangles::before,
.krambu-gpu-content--dark .krambu-bg-matrix-triangles::after {
    display: none !important;
}

/* --- Light iridescent gradient container (product pages) --- */
.krambu-gpu-content--light {
    position: relative;
}

.krambu-gpu-content--light::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("assets/images/hex-flowers.png");
    background-size: auto;
    background-repeat: repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.krambu-gpu-content--light > * {
    position: relative;
    z-index: 1;
}

.krambu-gpu-content--light .krambu-gpu-platform__card {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: none !important;
    border-radius: 8px;
}

.krambu-gpu-content--light .krambu-gpu-platform__card::after {
    display: none;
}

.krambu-gpu-content--light .krambu-gpu-platform__title {
    color: var(--wp--preset--color--surface-dark);
}

.krambu-gpu-content--light .krambu-gpu-platform__text {
    color: var(--wp--preset--color--contrast-muted);
}

/* Separators inside content cards — full-width structural lines */
.krambu-gpu-content--light .krambu-blur-card-clear:not(.krambu-location-card) .wp-block-separator {
    width: 100% !important;
    max-width: none !important;
    border: none !important;
    height: 2px !important;
    background: var(--wp--preset--color--accent-primary, #7E00FF) !important;
    opacity: 1 !important;
}

/* Dash list markers for colo cards */
.krambu-gpu-content--light .krambu-blur-card-clear .wp-block-list {
    list-style: '–  ';
    padding-left: 1rem;
    margin-top: 0.5rem;
}

.krambu-gpu-content--light .krambu-gpu-showcase__title {
    color: var(--wp--preset--color--surface-dark);
}

.krambu-gpu-content--light .krambu-gpu-showcase__subtitle {
    color: var(--wp--preset--color--contrast-muted);
}

.krambu-gpu-content--light .krambu-gpu-showcase__rack-glow {
    opacity: 0.5;
}

.krambu-gpu-content--light .krambu-gpu-showcase__rack img {
    filter: drop-shadow(0 8px 40px rgba(0, 0, 0, 0.15));
}

.krambu-gpu-content--light .krambu-gpu-showcase__node {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: none !important;
    border-radius: 8px;
}

.krambu-gpu-content--light .krambu-gpu-showcase__node::after {
    display: none;
}

.krambu-gpu-content--light .krambu-gpu-showcase__node--cyan {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.krambu-gpu-content--light .krambu-gpu-showcase__node-label {
    color: var(--wp--preset--color--contrast-muted);
}

.krambu-gpu-content--light .krambu-gpu-showcase__node-name {
    color: var(--wp--preset--color--surface-dark);
}

.krambu-gpu-content--light .krambu-gpu-showcase__spec-group h4 {
    color: var(--wp--preset--color--surface-dark);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.krambu-gpu-content--light .krambu-gpu-showcase__spec-group ul li {
    color: var(--wp--preset--color--contrast-muted);
}

.krambu-gpu-content--light .krambu-gpu-showcase__highlight {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(0, 0, 0, 0.06);
    border-radius: 8px;
}

.krambu-gpu-content--light .krambu-gpu-showcase__highlight::after {
    display: none;
}

.krambu-gpu-content--light .krambu-gpu-showcase__highlight:hover {
    border-color: rgba(126, 0, 255, 0.2);
    background: rgba(255, 255, 255, 1);
}

.krambu-gpu-content--light .krambu-gpu-showcase__highlights--cyan .krambu-gpu-showcase__highlight:hover {
    border-color: rgba(93, 191, 236, 0.2);
    background: rgba(255, 255, 255, 1);
}

.krambu-gpu-content--light .krambu-gpu-showcase__highlight-value {
    color: var(--wp--preset--color--surface-dark);
}

.krambu-gpu-content--light .krambu-gpu-showcase__highlight-label {
    color: var(--wp--preset--color--contrast-muted);
}

/* Generic blur-card override inside light content areas */
.krambu-gpu-content--light .krambu-blur-card-clear {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: none !important;
}

.krambu-gpu-content--light .krambu-blur-card-clear::after {
    display: none;
}

/* Tablet */
@media (max-width: 1024px) {
    .krambu-gpu-showcase__inner,
    .krambu-gpu-showcase--reverse .krambu-gpu-showcase__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .krambu-gpu-showcase__rack {
        position: static;
        justify-content: center;
    }

    .krambu-gpu-showcase__rack img {
        max-width: 200px;
    }

    .krambu-gpu-showcase--reverse .krambu-gpu-showcase__rack {
        order: 0;
    }

    .krambu-gpu-showcase--reverse .krambu-gpu-showcase__details {
        order: 0;
    }

    .krambu-gpu-showcase__title {
        font-size: 2rem;
    }

    .krambu-gpu-showcase__specs {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Mobile — hide tall rack images */
@media (max-width: 768px) {
    .krambu-gpu-showcase__rack {
        display: none;
    }
}

@media (max-width: 640px) {
    .krambu-gpu-partners__inner {
        flex-direction: column;
        gap: 1rem;
    }

    .krambu-gpu-platform__card {
        padding: 2rem 1.5rem;
    }

    .krambu-gpu-platform__title {
        font-size: 1.75rem;
    }

    .krambu-gpu-showcase__inner {
        padding: 0 1.25rem;
    }

    .krambu-gpu-showcase__title {
        font-size: 1.75rem;
    }

    .krambu-gpu-showcase__node {
        flex-direction: column;
        text-align: center;
    }

    .krambu-gpu-showcase__node img {
        width: 100%;
        max-width: 200px;
    }

    .krambu-gpu-showcase__highlights {
        flex-direction: column;
        gap: 0.75rem;
    }

    .krambu-gpu-showcase__highlight {
        padding: 1rem;
    }
}

/* Dark background band */
.krambu-dark-bg {
    background: #0a0a0f !important;
    margin-block-start: 0 !important;
}

/* --- KPI Strip --- */
.krambu-kpi-strip {
    background: #0a0a0f !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}
.krambu-kpi-strip__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}
.krambu-kpi-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 0;
    max-width: 180px;
}
.krambu-kpi-strip__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
    color: #fff;
}
.krambu-kpi-strip__label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.krambu-kpi-strip__divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.12);
}
@media (max-width: 600px) {
    .krambu-kpi-strip__inner {
        flex-wrap: wrap;
        gap: 1.5rem 2rem;
    }
    .krambu-kpi-strip__divider {
        display: none;
    }
}

/* Light sections inside the patterned main become transparent */
.krambu-bg-matrix-triangles--light > .has-base-alt-background-color {
    background-color: transparent !important;
}

/* --- Colocation Location Cards --- */
.krambu-location-card--parallax {
    overflow: hidden;
    contain: style !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.krambu-location-card > :first-child:not(.krambu-location-card__bg),
.krambu-location-card > .krambu-location-card__bg + * {
    margin-top: 0 !important;
}
.krambu-location-card__bg {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background-size: cover;
    background-position: center;
    will-change: transform;
    pointer-events: none;
}
.krambu-location-card__bg--reset {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Colocation Topo Section --- */
.krambu-topo-section {
    position: relative;
    background: #0a0a0f !important;
    margin-block-start: 0 !important;
}

.krambu-topo-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

.krambu-topo-canvas.is-active {
    opacity: 1;
}

.krambu-topo-section > *:not(canvas) {
    position: relative;
    z-index: 1;
}

.krambu-topo-section--light {
    background: var(--wp--preset--color--base, #fff) !important;
}

/* When topo section is used as a hero, respect hero height */
.krambu-hero-section.krambu-topo-section {
    height: 600px !important;
    overflow: hidden !important;
}

/* --- Colocation: Video Section (below hero) --- */
.krambu-colo-video-section video {
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
}

.krambu-colo-video-section h2 {
    margin-top: 0;
}


/* --- Print Styles --- */
@media print {

    .krambu-header,
    .krambu-footer,
    .wp-block-navigation {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    a {
        text-decoration: underline;
    }

    .krambu-specs-table {
        page-break-inside: avoid;
    }
}

/* --- Custom Backgrounds --- */
.krambu-bg-matrix-triangles {
    background-color: #000000;
    background-image: url("assets/images/hex-flowers.png");
    background-size: auto;
    background-repeat: repeat;
    position: relative;
    overflow: hidden;
}

/* Vignette overlay */
.krambu-bg-matrix-triangles::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, #000000 90%);
    pointer-events: none;
    z-index: 2;
}

.krambu-bg-matrix-triangles > * {
    position: relative;
    z-index: 3;
}

/* Light variant for use on light sections */
.krambu-bg-matrix-triangles--light {
    background-color: var(--wp--preset--color--base-alt, #F8F7FC);
    background-image: url("assets/images/hex-flowers.png");
    background-size: auto;
    background-repeat: repeat;
    position: relative;
    overflow: hidden;
    opacity: 1;
}
.krambu-bg-matrix-triangles--light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(248,247,252,0.85) 0%, transparent 30%, transparent 70%, rgba(248,247,252,0.85) 100%);
    opacity: 1;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: normal;
}
.krambu-bg-matrix-triangles--light::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--wp--preset--color--base-alt, #F8F7FC);
    opacity: 0.90;
    pointer-events: none;
    z-index: 1;
}
.krambu-bg-matrix-triangles--light > * {
    position: relative;
    z-index: 3;
}

/* Combined: triangles BG with gpu-content iridescent gradient overlay */
.krambu-gpu-content--light.krambu-bg-matrix-triangles--light::after {
    background: linear-gradient(135deg, rgba(255,255,255,0.90) 0%, rgba(245,240,255,0.90) 30%, rgba(240,248,252,0.90) 70%, rgba(255,255,255,0.90) 100%);
    opacity: 1;
}

/* Dark subtle variant — faint triangles on near-black */
.krambu-bg-matrix-triangles--dark {
    background-color: #0a0a0f;
    background-image: url("assets/images/hex-flowers.png");
    background-size: auto;
    background-repeat: repeat;
    position: relative;
    overflow: hidden;
}
.krambu-bg-matrix-triangles--dark::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0f;
    opacity: 0.9;
    pointer-events: none;
    z-index: 1;
}
.krambu-bg-matrix-triangles--dark > * {
    position: relative;
    z-index: 3;
}

.krambu-hero-stats {
    overflow: hidden;
}


/* Animated gradient mesh background */
.krambu-bg-gradient-mesh {
    background:
        radial-gradient(circle at 20% 50%, rgba(126, 0, 255, 0.45) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(93, 191, 236, 0.3) 0%, transparent 35%),
        radial-gradient(circle at 60% 90%, rgba(174, 0, 255, 0.35) 0%, transparent 40%),
        #0A0A12;
    background-size: 400% 400%;
    animation: krambu-meshDrift 6s ease-in-out infinite alternate;
}

@keyframes krambu-meshDrift {
    0%   { background-position: 0% 0%; }
    25%  { background-position: 100% 50%; }
    50%  { background-position: 50% 100%; }
    75%  { background-position: 0% 50%; }
    100% { background-position: 100% 0%; }
}

.krambu-hero-stats.krambu-bg-gradient-mesh {
    border: 1px solid rgba(126, 0, 255, 0.15);
}

.krambu-bg-gradient-mesh > * {
    position: relative;
    z-index: 1;
}

/* Override hero stats card — kills matrix triangles, blur card, and applies gradient mesh */
.krambu-hero-stats.krambu-blur-card-dark {
    background: #0A0A12 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden;
    position: relative;
}

.krambu-hero-stats.krambu-blur-card-dark::before,
.krambu-hero-stats.krambu-blur-card-dark::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    width: 140%;
    height: 140%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
    will-change: transform;
}

.krambu-hero-stats.krambu-blur-card-dark::before {
    top: -40%;
    left: -30%;
    background: radial-gradient(circle, rgba(126, 0, 255, 0.4) 0%, transparent 70%) !important;
    animation: krambu-blob1 7s ease-in-out infinite alternate;
}

.krambu-hero-stats.krambu-blur-card-dark::after {
    bottom: -40%;
    right: -30%;
    background: radial-gradient(circle, rgba(93, 191, 236, 0.3) 0%, rgba(174, 0, 255, 0.2) 50%, transparent 70%);
    animation: krambu-blob2 9s ease-in-out infinite alternate;
}

@keyframes krambu-blob1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(30%, 40%) scale(0.8); }
    100% { transform: translate(60%, 10%) scale(1.1); }
}

@keyframes krambu-blob2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-40%, -30%) scale(1.2); }
    100% { transform: translate(-20%, -60%) scale(0.9); }
}

.krambu-hero-stats.krambu-bg-gradient-mesh::before {
    display: none;
}


/* --- CTA Section --- */
.krambu-cta {
    background: #0f0a18 !important;
    position: relative;
    overflow: hidden;
    margin-block-start: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Reusable hex-flowers texture overlay */
.krambu-hex-bg {
    position: relative;
    overflow: hidden;
}
.krambu-hex-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("assets/images/hex-flowers.png");
    background-size: auto;
    background-repeat: repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}
.krambu-hex-bg > * {
    position: relative;
    z-index: 1;
}
/* Dark surface variant — brighter pattern */
.krambu-hex-bg--dark::before {
    opacity: 0.12;
}

/* Subtle hex-flowers texture */
.krambu-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("assets/images/hex-flowers.png");
    background-size: auto;
    background-repeat: repeat;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

/* Soft purple glow — top-left */
.krambu-cta::after {
    content: '';
    position: absolute;
    top: -30%;
    left: -10%;
    width: 60%;
    height: 140%;
    background: radial-gradient(circle at center, rgba(126, 0, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.krambu-cta > * {
    position: relative;
    z-index: 1;
}

.krambu-cta h2 {
    color: #fff !important;
}

.krambu-cta p {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* TARGETED MARGIN FIX */
.krambu-no-margin-top {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

footer {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

.wp-block-group-is-layout-constrained {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/* Product Details Refinements */

/* Vertical Gallery */
.woocommerce-product-gallery {
    display: flex !important;
    gap: 20px;
}

.woocommerce-product-gallery .flex-viewport {
    order: 2;
    width: 80% !important;
}

.woocommerce-product-gallery .flex-control-nav {
    order: 1;
    width: 20% !important;
    display: flex;
    flex-direction: column;
}

.woocommerce-product-gallery .flex-control-nav li {
    width: 100% !important;
    float: none !important;
    margin-bottom: 10px;
}

.woocommerce-product-gallery .flex-control-nav li img {
    border-radius: 8px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.woocommerce-product-gallery .flex-control-nav li img.flex-active,
.woocommerce-product-gallery .flex-control-nav li img:hover {
    opacity: 1;
    border: none !important;
}

/* Styled Tabs */
.woocommerce-tabs ul.tabs {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 0 30px !important;
    display: flex;
    gap: 10px;
    overflow: visible !important;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
    display: none !important;
}

.woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
    display: none !important;
}

.woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 10px 24px !important;
    background: var(--wp--preset--color--base-alt) !important;
    color: var(--wp--preset--color--contrast-muted) !important;
    border-radius: 999px !important;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
    background: var(--wp--preset--color--accent-primary) !important;
    color: white !important;
}

.woocommerce-tabs .panel {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Styled Quantity & Add to Cart */
.cart {
    display: flex;
    gap: 15px;
    align-items: center;
}

.quantity {
    display: inline-flex;
    align-items: center;
    background: var(--wp--preset--color--base-alt);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    padding: 4px;
}

.quantity input.qty {
    background: transparent !important;
    border: none !important;
    text-align: center;
    width: 50px !important;
    font-weight: 600;
    color: var(--wp--preset--color--contrast);
    padding: 0 !important;
}

/* Hide spinners */
.quantity input.qty::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Quantity +/- buttons */
.quantity-wrapper {
    display: inline-flex;
    align-items: center;
}

.quantity-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--wp--preset--color--contrast);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1;
    padding: 0;
    user-select: none;
}

.quantity-btn:hover {
    background: var(--wp--preset--color--border);
}

.quantity-btn:active {
    background: var(--wp--preset--color--contrast-muted);
    color: var(--wp--preset--color--base);
}

/* Dark background variant (single product hero) */
.krambu-product-hero-section .quantity-btn {
    color: rgba(255, 255, 255, 0.8);
}

.krambu-product-hero-section .quantity-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.krambu-product-hero-section .quantity-btn:active {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Remove default animations if any remain contextually */
.krambu-animate-fade-in-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Ensure main product gallery has white background */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .flex-control-nav li img {
    background-color: var(--wp--preset--color--base) !important;
}

/* Force gallery container background to white/transparent */
.woocommerce-product-gallery {
    background-color: transparent !important;
}

/* Related Products Grid Fix - STRONG Override */
.wp-block-woocommerce-related-products ul.products,
.wp-block-woocommerce-related-products .krambu-product-list,
.wp-block-woocommerce-related-products .krambu-related-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--wp--preset--spacing--40) !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Ensure individual items don't stretch */
.wp-block-woocommerce-related-products ul.products li.product,
.wp-block-woocommerce-related-products .krambu-product-list li.product,
.wp-block-woocommerce-related-products .krambu-product-list>*,
.wp-block-woocommerce-related-products .krambu-related-grid>* {
    width: 100% !important;
    margin: 0 !important;
    max-width: none !important;
    grid-column: span 1 !important;
}

/* Responsive */
@media (max-width: 1024px) {

    .wp-block-woocommerce-related-products ul.products,
    .wp-block-woocommerce-related-products .krambu-product-list,
    .wp-block-woocommerce-related-products .krambu-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {

    .wp-block-woocommerce-related-products ul.products,
    .wp-block-woocommerce-related-products .krambu-product-list,
    .wp-block-woocommerce-related-products .krambu-related-grid {
        grid-template-columns: 1fr !important;
    }
}

/* GRID FIX: Remove pseudo-elements becoming grid items */
.wp-block-woocommerce-related-products ul.products::before,
.wp-block-woocommerce-related-products ul.products::after,
.wp-block-woocommerce-related-products .krambu-product-list::before,
.wp-block-woocommerce-related-products .krambu-product-list::after,
.wp-block-woocommerce-related-products .krambu-related-grid::before,
.wp-block-woocommerce-related-products .krambu-related-grid::after {
    display: none !important;
    content: none !important;
}

/* Remove purple background on hover for product listings */
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product .woocommerce-loop-product__link:hover {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Ensure images have white background if needed, or transparent to match card */
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
    background-color: transparent !important;
}

/* Transparent Blur Cards for Matrix Background */
.krambu-blur-card-dark {
    background-color: rgba(10, 10, 15, 0.65) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* User converted "light" cards to dark style */
.krambu-blur-card-light {
    background-color: rgba(10, 10, 15, 0.4) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    color: white !important;
}

.krambu-blur-card-light p,
.krambu-blur-card-light h1,
.krambu-blur-card-light h2,
.krambu-blur-card-light h3,
.krambu-blur-card-light h4,
.krambu-blur-card-light h5,
.krambu-blur-card-light h6 {
    color: white !important;
}

/* Ensure links in dark blur cards are visible */
.krambu-blur-card-light a,
.krambu-blur-card-dark a {
    color: white !important;
}

/* Cursor tracking gradient border */
.krambu-blur-card-dark,
.krambu-blur-card-light,
.krambu-blur-card-clear {
    position: relative;
    /* Ensure positioning context for pseudo-element */
}

.krambu-blur-card-dark::after,
.krambu-blur-card-light::after,
.krambu-blur-card-clear::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    /* border width */
    background: radial-gradient(800px circle at var(--mouse-x, 0) var(--mouse-y, 0),
            rgba(255, 255, 255, 0.4),
            rgba(126, 0, 255, 0.2),
            /* Subtle brand purple hint */
            transparent 40%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    /* Always active, gradient will fade naturally by distance */
}

/* Disable border glow for Hero Stats (white background) */
.krambu-hero-stats::after {
    display: none !important;
}

/* Remove hover restriction */
/* .krambu-blur-card-dark:hover::after,
.krambu-blur-card-light:hover::after {
    opacity: 1;
} */

/* --- About Us Timeline --- */
.krambu-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0 0;
}

/* Vertical Line — starts at first dot, ends at last dot */
.krambu-timeline::before {
    content: '';
    position: absolute;
    top: 7px;
    bottom: 43px;
    left: 110px;
    width: 2px;
    background: var(--wp--preset--color--accent-primary);
}

.krambu-timeline-item {
    position: relative;
    margin-bottom: 36px;
    padding-left: 130px;
    min-height: 60px;
    /* Ensure space */
}

.krambu-timeline-item:last-child {
    margin-bottom: 0;
}

/* The Dot on the Line */
.krambu-timeline-item::after {
    content: '';
    position: absolute;
    left: 106px;
    top: 2px;
    width: 10px;
    height: 10px;
    background: var(--wp--preset--color--accent-primary);
    border: none;
    border-radius: 50%;
    z-index: 2;
}

/* Year Text */
.krambu-timeline-year {
    position: absolute;
    left: 0;
    top: -1px;
    /* Slight visual alignment fix with the dot/card title */
    width: 90px;
    text-align: right;
    padding-right: 16px;

    /* Typography */
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--wp--preset--color--accent-primary);
}

/* Remove any other pseudo elements on year just in case */
.krambu-timeline-year::after,
.krambu-timeline-year::before {
    display: none;
}

/* Content Card */
.krambu-timeline-content {
    position: relative;
    top: -18px;
    /* Pull up slightly to align top of card with dot/year */
}

.krambu-timeline-card {
    background: rgba(255, 255, 255, 0.75);
    padding: 24px 32px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

/* Arrow pointing to dot */
.krambu-timeline-card::before {
    content: '';
    position: absolute;
    top: 16px;
    left: -6px;
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.75);
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transform: rotate(45deg);
}

.krambu-timeline-card ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.krambu-timeline-card li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    color: var(--wp--preset--color--contrast-muted, #484B49);
    line-height: 1.6;
    font-size: 1.05rem;
}

.krambu-timeline-card li:last-child {
    margin-bottom: 0;
}

.krambu-timeline-card li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--wp--preset--color--accent-primary);
    font-weight: bold;
}

.krambu-timeline-card strong {
    color: var(--wp--preset--color--contrast, #100F0D);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .krambu-timeline {
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Move line to left */
    .krambu-timeline::before {
        left: 20px;
    }

    .krambu-timeline-item {
        padding-left: 50px;
        /* Space for line+dot */
        margin-bottom: 40px;
    }

    /* Dot moves to left line */
    .krambu-timeline-item::after {
        left: 13px;
        /* 20px line - 7px radius = 13px */
        top: 0;
    }

    .krambu-timeline-year {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        text-align: left;
        margin-bottom: 8px;
        padding-right: 0;
        font-size: 1.4rem;
        /* Line up with dot/content? On mobile year is usually above content. */
        margin-left: -5px;
        /* Align visual text */
    }

    .krambu-timeline-content {
        top: 0;
    }


    /* Adjust arrow for mobile? */
    .krambu-timeline-card::before {
        top: 15px;
    }
}

/* --- Press / News Blog --- */

/* Featured post cards */
.krambu-press-card {
    transition: transform var(--krambu-transition-base),
        box-shadow var(--krambu-transition-base),
        border-color var(--krambu-transition-base);
}

.krambu-press-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--krambu-shadow-lg);
    border-color: rgba(126, 0, 255, 0.15) !important;
}

/* Image wrapper — positioning context for overlay pills */
.krambu-press-card__image-wrap {
    position: relative;
}

/* Bottom gradient fade over the featured image */
.krambu-press-card__image-wrap > .wp-block-post-featured-image {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #0A0A0F 100%);
}

.krambu-press-card__image-wrap {
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    /* Fixed rather than min-height so posts with and without a featured
       image reserve exactly the same media area. Matches the block's
       featured-image height (200px featured / 160px list). */
    height: 200px;
    background: linear-gradient(135deg, #1a1a2e 0%, #0A0A0F 50%, #7E00FF 150%);
}

.krambu-press-card--list .krambu-press-card__image-wrap {
    height: 160px;
}

/* Equal-height cards.
   The grid already stretches each <li> to its row height, but the card inside
   was height:auto and collapsed to its content. height:100% makes it fill the
   cell; grid-auto-rows:1fr then levels every row to the tallest, so all cards
   in a grid match. Skipped at the ≤600px breakpoint where WP drops the grid to
   a single column and equalising would only add dead space.
   Note: do NOT make the card a flex container — WP's constrained layout puts
   margin-inline:auto on its children, and auto margins stop flex items from
   stretching, which collapses the image wrap to content width (zero on
   image-less posts). */
@media (min-width: 601px) {
    .wp-block-post-template.is-layout-grid:has(.krambu-press-card) {
        grid-auto-rows: 1fr;
    }
}

.krambu-press-card {
    height: 100%;
    box-sizing: border-box;
}

/* Stop the single-column mobile grid from overflowing sideways.
   WP core's ≤600px fallback sets grid-template-columns:1fr, which is
   minmax(auto, 1fr) — and that `auto` floor is the widest item's min-content
   width. One long unbreakable title (or a broken image's long alt text) then
   stretches the single column well past the viewport and the whole page scrolls
   horizontally. Zeroing the grid item's automatic minimum lets the track shrink
   to its container, which is what WP's own desktop track list already does by
   emitting minmax(0px, 1fr). */
li.wp-block-post:has(> .krambu-press-card) {
    min-width: 0;
}

.krambu-press-card__image-wrap > .wp-block-post-featured-image img {
    object-fit: contain !important;
}

.krambu-press-card__image-wrap > .wp-block-post-featured-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 100%);
    pointer-events: none;
    border-radius: inherit;
}

/* Pills overlaid on the featured image */
.krambu-press-card__pills {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
}

.krambu-press-card__pills > * {
    background: rgba(10, 10, 15, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 4px 10px;
    border-radius: 6px;
    line-height: 1.4;
}

/* Ensure links inside pills stay white */
.krambu-press-card__pills a {
    color: white !important;
    text-decoration: none !important;
}

/* --- Placeholder art for posts with no featured image ---
   WP omits the featured-image figure entirely when a post has no thumbnail,
   so :has() detects the empty state. Gives those cards a deliberate graphic
   — tile lattice + module outline, echoing the modular AI factory motif —
   instead of a blank box. Clipped by the wrap's overflow:hidden. */
.krambu-press-card__image-wrap:not(:has(> .wp-block-post-featured-image)) {
    background:
        radial-gradient(125% 115% at 82% 10%, rgba(126, 0, 255, 0.45) 0%, rgba(126, 0, 255, 0) 60%),
        linear-gradient(135deg, #21213b 0%, #0A0A0F 72%);
}

/* Diagonal tile lattice, faded out from the lower left */
.krambu-press-card__image-wrap:not(:has(> .wp-block-post-featured-image))::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 22px);
    -webkit-mask-image: radial-gradient(115% 130% at 12% 105%, #000 20%, transparent 72%);
    mask-image: radial-gradient(115% 130% at 12% 105%, #000 20%, transparent 72%);
}

/* Outlined module tile bleeding off the right edge */
.krambu-press-card__image-wrap:not(:has(> .wp-block-post-featured-image))::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -30px;
    width: 104px;
    aspect-ratio: 1;
    transform: translateY(-50%) rotate(45deg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow:
        inset 0 0 0 1px rgba(126, 0, 255, 0.4),
        0 0 44px rgba(126, 0, 255, 0.28);
    pointer-events: none;
}

/* Post list items */
.krambu-press-list-item {
    transition: background var(--krambu-transition-base);
}

.krambu-press-list-item:hover {
    background: var(--wp--preset--color--base-alt);
}

/* --- Colocation Order Form --- */

.krambu-colo-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.krambu-colo-form *,
.krambu-colo-form *::before,
.krambu-colo-form *::after {
    box-sizing: border-box;
}

.krambu-colo-form__section {
    background: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 12px;
    padding: 2rem;
    margin: 0;
}

.krambu-colo-form__heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wp--preset--color--contrast);
    margin: 0 0 1.5rem;
}

.krambu-colo-form__subheading {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--contrast-muted);
    margin: 2.5rem -2rem 1.25rem;
    padding: 1.75rem 2rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.015) 0%, rgba(0, 0, 0, 0) 100%);
}

@media (max-width: 640px) {
    .krambu-colo-form__subheading {
        margin: 2rem -1.25rem 1rem;
        padding: 1.5rem 1.25rem 0;
    }
}

.krambu-colo-form__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wp--preset--color--contrast);
    margin-bottom: 1rem;
}

.krambu-colo-form__input {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.krambu-colo-form__input:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent-primary);
    box-shadow: 0 0 0 3px rgba(126, 0, 255, 0.1);
}

.krambu-colo-form__input::placeholder {
    color: #999;
}

/* Override generic CF7 padding/border for all inputs inside colo form.
   DOM order: .wpcf7 > form > .krambu-colo-form > ...inputs */
.wpcf7 .krambu-colo-form input[type="text"],
.wpcf7 .krambu-colo-form input[type="email"],
.wpcf7 .krambu-colo-form input[type="tel"],
.wpcf7 .krambu-colo-form input[type="number"],
.wpcf7 .krambu-colo-form input[type="date"] {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wpcf7 .krambu-colo-form input[type="text"]:focus,
.wpcf7 .krambu-colo-form input[type="email"]:focus,
.wpcf7 .krambu-colo-form input[type="tel"]:focus,
.wpcf7 .krambu-colo-form input[type="number"]:focus,
.wpcf7 .krambu-colo-form input[type="date"]:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent-primary);
    box-shadow: 0 0 0 3px rgba(126, 0, 255, 0.1);
}

.wpcf7 .krambu-colo-form textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 0.75rem 0.85rem;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    resize: vertical;
    min-height: 120px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wpcf7 .krambu-colo-form textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent-primary);
    box-shadow: 0 0 0 3px rgba(126, 0, 255, 0.1);
}

.krambu-colo-form__textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 0.75rem 0.85rem;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    resize: vertical;
    min-height: 120px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.krambu-colo-form__textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent-primary);
    box-shadow: 0 0 0 3px rgba(126, 0, 255, 0.1);
}

.krambu-colo-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.krambu-colo-form__row--3 {
    grid-template-columns: 2fr 1fr 1fr;
}

.krambu-colo-form__field-group {
    margin-bottom: 1rem;
}

.krambu-colo-form__group-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wp--preset--color--contrast);
    margin-bottom: 0.5rem;
}

.krambu-colo-form__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.krambu-colo-form__check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--wp--preset--color--contrast-muted);
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
    user-select: none;
}

.krambu-colo-form__check:hover {
    border-color: var(--wp--preset--color--accent-primary);
    background: rgba(126, 0, 255, 0.03);
}

.krambu-colo-form__check:has(input:checked) {
    border-color: var(--wp--preset--color--accent-primary);
    background: rgba(126, 0, 255, 0.06);
    color: var(--wp--preset--color--accent-primary);
    font-weight: 600;
}

.krambu-colo-form__check input[type="radio"],
.krambu-colo-form__check input[type="checkbox"] {
    accent-color: var(--wp--preset--color--accent-primary);
    margin: 0;
}

.krambu-colo-form__check--agree {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--wp--preset--color--contrast);
}

/* Deployment phases table */
.krambu-colo-form__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.krambu-colo-form__table th {
    background: var(--wp--preset--color--base-alt);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--contrast-muted);
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--wp--preset--color--border);
}

.krambu-colo-form__table td {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--wp--preset--color--contrast);
    border-bottom: 1px solid var(--wp--preset--color--border);
    vertical-align: middle;
    white-space: nowrap;
}

.krambu-colo-form__table tr:last-child td {
    border-bottom: none;
}

.krambu-colo-form__input--table {
    margin-top: 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    border-color: transparent;
    background: transparent;
}

.krambu-colo-form__input--table:focus {
    border-color: var(--wp--preset--color--accent-primary);
    background: var(--wp--preset--color--base);
}

/* Table-cell overrides for number/date inside deployment phases */
.krambu-colo-form__table input[type="number"],
.krambu-colo-form__table input[type="date"],
.krambu-colo-form__table input[type="text"] {
    margin-top: 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    border-color: transparent;
    background: transparent;
}

.krambu-colo-form__table input:focus {
    border-color: var(--wp--preset--color--accent-primary);
    background: var(--wp--preset--color--base);
}

.krambu-colo-form__disclaimer {
    font-size: 0.85rem;
    color: var(--wp--preset--color--contrast-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.krambu-colo-form__submit-wrap {
    text-align: center;
}

.krambu-colo-form__submit {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    padding: 0.9rem 2.25rem;
    border: none;
    border-radius: var(--wp--custom--border-radius--base, 4px);
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--wp--preset--color--accent-primary) 0%, var(--wp--preset--color--accent-secondary) 100%);
    box-shadow: 0 4px 14px 0 rgba(126, 0, 255, 0.25);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.krambu-colo-form__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(126, 0, 255, 0.35);
}

.krambu-colo-form__submit:active {
    transform: translateY(0);
}

@media (max-width: 640px) {
    .krambu-colo-form__section {
        padding: 1.25rem;
    }

    .krambu-colo-form__row,
    .krambu-colo-form__row--3 {
        grid-template-columns: 1fr;
    }

    .krambu-colo-form__checks {
        flex-direction: column;
    }

    .krambu-colo-form__table {
        display: block;
        overflow-x: auto;
    }
}

/* --- CF7 × Colo Order Form bridge ---
   CF7 wraps radios/checkboxes in .wpcf7-list-item > label.
   These rules restyle them to match the pill-style .krambu-colo-form__check design. */

/* Kill any <p> and <br> tags CF7 autop injects — they break grid layouts */
.krambu-colo-form p:not(.krambu-colo-form__disclaimer) {
    display: contents;
}

.krambu-colo-form br {
    display: none;
}

.wpcf7 .krambu-colo-form .wpcf7-form-control-wrap {
    display: contents;
}

.krambu-colo-form__checks--cf7 .wpcf7-form-control {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.krambu-colo-form__checks--cf7 .wpcf7-list-item {
    margin: 0;
}

.krambu-colo-form__checks--cf7 .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--wp--preset--color--contrast-muted);
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
    user-select: none;
    margin: 0;
}

.krambu-colo-form__checks--cf7 .wpcf7-list-item label:hover {
    border-color: var(--wp--preset--color--accent-primary);
    background: rgba(126, 0, 255, 0.03);
}

.krambu-colo-form__checks--cf7 .wpcf7-list-item label:has(input:checked) {
    border-color: var(--wp--preset--color--accent-primary);
    background: rgba(126, 0, 255, 0.06);
    color: var(--wp--preset--color--accent-primary);
    font-weight: 600;
}

.krambu-colo-form__checks--cf7 .wpcf7-list-item input[type="radio"],
.krambu-colo-form__checks--cf7 .wpcf7-list-item input[type="checkbox"] {
    accent-color: var(--wp--preset--color--accent-primary);
    margin: 0;
}

/* CF7 acceptance checkbox — agree row */
.krambu-colo-form .wpcf7-acceptance label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--wp--preset--color--contrast);
    cursor: pointer;
}

.krambu-colo-form .wpcf7-acceptance input[type="checkbox"] {
    accent-color: var(--wp--preset--color--accent-primary);
    width: 18px;
    height: 18px;
    margin: 0;
}

/* Date inputs render 2px taller — force match with text inputs (42.5px) */
.wpcf7 .krambu-colo-form input[type="date"] {
    height: 42.5px;
    box-sizing: border-box;
}

/* CF7 submit inside colo form */
.krambu-colo-form input[type="submit"].krambu-colo-form__submit {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    padding: 0.9rem 2.25rem;
    border: none;
    border-radius: var(--wp--custom--border-radius--base, 4px);
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--wp--preset--color--accent-primary) 0%, var(--wp--preset--color--accent-secondary) 100%);
    box-shadow: 0 4px 14px 0 rgba(126, 0, 255, 0.25);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.krambu-colo-form input[type="submit"].krambu-colo-form__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(126, 0, 255, 0.35);
}

.krambu-colo-form input[type="submit"].krambu-colo-form__submit:active {
    transform: translateY(0);
}

/* CF7 validation messages */
.krambu-colo-form .wpcf7-not-valid-tip {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 4px;
}

.krambu-colo-form .wpcf7-response-output {
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.9rem;
    text-align: center;
    margin: 1.5rem 0 0;
}

/* CF7 table cell wraps — prevent extra spacing */
.krambu-colo-form__table .wpcf7-form-control-wrap {
    display: block;
}

@media (max-width: 640px) {
    .krambu-colo-form__checks--cf7 .wpcf7-form-control {
        flex-direction: column;
    }
}

/* --- KYC / compliance form additions ---
   Used by the KYC application form for section intro copy, footnotes under
   yes/no questions, and stacked full-width attestation checkboxes. */

.krambu-colo-form__section-intro {
    font-size: 0.9rem;
    color: var(--wp--preset--color--contrast-muted);
    line-height: 1.6;
    margin: -0.5rem 0 2.25rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed var(--wp--preset--color--border);
}

.krambu-colo-form__hint {
    font-size: 0.8rem;
    color: var(--wp--preset--color--contrast-muted);
    line-height: 1.55;
    margin: -0.25rem 0 1.25rem;
}

.krambu-colo-form__footnote {
    font-size: 0.75rem;
    color: var(--wp--preset--color--contrast-muted);
    line-height: 1.55;
    margin: 0.85rem 0 0.25rem;
    padding: 0.75rem 0.9rem;
    border-left: 2px solid var(--wp--preset--color--accent-primary);
    background: rgba(126, 0, 255, 0.03);
    border-radius: 0 6px 6px 0;
}

.krambu-colo-form__footnote strong {
    color: var(--wp--preset--color--contrast);
    font-weight: 600;
}

/* Field groups that contain a footnote or long-form copy need more bottom
   room so the next input/label isn't crowded. */
.krambu-colo-form__field-group:has(.krambu-colo-form__footnote) {
    margin-bottom: 1.75rem;
}

/* Stacked full-width acceptance checkboxes (attestation cards). */
.krambu-colo-form__attest-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.krambu-colo-form__attest-list .wpcf7-acceptance {
    display: block;
}

.krambu-colo-form__attest-list .wpcf7-acceptance label,
.krambu-colo-form__attest-list .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.55;
    font-weight: 400;
    color: var(--wp--preset--color--contrast);
    background: var(--wp--preset--color--base);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
    text-align: left;
}

.krambu-colo-form__attest-list .wpcf7-acceptance label:hover,
.krambu-colo-form__attest-list .wpcf7-list-item label:hover {
    border-color: var(--wp--preset--color--accent-primary);
    background: rgba(126, 0, 255, 0.03);
}

.krambu-colo-form__attest-list .wpcf7-acceptance label:has(input:checked),
.krambu-colo-form__attest-list .wpcf7-list-item label:has(input:checked) {
    border-color: var(--wp--preset--color--accent-primary);
    background: rgba(126, 0, 255, 0.05);
}

.krambu-colo-form__attest-list .wpcf7-acceptance input[type="checkbox"],
.krambu-colo-form__attest-list .wpcf7-list-item input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--wp--preset--color--accent-primary);
}

.krambu-colo-form__attest-list .wpcf7-list-item {
    display: block;
    margin: 0;
}

/* CF7 file upload — tighten spacing to match colo form inputs */
.wpcf7 .krambu-colo-form input[type="file"] {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    font-family: inherit;
    border: 1px dashed var(--wp--preset--color--border);
    border-radius: 8px;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

.wpcf7 .krambu-colo-form input[type="file"]:hover {
    border-color: var(--wp--preset--color--accent-primary);
    background: rgba(126, 0, 255, 0.02);
}

.wpcf7 .krambu-colo-form input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--wp--preset--color--accent-primary);
    background: rgba(126, 0, 255, 0.06);
    border: 1px solid rgba(126, 0, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: background 150ms ease;
}

.wpcf7 .krambu-colo-form input[type="file"]::file-selector-button:hover {
    background: rgba(126, 0, 255, 0.12);
}

/* --- Contact Form 7 Styles --- */
.wpcf7 form {
    position: relative;
}

.wpcf7 label {
    display: block;
    margin-bottom: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--wp--preset--color--contrast);
}

.wpcf7-form-control-wrap {
    display: block;
    position: relative;
    margin-top: 8px;
}

/* Checkboxes */
.wpcf7-list-item {
    display: inline-block;
    margin: 0 16px 8px 0;
}

.wpcf7-list-item label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--wp--preset--color--contrast);
    opacity: 1;
}

.wpcf7 input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    cursor: pointer;
    accent-color: var(--wp--preset--color--accent-primary);
    vertical-align: middle;
    margin-top: -2px;
    /* Slight alignment fix */
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea {
    width: 100%;
    box-sizing: border-box;
    /* Fix for overflow */
    background: #ffffff;
    /* White background */
    border: 1px solid #ccc;
    /* Standard border */
    border-radius: 4px;
    /* Slight rounding */
    padding: 12px 16px;
    color: #000000;
    /* Black text */
    font-size: 1rem;
    transition: border-color var(--krambu-transition-fast);
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent-primary);
    box-shadow: 0 0 0 2px rgba(126, 0, 255, 0.2);
    background: #ffffff;
}

.wpcf7 input[type="submit"] {
    display: inline-block;
    background: linear-gradient(135deg, var(--wp--preset--color--accent-primary) 0%, var(--wp--preset--color--accent-secondary) 100%);
    border: none;
    border-radius: 50px;
    /* Pill shape */
    padding: 1rem 2.5rem;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--krambu-transition-base);
    box-shadow: 0 4px 14px 0 rgba(126, 0, 255, 0.25);
    margin-top: 10px;
}

.wpcf7 input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(126, 0, 255, 0.35);
}

/* Success/Error Responses */
.wpcf7-response-output {
    margin-top: 24px !important;
    padding: 16px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    font-size: 0.9rem;
}

.wpcf7 form.sent .wpcf7-response-output {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.3) !important;
    color: #2ecc71;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.3) !important;
    color: #e74c3c;
}

.wpcf7-not-valid-tip {
    color: #e74c3c;
    font-size: 0.8rem;
    margin-top: 4px;
    display: block;
}

/* --- Testimonials Slider --- */
.krambu-testimonials-slider {
    position: relative;
    max-width: 1200px;
    /* Increased to match pattern contentSize */
    margin: 0 auto;
    overflow: hidden;
    padding: 20px 0;
    /* Vertical breathing room */
}

.krambu-slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    will-change: transform;
}

.krambu-slide {
    flex: 0 0 100%;
    width: 100%;
    padding: 20px 3rem;
    /* Increased horizontal padding to prevent shadow clipping */
    box-sizing: border-box;
    /* Ensure padding doesn't affect width */
}

/* Dots Navigation */
.krambu-slider-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 2rem;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.slider-dot:hover,
.slider-dot.active {
    background: #fff;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.slider-dot:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* --- Partner Brands Section --- */
.krambu-partner-section {
    background-color: #ffffff !important;
    /* Force white background */
    color: #1a1a1a;
}

.krambu-partner-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.5rem 3rem;
    margin-top: 3rem;
}

.krambu-partner-logo img {
    height: 48px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.7);
    transition: all 300ms ease-out;
}

.krambu-partner-logo--lg img {
    height: 56px;
}

@media (max-width: 768px) {
    .krambu-partner-grid {
        gap: 2rem 2.5rem;
    }
    .krambu-partner-logo img {
        height: 36px;
    }
    .krambu-partner-logo--lg img {
        height: 42px;
    }
}

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

/* --- Partners Page --- */
.krambu-partner-spotlight__logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.krambu-partner-spotlight__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .krambu-partner-spotlight .wp-block-columns {
        flex-direction: column !important;
    }
    .krambu-partner-spotlight__logo-card {
        min-height: auto;
    }
}

/* --- Post Card Horizontal --- */
.krambu-post-card-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--40);
    align-items: flex-start;
}

.krambu-post-card-horizontal .krambu-post-card-image {
    flex: 1 1 100%;
    width: 100%;
}

.krambu-post-card-horizontal .krambu-post-card-content {
    flex: 1 1 100%;
}

@media (min-width: 782px) {
    .krambu-post-card-horizontal {
        flex-wrap: nowrap;
    }

    .krambu-post-card-horizontal .krambu-post-card-image {
        flex: 0 0 35%;
        width: 35%;
    }

    .krambu-post-card-horizontal .krambu-post-card-content {
        flex: 1 1 auto;
    }
}

/* --- Single Post Header --- */

/* Featured image container — capped height with parallax */
.krambu-single-featured-wrap {
    max-height: 420px;
    overflow: hidden;
    border-radius: 6px;
    background: transparent;
}

.krambu-single-featured-wrap .wp-block-post-featured-image {
    height: 100%;
    background: transparent !important;
}

.krambu-single-featured-wrap .wp-block-post-featured-image img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    object-position: center top;
    will-change: transform;
}

/* Pill styles for date and category on single posts */
.krambu-single-pill {
    background: var(--wp--preset--color--base-alt);
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--wp--preset--color--border);
}

.krambu-single-pill a {
    text-decoration: none !important;
}

/* --- Pagination Styling --- */
.wp-block-query-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Fix for the numbers wrapper */
.wp-block-query-pagination-numbers {
    display: flex;
    gap: 8px;
    margin: 0;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 6px;
    background: transparent;
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1;
    transition: all var(--krambu-transition-fast);
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
    border-color: var(--wp--preset--color--accent-primary);
    color: var(--wp--preset--color--accent-primary);
    background: rgba(126, 0, 255, 0.05);
}

.wp-block-query-pagination .page-numbers.current {
    background: var(--wp--preset--color--accent-primary);
    border-color: var(--wp--preset--color--accent-primary);
    color: white;
}

/* --- Checkmark Lists --- */
ul.is-style-check {
    list-style: none;
    padding-left: 0;
}

ul.is-style-check li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 0.5rem;
}

ul.is-style-check li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--wp--preset--color--accent-primary);
    font-weight: bold;
}
/* --- Contact Page Tabs --- */
.krambu-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--wp--preset--color--border, #E5E5E5);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 1px; /* Avoid border clipping */
}

.krambu-tab-button {
    background: none;
    border: none;
    padding: 0.75rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wp--preset--color--contrast-muted, #484B49);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

.krambu-tab-button:hover {
    color: var(--wp--preset--color--accent-primary);
}

.krambu-tab-button.active {
    color: var(--wp--preset--color--accent-primary);
    border-bottom-color: var(--wp--preset--color--accent-primary);
}

.krambu-tab-content {
    display: none;
    animation: krambu-fade-in 0.3s ease;
}

.krambu-tab-content.active {
    display: block;
}

.krambu-map-frame {
    width: 100%;
    height: 300px;
    border: none;
    border-radius: 6px;
    margin-top: 1rem;
    filter: grayscale(100%) invert(90%);
    opacity: 0.85;
    transition: all 0.3s ease;
}

.krambu-map-frame:hover {
    filter: grayscale(0%) invert(0%);
    opacity: 1;
}

.krambu-contact-info-label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent-primary);
    margin-bottom: 0.5rem;
    display: block;
}

.krambu-contact-info-text {
    color: var(--wp--preset--color--contrast-muted);
    margin-bottom: var(--wp--preset--spacing--40);
}

/* --- Datacenter Design — Thermal Flow Hero --- */
.krambu-dc-thermal-hero {
    position: relative;
    background: #0a0a0f;
    min-height: 85vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#krambu-dc-thermal-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: auto;
}

.krambu-dc-thermal-hero__content {
    position: relative;
    z-index: 1;
}

.krambu-gradient-text--warm {
    background: linear-gradient(135deg, #ff5a0f 0%, #ffb020 50%, #ffe8a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Legal Page Content --- */
.krambu-legal-content h2.wp-block-heading {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--wp--preset--color--border);
}

.krambu-legal-content h2.wp-block-heading:first-child {
    margin-top: 0;
}

.krambu-legal-content p {
    color: var(--wp--preset--color--contrast-muted);
    line-height: 1.75;
    margin-bottom: 1rem;
}

.krambu-legal-content ul.wp-block-list {
    color: var(--wp--preset--color--contrast-muted);
    padding-left: 1.25rem;
    margin-bottom: 1.25rem;
}

.krambu-legal-content ul.wp-block-list li {
    margin-bottom: 0.375rem;
    line-height: 1.65;
}

.krambu-legal-content a {
    color: var(--wp--preset--color--accent-primary);
    text-decoration: none;
}

.krambu-legal-content a:hover {
    text-decoration: underline;
}

/* --- WooCommerce page widths ---
   Two constraints stack on account / cart / checkout:
     1. WooCommerce's blocktheme stylesheet caps .wp-block-post-title and
        main .woocommerce at 1000px.
     2. WP's per-block constrained layout generates a .wp-container-core-group-*
        class that hardcodes max-width: 720px on direct children of <main>.
   Override both with higher-specificity selectors so WC pages match the
   rest of the site (centered, ~1200px). Centering is preserved by WP's layout
   margin-auto rule. */
.woocommerce-account .wp-block-post-title,
.woocommerce-account main .woocommerce,
.woocommerce-cart .wp-block-post-title,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout main .woocommerce {
    max-width: 1200px;
}

body.woocommerce-account main > :not(.alignleft):not(.alignright):not(.alignfull),
body.woocommerce-cart main > :not(.alignleft):not(.alignright):not(.alignfull),
body.woocommerce-checkout main > :not(.alignleft):not(.alignright):not(.alignfull) {
    max-width: 1200px;
}

/* WC My Account sidebar + content — replace the default 30%/68% float layout
   with a flex row so the nav is a fixed 220px and the content takes the rest
   (the % layout waste horizontal space as the main column widens). */
.woocommerce-account .woocommerce {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
    flex: 0 0 220px;
}

.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        flex-direction: column;
        gap: 1.5rem;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        flex: 0 0 auto;
    }
}