/* =============================================================================
   Beijaflore Design — Custom Component CSS
   =============================================================================
   ONLY rules for custom components that Divi modules don't have settings for.
   All standard design (colors, fonts, sizes, padding, backgrounds) is controlled
   via native Divi module attributes — editable in the Visual Builder.

   This file contains:
   1. CSS variables (design tokens)
   2. Font import
   3. Custom carousel track behavior (flex scroll, grid layout)
   4. Product card hover effects (scale, border-color)
   5. Favorite button styling
   6. Scroll buttons + edge fades
   7. Search bar input styling
   8. Header icons (cart badge, account)
   9. Social link pills
   ============================================================================= */

/* ── Google Fonts: Noto Sans + Anek (from beijafloredesign.json) ────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800&family=Anek:wght@400;500;600;700;800&display=swap');

/* ── Root tokens — mirror tokens.css vars as fallback ────────────────────── */
:root {
  --bf-primary: var(--color-primary, #4169E1);
  --bf-primary-dark: var(--color-primary-dark, #27408B);
  --bf-primary-light: var(--color-primary-light, #B0C4DE);
  --bf-background: var(--color-background, #ffffff);
  --bf-surface: var(--color-surface, #ffffff);
  --bf-foreground: var(--color-foreground, #111827);
  --bf-muted: var(--color-muted, #6b7280);
  --bf-card: var(--color-card, #f9fafb);
  --bf-border: var(--color-border, #e5e7eb);
  --bf-heading-font: var(--font-heading, 'Anek', 'Noto Sans', system-ui, sans-serif);
  --bf-sans-font: var(--font-sans, 'Noto Sans', 'Anek', system-ui, sans-serif);
  --bf-hero-bg: var(--hero-background, linear-gradient(to bottom right, #4169E115, #4169E108, #4169E115));
  --bf-hero-dots: var(--hero-dots, #4169E1);
  /* Source HeroBanner.tsx uses from-primary/30 via-primary/20 to-primary/30 — not the theme config */
  --bf-hero-bg-rendered: linear-gradient(to bottom right, rgba(65,105,225,0.30), rgba(65,105,225,0.20), rgba(65,105,225,0.30));
}

/* =============================================================================
   DIVI DEFAULT RESETS — remove Divi's default styling
   These use !important because Divi's own CSS uses !important on these properties.
   These are RESETS only (removing unwanted defaults), NOT design values.
   All design values (colors, fonts, sizes, padding) are in Divi module attributes.
   ============================================================================= */

/* Remove Divi text shadows (Divi adds these by default) */
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3,
.et_pb_text h4, .et_pb_text h5, .et_pb_text h6 {
  text-shadow: none !important;
}

/* Remove Divi button ::after icon (we set button_use_icon="off" but Divi still adds it) */
body.et_pb_button_helper_class .et_pb_button:after {
  display: none !important;
}

/* Remove Divi image borders/shadows */
.et_pb_image img {
  border: none !important;
  box-shadow: none !important;
}

/* Remove Divi page container default padding (we control padding via section attributes) */
#page-container { padding-top: 0 !important; padding-bottom: 0 !important; }
#et-main-area { padding: 0 !important; }
#main-content { padding: 0 !important; }

/* Remove Divi builder inner content spacing */
.et_builder_inner_content { margin: 0 !important; padding: 0 !important; }

/* Remove Divi Theme Builder header/footer extra padding */
.et-l--header, .et-l--footer { padding: 0 !important; margin: 0 !important; }
.et-l--header .et_pb_section, .et-l--footer .et_pb_section { padding: 0 !important; }

/* Body font + color defaults (modules override these per-element) */
body {
  font-family: var(--bf-sans-font) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  background-color: var(--bf-background) !important;
  color: var(--bf-foreground) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Link defaults */
a { color: var(--bf-primary); text-decoration: none; }
a:hover { color: var(--bf-primary-dark); }

/* Paragraph defaults */
p { margin: 0; padding: 0; }

/* Heading defaults (modules override with header_font, header_font_size, etc.) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--bf-heading-font) !important;
  color: var(--bf-foreground);
  margin: 0;
  padding: 0;
}

/* Remove WooCommerce star ratings (we use custom product cards) */
.woocommerce .star-rating { display: none !important; }

/* =============================================================================
   HERO SECTION — animated dot pattern + gradient background
   Source: HeroBanner.tsx has radial-gradient dots with wave animation
   ============================================================================= */
.bitbeam-hero {
  position: relative !important;
  overflow: hidden !important;
  min-height: 500px !important;
  height: 500px !important;
  background: var(--bf-hero-bg-rendered) !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 64px !important;
  padding-bottom: 48px !important;
}

/* Animated dot pattern overlay */
.bitbeam-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: -80px !important;
  background-image: radial-gradient(circle at 2px 2px, var(--bf-hero-dots) 1.5px, transparent 0) !important;
  background-size: 24px 24px !important;
  opacity: 0.25 !important;
  animation: bf-wave 20s ease-in-out infinite !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

@keyframes bf-wave {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

/* Hero content above the pattern */
.bitbeam-hero > .et_pb_row,
.bitbeam-hero > div,
.bitbeam-hero .et_pb_module {
  position: relative !important;
  z-index: 10 !important;
}

/* Hero heading */
.bitbeam-hero h1 {
  font-family: var(--bf-heading-font) !important;
  font-size: 3.5rem !important;
  font-weight: 700 !important;
  color: var(--bf-foreground) !important;
  line-height: 1.1 !important;
  margin-bottom: 1.5rem !important;
}

/* Hero description */
.bitbeam-hero p {
  font-size: 1.25rem !important;
  color: var(--bf-muted) !important;
  line-height: 1.6 !important;
  max-width: 42rem !important;
  margin-bottom: 2rem !important;
}

/* Hero CTA button */
.bitbeam-hero .et_pb_button,
.bitbeam-hero a.et_pb_button,
.bitbeam-hero .et_pb_promo_button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: var(--bf-primary) !important;
  color: #fff !important;
  padding: 1rem 2rem !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border: none !important;
  transition: all 0.3s ease !important;
  transform: scale(1) !important;
}

.bitbeam-hero .et_pb_button:hover,
.bitbeam-hero a.et_pb_button:hover,
.bitbeam-hero .et_pb_promo_button:hover {
  background: var(--bf-primary-dark) !important;
  transform: scale(1.05) !important;
}

/* Bottom fade */
.bitbeam-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 128px !important;
  background: linear-gradient(to top, var(--bf-background), transparent) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* =============================================================================
   HEADER — scroll-based opacity, logo, search, cart, nav mega menu
   Source: Header.tsx with scroll gradient, Navigation.tsx with mega menu
   ============================================================================= */
.bitbeam-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-bottom 0.3s ease !important;
  /* Source Header.tsx: at scrollY=0, surface 20%/10% opacity — nearly transparent */
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bf-surface) 20%, transparent),
    color-mix(in srgb, var(--bf-surface) 10%, transparent)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}

/* Source: after scrolling, header becomes solid white + blur + border */
.bitbeam-header.scrolled {
  background: var(--bf-surface) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--bf-border) !important;
}

/* Header section padding — source uses py-4 (16px), not 12px */
.bitbeam-header.et_pb_section {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Header inner layout — source: py-4, flex items-center justify-between */
.bitbeam-header .et_pb_row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-height: 32px !important;
}

/* Header section — source: py-4 = 16px top + 16px bottom = 32px padding + 32px content = 64px total */
.bitbeam-header,
.bitbeam-header.et_pb_section,
section.bitbeam-header {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin: 0 !important;
}
.bitbeam-header .et_pb_row {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
.bitbeam-header .et_pb_column {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Force menu module to not add extra height */
.bitbeam-header .et_pb_menu,
.bitbeam-header .et_pb_menu_inner_container,
.bitbeam-header .et_pb_menu__wrap,
.bitbeam-header .et_pb_menu__menu,
.bitbeam-header .et-menu-nav,
.bitbeam-header .et-menu.nav {
  height: auto !important;
  min-height: 0 !important;
  max-height: 48px !important;
  line-height: 1.5 !important;
  align-items: center !important;
}

/* Menu list items — remove extra margins */
.bitbeam-header .et-menu.nav li {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Force button to not stretch */
.bitbeam-header .et_pb_button_module_wrapper {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  max-height: 48px !important;
}
.bitbeam-header .et_pb_button {
  height: auto !important;
  max-height: 48px !important;
  line-height: 1.5 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Force all header columns to align center and not stretch */
.bitbeam-header .et_pb_column {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  max-height: 48px !important;
}

/* Header row — force compact height */
.bitbeam-header .et_pb_row {
  max-height: 48px !important;
  align-items: center !important;
}

/* Header logo + company name */
.bitbeam-header .et_pb_image {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.bitbeam-header .et_pb_image img {
  height: 32px !important;
  width: 32px !important;
  max-height: 32px !important;
  max-width: 32px !important;
}

.bitbeam-header .et_pb_text:first-of-type {
  font-family: var(--bf-heading-font) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--bf-primary) !important;
  white-space: nowrap !important;
}

/* Header navigation menu — horizontal with mega menu */
.bitbeam-header .et_pb_menu {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bitbeam-header .et_pb_menu nav,
.bitbeam-header .et-menu,
.bitbeam-header ul#et-main-menu {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bitbeam-header .et_pb_menu nav ul li,
.bitbeam-header .et-menu li,
.bitbeam-header ul#et-main-menu li {
  list-style: none !important;
  position: relative !important;
}

.bitbeam-header .et_pb_menu nav ul li a,
.bitbeam-header .et-menu li a,
.bitbeam-header ul#et-main-menu li a {
  font-family: var(--bf-sans-font) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--bf-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease, background 0.2s ease !important;
  padding: 8px 12px !important;
  border-radius: 0.5rem !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.bitbeam-header .et_pb_menu nav ul li a:hover,
.bitbeam-header .et-menu li a:hover,
.bitbeam-header ul#et-main-menu li a:hover {
  color: var(--bf-primary) !important;
  background: var(--bf-card) !important;
}

/* Featured/CTA nav item (contact button style) */
.bitbeam-header .et_pb_menu nav ul li.featured a,
.bitbeam-header .et-menu li.featured a {
  background: var(--bf-primary) !important;
  color: var(--bf-surface) !important;
  border-radius: 9999px !important;
  padding: 0.375rem 1rem !important;
  font-size: 0.75rem !important;
}
.bitbeam-header .et_pb_menu nav ul li.featured a:hover,
.bitbeam-header .et-menu li.featured a:hover {
  background: var(--bf-primary-dark) !important;
}

/* Mega menu dropdown — source Navigation.tsx: w-56 bg-surface rounded-lg shadow-lg border */
.bitbeam-header .et_pb_menu nav ul li ul,
.bitbeam-header .et-menu li ul {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 4px !important;
  width: 14rem !important;
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
  padding: 8px 0 !important;
  z-index: 50 !important;
  display: none !important;
  flex-direction: column !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

.bitbeam-header .et_pb_menu nav ul li:hover > ul,
.bitbeam-header .et-menu li:hover > ul {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hide submenu children from being shown inline in the main menu */
.bitbeam-header .et_pb_menu nav > ul > li > ul > li {
  display: block !important;
}

/* Only show top-level menu items in the main bar */
.bitbeam-header .et_pb_menu nav > ul > li {
  display: inline-flex !important;
}

/* Sub-menu items should only appear as dropdown children, not in the main row */
.bitbeam-header .et_pb_menu nav > ul > li > ul {
  position: absolute !important;
  display: none !important;
}

.bitbeam-header .et_pb_menu nav > ul > li:hover > ul {
  display: flex !important;
}

/* Submenu links — source: block px-4 py-2 text-sm text-muted hover:bg-card hover:text-primary */
.bitbeam-header .et_pb_menu nav ul li ul li a,
.bitbeam-header .et-menu li ul li a {
  display: block !important;
  padding: 8px 16px !important;
  font-size: 0.875rem !important;
  color: var(--bf-muted) !important;
  border-radius: 0 !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.bitbeam-header .et_pb_menu nav ul li ul li a:hover,
.bitbeam-header .et-menu li ul li a:hover {
  background: var(--bf-card) !important;
  color: var(--bf-primary) !important;
}

/* Header search input */
.bitbeam-search input {
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  font-family: var(--bf-sans-font) !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
  background: var(--bf-card) !important;
  color: var(--bf-foreground) !important;
}
.bitbeam-search input:focus {
  border-color: var(--bf-primary) !important;
}
.bitbeam-search input::placeholder {
  color: var(--bf-muted) !important;
}

/* Header icons — cart + account */
.bitbeam-header-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 1rem !important;
  font-size: 1.25rem !important;
}
.bitbeam-header-icons a {
  color: var(--bf-foreground) !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color 0.2s ease !important;
}
.bitbeam-header-icons a:hover {
  color: var(--bf-primary) !important;
}
.bitbeam-cart-icon .cart-count {
  font-size: 0.75rem !important;
  background: var(--bf-primary) !important;
  color: #fff !important;
  border-radius: 50% !important;
  padding: 2px 6px !important;
  position: absolute !important;
  top: -4px !important;
  right: -8px !important;
}

/* =============================================================================
   CTA SECTION — blue background with white text
   Source: CTA section with primary background
   ============================================================================= */
.bitbeam-cta {
  background: var(--bf-primary) !important;
  color: #fff !important;
  text-align: center !important;
  padding: 4rem 1rem !important;
}

.bitbeam-cta h2,
.bitbeam-cta h3 {
  color: #fff !important;
  font-family: var(--bf-heading-font) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

.bitbeam-cta p {
  color: rgba(255,255,255,0.9) !important;
  font-size: 1.125rem !important;
  margin-bottom: 2rem !important;
}

.bitbeam-cta .et_pb_button,
.bitbeam-cta a.et_pb_button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: #fff !important;
  color: var(--bf-primary) !important;
  padding: 0.875rem 2rem !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.bitbeam-cta .et_pb_button:hover,
.bitbeam-cta a.et_pb_button:hover {
  background: var(--bf-primary-light) !important;
  transform: scale(1.05) !important;
}

/* =============================================================================
   1. CAROUSEL TRACK — horizontal scroll behavior
   Divi has no module setting for horizontal flex scroll
   ============================================================================= */
.bb-product-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.bb-product-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 24px 0;
}
.bb-product-carousel-track::-webkit-scrollbar { display: none; }

/* =============================================================================
   2. PRODUCT CARD — hover effects + group styling
   Source: ProductCard with group-hover:scale-105, group-hover:text-primary
   ============================================================================= */
.bb-product-carousel-item,
.bitbeam-product-carousel .group {
  flex: 0 0 256px;
  width: 256px;
  cursor: pointer;
  text-decoration: none;
  display: block;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding-bottom: 16px;
  border-radius: 0.5rem;
  overflow: hidden;
}
.bb-product-carousel-item:hover,
.bitbeam-product-carousel .group:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.bb-product-carousel-item img,
.bitbeam-product-carousel .group img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  background: var(--bf-card);
  border-radius: 8px;
  border: 1px solid var(--bf-border);
  padding: 24px;
  transition: border-color 0.2s ease, transform 0.3s ease;
}
.bb-product-carousel-item:hover img,
.bitbeam-product-carousel .group:hover img {
  border-color: var(--bf-primary);
  transform: scale(1.05);
}
.bb-product-carousel-item:hover h3,
.bitbeam-product-carousel .group:hover h3 {
  color: var(--bf-primary);
}

/* Product card text styling */
.bitbeam-product-carousel .group h3 {
  font-family: var(--bf-sans-font) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  color: var(--bf-foreground) !important;
  margin-top: 0.25rem !important;
  transition: color 0.2s ease !important;
}

.bitbeam-product-carousel .group p {
  font-size: 0.875rem !important;
  color: var(--bf-muted) !important;
  margin-top: 0.25rem !important;
}

/* Price styling */
.bitbeam-product-carousel .group p:last-child,
.bb-product-carousel-item .font-bold {
  font-family: var(--bf-heading-font) !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  color: var(--bf-primary) !important;
  margin-top: 0.5rem !important;
}

/* Category label */
.bitbeam-product-carousel .group span:first-child {
  font-size: 0.75rem !important;
  color: var(--bf-muted) !important;
  text-transform: none !important;
}

/* Section heading */
.bitbeam-product-carousel h2 {
  font-family: var(--bf-heading-font) !important;
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  color: var(--bf-foreground) !important;
}

/* "Bekijk alles" link */
.bitbeam-product-carousel a[href*="/producten"] {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--bf-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.bitbeam-product-carousel a[href*="/producten"]:hover {
  color: var(--bf-primary-dark) !important;
}

/* Line clamp for title and description */
.bb-product-carousel-item h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bb-product-carousel-desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* =============================================================================
   3. FAVORITE BUTTON — custom heart icon
   No Divi module for this
   ============================================================================= */
.bb-favorite-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(255,255,255,0.8);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}
.bb-favorite-btn:hover {
  background: rgba(255,255,255,1);
}
.bb-favorite-btn svg {
  width: 16px;
  height: 16px;
  color: #9ca3af;
  transition: color 0.2s ease;
}
.bb-favorite-btn:hover svg {
  color: #ef4444;
}

/* =============================================================================
   4. SCROLL BUTTONS + EDGE FADES
   Custom carousel navigation — no Divi equivalent
   ============================================================================= */
.bb-product-carousel-wrap { position: relative; }
.bb-product-carousel-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bf-surface);
  border: 1px solid var(--bf-primary);
  color: var(--bf-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.bb-product-carousel-scroll-btn:hover {
  background: var(--bf-primary);
  color: #fff;
}
.bb-product-carousel-scroll-btn.bb-scroll-left { left: 0; }
.bb-product-carousel-scroll-btn.bb-scroll-right { right: 0; }
.bb-product-carousel-scroll-btn svg {
  width: 20px;
  height: 20px;
}
.bb-product-carousel-fade-left,
.bb-product-carousel-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 10;
  pointer-events: none;
}
.bb-product-carousel-fade-left {
  left: 0;
  background: linear-gradient(to right, var(--bf-surface), transparent);
}
.bb-product-carousel-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--bf-surface), transparent);
}

/* =============================================================================
   5. GRID LAYOUT — for Merchandise section
   Divi has no grid setting for custom modules
   ============================================================================= */
.bb-layout-grid .bb-product-carousel-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  overflow: visible;
  padding: 16px 0;
}
.bb-layout-grid .bb-product-carousel-item {
  flex: none;
  width: 100%;
}
@media (max-width: 980px) {
  .bb-layout-grid .bb-product-carousel-track {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 767px) {
  .bb-layout-grid .bb-product-carousel-track {
    grid-template-columns: repeat(2, 1fr);
  }
  .bb-layout-grid .bb-product-carousel-item {
    flex: none;
    width: 100%;
  }
}

/* =============================================================================
   6. SEARCH BAR — custom input styling
   No Divi module for search inputs
   ============================================================================= */
.bitbeam-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--bf-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--bf-sans-font);
  outline: none;
  transition: border-color 0.2s ease;
}
.bitbeam-search input:focus {
  border-color: var(--bf-primary);
}

/* =============================================================================
   7. HEADER ICONS — cart badge + account
   No Divi module for cart badges
   ============================================================================= */
.bitbeam-header-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  font-size: 20px;
}
.bitbeam-header-icons a {
  color: var(--bf-foreground);
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}
.bitbeam-header-icons a:hover {
  color: var(--bf-primary);
}
.bitbeam-cart-icon .cart-count {
  font-size: 12px;
  background: var(--bf-primary);
  color: #fff;
  border-radius: 50%;
  padding: 2px 6px;
  position: absolute;
  top: -4px;
  right: -8px;
}

/* =============================================================================
   8. SOCIAL LINK PILLS
   No Divi module for social link pills
   ============================================================================= */
.bitbeam-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.bitbeam-social-links a {
  font-size: 12px;
  color: var(--bf-muted);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--bf-border);
  border-radius: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.bitbeam-social-links a:hover {
  color: var(--bf-primary);
  border-color: var(--bf-primary);
}

/* =============================================================================
   9. FOOTER — gradient bg, 4-col grid, brand, products, contact, socials
   Source: Footer.tsx with from-primary/10 to-surface, border-primary/30
   ============================================================================= */
.bitbeam-footer {
  background: linear-gradient(to top, rgba(65,105,225,0.10), var(--bf-surface)) !important;
  border-top: 4px solid rgba(65,105,225,0.30) !important;
  padding: 3rem 1rem !important;
}

/* Footer grid layout */
.bitbeam-footer .et_pb_row {
  max-width: 1200px !important;
  width: 90% !important;
  margin: 0 auto !important;
}

/* Footer columns */
.bitbeam-footer .et_pb_column {
  padding: 1rem !important;
}

/* Footer headings */
.bitbeam-footer h3,
.bitbeam-footer h4 {
  font-family: var(--bf-sans-font) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--bf-foreground) !important;
  margin-bottom: 1rem !important;
}

/* Footer links */
.bitbeam-footer .et_pb_text a {
  display: block !important;
  padding: 0.25rem 0 !important;
  font-size: 0.875rem !important;
  color: var(--bf-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.bitbeam-footer .et_pb_text a:hover {
  color: var(--bf-primary) !important;
}

/* Footer brand text */
.bitbeam-footer .et_pb_text p {
  font-size: 0.875rem !important;
  color: var(--bf-muted) !important;
  line-height: 1.5 !important;
  margin-bottom: 0.5rem !important;
}

/* Footer bottom bar */
.bitbeam-footer .et_pb_section:last-child {
  border-top: 1px solid var(--bf-border) !important;
  padding-top: 2rem !important;
  margin-top: 2rem !important;
}

/* Footer "Powered by" */
.bitbeam-footer .et_pb_text a[href*="hybridin"],
.bitbeam-footer .et_pb_text a[href*="grn.cloud"] {
  display: inline !important;
  color: var(--bf-primary) !important;
}
.bitbeam-footer .et_pb_text a[href*="hybridin"]:hover,
.bitbeam-footer .et_pb_text a[href*="grn.cloud"]:hover {
  text-decoration: underline !important;
}

/* =============================================================================
   10. RESPONSIVE — product cards on mobile
   ============================================================================= */
@media (max-width: 767px) {
  .bb-product-carousel-item {
    flex: 0 0 calc(50% - 8px);
    width: calc(50% - 8px);
  }
  .bb-product-carousel-item img {
    padding: 12px;
  }
}