/* Description */

/* -----------------------------------------
   1. HTML & BODY RESET
------------------------------------------ */

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  color: var(--color-text);
}

/* ============================================================
   THEME VARIABLES — LIGHT & DARK
   ============================================================ */

/* LIGHT MODE */
html[data-theme="light"] {
  --theme-background: #f4f7fa;   /* soft light background */
  --color-text: #1a1a1a;         /* dark readable text */
}

/* DARK MODE */
html[data-theme="dark"] {
  --theme-background: #0f141a;   /* deep night background */
  --color-text: #e6e6e6;         /* soft white text */
}

/* -----------------------------------------
   2. BASE HTML BACKGROUND (fallback only)
      - This no longer overrides theme logic
------------------------------------------ */

html {
  background: var(--theme-background);
}

/* -----------------------------------------
   3. GLOBAL BODY BACKGROUND (theme-aware)
------------------------------------------ */

body {
  background: var(--theme-background);
  background-attachment: fixed;
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
  position: relative;
  overflow-x: hidden;
}

/* -----------------------------------------
   4. FABRIC OVERLAY — LIGHT MODE
------------------------------------------ */

html[data-theme="light"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 2px,
      transparent 2px,
      transparent 6px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,0.06) 0px,
      rgba(0,0,0,0.06) 2px,
      transparent 2px,
      transparent 6px
    ),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
<filter id='n'>\
<feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='5' stitchTiles='stitch'/>\
</filter>\
<rect width='100%' height='100%' filter='url(%23n)' opacity='0.12' fill='rgb(90,120,160)'/>\
</svg>");
}

/* -----------------------------------------
   5. FABRIC OVERLAY — DARK MODE (PREMIUM NIGHT FABRIC)
------------------------------------------ */

html[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    /* subtle woven crosshatch */
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 2px,
      transparent 2px,
      transparent 6px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 2px,
      transparent 2px,
      transparent 6px
    ),

    /* deeper, richer fractal noise */
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
<filter id='n'>\
<feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/>\
</filter>\
<rect width='100%' height='100%' filter='url(%23n)' opacity='0.08' fill='rgb(20,30,45)'/>\
</svg>");
}

/* -----------------------------------------
   6. FABRIC OVERLAY — FALLBACK (no theme)
------------------------------------------ */

html:not([data-theme]) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* -----------------------------------------
   7. GLOBAL VIGNETTE — LIGHT MODE
------------------------------------------ */

html[data-theme="light"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.18) 100%
  );
}

/* -----------------------------------------
   8. GLOBAL VIGNETTE — DARK MODE
------------------------------------------ */

html[data-theme="dark"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.35) 100%
  );
}

/* -----------------------------------------
   9. CONTENT GLOW BACKDROP (theme-aware)
------------------------------------------ */

body .site-grid {
  position: relative;
  z-index: 1;
}

html[data-theme="light"] body .site-grid::before {
  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.12) 20%,
    rgba(255,255,255,0.05) 40%,
    rgba(255,255,255,0) 100%
  );
}

html[data-theme="dark"] body .site-grid::before {
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.12) 20%,
    rgba(0,0,0,0.05) 40%,
    rgba(0,0,0,0) 100%
  );
}

/* -----------------------------------------
   10. GRADIENT ANIMATION
------------------------------------------ */

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* End of Description */

/* Description */

/* -----------------------------------------
   1. SITE GRID — ensures content sits above
      the background layers (fabric, vignette)
------------------------------------------ */

body .site-grid {
  position: relative;
  z-index: 1;
}

/* -----------------------------------------
   2. GLOBAL CONTAINER STYLING
      (used by component, sidebar, menu, etc.)
------------------------------------------ */

.container-component,
.container-sidebar-right,
.container-menu,
.container-search,
.container-banner,
.container-footer,
.container-breadcrumbs {
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 1.1rem;
  margin-bottom: 1.1rem;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.08);
  position: relative;
  z-index: 2;
}

/* -----------------------------------------
   3. TOP-A / TOP-B WRAPPER
      (used for dual-module layouts)
------------------------------------------ */

.top-ab-wrapper {
  grid-area: top-a;
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.top-ab-wrapper .top-a,
.top-ab-wrapper .top-b {
  flex: 1;
  min-width: 0;
}

/* Mobile stacking */
@media (max-width: 900px) {
  .top-ab-wrapper {
    flex-direction: column;
  }
}

/* -----------------------------------------
   4. CONTAINER-TOP (Owl Carousel support)
------------------------------------------ */

.container-top {
  display: flex;
  gap: 2rem;
}

/* Prevent flex collapse */
.container-top > * {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Owl Carousel full-width behavior */
.container-top .owl-carousel,
.container-top .owl-stage-outer,
.container-top .owl-stage {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  display: block !important;
}

/* Ensure items scale properly */
.container-top .owl-item {
  width: 100% !important;
  max-width: 100% !important;
}

.container-top .owl-item img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

/* End of Description */

/* Description */

/* -----------------------------------------
   1. GLOBAL SURFACES & PANELS
------------------------------------------ */

.card,
.module,
.panel,
.box,
.surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1rem;
  color: var(--color-text);
  transition: background 0.25s ease, color 0.25s ease;
}

/* -----------------------------------------
   2. GLOBAL ANIMATIONS
------------------------------------------ */

@keyframes glossyShift {
  0%   { background-position: bottom; }
  100% { background-position: top; }
}

@keyframes pulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) scale(1.15);
    opacity: 0.9;
  }
}

/* -----------------------------------------
   3. GLOBAL BUTTONS (base styles only)
      Theme overrides live in light.css / dark.css
------------------------------------------ */

button,
.btn {
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

button:hover,
.btn:hover {
  background: var(--menu-hover-bg);
  color: var(--color-text);
}

/* ============================================================
   DIVISIONS BEAUTYBUTTON™ — TRANSPARENT GLASS BADGE
   ============================================================ */

.beautybutton {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: inherit;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Glass highlight */
.beautybutton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.05)
  );
  opacity: 0.35;
  pointer-events: none;
}

/* Hover shimmer */
.beautybutton:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.35);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.25),
    inset 0 0 12px rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

/* Active press */
.beautybutton:active {
  transform: translateY(1px);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.2),
    inset 0 0 8px rgba(255,255,255,0.1);
}

/* Remove old stretched oval background from Bookings nav button row */
.bookings-nav-buttons {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.banner--bookings .banner__content .bookings-nav-buttons {
  background: transparent !important;
  border-radius: 0 !important;
}

.banner--bookings .bookings-nav-buttons a {
  background: none !important;
}

/* Remove link underline from Beautybuttons */
.beautybutton,
.beautybutton:link,
.beautybutton:visited,
.beautybutton:hover,
.beautybutton:active,
.beautybutton:focus {
  text-decoration: none !important;
}

/* ============================================================
   BEAUTYBUTTON™ — MAGNIFYING GLASS BLUE EDGE
   ============================================================ */

.beautybutton {
  border: 1px solid rgba(80,150,255,0.35); /* soft blue rim */
  box-shadow:
    inset 0 0 4px rgba(80,150,255,0.25),   /* inner refractive glow */
    0 0 6px rgba(80,150,255,0.15);         /* outer ambient halo */
}

/* Stronger rim on hover */
.beautybutton:hover {
  border-color: rgba(120,180,255,0.55);
  box-shadow:
    inset 0 0 6px rgba(120,180,255,0.35),
    0 0 10px rgba(120,180,255,0.25);
}

/* Beautybutton text color for light mode */
html[data-theme="light"] .beautybutton {
  color: #ffffff !important;
}

/* Turn Shop banner links into Beautybuttons */
.banner--shop .category-links a {
  display: inline-block;
  margin: 0.25rem 0.35rem;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(80,150,255,0.35);
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  text-decoration: none;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Glass highlight */
.banner--shop .category-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.05)
  );
  opacity: 0.35;
  pointer-events: none;
}

/* Hover shimmer */
.banner--shop .category-links a:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(120,180,255,0.55);
  box-shadow:
    inset 0 0 6px rgba(120,180,255,0.35),
    0 0 10px rgba(120,180,255,0.25);
  transform: translateY(-1px);
}

/* BEAUTYBUTTONS FOR SHOP BANNER — FORCE OVERRIDE */
.banner--shop .category-links a {
  display: inline-block !important;
  margin: 0.25rem 0.35rem !important;
  padding: 0.65rem 1.4rem !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: visible !important; /* FIXES THE NEW BADGE CLIPPING */
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(80,150,255,0.35) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease !important;
}

/* Glass highlight */
.banner--shop .category-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.05)
  );
  opacity: 0.35;
  pointer-events: none;
  border-radius: inherit;
}

/* Hover shimmer */
.banner--shop .category-links a:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(120,180,255,0.55) !important;
  box-shadow:
    inset 0 0 6px rgba(120,180,255,0.35),
    0 0 10px rgba(120,180,255,0.25) !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   4. THEME SWITCHER — BASE LAYOUT
   ============================================================ */

.neon-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* Ensure buttons fill 3 equal segments */
.neon-switcher .mode-btn {
  position: relative;
  z-index: 2; /* Above pill background, below dome highlight is handled by dome itself */
  flex: 1 1 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  text-align: center;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

/* AUTO label subtle default */
.neon-switcher .mode-btn[data-theme="auto"] .auto-label {
  font-size: 0.7rem;
  margin-left: 0.2rem;
  opacity: 0.65;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   THEME SWITCHER — INDICATOR (GLASS DOME)
   ============================================================ */

/* We know the pill + padding; we let JS handle X position, CSS handles shape & effects */

.neon-indicator {
  position: absolute;
  top: -2px;              /* slight pop-out above pill */
  left: 6px;              /* start aligned with first segment inner edge */
  width: 58.75px;         /* your measured dome size */
  height: 58.75px;
  border-radius: 50%;
  background: #1fb5a8;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.45),
    inset 0 3px 6px rgba(255,255,255,0.25),
    inset 0 -4px 8px rgba(0,0,0,0.35);
  overflow: hidden;
  z-index: 1;
  transform: translateX(0);
  transition:
    transform 0.45s cubic-bezier(.25,1.4,.35,1),
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

/* Glass dome highlight */
.neon-indicator::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,0.7) 0%,
      rgba(255,255,255,0.18) 30%,
      rgba(255,255,255,0.06) 55%,
      rgba(255,255,255,0) 100%
    );
  pointer-events: none;
}

/* Glass refraction shimmer */
.neon-indicator::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -40%;
  width: 180%;
  height: 80%;
  background: linear-gradient(
    60deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 40%,
    rgba(255,255,255,0) 80%
  );
  opacity: 0;
  transform: translateX(-40%);
  pointer-events: none;
}

/* ============================================================
   INDICATOR ANIMATIONS — PULSE & SHIMMER
   ============================================================ */

.neon-indicator.pulse {
  animation: neonPulse 350ms ease-out;
}

.neon-indicator.shimmer::before {
  animation: domeShimmer 420ms ease-out;
}

@keyframes neonPulse {
  0%   { box-shadow: 0 6px 14px rgba(0,0,0,0.45); }
  40%  { box-shadow: 0 8px 18px rgba(0,0,0,0.65); }
  100% { box-shadow: 0 6px 14px rgba(0,0,0,0.45); }
}

@keyframes domeShimmer {
  0%   { opacity: 0;   transform: translateX(-40%); }
  20%  { opacity: 0.9; transform: translateX(0%); }
  60%  { opacity: 0.5; transform: translateX(40%); }
  100% { opacity: 0;   transform: translateX(80%); }
}

/* ============================================================
   HOVER PARALLAX — SWITCHER & DOME
   ============================================================ */

.neon-switcher:hover .neon-indicator {
  transform: translateX(var(--indicator-x, 0px)) translateY(-1px);
  filter: brightness(1.05);
}

/* JS sets transform directly, so we store x separately if needed */
.neon-switcher {
  --indicator-x: 0px;
}

/* ============================================================
   ICON MICRO-ANIMATIONS
   ============================================================ */

.mode-btn.active-mode {
  transform: scale(1.1);
  text-shadow: 0 0 6px rgba(255,255,255,0.65);
}

.mode-btn.active-mode[data-theme="auto"] .auto-label {
  animation: autoBreath 1.2s ease-out;
}

@keyframes autoBreath {
  0%   { opacity: 0; }
  35%  { opacity: 0.95; }
  100% { opacity: 0.7; }
}

/* ============================================================
   GLOBAL THEME TRANSITIONS (LIGHT + DARK)
   ============================================================ */

html[data-theme] {
  transition:
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}

/* Ambient glow wash */
html.theme-transition-light {
  animation: glowLight 180ms ease-out;
}

html.theme-transition-dark {
  animation: glowDark 180ms ease-out;
}

@keyframes glowLight {
  0%   { box-shadow: inset 0 0 0 rgba(255,255,255,0); }
  50%  { box-shadow: inset 0 0 120px rgba(255,255,255,0.35); }
  100% { box-shadow: inset 0 0 0 rgba(255,255,255,0); }
}

@keyframes glowDark {
  0%   { box-shadow: inset 0 0 0 rgba(0,255,255,0); }
  50%  { box-shadow: inset 0 0 120px rgba(0,255,255,0.25); }
  100% { box-shadow: inset 0 0 0 rgba(0,255,255,0); }
}

/* -----------------------------------------
   5. NOTEBOOK FLOATING COCKPIT (global)
------------------------------------------ */

#notebook-float {
  position: fixed !important;
  z-index: 999999 !important;
}

#notebook-launcher {
  position: relative;
  z-index: 10 !important;
}

#quicknote-modal {
  position: fixed !important;
  z-index: 999999 !important;
}

/* Hide notebook on mobile */
@media (max-width: 768px) {
  #notebook-launcher,
  #notebook-float,
  #quicknote-modal {
    display: none !important;
  }
}

/* -----------------------------------------
   6. FOOTER TRANSPARENCY FIXES
------------------------------------------ */

.footer-grid,
.footer-bottom {
  background: transparent !important;
}

.footer-grid > *,
.footer-bottom > * {
  background: transparent !important;
}

/* End of Description */

/* Description */

/* -----------------------------------------
   1. TOPBAR WRAPPER
------------------------------------------ */

.division-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rem;
  gap: 0.1rem;
  min-height: 80px;
}

/* -----------------------------------------
   2. LEFT SIDE — Logo + Spoken Text
------------------------------------------ */

.topbar-left {
  display: flex;
  align-items: center;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.topbar-logo .main-logo {
  max-height: 80px;
  height: auto;
  display: block;
}

/* Spoken text wrapper */
.spoken-text {
  display: inline-flex;
  align-items: center;
}

/* Inner spoken text (white only) */
.spoken-text-inner {
  font-size: 24px;
  color: #fff;
  white-space: nowrap;
  margin: 0;
  padding-top: 0.2rem;
  font-family: 'Dancing Script', cursive;
}

/* -----------------------------------------
   3. RIGHT SIDE — Navigation Buttons
------------------------------------------ */

.topbar-right {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.topbar-link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Icons above buttons */
.topbar-icon {
  max-width: 48px;
  height: auto;
  margin-bottom: -4px;
  display: block;
}

/* Buttons */
.topbar-btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-top: 0.15rem;
  transition: filter 0.25s ease;
}

/* Division colors */
.btn-overview   { background: #2a4f7a; }
.btn-shop       { background: #878787; }
.btn-meetmarco  { background: #0099ad; }
.btn-bookings   { background: #003170; }
.btn-software   { background: #333; }

/* Hover */
.topbar-btn:hover {
  filter: brightness(1.2);
}

/* -----------------------------------------
   4. ICON HOVER EFFECT
------------------------------------------ */

.topbar-link-item:hover .topbar-icon {
  transform: translateY(-4px) scale(1.05);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* -----------------------------------------
   5. HIDE ACTIVE DIVISION BUTTON
------------------------------------------ */

body.meetmarco-division   [data-division="akamawa"],
body.goshopping-division  [data-division="shop"],
body.bookings-division    [data-division="bookings"],
body.software-division    [data-division="software"] {
  display: none !important;
}

/* End of Description */

/* Description */

/* -----------------------------------------
   1. TOPBAR (Meet Marco Division)
------------------------------------------ */

body.meetmarco-division .meetmarco-topbar {
  background: linear-gradient(to bottom, #490202 0%, #d20003 100%);
  background-size: 100% 200%;
  animation: glossyShift 2s ease-in-out infinite alternate;
}

/* -----------------------------------------
   2. HERO BANNER
------------------------------------------ */

body.meetmarco-division .banner-meet-marco {
  background: url('/images/banners/meet-marco.jpg') center/cover no-repeat;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

/* Welcome message */
body.meetmarco-division .banner-meet-marco .welcome-message {
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
  margin-bottom: 25px;
  background-color: rgba(0,0,0,0.4);
  padding: 0.5em 1em;
  border-radius: 6px;
  display: inline-block;
}

/* Button row */
body.meetmarco-division .banner-meet-marco .banner-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* -----------------------------------------
   3. HERO BUTTONS — Base Style
------------------------------------------ */

body.meetmarco-division .banner-meet-marco .division-btn {
  display: inline-block;
  padding: 0.65rem 1.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}

/* -----------------------------------------
   4. HERO BUTTONS — Light Mode
------------------------------------------ */

html[data-theme="light"] body.meetmarco-division
.banner-meet-marco .division-btn {
  background: #4d697c;
  color: #bed3e0;
  border: 1px solid #98a8b2;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

html[data-theme="light"] body.meetmarco-division
.banner-meet-marco .division-btn:hover {
  background: #99aebd;
  color: #c66800;
  box-shadow: 0 5px 14px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}

/* -----------------------------------------
   5. HERO BUTTONS — Dark Mode
------------------------------------------ */

html[data-theme="dark"] body.meetmarco-division
.banner-meet-marco .division-btn {
  background: #1a1f27;
  color: #e8f0ff;
  border: 1px solid #3a4452;
  box-shadow: 0 3px 8px rgba(0,0,0,0.45);
}

html[data-theme="dark"] body.meetmarco-division
.banner-meet-marco .division-btn:hover {
  background: #2d3642;
  color: #00d0ff;
  box-shadow: 0 5px 14px rgba(0,0,0,0.6);
  transform: translateY(-2px);
}

/* -----------------------------------------
   6. HERO BUTTONS — Mobile
------------------------------------------ */

@media (max-width: 768px) {
  body.meetmarco-division .banner-meet-marco .division-btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
    padding: 0.75rem 1.2rem;
    font-size: 1.1rem;
  }
}

/* -----------------------------------------
   7. UPCOMING GIGS — Diva Container
------------------------------------------ */

.main-top-diva {
  background: linear-gradient(135deg, rgba(15,35,66,0.95), rgba(31,79,122,0.95));
  padding: 2rem;
  border-radius: 14px;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,0.35);

  /* Entrance animation */
  opacity: 0;
  transform: translateY(20px);
  animation: divaEntrance 0.8s ease-out forwards;
}

/* Spotlight above the diva */
.main-top-diva::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60px;
  background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%);
  pointer-events: none;
}

/* Diva entrance animation */
@keyframes divaEntrance {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* End of Description */

/* Description */

/* -----------------------------------------
   1. TOPBAR (GoShopping Division)
------------------------------------------ */

body.goshopping-division .goshopping-topbar {
  background: linear-gradient(to bottom, #313131 0%, #9d9d9d 100%);
  background-size: 100% 200%;
  animation: glossyShift 2s ease-in-out infinite alternate;
}

/* -----------------------------------------
   2. HERO BANNER
------------------------------------------ */

body.goshopping-division .banner-goshopping {
  background: url('/images/banners/shop.jpg') center/cover no-repeat;
  width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  position: relative;
  min-height: 400px;
}

/* Banner message */
body.goshopping-division .goshopping-message {
  background-color: rgba(123,123,123,0.8);
  color: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  padding: 15px 25px;
  border-radius: 4px;
  margin-bottom: 15px;
}

/* -----------------------------------------
   3. CATEGORY LINKS (primary buttons)
------------------------------------------ */

body.goshopping-division .category-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 15px;
}

/* -----------------------------------------
   4. SECONDARY LINKS
------------------------------------------ */

body.goshopping-division .goshopping-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* -----------------------------------------
   5. HERO BUTTONS — Base Style
------------------------------------------ */

body.goshopping-division .banner-goshopping .category-links a,
body.goshopping-division .banner-goshopping .goshopping-links a {
  display: inline-block;
  padding: 0.65rem 1.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}

/* -----------------------------------------
   6. HERO BUTTONS — Light Mode
------------------------------------------ */

html[data-theme="light"] body.goshopping-division 
.banner-goshopping .category-links a,
html[data-theme="light"] body.goshopping-division 
.banner-goshopping .goshopping-links a {
  background: #4d697c;
  color: #bed3e0;
  border: 1px solid #98a8b2;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

html[data-theme="light"] body.goshopping-division 
.banner-goshopping .category-links a:hover,
html[data-theme="light"] body.goshopping-division 
.banner-goshopping .goshopping-links a:hover {
  background: #99aebd;
  color: #c66800;
  box-shadow: 0 5px 14px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}

/* -----------------------------------------
   7. HERO BUTTONS — Dark Mode
------------------------------------------ */

html[data-theme="dark"] body.goshopping-division 
.banner-goshopping .category-links a,
html[data-theme="dark"] body.goshopping-division 
.banner-goshopping .goshopping-links a {
  background: #1a1f27;
  color: #e8f0ff;
  border: 1px solid #3a4452;
  box-shadow: 0 3px 8px rgba(0,0,0,0.45);
}

html[data-theme="dark"] body.goshopping-division 
.banner-goshopping .category-links a:hover,
html[data-theme="dark"] body.goshopping-division 
.banner-goshopping .goshopping-links a:hover {
  background: #2d3642;
  color: #00d0ff;
  box-shadow: 0 5px 14px rgba(0,0,0,0.6);
  transform: translateY(-2px);
}

/* -----------------------------------------
   8. RESPONSIVE GRID — 6 HERO BUTTONS
------------------------------------------ */

body.goshopping-division .banner-goshopping .category-links {
  display: grid;
  grid-template-columns: repeat(6, auto);
  gap: 12px;
  justify-content: center;
}

/* Medium screens — 3 + 3 */
@media (max-width: 1100px) {
  body.goshopping-division .banner-goshopping .category-links {
    grid-template-columns: repeat(3, auto);
  }
}

/* Mobile — 2 + 2 + 2 */
@media (max-width: 768px) {
  body.goshopping-division .banner-goshopping .category-links {
    grid-template-columns: repeat(2, auto);
  }

  body.goshopping-division .banner-goshopping .category-links a {
    width: 100%;
    max-width: 260px;
    text-align: center;
  }
}

/* -----------------------------------------
   9. MOBILE — Full-width buttons
------------------------------------------ */

@media (max-width: 768px) {
  body.goshopping-division .banner-goshopping .category-links a,
  body.goshopping-division .banner-goshopping .goshopping-links a {
    width: 100%;
    max-width: 320px;
    text-align: center;
    padding: 0.75rem 1.2rem;
    font-size: 1.1rem;
  }

  body.goshopping-division .banner-goshopping .new-category::after {
    top: -8px;
    right: -8px;
  }
}

/* -----------------------------------------
   10. NEW BADGE
------------------------------------------ */

body.goshopping-division .banner-goshopping .new-category {
  position: relative;
}

body.goshopping-division .banner-goshopping .new-category::after {
  content: "NEW";
  position: absolute;
  top: -10px;
  right: -12px;
  background: #ff3b3b;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* End of Description */

/* Description */

/* Description */

/* -----------------------------------------
   1. TOPBAR (Bookings Division)
------------------------------------------ */

body.bookings-division .bookings-topbar {
  background-image: linear-gradient(to top, #112855 0%, #0245c8 100%);
  background-size: 100% 200%;
  animation: glossyShift 1.5s ease-in-out infinite alternate;
  color: #fff;
}

/* -----------------------------------------
   2. HERO BANNER
------------------------------------------ */

body.bookings-division .banner-bookings {
  background: url('/images/banners/book.jpg') center/cover no-repeat;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 120px rgba(0,0,0,0.55);
}

/* Main message */
body.bookings-division .bookings-message {
  background-color: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 40px;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.08);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  padding: 12px 20px;
  margin-bottom: 20px;
}

/* -----------------------------------------
   3. CINEMATIC OVERLAYS
------------------------------------------ */

/* Spotlight */
body.bookings-division .banner-bookings::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 20%,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.10) 25%,
    rgba(0,0,0,0.55) 80%
  );
  pointer-events: none;
  z-index: 0;
}

/* Lens flare */
body.bookings-division .banner-bookings::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.02) 40%,
    rgba(255,255,255,0.12) 80%
  );
  mix-blend-mode: screen;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above overlays */
body.bookings-division .banner-bookings .banner__content {
  position: relative;
  z-index: 1;
}

/* -----------------------------------------
   4. RETRO TOUR‑POSTER BADGE
------------------------------------------ */

body.bookings-division .banner-bookings .tour-badge {
  position: absolute;
  top: -60px;
  left: -330px;
  padding: 10px 18px;
  opacity: 0.55;
  filter: blur(1.2px) brightness(0.75) saturate(0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background: linear-gradient(135deg, #d4c56a, #c9a832);
  color: #000;
  font-weight: 900;
  font-size: 0.9rem;
  text-transform: uppercase;
  border: 2px solid rgba(0,0,0,0.5);
  border-radius: 6px;
  transform: rotate(-8deg);
  box-shadow:
    0 0 0 2px rgba(255,0,102,0.4),
    0 3px 6px rgba(0,0,0,0.35);
  z-index: 1;
  letter-spacing: 1px;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,0.4),
     1px -1px 0 rgba(255,255,255,0.4),
    -1px  1px 0 rgba(255,255,255,0.4),
     1px  1px 0 rgba(255,255,255,0.4);
}

/* -----------------------------------------
   5. HUB GRID (Bookings Hub)
------------------------------------------ */

body.bookings-division .bookings-hub {
  padding: 3rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

body.bookings-division .hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

/* Hub cards */
body.bookings-division .hub-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

body.bookings-division .hub-card h2 {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

body.bookings-division .hub-card p {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  opacity: 0.9;
}

body.bookings-division .hub-card i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #fff;
  transition: color 0.3s ease;
}

/* Hub card gradients */
body.bookings-division .hub-card:nth-child(1) {
  background: linear-gradient(135deg, #0077cc, #3399ff);
}
body.bookings-division .hub-card:nth-child(2) {
  background: linear-gradient(135deg, #28a745, #5cd65c);
}
body.bookings-division .hub-card:nth-child(3) {
  background: linear-gradient(135deg, #6f42c1, #9b6dd6);
}
body.bookings-division .hub-card:nth-child(4) {
  background: linear-gradient(135deg, #fd7e14, #ff9f4d);
}

/* Hover effects */
body.bookings-division .hub-card:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
  color: #000;
}

body.bookings-division .hub-card:hover h2,
body.bookings-division .hub-card:hover p,
body.bookings-division .hub-card:hover i {
  color: #000 !important;
}

/* -----------------------------------------
   6. HERO BUTTON SYSTEM (Large + Nav)
------------------------------------------ */

/* Large buttons */
body.bookings-division .booking-btn {
  display: inline-block;
  padding: 0.75rem 1.9rem;
  font-size: 1.15rem;
  font-weight: 800;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  margin: 6px;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}

/* Nav buttons */
body.bookings-division .booking-nav-btn {
  display: inline-block;
  padding: 0.45rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  margin: 4px;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}

/* Responsive layout */
body.bookings-division .bookings-nav-buttons,
body.bookings-division .bookings-banner-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Mobile full-width */
@media (max-width: 768px) {
  body.bookings-division .booking-btn,
  body.bookings-division .booking-nav-btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}

/* -----------------------------------------
   7. HUB LINKS STRIP (Bottom links)
------------------------------------------ */

body.bookings-division .hub-links-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1rem;
}

body.bookings-division .hub-links-strip .hub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.2rem;
  background: #4d697c;
  color: #bed3e0;
  border: 1px solid #98a8b2;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease;
}

body.bookings-division .hub-links-strip .hub-link:hover {
  background: #99aebd;
  color: #c66800;
  transform: translateY(-2px);
}

/* End of Description */

/* Description */

/* -----------------------------------------
   1. PACKAGES GRID
------------------------------------------ */

body.packages-division .packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

/* -----------------------------------------
   2. PACKAGE CARDS — Base Style
------------------------------------------ */

body.packages-division .package-card {
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

body.packages-division .package-card i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

body.packages-division .package-card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

body.packages-division .package-card p {
  font-size: 1rem;
  margin: 0.5rem 0 1rem;
  opacity: 0.9;
}

/* Features list */
body.packages-division .package-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

body.packages-division .package-card ul li {
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

/* Price */
body.packages-division .package-card .price {
  font-size: 1.25rem;
  font-weight: bold;
  margin: 1rem 0;
}

/* Select button */
body.packages-division .package-card .btn-select {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  background: rgba(0,0,0,0.2);
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease;
}

body.packages-division .package-card .btn-select:hover {
  background: rgba(0,0,0,0.4);
}

/* -----------------------------------------
   3. PACKAGE CARD GRADIENTS
------------------------------------------ */

body.packages-division .package-card:nth-child(1) {
  background: linear-gradient(135deg, #ffb400, #ffd65c);
}
body.packages-division .package-card:nth-child(2) {
  background: linear-gradient(135deg, #e83e8c, #ff6fa9);
}
body.packages-division .package-card:nth-child(3) {
  background: linear-gradient(135deg, #0077cc, #33a1ff);
}
body.packages-division .package-card:nth-child(4) {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
}

/* -----------------------------------------
   4. HOVER EFFECTS
------------------------------------------ */

body.packages-division .package-card:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
  color: #000;
}

/* Hover gradients */
body.packages-division .package-card:nth-child(1):hover {
  background: linear-gradient(135deg, #ffd65c, #ffe699);
}
body.packages-division .package-card:nth-child(2):hover {
  background: linear-gradient(135deg, #ff6fa9, #ff9fc4);
}
body.packages-division .package-card:nth-child(3):hover {
  background: linear-gradient(135deg, #33a1ff, #66bfff);
}
body.packages-division .package-card:nth-child(4):hover {
  background: linear-gradient(135deg, #2ecc71, #6ee7a6);
}

/* Hover text color */
body.packages-division .package-card:hover h2,
body.packages-division .package-card:hover p,
body.packages-division .package-card:hover i,
body.packages-division .package-card:hover .price {
  color: #000 !important;
}

/* End of Description */

/* Description */

/* -----------------------------------------
   1. SYMBIOSOFT TOPBAR
   (Shared with Mini Shop topbar)
------------------------------------------ */

.symbio-topbar,
.mini-shop-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to top, #ccc 10%, #004570 100%);
  padding: 8px 20px;
  border-bottom: 1px solid #444;
}

/* -----------------------------------------
   2. NOTE
   This division intentionally has:
   - no global overrides
   - no theme logic
   - no layout interference
   - no division‑colored buttons

   SymbioSoft remains fully independent so it can be
   migrated or replaced without touching the Divisions system.
------------------------------------------ */

/* End of Description */

/* Description */

/* -----------------------------------------
   1. FOOTER GRID (shared across all divisions)
------------------------------------------ */

.footer-shop .footer-grid,
.footer-bookings .footer-grid,
.footer-meetmarco .footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: flex-start;
}

/* -----------------------------------------
   2. FOOTER TITLES
------------------------------------------ */

.footer-block h4,
.footer-block h5 {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.55);
  padding-bottom: 0.15rem;
  display: inline-block;
  transition: border-color 0.25s ease;
}

.footer-block h4:hover,
.footer-block h5:hover {
  border-bottom-color: rgba(255,255,255,0.65);
}

/* -----------------------------------------
   3. FOOTER BUTTON ROWS
------------------------------------------ */

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}

/* -----------------------------------------
   4. FOOTER BUTTONS (shared)
------------------------------------------ */

.footer-btn {
  padding: 0.25rem 0.4rem;
  border-radius: 8px;
  font-size: 0.75rem;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.footer-btn:hover {
  background: #00698c;
  color: #000;
  border-color: #111;
}

/* -----------------------------------------
   5. DIVISION‑COLORED FOOTER BUTTONS
------------------------------------------ */

.meetmarco-btn { background-color: #0099ad; }
.goshopping-btn { background-color: #004c58; }
.bookings-btn  { background-color: #112855; }
.software-btn  { background-color: #292e38; }

.meetmarco-btn:hover,
.goshopping-btn:hover,
.bookings-btn:hover,
.software-btn:hover {
  background-color: #112855;
  color: #000;
}

/* -----------------------------------------
   6. FOOTER BOTTOM BAR (shared)
------------------------------------------ */

.footer-bottom {
  width: 100%;
  text-align: center;
  border-top: 4px solid rgba(255,255,255,0.35);
  margin-top: 1rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  position: relative;
  z-index: 10; /* ensures visibility above roadstrip */
}

.footer-bottom p {
  font-size: 0.6rem;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  display: inline-block !important;
  padding: 2px 6px !important;
  background: rgba(0,0,0,0.18) !important;
  border-radius: 4px !important;
}

/* -----------------------------------------
   7. DIVISION‑SPECIFIC FOOTER SEPARATORS
------------------------------------------ */

.footer-shop .footer-bottom {
  border-top-color: #80bcaa !important;
}

.footer-bookings .footer-bottom {
  border-top-color: #2c5890 !important;
}

.footer-meetmarco .footer-bottom {
  border-top-color: #d68f8f !important;
}

/* -----------------------------------------
   8. FOOTER Z‑INDEX FIX (Notebook compatibility)
------------------------------------------ */

.footer-shop,
.footer-bookings,
.footer-meetmarco {
  position: relative;
  z-index: 10 !important;
}

/* End of Description */

/* Description */

/* -----------------------------------------
   1. GLOBAL MOBILE TYPOGRAPHY
------------------------------------------ */

@media (max-width: 768px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  p  { font-size: 1rem; }
}

/* -----------------------------------------
   2. GLOBAL MOBILE SPACING
------------------------------------------ */

@media (max-width: 768px) {
  .container-component,
  .container-sidebar-right,
  .container-menu,
  .container-search,
  .container-banner,
  .container-footer,
  .container-breadcrumbs {
    padding: 0.9rem;
    margin-bottom: 0.9rem;
  }
}

/* -----------------------------------------
   3. GLOBAL MOBILE GRID BEHAVIOR
------------------------------------------ */

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem;
  }
}

/* -----------------------------------------
   4. GLOBAL MOBILE BUTTON BEHAVIOR
------------------------------------------ */

@media (max-width: 768px) {
  button,
  .btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}

/* -----------------------------------------
   5. GLOBAL MOBILE IMAGE BEHAVIOR
------------------------------------------ */

@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

/* -----------------------------------------
   6. GLOBAL TABLET ADJUSTMENTS
------------------------------------------ */

@media (max-width: 1100px) {
  .container-top {
    flex-direction: column;
  }
}

/* ============================================================
   MEETMARCO TOPBAR — MOBILE LAYOUT
   ============================================================ */

@media (max-width: 768px) {

  /* Topbar container becomes vertical */
  .meetmarco-topbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.8rem 0;
    gap: 0.8rem;
    overflow: hidden;
  }

  /* LEFT SIDE: center logo + spoken text */
  .meetmarco-topbar .topbar-left {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Logo + spoken text stay glued together */
  .meetmarco-topbar .topbar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* no space between logo and text */
  }

  /* Scale logo down slightly on mobile */
  .meetmarco-topbar .main-logo {
    width: 120px;
    height: auto;
  }

  /* Spoken text stays tight next to logo */
  .meetmarco-topbar .spoken-text-inner {
    font-size: 1rem;
    margin-left: 0.3rem;
    white-space: nowrap;
  }

  /* RIGHT SIDE: buttons become 2×2 grid */
  .meetmarco-topbar .topbar-right {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 0.8rem;
    justify-items: center;
    padding: 0 1rem;
  }

  /* Each button item becomes centered */
  .meetmarco-topbar .topbar-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Icons shrink */
  .meetmarco-topbar .topbar-icon {
    width: 40px;
    height: auto;
    margin-bottom: 0.2rem;
  }

  /* Buttons shrink slightly */
  .meetmarco-topbar .topbar-btn {
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    text-align: center;
    white-space: nowrap;
  }
}

/* ============================================================
   SHOP TOPBAR — MOBILE LAYOUT
   ============================================================ */

@media (max-width: 768px) {

  /* Topbar container becomes vertical */
  .goshopping-topbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.8rem 0;
    gap: 0.8rem;
    overflow: hidden;
  }

  /* LEFT SIDE: center logo + spoken text */
  .goshopping-topbar .topbar-left {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Logo + spoken text stay glued together */
  .goshopping-topbar .topbar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* no space between logo and text */
  }

  /* Scale logo down slightly on mobile */
  .goshopping-topbar .shop-logo {
    width: 120px;
    height: auto;
  }

  /* Spoken text stays tight next to logo */
  .goshopping-topbar .spoken-text-inner {
    font-size: 1rem;
    margin-left: 0.3rem;
    white-space: nowrap;
  }

  /* RIGHT SIDE: buttons become 2×2 grid */
  .goshopping-topbar .topbar-right {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 0.8rem;
    justify-items: center;
    padding: 0 1rem;
  }

  /* Each button item becomes centered */
  .goshopping-topbar .topbar-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Icons shrink */
  .goshopping-topbar .topbar-icon {
    width: 40px;
    height: auto;
    margin-bottom: 0.2rem;
  }

  /* Buttons shrink slightly */
  .goshopping-topbar .topbar-btn {
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    text-align: center;
    white-space: nowrap;
  }
}

/* ============================================================
   BOOKINGS TOPBAR — MOBILE LAYOUT
   ============================================================ */

@media (max-width: 768px) {

  /* Topbar container becomes vertical */
  .bookings-topbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.8rem 0;
    gap: 0.8rem;
    overflow: hidden;
  }

  /* LEFT SIDE: center logo + spoken text */
  .bookings-topbar .topbar-left {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Logo + spoken text stay glued together */
  .bookings-topbar .topbar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* no space between logo and text */
  }

  /* Scale logo down slightly on mobile */
  .bookings-topbar .main-logo {
    width: 120px;
    height: auto;
  }

  /* Spoken text stays tight next to logo */
  .bookings-topbar .spoken-text-inner {
    font-size: 1rem;
    margin-left: 0.3rem;
    white-space: nowrap;
  }

  /* RIGHT SIDE: buttons become 2×2 grid */
  .bookings-topbar .topbar-right {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 0.8rem;
    justify-items: center;
    padding: 0 1rem;
  }

  /* Each button item becomes centered */
  .bookings-topbar .topbar-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Icons shrink */
  .bookings-topbar .topbar-icon {
    width: 40px;
    height: auto;
    margin-bottom: 0.2rem;
  }

  /* Buttons shrink slightly */
  .bookings-topbar .topbar-btn {
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    text-align: center;
    white-space: nowrap;
  }
}

/* ============================================================
   MOBILE — FIX LOGO + SPOKEN MESSAGE UNITS (3 DIVISIONS)
   ============================================================ */

@media (max-width: 768px) {

  /* Top-left alignment for the whole left block */
  .division-topbar .topbar-left {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 0.6rem;
  }

  /* Logo + spoken message glued together, no gap */
  .division-topbar .topbar-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0; /* absolutely no space */
  }

/* MAIN LOGO — must stay perfectly square */
@media (max-width: 768px) {
  .division-topbar .main-logo {
    width: 90px;        /* adjust if needed */
    height: 90px;       /* same as width = square */
    object-fit: cover;  /* prevents stretching */
  }
}

/* SHOP LOGO — rectangular, keep proportions but control height */
@media (max-width: 768px) {
  .division-topbar .shop-logo {
    height: 65px;       /* fixed height */
    width: auto;        /* keep natural width */
    object-fit: contain; /* ensures no distortion */
  }
}

  /* Spoken message styling */
  .division-topbar .spoken-text-inner {
    margin-left: 0.25rem;   /* tiny breathing room */
    font-size: 1.25rem;     /* larger dancing script */
    line-height: 1.1;
    white-space: nowrap;
    color: #fff !important; /* white text */
    font-family: "Dancing Script", cursive; /* same as Overview */
  }

  /* Remove any centering from earlier rules */
  .division-topbar {
    align-items: flex-start !important;
  }
}

/* ============================================================
   MOBILE — HIDE TOPBAR ICONS + TIGHTEN BUTTON GRID
   Applies to MeetMarco, Shop, Bookings
   ============================================================ */

@media (max-width: 768px) {

  /* Hide all topbar icons on mobile */
  .division-topbar .topbar-icon {
    display: none !important;
  }

  /* Tighten spacing between buttons */
  .division-topbar .topbar-right {
    gap: 0.4rem 0.4rem !important; /* smaller vertical + horizontal gap */
    padding: 0 0.5rem !important;
  }

  /* Buttons slightly smaller */
  .division-topbar .topbar-btn {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.5rem !important;
  }

  /* Each button item becomes pure text, centered */
  .division-topbar .topbar-link-item {
    align-items: center !important;
  }
}

/* ============================================================
   SYMBIOSOFT TOPBAR — MOBILE LAYOUT + ACCORDION FIX (IMPROVED)
   ============================================================ */

@media (max-width: 768px) {

  /* Topbar becomes vertical */
  .symbio-topbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    gap: 0.8rem;
  }

  /* Logo + title centered and glued together */
  .symbio-topbar .logo-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* no gap between logo and text */
    width: 100%;
    text-align: center;
  }

  /* FIX: Logo must NOT shrink to tiny size */
  .symbio-topbar .safeshop-logo img {
    width: 55px;       /* was 120px, now mobile-appropriate */
    height: auto;
    min-width: 45px;   /* prevents tiny 6px collapse */
    object-fit: contain;
  }

  /* FIX: Spoken message styling */
  .symbio-topbar .page-name {
    margin-left: 0.25rem;     /* tiny breathing room */
    white-space: nowrap;
    color: #fff !important;   /* white text */
    font-size: 9px !important; /* narrow + small */
    font-weight: 400;
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    line-height: 1;
  }

  /* Hamburger visible and centered */
  .symbio-topbar .menu-toggle {
    display: block !important;
    font-size: 1.8rem;
    background: none;
    border: none;
    cursor: pointer;
  }

  /* NAVIGATION — hidden by default */
  .symbio-topbar .mini-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  /* NAVIGATION — shown when toggled */
  .symbio-topbar .mini-nav.show {
    display: flex;
  }

  /* Buttons full-width on mobile */
  .symbio-topbar .mini-nav a {
    display: block;
    text-align: center;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 0.95rem;
  }
}

/* ============================================================
   GLOBAL MOBILE PADDING REDUCTION — ALL DIVISIONS + SYMBIOSOFT
   ============================================================ */

@media (max-width: 768px) {

  /* Reduce global body padding */
  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Reduce padding on all division topbars */
  .division-topbar {
    padding: 0.4rem 0.6rem !important;
    gap: 0.4rem !important;
  }

  /* Reduce padding on SymbioSoft topbar */
  .symbio-topbar {
    padding: 6px 10px !important;
    gap: 0.4rem !important;
  }

  /* Reduce padding on banners (Shop, MeetMarco, Bookings) */
  .banner,
  .banner--shop,
  .banner--meetmarco,
  .banner--bookings {
    padding: 0.8rem 0.6rem !important;
  }

  /* Reduce padding inside banner content */
  .banner__content {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Reduce padding on Joomla modules */
  .moduletable,
  .module,
  .module-content {
    padding: 0.6rem 0.4rem !important;
    margin-bottom: 0.8rem !important;
  }

  /* Reduce padding on article content */
  .item-page,
  .com-content-article__body {
    padding: 0.6rem !important;
  }

  /* Reduce spacing between sections */
  section,
  .section,
  .container-component {
    padding: 0.6rem 0 !important;
    margin: 0 !important;
  }

  /* Reduce padding on SymbioSoft accordion menu */
  .symbio-topbar .mini-nav a {
    padding: 0.4rem 0.6rem !important;
  }
}

/* End of Description */