/**
 * Klay Theme Styles
 * FSE-compatible using WordPress CSS custom properties
 */

/* ========================================
   CSS Custom Properties
   ======================================== */
:root {
  /* Transitions — not available in theme.json */
  --klay-transition-fast: 0.15s ease;
  --klay-transition-normal: 0.3s ease;
  --klay-transition-slow: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   Base Styles
   ======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent horizontal scroll on all devices */
html {
  overflow-x: hidden;
}

/* Prevent horizontal overflow from long unbroken titles and strings (WordPress Theme Guidelines requirement) */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-site-title,
.wp-block-site-tagline,
.entry-title,
.wp-block-comment-author-name,
.comment-author,
a,
p {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Override WP default padding on groups with backgrounds */
:where(.wp-block-group.has-background) {
  padding: 0;
}

/* Sticky Header - propagate WordPress native sticky through template part wrapper */
.wp-site-blocks {
  overflow-x: clip;
  overflow-y: visible;
}

header.wp-block-template-part:has(.is-position-sticky) {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Floating Pill Headers (Styles 1 & 2) — Transparent Overlay over Hero */
header.wp-block-template-part:has(.klay-header-pill),
div[data-type="core/template-part"]:has(.klay-header-pill),
.wp-block-template-part:has(.klay-header-pill),
.wp-site-blocks > header:has(.klay-header-pill),
.editor-styles-wrapper header.wp-block-template-part:has(.klay-header-pill),
.editor-styles-wrapper div[data-type="core/template-part"]:has(.klay-header-pill),
.editor-styles-wrapper .wp-block-template-part:has(.klay-header-pill),
.editor-styles-wrapper .wp-site-blocks > header:has(.klay-header-pill) {
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-bottom: -108px;
  background-color: transparent !important;
  background: transparent !important;
  pointer-events: none;
}

/* Fallback top padding on inner pages to clear floating header pill */
body:not(.home) .wp-site-blocks > main > .wp-block-group:first-child,
.editor-styles-wrapper:not(.home) .wp-site-blocks > main > .wp-block-group:first-child {
  padding-top: 180px;
}

/* Allow interaction with header items */
header.wp-block-template-part:has(.klay-header-pill) .klay-header-pill,
div[data-type="core/template-part"]:has(.klay-header-pill) .klay-header-pill,
.wp-block-template-part:has(.klay-header-pill) .klay-header-pill,
.wp-site-blocks > header:has(.klay-header-pill) .klay-header-pill,
.editor-styles-wrapper header.wp-block-template-part:has(.klay-header-pill) .klay-header-pill,
.editor-styles-wrapper div[data-type="core/template-part"]:has(.klay-header-pill) .klay-header-pill,
.editor-styles-wrapper .wp-block-template-part:has(.klay-header-pill) .klay-header-pill,
header.wp-block-template-part:has(.klay-header-pill) a,
header.wp-block-template-part:has(.klay-header-pill) button,
header.wp-block-template-part:has(.klay-header-pill) input,
header.wp-block-template-part:has(.klay-header-pill) form {
  pointer-events: auto;
}

/* In editor, keep block selection clickable */
.editor-styles-wrapper header.wp-block-template-part:has(.klay-header-pill),
.editor-styles-wrapper div[data-type="core/template-part"]:has(.klay-header-pill),
.editor-styles-wrapper .wp-block-template-part:has(.klay-header-pill) {
  pointer-events: auto;
}

/* Ensure outer header wrapper has no background */
header:has(.klay-header-pill),
header:has(.klay-header-pill) > header,
div[data-type="core/template-part"]:has(.klay-header-pill),
.wp-block-template-part:has(.klay-header-pill),
header:has(.klay-header-pill) .wp-block-group.has-transparent-background-color,
.editor-styles-wrapper header:has(.klay-header-pill),
.editor-styles-wrapper header:has(.klay-header-pill) > header,
.editor-styles-wrapper div[data-type="core/template-part"]:has(.klay-header-pill) {
  background-color: transparent !important;
  background: transparent !important;
}

/* Pill Glass Effect — completely transparent by default (at top of page), NO border, NO glass, NO shadow */
header .klay-header-pill,
header .klay-glass,
.editor-styles-wrapper header .klay-header-pill,
.editor-styles-wrapper header .klay-glass {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              -webkit-backdrop-filter 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  padding-top: 16px;
  padding-bottom: 16px;
  padding-inline-start: 24px;
  padding-inline-end: 24px;
}

/* Header scrolled state — ONLY when scrolled & sticky: show glassmorphism, border, and blur */
header.is-scrolled .klay-header-pill,
header.is-scrolled .klay-glass,
.klay-header-pill.is-scrolled,
.klay-glass.is-scrolled,
.is-scrolled .klay-header-pill,
.is-scrolled .klay-glass,
header.is-scrolled .klay-header-pill.klay-glass,
body.is-header-scrolled .klay-header-pill,
body.is-header-scrolled .klay-glass,
.editor-styles-wrapper.is-header-scrolled .klay-header-pill,
.editor-styles-wrapper.is-header-scrolled .klay-glass,
.editor-styles-wrapper header.is-scrolled .klay-header-pill,
.editor-styles-wrapper header.is-scrolled .klay-glass,
.editor-styles-wrapper .klay-header-pill.is-scrolled,
.editor-styles-wrapper .klay-glass.is-scrolled,
.editor-styles-wrapper .is-scrolled .klay-header-pill,
.editor-styles-wrapper .is-scrolled .klay-glass,
.editor-styles-wrapper header.is-scrolled .klay-header-pill.klay-glass,
.editor-styles-wrapper div[data-type="core/template-part"].is-scrolled .klay-header-pill,
.editor-styles-wrapper .wp-block-template-part.is-scrolled .klay-header-pill {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(20, 22, 24, 0.75) !important;
  background: rgba(20, 22, 24, 0.75) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-inline-start: 24px !important;
  padding-inline-end: 24px !important;
}

/* CSS Scroll-Driven Animations: dynamically transitions header pill into glass when scrolled (Frontend only) */
@keyframes klayHeaderPillScroll {
  to {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background-color: rgba(20, 22, 24, 0.75) !important;
    background: rgba(20, 22, 24, 0.75) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

@supports (animation-timeline: scroll()) {
  /* Scroll-driven animations ONLY for frontend, NEVER inside editor-styles-wrapper where iframe scrolling freezes timelines */
  body:not(.editor-styles-wrapper) header .klay-header-pill,
  body:not(.editor-styles-wrapper) header .klay-glass {
    animation: klayHeaderPillScroll linear both;
    animation-timeline: scroll();
    animation-range: 10px 50px;
  }
}

/* Explicitly disable CSS scroll-driven animations in editor so class-based is-scrolled works 100% reliably */
.editor-styles-wrapper .klay-header-pill,
.editor-styles-wrapper .klay-glass,
.editor-styles-wrapper header .klay-header-pill,
.editor-styles-wrapper header .klay-glass,
.editor-styles-wrapper div[data-type="core/template-part"] .klay-header-pill,
.editor-styles-wrapper .wp-block-template-part .klay-header-pill {
  animation: none !important;
}


/* Nav links — Glass sub-pill container */
.klay-nav-glass,
header .klay-glass .klay-nav-glass.wp-block-group {
  border: none;
}

/* Nav links — individual link padding & hover pill */
.klay-nav-links .wp-block-navigation__container .wp-block-navigation-item a,
.klay-nav-links .wp-block-pages-list__item__link,
.klay-nav-links .wp-block-navigation-link__content {
  padding: 8px 24px;
  border-radius: 9999px;
  transition: all 0.3s;
}

.klay-nav-links .wp-block-navigation__container .wp-block-navigation-item a:hover,
.klay-nav-links .wp-block-navigation-item a:hover {
  color: var(--wp--preset--color--text-heading);
  background: var(--wp--preset--color--surface-bg);
}

/* ========================================
   Dropdown & Submenu Styles (Desktop Only)
   ======================================== */
@media (min-width: 1025px) {

  /* Hide FSE default background rendering to apply custom glass container */
  .klay-nav-links .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    background-color: var(--wp--preset--color--surface-bg) !important;
    border: 1px solid var(--wp--preset--color--border-main) !important;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  /* Dropdown arrow */
  .klay-nav-links .wp-block-navigation-item:not(.has-mega-menu)>.wp-block-navigation__submenu-container::before {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
    width: 12px !important;
    height: 12px !important;
    background: var(--wp--preset--color--surface-bg) !important;
    border-top: 1px solid var(--wp--preset--color--border-main) !important;
    border-left: 1px solid var(--wp--preset--color--border-main) !important;
    box-sizing: border-box !important;
  }

  /* Default state when visible */
  .klay-nav-links .wp-block-navigation-submenu:hover>.wp-block-navigation__submenu-container {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  /* Submenu items styling */
  .klay-nav-links .wp-block-navigation__submenu-container .wp-block-navigation-item a {
    padding: 12px 16px !important;
    border-radius: 10px;
    color: var(--wp--preset--color--text-body) !important;
    font-size: 0.8125rem !important;
    /* From reference */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.2s;
    background: transparent !important;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Dots for all submenu items */
  .klay-nav-links .wp-block-navigation__submenu-container .wp-block-navigation-item a::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--wp--preset--color--border-main);
    flex-shrink: 0;
    transition: background 0.2s;
  }

  .klay-nav-links .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover::before {
    background: var(--wp--preset--color--brand-primary);
  }

  .klay-nav-links .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    /* Light transparent black over card */
    color: var(--wp--preset--color--text-heading) !important;
    transform: translateX(4px);
  }

  /* Multilevel Offset (Third tier and beyond) */
  .klay-nav-links .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    left: calc(100% + 8px) !important;
    top: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    transform: translateX(8px);
  }

  .klay-nav-links .wp-block-navigation-submenu:hover>.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    /* Keep it hidden until hovered */
    opacity: 0;
    visibility: hidden;
  }

  .klay-nav-links .wp-block-navigation__submenu-container .wp-block-navigation-submenu:hover>.wp-block-navigation__submenu-container {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  /* Create invisible hover bridge on the list item to prevent JS mouseleave */
  .klay-nav-links .wp-block-navigation__submenu-container .wp-block-navigation-submenu::after {
    content: "" !important;
    position: absolute !important;
    right: -16px !important;
    top: 0 !important;
    width: 16px !important;
    height: 100% !important;
    background: transparent !important;
    z-index: 10 !important;
  }

  /* Remove visual arrow from deep submenus */
  .klay-nav-links .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
    display: none !important;
  }

  /* ========================================
       Mega Menu Foundation (Pro Prep)
       ======================================== */
  /* Apply this via Block Settings -> Advanced -> Additional CSS class(es): has-mega-menu */
  .has-mega-menu {
    position: static !important;
    /* Allow submenu to anchor to the parent container */
  }

  .has-mega-menu>.wp-block-navigation__submenu-container {
    width: 100vw;
    max-width: 1200px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(10px);
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

  .has-mega-menu:hover>.wp-block-navigation__submenu-container {
    transform: translateX(-50%) translateY(0);
    visibility: visible;
    opacity: 1;
  }

  /* Hide the dropdown icons inside the mega menu */
  .has-mega-menu .wp-block-navigation-submenu__toggle {
    display: none !important;
  }

  /* Make third tier a normal list inside the mega menu columns */
  .has-mega-menu .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    position: static !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: block !important;
    min-width: unset !important;
    background: transparent !important;
  }

  /* Give columns heading style */
  .has-mega-menu>.wp-block-navigation__submenu-container>.wp-block-navigation-item>a {
    font-family: var(--wp--preset--font-family--heading);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 11px !important;
    color: var(--wp--preset--color--text-body) !important;
    margin-bottom: 12px;
    padding-left: 0 !important;
    pointer-events: none;
    /* Make headings unclickable if desired, or keep them */
  }

  /* Adjust links inside mega menu columns */
  .has-mega-menu .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item a {
    padding: 8px 12px !important;
    border-radius: 4px;
    font-size: 0.8125rem !important;
  }
}

/* "LET'S TALK" CTA button — white default, brand-primary on hover */
.klay-cta-btn .wp-block-button__link {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.klay-cta-btn .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--brand-primary) !important;
    color: var(--wp--preset--color--page-bg, #0a0a0f) !important;
  }

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--wp--preset--font-family--body);
  background-color: var(--wp--preset--color--page-bg);
  color: var(--wp--preset--color--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hero Grid Background Pattern */
.klay-hero-bg,
body>.wp-site-blocks>header+.wp-block-group>main>.wp-block-group:first-child,
.wp-block-group.klay-hero {
  background-image:
    linear-gradient(to right, rgba(128, 128, 128, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(128, 128, 128, 0.04) 1px, transparent 1px);
  background-size: 4rem 4rem;
}

/* Hero Service List — layout and hover animation */
.klay-service-item {
  position: relative;
  z-index: 3;
  cursor: pointer;
}

.klay-service-item a {
  text-decoration: none !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.klay-service-text {
  opacity: 0.65;
  transition: all 0.3s;
}

.klay-service-arrow {
  opacity: 0;
  transform: translateX(-16px);
  transition: all 0.3s;
}

.klay-service-item:hover .klay-service-text {
  opacity: 1 !important;
  transform: translateX(-10px);
}

.klay-service-item:hover .klay-service-arrow {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Push service list to bottom of column */
.klay-service-list {
  margin-top: auto;
}

.wp-block-column:has(.klay-service-list) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ========================================
   Typography - Exact Match
   ======================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
  font-family: var(--wp--preset--font-family--heading);
  color: var(--wp--preset--color--text-heading);
  font-weight: 700;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* Serif Italic for "SILENT" style text */
.klay-serif-italic,
.font-serif {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
}

/* ========================================
   Container Width - Full-width backgrounds, constrained content
   ======================================== */

/* Site wrapper - allow full width backgrounds */
.wp-site-blocks {
  max-width: 100%;
}

/* Content constraint is handled by individual patterns via theme.json layout settings */

/* ========================================
   Transitions - Exact Match (500ms)
   ======================================== */
a,
button,
.wp-block-button__link,
.wp-block-navigation-link,
.wp-block-image img,
.wp-block-column,
input,
textarea,
.wp-block-social-link {
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   Hover Effects - Exact Match
   ======================================== */

/* Footer Link Styles */
footer a {
  text-decoration: none;
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--wp--preset--color--brand-primary);
  text-decoration: none;
}

/* Link hover */
a:hover {
  color: var(--wp--preset--color--brand-primary);
}



/* Circular arrow button - rotate on hover */
.klay-arrow-btn .wp-block-button__link {
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.klay-arrow-btn .wp-block-button__link:hover {
    transform: rotate(-45deg);
  }

/* Image hover - zoom effect */
.wp-block-image img:hover,
.wp-block-column:hover .wp-block-image img {
  transform: scale(1.05);
}

/* Social icons hover */
.wp-block-social-link:hover {
  transform: scale(1.1);
}

/* Navigation link hover */
.wp-block-navigation-link:hover {
  color: var(--wp--preset--color--text-heading);
}

/* Desktop: show inline nav links, hide hamburger */
@media (min-width: 1025px) {

  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    display: none;
  }

  .klay-nav-links .wp-block-navigation__responsive-container {
    display: block;
    position: static;
    width: auto;
    overflow: visible;
    background: none;
    color: inherit;
  }

  .klay-nav-links .wp-block-navigation__responsive-container .wp-block-navigation__container {
    display: flex;
    gap: 0;
  }
}

/* Fix: Hide duplicate/stray Customer Account icons in header 
   Only show the one inside .klay-header-icons */
header .wc-block-customer-account,
header .wp-block-woocommerce-customer-account {
  display: none !important;
}

header .klay-header-icons .wc-block-customer-account,
header .klay-header-icons .wp-block-woocommerce-customer-account {
  display: flex !important;
}

/* ========================================
   Glass Effect - Exact Match
   ======================================== */
.klay-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--wp--preset--color--border-light);
}

/* Vertical separator bar in hero */
.klay-vertical-bar {
  width: 1px;
  height: 60px;
  margin: 0;
  border: none;
  background: var(--wp--preset--color--border-main);
}

/* ========================================
   Hero Badge Dot
   ======================================== */
.klay-hero .animate-pulse {
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--brand-primary);
}

/* ========================================
   Spacing - Match py-32 (8rem)
   ======================================== */
.klay-section {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

/* ========================================
   Animations - Exact Match
   ======================================== */

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

.animate-fade-up {
  animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Marquee - Exact Speed */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  display: flex;
  white-space: nowrap;
  animation: marquee 60s linear infinite;
}

/* Pulse */
@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Bounce */
@keyframes bounce {

  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* ========================================
   Footer Glow Effect
   ======================================== */
.klay-footer-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: var(--wp--preset--color--brand-primary);
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.05;
  pointer-events: none;
}

/* ========================================
   Utilities
   ======================================== */

/* Scrollbar hide */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Custom selection */
::selection {
  background-color: var(--wp--preset--color--brand-primary);
  color: var(--wp--preset--color--text-on-brand);
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--border-main);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--wp--preset--color--brand-primary);
}

/* ========================================
   Icon Styles (Lucide-like)
   ======================================== */
.klay-icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
}

.klay-icon-lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ========================================
   Noise Texture Overlay
   ======================================== */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  mix-klay-mode: overlay;
  opacity: 0.5;
}



/* ========================================
   Journal/Blog Page Effects
   ======================================== */

/* Grayscale hover effect for blog images */
.klay-grayscale-hover img {
  filter: grayscale(100%);
  transition: filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.klay-grayscale-hover:hover img {
  filter: grayscale(0%);
}

/* Always grayscale images */
.klay-grayscale img {
  filter: grayscale(100%);
  transition: filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.klay-grayscale:hover img {
  filter: grayscale(0%);
}

/* Post title hover effect */
.wp-block-post-title a {
  transition: color 0.3s ease;
}

.wp-block-post-title a:hover {
  color: var(--wp--preset--color--brand-primary);
}

/* ========================================
   404 Page Styles
   ======================================== */
.klay-404-text {
  opacity: 0.2;
  user-select: none;
}

/* ========================================
   Marquee Section Styles
   ======================================== */
.klay-marquee-section {
  overflow: hidden;
}

/* Marquee surface variant - transparent by default */
.klay-marquee-surface {
  background-color: transparent;
}

.klay-marquee-track {
  animation: marquee 60s linear infinite;
  display: flex;
  width: max-content;
}


.klay-marquee-text {
  color: transparent;
  -webkit-text-stroke: 1px var(--wp--preset--color--text-body);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.klay-marquee-text:hover {
  color: var(--wp--preset--color--brand-primary);
  -webkit-text-stroke: 0;
}

.klay-marquee-dot {
  flex-shrink: 0;
  animation: pulse 2s infinite;
  line-height: 1;
}


/* ========================================
   Stats Section Styles
   ======================================== */
.klay-stats-section {
  position: relative;
  overflow: hidden;
}


/* Make column divider borders extremely subtle like template */
.klay-stats-section .wp-block-column {
  position: relative;
  transition: background-color 0.5s ease;
  border-color: rgba(255, 255, 255, 0.04);
  border-width: 0 1px 0 0;
}


/* Corner accent on hover - matches template (w-2 h-2, border-t border-l) */
.klay-stats-section .wp-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--wp--preset--color--brand-primary);
  border-left: 1px solid var(--wp--preset--color--brand-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.klay-stats-section .wp-block-column:hover::before {
  opacity: 1;
}

/* Number - scale and color on hover */
.klay-stats-section .wp-block-column p:first-child {
  transition: color 0.5s ease, transform 0.5s ease;
}

.klay-stats-section .wp-block-column:hover p:first-child {
  color: var(--wp--preset--color--brand-primary);
  transform: scale(1.1);
}

/* Label - tracking expands on hover */
.klay-stats-section .wp-block-column p:last-child {
  transition: letter-spacing 0.3s ease;
}

.klay-stats-section .wp-block-column:hover p:last-child {
  letter-spacing: 0.2em;
}

/* ========================================
   Features Section Styles
   ======================================== */
.klay-features .wp-block-column {
  position: relative;
  transition: all 0.5s ease;
}


/* Icon styling */
.klay-feature-icon {
  transition: all 0.3s ease;
  width: fit-content;
}

.klay-features .wp-block-column:hover .klay-feature-icon {
  background-color: var(--wp--preset--color--brand-primary);
  border-color: var(--wp--preset--color--brand-primary);
}

/* Learn More - hidden by default, visible on hover */
.klay-learn-more {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s ease;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--wp--preset--color--border-light);
}

.klay-features .wp-block-column:hover .klay-learn-more {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll hint */
.klay-scroll-hint {
  opacity: 0.6;
  text-align: right;
}

/* ========================================
   Showcase Slider Styles
   ======================================== */
.klay-showcase .wp-block-columns,
.klay-showcase-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  gap: 32px;
  padding-left: 48px;
  padding-right: 48px;
  padding-bottom: 24px;
  scrollbar-width: none;
}

.klay-showcase .wp-block-columns::-webkit-scrollbar,
.klay-showcase-slider::-webkit-scrollbar {
  display: none;
}

.klay-showcase .wp-block-columns > .wp-block-column,
.klay-showcase-slider > .wp-block-column,
.klay-showcase-slider > .klay-showcase-item {
  flex: 0 0 520px !important;
  max-width: 85vw !important;
  min-width: 320px !important;
  scroll-snap-align: start;
}

.klay-showcase-item {
  width: 100%;
  cursor: pointer;
}

/* Image hover effect - no grayscale, just scale */
.klay-showcase-image {
  overflow: hidden;
  border-radius: 8px;
}

.klay-showcase-image img {
  transition: all 0.7s ease;
}

.klay-showcase-item:hover .klay-showcase-image img {
  transform: scale(1.05);
}

/* Title hover */
.klay-showcase-title {
  transition: color 0.3s ease;
  font-size: 36px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
}

.klay-showcase-item:hover .klay-showcase-title {
  color: var(--wp--preset--color--brand-primary);
}

/* Arrow button footer container fix */
.klay-showcase-footer,
.klay-showcase-item>.wp-block-group {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.klay-showcase-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.klay-showcase-title a:hover {
  color: var(--wp--preset--color--brand-primary);
}

.klay-showcase-footer > a {
  display: inline-flex;
  text-decoration: none;
}

/* Arrow button hover */
.klay-showcase-item .klay-arrow-btn {
  transition: all 0.3s ease;
  /* Force circular shape and size to override block padding issues */
  width: 56px;
  height: 56px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Prevent button from shrinking */
  margin-inline-start: auto;
  /* Extra safety to push to right if parent flex fails */
}

.klay-showcase-item:hover .klay-arrow-btn {
  background-color: var(--wp--preset--color--brand-primary);
  border-color: var(--wp--preset--color--brand-primary);
  transform: rotate(-45deg);
  color: var(--wp--preset--color--page-bg);
}

.klay-showcase-item:hover .klay-arrow-btn p,
.klay-showcase-item:hover .klay-arrow-btn svg {
  color: var(--wp--preset--color--page-bg);
}

/* Navigation arrows */
.klay-showcase-nav {
  gap: 16px;
}

.klay-nav-arrow {
  cursor: pointer;
  transition: all 0.3s ease;
}

.klay-nav-arrow:hover {
  background-color: var(--wp--preset--color--brand-primary);
  border-color: var(--wp--preset--color--brand-primary);
}

.klay-nav-arrow:hover p {
  color: var(--wp--preset--color--page-bg);
}

/* ========================================
   Testimonials Section Styles
   ======================================== */
.klay-testimonial-card {
  transition: transform 0.4s ease, border-color 0.4s ease;
  position: relative;
}

.klay-testimonial-card:hover {
  transform: translateY(-4px);
}

.klay-quote-icon {
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 24px;
}

.klay-quote-icon img {
  width: 40px !important;
  height: 40px !important;
  display: block;
}

/* ========================================
   Pricing Section Card Styles
   ======================================== */
.klay-pricing-card {
  border-radius: 24px;
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
}

.klay-pricing-card:hover {
  transform: translateY(-8px);
}

/* Highlighted pricing card */
.klay-pricing-highlight {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.klay-pricing-highlight:hover {
  transform: scale(1.05) translateY(-8px);
}

/* Best Value badge */
.klay-best-value {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--wp--preset--color--brand-primary);
  color: var(--wp--preset--color--page-bg);
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ========================================
   Testimonials Card Styles (Frontend & Site Editor Parity)
   ======================================== */
.klay-testimonials .wp-block-columns,
.editor-styles-wrapper .klay-testimonials .wp-block-columns,
.editor-styles-wrapper .klay-testimonials [data-type="core/columns"] > .block-editor-block-list__layout {
  display: flex !important;
  align-items: stretch !important;
}

.klay-testimonials .wp-block-column,
.editor-styles-wrapper .klay-testimonials .wp-block-column,
.editor-styles-wrapper .klay-testimonials [data-type="core/column"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  box-sizing: border-box !important;
  height: 100% !important;
}

.klay-testimonials .wp-block-column > .block-editor-block-list__layout,
.editor-styles-wrapper .klay-testimonials [data-type="core/column"] > .block-editor-block-list__layout {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
}

.klay-testimonial-card,
.wp-block-group.klay-testimonial-card,
.editor-styles-wrapper .klay-testimonial-card,
.editor-styles-wrapper div[data-type="core/group"].klay-testimonial-card {
  border-radius: 24px !important;
  padding: 40px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 100% !important;
  background: rgba(255, 255, 255, 0.03) !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  transition: all 0.5s ease;
  position: relative;
}

.klay-testimonial-card:hover,
.editor-styles-wrapper .klay-testimonial-card:hover {
  transform: translateY(-8px);
  background-color: var(--wp--preset--color--card-bg, #161819) !important;
  border-color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
}

/* Quote icon image */
.klay-quote-icon,
.editor-styles-wrapper .klay-quote-icon {
  width: 40px !important;
  height: 40px !important;
  margin: 0 0 24px 0 !important;
  display: block !important;
}

.klay-quote-icon img,
.editor-styles-wrapper .klay-quote-icon img {
  width: 40px !important;
  height: 40px !important;
  display: block !important;
}

/* Quote text */
.klay-testimonial-card > p,
.editor-styles-wrapper .klay-testimonial-card > p,
.editor-styles-wrapper .klay-testimonial-card > div[data-type="core/paragraph"] p {
  font-size: 18px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  margin: 0 0 32px 0 !important;
  padding-bottom: 32px !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 1px solid var(--wp--preset--color--border-light, rgba(255, 255, 255, 0.05)) !important;
  color: var(--wp--preset--color--text-heading, #ffffff) !important;
}

/* Author row - pinned to bottom of the card */
.klay-testimonial-card > .wp-block-group:last-child,
.editor-styles-wrapper .klay-testimonial-card > .wp-block-group:last-child,
.editor-styles-wrapper .klay-testimonial-card > div[data-type="core/group"]:last-child {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 0 !important;
}

/* Avatar inside author row */
.klay-testimonial-card > .wp-block-group:last-child .wp-block-image,
.editor-styles-wrapper .klay-testimonial-card > .wp-block-group:last-child .wp-block-image,
.editor-styles-wrapper .klay-testimonial-card > div[data-type="core/group"]:last-child div[data-type="core/image"] {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.klay-testimonial-card > .wp-block-group:last-child .wp-block-image img,
.editor-styles-wrapper .klay-testimonial-card > .wp-block-group:last-child .wp-block-image img,
.editor-styles-wrapper .klay-testimonial-card > div[data-type="core/group"]:last-child div[data-type="core/image"] img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 9999px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Author name & title layout */
.klay-testimonial-card > .wp-block-group:last-child > .wp-block-group,
.editor-styles-wrapper .klay-testimonial-card > .wp-block-group:last-child > .wp-block-group,
.editor-styles-wrapper .klay-testimonial-card > div[data-type="core/group"]:last-child > div[data-type="core/group"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Staggered layout - middle card offset (desktop min-width: 782px) */
@media (min-width: 782px) {
  .klay-testimonials .wp-block-columns > .wp-block-column:nth-child(2),
  .klay-testimonials .wp-block-columns > div:nth-child(2),
  .editor-styles-wrapper .klay-testimonials .wp-block-columns > .wp-block-column:nth-of-type(2),
  .editor-styles-wrapper .klay-testimonials .wp-block-columns > [data-type="core/column"]:nth-of-type(2),
  .editor-styles-wrapper .klay-testimonials .wp-block-columns .wp-block-column:nth-of-type(2),
  .editor-styles-wrapper .klay-testimonials [data-type="core/columns"] > .block-editor-block-list__layout > [data-type="core/column"]:nth-of-type(2) {
    transform: translateY(48px) !important;
  }

  .klay-testimonials .wp-block-columns > .wp-block-column:nth-child(2):hover,
  .editor-styles-wrapper .klay-testimonials .wp-block-columns > .wp-block-column:nth-of-type(2):hover,
  .editor-styles-wrapper .klay-testimonials .wp-block-columns > [data-type="core/column"]:nth-of-type(2):hover {
    transform: translateY(40px) !important;
  }
}


/* ========================================
/* ========================================
   Blog/Journal Card Styles (Static & Query Loop)
   ======================================== */
.klay-blog-card {
  transition: all 0.5s ease;
  cursor: pointer;
  list-style: none !important;
}

.klay-blog-card:hover {
  transform: translateY(-4px);
}

/* Image zoom on hover (core/image and core/post-featured-image) */
.klay-blog-card .wp-block-image img,
.klay-blog-card .wp-block-post-featured-image img {
  transition: transform 0.7s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.klay-blog-card:hover .wp-block-image img,
.klay-blog-card:hover .wp-block-post-featured-image img {
  transform: scale(1.05);
}

/* Featured image container */
.klay-blog-card .wp-block-post-featured-image {
  overflow: hidden;
  border-radius: 8px;
  margin: 0 !important;
}

.klay-blog-card .wp-block-post-featured-image:not(:has(img)) {
  background-color: var(--wp--preset--color--card-bg);
  aspect-ratio: 16/10;
}

/* Blog card image wrapper — positioned parent for badge */
.klay-blog-card > .wp-block-group:first-child,
.klay-blog-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.klay-blog-image-wrap img,
.klay-blog-card .wp-block-post-featured-image img {
  border-radius: 12px;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Category badge (capsule badge on top of image) */
.klay-category-badge,
.klay-blog-image-wrap .wp-block-post-terms,
.klay-blog-card .klay-category-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background-color: rgba(15, 16, 17, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--wp--preset--color--text-heading, #ffffff) !important;
  border: 1px solid var(--wp--preset--color--border-main, rgba(255, 255, 255, 0.15));
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 2;
  border-radius: 6px;
  line-height: 1.2;
  margin: 0;
  pointer-events: auto;
}

.klay-category-badge a,
.klay-blog-image-wrap .wp-block-post-terms a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Base Blog Card & Post Item Layout */
.klay-blog-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-block-post-template > li {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Post Titles - default color & smooth transition */
.klay-blog-card h3,
.klay-blog-card .wp-block-post-title,
.klay-blog-card .wp-block-post-title a,
.wp-block-post-template > li .wp-block-post-title,
.wp-block-post-template > li .wp-block-post-title a {
  color: var(--wp--preset--color--text-heading, #ffffff) !important;
  text-decoration: none !important;
  transition: color 0.25s ease;
}

/* STRICTLY ISOLATED HOVER:
   Only hover the specific card / list item being hovered, never all cards together! */
.klay-blog-card:hover h3,
.klay-blog-card:hover h3 a,
.klay-blog-card:hover .wp-block-post-title a,
.wp-block-post-template > li:hover .klay-blog-card .wp-block-post-title a,
.wp-block-post-template > li:hover > .wp-block-post-title a,
.wp-block-post-template > li:hover .wp-block-post-title a {
  color: var(--wp--preset--color--brand-primary) !important;
}

/* Image zoom for the hovered card only */
.klay-blog-card:hover .klay-blog-image-wrap img,
.klay-blog-card:hover .wp-block-post-featured-image img,
.wp-block-post-template > li:hover .klay-blog-image-wrap img,
.wp-block-post-template > li:hover .wp-block-post-featured-image img {
  transform: scale(1.04);
}

/* Query Loop grid layout gap */
.klay-blog-query .wp-block-post-template.is-flex-container {
  gap: 40px !important;
  padding: 0;
  margin: 0;
}

.klay-blog-query .wp-block-post-template.is-flex-container > li {
  width: calc(33.333% - 27px) !important;
  margin: 0 !important;
}


/* ========================================
   Features Card Styles (enhanced)
   ======================================== */
.klay-feature-card {
  border-radius: 16px;
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
  background-color: var(--wp--preset--color--card-bg);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Glow effect on hover */
.klay-feature-card::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 160px;
  height: 160px;
  background: var(--wp--preset--color--brand-primary);
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
}

.klay-feature-card:hover::before {
  opacity: 0.2;
}

.klay-feature-card:hover {
  transform: translateY(-8px);
  border-color: var(--wp--preset--color--brand-primary) !important;
}


/* Remove innermost border in testimonial author section */
.klay-testimonial-card .wp-block-group .wp-block-group {
  border: none;
}

/* Fix pricing section - remove container constraints */
.klay-pricing-highlight {
  position: relative;
  overflow: visible;
}

/* Fix Best Value badge position - ensure it's visible */
.klay-best-value {
  z-index: 20;
}

/* Remove unwanted gaps between sections */
.wp-block-group.has-background+.wp-block-group.has-background {
  margin-top: 0;
}

/* Fix footer CTA section gaps */
.wp-site-blocks>*+* {
  margin-top: 0;
}

/* Ensure buttons don't have extra gaps */
.wp-block-buttons {
  gap: 16px;
}

.wp-block-button__link {
  margin: 0;
}

/* ========================================
   Process Section - Sticky Scroll Effect
   ======================================== */
.klay-process-section {
  border-top: 1px solid var(--wp--preset--color--border-main);
}

/* Sticky column on desktop */
@media (min-width: 1024px) {
  .klay-process-sticky-col {
    position: relative;
  }

  .klay-process-sticky {
    position: sticky;
    top: 128px;
  }
}

/* Step number styling - large, faded */
.klay-step-number {
  opacity: 0.15;
  transition: opacity 0.5s ease;
}

.klay-process-step:hover .klay-step-number,
.klay-process-step.active .klay-step-number {
  opacity: 1;
}

/* Progress indicators */
.klay-process-indicator {
  opacity: 0.3;
  transition: all 0.5s ease;
  cursor: pointer;
  gap: 16px;
}

.klay-process-indicator.active {
  opacity: 1;
  transform: translateX(16px);
}

/* Hide sticky column on mobile */
@media (max-width: 1023px) {
  .klay-process-sticky-col {
    display: none;
  }

  .klay-process-steps {
    flex-basis: 100%;
  }
}


/* ========================================
   Parallax Section
   ======================================== */
.klay-parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Fallback for iOS - no fixed backgrounds */
@supports (-webkit-touch-callout: none) {
  .klay-parallax {
    background-attachment: scroll;
  }
}

/* ========================================
   Case Study Styles
   ======================================== */
.klay-case-study-hero {
  min-height: 100vh;
}

.klay-case-study-image {
  transition: transform 2s ease;
}

.klay-case-study-image:hover {
  transform: scale(1.05);
}

/* Mobile mockups offset & styling */
.klay-mockup-offset-up {
  transform: translateY(-48px);
}

.klay-mockup-offset-down {
  transform: translateY(48px);
}

.klay-mockup-card img,
.klay-mockup-card figure img {
  border-radius: 24px;
  border: 4px solid var(--border-main);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .klay-mockup-offset-down,
  .klay-mockup-offset-up {
    transform: none !important;
  }
}

/* Next project hover effect */
.klay-next-project {
  transition: color 0.3s ease;
}

.klay-next-project:hover {
  color: var(--wp--preset--color--brand-primary);
}

.klay-next-project svg {
  transition: transform 0.3s ease;
}

/* ========================================
   Hero CTA Fixes
   ======================================== */

/* Force rounded button shape in hero */
.klay-hero .klay-arrow-btn .wp-block-button__link {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}

/* Limit width of agency description text in hero */
.klay-hero p.has-small-font-size {
  max-width: 24rem;
}

/* Style Italic elements (<em>) inside the hero heading as the signature grey serif accent */
.klay-hero h1 em {
  font-family: ui-serif, Georgia, serif;
  font-style: italic;
  color: #71717a;
  position: relative;
  display: inline-block;
  z-index: 10;
}

/* Add the green stroke underline to the accent word */
.klay-hero h1 em::after {
  content: '';
  position: absolute;
  bottom: 0.1em;
  left: 0;
  width: 100%;
  height: 14px;
  z-index: -1;
  opacity: 0.6;
  background-color: var(--wp--preset--color--brand-primary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q 50 10 100 5' stroke='black' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q 50 10 100 5' stroke='black' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

/* ========================================
   Feature Card Icon Fixes
   ======================================== */

/* Force fixed 56x56px icon box with brand-primary border */
.klay-feature-icon {
  width: 56px;
  height: 56px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Force emoji/symbols to render as text, not color glyphs */
.klay-feature-icon p {
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols', sans-serif;
  color: var(--wp--preset--color--text-heading);
  line-height: 1;
}

/* ========================================
   Process Section Fixes
   ======================================== */

/* Step number margin */
.klay-process-step .klay-step-number {
  margin-bottom: 16px;
}

/* Title margin */
.klay-process-step h3 {
  margin-bottom: 24px;
}

/* Description max-width */
.klay-process-step .has-large-font-size {
  max-width: 40rem;
}

/* ========================================
   Shop Section Hover Effects
   ======================================== */

/* Image container overflow */
.klay-product-image {
  overflow: hidden;
  position: relative;
}

/* Image scale on hover */
.klay-product-image img {
  transition: transform 0.5s ease;
}

.klay-product-card:hover .klay-product-image img {
  transform: scale(1.05);
}

/* ========================================
   Blog Section Hover Effects
   ======================================== */

/* Blog card image container */
.klay-blog-card figure {
  overflow: hidden;
  border-radius: 8px;
}

/* Blog image scale on hover */
.klay-blog-card img {
  transition: transform 0.5s ease;
}

.klay-blog-card:hover img {
  transform: scale(1.05);
}

/* Featured Post Hover */
.klay-featured-post {
  overflow: hidden;
}

.klay-featured-post:hover .wp-block-cover__image-background,
.klay-featured-post:hover .wp-block-cover__background {
  transform: scale(1.05);
  transition: transform 0.5s ease;
}

/* Ensure transition is present on non-hover state too */
.klay-featured-post .wp-block-cover__image-background,
.klay-featured-post .wp-block-cover__background {
  transition: transform 0.5s ease;
}

/* ========================================
   Comments Section Styling
   ======================================== */

.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--wp--preset--color--border-main);
  color: var(--wp--preset--color--text-heading);
  padding: 16px 24px;
  border-radius: 8px;
  width: 100%;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
}

.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus {
  border-color: var(--wp--preset--color--brand-primary);
  background-color: rgba(255, 255, 255, 0.08);
}

.wp-block-post-comments-form label {
  color: var(--wp--preset--color--text-body);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
}

/* Comment list spacing */
.wp-block-params {
  margin-bottom: 32px;
}


/* ========================================
   Feature Card Hover Effects
   ======================================== */
.klay-learn-more {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease;
  margin-top: auto;
  width: 100%;
}

.klay-feature-card:hover .klay-learn-more {
  opacity: 1;
  transform: translateY(0);
}

.klay-feature-card {
  transition: all 0.3s ease;
}


/* ========================================
   Footer Grid Styles (Reference Parity)
   ======================================== */
.klay-footer {
  position: relative;
  overflow: hidden;
}

/* Footer columns grid — no extra border, only padding */
.klay-footer>.wp-block-columns {
  padding-top: 64px;
}

/* Column title — subtle opacity like reference */
.klay-footer .wp-block-heading {
  opacity: 0.6;
}

/* Footer nav links — match reference font/weight */
.klay-footer .wp-block-navigation a {
  color: var(--wp--preset--color--text-body);
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.3s ease;
}

.klay-footer .wp-block-navigation a:hover {
  color: var(--wp--preset--color--brand-primary);
}

/* Footer brand text */
.klay-footer .has-heading-font-family {
  color: var(--wp--preset--color--text-heading);
}

/* ========================================
   Footer Newsletter Styles
   ======================================== */
.klay-newsletter-form {
  margin: 0;
}

.klay-newsletter-wrap {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 8px;
  transition: border-color 0.3s ease;
}

.klay-newsletter-wrap:focus-within {
  border-bottom-color: var(--wp--preset--color--brand-primary);
}

.klay-newsletter-input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  width: 100%;
  font-size: 0.875rem;
  padding: 8px 0;
  font-family: inherit;
}

.klay-newsletter-input::placeholder {
  color: #4b5563;
}

.klay-newsletter-btn {
  color: var(--wp--preset--color--brand-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.klay-newsletter-btn:hover {
  transform: translateX(4px);
}

/* Legacy support */
.klay-footer-newsletter input[type="email"] {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  padding: 16px 0;
  color: white;
  box-shadow: none;
  transition: all 0.3s ease;
}

.klay-footer-newsletter input[type="email"]:focus {
  border-bottom-color: var(--wp--preset--color--brand-primary);
  outline: none;
}

.klay-footer-newsletter button {
  background: transparent;
  border: none;
  color: var(--wp--preset--color--brand-primary);
  padding: 0;
  transition: transform 0.3s ease;
}

.klay-footer-newsletter button:hover {
  transform: translateX(4px);
}

/* ===== NEWSLETTER / SEARCH PILL BLOCK (NATIVE BLOCK) ===== */
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  background: var(--wp--preset--color--card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease !important;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--wp--preset--color--brand-primary) !important;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
  background: transparent !important;
  border: none !important;
  color: var(--wp--preset--color--text-heading) !important;
  padding: 0 24px !important;
  font-size: 1rem !important;
  flex: 1 !important;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__input::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__button {
  background: var(--wp--preset--color--brand-primary) !important;
  color: var(--wp--preset--color--text-on-brand) !important;
  border-radius: 9999px !important;
  padding: 12px 32px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border: none !important;
  cursor: pointer !important;
  transition: filter 0.3s ease !important;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
  filter: brightness(0.9) !important;
}

/* Ensure mark tags (used for Gutenberg inline text highlighting) are transparent and inherit font */
mark,
.wp-block-heading mark,
.editor-styles-wrapper mark,
.block-editor-block-list__layout mark {
  background-color: transparent !important;
  color: inherit;
  font-family: inherit !important;
}

.klay-glass.scrolled {
  /* Semi-transparent card-bg */
  border-color: var(--wp--preset--color--border-main);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ========================================
   Blog Archive Category Badge
   ======================================== */

/* Image wrapper for category badge positioning */
.klay-blog-image-wrapper,
.klay-blog-image-wrap {
  position: relative;
  margin-bottom: 24px;
}

.klay-featured-image-fallback {
  margin: 0;
  width: 100%;
}

.klay-featured-image-fallback img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}

/* Category badge overlay on featured images */
.klay-category-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background-color: rgba(15, 16, 17, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--wp--preset--color--text-heading, #ffffff) !important;
  border: 1px solid var(--wp--preset--color--border-main, rgba(255, 255, 255, 0.15));
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  z-index: 10;
}

.klay-category-badge a {
  color: inherit;
  text-decoration: none;
}

/* ========================================
   WooCommerce Product Card Styles
   ======================================== */
.klay-product-card {
  transition: transform 0.3s ease;
}

.klay-product-card:hover {
  transform: translateY(-4px);
}

/* Product image container */
.wc-block-grid__product-image,
.klay-product-card .wc-block-components-product-image,
.klay-product-card figure {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border-main);
  transition: border-color 0.3s ease;
}

.klay-product-card:hover .wc-block-grid__product-image,
.klay-product-card:hover figure {
  border-color: var(--wp--preset--color--brand-primary);
}

/* Product image hover zoom */
.klay-product-card img {
  transition: transform 0.5s ease, opacity 0.3s ease;
  opacity: 0.85;
}

.klay-product-card:hover img {
  transform: scale(1.05);
  opacity: 1;
}

/* Product title */
.wc-block-grid__product-title,
.klay-product-card .wp-block-post-title a {
  color: var(--wp--preset--color--text-heading);
  font-weight: 700;
  transition: color 0.3s ease;
  text-decoration: none;
}

.klay-product-card:hover .wp-block-post-title a {
  color: var(--wp--preset--color--brand-primary);
}

/* Product price */
.wc-block-grid__product-price,
.wc-block-components-product-price {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  color: var(--wp--preset--color--text-heading);
}

/* Product rating stars */
.wc-block-grid__product-rating,
.wc-block-components-product-rating {
  color: #facc15;
  /* Yellow/Gold */
}

/* Filter/Sort buttons */
.klay-filter-btn {
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.klay-filter-btn:hover {
  border-color: var(--wp--preset--color--brand-primary);
  background-color: var(--wp--preset--color--card-bg);
}

/* ========================================
   WooCommerce Product Collection Carousel Navigation
   ======================================== */

/* Match Digital Excellence section nav arrow style */
.wc-block-next-previous-buttons {
  gap: 8px;
}

.wc-block-next-previous-buttons .wc-block-next-previous-buttons__button {
  background: transparent !important;
  border: 1px solid var(--wp--preset--color--border-main, rgba(255,255,255,0.15)) !important;
  border-radius: 9999px !important;
  padding: 10px 14px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease !important;
  color: var(--wp--preset--color--text-body, #9ca3af) !important;
}

.wc-block-next-previous-buttons .wc-block-next-previous-buttons__button:hover {
  background-color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
  border-color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
  color: var(--wp--preset--color--page-bg, #0a0a0f) !important;
}

.wc-block-next-previous-buttons .wc-block-next-previous-buttons__button svg {
  fill: currentColor;
  width: 14px;
  height: 14px;
}

/* Disabled state */
.wc-block-next-previous-buttons .wc-block-next-previous-buttons__button:disabled,
.wc-block-next-previous-buttons .wc-block-next-previous-buttons__button[disabled] {
  opacity: 0.3;
  cursor: default;
}

/* ========================================
   WooCommerce Product Image Height Constraint
   ======================================== */

/* Prevent images from stretching too tall on frontend when aspect-ratio = Original */
.product-card .wc-block-components-product-image img,
.klay-product-card .wc-block-components-product-image img,
.wc-block-grid__product-image img,
.klay-shop .wc-block-components-product-image img {
  max-height: 500px;
  object-fit: cover;
  width: 100%;
}

/* ========================================
   WooCommerce Shop Archive Product Cards
   ======================================== */

/* Product card wrapper — both pattern-based and WC grid */
.product-card,
.wc-block-grid__product,
.wp-block-woocommerce-product-template .wp-block-group {
  transition: transform 0.3s ease;
}

.product-card:hover,
.wc-block-grid__product:hover {
  transform: translateY(-4px);
}

/* Product image container — dark bg + rounded + border */
.product-card .image-wrapper,
.product-card .wc-block-components-product-image,
.product-card .wp-block-woocommerce-product-image,
.wc-block-grid__product-image {
  border-radius: 12px;
  overflow: hidden;
  border: none;
  background-color: var(--wp--preset--color--surface-bg, #1a1a2e);
  position: relative;
  margin-bottom: 0 !important;
  /* Fix hover corner glitch — mask forces smooth clipping */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
}

/* Remove WooCommerce default margin on product image */
.wp-block-woocommerce-product-template .product-card .wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-template .product-card .wc-block-components-product-image,
.wp-block-woocommerce-product-template .wc-block-components-product-image,
.product-card .wc-block-components-product-image,
.product-card .wp-block-woocommerce-product-image,
.image-wrapper .wc-block-components-product-image,
.image-wrapper .wp-block-woocommerce-product-image,
.wc-block-components-product-image.wc-block-grid__product-image {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}



/* Product image — hover zoom + dim effect */
.product-card img,
.wc-block-grid__product-image img {
  transition: transform 0.5s ease, opacity 0.3s ease;
  opacity: 0.85;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card:hover img,
.wc-block-grid__product:hover .wc-block-grid__product-image img {
  opacity: 1;
}

/* Sale badge — brand primary */
.wc-block-components-product-sale-badge,
.product-card .wc-block-components-product-sale-badge,
.onsale {
  background-color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
  color: var(--wp--preset--color--text-on-brand, #0a0a0f) !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 4px 10px !important;
  border: none !important;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
}

/* Product title in shop grid */
.product-card .wp-block-post-title,
.product-card .wp-block-post-title a,
.wc-block-grid__product-title {
  color: var(--wp--preset--color--text-heading, #f1f1f1) !important;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.3s ease;
  line-height: 1.3;
}

.product-card:hover .wp-block-post-title a {
  color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
}

/* Product category/terms in shop grid */
.product-card .taxonomy-product_cat,
.product-card .wp-block-post-terms {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--text-body, #9ca3af);
}

.product-card .wp-block-post-terms a {
  color: var(--wp--preset--color--text-body, #9ca3af) !important;
  text-decoration: none;
}

/* Product price in shop grid */
.product-card .wc-block-components-product-price,
.wc-block-grid__product-price {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--text-heading, #f1f1f1) !important;
  font-size: 16px;
}

/* Struck-through original price */
.product-card .wc-block-components-product-price del,
.wc-block-grid__product-price del {
  opacity: 0.4;
  font-weight: 400;
}

/* Sale price highlight */
.product-card .wc-block-components-product-price ins,
.wc-block-grid__product-price ins {
  color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
  text-decoration: none;
  font-weight: 700;
}

/* Product rating in grid */
.product-card .wc-block-components-product-rating,
.wc-block-grid__product-rating {
  color: #facc15;
}

/* Add to Cart button in product grid */
.product-card .wp-block-button .wp-element-button,
.product-card .wc-block-components-product-button .wc-block-components-product-button__button,
.wc-block-grid__product .wp-block-button .wp-element-button,
.wc-block-grid__product-add-to-cart .wp-element-button,
.wp-block-woocommerce-product-button .wc-block-components-product-button__button {
  background-color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
  color: var(--wp--preset--color--text-on-brand, #0a0a0f) !important;
  border-radius: 9999px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  border: none !important;
  transition: all 0.3s ease !important;
  width: 100%;
  text-align: center;
  cursor: pointer;
}



/* "View Cart" link after adding to cart */
.product-card .wc-block-components-product-button .added_to_cart,
.wc-block-grid__product .added_to_cart,
.wp-block-woocommerce-product-button .added_to_cart {
  display: block;
  text-align: center;
  margin-top: 8px;
  color: var(--wp--preset--color--text-body, #9ca3af);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 8px;
  border: 1px solid var(--wp--preset--color--border-main, rgba(255,255,255,0.08));
  border-radius: 9999px;
  transition: all 0.3s ease;
}

.product-card .wc-block-components-product-button .added_to_cart:hover,
.wc-block-grid__product .added_to_cart:hover,
.wp-block-woocommerce-product-button .added_to_cart:hover {
  border-color: var(--wp--preset--color--brand-primary, #d9fb06);
  color: var(--wp--preset--color--brand-primary, #d9fb06);
}

/* "In Cart" state button */
.product-card .wc-block-components-product-button__button--in-cart,
.wp-block-woocommerce-product-button .wc-block-components-product-button__button--in-cart {
  background-color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
}

/* ========================================
   WooCommerce Single Product Styles
   ======================================== */
.wc-block-product-image-gallery,
.woocommerce-product-gallery {
  border-radius: 16px;
  overflow: hidden;
}

.wc-block-product-image-gallery img {
  border-radius: 16px;
}

/* Product info sticky sidebar */
.klay-product-info .wp-block-group {
  position: sticky;
  top: 128px;
}

/* Add to Cart button styling */
.wc-block-components-product-add-to-cart .wc-block-components-button,
.single_add_to_cart_button,
.wc-block-add-to-cart-form__submit {
  background-color: var(--wp--preset--color--brand-primary);
  color: var(--wp--preset--color--text-on-brand);
  border-radius: 9999px;
  padding: 16px 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  border: none;
  transition: all 0.3s ease;
  width: 100%;
}

.wc-block-components-product-add-to-cart .wc-block-components-button:hover,
.single_add_to_cart_button:hover,
.wc-block-add-to-cart-form__submit:hover {
  background-color: var(--wp--preset--color--text-heading);
  color: var(--wp--preset--color--page-bg);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(217, 251, 6, 0.2);
}

/* Quantity input */
.wc-block-components-quantity-selector,
.quantity input {
  background-color: var(--wp--preset--color--card-bg);
  border: 1px solid var(--wp--preset--color--border-main);
  border-radius: 8px;
  color: var(--wp--preset--color--text-heading);
}

/* ========================================
   WooCommerce Cart Styles
   ======================================== */
.klay-cart-block,
.wc-block-cart {
  --wc-block-components-product-name-color: var(--wp--preset--color--text-heading);
  --wc-block-components-product-price-color: var(--wp--preset--color--text-heading);
}

/* Cart items */
.wc-block-cart-items__row,
.wc-block-cart__main .wc-block-cart-items__row {
  background-color: var(--wp--preset--color--card-bg);
  border: 1px solid var(--wp--preset--color--border-main);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}

/* Cart item image */
.wc-block-cart-item__image img {
  border-radius: 8px;
}

/* Cart item title */
.wc-block-cart-item__product-name {
  color: var(--wp--preset--color--text-heading);
  font-weight: 700;
  font-size: 18px;
}

/* Cart totals sidebar */
.wc-block-cart__totals-container,
.wc-block-cart__sidebar {
  background-color: var(--wp--preset--color--card-bg);
  border: 1px solid var(--wp--preset--color--border-main);
  border-radius: 16px;
  padding: 32px;
}

/* Cart total heading */
.wc-block-cart__totals-title,
.wc-block-components-totals-item__label {
  color: var(--wp--preset--color--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* Cart total amount */
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount {
  color: var(--wp--preset--color--text-heading);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
}

/* Grand total */
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
  color: var(--wp--preset--color--brand-primary);
  font-size: 24px;
}

/* Checkout button */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.checkout-button {
  background-color: var(--wp--preset--color--brand-primary);
  color: var(--wp--preset--color--text-on-brand);
  border-radius: 9999px;
  padding: 16px 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  border: none;
  transition: all 0.3s ease;
  width: 100%;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.checkout-button:hover {
  background-color: var(--wp--preset--color--text-heading);
  color: var(--wp--preset--color--page-bg);
}

/* Remove item button */
.wc-block-cart-item__remove-link {
  color: #ef4444;
  transition: color 0.3s ease;
}

.wc-block-cart-item__remove-link:hover {
  color: #dc2626;
}

/* Quantity selector in cart */
.wc-block-components-quantity-selector {
  border: 1px solid var(--wp--preset--color--border-main);
  border-radius: 8px;
  overflow: hidden;
}

.wc-block-components-quantity-selector__button {
  background-color: transparent;
  color: var(--wp--preset--color--text-heading);
}

.wc-block-components-quantity-selector__button:hover {
  background-color: var(--wp--preset--color--surface-bg);
}

/* ========================================
   WooCommerce Related Products
   ======================================== */
.wc-block-related-products .wc-block-grid__products,
.related.products .products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

@media (max-width: 1024px) {

  .wc-block-related-products .wc-block-grid__products,
  .related.products .products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {

  .wc-block-related-products .wc-block-grid__products,
  .related.products .products {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Prose Typography (Generic Page)
   ======================================== */
.klay-prose {
  color: var(--wp--preset--color--text-body);
  line-height: 1.8;
}

/* Prose Headings */
.klay-prose h2,
.klay-prose h3,
.klay-prose h4 {
  color: var(--wp--preset--color--text-heading);
  font-family: var(--wp--preset--font-family--heading);
  text-transform: uppercase;
  margin-top: 2em;
  margin-bottom: 0.75em;
  line-height: 1.2;
}

.klay-prose h2 {
  font-size: 2rem;
  font-weight: 700;
}

.klay-prose h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

.klay-prose h4 {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Prose Paragraphs */
.klay-prose p {
  margin-bottom: 1.5em;
}

/* Prose Links */
.klay-prose a {
  color: var(--wp--preset--color--brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.3s ease;
}

.klay-prose a:hover {
  opacity: 0.8;
}

/* Prose Lists */
.klay-prose ul,
.klay-prose ol {
  margin-bottom: 1.5em;
  padding-left: 1.5em;
}

.klay-prose li {
  margin-bottom: 0.5em;
}

.klay-prose li strong {
  color: var(--wp--preset--color--text-heading);
}

/* Prose Blockquotes */
.klay-prose blockquote {
  border-left: 3px solid var(--wp--preset--color--brand-primary);
  padding-left: 1.5em;
  margin: 2em 0;
  font-style: italic;
  font-size: 1.125rem;
  color: var(--wp--preset--color--text-heading);
}

.klay-prose blockquote cite {
  display: block;
  margin-top: 1em;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  color: var(--wp--preset--color--text-heading);
}

/* Prose Code */
.klay-prose code {
  background-color: var(--wp--preset--color--card-bg);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
  color: var(--wp--preset--color--brand-primary);
}

.klay-prose pre {
  background-color: var(--wp--preset--color--card-bg) !important;
  padding: 1.5em !important;
  border-radius: 12px !important;
  border: 1px solid var(--wp--preset--color--border-main) !important;
  overflow-x: auto;
  margin: 2em 0;
}

.klay-prose pre code {
  background: none;
  padding: 0;
  color: var(--wp--preset--color--text-body);
}

/* Prose Images */
.klay-prose img {
  border-radius: 16px;
  margin: 2em 0;
}

.klay-prose figure {
  margin: 2em 0;
}

.klay-prose figcaption {
  text-align: center;
  font-size: 0.875rem;
  margin-top: 1em;
  opacity: 0.6;
}

/* Prose Horizontal Rule */
.klay-prose hr {
  border: none;
  border-top: 1px solid var(--wp--preset--color--border-main);
  margin: 3em 0;
}

/* ========================================
   Header Nav Icons
   ======================================== */
.klay-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--wp--preset--color--text-body);
  transition: all 0.3s ease;
}

.klay-nav-icon:hover {
  color: var(--wp--preset--color--brand-primary);
  background-color: var(--wp--preset--color--surface-bg);
}

.klay-cart-icon {
  position: relative;
}

.klay-cart-count {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background-color: var(--wp--preset--color--brand-primary);
  border-radius: 50%;
}

/* ========================================
   Header Classic Layout
   ======================================== */
.klay-header-classic {
  position: sticky !important;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--wp--preset--color--border-main);
  transition: all 0.5s ease;
}

.klay-header-classic.scrolled {
  background-color: rgba(15, 16, 17, 0.9) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ========================================
   WooCommerce Checkout Styles
   ======================================== */
.klay-checkout-block,
.wc-block-checkout {
  --wc-block-components-text-color: var(--wp--preset--color--text-heading);
  --wc-block-components-border-color: var(--wp--preset--color--border-main);
}

/* Checkout section headings */
.wc-block-checkout__form h2,
.wc-block-components-checkout-step__title {
  color: var(--wp--preset--color--text-heading) !important;
  font-family: var(--wp--preset--font-family--heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wp--preset--color--border-main);
  margin-bottom: 24px;
}

/* Form inputs */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select-input select {
  background-color: var(--wp--preset--color--card-bg) !important;
  border: 1px solid var(--wp--preset--color--border-main) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  color: var(--wp--preset--color--text-heading) !important;
  transition: border-color 0.3s ease;
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-block-components-select-input select:focus {
  border-color: var(--wp--preset--color--brand-primary) !important;
  outline: none !important;
}

/* Form labels */
.wc-block-components-text-input label {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--wp--preset--color--text-body) !important;
}

/* Order summary sidebar */
.wc-block-checkout__sidebar,
.wc-block-components-sidebar {
  background-color: var(--wp--preset--color--surface-bg) !important;
  border: 1px solid var(--wp--preset--color--border-main) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  position: sticky;
  top: 128px;
}

/* Order summary heading */
.wc-block-components-order-summary__heading,
.wc-block-checkout__sidebar h2 {
  font-family: var(--wp--preset--font-family--heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

/* Order summary items */
.wc-block-components-order-summary-item__image img {
  border-radius: 8px !important;
  border: 1px solid var(--wp--preset--color--border-light) !important;
}

.wc-block-components-order-summary-item__name {
  color: var(--wp--preset--color--text-heading) !important;
  font-weight: 700 !important;
}

/* Total amount */
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
  color: var(--wp--preset--color--brand-primary) !important;
  font-size: 24px !important;
  font-family: var(--wp--preset--font-family--heading) !important;
}

/* Place Order button */
.wc-block-components-checkout-place-order-button {
  background-color: var(--wp--preset--color--brand-primary) !important;
  color: var(--wp--preset--color--text-on-brand) !important;
  border-radius: 9999px !important;
  padding: 18px 32px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 14px !important;
  border: none !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
}

.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--wp--preset--color--text-heading) !important;
  color: var(--wp--preset--color--page-bg) !important;
  transform: translateY(-2px);
}

/* Payment method section */
.wc-block-checkout__payment-method .wc-block-components-radio-control {
  background-color: var(--wp--preset--color--card-bg) !important;
  border: 1px solid var(--wp--preset--color--border-main) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* Secure badge */
.wc-block-components-payment-method-icons {
  margin-top: 16px;
  opacity: 0.6;
}

/* ========================================
   WooCommerce Mini-Cart in Header
   ======================================== */

/* Style cart icon in header context (klay-header-icons class) */
.klay-header-icons .wp-block-woocommerce-mini-cart,
.klay-header-icons .klay-header-cart {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Style the header cart link/button to match other nav icons */
.klay-header-icons .klay-header-cart,
.klay-header-icons .wc-block-mini-cart__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0 !important;
  background: transparent !important;
  position: relative !important;
  color: var(--wp--preset--color--text-body) !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.klay-header-icons .klay-header-cart:hover,
.klay-header-icons .wc-block-mini-cart__button:hover {
  color: var(--wp--preset--color--brand-primary) !important;
  background-color: var(--wp--preset--color--surface-bg) !important;
}

/* Custom cart icon using CSS - only in header */
.klay-header-icons .klay-header-cart svg,
.klay-header-icons .wc-block-mini-cart__button .wc-block-mini-cart__icon {
  color: currentColor;
  transition: color 0.3s ease;
}

.klay-header-icons .klay-header-cart:hover svg,
.klay-header-icons .wc-block-mini-cart__button:hover .wc-block-mini-cart__icon {
  color: var(--wp--preset--color--brand-primary);
}

/* Hide the price in header (if shown) */
.klay-header-icons .wc-block-mini-cart__amount {
  display: none;
}

/* Style the item count badge */
.klay-header-icons .klay-cart-badge,
.klay-header-icons .wc-block-mini-cart__badge {
  background-color: var(--wp--preset--color--brand-primary) !important;
  color: var(--wp--preset--color--text-on-brand) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  min-width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  border-radius: 50% !important;
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Mini-cart drawer styling */
.wc-block-mini-cart__drawer {
  background-color: var(--wp--preset--color--card-bg) !important;
  color: var(--wp--preset--color--text-body) !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
  color: var(--wp--preset--color--text-heading) !important;
  font-family: var(--wp--preset--font-family--heading) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Drawer item styling */
.wc-block-mini-cart__products .wc-block-cart-items__row {
  border-color: var(--wp--preset--color--border-main) !important;
}

.wc-block-mini-cart__products .wc-block-components-product-name {
  color: var(--wp--preset--color--text-heading) !important;
  font-weight: 600;
}

/* Drawer buttons */
.wc-block-mini-cart__footer-actions .wc-block-components-button {
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
}

.wc-block-mini-cart__footer-actions .wc-block-components-button--outlined {
  border-color: var(--wp--preset--color--border-main) !important;
  color: var(--wp--preset--color--text-heading) !important;
}

.wc-block-mini-cart__footer-actions .wc-block-components-button--contained {
  background-color: var(--wp--preset--color--brand-primary) !important;
  color: var(--wp--preset--color--text-on-brand) !important;
}

/* ========================================
   Header Search Block Styling
   ======================================== */
.klay-header-icons .klay-header-search,
.klay-header-icons .wp-block-search,
.klay-header-icons .wp-block-search__button-only {
  --wp--preset--spacing--20: 0;
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.klay-header-icons .wp-block-search__inside-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.klay-header-icons .wp-block-search__button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--wp--preset--color--text-body, #9ca3af) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.klay-header-icons .wp-block-search__button:hover,
.klay-header-icons .wp-block-search__button:focus-visible {
  background-color: var(--wp--preset--color--surface-bg, #1c1e20) !important;
  color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
  outline: 2px solid var(--wp--preset--color--brand-primary, #d9fb06) !important;
  outline-offset: 2px !important;
}

.klay-header-icons .wp-block-search__button svg {
  display: none !important;
}

.klay-header-icons .wp-block-search__button::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.3-4.3'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.3-4.3'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
  transition: background-color 0.2s ease;
}

/* ========================================
   Accessible Header Search Button
   ======================================== */
.klay-header-icons .klay-header-search-btn,
.klay-header-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--wp--preset--color--text-body, #9ca3af);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.klay-header-icons .klay-header-search-btn:hover,
.klay-header-icons .klay-header-search-btn:focus-visible,
.klay-header-search-btn:hover,
.klay-header-search-btn:focus-visible {
  background-color: var(--wp--preset--color--surface-bg, #1c1e20) !important;
  color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
  outline: 2px solid var(--wp--preset--color--brand-primary, #d9fb06) !important;
  outline-offset: 2px;
}

/* ========================================
   Navigation Submenu Keyboard Accessibility
   ======================================== */
.wp-block-navigation .wp-block-navigation-item.has-child:not(.is-closed-by-escape):focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-item.has-child.is-focused:not(.is-closed-by-escape) > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-item.has-child.is-menu-open:not(.is-closed-by-escape) > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:not(.is-closed-by-escape) .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
  width: auto !important;
  min-width: 200px !important;
  overflow: visible !important;
  display: flex !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.wp-block-navigation .wp-block-navigation-item.has-child.is-closed-by-escape > .wp-block-navigation__submenu-container {
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  border-radius: 12px;
  border: 1px solid var(--wp--preset--color--border-main, rgba(255, 255, 255, 0.1));
}

/* High contrast focus ring for interactive elements (WCAG 2.4.7 & 1.4.11) */
.wp-block-navigation a:focus-visible,
.wp-block-navigation button:not(.wp-block-navigation-submenu__toggle):focus-visible,
.klay-header-cart:focus-visible,
.wp-block-woocommerce-customer-account a:focus-visible,
.search-overlay-close:focus-visible,
.search-overlay-hint:focus-visible,
.search-overlay-input:focus-visible,
.search-overlay-submit-btn:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-primary, #d9fb06) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

.wp-block-navigation .wp-block-navigation-submenu__toggle:focus,
.wp-block-navigation .wp-block-navigation-submenu__toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ========================================
   Header Customer Account Block Styling
   ======================================== */
.klay-header-icons .wp-block-woocommerce-customer-account {
  display: flex;
  align-items: center;
  justify-content: center;
}

.klay-header-icons .wp-block-woocommerce-customer-account a,
.klay-header-icons .wc-block-customer-account__account-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--wp--preset--color--text-body) !important;
  text-decoration: none;
  transition: all 0.3s ease;
}

.klay-header-icons .wp-block-woocommerce-customer-account a:hover,
.klay-header-icons .wc-block-customer-account__account-link:hover {
  color: var(--wp--preset--color--brand-primary) !important;
  background-color: var(--wp--preset--color--surface-bg) !important;
}


/* ========================================
   Header Vertical Divider (Separator)
   ======================================== */
.klay-header-divider {
  width: 1px !important;
  min-height: 24px !important;
  max-width: 1px !important;
  border: none !important;
  background-color: var(--wp--preset--color--border-light, rgba(255,255,255,0.1)) !important;
  opacity: 1 !important;
  margin: 0 !important;
}

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

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

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--brand-primary) !important;
  color: var(--wp--preset--color--text-on-brand) !important;
}

/* Button: Secondary */
.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: var(--wp--preset--color--card-bg) !important;
  color: var(--wp--preset--color--text-heading) !important;
  border: 1px solid var(--wp--preset--color--border-main) !important;
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--surface-bg) !important;
  border-color: var(--wp--preset--color--brand-primary) !important;
}

/* Heading: Display */
.wp-block-heading.is-style-display {
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

/* Heading: Label */
.wp-block-heading.is-style-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  line-height: 1.5 !important;
  color: var(--wp--preset--color--text-body) !important;
}

/* Separator */
.wp-block-separator {
  border: none !important;
  border-top: 1px solid var(--wp--preset--color--border-main) !important;
  background: transparent !important;
  height: 1px !important;
  opacity: 0.5;
}

hr.klay-vertical-bar {
  border: none !important;
  border-left: 1px solid var(--wp--preset--color--border-main) !important;
  width: 1px !important;
  height: 100% !important;
  min-height: 40px;
}

/* Separator: Wide */
.wp-block-separator.is-style-wide {
  border-bottom: 1px solid var(--wp--preset--color--border-main);
  margin-top: 60px !important;
  margin-bottom: 60px !important;
  width: 100%;
}

/* Image: Shine Effect */
.wp-block-image.is-style-shine,
.wp-block-post-featured-image.is-style-shine {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.wp-block-image.is-style-shine img,
.wp-block-post-featured-image.is-style-shine img {
  border-radius: 12px;
  transition: transform 0.5s ease;
}

.wp-block-image.is-style-shine::before,
.wp-block-post-featured-image.is-style-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: skewX(-15deg);
  z-index: 10;
  transition: left 0.6s ease;
}

.wp-block-image.is-style-shine:hover::before,
.wp-block-post-featured-image.is-style-shine:hover::before {
  left: 150%;
}

.wp-block-image.is-style-shine:hover img,
.wp-block-post-featured-image.is-style-shine:hover img {
  transform: scale(1.03);
}

/* ========================================
   WooCommerce Mini-Cart Drawer Styling
   ======================================== */

/* Mini-Cart Drawer Container */
.wc-block-mini-cart__drawer {
  background: var(--wp--preset--color--card-bg) !important;
  max-width: 448px !important;
}

.wc-block-mini-cart__drawer .components-modal__content {
  background: var(--wp--preset--color--card-bg) !important;
  max-width: 448px !important;
  padding: 0 !important;
}

/* Backdrop */
.wc-block-mini-cart__drawer .components-modal__screen-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px) !important;
}

/* Header */
.wc-block-mini-cart__title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;
  padding: 24px !important;
  border-bottom: 1px solid #222 !important;
  background: var(--wp--preset--color--surface-bg) !important;
  margin: 0 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.wc-block-mini-cart__title::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23c1e112" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>') !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}

/* Hide extra price in header */
.wc-block-mini-cart__header .wc-block-components-formatted-money-amount,
.wc-block-mini-cart__header .wc-block-mini-cart__amount,
.wc-block-mini-cart__amount {
  display: none !important;
}

/* Close button */
.wc-block-mini-cart__close-button {
  color: var(--wp--preset--color--text-body) !important;
}

.wc-block-mini-cart__close-button:hover {
  color: var(--wp--preset--color--text-heading) !important;
}

/* Product Items */
.wc-block-mini-cart__drawer .wc-block-cart-items {
  border-collapse: collapse !important;
  width: 100% !important;
  border: none !important;
  border-spacing: 0 !important;
}

.wc-block-mini-cart__drawer .wc-block-cart-items__row {
  border-bottom: 1px solid var(--wp--preset--color--border-light) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove card-like borders from table cells */
.wc-block-mini-cart__drawer .wc-block-cart-items__row td,
.wc-block-mini-cart__drawer .wc-block-cart-items__row th,
.wc-block-mini-cart__drawer td,
.wc-block-mini-cart__drawer th {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 16px 4px !important;
  vertical-align: top !important;
}

/* Hide unit price inside product column */
.wc-block-mini-cart__drawer .wc-block-cart-item__product .wc-block-cart-item__prices,
.wc-block-mini-cart__drawer .wc-block-cart-item__product .wc-block-components-product-price {
  display: none !important;
}

/* Hide regular/strikethrough price */
.wc-block-mini-cart__drawer .wc-block-components-product-price del,
.wc-block-mini-cart__drawer .wc-block-components-product-price__regular,
.wc-block-mini-cart__drawer del .wc-block-components-formatted-money-amount {
  display: none !important;
}

.wc-block-mini-cart__drawer .wc-block-components-product-price ins {
  text-decoration: none !important;
}

/* Hide product description/metadata */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata,
.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description,
.wc-block-mini-cart__drawer .wc-block-cart-item__product-metadata,
.wc-block-mini-cart__drawer .wc-block-components-product-details__name,
.wc-block-mini-cart__drawer .wc-block-components-product-badge {
  display: none !important;
}

/* Product image */
.wc-block-mini-cart__drawer .wc-block-cart-item__image {
  width: 80px !important;
  min-width: 80px !important;
  padding-right: 12px !important;
  padding-left: 0 !important;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__image img {
  width: 80px !important;
  height: 100px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  background: var(--wp--preset--color--surface-bg) !important;
}

/* Product details column */
.wc-block-mini-cart__drawer .wc-block-cart-item__product {
  padding: 16px 8px !important;
  position: relative !important;
}

/* Hide span product name (keep anchor) */
.wc-block-mini-cart__drawer span.wc-block-components-product-name {
  display: none !important;
}

/* Product name link */
.wc-block-mini-cart__drawer a.wc-block-components-product-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--text-heading) !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.wc-block-mini-cart__drawer .wc-block-components-product-name:hover {
  color: var(--wp--preset--color--brand-primary) !important;
}

/* Category / variant text */
.wc-block-mini-cart__drawer .wc-block-components-product-details {
  font-size: 11px !important;
  color: var(--wp--preset--color--text-body) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 8px !important;
}

.wc-block-mini-cart__drawer .wc-block-components-product-details li {
  list-style: none !important;
}

/* Quantity selector */
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector {
  background: var(--wp--preset--color--surface-bg) !important;
  border: 1px solid var(--wp--preset--color--border-main) !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  gap: 0 !important;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button {
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  border: none !important;
  color: var(--wp--preset--color--text-body) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:hover {
  color: var(--wp--preset--color--text-heading) !important;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__input {
  width: 32px !important;
  height: 28px !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  color: var(--wp--preset--color--text-heading) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 0 !important;
}

/* Price */
.wc-block-mini-cart__drawer .wc-block-cart-item__total {
  text-align: right !important;
  padding: 16px 0 !important;
  vertical-align: bottom !important;
}

.wc-block-mini-cart__drawer .wc-block-components-product-price,
.wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-formatted-money-amount {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--wp--preset--color--text-heading) !important;
}

/* Remove item link */
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link {
  position: absolute !important;
  top: 16px !important;
  right: 0 !important;
  color: var(--wp--preset--color--text-body) !important;
  font-size: 0 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  opacity: 1 !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link::before {
  content: "\1F5D1" !important;
  font-size: 16px !important;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link:hover {
  color: #ef4444 !important;
}

/* Footer */
.wc-block-mini-cart__footer {
  padding: 24px !important;
  background: var(--wp--preset--color--surface-bg) !important;
  border-top: 1px solid var(--wp--preset--color--border-light) !important;
}

.wc-block-mini-cart__footer .wc-block-components-totals-item {
  margin-bottom: 8px !important;
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__label {
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--wp--preset--color--text-body) !important;
  font-weight: 600 !important;
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__value {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: var(--wp--preset--color--text-heading) !important;
}

/* Shipping text */
.wc-block-mini-cart__footer p {
  font-size: 12px !important;
  color: var(--wp--preset--color--text-body) !important;
  margin: 8px 0 16px 0 !important;
}

/* Buttons container - stacked vertically */
.wc-block-mini-cart__footer-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Checkout button (brand primary) */
.wc-block-mini-cart__footer-checkout {
  order: 1 !important;
  width: 100% !important;
  padding: 16px 32px !important;
  background: var(--wp--preset--color--brand-primary) !important;
  color: var(--wp--preset--color--text-on-brand) !important;
  border: none !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.wc-block-mini-cart__footer-checkout:hover {
  filter: brightness(0.9) !important;
  transform: translateY(-1px) !important;
}

/* View Cart button (outline) */
.wc-block-components-button.wc-block-mini-cart__footer-cart {
  order: 2 !important;
  width: 100% !important;
  padding: 16px 24px !important;
  background: transparent !important;
  border: 2px solid var(--wp--preset--color--border-main) !important;
  border-radius: 9999px !important;
  color: var(--wp--preset--color--text-heading) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.wc-block-components-button.wc-block-mini-cart__footer-cart:hover {
  background: var(--wp--preset--color--surface-bg) !important;
  border-color: var(--wp--preset--color--border-strong) !important;
}




WooCommerce My Account Page - Complete Restyle========================================*/

/* Page-level heading - "MY ACCOUNT" */
.woocommerce-account .entry-title,
.woocommerce-account .wp-block-post-title,
.woocommerce-account .page-title {
  font-size: clamp(48px, 8vw, 96px) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.025em !important;
  color: var(--wp--preset--color--text-heading) !important;
  margin-bottom: 2rem !important;
  line-height: 1 !important;
}

/* Two-column flex layout - overrides WooCommerce float layout */
.logged-in.woocommerce-account .woocommerce {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
  align-items: flex-start !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure Login/Register pages stay centralized */
body:not(.logged-in).woocommerce-account .woocommerce {
  display: block !important;
  text-align: center !important;
}

body:not(.logged-in).woocommerce-account .woocommerce h2 {
  font-size: 3rem !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 2rem !important;
}

/* Fix remember me checkbox alignment */
.woocommerce-account .woocommerce-form__label-for-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Override WordPress core block max-width constraint */
.woocommerce-account .wp-block-group>.woocommerce,
.woocommerce-account .entry-content>.woocommerce,
.woocommerce-account [class*="wp-container-"]>.woocommerce,
.woocommerce-account .wp-block-post-content>.woocommerce,
.woocommerce-account .woocommerce,
.woocommerce-account .entry-content>*:not(.alignwide):not(.alignfull) {
  max-width: 100% !important;
  width: 100% !important;
}

/* Notices wrapper takes full width */
.woocommerce-account .woocommerce>.woocommerce-notices-wrapper {
  width: 100% !important;
  flex-basis: 100% !important;
}

/* Sidebar takes fixed width */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 280px !important;
  min-width: 280px !important;
  flex-shrink: 0 !important;
  float: none !important;
}

/* Content fills remaining space */
.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1 !important;
  min-width: 0 !important;
  float: none !important;
  width: auto !important;
}

/* ===== SIDEBAR NAVIGATION ===== */
.klay-wc-sidebar-wrapper {
  background: var(--wp--preset--color--card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: sticky !important;
  top: 120px !important;
}

.klay-wc-profile-block {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 24px 24px 32px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  margin-bottom: 0 !important;
}

.klay-wc-profile-avatar {
  width: 48px !important;
  height: 48px !important;
  background: var(--wp--preset--color--brand-primary) !important;
  color: #000000 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  flex-shrink: 0 !important;
}

.klay-wc-profile-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  overflow: hidden !important;
}

.klay-wc-profile-name {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.klay-wc-profile-email {
  color: #888888 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.woocommerce-MyAccount-navigation {
  background: transparent !important;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px !important;
}

.woocommerce-MyAccount-navigation ul li {
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-MyAccount-navigation ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--wp--preset--color--text-heading) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--bg-page, #0f1011) !important;
}

/* Active nav item - lime accent */
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--wp--preset--color--surface-bg) !important;
  color: var(--wp--preset--color--brand-primary) !important;
  border-left: none !important;
}

/* Navigation icons via ::before pseudo-element */
.woocommerce-MyAccount-navigation ul li a::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: 0.7 !important;
}

/* Dashboard icon */
.woocommerce-MyAccount-navigation-link--dashboard a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E") !important;
}

/* Orders icon */
.woocommerce-MyAccount-navigation-link--orders a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E") !important;
}

/* Downloads icon */
.woocommerce-MyAccount-navigation-link--downloads a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E") !important;
}

/* Addresses icon */
.woocommerce-MyAccount-navigation-link--edit-address a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important;
}

/* Account Details icon */
.woocommerce-MyAccount-navigation-link--edit-account a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

/* Logout icon */
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E") !important;
}

/* Active nav icons - lime color */
.woocommerce-MyAccount-navigation ul li.is-active a::before {
  filter: brightness(0) saturate(100%) invert(88%) sepia(75%) saturate(500%) hue-rotate(20deg) brightness(105%) contrast(104%) !important;
  opacity: 1 !important;
}

/* ===== MAIN CONTENT AREA ===== */
.woocommerce-MyAccount-content {
  background: var(--wp--preset--color--card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  min-height: 400px !important;
  color: var(--wp--preset--color--text-body) !important;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  color: var(--wp--preset--color--text-heading) !important;
  font-weight: 700 !important;
}

.woocommerce-MyAccount-content a {
  color: var(--wp--preset--color--brand-primary) !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

.woocommerce-MyAccount-content a:hover {
  opacity: 0.8 !important;
}

/* ===== FORM STYLING ===== */
.woocommerce-MyAccount-content .woocommerce-form-row input,
.woocommerce-MyAccount-content .form-row input,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
  background: var(--bg-page, #0f1011) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: var(--wp--preset--color--text-heading) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  transition: border-color 0.2s ease !important;
  width: 100% !important;
}

.woocommerce-MyAccount-content .woocommerce-form-row input:focus,
.woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
  border-color: var(--wp--preset--color--brand-primary) !important;
  outline: none !important;
}

.woocommerce-MyAccount-content label {
  color: var(--wp--preset--color--text-heading) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ===== BUTTON STYLING ===== */
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .button {
  background: var(--wp--preset--color--brand-primary) !important;
  color: var(--wp--preset--color--text-on-brand) !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 14px 32px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content .button:hover {
  filter: brightness(0.9) !important;
  transform: translateY(-1px) !important;
}

/* ===== TABLE STYLING (Orders, Downloads) ===== */
.woocommerce-MyAccount-content table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.woocommerce-MyAccount-content table thead th {
  color: var(--wp--preset--color--text-heading) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  text-align: left !important;
}

.woocommerce-MyAccount-content table tbody td {
  padding: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  font-size: 14px !important;
  color: var(--wp--preset--color--text-body) !important;
}

.woocommerce-MyAccount-content table tbody tr:hover {
  background: var(--wp--preset--color--surface-bg) !important;
}

/* Order status badges */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* ===== ADDRESS CARDS ===== */
.woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
}

/* ===== EMPTY CART PAGE ===== */
.wp-block-woocommerce-empty-cart-block,
.cart-empty {
  text-align: center !important;
  background: var(--wp--preset--color--card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 24px !important;
  padding: 5rem 2rem !important;
  max-width: 800px !important;
  margin: 3rem auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.wp-block-woocommerce-empty-cart-block h2,
.wp-block-woocommerce-empty-cart-block h3,
.cart-empty h2 {
  font-size: 2.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1rem !important;
}

.wp-block-woocommerce-empty-cart-block p,
.cart-empty p {
  color: #888888 !important;
  font-size: 1.125rem !important;
  margin-bottom: 2.5rem !important;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button {
  margin: 0 auto !important;
}

/* Remove WooCommerce clearfix pseudo-elements which break CSS Grid */
.woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-MyAccount-content .woocommerce-Addresses::after {
  display: none !important;
}

.woocommerce-MyAccount-content .woocommerce-Address {
  background: var(--bg-page, #0f1011) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  width: 100% !important;
  float: none !important;
}

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

.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0 !important;
}

.woocommerce-MyAccount-content .woocommerce-Address-title a {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--brand-primary) !important;
}

/* ===== LOGIN FORM STYLING ===== */
.woocommerce-account .woocommerce-form-login {
  background: var(--wp--preset--color--card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 3rem 2rem !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  text-align: left !important;
}

.woocommerce-account .woocommerce-form-login .form-row input {
  background: var(--bg-page, #0f1011) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: var(--wp--preset--color--text-heading) !important;
  padding: 12px 16px !important;
  width: 100% !important;
}

.woocommerce-account .woocommerce-form-login label {
  color: var(--wp--preset--color--text-heading) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 1.5rem !important;
  font-size: 13px !important;
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] {
  width: auto !important;
  margin: 0 !important;
}

.woocommerce-account .woocommerce-form-login .woocommerce-button {
  background: var(--wp--preset--color--brand-primary) !important;
  color: var(--wp--preset--color--text-on-brand) !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 14px 32px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
}

.woocommerce-account .woocommerce-form-login .woocommerce-button:hover {
  filter: brightness(0.9) !important;
}

/* ===== NOTICES ===== */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info {
  background: var(--wp--preset--color--surface-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-left: 4px solid var(--wp--preset--color--brand-primary) !important;
  border-radius: 8px !important;
  padding: 1rem 1.5rem !important;
  color: var(--wp--preset--color--text-heading) !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce-MyAccount-content .woocommerce-error {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-left: 4px solid #ef4444 !important;
  border-radius: 8px !important;
  padding: 1rem 1.5rem !important;
  color: #fca5a5 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr !important;
  }

  .woocommerce-MyAccount-navigation {
    position: static !important;
  }

  .woocommerce-MyAccount-content .woocommerce-Addresses {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================
   Accessibility
   ======================================== */

/* Skip-to-content link */
.klay-skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  background: var(--wp--preset--color--brand-primary);
  color: var(--wp--preset--color--text-on-brand);
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: top 0.15s ease;
}

.klay-skip-link:focus {
  top: 0;
  outline: none;
}

/* Focus visible outlines — keyboard-only focus ring */
*:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-primary) !important;
  outline-offset: 2px !important;
}

/* Remove outline for mouse/touch users */
*:focus:not(:focus-visible) {
  outline: none !important;
}

/* Navigation link focus */
.wp-block-navigation-item a:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-primary) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Search block focus */
.wp-block-search__input:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-primary) !important;
  outline-offset: -2px !important;
}

/* ========================================
   Scroll-to-Top Button
   ======================================== */
.klay-scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-primary);
  color: var(--wp--preset--color--text-on-brand);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.klay-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.klay-scroll-top:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.klay-scroll-top svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

/* ========================================
   WordPress Pagination Styling
   ======================================== */
.wp-block-query-pagination {
  gap: 8px;
  margin-top: 4rem;
  justify-content: center;
}

.wp-block-query-pagination-numbers .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--wp--preset--color--text-body);
  background: transparent;
  border: 1px solid var(--wp--preset--color--border-main);
  transition: all 0.3s ease;
}

.wp-block-query-pagination-numbers .page-numbers:hover {
  border-color: var(--wp--preset--color--brand-primary);
  color: var(--wp--preset--color--brand-primary);
}

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

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  height: 44px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--wp--preset--color--text-heading);
  border: 1px solid var(--wp--preset--color--border-main);
  transition: all 0.3s ease;
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
  border-color: var(--wp--preset--color--brand-primary);
  color: var(--wp--preset--color--brand-primary);
  transform: translateY(-2px);
}

/* ========================================
   Gradient Border Hover — Feature Cards
   ======================================== */
.klay-feature-card {
  position: relative;
}

.klay-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
      var(--wp--preset--color--brand-primary) 0%,
      transparent 50%,
      transparent 100%);
  -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;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.klay-feature-card:hover::after {
  opacity: 1;
}

/* ========================================
   Enhanced Responsive — Tablet (max-width: 1024px)
   ======================================== */
@media (max-width: 1024px) {
  .klay-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .klay-stats-section .wp-block-column {
    border-width: 0 0 1px 0 !important;
  }
}

/* ========================================
   Enhanced Responsive — Mobile (max-width: 640px)
   ======================================== */
@media (max-width: 640px) {
  .klay-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Header pill — compact on mobile */
  header .klay-glass {
    padding-inline-start: 16px !important;
    padding-inline-end: 16px !important;
  }

  header.is-scrolled .klay-glass,
  .klay-glass.is-scrolled {
    padding-inline-start: 12px !important;
    padding-inline-end: 12px !important;
  }

  /* Showcase items — full-width touch cards */
  .klay-showcase-item {
    width: 85vw;
    max-width: 100%;
  }

  /* Footer glow — smaller on mobile */
  .klay-footer-glow::before {
    width: 300px;
    height: 300px;
    filter: blur(80px);
  }

  /* Testimonial cards — no lift on mobile (touch-unfriendly) */
  .klay-testimonial-card:hover,
  .wp-block-group.klay-testimonial-card:hover {
    transform: none !important;
  }

  /* Feature cards — no lift on mobile */
  .klay-feature-card:hover {
    transform: none;
  }

  /* Scroll-to-top — smaller on mobile */
  .klay-scroll-top {
    width: 40px;
    height: 40px;
    bottom: 1rem;
    right: 1rem;
  }

  /* Blog cards stack properly */
  .klay-blog-card {
    margin-bottom: 2rem;
  }


}

/* ========================================
   Reference Design Parity — Visual Effects
   ======================================== */

/* 1. Noise Texture Overlay (subtle grain effect) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  mix-klay-mode: overlay;
  opacity: 0.5;
}

/* 2. Selection Color */
::selection {
  background-color: var(--wp--preset--color--brand-primary);
  color: var(--wp--preset--color--text-on-brand);
}

/* 3. Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--border-main);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--wp--preset--color--brand-primary);
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* 4. Smooth Fade Button Hover */
.wp-block-button__link,
.wp-element-button,
.wc-block-components-product-button__button {
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  box-shadow: inset 0 0 0 0px rgba(217, 251, 6, 0);
}

/* Primary Button (Lime to Dark with Outline) */
.wp-block-button__link:not(.has-background):hover,
.wp-block-button__link.has-brand-primary-background-color:hover,
.wp-element-button:not(.has-background):hover,
.wc-block-components-product-button__button:hover {
  background-color: var(--wp--preset--color--page-bg, #0a0a0f) !important;
  color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--brand-primary, #d9fb06) !important;
}

/* Dark Buttons (Dark to Lime) */
.wp-block-button__link.has-background:not(.has-brand-primary-background-color):hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
  color: var(--wp--preset--color--page-bg, #0a0a0f) !important;
}

/* 6. Stat Corner Accent */
.klay-stats-section .wp-block-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--wp--preset--color--brand-primary);
  border-left: 1px solid var(--wp--preset--color--brand-primary);
  opacity: 0;
  transition: opacity 0.3s;
}

.klay-stats-section .wp-block-column:hover::after {
  opacity: 1;
}


.klay-showcase-item:hover .klay-showcase-image::after {
  opacity: 1;
}

.klay-showcase-image img {
  filter: grayscale(1);
  transition: all 0.7s;
}

.klay-showcase-item:hover .klay-showcase-image img {
  filter: grayscale(0);
  transform: scale(1.05);
}

/* 8. Footer Background Glow */
.klay-footer-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: var(--wp--preset--color--brand-primary);
  border-radius: 9999px;
  filter: blur(150px);
  opacity: 0.05;
  pointer-events: none;
}

/* Footer Mega Watermark Text */
.klay-footer-mega {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.05);
  font-size: clamp(5rem, 15vw, 18rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  user-select: none;
  pointer-events: none;
}

/* 10. Glass Card Refinement */
.klay-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--wp--preset--color--border-light);
}

/* Feature Card — "Learn More" always visible */
.klay-feature-card .klay-learn-more {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s;
  margin-top: auto;
  width: 100%;
}

.klay-feature-card:hover .klay-learn-more {
  opacity: 1;
  transform: translateY(0);
}

/* Feature Icon — default black text, brand fill on hover */
.klay-feature-icon p {
  color: #000;
}

.klay-feature-card:hover .klay-feature-icon {
  background: var(--wp--preset--color--brand-primary) !important;
  border-color: var(--wp--preset--color--brand-primary) !important;
}

.klay-feature-card:hover .klay-feature-icon p {
  color: #000 !important;
}

/* Arrow circle — default and hover */
.klay-arrow-circle {
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  line-height: 1;
  background: var(--wp--preset--color--surface-bg) !important;
  border-radius: 50%;
}

.klay-arrow-circle p {
  color: #000;
}

.klay-feature-card:hover .klay-arrow-circle {
  background: var(--wp--preset--color--brand-primary) !important;
  border-color: var(--wp--preset--color--brand-primary) !important;
}

.klay-feature-card:hover .klay-arrow-circle p {
  color: #000;
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {

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

  .klay-marquee {
    animation: none !important;
  }

  .klay-scroll-top {
    transition: none !important;
  }
}

/* ========================================
   Search Overlay Modal
   ======================================== */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(15, 16, 17, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.3s;
}

.search-overlay,
.search-overlay * {
  transition-property: opacity, transform, background-color, color, border-color !important;
}

.search-overlay.open,
.search-overlay.open * {
  visibility: visible !important;
  pointer-events: auto !important;
}

.search-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.search-overlay-close {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  border: 1px solid var(--wp--preset--color--border-main);
  background: transparent;
  color: var(--wp--preset--color--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.search-overlay-close:hover {
  border-color: var(--wp--preset--color--brand-primary);
  color: var(--wp--preset--color--brand-primary);
  transform: rotate(90deg);
}

.search-overlay-content {
  width: 100%;
  max-width: 56rem;
  padding: 0 2rem;
  transform: translateY(40px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.search-overlay.open .search-overlay-content {
  transform: translateY(0);
  opacity: 1;
}

.search-overlay-label {
  display: block;
  color: var(--wp--preset--color--brand-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.875rem;
  margin-bottom: 32px;
  text-align: center;
}

.search-overlay-input-wrap {
  position: relative;
  border-bottom: 2px solid var(--wp--preset--color--border-main);
  transition: border-color 0.3s;
}

.search-overlay-input-wrap:focus-within {
  border-color: var(--wp--preset--color--brand-primary);
}

.search-overlay-input {
  width: 100%;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: var(--wp--preset--font-family--brand);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--wp--preset--color--text-heading) !important;
  padding: 24px 64px 24px 0 !important;
  caret-color: var(--wp--preset--color--brand-primary);
}

.search-overlay-input:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Hide the native webkit search cross (tiny blue X) */
.search-overlay-input::-webkit-search-decoration,
.search-overlay-input::-webkit-search-cancel-button,
.search-overlay-input::-webkit-search-results-button,
.search-overlay-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

.search-overlay-input::placeholder {
  color: rgba(255, 255, 255, 0.15);
}

.search-overlay-input-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wp--preset--color--text-body);
  opacity: 0.4;
  transition: all 0.3s;
}

.search-overlay-input-wrap:focus-within .search-overlay-input-icon {
  color: var(--wp--preset--color--brand-primary);
  opacity: 1;
}

.search-overlay-hints {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
  justify-content: center;
}

.search-overlay-hint {
  padding: 8px 20px;
  border-radius: 9999px;
  border: 1px solid var(--wp--preset--color--border-main);
  color: var(--wp--preset--color--text-body);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s;
  cursor: pointer;
  background: transparent;
}

.search-overlay-hint:hover {
  border-color: var(--wp--preset--color--brand-primary);
  color: var(--wp--preset--color--brand-primary);
  background: rgba(217, 251, 6, 0.05);
}

.search-overlay-footer {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--wp--preset--color--text-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.4;
}

.search-overlay-footer kbd {
  background: var(--wp--preset--color--card-bg);
  border: 1px solid var(--wp--preset--color--border-main);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.75rem;
}

/* Separator Thicknes Fix */
/* Force animate pulse dot to remain circular */
.wp-block-group.animate-pulse {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  min-height: 6px !important;
  flex: 0 0 6px !important;
  border-radius: 50% !important;
  padding: 0 !important;
}

.wp-block-separator {
  border: none !important;
  border-top: 1px solid var(--wp--preset--color--border-main) !important;
  background: transparent !important;
  height: 1px !important;
  opacity: 0.5;
}

hr.wp-block-separator.klay-accent-separator {
  border: none !important;
  background: var(--wp--preset--color--brand-primary) !important;
  height: 4px !important;
  width: 48px !important;
  max-width: 48px !important;
  opacity: 1 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

hr.klay-vertical-bar {
  border: none !important;
  border-left: 1px solid var(--wp--preset--color--border-main) !important;
  width: 1px !important;
  height: 100% !important;
  min-height: 40px;
}

/* Force badge to show even when cart is empty (overriding WooCommerce Interactivity API) */
.klay-header-icons .wc-block-mini-cart__badge[hidden] {
  display: flex !important;
}

/* Hero Section - Full Viewport Height & Seamless Header Overlay */
.klay-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(100px, 11vh, 130px) !important;
  padding-bottom: 0 !important;
  box-sizing: border-box;
}

/* Ensure hero text content expands to full viewport height */
.klay-hero > .wp-block-group,
.klay-hero .klay-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Vertically center the hero content between header and bottom bar */
.klay-hero .klay-hero-container > .wp-block-columns {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* Services Menu seated in lower half of hero (matching original design) */
.klay-hero-services-col {
  padding-top: clamp(140px, 18vh, 250px) !important;
}

/* Bottom Bar seated right at the bottom */
.klay-hero-bottom-bar {
  width: 100%;
  margin-top: 0 !important;
  padding-top: 24px;
  padding-bottom: clamp(20px, 3vh, 36px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

/* Abstract 3D Hero Sculpture (Static - No animation) */
.klay-hero-3d-visual {
  position: absolute;
  top: 50%;
  left: 36%;
  transform: translate(-50%, -50%);
  width: clamp(420px, 56vw, 920px);
  max-width: 95vw;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  filter: drop-shadow(0 0 40px rgba(217, 251, 6, 0.16));
  animation: none !important;
}

.klay-hero-3d-visual img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1024px) {
  .klay-hero {
    padding-top: 105px !important;
    min-height: auto;
  }
  .klay-hero .klay-hero-container > .wp-block-columns {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .klay-hero-3d-visual {
    top: 38%;
    left: 45%;
    width: clamp(320px, 68vw, 620px);
    opacity: 0.8;
  }
}

@media (max-width: 768px) {
  .klay-hero {
    padding-top: 95px !important;
  }
  .klay-hero-3d-visual {
    top: 30%;
    left: 50%;
    width: 92vw;
    opacity: 0.65;
  }
}

/* Right-positioned Parametric Accordion Torus / Chrome Sculpture (Static - No animation) */
.klay-hero-3d-visual.klay-hero-3d-torus {
  position: absolute;
  top: 50%;
  left: 58%;
  transform: translate(-50%, -50%);
  height: clamp(500px, 80vh, 900px);
  width: auto;
  max-width: 50vw;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 45px rgba(138, 92, 246, 0.16));
  animation: none !important;
}

/* In the Site Editor, make the 3D image easily clickable and selectable */
.editor-styles-wrapper .klay-hero .wp-block[data-type="core/image"].klay-hero-3d-torus,
.editor-styles-wrapper .klay-hero figure.klay-hero-3d-torus {
  position: absolute !important;
  top: 50% !important;
  left: 58% !important;
  transform: translate(-50%, -50%) !important;
  height: clamp(500px, 80vh, 900px) !important;
  width: auto !important;
  max-width: 50vw !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  z-index: 4 !important;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 45px rgba(138, 92, 246, 0.16));
  animation: none !important;
}

/* Ensure the heading box in editor doesn't stretch invisibly over the 3D image */
.editor-styles-wrapper .klay-hero .wp-block-heading {
  max-width: fit-content !important;
}

/* Allow clicks through empty container areas in editor to reach the 3D image */
.editor-styles-wrapper .klay-hero .klay-hero-container {
  pointer-events: none !important;
  z-index: 5 !important;
}

.editor-styles-wrapper .klay-hero .klay-hero-container .wp-block-columns,
.editor-styles-wrapper .klay-hero .klay-hero-container .wp-block-column {
  pointer-events: none !important;
}

.editor-styles-wrapper .klay-hero .klay-hero-container .wp-block-heading,
.editor-styles-wrapper .klay-hero .klay-hero-container p,
.editor-styles-wrapper .klay-hero .klay-hero-container .wp-block-buttons,
.editor-styles-wrapper .klay-hero .klay-hero-container .klay-service-list,
.editor-styles-wrapper .klay-hero .klay-hero-container .klay-hero-bottom-bar,
.editor-styles-wrapper .klay-hero .klay-hero-container .wp-block-group:has(p),
.editor-styles-wrapper .klay-hero .klay-hero-container a {
  pointer-events: auto !important;
}

.klay-hero-3d-visual.klay-hero-3d-torus img,
.editor-styles-wrapper .klay-hero .klay-hero-3d-torus img {
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 1024px) {
  .klay-hero-services-col {
    padding-top: 32px !important;
  }
  .klay-hero-3d-visual.klay-hero-3d-torus {
    top: 48%;
    left: 65%;
    height: clamp(420px, 65vh, 680px);
    max-width: 60vw;
    opacity: 0.6;
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .klay-hero-3d-visual.klay-hero-3d-torus {
    top: 55%;
    left: 60%;
    height: clamp(350px, 50vh, 520px);
    max-width: 75vw;
    opacity: 0.4;
    animation: none !important;
  }
}



/* ========================================
   CASE STUDY TEMPLATE
   ======================================== */
.klay-case-study-image {
  overflow: hidden;
}

.klay-case-study-image img {
  transition: transform 2s ease;
}

.klay-case-study-image:hover img {
  transform: scale(1.05);
}

.klay-mockup-offset-down {
  transform: translateY(48px);
}

.klay-next-project {
  display: inline-flex !important;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.klay-next-project:hover {
  color: var(--wp--preset--color--brand-primary) !important;
}

.klay-parallax h2 {
  mix-klay-mode: overlay;
  color: #fff !important;
}

/* ========================================
   RESPONSIVE — Tablet (max-width: 1024px)
   ======================================== */
@media (max-width: 1024px) {

  /* --- Header Pill --- */
  .klay-header-pill {
    padding: 12px 20px !important;
  }

  /* Hide CTA button on tablet */
  .klay-cta-btn {
    display: none !important;
  }

  /* Hide the vertical divider on tablet */
  .klay-header-pill .wp-block-group:has([style*="border-left-width"]) {
    display: none !important;
  }

  /* --- Hero --- */
  .klay-hero {
    min-height: auto;
    padding-top: 100px !important;
    padding-bottom: 80px !important;
  }

  /* Hero columns — stack with full width */
  .klay-hero .wp-block-columns {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  /* Reset mockup offset on smaller screens */
  .klay-mockup-offset-down {
    transform: translateY(0);
  }

  .klay-hero .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Hero CTA row — allow wrapping so text doesn't break */
  .klay-hero>.wp-block-group>.wp-block-group>.wp-block-group {
    flex-wrap: wrap !important;
  }

  /* Hero inner content padding */
  .klay-hero>.wp-block-group {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Hide vertical separator in hero CTA row */
  .klay-hero .klay-vertical-bar {
    display: none !important;
  }

  /* Service list — left align on tablet */
  .klay-service-list {
    margin-top: 40px;
    align-items: flex-start !important;
  }

  .klay-service-item {
    justify-content: flex-start !important;
  }

  /* Hero bottom ticker — wrap and center */
  .klay-hero>.wp-block-group>.wp-block-group:last-child {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  /* --- Section padding reduction --- */
  .alignfull,
  .wp-block-group.alignfull {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* --- Sections vertical padding --- */
  .klay-testimonials,
  .klay-shop,
  .klay-stats {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  /* --- Features: 2 columns on tablet --- */
  .klay-feature-card {
    min-height: 280px;
  }

  /* --- Showcase: 2 columns on tablet --- */
  .klay-showcase .wp-block-columns {
    flex-wrap: wrap !important;
  }

  .klay-showcase .wp-block-column {
    flex-basis: calc(50% - 16px) !important;
    flex-grow: 0 !important;
  }



  /* --- Shop grid: 2 columns on tablet --- */
  .wc-block-product-template.is-flex-container {
    gap: 24px !important;
  }

  .wc-block-product-template .wc-block-product {
    flex-basis: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }

  /* --- Mobile Menu Overlay (Global Setup for FSE) --- */
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background-color: #050505 !important;
    z-index: 100000 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 40px 24px !important;
    -webkit-overflow-scrolling: touch;
    margin-top: 0 !important;
    /* override admin bar sometimes */
  }

  /* Close button */
  .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--text-heading) !important;
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 100001 !important;
    background: transparent !important;
    border: 1px solid var(--wp--preset--color--border-main) !important;
    border-radius: 9999px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
  }

  .wp-block-navigation__responsive-container-close:hover {
    border-color: var(--wp--preset--color--brand-primary) !important;
    color: var(--wp--preset--color--brand-primary) !important;
  }

  /* Navigation list — centered column */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    flex: 1 !important;
    margin: auto 0 !important;
    height: 100% !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open>.wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100% !important;
    padding-top: 60px !important;
    /* Make sure items don't overlap X button */
  }

  /* Menu links — huge centered text */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100% !important;
    text-align: center !important;
    border: none !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a {
    color: var(--wp--preset--color--text-heading) !important;

    font-weight: 700 !important;
    font-size: clamp(1.5rem, 5vw, 1.875rem) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    padding: 16px 0 !important;
    display: inline-block !important;
    /* Changed from block to inline-block for letter spacing animation */
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    font-style: normal !important;
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover>a {
    color: var(--wp--preset--color--brand-primary) !important;
    letter-spacing: 0.1em !important;
  }

  /* ========================================
       Move Header Actions into Mobile Modal
       ======================================== */
  /* Hide the actions group from the physical header on mobile to save space */
  .klay-header-pill>.wp-block-group:last-child {
    display: none !important;
  }

  /* Show it as a fixed footer ONLY when the mobile modal is open */
  body.has-modal-open .klay-header-pill>.wp-block-group:last-child {
    position: fixed !important;
    bottom: 32px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 100001 !important;
    /* Above mobile menu overlay */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Ensure the wrapper respects flex column formatting */
  body.has-modal-open .klay-header-pill>.wp-block-group:last-child>* {
    margin: 0 !important;
  }

  /* Hide the vertical separator line */
  body.has-modal-open .klay-header-pill>.wp-block-group:last-child>.wp-block-group.has-border-light-border-color {
    display: none !important;
  }

  /* Resize the icons nicely for the modal footer */
  body.has-modal-open .klay-header-icons svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Add dropdown chevron to parent links on mobile */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child>a::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 12px;
    vertical-align: middle;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: currentColor;
    transition: transform 0.3s ease;
  }

  /* Rotate chevron when open */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child:focus-within>a::after,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child:hover>a::after {
    transform: rotate(180deg);
    color: var(--wp--preset--color--brand-primary) !important;
  }

  /* Submenus within mobile menu (Accordion) */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
    min-width: unset !important;
    /* Accordion transition logic */
    display: flex !important;
    flex-direction: column !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  }

  /* When FSE toggles it open via standard WP JS */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu:has(> button[aria-expanded="true"])>.wp-block-navigation__submenu-container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.is-menu-open>.wp-block-navigation__submenu-container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu:focus-within>.wp-block-navigation__submenu-container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu:hover>.wp-block-navigation__submenu-container {
    max-height: 800px !important;
    opacity: 1 !important;
    padding: 8px 0 16px 0 !important;
    overflow: visible !important;
  }

  /* Toggle button alignment so it matches design */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 12px !important;
    margin: 0 !important;
    color: var(--wp--preset--color--text-heading) !important;
    background: transparent !important;
    border: none !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu:hover>button svg,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu:has(> button[aria-expanded="true"]) button svg {
    transform: rotate(180deg);
    color: var(--wp--preset--color--brand-primary) !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item a {
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: var(--wp--preset--color--text-body) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 10px 16px !important;
    display: inline-block !important;
    /* Ensure neat hover box */
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--wp--preset--color--text-heading) !important;
    transform: none !important;
  }
}

/* ========================================
   RESPONSIVE — Mobile (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {

  /* --- Header Pill --- */
  .klay-header-pill {
    padding: 10px 16px !important;
    border-radius: 16px !important;
  }

  /* Reduce logo size */
  .klay-header-pill .wp-block-site-title {
    font-size: 16px !important;
  }

  /* --- Mobile Header Items --- */
  .klay-header-icons {
    gap: 8px !important;
  }

  .klay-header-icons .wp-block-search,
  .klay-header-icons .wc-block-mini-cart,
  .klay-header-icons .wp-block-woocommerce-customer-account {
    font-size: 14px !important;
  }

  /* Hamburger button color */
  .wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--text-heading) !important;
  }

  /* Hamburger button color */
  .wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--text-heading) !important;
  }

  /* --- Hero --- */
  .klay-hero {
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }

  /* Hero inner padding */
  .klay-hero>.wp-block-group {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }



  /* Hero CTA row — stack vertically on mobile */
  .klay-hero .wp-block-group[class*="is-nowrap"],
  .klay-hero .wp-block-group[style*="flex-wrap:nowrap"],
  .klay-hero .wp-block-group[style*="flex-wrap: nowrap"] {
    flex-wrap: wrap !important;
  }

  /* Hero CTA button — keep compact, not full width */
  .klay-hero .wp-block-buttons {
    width: auto;
  }

  /* Hero subtitle paragraph — full width */
  .klay-hero .wp-block-columns {
    gap: 32px !important;
  }

  .klay-hero .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Service list — left align, full width */
  .klay-service-list {
    align-items: flex-start !important;
  }

  .klay-service-item {
    justify-content: flex-start !important;
  }

  .klay-service-text {
    font-size: 16px !important;
  }

  /* Hide vertical separator on mobile */
  .klay-vertical-bar {
    display: none !important;
  }

  /* All nowrap groups — allow wrapping on mobile */
  .wp-block-group.is-nowrap {
    flex-wrap: wrap !important;
  }

  /* --- Section padding --- */
  .alignfull,
  .wp-block-group.alignfull {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* --- Stats: 2×2 grid on mobile --- */
  .klay-stats-section .wp-block-columns.is-not-stacked-on-mobile {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
  }

  .klay-stats-section .wp-block-columns.is-not-stacked-on-mobile>.wp-block-column {
    width: auto !important;
    flex-basis: auto !important;
  }

  /* Remove right border on every 2nd column (right edge) */
  .klay-stats-section .wp-block-columns.is-not-stacked-on-mobile>.wp-block-column:nth-child(2n) {
    border-right: none !important;
  }

  /* Reduce stat number font size */
  .klay-stats-section .has-heading-font-family {
    font-size: clamp(2.5rem, 12vw, 4rem) !important;
  }

  /* --- Features: 1 column on mobile --- */
  .wp-block-columns:has(.klay-feature-card) {
    flex-direction: column !important;
  }

  .wp-block-columns:has(.klay-feature-card) .wp-block-column {
    flex-basis: 100% !important;
  }

  .klay-feature-card {
    min-height: auto;
    padding: 24px;
  }

  /* --- Marquee dots --- */
  .klay-marquee-dot {
    width: 12px;
    height: 12px;
  }

  /* --- Showcase: 1 column on mobile --- */
  .klay-showcase .wp-block-columns {
    flex-direction: column !important;
  }

  .klay-showcase .wp-block-column {
    flex-basis: 100% !important;
  }

  /* --- Testimonials: 1 column on mobile --- */
  .klay-testimonials .wp-block-columns {
    flex-direction: column !important;
  }

  /* Reset offset card on mobile — equal spacing between all cards */
  .klay-testimonials .wp-block-columns>.wp-block-column:nth-child(2) {
    transform: none;
  }

  .klay-testimonial-card {
    padding: 24px;
  }

  /* --- Blog: 1 column on mobile --- */
  .wp-block-columns:has(.klay-blog-card) {
    flex-direction: column !important;
  }



  /* Blog header — stack title and "View All" */
  .wp-block-group:has(.klay-blog-card)>.wp-block-group:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }


  .wc-block-product-template .wc-block-product {
    flex-basis: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }

  /* Shop header — stack */
  .klay-shop>.wp-block-group>.wp-block-group:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  /* --- Footer: 2×2 grid on tablet --- */
  .klay-footer>.wp-block-columns {
    flex-wrap: wrap !important;
    gap: 48px 32px !important;
  }

  .klay-footer>.wp-block-columns>.wp-block-column {
    flex-basis: calc(50% - 16px) !important;
    min-width: calc(50% - 16px) !important;
  }



  /* Section headers — stack flex rows */
  .wp-block-group[style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  /* Heading margin bottom reductions */
  .wp-block-group[style*="margin-bottom:80px"] {
    margin-bottom: 40px !important;
  }

  .wp-block-group[style*="margin-bottom:64px"] {
    margin-bottom: 32px !important;
  }
}

/* ========================================
   RESPONSIVE — Small Mobile (max-width: 480px)
   ======================================== */
@media (max-width: 480px) {

  /* --- Header --- */
  .klay-header-pill {
    padding: 8px 12px !important;
  }

  /* --- Hero --- */
  .klay-hero {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }



  /* --- Section padding --- */
  .alignfull,
  .wp-block-group.alignfull {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* --- Stats: still 2×2 but smaller --- */
  .klay-stats .wp-block-column {
    padding: 24px 16px !important;
  }

  .klay-stats .wp-block-column .wp-block-heading {
    font-size: clamp(1.5rem, 10vw, 2.5rem) !important;
  }

  /* --- Feature card --- */
  .klay-feature-card {
    padding: 20px;
  }

  .klay-feature-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }



  /* --- Testimonials --- */
  .klay-testimonial-card {
    padding: 20px;
  }

  /* --- Blog card --- */
  .klay-blog-card h3 {
    font-size: 18px !important;
  }

  /* --- Shop: 1 column on small mobile --- */
  .wc-block-product-template .wc-block-product {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  /* --- Mobile menu links even bigger --- */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    font-size: 20px !important;
    padding: 14px 0 !important;
  }

  /* --- Footer: single column on small mobile --- */
  .klay-footer>.wp-block-columns {
    flex-direction: column !important;
    gap: 40px !important;
  }

  .klay-footer>.wp-block-columns>.wp-block-column {
    flex-basis: 100% !important;
    min-width: 100% !important;
  }

  footer .wp-block-group {
    text-align: left;
  }

  footer .wp-block-navigation {
    justify-content: flex-start !important;
  }

  .klay-newsletter-wrap {
    max-width: 100%;
  }


}

/* ========================================
   Editor-specific fixes
   ======================================== */

/* Header pill in editor — clean layout without scrollbars */
.editor-styles-wrapper .klay-header-pill {
  flex-wrap: nowrap;
  overflow: visible !important;
}

/* Editor mobile preview — stack columns */
.editor-styles-wrapper .wp-block-columns {
  flex-wrap: wrap;
}

/* Header search block — constrain to icon size in editor */
.editor-styles-wrapper .klay-header-icons .wp-block-search {
  max-width: 40px !important;
  overflow: hidden !important;
}

.editor-styles-wrapper .klay-header-icons .wp-block-search__input {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: transparent !important;
  border-radius: 50% !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.3-4.3'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  text-indent: -9999px !important;
}

.editor-styles-wrapper .klay-header-icons .wp-block-search__input::placeholder {
  color: transparent !important;
}

/* Header separator — make it a thin vertical line in editor */
.editor-styles-wrapper .klay-header-pill .klay-header-divider {
  width: 1px !important;
  min-height: 24px !important;
  max-width: 1px !important;
  border: none !important;
  background-color: var(--wp--preset--color--border-light, rgba(255,255,255,0.1)) !important;
  opacity: 1 !important;
}

/* Header divider/separator — thin line, not box (legacy group-based divider) */
.editor-styles-wrapper .klay-header-pill .wp-block-group[style*="border-left-width"] {
  max-width: 1px;
  padding: 0;
}

/* 3. Portfolio/Showcase — fix broken placeholder images in editor */
.editor-styles-wrapper .klay-showcase-item .wp-block-image {
  margin-bottom: 16px;
}

.editor-styles-wrapper .klay-showcase-item .wp-block-image img {
  min-height: 200px;
  background-color: var(--wp--preset--color--surface-bg, #1a1a1a);
  border-radius: 8px;
}

/* 4. Blog category badge — keep absolute position in editor to match frontend */
.editor-styles-wrapper .klay-category-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-block;
  z-index: 10;
  pointer-events: auto;
}

.editor-styles-wrapper .klay-blog-image-wrapper,
.editor-styles-wrapper .klay-blog-image-wrap {
  position: relative;
  margin-bottom: 24px;
}

.editor-styles-wrapper .wp-block-post-featured-image:not(:has(img)) {
  background-color: var(--wp--preset--color--surface-bg, #161819);
  background-image: url('../images/placeholder-landscape.svg');
  background-size: cover;
  background-position: center;
  min-height: 200px;
  aspect-ratio: 16/10;
  display: flex;
}

/* 5. wp:html blocks — hide raw code in editor, show clean placeholder */
/*    These render perfectly on frontend, this is a WP block editor limitation */

/* Testimonial quote icons — collapse and label */
.editor-styles-wrapper .klay-testimonial-card .wp-block-html {
  max-height: 48px !important;
  overflow: hidden !important;
  background: var(--wp--preset--color--surface-bg, #1a1a2e) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 11px !important;
  color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
  opacity: 0.7;
  position: relative;
}

/* Footer newsletter form — collapse and label */
.editor-styles-wrapper .wp-block-column .wp-block-html {
  max-height: 48px !important;
  overflow: hidden !important;
  background: var(--wp--preset--color--surface-bg, #1a1a2e) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 11px !important;
  color: var(--wp--preset--color--text-body, #9ca3af) !important;
  opacity: 0.7;
}

/* Contact section SVG icons — same treatment */
.editor-styles-wrapper .wp-block-group .wp-block-html {
  max-height: 48px !important;
  overflow: hidden !important;
  background: var(--wp--preset--color--surface-bg, #1a1a2e) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 11px !important;
  color: var(--wp--preset--color--text-body, #9ca3af) !important;
  opacity: 0.6;
}

.cart-drawer-header h3 {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-heading);
  text-transform: uppercase;
}

.cart-drawer-close {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  background: transparent;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.cart-drawer-close:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.cart-drawer-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}

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

.cart-drawer-item img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

.cart-drawer-item-info {
  flex: 1;
}

.cart-drawer-item-name {
  font-weight: 700;
  color: var(--text-heading);
  font-size: 0.875rem;
  margin-bottom: 4px;
}

.cart-drawer-item-meta {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-bottom: 8px;
}

.cart-drawer-item-price {
  font-family: var(--font-brand);
  font-weight: 700;
  color: var(--brand-primary);
}

.cart-drawer-item-remove {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  align-self: flex-start;
  padding: 4px;
}

.cart-drawer-footer {
  padding: 24px;
  border-top: 1px solid var(--border-main);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.cart-drawer-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cart-drawer-total-label {
  font-weight: 700;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cart-drawer-total-value {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--brand-primary);
}

.cart-drawer-footer .cart-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================
   COMING SOON / PASSWORD PROTECTED
   ============================================ */
.coming-soon-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
}

.coming-soon-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(217, 251, 6, 0.06) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(217, 251, 6, 0.03) 0%, transparent 50%);
}

.coming-soon-content {
  position: relative;
  z-index: 10;
  max-width: 36rem;
  padding: 2rem;
}

.coming-soon-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 48px;
}

.coming-soon-countdown {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin: 48px 0;
}

.countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-value {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 3.5rem;
  color: var(--text-heading);
  line-height: 1;
}

.countdown-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-body);
  margin-top: 8px;
}

.password-form {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  justify-content: center;
}

.password-form input {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  padding: 14px 20px;
  border-radius: 9999px;
  color: var(--text-heading);
  outline: none;
  width: 100%;
  max-width: 280px;
  text-align: center;
  font-size: 0.875rem;
  transition: border-color 0.3s;
}

.password-form input:focus {
  border-color: var(--brand-primary);
}

/* ============================================
   PORTFOLIO FILTER
   ============================================ */
.portfolio-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 64px;
}

.portfolio-filter-btn {
  padding: 10px 24px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  background: transparent;
  color: var(--text-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s;
}

.portfolio-filter-btn:hover,
.portfolio-filter-btn.active {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border-color: var(--brand-primary);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 767px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
}

.portfolio-card .portfolio-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  filter: grayscale(1);
  transition: all 0.7s;
}

.portfolio-card:hover .portfolio-img {
  filter: grayscale(0);
  transform: scale(1.05);
}

.portfolio-card .portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 16, 17, 0.9) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  opacity: 0;
  transition: opacity 0.5s;
}

.portfolio-card:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-card .portfolio-cat {
  color: var(--brand-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}

.portfolio-card .portfolio-title {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 1.75rem;
  color: var(--text-heading);
  text-transform: uppercase;
}

.portfolio-card.wide {
  grid-column: span 2;
}

@media (max-width: 767px) {
  .portfolio-card.wide {
    grid-column: span 1;
  }
}

/* ============================================
   SERVICE DETAIL CARDS
   ============================================ */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid var(--border-main);
}

@media (max-width: 767px) {
  .service-detail {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.service-detail:nth-child(even) {
  direction: rtl;
}

.service-detail:nth-child(even)>* {
  direction: ltr;
}

.service-detail .service-num {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 5rem;
  color: var(--brand-primary);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 16px;
}

.service-detail .service-visual {
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-main);
}

.service-detail .service-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.5s;
}

.service-detail:hover .service-visual img {
  filter: grayscale(0);
}

.klay-tag-pill {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--border-main);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-body);
  transition: all 0.3s;
}

.klay-tag-pill:hover {
  border-color: var(--brand-primary);
  color: var(--text-heading);
}

/* Author page */
.author-header {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border-main);
  margin-bottom: 64px;
}

@media (max-width: 767px) {
  .author-header {
    flex-direction: column;
    text-align: center;
  }
}

.author-avatar-lg {
  width: 120px;
  height: 120px;
  border-radius: 9999px;
  object-fit: cover;
  border: 3px solid var(--brand-primary);
  flex-shrink: 0;
}

.author-socials {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.author-social-link {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  transition: all 0.3s;
}

.author-social-link:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Misc */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.text-accent {
  color: var(--brand-primary);
}

.text-heading {
  color: var(--text-heading);
}

.text-body {
  color: var(--text-body);
}

.bg-card {
  background: var(--bg-card);
}

.bg-surface {
  background: var(--bg-surface);
}

.border-main {
  border: 1px solid var(--border-main);
}

.rounded-2xl {
  border-radius: 16px;
}

.rounded-3xl {
  border-radius: 24px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-6 {
  margin-bottom: 24px;
}

.mb-8 {
  margin-bottom: 32px;
}

.mb-12 {
  margin-bottom: 48px;
}

.mb-16 {
  margin-bottom: 64px;
}

.mb-20 {
  margin-bottom: 80px;
}

.mt-8 {
  margin-top: 32px;
}

.mt-20 {
  margin-top: 80px;
}

.mt-32 {
  margin-top: 128px;
}

.pt-6 {
  padding-top: 24px;
}

.pt-10 {
  padding-top: 40px;
}

.py-20 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.py-32 {
  padding-top: 128px;
  padding-bottom: 128px;
}

.py-40 {
  padding-top: 160px;
  padding-bottom: 160px;
}

.gap-4 {
  gap: 16px;
}

.gap-6 {
  gap: 24px;
}

.gap-8 {
  gap: 32px;
}

.gap-12 {
  gap: 48px;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-grow {
  flex-grow: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-light {
  font-weight: 300;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-80 {
  opacity: 0.8;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.grayscale {
  filter: grayscale(1);
  transition: filter 0.5s;
}

.grayscale:hover {
  filter: grayscale(0);
}

.w-full {
  width: 100%;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.relative {
  position: relative;
}

.overflow-hidden {
  overflow: hidden;
}

.inline-flex {
  display: inline-flex;
}

.block {
  display: block;
}

.hidden {
  display: none;
}

@media (min-width: 768px) {
  .md-block {
    display: block;
  }

  .md-flex {
    display: flex;
  }

  .md-hidden {
    display: none;
  }
}

@media (min-width: 1024px) {
  .lg-block {
    display: block;
  }

  .lg-hidden {
    display: none;
  }
}

/* ==========================================================================
   WOOCOMMERCE ORDER CONFIRMATION
   ========================================================================== */

/* Order Received wrapper styling */
.woocommerce-order {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
  padding: 40px 24px;
}

/* "Thank You" message mimicking reference */
.woocommerce-thankyou-order-received {
  font-size: 1.25rem;
  margin-bottom: 48px;
  color: var(--text-body);
}

.woocommerce-thankyou-order-received::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  background: var(--brand-primary);
  margin: 0 auto 32px;
  /* Basic checkmark icon using inline SVG background */
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}

/* Order overview items (ul.order_details) */
ul.woocommerce-order-overview {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  padding: 32px;
  text-align: left;
  margin-bottom: 48px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: none;
}

ul.woocommerce-order-overview li {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-main);
  flex: 1 1 45%;
}

ul.woocommerce-order-overview li:nth-last-child(-n+2) {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

ul.woocommerce-order-overview li.order {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

ul.woocommerce-order-overview li.order strong {
  display: block;
  font-family: var(--font-brand);
  font-weight: 700;
  color: var(--brand-primary);
  font-size: 1.25rem;
  opacity: 1;
  text-transform: none;
  margin-top: 4px;
}

ul.woocommerce-order-overview li.date {
  text-align: right;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

ul.woocommerce-order-overview li.date strong {
  display: block;
  font-weight: 700;
  color: var(--text-heading);
  font-size: 1rem;
  opacity: 1;
  text-transform: none;
  margin-top: 4px;
}

/* Order details table styling */
.woocommerce-order-details {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  padding: 32px;
  text-align: left;
  margin-bottom: 48px;
}

.woocommerce-order-details__title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text-heading);
  text-transform: uppercase;
  margin-bottom: 24px;
}

table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
}

table.woocommerce-table--order-details th,
table.woocommerce-table--order-details td {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-main);
}

table.woocommerce-table--order-details thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
  text-align: left;
}

table.woocommerce-table--order-details tbody td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

table.woocommerce-table--order-details tbody td.woocommerce-table__product-name {
  font-weight: 700;
  color: var(--text-heading);
  font-size: 0.875rem;
  width: 70%;
}

table.woocommerce-table--order-details tbody td.woocommerce-table__product-name .product-quantity {
  font-weight: 400;
  opacity: 0.6;
  font-size: 0.75rem;
  margin-left: 8px;
}

table.woocommerce-table--order-details tbody td.woocommerce-table__product-total {
  font-weight: 700;
  color: var(--text-heading);
  text-align: right;
  width: 30%;
}

table.woocommerce-table--order-details tfoot th {
  text-align: left;
  font-weight: 400;
  font-size: 0.875rem;
}

table.woocommerce-table--order-details tfoot td {
  text-align: right;
  font-weight: 700;
  color: var(--text-heading);
}

table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: none;
  font-size: 1.125rem;
  padding-top: 24px;
}

table.woocommerce-table--order-details tfoot tr:last-child th {
  font-weight: 700;
}

table.woocommerce-table--order-details tfoot tr:last-child td {
  font-family: var(--font-brand);
  font-weight: 900;
  color: var(--brand-primary);
}

/* Customer details */
.woocommerce-customer-details {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  padding: 32px;
  text-align: left;
  margin-bottom: 48px;
}

.woocommerce-column__title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-heading);
  margin: 0 auto;
  text-align: center;
  padding: 40px 24px;
}

/* "Thank You" message mimicking reference */
.woocommerce-thankyou-order-received {
  font-size: 1.25rem;
  margin-bottom: 48px;
  color: var(--text-body);
}

.woocommerce-thankyou-order-received::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  background: var(--brand-primary);
  margin: 0 auto 32px;
  /* Basic checkmark icon using inline SVG background */
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}

/* Order overview items (ul.order_details) */
ul.woocommerce-order-overview {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  padding: 32px;
  text-align: left;
  margin-bottom: 48px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: none;
}

ul.woocommerce-order-overview li {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-main);
  flex: 1 1 45%;
}

ul.woocommerce-order-overview li:nth-last-child(-n+2) {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

ul.woocommerce-order-overview li.order {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

ul.woocommerce-order-overview li.order strong {
  display: block;
  font-family: var(--font-brand);
  font-weight: 700;
  color: var(--brand-primary);
  font-size: 1.25rem;
  opacity: 1;
  text-transform: none;
  margin-top: 4px;
}

ul.woocommerce-order-overview li.date {
  text-align: right;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

ul.woocommerce-order-overview li.date strong {
  display: block;
  font-weight: 700;
  color: var(--text-heading);
  font-size: 1rem;
  opacity: 1;
  text-transform: none;
  margin-top: 4px;
}

/* Order details table styling */
.woocommerce-order-details {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  padding: 32px;
  text-align: left;
  margin-bottom: 48px;
}

.woocommerce-order-details__title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text-heading);
  text-transform: uppercase;
  margin-bottom: 24px;
}

table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
}

table.woocommerce-table--order-details th,
table.woocommerce-table--order-details td {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-main);
}

table.woocommerce-table--order-details thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
  text-align: left;
}

table.woocommerce-table--order-details tbody td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

table.woocommerce-table--order-details tbody td.woocommerce-table__product-name {
  font-weight: 700;
  color: var(--text-heading);
  font-size: 0.875rem;
  width: 70%;
}

table.woocommerce-table--order-details tbody td.woocommerce-table__product-name .product-quantity {
  font-weight: 400;
  opacity: 0.6;
  font-size: 0.75rem;
  margin-left: 8px;
}

table.woocommerce-table--order-details tbody td.woocommerce-table__product-total {
  font-weight: 700;
  color: var(--text-heading);
  text-align: right;
  width: 30%;
}

table.woocommerce-table--order-details tfoot th {
  text-align: left;
  font-weight: 400;
  font-size: 0.875rem;
}

table.woocommerce-table--order-details tfoot td {
  text-align: right;
  font-weight: 700;
  color: var(--text-heading);
}

table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: none;
  font-size: 1.125rem;
  padding-top: 24px;
}

table.woocommerce-table--order-details tfoot tr:last-child th {
  font-weight: 700;
}

table.woocommerce-table--order-details tfoot tr:last-child td {
  font-family: var(--font-brand);
  font-weight: 900;
  color: var(--brand-primary);
}

/* Customer details */
.woocommerce-customer-details {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  padding: 32px;
  text-align: left;
  margin-bottom: 48px;
}

.woocommerce-column__title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-heading);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.woocommerce-customer-details address {
  font-style: normal;
  color: var(--text-body);
  line-height: 1.7;
}

/* BACS Details (if applicable) */
.woocommerce-bacs-bank-details {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  padding: 32px;
  text-align: left;
  margin-bottom: 48px;
}

/* ============================================
   SERVICE DETAIL CARDS
   ============================================ */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid var(--border-main);
}

@media (max-width: 767px) {
  .service-detail {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.service-detail:nth-child(even) {
  direction: rtl;
}

.service-detail:nth-child(even)>* {
  direction: ltr;
}

.service-detail .service-num {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 5rem;
  color: var(--brand-primary);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 16px;
}

.service-detail .service-visual {
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-main);
}

.service-detail .service-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.5s;
}

.service-detail:hover .service-visual img {
  filter: grayscale(0);
}

/* ============================================
   KLAY BASE THEME — STATIC CSS
   Dark Mode Default
   Fonts: Inter + Space Grotesk
   ============================================ */

/* ---- CSS Variables (Design Tokens) ---- */
:root {
  --bg-page: #0f1011;
  --bg-card: #161819;
  --bg-surface: #1c1e20;
  --text-primary: #d9fb06;
  --text-heading: #ffffff;
  --text-body: #9ca3af;
  --text-on-brand: #0f1011;
  --border-main: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.05);
  --brand-primary: #d9fb06;
  --brand-secondary: #3f4816;
  --font-body: 'Inter', sans-serif;
  --font-brand: 'Space Grotesk', sans-serif;
}

/* ---- Reset & Base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* Noise Overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  mix-klay-mode: overlay;
  opacity: 0.5;
}

::selection {
  background-color: var(--brand-primary);
  color: var(--text-on-brand);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input,
select,
textarea {
  font-family: inherit;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-main);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-primary);
}

/* ---- Layout ---- */
.container {
  max-width: 1280px;
  margin: 0 auto;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ---- Typography ---- */
.font-brand {
  font-family: var(--font-brand);
}

.heading-giant {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: clamp(4.5rem, 12vw, 10rem);
  line-height: 0.8;
  text-transform: uppercase;
  color: var(--text-primary);
  letter-spacing: -0.04em;
}

.heading-large {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--text-heading);
  letter-spacing: -0.02em;
}

.text-mega {
  font-size: clamp(5rem, 15vw, 18rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
}

/* ---- Buttons ---- */
.btn-primary {
  background-color: var(--brand-primary);
  color: var(--text-on-brand);
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 16px 32px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  gap: 8px;
}

.btn-primary:hover {
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-heading);
  border: 1px solid var(--border-main);
  border-radius: 9999px;
  padding: 16px 32px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  gap: 8px;
}

.btn-secondary:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background-color: var(--bg-card);
}

/* ---- Glass ---- */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
}

/* ---- Animations ---- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-33.333%);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {

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

  50% {
    transform: translateY(-25%);
  }
}

.animate-fade-up {
  animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.animate-marquee {
  animation: marquee 25s linear infinite;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 1280px;
  z-index: 50;
  border-radius: 9999px;
  border: 1px solid transparent;
  padding: 24px 0;
  transition: all 0.5s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar.scrolled {
  background: rgba(15, 16, 17, 0.8);
  backdrop-filter: blur(16px);
  border-color: var(--border-main);
  padding: 12px 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-brand-icon {
  width: 32px;
  height: 32px;
  background: var(--brand-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-brand);
  font-weight: 900;
  font-size: 1.125rem;
  transform: rotate(3deg);
  transition: transform 0.3s;
}

.navbar-brand:hover .navbar-brand-icon {
  transform: rotate(12deg);
}

.navbar-brand-text {
  color: var(--text-heading);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: letter-spacing 0.3s;
}

.navbar-brand:hover .navbar-brand-text {
  letter-spacing: 0.2em;
}

.navbar-links {
  display: flex;
  align-items: center;
  background: rgba(22, 24, 25, 0.5);
  backdrop-filter: blur(12px);
  border-radius: 9999px;
  padding: 4px 8px;
  border: 1px solid var(--border-light);
}

.navbar-links a {
  padding: 8px 24px;
  color: var(--text-body);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 9999px;
  transition: all 0.3s;
}

.navbar-links a:hover,
.navbar-links a.active,
.navbar-links .nav-item:hover>a {
  color: var(--text-heading);
  background: var(--bg-surface);
}

/* ---- Nav Item (wrapper for dropdowns) ---- */
.nav-item {
  position: relative;
}

.nav-item>a {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-item>a .chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.3s;
  opacity: 0.5;
}

.nav-item:hover>a .chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ============================================
   DROPDOWN MENU (Multi-level)
   ============================================ */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-item:hover>.dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown arrow */
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-main);
  border-left: 1px solid var(--border-main);
}

.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  color: var(--text-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s;
  position: relative;
  white-space: nowrap;
}

.dropdown-menu .dropdown-item:hover {
  color: var(--text-heading);
  background: var(--bg-surface);
}

.dropdown-menu .dropdown-item .item-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  flex-shrink: 0;
  transition: all 0.2s;
}

.dropdown-menu .dropdown-item:hover .item-icon {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border-color: var(--brand-primary);
}

.dropdown-menu .dropdown-item .item-text {
  display: flex;
  flex-direction: column;
}

.dropdown-menu .dropdown-item .item-label {
  color: var(--text-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}

.dropdown-menu .dropdown-item:hover .item-label {
  color: var(--brand-primary);
}

.dropdown-menu .dropdown-item .item-desc {
  font-size: 0.6875rem;
  color: var(--text-body);
  opacity: 0.6;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}

.dropdown-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 8px;
}

/* ---- Multi-level Sub-menu ---- */
.dropdown-item.has-submenu>.chevron-right {
  margin-left: auto;
  width: 14px;
  height: 14px;
  opacity: 0.4;
  transition: all 0.2s;
}

.dropdown-item.has-submenu:hover>.chevron-right {
  opacity: 1;
  color: var(--brand-primary);
  transform: translateX(2px);
}

.submenu {
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 110;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.submenu::before {
  display: none;
}

.dropdown-item.has-submenu:hover>.submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.submenu .dropdown-item {
  font-size: 0.75rem;
  padding: 10px 14px;
}

.submenu .dropdown-item .sub-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--border-main);
  flex-shrink: 0;
  transition: background 0.2s;
}

.submenu .dropdown-item:hover .sub-dot {
  background: var(--brand-primary);
}

/* ============================================
   MEGA MENU
   ============================================ */
.mega-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 720px;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: grid;
  grid-template-columns: 1fr 1fr 260px;
  gap: 32px;
}

.nav-item:hover>.mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-main);
  border-left: 1px solid var(--border-main);
}

.mega-col-title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--brand-primary);
  margin-bottom: 16px;
  padding: 0 8px;
}

.mega-menu .mega-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  transition: all 0.2s;
  cursor: pointer;
}

.mega-menu .mega-item:hover {
  background: var(--bg-surface);
}

.mega-menu .mega-item .mega-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  flex-shrink: 0;
  transition: all 0.2s;
}

.mega-menu .mega-item:hover .mega-icon {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border-color: var(--brand-primary);
}

.mega-menu .mega-item .mega-label {
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}

.mega-menu .mega-item:hover .mega-label {
  color: var(--brand-primary);
}

.mega-menu .mega-item .mega-desc {
  font-size: 0.6875rem;
  color: var(--text-body);
  opacity: 0.6;
  margin-top: 2px;
}

/* Mega Featured Card */
.mega-featured {
  background: var(--bg-surface);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  transition: border-color 0.3s;
  cursor: pointer;
}

.mega-featured:hover {
  border-color: var(--brand-primary);
}

.mega-featured .mega-featured-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.5s;
}

.mega-featured:hover .mega-featured-img {
  filter: grayscale(0);
}

.mega-featured .mega-featured-info {
  padding: 16px;
}

.mega-featured .mega-featured-cat {
  color: var(--brand-primary);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}

.mega-featured .mega-featured-title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-heading);
  text-transform: uppercase;
}

/* Invisible bridge to prevent menu close on hover gap */
.nav-item>.dropdown-menu::after,
.nav-item>.mega-menu::after {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

/* ============================================
   RESPONSIVE — Hide desktop nav on mobile
   ============================================ */
.navbar-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  background: var(--bg-card);
  color: var(--text-heading);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  z-index: 60;
}

.navbar-hamburger:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.navbar-hamburger .bar {
  width: 18px;
  height: 2px;
  background: currentColor;
  display: block;
  transition: all 0.3s;
}

.navbar-hamburger .bar+.bar {
  margin-top: 4px;
}

.navbar-hamburger.active .bar:nth-child(1) {
  transform: rotate(45deg) translate(3px, 3px);
}

.navbar-hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.navbar-hamburger.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(3px, -3px);
}

@media (max-width: 1023px) {
  .navbar {
    width: 92%;
    padding: 12px 16px;
  }

  .navbar.scrolled {
    padding: 12px 16px;
  }

  .navbar-links,
  .navbar-actions {
    display: none !important;
  }

  .navbar-hamburger {
    display: flex;
  }
}

/* ============================================
   MOBILE MENU (Full-screen centered overlay)
   ============================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: #050505;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.4s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0s;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  flex-shrink: 0;
}

.mobile-menu-header .brand-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-menu-header .brand-icon {
  width: 32px;
  height: 32px;
  background: var(--brand-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-brand);
  font-weight: 900;
  font-size: 1.125rem;
  transform: rotate(3deg);
}

.mobile-menu-header .brand-text {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.mobile-menu-header .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-menu-header .header-btn {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  background: var(--bg-card);
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.mobile-menu-header .header-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.mobile-menu-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 24px;
}

/* Mobile nav items — CENTERED */
.mobile-nav-item {
  border-bottom: none;
  width: 100%;
  text-align: center;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
  color: var(--text-heading);
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  background: none;
  border: none;
  width: 100%;
  text-align: center;
  cursor: pointer;
  transition: color 0.3s, letter-spacing 0.3s;
}

.mobile-nav-link:hover {
  color: var(--brand-primary);
  letter-spacing: 0.1em;
}

.mobile-nav-link .mobile-chevron {
  width: 20px;
  height: 20px;
  color: var(--text-body);
  opacity: 0.4;
  transition: transform 0.3s, color 0.3s, opacity 0.3s;
}

.mobile-nav-item.expanded .mobile-nav-link .mobile-chevron {
  transform: rotate(180deg);
  color: var(--brand-primary);
  opacity: 1;
}

.mobile-nav-item.expanded .mobile-nav-link {
  color: var(--brand-primary);
}

/* Mobile submenu — centered */
.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-nav-item.expanded .mobile-submenu {
  max-height: 600px;
}

.mobile-submenu-group {
  padding-bottom: 12px;
}

.mobile-submenu-title {
  color: var(--brand-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.625rem;
  padding: 8px 0;
  text-align: center;
}

.mobile-submenu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  color: var(--text-body);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
}

.mobile-submenu-item:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-heading);
}

.mobile-submenu-item .mob-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  flex-shrink: 0;
  transition: all 0.2s;
}

.mobile-submenu-item:hover .mob-icon {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border-color: var(--brand-primary);
}

/* Nested mobile submenu (level 3) */
.mobile-sub-nested {
  padding-left: 0;
  text-align: center;
}

.mobile-sub-nested-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  color: var(--text-body);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
}

.mobile-sub-nested-item:hover {
  color: var(--brand-primary);
}

.mobile-sub-nested-item .mob-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--border-main);
  flex-shrink: 0;
  transition: background 0.2s;
}

.mobile-sub-nested-item:hover .mob-dot {
  background: var(--brand-primary);
}

/* Mobile secondary accordion — centered */
.mobile-sub-accordion {
  border-top: none;
  margin-top: 4px;
  padding-top: 0;
}

.mobile-sub-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  background: none;
  border: none;
  color: var(--text-heading);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  gap: 6px;
}

.mobile-sub-accordion-btn:hover {
  background: rgba(255, 255, 255, 0.03);
}

.mobile-sub-accordion-btn .mob-acc-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-body);
  transition: transform 0.3s;
}

.mobile-sub-accordion.expanded .mobile-sub-accordion-btn .mob-acc-chevron {
  transform: rotate(180deg);
  color: var(--brand-primary);
}

.mobile-sub-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-sub-accordion.expanded .mobile-sub-accordion-body {
  max-height: 300px;
}

/* Mobile Featured Card — centered */
.mobile-featured-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid var(--border-light);
  margin: 12px auto;
  max-width: 280px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.mobile-featured-card:hover {
  border-color: var(--brand-primary);
}

.mobile-featured-card img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  filter: grayscale(1);
  transition: filter 0.3s;
}

.mobile-featured-card:hover img {
  filter: grayscale(0);
}

/* Mobile menu icons row — centered */
.mobile-menu-icons {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 24px 0;
  margin-top: 24px;
}

.mobile-menu-icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  background: transparent;
  color: var(--text-body);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.mobile-menu-icon-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.mobile-menu-footer {
  padding: 24px;
  flex-shrink: 0;
  text-align: center;
}

.mobile-menu-cta {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

/* Lock body scroll when mobile menu is open */
body.menu-open {
  overflow: hidden;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-icon-group {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
  border-right: 1px solid var(--border-light);
  padding-right: 16px;
}

.navbar-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  background: transparent;
  border: none;
  transition: all 0.3s;
  position: relative;
}

.navbar-icon-btn:hover {
  color: var(--brand-primary);
  background: var(--bg-surface);
}

.navbar-icon-btn .badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--brand-primary);
  border-radius: 9999px;
  animation: pulse 2s infinite;
}

.navbar-theme-btn {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s;
}

.navbar-theme-btn:hover {
  border-color: var(--brand-primary);
}

.navbar-cta {
  background: var(--text-heading);
  color: var(--bg-page);
  padding: 10px 24px;
  border-radius: 9999px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  border: none;
  transition: all 0.3s;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.navbar-cta:hover {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  box-shadow: 0 0 20px rgba(217, 251, 6, 0.4);
}

/* ============================================
   HERO (MINIMAL VARIANT — DEFAULT)
   ============================================ */
.hero-minimal {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
}

.hero-minimal .bg-grid {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #8080800a 1px, transparent 1px), linear-gradient(to bottom, #8080800a 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
  pointer-events: none;
}

.hero-minimal .hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-minimal .hero-grid {
    grid-template-columns: 9fr 3fr;
  }
}

.hero-minimal .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--border-main);
  background: var(--bg-card);
  border-radius: 9999px;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--text-body);
  margin-bottom: 48px;
}

.hero-minimal .badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--brand-primary);
  animation: pulse 2s infinite;
}

.hero-minimal h1 {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: clamp(4.5rem, 11vw, 11rem);
  line-height: 0.85;
  color: var(--text-heading);
  letter-spacing: -0.02em;
  margin-bottom: 48px;
}

.hero-minimal h1 .italic {
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  opacity: 0.5;
  padding-right: 16px;
}

.hero-minimal h1 .accent {
  color: var(--brand-primary);
}

.hero-minimal .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.hero-minimal .cta-button {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-heading);
  transition: color 0.3s;
  background: none;
  border: none;
}

.hero-minimal .cta-button:hover {
  color: var(--brand-primary);
}

.hero-minimal .cta-circle {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: var(--brand-primary);
  color: var(--text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s;
}

.hero-minimal .cta-button:hover .cta-circle {
  transform: scale(1.1) rotate(-45deg);
}

.hero-minimal .cta-text-block {
  text-align: left;
}

.hero-minimal .cta-text-block .label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  font-weight: 700;
}

.hero-minimal .cta-text-block .sub {
  font-size: 0.75rem;
  color: var(--text-body);
  opacity: 0.6;
}

.hero-minimal .divider {
  width: 1px;
  height: 48px;
  background: var(--border-main);
}

.hero-minimal .hero-subtitle {
  color: var(--text-body);
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.6;
  font-weight: 500;
}

/* Right service list */
.hero-minimal .services-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-end;
  padding-bottom: 48px;
}

.hero-minimal .services-list .service-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  cursor: pointer;
}

.hero-minimal .services-list .service-item span {
  color: var(--text-heading);
  font-size: 1.125rem;
  font-weight: 300;
  opacity: 0.4;
  transition: all 0.3s;
}

.hero-minimal .services-list .service-item:hover span {
  opacity: 1;
  transform: translateX(-10px);
}

.hero-minimal .services-list .service-item .arrow {
  color: var(--brand-primary);
  opacity: 0;
  transform: translateX(-16px);
  transition: all 0.3s;
}

.hero-minimal .services-list .service-item:hover .arrow {
  opacity: 1;
  transform: translateX(0);
}

.hero-minimal .bottom-ticker {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  padding: 0 1.5rem;
}

.hero-minimal .bottom-ticker-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--border-light);
  padding-top: 24px;
}

.hero-minimal .bottom-ticker .meta {
  display: flex;
  gap: 32px;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-body);
  opacity: 0.5;
}

/* ============================================
   STATS
   ============================================ */
.stats-section {
  border-top: 1px solid var(--border-main);
  border-bottom: 1px solid var(--border-main);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item {
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border-main);
  transition: background 0.5s;
  position: relative;
}

.stat-item:last-child {
  border-right: none;
}

.stat-item:hover {
  background: var(--bg-surface);
}

.stat-value {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: clamp(3rem, 5vw, 5rem);
  color: var(--text-heading);
  margin-bottom: 8px;
  transition: all 0.5s;
}

.stat-item:hover .stat-value {
  transform: scale(1.1);
  color: var(--brand-primary);
}

.stat-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  color: var(--text-body);
  transition: letter-spacing 0.3s;
}

.stat-item:hover .stat-label {
  letter-spacing: 0.2em;
}

.stat-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--brand-primary);
  border-left: 1px solid var(--brand-primary);
  opacity: 0;
  transition: opacity 0.3s;
}

.stat-item:hover .stat-corner {
  opacity: 1;
}

/* ============================================
   FEATURES
   ============================================ */
.features-section {
  padding: 128px 0;
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
}

.features-header {
  margin-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  .features-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.features-header .eyebrow {
  color: var(--brand-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.875rem;
  margin-bottom: 16px;
}

.features-header .scroll-hint {
  color: var(--text-body);
  text-align: right;
  font-family: monospace;
  font-size: 0.75rem;
  opacity: 0.6;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.feature-card {
  position: relative;
  background: var(--bg-card);
  padding: 32px;
  border-radius: 16px;
  border: 1px solid var(--border-main);
  transition: all 0.5s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
}

.feature-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-8px);
}

.feature-card .glow {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 160px;
  height: 160px;
  background: var(--brand-primary);
  border-radius: 9999px;
  filter: blur(80px);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.feature-card:hover .glow {
  opacity: 0.2;
}

.feature-icon {
  width: 56px;
  height: 56px;
  background: var(--bg-surface);
  border-radius: 12px;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  color: var(--text-heading);
  transition: all 0.3s;
}

.feature-card:hover .feature-icon {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border-color: var(--brand-primary);
}

.feature-card h3 {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.feature-card p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-body);
  opacity: 0.8;
  transition: opacity 0.3s;
}

.feature-card:hover p {
  opacity: 1;
}

.feature-footer {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.feature-card:hover .feature-footer {
  opacity: 1;
}

.feature-footer .link-text {
  color: var(--brand-primary);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: transform 0.3s;
  transform: translateY(8px);
}

.feature-card:hover .feature-footer .link-text {
  transform: translateY(0);
}

.feature-footer .arrow-circle {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  transition: all 0.3s;
}

.feature-card:hover .feature-footer .arrow-circle {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}

/* ============================================
   MARQUEE
   ============================================ */
.marquee-section {
  padding: 96px 0;
  overflow: hidden;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  background: rgba(28, 30, 32, 0.3);
  backdrop-filter: blur(4px);
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 25s linear infinite;
}

.marquee-item {
  display: flex;
  align-items: center;
  margin: 0 48px;
}

.marquee-item span {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 5rem;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--text-body);
  transition: all 0.5s;
}

.marquee-item span:hover {
  color: var(--brand-primary);
  -webkit-text-stroke: 0;
}

.marquee-dot {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: var(--brand-primary);
  margin-left: 96px;
  animation: pulse 2s infinite;
}

/* ============================================
   PROCESS
   ============================================ */
.process-section {
  padding: 128px 0;
  background: var(--bg-page);
  border-top: 1px solid var(--border-main);
}

.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
}

@media (min-width: 1024px) {
  .process-grid {
    grid-template-columns: 5fr 7fr;
  }
}

.process-sticky {
  position: sticky;
  top: 128px;
}

.process-sticky .eyebrow {
  color: var(--brand-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.875rem;
  margin-bottom: 24px;
}

.process-indicators {
  margin-top: 48px;
  padding-left: 32px;
  border-left: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.process-indicator {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0.3;
  transition: all 0.5s;
  cursor: pointer;
}

.process-indicator.active {
  opacity: 1;
  transform: translateX(8px);
}

.process-indicator .num {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-heading);
}

.process-indicator.active .num {
  color: var(--brand-primary);
}

.process-indicator .label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  color: var(--text-body);
  font-weight: 500;
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 160px;
}

.process-step {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.process-step .step-num-bg {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 8rem;
  color: var(--bg-card);
  position: absolute;
  top: -40px;
  left: -24px;
  opacity: 0.5;
  user-select: none;
}

.process-step .step-num {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 3.75rem;
  color: var(--brand-primary);
  position: relative;
  z-index: 10;
  margin-bottom: 32px;
}

.process-step h3 {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 2.25rem;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.process-step p {
  font-size: 1.25rem;
  color: var(--text-body);
  line-height: 1.6;
  max-width: 36rem;
  margin-bottom: 40px;
}

.process-step .tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.process-step .tag {
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  color: var(--text-body);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: all 0.3s;
}

.process-step .tag:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* ============================================
   SHOWCASE
   ============================================ */
.showcase-section {
  padding: 128px 0;
  background: var(--bg-page);
  overflow: hidden;
  border-top: 1px solid var(--border-light);
}

.showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}

.showcase-header .eyebrow {
  color: var(--brand-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.875rem;
  margin-bottom: 16px;
}

.showcase-nav {
  display: flex;
  gap: 16px;
}

.showcase-nav button {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  background: transparent;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.showcase-nav button:hover {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}

.showcase-scroll {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  padding: 0 1.5rem 48px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.showcase-scroll::-webkit-scrollbar {
  display: none;
}

.showcase-card {
  flex: none;
  width: 600px;
  scroll-snap-align: center;
  cursor: pointer;
}

.showcase-card .image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  margin-bottom: 32px;
  border-radius: 8px;
}

.showcase-card .image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: all 0.7s;
}

.showcase-card:hover .image-wrap img {
  filter: grayscale(0);
  transform: scale(1.05);
}

.showcase-card .image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(217, 251, 6, 0.2);
  opacity: 0;
  transition: opacity 0.3s;
  mix-klay-mode: multiply;
}

.showcase-card:hover .image-overlay {
  opacity: 1;
}

.showcase-card .info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--border-main);
  padding-bottom: 24px;
}

.showcase-card .category {
  color: var(--brand-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}

.showcase-card .title {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 2.25rem;
  color: var(--text-heading);
  text-transform: uppercase;
  transition: color 0.3s;
}

.showcase-card:hover .title {
  color: var(--brand-primary);
}

.showcase-card .arrow-circle {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-heading);
  transition: all 0.3s;
}

.showcase-card:hover .arrow-circle {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border-color: var(--brand-primary);
  transform: rotate(-45deg);
}

/* ============================================
   PRICING
   ============================================ */
.pricing-section {
  padding: 128px 0;
  background: var(--bg-page);
}

.pricing-header {
  border-top: 1px solid var(--border-main);
  padding-top: 40px;
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .pricing-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.pricing-header p {
  color: var(--text-body);
  max-width: 28rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-card {
  position: relative;
  padding: 32px 40px;
  border-radius: 24px;
  border: 1px solid var(--border-main);
  background: transparent;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}

.pricing-card:hover {
  background: var(--bg-card);
}

.pricing-card.highlight {
  background: var(--bg-surface);
  border-color: var(--brand-primary);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: scale(1.05);
  z-index: 10;
}

.pricing-card .best-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--brand-primary);
  color: var(--text-on-brand);
  padding: 4px 16px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pricing-card .plan-name {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text-heading);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pricing-card .plan-desc {
  font-size: 0.875rem;
  color: var(--text-body);
  margin-bottom: 32px;
}

.pricing-card .plan-price {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 3rem;
  color: var(--text-primary);
  margin-bottom: 32px;
}

.pricing-card .plan-price .suffix {
  color: var(--text-body);
  font-size: 1rem;
  font-weight: 400;
}

.pricing-card .plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
  flex-grow: 1;
}

.pricing-card .plan-features li {
  display: flex;
  align-items: center;
  color: var(--text-body);
  font-weight: 500;
}

.pricing-card .plan-features li svg {
  color: var(--brand-primary);
  margin-right: 12px;
  flex-shrink: 0;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-section {
  padding: 160px 0;
  background: var(--bg-page);
  overflow: hidden;
}

.testimonials-header {
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  .testimonials-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.testimonials-header .eyebrow {
  color: var(--brand-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.875rem;
  margin-bottom: 16px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial-card {
  padding: 40px;
  border-radius: 24px;
  position: relative;
  transition: transform 0.5s;
}

.testimonial-card:hover {
  transform: translateY(-8px);
}

.testimonial-card.offset {
  transform: translateY(48px);
}

.testimonial-card.offset:hover {
  transform: translateY(40px);
}

.testimonial-card .quote-icon {
  color: var(--brand-primary);
  width: 48px;
  height: 48px;
  margin-bottom: 32px;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.testimonial-card:hover .quote-icon {
  opacity: 1;
}

.testimonial-card .quote-text {
  font-size: 1.25rem;
  color: var(--text-heading);
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 40px;
}

.testimonial-card .author-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--border-light);
}

.testimonial-card .author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid var(--bg-page);
}

.testimonial-card .author-name {
  font-weight: 700;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.testimonial-card .author-role {
  font-size: 0.75rem;
  color: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ============================================
   BLOG
   ============================================ */
.blog-section {
  padding: 128px 0;
  background: var(--bg-page);
  border-top: 1px solid var(--border-main);
}

.blog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 80px;
}

.blog-header .view-all {
  display: flex;
  align-items: center;
  color: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  font-size: 0.875rem;
  gap: 8px;
  transition: color 0.3s;
}

.blog-header .view-all:hover {
  color: var(--brand-primary);
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-card {
  cursor: pointer;
}

.blog-card .image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  margin-bottom: 24px;
}

.blog-card .image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.blog-card:hover .image-wrap img {
  transform: scale(1.05);
}

.blog-card .image-wrap .cat-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--bg-page);
  color: var(--text-heading);
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.blog-card .date {
  color: var(--brand-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}

.blog-card h3 {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text-heading);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 12px;
  transition: color 0.3s;
}

.blog-card:hover h3 {
  color: var(--brand-primary);
}

.blog-card p {
  color: var(--text-body);
  line-height: 1.6;
}

/* ============================================
   SHOP SECTION (LANDING)
   ============================================ */
.shop-section {
  padding: 128px 0;
  background: var(--bg-surface);
}

.shop-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 80px;
}

@media (min-width: 768px) {
  .shop-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.shop-header p {
  color: var(--text-body);
  max-width: 28rem;
  margin-top: 16px;
}

.shop-header .view-collection {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  font-size: 0.875rem;
  transition: color 0.3s;
}

.shop-header .view-collection:hover {
  color: var(--brand-primary);
}

.shop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 640px) {
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .shop-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.shop-product-card {
  cursor: pointer;
}

.shop-product-card .image-wrap {
  position: relative;
  background: var(--bg-card);
  aspect-ratio: 1;
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  transition: border-color 0.3s;
}

.shop-product-card:hover .image-wrap {
  border-color: var(--brand-primary);
}

.shop-product-card .image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.5s;
}

.shop-product-card:hover .image-wrap img {
  opacity: 1;
}

.shop-product-card .quick-add {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: var(--brand-primary);
  color: var(--text-on-brand);
  padding: 8px 12px;
  font-weight: 700;
  border-radius: 9999px;
  border: none;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s;
}

.shop-product-card:hover .quick-add {
  opacity: 1;
  transform: translateY(0);
}

.shop-product-card .info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.shop-product-card .tag {
  color: var(--text-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.shop-product-card .name {
  color: var(--text-heading);
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
}

.shop-product-card .price {
  color: var(--brand-primary);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.25rem;
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  padding: 160px 0;
  background: var(--brand-secondary);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-section .overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 16, 17, 0.1);
  backdrop-filter: blur(48px);
}

.cta-section .content {
  position: relative;
  z-index: 10;
}

.cta-section h2 {
  color: #fff;
}

.cta-section h2 .accent {
  color: var(--brand-primary);
}

.cta-section p {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 48px;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
}

.cta-section .cta-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

@media (min-width: 640px) {
  .cta-section .cta-form {
    flex-direction: row;
  }
}

.cta-section .cta-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 16px 32px;
  border-radius: 9999px;
  outline: none;
  color: #fff;
  width: 100%;
  max-width: 24rem;
  backdrop-filter: blur(12px);
  transition: background 0.3s;
}

.cta-section .cta-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.cta-section .cta-input:focus {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: #050505;
  padding-top: 128px;
  padding-bottom: 32px;
  border-top: 1px solid var(--border-main);
  overflow: hidden;
  position: relative;
}

.footer .bg-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: var(--brand-primary);
  border-radius: 9999px;
  filter: blur(150px);
  opacity: 0.05;
  pointer-events: none;
}

.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 96px;
}

.footer-cta .trigger {
  color: var(--brand-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 24px;
  animation: pulse 2s infinite;
}

.footer-cta h2 {
  color: #fff;
  max-width: 56rem;
  margin: 0 auto 32px;
}

.footer-cta h2 .accent {
  color: var(--brand-primary);
}

.footer-cta .btns {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 64px;
}

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

.footer-grid .brand {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 24px;
}

.footer-grid .brand-desc {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.6;
}

.footer-grid .col-title {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  margin-bottom: 24px;
  opacity: 0.6;
}

.footer-grid ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-grid ul a {
  color: #9ca3af;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.3s;
}

.footer-grid ul a:hover {
  color: var(--brand-primary);
}

.footer-grid .newsletter-form {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 8px;
}

.footer-grid .newsletter-input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  width: 100%;
  font-size: 0.875rem;
}

.footer-grid .newsletter-input::placeholder {
  color: #4b5563;
}

.footer-grid .newsletter-btn {
  color: var(--brand-primary);
  background: none;
  border: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.75rem;
}

.footer-mega {
  margin-top: 128px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 40px;
  text-align: center;
}

.footer-mega .mega-text {
  font-family: var(--font-brand);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.05);
  font-size: clamp(5rem, 15vw, 18rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  user-select: none;
  pointer-events: none;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #4b5563;
  font-size: 0.75rem;
  padding: 0 16px;
  margin-top: -2vw;
  position: relative;
  z-index: 20;
}

/* ============================================
   PRODUCT CARD (Reusable — Shop Archive)
   ============================================ */
.product-card {
  position: relative;
}

.product-card .image-wrap {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--bg-card);
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border-main);
  transition: border-color 0.3s;
}

.product-card:hover .image-wrap {
  border-color: var(--brand-primary);
}

.product-card .image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: all 0.5s;
}

.product-card:hover .image-wrap img {
  opacity: 1;
  transform: scale(1.05);
}

.product-card .image-wrap .quick-add-overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 16px;
  transform: translateY(100%);
  transition: transform 0.3s;
}

.product-card:hover .image-wrap .quick-add-overlay {
  transform: translateY(0);
}

.product-card .quick-add-btn {
  width: 100%;
  background: var(--brand-primary);
  color: var(--text-on-brand);
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.product-card .badge-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(15, 16, 17, 0.9);
  backdrop-filter: blur(4px);
  padding: 4px 12px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-heading);
  border-radius: 9999px;
}

.product-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.product-card .meta .name {
  color: var(--text-heading);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  margin-bottom: 4px;
  transition: color 0.3s;
}

.product-card:hover .meta .name {
  color: var(--brand-primary);
}

.product-card .meta .type {
  color: var(--text-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.product-card .meta .price {
  color: var(--text-heading);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.25rem;
}

/* ============================================
   PAGE TEMPLATES — COMMON
   ============================================ */
.page-wrapper {
  background: var(--bg-page);
  min-height: 100vh;
  color: var(--text-body);
  font-family: var(--font-body);
}

.page-header {
  padding-top: 160px;
  padding-bottom: 80px;
}

/* Forms */
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  color: var(--text-heading);
}

.form-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  padding: 16px;
  border-radius: 8px;
  outline: none;
  color: var(--text-heading);
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-input:focus {
  border-color: var(--brand-primary);
}

.form-input::placeholder {
  color: var(--text-body);
}

.form-select {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  padding: 16px;
  border-radius: 8px;
  outline: none;
  color: var(--text-body);
  font-size: 1rem;
  transition: border-color 0.3s;
  -webkit-appearance: none;
}

/* ============================================
   CART DRAWER (Slide-over)
   ============================================ */
.cart-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.5s;
}

.cart-drawer-backdrop.open {
  opacity: 1;
}

.cart-drawer {
  position: relative;
  width: 100%;
  max-width: 28rem;
  background: var(--bg-card);
  height: 100%;
  box-shadow: -25px 0 50px -12px rgba(0, 0, 0, 0.25);
  border-left: 1px solid var(--border-main);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.cart-drawer-backdrop.open .cart-drawer {
  transform: translateX(0);
}

.cart-drawer-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface);
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cart-drawer-footer {
  padding: 24px;
  border-top: 1px solid var(--border-main);
  background: var(--bg-surface);
}

/* ============================================
   UTILITY GRIDS
   ============================================ */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid-12 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 1024px) {
  .grid-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

.col-span-3 {
  grid-column: span 1;
}

@media (min-width: 1024px) {
  .col-span-3 {
    grid-column: span 3;
  }
}

.col-span-4 {
  grid-column: span 1;
}

@media (min-width: 1024px) {
  .col-span-4 {
    grid-column: span 4;
  }
}

.col-span-5 {
  grid-column: span 1;
}

@media (min-width: 1024px) {
  .col-span-5 {
    grid-column: span 5;
  }
}

.col-span-7 {
  grid-column: span 1;
}

@media (min-width: 1024px) {
  .col-span-7 {
    grid-column: span 7;
  }
}

.col-span-8 {
  grid-column: span 1;
}

@media (min-width: 1024px) {
  .col-span-8 {
    grid-column: span 8;
  }
}

.col-span-9 {
  grid-column: span 1;
}

@media (min-width: 1024px) {
  .col-span-9 {
    grid-column: span 9;
  }
}

.sticky-sidebar {
  position: sticky;
  top: 128px;
  align-self: flex-start;
}

/* Prose */
.prose {
  max-width: 65ch;
}

.prose h2 {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--text-heading);
  text-transform: uppercase;
  margin: 48px 0 16px;
}

.prose h3 {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--text-heading);
  text-transform: uppercase;
  margin: 32px 0 12px;
}

.prose p {
  color: var(--text-body);
  font-size: 1.125rem;
  line-height: 1.8;
  margin-bottom: 24px;
}

.prose ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 24px;
}

.prose ul li {
  color: var(--text-body);
  margin-bottom: 8px;
  line-height: 1.6;
}

.prose blockquote {
  border-left: 3px solid var(--brand-primary);
  padding: 16px 24px;
  margin: 32px 0;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--text-heading);
}

.prose pre {
  background: var(--bg-card);
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--border-main);
  overflow-x: auto;
  margin: 24px 0;
}

.prose code {
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--text-body);
}

.prose figcaption {
  text-align: center;
  font-size: 0.875rem;
  margin-top: 16px;
  opacity: 0.6;
}

/* Account Tabs */
.account-tabs {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  overflow: hidden;
}

.account-tabs .user-info {
  padding: 24px;
  border-bottom: 1px solid var(--border-main);
  display: flex;
  align-items: center;
  gap: 16px;
}

.account-tabs .avatar {
  width: 48px;
  height: 48px;
  background: var(--brand-primary);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-brand);
  font-weight: 700;
  font-size: 1.25rem;
}

.account-tabs nav {
  padding: 8px;
}

.account-tabs .tab-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-heading);
  background: transparent;
  border: none;
  transition: all 0.3s;
  text-align: left;
}

.account-tabs .tab-btn:hover {
  background: var(--bg-page);
}

.account-tabs .tab-btn.active {
  background: var(--bg-surface);
  color: var(--brand-primary);
}

.account-content {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  padding: 32px;
  min-height: 500px;
}

/* Table */
.data-table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.data-table thead tr {
  border-bottom: 1px solid var(--border-main);
}

.data-table th {
  padding-bottom: 16px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--text-heading);
}

.data-table td {
  padding: 16px 0;
  font-size: 0.875rem;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background 0.3s;
}

.data-table tbody tr:hover {
  background: var(--bg-surface);
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.status-badge.completed {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.status-badge.processing {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

/* 404 */
.not-found-section {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.not-found-mega {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 15rem;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.2;
  user-select: none;
}

/* ============================================
   SEARCH OVERLAY (Full-Screen)
   ============================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(15, 16, 17, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.3s;
}

.search-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.search-overlay-close {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  background: transparent;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.search-overlay-close:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  transform: rotate(90deg);
}

.search-overlay-content {
  width: 100%;
  max-width: 56rem;
  padding: 0 2rem;
  transform: translateY(40px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.search-overlay.open .search-overlay-content {
  transform: translateY(0);
  opacity: 1;
}

.search-overlay-label {
  display: block;
  color: var(--brand-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.875rem;
  margin-bottom: 32px;
  text-align: center;
}

.search-overlay-input-wrap {
  position: relative;
  border-bottom: 2px solid var(--border-main);
  transition: border-color 0.3s;
}

.search-overlay-input-wrap:focus-within {
  border-color: var(--brand-primary);
}

.search-overlay-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--text-heading);
  padding: 24px 64px 24px 0;
  caret-color: var(--brand-primary);
}

.search-overlay-input::placeholder {
  color: rgba(255, 255, 255, 0.15);
}

.search-overlay-input-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-body);
  opacity: 0.4;
  transition: all 0.3s;
}

.search-overlay-input-wrap:focus-within .search-overlay-input-icon {
  color: var(--brand-primary);
  opacity: 1;
}

.search-overlay-hints {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
  justify-content: center;
}

.search-overlay-hint {
  padding: 8px 20px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  color: var(--text-body);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s;
  cursor: pointer;
  background: transparent;
}

.search-overlay-hint:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: rgba(217, 251, 6, 0.05);
}

.search-overlay-footer {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--text-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.4;
}

.search-overlay-footer kbd {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.75rem;
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-item {
  border-bottom: 1px solid var(--border-main);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  background: none;
  border: none;
  color: var(--text-heading);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.faq-question:hover {
  color: var(--brand-primary);
}

.faq-question .faq-icon {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s;
}

.faq-item.open .faq-question .faq-icon {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border-color: var(--brand-primary);
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-item.open .faq-answer {
  max-height: 300px;
}

.faq-answer-inner {
  padding: 0 0 28px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-body);
  max-width: 42rem;
}

/* ============================================
   PRODUCT CARD — ADD TO CART / VIEW CART
   ============================================ */
.product-card .add-to-cart-btn,
.product-card .view-cart-btn {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.product-card .add-to-cart-btn {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}

.product-card .add-to-cart-btn:hover {
  box-shadow: 0 0 20px rgba(217, 251, 6, 0.3);
}

.product-card .view-cart-btn {
  background: var(--text-heading);
  color: var(--bg-page);
}

.product-card .view-cart-btn:hover {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}

.product-card .cart-actions {
  display: none;
}

.product-card.in-cart .quick-add-overlay .add-to-cart-btn {
  display: none;
}

.product-card.in-cart .quick-add-overlay .cart-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-card .added-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--brand-primary);
  color: var(--text-on-brand);
  padding: 4px 12px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-radius: 9999px;
  display: none;
  animation: fadeInUp 0.3s ease;
}

.product-card.in-cart .added-badge {
  display: block;
}

/* Landing shop card variant */
.shop-product-card .quick-add {
  transition: all 0.3s;
}

.shop-product-card .view-cart-link {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: var(--text-heading);
  color: var(--bg-page);
  padding: 8px 12px;
  font-weight: 700;
  border-radius: 9999px;
  border: none;
  font-size: 0.75rem;
  display: none;
  cursor: pointer;
  transition: all 0.3s;
}

.shop-product-card .view-cart-link:hover {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}

.shop-product-card.in-cart .quick-add {
  display: none !important;
}

.shop-product-card.in-cart .view-cart-link {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   CART DRAWER COMPONENT
   ============================================ */
.cart-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0s 0.4s;
}

.cart-drawer-backdrop.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s, visibility 0s 0s;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: var(--bg-card);
  border-left: 1px solid var(--border-main);
  box-shadow: -25px 0 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 101;
}

.cart-drawer-backdrop.open+.cart-drawer,
.cart-drawer.open {
  transform: translateX(0);
}

.cart-drawer-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface);
  flex-shrink: 0;
}

.cart-drawer-header h3 {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-heading);
  text-transform: uppercase;
}

.cart-drawer-close {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  background: transparent;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.cart-drawer-close:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.cart-drawer-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}

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

.cart-drawer-item img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

.cart-drawer-item-info {
  flex: 1;
}

.cart-drawer-item-name {
  font-weight: 700;
  color: var(--text-heading);
  font-size: 0.875rem;
  margin-bottom: 4px;
}

.cart-drawer-item-meta {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-bottom: 8px;
}

.cart-drawer-item-price {
  font-family: var(--font-brand);
  font-weight: 700;
  color: var(--brand-primary);
}

.cart-drawer-item-remove {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  align-self: flex-start;
  padding: 4px;
}

.cart-drawer-footer {
  padding: 24px;
  border-top: 1px solid var(--border-main);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.cart-drawer-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cart-drawer-total-label {
  font-weight: 700;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cart-drawer-total-value {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--brand-primary);
}

.cart-drawer-footer .cart-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================
   COMING SOON / PASSWORD PROTECTED
   ============================================ */
.coming-soon-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
}

.coming-soon-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(217, 251, 6, 0.06) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(217, 251, 6, 0.03) 0%, transparent 50%);
}

.coming-soon-content {
  position: relative;
  z-index: 10;
  max-width: 36rem;
  padding: 2rem;
}

.coming-soon-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 48px;
}

.coming-soon-countdown {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin: 48px 0;
}

.countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-value {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 3.5rem;
  color: var(--text-heading);
  line-height: 1;
}

.countdown-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-body);
  margin-top: 8px;
}

.password-form {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  justify-content: center;
}

.password-form input {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  padding: 14px 20px;
  border-radius: 9999px;
  color: var(--text-heading);
  outline: none;
  width: 100%;
  max-width: 280px;
  text-align: center;
  font-size: 0.875rem;
  transition: border-color 0.3s;
}

.password-form input:focus {
  border-color: var(--brand-primary);
}

/* ============================================
   PORTFOLIO FILTER
   ============================================ */
.portfolio-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 64px;
}

.portfolio-filter-btn {
  padding: 10px 24px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  background: transparent;
  color: var(--text-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s;
}

.portfolio-filter-btn:hover,
.portfolio-filter-btn.active {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border-color: var(--brand-primary);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 767px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
}

.portfolio-card .portfolio-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  filter: grayscale(1);
  transition: all 0.7s;
}

.portfolio-card:hover .portfolio-img {
  filter: grayscale(0);
  transform: scale(1.05);
}

.portfolio-card .portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 16, 17, 0.9) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  opacity: 0;
  transition: opacity 0.5s;
}

.portfolio-card:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-card .portfolio-cat {
  color: var(--brand-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}

.portfolio-card .portfolio-title {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 1.75rem;
  color: var(--text-heading);
  text-transform: uppercase;
}

.portfolio-card.wide {
  grid-column: span 2;
}

@media (max-width: 767px) {
  .portfolio-card.wide {
    grid-column: span 1;
  }
}

/* ============================================
   SERVICE DETAIL CARDS
   ============================================ */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid var(--border-main);
}

@media (max-width: 767px) {
  .service-detail {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.service-detail:nth-child(even) {
  direction: rtl;
}

.service-detail:nth-child(even)>* {
  direction: ltr;
}

.service-detail .service-num {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 5rem;
  color: var(--brand-primary);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 16px;
}

.service-detail .service-visual {
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-main);
}

.service-detail .service-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.5s;
}

.service-detail:hover .service-visual img {
  filter: grayscale(0);
}

/* Author page */
.author-header {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border-main);
  margin-bottom: 64px;
}

@media (max-width: 767px) {
  .author-header {
    flex-direction: column;
    text-align: center;
  }
}

.author-avatar-lg {
  width: 120px;
  height: 120px;
  border-radius: 9999px;
  object-fit: cover;
  border: 3px solid var(--brand-primary);
  flex-shrink: 0;
}

.author-socials {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.author-social-link {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid var(--border-main);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  transition: all 0.3s;
}

.author-social-link:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Misc */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.text-accent {
  color: var(--brand-primary);
}

.text-heading {
  color: var(--text-heading);
}

.text-body {
  color: var(--text-body);
}

.bg-card {
  background: var(--bg-card);
}

.bg-surface {
  background: var(--bg-surface);
}

.border-main {
  border: 1px solid var(--border-main);
}

.rounded-2xl {
  border-radius: 16px;
}

.rounded-3xl {
  border-radius: 24px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-6 {
  margin-bottom: 24px;
}

.mb-8 {
  margin-bottom: 32px;
}

.mb-12 {
  margin-bottom: 48px;
}

.mb-16 {
  margin-bottom: 64px;
}

.mb-20 {
  margin-bottom: 80px;
}

.mt-8 {
  margin-top: 32px;
}

.mt-20 {
  margin-top: 80px;
}

.mt-32 {
  margin-top: 128px;
}

.pt-6 {
  padding-top: 24px;
}

.pt-10 {
  padding-top: 40px;
}

.py-20 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.py-32 {
  padding-top: 128px;
  padding-bottom: 128px;
}

.py-40 {
  padding-top: 160px;
  padding-bottom: 160px;
}

.gap-4 {
  gap: 16px;
}

.gap-6 {
  gap: 24px;
}

.gap-8 {
  gap: 32px;
}

.gap-12 {
  gap: 48px;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-grow {
  flex-grow: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-light {
  font-weight: 300;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-80 {
  opacity: 0.8;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.grayscale {
  filter: grayscale(1);
  transition: filter 0.5s;
}

.grayscale:hover {
  filter: grayscale(0);
}

.w-full {
  width: 100%;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.relative {
  position: relative;
}

.overflow-hidden {
  overflow: hidden;
}

.inline-flex {
  display: inline-flex;
}

.block {
  display: block;
}

.hidden {
  display: none;
}

@media (min-width: 768px) {
  .md-block {
    display: block;
  }

  .md-flex {
    display: flex;
  }

  .md-hidden {
    display: none;
  }
}

@media (min-width: 1024px) {
  .lg-block {
    display: block;
  }

  .lg-hidden {
    display: none;
  }
}

/* ==========================================================================
   WOOCOMMERCE SINGLE PRODUCT OVERRIDES (KLAY)
   ========================================================================== */

/* Main Gallery Image */
.single-product .wp-block-woocommerce-product-image-gallery,
.single-product .woocommerce-product-gallery {
  border-radius: 16px;
  overflow: hidden;
}

.single-product .woocommerce-product-gallery__image img {
  border-radius: 16px;
}

/* Product Title */
.single-product h1.wp-block-post-title {
  font-family: var(--font-brand) !important;
  font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  font-weight: 900 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  color: var(--text-heading) !important;
  line-height: 1.1 !important;
}

/* Product Price */
.single-product .wp-block-woocommerce-product-price {
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  font-family: var(--font-brand) !important;
  color: var(--text-heading) !important;
  line-height: 1 !important;
}

.single-product .wp-block-woocommerce-product-price del {
  font-size: 1.25rem;
  opacity: 0.6;
  margin-right: 12px;
  color: var(--text-body);
}

.single-product .wp-block-woocommerce-product-price ins {
  text-decoration: none;
  color: var(--text-heading);
}

/* Add to Cart Form / Button */
.single-product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
  align-items: stretch;
}

.single-product form.cart .quantity {
  /* Hide quantity to match reference for digital goods, or style it. 
       We will style it minimally just in case it's needed for physical goods */
  margin-right: 16px;
}

.single-product form.cart .quantity input.qty {
  background: transparent;
  border: 1px solid var(--border-main);
  color: var(--text-heading);
  padding: 0 16px;
  height: 100%;
  min-height: 56px;
  border-radius: 8px;
  width: 80px;
  text-align: center;
}

.single-product form.cart button.single_add_to_cart_button {
  flex: 1;
  background: var(--brand-primary) !important;
  color: var(--text-bg) !important;
  border: none !important;
  padding: 16px 48px !important;
  border-radius: 9999px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
  min-height: 56px;
}

.single-product form.cart button.single_add_to_cart_button:hover {
}

/* Layout Gap Fixes */
.single-product .grid-12 {
  gap: 64px;
}

@media (max-width: 1024px) {
  .single-product .grid-12 {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
}

/* SKU and Metadata Fixes */
.wc-block-components-product-sku,
.wc-block-components-product-sku table,
.wc-block-components-product-sku td,
.wc-block-components-product-sku th {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Fix Gallery Thumbnails and Wrappers */
.single-product .wp-block-woocommerce-product-image-gallery,
.single-product .woocommerce-product-gallery {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 80px;
  width: 80px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  opacity: 0.6;
  transition: opacity 0.3s;
  border: none !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  opacity: 1;
}

/* Force Single Product Gallery Image to Fill Container */
.single-product .wp-block-woocommerce-product-image-gallery,
.single-product .woocommerce-product-gallery {
  width: 100% !important;
  max-width: 100% !important;
}

.single-product .woocommerce-product-gallery__image a {
  width: 100% !important;
  display: block !important;
}

.single-product .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 16px;
}

/* Fix FSE border-style: solid causing borders on all sides */
html :where(.has-border-color) {
  border-width: 0;
}


/* Single Product Typography Fixes */
.single-product .wp-block-post-excerpt,
.single-product .wp-block-post-excerpt p {
  font-family: var(--font-brand, var(--wp--preset--font-family--body));
  font-size: 1.125rem !important;
  /* 18px */
  line-height: 1.8 !important;
  color: #d1d5db !important;
  /* Lighter gray to match reference, closer to zinc-300/gray-300 */
}

.single-product .wp-block-group>.wp-block-group p {
  /* Target the checkmark list */
  font-family: var(--font-brand, var(--wp--preset--font-family--body));
  font-size: 1.125rem !important;
  /* 18px to match description */
  color: #d1d5db !important;
}

.single-product .wp-block-group>.wp-block-group p.has-brand-primary-color {
  color: var(--brand-primary) !important;
}

/* ==========================================================================
   SHOP ARCHIVE PAGE OVERRIDES (KLAY)
   ========================================================================== */

/* The Shop Title Visibility and Styling */
h1.heading-large,
.page-header h1.heading-large {
  color: var(--text-heading) !important;
  font-family: var(--font-brand) !important;
  font-size: clamp(3.5rem, 8vw, 6rem) !important;
  text-transform: uppercase !important;
  line-height: 0.9 !important;
  font-weight: 900 !important;
  margin-bottom: 24px !important;
  letter-spacing: -0.02em !important;
  display: block !important;
}

/* Force 4-Column Grid */
.wp-block-woocommerce-product-collection .grid-4,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px !important;
}

@media (max-width: 1200px) {

  .wp-block-woocommerce-product-collection .grid-4,
  ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 1024px) {

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

@media (max-width: 640px) {

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

/* Product Card Title and Price Layout */
.product-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.product-card>.wp-block-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100%;
  margin-top: 16px;
}

.product-card>.wp-block-group>.wp-block-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-right: 16px;
}

.product-card .wp-block-post-title {
  margin: 0 !important;
}

.product-card .wp-block-post-title a {
  font-family: var(--font-brand) !important;
  font-size: 1.125rem !important;
  /* 18px */
  font-weight: 700 !important;
  color: var(--text-heading) !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

.product-card .wp-block-woocommerce-product-price {
  font-family: var(--font-brand) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--text-heading) !important;
  text-align: right;
  margin: 0 !important;
  white-space: nowrap;
}

.product-card .wp-block-woocommerce-product-price del {
  font-size: 0.875rem !important;
  opacity: 0.6;
  margin-right: 8px;
  color: var(--text-body);
}

.product-card .wp-block-woocommerce-product-price ins {
  text-decoration: none;
  color: var(--brand-primary);
}

/* Sale Badge / Category Pill Styling */
.product-card .woocommerce-badge,
.product-card .onsale {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: #18181b !important;
  /* Dark pill style from reference */
  color: #ffffff !important;
  font-family: var(--font-brand) !important;
  font-size: 0.6875rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  z-index: 10;
  line-height: 1;
  border: none !important;
}

/* Image Hover Zoom Effect */
.product-card .wp-block-woocommerce-product-image {
  border-radius: 12px;
  overflow: hidden;
}

.product-card .wp-block-woocommerce-product-image img {
  transition: transform 0.3s ease;
}

.product-card:hover .wp-block-woocommerce-product-image img {
  transform: scale(1.05);
}

/* Add to Cart Overlay on Product Cards */
.product-card {
  position: relative;
}

.product-card .wp-block-woocommerce-product-button {
  position: absolute;
  bottom: 80px;
  /* Position over the image */
  left: 16px;
  right: 16px;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-card:hover .wp-block-woocommerce-product-button {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.product-card .wp-block-woocommerce-product-button a.button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--brand-primary) !important;
  color: var(--text-bg) !important;
  font-family: var(--font-brand);
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 16px !important;
  border-radius: 9999px !important;
  width: 100%;
  text-align: center;
  border: none !important;
  transition: all 0.3s ease;
}

.product-card .wp-block-woocommerce-product-button a.button:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 20px rgba(228, 255, 0, 0.2);
}

/* "View Cart" button that appears after adding */
.product-card .wp-block-woocommerce-product-button a.added_to_cart {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--text-heading) !important;
  color: var(--text-bg) !important;
  font-family: var(--font-brand);
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px !important;
  border-radius: 9999px !important;
  width: 100%;
  text-align: center;
  text-decoration: none !important;
}

.product-card .wp-block-woocommerce-product-button a.added_to_cart:hover {
  opacity: 0.8;
}

/* ==========================================================================
   ROBUST SHOP ARCHIVE FIXES (Force Overrides)
   ========================================================================== */

/* Button Hover State - Absolute Overlay Inside Wrapper */
.wp-block-woocommerce-product-template .product-card .image-wrapper .wp-block-woocommerce-product-button {
  position: absolute !important;
  bottom: 24px !important;
  /* Firmly inside the image wrapper */
  left: 16px !important;
  right: 16px !important;
  z-index: 20 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.wp-block-woocommerce-product-template .product-card .image-wrapper:hover .wp-block-woocommerce-product-button {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.wp-block-woocommerce-product-template .product-card:hover .wp-block-woocommerce-product-button {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Force Add to Cart button to be full width, yellow, black text */
.wp-block-woocommerce-product-template .product-card .wp-block-woocommerce-product-button {
  width: auto !important;
  /* Let left/right absolute positioning dictate width */
}

/* Force intermediate spans (like view cart wrapper) to be full width, EXCEPT when hidden */
.wp-block-woocommerce-product-template .product-card .wp-block-woocommerce-product-button>span:not([hidden]) {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.wp-block-woocommerce-product-template .product-card .wp-block-woocommerce-product-button .add_to_cart_button,
.wp-block-woocommerce-product-template .product-card .wp-block-woocommerce-product-button .button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: var(--brand-primary) !important;
  color: #000000 !important;
  /* Black text on yellow background */
  font-family: var(--font-brand) !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  /* Reference uses rounded rectangle, not full pill */
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  border: none !important;
  line-height: 1 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
}

/* Add the shopping cart icon using CSS before */
.wp-block-woocommerce-product-template .product-card .wp-block-woocommerce-product-button .add_to_cart_button::before,
.wp-block-woocommerce-product-template .product-card .wp-block-woocommerce-product-button .added_to_cart::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>');
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  width: 16px;
  height: 16px;
}

/* Force View Cart button to also be full width and stack */
.wp-block-woocommerce-product-template .product-card .wp-block-woocommerce-product-button .added_to_cart {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  font-family: var(--font-brand) !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
}

/* Fix Title and Price Layout (if they are direct siblings or grouped) */
/* If FSE placed them directly in the product card */
.wp-block-woocommerce-product-template .product-card {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: start !important;
  row-gap: 8px !important;
  column-gap: 16px !important;
}

.wp-block-woocommerce-product-template .product-card .wp-block-woocommerce-product-image {
  grid-column: 1 / -1 !important;
  margin-bottom: 8px !important;
}

.wp-block-woocommerce-product-template .product-card .wp-block-post-title {
  grid-column: 1 / 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  font-family: var(--font-brand) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--text-heading) !important;
}

.wp-block-woocommerce-product-template .product-card .wp-block-woocommerce-product-price {
  grid-column: 2 / 3 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  font-family: var(--font-brand) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--text-heading) !important;
  text-align: right !important;
}

/* If FSE grouped them in an inner container, force that container to flex */
.wp-block-woocommerce-product-template .product-card>.wp-block-group {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
}

.wp-block-woocommerce-product-template .product-card>.wp-block-group .wp-block-post-title {
  flex: 1 !important;
  text-align: left !important;
}

.wp-block-woocommerce-product-template .product-card>.wp-block-group .wp-block-woocommerce-product-price {
  text-align: right !important;
  margin-left: 16px !important;
}

/* Subtitle Injection (e.g. DIGITAL PRODUCT) */
.wp-block-woocommerce-product-template .product-card .wp-block-post-title::after {
  content: "DIGITAL PRODUCT";
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
  opacity: 0.7;
}

/* Ensure the wrapper respects relative bounds */
.wp-block-woocommerce-product-template .product-card .image-wrapper {
  position: relative !important;
  display: block;
}

/* ==========================================================================
   CART PAGE OVERRIDES (Visual Parity Fixes)
   ========================================================================== */

/* Fix Page Header Typography on Cart Page */
.woocommerce-cart .heading-large,
.page-id-7 .heading-large {
  /* Assuming ID 7 or cart body class */
  font-size: clamp(3rem, 6vw, 4.5rem) !important;
}

/* 1. Break the native table layout to allow cards */
.wp-block-woocommerce-cart table.wc-block-cart-items,
.wp-block-woocommerce-cart .wc-block-cart-items tbody,
.wp-block-woocommerce-cart .wc-block-cart-items__row,
.wp-block-woocommerce-cart .wc-block-cart-items__row td {
  display: block !important;
}

/* Hide Native Table Headers */
.wp-block-woocommerce-cart .wc-block-cart-items thead {
  display: none !important;
}

/* 2. Style individual Cart Item Rows as dark cards */
.wp-block-woocommerce-cart .wc-block-cart-items__row {
  background-color: #111111 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  border: 1px solid #222 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 24px !important;
  position: relative !important;
}

/* 3. Internal Item Layout */
/* Image */
.wp-block-woocommerce-cart .wc-block-cart-item__image {
  width: 80px !important;
  padding: 0 !important;
  border: none !important;
  flex-shrink: 0 !important;
}

.wp-block-woocommerce-cart .wc-block-cart-item__image img {
  border-radius: 8px !important;
}

/* Title and Meta */
.wp-block-woocommerce-cart .wc-block-cart-item__product {
  flex: 1 !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.wp-block-woocommerce-cart .wc-block-components-product-name {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
  text-decoration: none !important;
}

/* Hide descriptions and duplicate unit price */
.wp-block-woocommerce-cart .wc-block-components-product-metadata__description,
.wp-block-woocommerce-cart .wc-block-cart-item__prices {
  display: none !important;
}

/* Quantity Selector */
.wp-block-woocommerce-cart .wc-block-cart-item__quantity {
  margin-top: 16px !important;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
  background: #1a1a1a !important;
  border-radius: 8px !important;
  border: none !important;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector button {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
}

/* Total Price & Remove Link */
.wp-block-woocommerce-cart .wc-block-cart-item__total {
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  align-self: stretch !important;
  min-width: 80px !important;
}

.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-formatted-money-amount {
  font-weight: 700 !important;
  color: #ffffff !important;
  font-size: 1.125rem !important;
}

/* Replace native X with Red Trash Icon */
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
  color: #ff4444 !important;
  font-size: 0 !important;
  /* Hide native text/SVG */
  position: absolute !important;
  bottom: 24px !important;
  right: 24px !important;
  opacity: 1 !important;
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23ff4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>') !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link svg {
  display: none !important;
  /* Hide native SVG */
}

/* ==========================================
   4. SUMMARY SIDEBAR REDESIGN
   ========================================== */
/* Prevent sidebar from stretching too tall */
.wp-block-woocommerce-cart .wc-block-cart__sidebar,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block {
  align-self: flex-start !important;
}

.wp-block-woocommerce-cart .wc-block-cart__totals-inner {
  background-color: #111111 !important;
  border-radius: 12px !important;
  padding: 32px !important;
  border: 1px solid #222 !important;
  box-shadow: none !important;
}

/* Replace native CART TOTALS text */
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
  font-size: 0 !important;
  border: none !important;
  margin-bottom: 24px !important;
}

.wp-block-woocommerce-cart .wc-block-cart__totals-title::before {
  content: "SUMMARY" !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.1em !important;
  display: block !important;
  text-transform: uppercase !important;
}

/* Sidebar Rows (Subtotal, Tax, etc) */
.wp-block-woocommerce-cart .wc-block-components-totals-item {
  border-bottom: none !important;
  margin-bottom: 16px !important;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__label {
  color: #888888 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__value {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
}

/* Main Total Row */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item {
  border-top: 1px solid #222 !important;
  padding-top: 24px !important;
  margin-top: 24px !important;
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1.125rem !important;
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--brand-primary) !important;
  font-weight: 800 !important;
  font-size: 1.125rem !important;
}

/* Checkout Button */
.wp-block-woocommerce-cart .wc-block-cart__submit-container {
  margin-top: 32px !important;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button {
  background-color: var(--brand-primary) !important;
  color: #000000 !important;
  border-radius: 8px !important;
  font-family: var(--font-brand) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 16px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border: none !important;
  width: 100% !important;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button span.wc-block-components-button__text {
  font-size: 0 !important;
  /* Hide original text to replace */
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button span.wc-block-components-button__text::after {
  content: "CHECKOUT \2192" !important;
  /* Text and Right Arrow Unicode */
  font-size: 0.875rem !important;
}

/* Trust Badge */
.wp-block-woocommerce-cart .wc-block-cart__submit-container::after {
  content: "Secure Checkout powered by Stripe" !important;
  display: block !important;
  text-align: center !important;
  color: #666666 !important;
  font-size: 0.75rem !important;
  margin-top: 16px !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   CART PAGE MOBILE RESPONSIVENESS FIXES
   ========================================================================== */
@media (max-width: 768px) {

  /* Fix Title Overlap and Line Height */
  .woocommerce-cart .heading-large,
  .page-id-7 .heading-large {
    line-height: 1.1 !important;
    padding-top: 32px !important;
  }

  /* Allow items to wrap and reduce card padding */
  .wp-block-woocommerce-cart .wc-block-cart-items__row {
    flex-wrap: wrap !important;
    padding: 16px !important;
    gap: 16px !important;
  }

  /* Total column drops below image/title */
  .wp-block-woocommerce-cart .wc-block-cart-item__total {
    width: 100% !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-top: 16px !important;
    border-top: 1px dashed #333 !important;
  }

  /* Adjust Trash Icon positioning to align with the new price row layout */
  .wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
    bottom: 16px !important;
    right: 16px !important;
  }
}

/* Force Total Price and Sale Badge to display in a row */
.wp-block-woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}



/* ==========================================================================
   MINI CART (DRAWER) OVERRIDES
   ========================================================================== */

/* Fix global hidden image glitch (WooCommerce native hidden attribute override fix) */
.wc-block-mini-cart-items .wc-block-cart-item__image>img[hidden] {
  display: none !important;
}

/* Reset the table layout for the mini cart rows */
table.wc-block-mini-cart-items,
table.wc-block-mini-cart-items tbody {
  display: block !important;
}

/* Row Container */
.wc-block-mini-cart-items .wc-block-cart-items__row {
  display: flex !important;
  gap: 16px !important;
  align-items: stretch !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #222 !important;
  position: relative !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* 1. Image Column */
.wc-block-mini-cart-items .wc-block-cart-item__image {
  flex-shrink: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.wc-block-mini-cart-items .wc-block-cart-item__image a {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
}

.wc-block-mini-cart-items .wc-block-cart-item__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
}

/* 2. Product Column (Title, Subtitle, Quantity) */
.wc-block-mini-cart-items .wc-block-cart-item__product,
.wc-block-mini-cart-items .wc-block-cart-item__wrap,
.wc-block-mini-cart-items .wc-block-cart-item__quantity {
  position: static !important;
  /* UNTRAP THE TRASH ICON */
}

.wc-block-mini-cart-items .wc-block-cart-item__product {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  /* Keep items at top */
  padding: 0 !important;
  border: none !important;
}

.wc-block-mini-cart-items a.wc-block-components-product-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--text-heading) !important;
  text-decoration: none !important;
  display: block !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

/* Inject Subtitle if available or simulate it */
.wc-block-mini-cart-items .wc-block-components-product-metadata {
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  color: #888888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 8px !important;
}

/* Quantity Selector in Mini Cart */
.wc-block-mini-cart-items .wc-block-components-quantity-selector {
  background: #1a1a1a !important;
  border-radius: 6px !important;
  padding: 2px !important;
  border: none !important;
  display: inline-flex !important;
  width: max-content !important;
  margin-top: auto !important;
}

.wc-block-mini-cart-items .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  padding: 2px !important;
  text-align: center !important;
  width: 24px !important;
  font-size: 0.75rem !important;
}

.wc-block-mini-cart-items .wc-block-components-quantity-selector button {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  padding: 2px 6px !important;
  font-size: 0.875rem !important;
}

/* 3. Total Column (Price only, Trash is absolute) */
.wc-block-mini-cart-items .wc-block-cart-item__total {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  /* Price stays at top right */
  padding: 0 !important;
  border: none !important;
}

/* Trash Icon (Positioned Absolute Bottom Right) */
.wc-block-mini-cart-items .wc-block-cart-item__remove-link {
  color: transparent !important;
  font-size: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  position: static !important;
  /* Let ::before escape to row! */
  z-index: 10 !important;
}

.wc-block-mini-cart-items .wc-block-cart-item__remove-link::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>') !important;
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  position: absolute !important;
  bottom: 40px !important;
  /* Pin to bottom right of row */
  right: 0 !important;
  top: auto !important;
  /* Force override any native top positioning */
}

.wc-block-mini-cart-items .wc-block-cart-item__remove-link:hover::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ff4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>') !important;
}

.wc-block-mini-cart-items .wc-block-cart-item__remove-link svg {
  display: none !important;
}

/* Price */
.wc-block-mini-cart-items .wc-block-cart-item__total-price-and-sale-badge-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
}

.wc-block-mini-cart-items .wc-block-components-product-price,
.wc-block-mini-cart-items .wc-block-formatted-money-amount {
  font-weight: 700 !important;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  margin: 0 !important;
}

/* Remove weird negative margin on notices */
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents .wc-block-components-notices {
  margin: 0 !important;
}

/* ==========================================
   MINI CART FOOTER & BUTTONS
   ========================================== */
.wc-block-components-drawer__content .wc-block-mini-cart__footer {
  padding-top: 24px !important;
}

.wc-block-mini-cart__footer .wc-block-components-totals-item,
.wc-block-components-drawer__content .wc-block-components-totals-item {
  margin-bottom: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__label,
.wc-block-components-drawer__content .wc-block-components-totals-item__label {
  color: #888888 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__value,
.wc-block-components-drawer__content .wc-block-components-totals-item__value {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
}

/* Action Buttons Wrapper */
.wc-block-mini-cart__footer-actions,
.wc-block-components-drawer__content .wc-block-mini-cart__footer-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Go To Checkout (Primary Button) */
.wc-block-mini-cart__footer-actions .components-button.is-primary,
.wc-block-components-drawer__content .components-button.is-primary,
.wc-block-mini-cart__footer-actions .wc-block-mini-cart__checkout-button,
.wc-block-components-drawer__content .wc-block-mini-cart__checkout-button {
  background-color: var(--brand-primary) !important;
  color: #000000 !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 16px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  /* Spread text and arrow */
  align-items: center !important;
  text-decoration: none !important;
  border: none !important;
}

.wc-block-mini-cart__footer-actions .components-button.is-primary span.wc-block-components-button__text,
.wc-block-components-drawer__content .components-button.is-primary span.wc-block-components-button__text {
  font-size: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.wc-block-mini-cart__footer-actions .components-button.is-primary span.wc-block-components-button__text::before,
.wc-block-components-drawer__content .components-button.is-primary span.wc-block-components-button__text::before {
  content: "CHECKOUT" !important;
  font-size: 0.875rem !important;
  flex-grow: 1 !important;
  text-align: left !important;
}

.wc-block-mini-cart__footer-actions .components-button.is-primary span.wc-block-components-button__text::after,
.wc-block-components-drawer__content .components-button.is-primary span.wc-block-components-button__text::after {
  content: "\2192" !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

/* View Cart (Secondary Button) */
.wc-block-mini-cart__footer-actions .components-button.is-secondary,
.wc-block-components-drawer__content .components-button.is-secondary,
.wc-block-mini-cart__footer-actions .wc-block-mini-cart__view-cart-button,
.wc-block-components-drawer__content .wc-block-mini-cart__view-cart-button,
.wc-block-mini-cart__footer-actions .wp-element-button.wc-block-mini-cart__view-cart-button,
.wc-block-components-drawer__content .wp-element-button.wc-block-mini-cart__view-cart-button {
  background-color: transparent !important;
  color: #888888 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 16px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
  font-size: 0.75rem !important;
}

.wc-block-mini-cart__footer-actions .components-button.is-secondary:hover,
.wc-block-components-drawer__content .components-button.is-secondary:hover,
.wc-block-mini-cart__footer-actions .wc-block-mini-cart__view-cart-button:hover,
.wc-block-components-drawer__content .wc-block-mini-cart__view-cart-button:hover,
.wc-block-mini-cart__footer-actions .components-button.is-secondary:focus,
.wc-block-components-drawer__content .components-button.is-secondary:focus,
.wc-block-mini-cart__footer-actions .wc-block-mini-cart__view-cart-button:focus,
.wc-block-components-drawer__content .wc-block-mini-cart__view-cart-button:focus {
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
  border: none !important;
}

/* ============================================
   FAQ — Native wp:details Accordion Styling
   ============================================ */
.wp-block-details {
  border-top: none;
  border-left: none;
  border-right: none;
}

.wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-brand, var(--wp--preset--font-family--heading));
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--text-heading, var(--wp--preset--color--text-heading));
  cursor: pointer;
  transition: color 0.3s;
  list-style: none;
}

.wp-block-details summary::-webkit-details-marker,
.wp-block-details summary::marker {
  display: none;
  content: "";
}

.wp-block-details summary::after {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--border-main, var(--wp--preset--color--border-main));
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  transition: all 0.3s;
  color: var(--text-heading, var(--wp--preset--color--text-heading));
}

.wp-block-details summary:hover {
  color: var(--brand-primary, var(--wp--preset--color--brand-primary));
}

.wp-block-details[open] summary::after {
  content: "\2212";
  background: var(--brand-primary, var(--wp--preset--color--brand-primary));
  color: var(--text-on-brand, var(--wp--preset--color--text-on-brand));
  border-color: var(--brand-primary, var(--wp--preset--color--brand-primary));
}

.wp-block-details > *:not(summary) {
  max-width: 42rem;
}

/* Services Page Tags */
.klay-service-tag {
  padding: 8px 16px;
  border: 1px solid var(--wp--preset--color--border-main);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--text-body);
  margin: 0;
}

/* FSE Portfolio Filters */
.portfolio-filters.wp-block-buttons {
  justify-content: center;
  margin-bottom: 48px;
  row-gap: 12px;
  column-gap: 8px;
}

.portfolio-filter-btn .wp-block-button__link {
  padding: 10px 24px;
  border-radius: 9999px;
  border: 1px solid var(--wp--preset--color--border-main);
  background: transparent;
  color: var(--wp--preset--color--text-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.portfolio-filter-btn:hover .wp-block-button__link,
.portfolio-filter-btn.active .wp-block-button__link {
  background: var(--wp--preset--color--brand-primary);
  color: var(--wp--preset--color--text-on-brand);
  border-color: var(--wp--preset--color--brand-primary);
}

/* Feature Card Icon Styling (Frontend + Site Editor) */
.klay-feature-icon,
.editor-styles-wrapper .klay-feature-icon {
  width: 56px;
  height: 56px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.klay-feature-icon .wp-block-image,
.klay-feature-icon figure,
.editor-styles-wrapper .klay-feature-icon .wp-block-image,
.editor-styles-wrapper .klay-feature-icon figure {
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.klay-feature-icon .wp-block-image img,
.klay-feature-icon .klay-feature-svg img,
.editor-styles-wrapper .klay-feature-icon .wp-block-image img,
.editor-styles-wrapper .klay-feature-icon .klay-feature-svg img {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  display: block;
  object-fit: contain;
}

/* ========================================
   About Page Layout & Team Squad Styles
   ======================================== */

.klay-about-hero,
.editor-styles-wrapper .klay-about-hero {
  padding-top: 180px !important;
}

/* Accent separator styling on values / DNA */
.klay-about-values hr.wp-block-separator.klay-accent-separator,
.editor-styles-wrapper .klay-about-values hr.wp-block-separator.klay-accent-separator {
  margin-top: 16px !important;
  margin-bottom: 24px !important;
  height: 4px !important;
  width: 48px !important;
  max-width: 48px !important;
  background-color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
  border: none !important;
  opacity: 1 !important;
}

/* Team section columns and cards */
.klay-about-team .wp-block-columns,
.editor-styles-wrapper .klay-about-team .wp-block-columns {
  align-items: stretch !important;
}

.klay-team-member,
.editor-styles-wrapper .klay-team-member {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.klay-team-member .wp-block-image,
.editor-styles-wrapper .klay-team-member .wp-block-image,
.klay-team-portrait,
.editor-styles-wrapper .klay-team-portrait {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 3/4 !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  margin: 0 0 24px 0 !important;
  background-color: #14171a !important;
  position: relative !important;
}

.klay-team-member .wp-block-image img,
.editor-styles-wrapper .klay-team-member .wp-block-image img,
.klay-team-portrait img,
.editor-styles-wrapper .klay-team-portrait img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 3/4 !important;
  object-fit: cover !important;
  display: block !important;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: filter 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              -webkit-filter 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.klay-team-member:hover .wp-block-image img,
.editor-styles-wrapper .klay-team-member:hover .wp-block-image img,
.klay-team-portrait:hover img,
.editor-styles-wrapper .klay-team-portrait:hover img {
  filter: grayscale(0%) !important;
  -webkit-filter: grayscale(0%) !important;
  transform: scale(1.04);
}

.klay-team-member h3,
.editor-styles-wrapper .klay-team-member h3 {
  font-family: var(--wp--preset--font-family--heading, sans-serif) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  color: var(--wp--preset--color--text-heading, #ffffff) !important;
  line-height: 1.2 !important;
}

.klay-team-member .klay-team-role,
.editor-styles-wrapper .klay-team-member .klay-team-role,
.klay-team-member p.has-brand-primary-color,
.editor-styles-wrapper .klay-team-member p.has-brand-primary-color {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--wp--preset--color--brand-primary, #d9fb06) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.klay-team-member .klay-team-bio,
.editor-styles-wrapper .klay-team-member .klay-team-bio,
.klay-team-member p.has-text-body-color,
.editor-styles-wrapper .klay-team-member p.has-text-body-color {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--wp--preset--color--text-body, rgba(255, 255, 255, 0.7)) !important;
  margin-top: 0 !important;
}