/* === HIDE SAVED TEMPLATES === */
/* Hide the saved template copy to prevent duplication */
template.s_embed_code_saved {
  display: none !important;
}

/* === GLOBAL BASE OVERRIDES === */
/* Odoo sets `body { background-color: white; }` in web.assets_frontend.
   We want a sitewide dark skin, so hard-override the background on the actual root containers.
*/
html, body, #wrapwrap, main {
  background-color: #000 !important;
  color: #fff !important;
}

/* Hard pin the page canvas to black (Odoo website wrapper) */
#wrapwrap,
#wrapwrap > main,
#wrapwrap main {
  background: #000 !important;
  background-color: #000 !important;
}

/* Keep font + spacing defaults here (separate from background overrides). */
body:not(.o_edit_mode),
#wrapwrap:not(.o_edit_mode),
main:not(.o_edit_mode) {
  font-family: Arial, Helvetica, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* === TYPOGRAPHY (SITEWIDE BASE) ===
   Standard: Premium editorial baseline.
   Odoo/Bootstrap computes body text via these variables.
   Setting them fixes "Normal" text everywhere without selector fights.
*/
:root {
  --bs-body-font-size: 18px;
  --bs-body-line-height: 1.7;
}

#wrapwrap main {
  padding: 0 !important;
  margin: 0 !important;
}

/* === MIGRATED FROM HOMEPAGE base_css_js EMBED (2026-05-18) ===
   Goal: move "make the site look like TFT" styling out of page-level embed code and into the
   canonical stylesheet, so removing the embed styles does NOT break the homepage.
*/

/* Reset layout spacing (global) */
body, #wrapwrap, main {
  margin: 0 !important;
  padding: 0 !important;
  background: black !important;
  color: white !important;
}

section, .s_embed_code, .s_text_block, .s_title {
  padding: 0 !important;
  background: black !important;
  color: white !important;
}

/* Button styles used by the embedded homepage */
.btn-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 2rem;
  height: 2.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: black;
  background-color: #f59e0b;
  border: none;
  border-radius: 0.375rem;
  line-height: 1.5rem;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
  cursor: pointer;
}

.btn-inline:hover {
  background-color: #d97706;
}

.btn-inline i {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

/* NOTE (2026-05-18): We are migrating layout control out of the homepage embed and into this
   canonical stylesheet. Start with "no surprise" defaults: remove Odoo's section vertical padding
   so embedded full-bleed sections can truly go edge-to-edge. We'll re-introduce spacing intentionally
   per section later (via classes or more specific selectors). */
section {
  padding: 0 !important;
}

.container, .row, .col, h1, h2, h3, h4, h5, h6, p {
  color: white !important;
}

.s_title, .s_text_block, .s_embed_code {
  background-color: black !important;
  color: white !important;
}

.o_cc, .o_colored_level, header, .s_title, .s_text_block {
  box-shadow: none !important;
  border: none !important;
}

/* === AGGRESSIVE ODOO NAVIGATION HIDING === */
/* Hide ALL Odoo navigation elements with maximum specificity */
#wrapwrap header#top,
#wrapwrap header.o_top_fixed_element,
#wrapwrap .o_main_navbar,
#wrapwrap .o_header_disappears,
#wrapwrap .o_header_sales_three_top,
#wrapwrap nav.o_colored_level,
#wrapwrap #o_main_nav,
#wrapwrap footer#footer,
header#top,
header.o_top_fixed_element,
.o_main_navbar,
.o_header_disappears,
.o_header_sales_three_top,
nav.o_colored_level,
#o_main_nav,
footer#footer,
.o_header_mobile,
.o_header_mobile_buttons_wrap,
.top_menu,
#top_menu,
.o_wsale_my_cart,
.o_wsale_my_wish,
.o_no_autohide_item,
.navbar,
.navbar-brand,
.navbar-nav,
.navbar-toggler,
.offcanvas,
#top_menu_collapse_mobile {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* === TYPOGRAPHY === */
.text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}
.fw-bold {
  letter-spacing: -0.025em !important;
}
.display-4 {
  font-size: 3rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}
.lead {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  color: #d4d4d8 !important;
}
.text-amber-400 {
  color: #fbbf24 !important;
}
.text-zinc-300 {
  color: #d4d4d8 !important;
}

/* === CUSTOM NAVIGATION STYLING === */
/* Scope navigation styles to only the embedded version */
.s_embed_code_embedded #custom-navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  transition: all 0.3s ease !important;
  padding: 1.5rem 0 !important;
  background-color: transparent !important;
  width: 100% !important;
}

#custom-navbar .container {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 1.5rem !important;
  align-items: center !important;
  height: 80px !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

#custom-navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(8px) !important;
}

/* Column spans for navigation grid */
#custom-navbar .col-span-3 {
  grid-column: span 3 !important;
}

#custom-navbar .col-span-6 {
  grid-column: span 6 !important;
}

#custom-navbar .col-span-3:last-child {
  grid-column: span 3 !important;
}

/* Navigation link styling */
#custom-navbar .nav-link {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: white !important;
  transition: color 0.2s ease !important;
  padding: 0.5rem 1rem !important;
  text-decoration: none !important;
}

#custom-navbar .nav-link:hover {
  color: #fbbf24 !important;
}

/* Brand text styling */
#custom-navbar .text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* Logo sizing */
#custom-navbar .h-10 {
  height: 2.5rem !important;
  width: auto !important;
}

/* Button styling */
#custom-navbar button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  height: 2.5rem !important;
  padding: 0.5rem 1.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  border-radius: 0.375rem !important;
  border: none !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
}

#custom-navbar button:hover {
  transform: none !important;
  box-shadow: none !important;
}

#custom-navbar button:focus,
#custom-navbar button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Mobile menu button visibility - FIXED */
#custom-navbar .md\:hidden {
  display: none !important;
}

@media (min-width: 768px) {
  #custom-navbar .md\:hidden {
    display: none !important; /* Keep hidden on desktop */
  }
  
  #custom-navbar .md\:flex {
    display: flex !important;
  }
  
  #custom-navbar nav.hidden {
    display: flex !important;
  }
}

/* Mobile menu button - target directly */
#custom-navbar button[onclick="toggleMobileMenu()"] {
  display: none !important;
}

@media (max-width: 767px) {
  #custom-navbar button[onclick="toggleMobileMenu()"] {
    display: inline-flex !important;
  }
  
  #custom-navbar nav.hidden {
    display: none !important;
  }
}

/* Mobile menu styling - scoped to embedded version */
.s_embed_code_embedded .mobile-menu {
  position: fixed !important;
  inset: 0 !important;
  z-index: 50 !important;
  background-color: black !important;
  display: none !important;
  padding: 1.5rem 0 !important;
}

.s_embed_code_embedded .mobile-menu.active {
  display: block !important;
}

.mobile-menu .container {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.mobile-menu .nav-link {
  font-size: 1.5rem !important;
  padding: 1rem 0 !important;
  display: block !important;
}

.mobile-menu .btn {
  width: 100% !important;
  margin-top: 1rem !important;
}

/* === HERO SECTION === */
.hero-section {
  position: relative !important;
  min-height: 800px !important;
  width: 100% !important;
  background-color: transparent !important;
  padding-top: 80px !important; /* Account for fixed header */
}

.hero-section .container {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 1.5rem !important;
  align-items: center !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.hero-content {
  position: relative !important;
  z-index: 1 !important;
  grid-column: span 12 !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.hero-content > * {
  margin-bottom: 2rem !important;
}

@media (min-width: 992px) {
  .hero-content {
    grid-column: span 6 !important;
  }
}

.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background-image: url('/images/hero-bg.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.5 !important;
}

.hero-gradient {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.9), black) !important;
}

/* Typography adjustments */
.display-4 {
  font-size: 3rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 2rem !important;
}

.lead {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  color: #d4d4d8 !important;
  margin-bottom: 2rem !important;
}

/* Pill tag styling */
.rounded-pill {
  border-radius: 50rem !important;
}
.border {
  border: 1px solid currentColor !important;
}
.border-zinc-800 {
  border-color: #27272a !important;
}
.bg-dark {
  background-color: #0f0f0f !important;
}

.hero-content .rounded-pill {
  border-radius: 50rem !important;
  border: 1px solid #27272a !important;
  background-color: rgba(24, 24, 27, 0.8) !important;
  color: #fbbf24 !important;
  display: inline-block !important;
  padding: 0.5rem 1.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 2rem !important;
}

/* === FIXED BUTTON STYLING === */
.btn-inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  height: 2.75rem !important;
  padding: 1.5rem 2rem !important;
  background-color: #f59e0b !important;
  color: black !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border-radius: 0.375rem !important;
  border: none !important;
  transition: all 0.2s ease-in-out !important;
  text-decoration: none !important;
  cursor: pointer !important;
  line-height: 1.5rem !important;
}

.btn-inline:hover {
  background-color: #d97706 !important;
  color: black !important;
  transform: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.btn-inline:focus,
.btn-inline:active,
.btn-inline:focus:not(:active),
.btn-inline:focus-visible {
  transform: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background-color: #f59e0b !important;
  color: black !important;
}

.btn-inline:active {
  transform: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: #d97706 !important;
  color: black !important;
}

/* Arrow icon styles */
.btn-inline i {
  width: 1.25rem !important;
  height: 1.25rem !important;
  transition: transform 0.2s ease-in-out !important;
}

/* Button group layout */
.hero-section .btn-group {
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

/* Utility classes */
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.d-none { display: none !important; }

@media (min-width: 768px) {
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-none { display: none !important; }
}

/* === FOOTER (Optional Override) === */
footer {
  background-color: black;
  border-top: 1px solid #27272a;
  padding: 3rem 0;
}
footer h4 {
  color: white;
  font-weight: 700;
  margin-bottom: 1rem;
}
footer p, footer a, footer .text-muted {
  color: #a1a1aa;
}
footer a:hover {
  color: #fbbf24;
}

/* === SCROLL TO TOP BUTTON === */
#o_footer_scrolltop {
  background-color: #f59e0b;
  border-color: #f59e0b;
  color: black;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}
#o_footer_scrolltop:hover {
  background-color: #d97706;
  border-color: #d97706;
  transform: translateY(-2px);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .text-xl {
    font-size: 1rem !important;
  }
  
  .nav-link {
    font-size: 1rem !important;
  }
  
  .btn-inline {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  .hero-section {
    height: auto !important;
    min-height: 600px !important;
  }
  
  #custom-navbar .container {
    height: auto !important;
    padding: 1rem 1.5rem !important;
  }
}

/* Utility classes */
.h-10 {
  height: 2.5rem !important;
}

/* Logo styles */
img.logo {
  height: 2.5rem !important;
  width: auto !important;
}

/* Add responsive padding utilities */
@media (min-width: 768px) {
  .px-md-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

@media (min-width: 992px) {
  .px-lg-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

/* Right column layout fixes */
.hero-section .col-lg-6.d-md-block {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 600px !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero-section .floating-consult-box {
  max-width: 320px !important;
  z-index: 3 !important;
}

.hero-section img {
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
}

/* === ADDITIONAL BOOTSTRAP OVERRIDES === */
/* Ensure our custom styles take precedence over Bootstrap */
.btn-inline.btn {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: black !important;
}

.btn-inline.btn:hover,
.btn-inline.btn:focus,
.btn-inline.btn:active {
  background-color: #d97706 !important;
  border-color: #d97706 !important;
  color: black !important;
  box-shadow: none !important;
}

/* Override Bootstrap's focus styles */
.btn-inline:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure buttons don't inherit Bootstrap's default button styles */
button.btn-inline,
a.btn-inline {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* ===============================
   TFF Amber Button Fix Pack
   ChatGPT's comprehensive solution
   =============================== */

/* 0) Single source of truth for amber */
:root { 
  --tft-amber-500: #f59e0b; 
  --tft-amber-600: #d97706; 
}

/* TFT NAV (tft-nav) — migrate button styling first (2026-05-18)
   This is the nav system actually used on the homepage (updated_navigation.html).
*/
#tft-nav .tft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
  height: 2.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
}
#tft-nav .tft-btn-outline {
  border: 1px solid #27272a;
  color: #fff;
  background: transparent;
}
#tft-nav .tft-btn-outline:hover {
  background: #18181b;
  color: #fbbf24;
  border-color: #f59e0b;
}
#tft-nav .tft-btn-amber {
  background: #f59e0b;
  color: #000;
  border: none;
}
#tft-nav .tft-btn-amber:hover {
  background: #d97706;
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* === MIGRATED FROM HOMEPAGE EMBED (tft-amber-final) — 2026-05-18 ===
   Keep this exact selector because it was the "last mile" fix that made the custom navbar
   buttons render correctly under Odoo/Bootstrap button rules.
*/
#custom-navbar .bg-amber-500 {
  --bs-btn-bg: #f59e0b !important;
  --bs-btn-color: #000 !important;
  --bs-btn-hover-bg: #d97706 !important;
  --bs-btn-active-bg: #d97706 !important;
  --bs-btn-border-color: #f59e0b !important;
  --bs-btn-hover-border-color: #d97706 !important;
  --bs-btn-active-border-color: #d97706 !important;

  background: #f59e0b !important;
  background-color: #f59e0b !important;
  color: #000 !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0.375rem !important;
  font-weight: 700 !important;
  transition: all 0.2s ease-in-out !important;
}
#custom-navbar .bg-amber-500:hover {
  background: #d97706 !important;
  background-color: #d97706 !important;
  color: #000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* 1) Harden the background utility across element types */
.bg-amber-500,
button.bg-amber-500,
a.bg-amber-500,
[role="button"].bg-amber-500 {
  background-color: var(--tft-amber-500) !important;
  background: var(--tft-amber-500) !important;
}

/* 2) Hover state you're using in markup */
.hover\:bg-amber-600:hover,
.bg-amber-500:hover {
  background-color: var(--tft-amber-600) !important;
  background: var(--tft-amber-600) !important;
}

/* 3) Text color utility (covers anchors & buttons explicitly) */
.text-black,
button.text-black,
a.text-black,
[role="button"].text-black {
  color: #000 !important;
}

/* 4) Defuse Odoo's blanket button background ONLY on public pages */
#wrapwrap:not(.o_edit_mode) button.bg-amber-500,
#wrapwrap:not(.o_edit_mode) a.bg-amber-500,
#wrapwrap:not(.o_edit_mode) [role="button"].bg-amber-500 {
  background-color: var(--tft-amber-500) !important;
}

/* 5) If amber button also carries Bootstrap's .btn */
#wrapwrap:not(.o_edit_mode) .btn.bg-amber-500 {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 6) Neutralize any legacy rules turning buttons transparent */
#wrapwrap:not(.o_edit_mode) .bg-amber-500 {
  background-image: none !important;
}

/* === (A) Bootstrap variable alignment for amber buttons === */
#wrapwrap:not(.o_edit_mode) .bg-amber-500,
#wrapwrap:not(.o_edit_mode) .btn.bg-amber-500,
#wrapwrap:not(.o_edit_mode) a.bg-amber-500[role="button"],
#wrapwrap:not(.o_edit_mode) button.bg-amber-500 {
  /* keep your existing background hardening */
  background: var(--tft-amber-500) !important;
  background-color: var(--tft-amber-500) !important;

  /* NEW: also set Bootstrap button vars so .btn uses amber */
  --bs-btn-bg: var(--tft-amber-500) !important;
  --bs-btn-hover-bg: var(--tft-amber-600) !important;
  --bs-btn-active-bg: var(--tft-amber-600) !important;
  --bs-btn-border-color: var(--tft-amber-500) !important;
  --bs-btn-hover-border-color: var(--tft-amber-600) !important;
  --bs-btn-active-border-color: var(--tft-amber-600) !important;
  --bs-btn-color: #000 !important;           /* text */
  --bs-btn-hover-color: #000 !important;
  --bs-btn-active-color: #000 !important;
}

/* If the element also has a light/outline variant, strip it */
#wrapwrap:not(.o_edit_mode) .bg-amber-500.btn-light,
#wrapwrap:not(.o_edit_mode) .bg-amber-500.btn-outline-light,
#wrapwrap:not(.o_edit_mode) .bg-amber-500[class*="btn-outline-"] {
  background: var(--tft-amber-500) !important;
  background-color: var(--tft-amber-500) !important;
  border-color: var(--tft-amber-500) !important;
}

/* === (B) Ultra-specific fallback to defeat late "background: ..." rules === */
#wrapwrap:not(.o_edit_mode) .o_cc .navbar .bg-amber-500,
#wrapwrap:not(.o_edit_mode) .o_cc .nav .bg-amber-500,
#wrapwrap:not(.o_edit_mode) .o_cc .btn.bg-amber-500,
#wrapwrap:not(.o_edit_mode) .o_cc a.bg-amber-500,
#wrapwrap:not(.o_edit_mode) header#custom-navbar .bg-amber-500 {
  background: var(--tft-amber-500) !important;
  background-color: var(--tft-amber-500) !important;
}

/* === FORCE CUSTOM NAVIGATION TO SHOW === */
/* Make sure our custom navigation is always visible and on top */
#custom-navbar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  z-index: 9999 !important;
}

/* Hide any duplicate navigation elements */
#custom-navbar + #custom-navbar,
#custom-navbar + header,
header + #custom-navbar {
  display: none !important;
}

/* === BUTTON LAYOUT FIXES === */
/* Fix button layout - ensure buttons are side-by-side */
#custom-navbar .col-span-3.flex.items-center.justify-end.gap-4 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 1rem !important;
}

/* Ensure buttons don't stack vertically */
#custom-navbar .col-span-3.flex.items-center.justify-end.gap-4 button {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Fix any CSS that might be forcing vertical stacking */
#custom-navbar .col-span-3.flex.items-center.justify-end.gap-4 {
  flex-wrap: nowrap !important;
}

/* Ensure proper button spacing and alignment */
#custom-navbar .col-span-3.flex.items-center.justify-end.gap-4 button:not(.md\:hidden) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* === NAVIGATION LINKS SPACING FIX === */
/* Fix navigation links spacing to match React version - ULTRA SPECIFIC to override Bootstrap */
#wrapwrap:not(.o_edit_mode) #custom-navbar nav.hidden.md\:flex.col-span-6.items-center.justify-center.gap-12,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded #custom-navbar nav.hidden.md\:flex.col-span-6.items-center.justify-center.gap-12,
#wrapwrap:not(.o_edit_mode) #custom-navbar nav[class*="gap-12"],
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded #custom-navbar nav[class*="gap-12"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3rem !important; /* gap-12 = 3rem */
  flex-direction: row !important;
}

/* Override Bootstrap's gap utilities that might be conflicting */
#wrapwrap:not(.o_edit_mode) #custom-navbar nav,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded #custom-navbar nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3rem !important;
  flex-wrap: nowrap !important;
}

/* Ensure navigation links have proper spacing - override Bootstrap */
#wrapwrap:not(.o_edit_mode) #custom-navbar nav a,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded #custom-navbar nav a {
  display: inline-block !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding: 0.5rem 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Remove any Bootstrap margin/padding that might be causing links to run together */
#wrapwrap:not(.o_edit_mode) #custom-navbar nav a:last-child,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded #custom-navbar nav a:last-child {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Force override any Bootstrap flex utilities */
#wrapwrap:not(.o_edit_mode) #custom-navbar .col-span-6,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded #custom-navbar .col-span-6 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* === HERO SECTION STYLES === */
/* Ensure hero section displays correctly */
#wrapwrap:not(.o_edit_mode) section.relative.h-\[800px\],
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section.relative.h-\[800px\] {
  position: relative !important;
  height: 800px !important;
  width: 100% !important;
  background-color: black !important;
  overflow: hidden !important;
}

/* Hero section gradients */
#wrapwrap:not(.o_edit_mode) section .absolute.inset-0.bg-gradient-to-br,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .absolute.inset-0.bg-gradient-to-br {
  background: linear-gradient(to bottom right, #111827, #1f2937, #000000) !important;
  opacity: 0.2 !important;
}

#wrapwrap:not(.o_edit_mode) section .absolute.inset-0.bg-gradient-to-b,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .absolute.inset-0.bg-gradient-to-b {
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.9), #000000) !important;
}

/* Hero content styling */
#wrapwrap:not(.o_edit_mode) section .text-5xl,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .text-5xl {
  font-size: 3rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

#wrapwrap:not(.o_edit_mode) section .text-6xl,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .text-6xl {
  font-size: 3.75rem !important;
}

#wrapwrap:not(.o_edit_mode) section .text-7xl,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .text-7xl {
  font-size: 4.5rem !important;
}

/* Hero buttons - ensure amber styling */
#wrapwrap:not(.o_edit_mode) section .bg-amber-500,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .bg-amber-500 {
  background-color: #f59e0b !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 0.375rem !important;
  font-weight: 700 !important;
  transition: all 0.2s ease-in-out !important;
}

#wrapwrap:not(.o_edit_mode) section .bg-amber-500:hover,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .bg-amber-500:hover {
  background-color: #d97706 !important;
  color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Hero image styling */
#wrapwrap:not(.o_edit_mode) section .aspect-square,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .aspect-square {
  aspect-ratio: 1 / 1 !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  border: 1px solid #27272a !important;
  background-color: #18181b !important;
}

/* Hero overlay card */
#wrapwrap:not(.o_edit_mode) section .absolute.-bottom-6.-right-6,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .absolute.-bottom-6.-right-6 {
  position: absolute !important;
  bottom: -1.5rem !important;
  right: -1.5rem !important;
  width: 66.666667% !important;
  border-radius: 1rem !important;
  border: 1px solid #27272a !important;
  background-color: rgba(24, 24, 27, 0.95) !important;
  padding: 1.5rem !important;
  backdrop-filter: blur(8px) !important;
}

/* === HERO SECTION LAYOUT FIXES === */
/* Fix hero button layout - force side-by-side */
#wrapwrap:not(.o_edit_mode) section .flex.flex-col.sm\:flex-row,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .flex.flex-col.sm\:flex-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 1rem !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* Ensure right-side content displays */
#wrapwrap:not(.o_edit_mode) section .hidden.md\:block,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .hidden.md\:block {
  display: block !important;
}

/* Hero section grid layout */
#wrapwrap:not(.o_edit_mode) section .grid.grid-cols-12,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .grid.grid-cols-12 {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  align-items: center !important;
}

/* Hero left column */
#wrapwrap:not(.o_edit_mode) section .col-span-12.lg\:col-span-6,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .col-span-12.lg\:col-span-6 {
  grid-column: span 12 / span 12 !important;
}

@media (min-width: 1024px) {
  #wrapwrap:not(.o_edit_mode) section .col-span-12.lg\:col-span-6,
  #wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .col-span-12.lg\:col-span-6 {
    grid-column: span 6 / span 6 !important;
  }
}

/* Hero right column */
#wrapwrap:not(.o_edit_mode) section .col-span-12.lg\:col-span-6:last-child,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .col-span-12.lg\:col-span-6:last-child {
  grid-column: span 12 / span 12 !important;
}

@media (min-width: 1024px) {
  #wrapwrap:not(.o_edit_mode) section .col-span-12.lg\:col-span-6:last-child,
  #wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .col-span-12.lg\:col-span-6:last-child {
    grid-column: span 6 / span 6 !important;
  }
}

/* Hero image container */
#wrapwrap:not(.o_edit_mode) section .aspect-square,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .aspect-square {
  aspect-ratio: 1 / 1 !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  border: 1px solid #27272a !important;
  background-color: #18181b !important;
  position: relative !important;
}

/* Hero image */
#wrapwrap:not(.o_edit_mode) section .aspect-square img,
#wrapwrap:not(.o_edit_mode) .s_embed_code_embedded section .aspect-square img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.8 !important;
}

/* ===============================
   TFT Sitewide (Canonical) Overrides
   Goal: Odoo CSS + THIS one custom file (no head bloat)
   =============================== */

/* (A) Typography — content only
   NOTE: moved near top of file as the canonical typography override.
   Keep this section here as historical context only.
*/

/* Hide Odoo default header/nav/footer chrome sitewide */
html body #wrapwrap header#top,
html body header#top,
html body #wrapwrap nav.o_colored_level,
html body nav.o_colored_level,
html body #wrapwrap #o_main_nav,
html body #o_main_nav,
html body #wrapwrap footer#footer,
html body footer#footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* Cookie bar — dark glass (Odoo cookie bar is the single consent owner) */
#website_cookies_bar{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: unset !important;
  bottom: 0 !important;
  inset: auto 0 0 0 !important;
  z-index: 10050 !important;

  display: block !important;
  height: fit-content !important;
  min-height: 56px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px 18px !important;

  background: rgba(15,15,15,.72) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 -18px 60px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* If Odoo ever sets an inline `top`, hard-clear it */
#website_cookies_bar[style]{
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* If Odoo marks it invisible via editor classes, re-show it on live pages */
body:not(.o_edit_mode) #website_cookies_bar.o_snippet_invisible{
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  pointer-events: auto !important;
}

/* Do NOT break Odoo modal mechanics — restyle inner panel to look like a bar */
#website_cookies_bar > .modal.o_cookies_discrete{
  position: fixed !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}
#website_cookies_bar > .modal.o_cookies_discrete .modal-dialog{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  pointer-events: auto !important;
}
#website_cookies_bar > .modal.o_cookies_discrete .modal-content{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
}

/* Safety: if Bootstrap modal-open class gets applied, don't scroll-lock the page */
body.modal-open,
body[style*="overflow: hidden"]{
  overflow: auto !important;
  padding-right: 0 !important;
}

/* Ensure Odoo close state actually removes the bar */
#website_cookies_bar.d-none{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Cookie bar typography + link color */
#website_cookies_bar,
#website_cookies_bar *{
  font-family: Arial, Helvetica, sans-serif !important;
}
#website_cookies_bar p{
  margin: 0 !important;
  color: rgba(255,255,255,.88) !important;
}
#website_cookies_bar a{
  color: #f59e0b !important;
  text-decoration: none !important;
}
#website_cookies_bar a:hover{ text-decoration: underline !important; }

/* Cookie bar buttons */
#website_cookies_bar a[role="button"],
#website_cookies_bar .btn{
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
#website_cookies_bar #cookies-consent-essential{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
}
#website_cookies_bar #cookies-consent-all{
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #000 !important;
}
#website_cookies_bar #cookies-consent-all:hover{
  background: #d97706 !important;
  border-color: #d97706 !important;
}