/* ============================================================
   BASE RESET
   Explicit here regardless of what Bootstrap's own Reboot provides -
   a custom-purged build can strip bare element selectors like body/html
   since purge tools typically only preserve what's referenced by class,
   not low-level resets. Without this, the browser's default 8px body
   margin creates a visible edge gap around the entire page.
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ============================================================
   HAMBURGER MENU
   ============================================================ */

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  color: #212529;
}

.hamburger:focus {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.ham-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}

/* Animate to X */
.hamburger.is-open .ham-bar-1 {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-open .ham-bar-2 {
  opacity: 0;
  width: 0;
}
.hamburger.is-open .ham-bar-3 {
  transform: translateY(-7px) rotate(-45deg);
}

/* Keep the X visible/clickable above the open sidebar panel instead of
   getting covered by it (sidebar z-index is higher than the topbar's).
   Stays in its normal spot — just lifted above the sidebar. */
.hamburger.is-open {
  position: relative;
  z-index: 1002;
}

/* Confirmed in this exact conversation: this site was deliberately
   designed to use the hamburger/MENU-tab trigger at every screen
   size, with no separate desktop nav ever built at all. Restricting
   visibility to mobile-only here was the actual bug behind the
   button disappearing entirely on genuine desktop-width browsers
   (Firefox, Edge, and Chrome alike, once the window is wide enough) --
   the sidebar's own off-canvas mechanism below was never scoped to
   any breakpoint, only this button's visibility was. */
.hamburger { display: flex; }

/* Mobile menu trigger style toggle -- both buttons exist in the
   markup always; this decides which one is actually shown, based on
   the body class set from the mobile_menu_trigger_style setting. */
body.menu-trigger-menu_tab .hamburger {
  display: none !important;
}
body.menu-trigger-hamburger .menu-tab-btn {
  display: none !important;
}

/* MENU tab -- an upside-down tab hanging off the bottom edge of the
   header, centered, with real readable text instead of an icon --
   built for visitors who don't recognize the hamburger convention.
   .site-topbar already has position:sticky, which establishes the
   positioning context this needs without any extra change there.
   clamp() lets it grow gently on larger screens rather than staying
   a single fixed size regardless of viewport. */
.menu-tab-btn {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bs-primary, #0d6efd);
  color: #ffffff;
  border: none;
  border-radius: 0 0 12px 12px;
  padding: clamp(4px, 0.7vw, 6px) clamp(44px, 8vw, 64px);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  /* Higher than .site-sidebar's z-index:1000, so the tab visually
     sits on top of the open nav rather than getting covered by it. */
  z-index: 1001;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.menu-tab-btn:focus {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}

/* Same fix as the hamburger above - visibility should never have
   been restricted to mobile-only in the first place. */
body.menu-trigger-menu_tab .menu-tab-btn {
  display: block;
}

@media (max-width: 991.98px) {
  /* Tab was made deliberately larger for readability, which means it
     now extends further down into hero content below it (e.g. a
     "Sunday Gatherings" badge sitting right at the top of a hero).
     This nudges hero content down slightly to clear it, rather than
     shrinking the tab back down and undoing that accessibility fix.
     Targets every page's hero at once, not just one. This part stays
     mobile-only -- desktop has far more vertical space and doesn't
     hit this same overlap. */
  body.menu-trigger-menu_tab .carousel-item .container {
    padding-top: 50px;
  }

  /* Same overlap mechanism, different page structure -- members area
     isn't a hero carousel, so it needed its own selector rather than
     relying on the rule above. !important required here: the actual
     <main> element carries Bootstrap's py-4 utility class, and
     Bootstrap utilities are deliberately written with !important by
     design, which was silently beating this rule regardless of its
     own higher selector specificity.

     Targets .members-main-content specifically, NOT the generic
     .site-main > main structure -- confirmed real bug: since
     members-header.php deliberately reuses the exact same CSS
     classes as the public site, that generic selector was ALSO
     matching the public site's own <main>, adding this same top
     padding directly above the hero carousel there too. */
  body.menu-trigger-menu_tab .members-main-content {
    padding-top: 50px !important;
  }
}

/* MENU tab dropdown mode -- confirmed real cause of the overlap: the
   default sidebar is position:fixed with z-index:1000, HIGHER than
   the header's own z-index:900, so it visually covers the header
   regardless of its internal top padding. Rather than patch that
   padding, this gives the menu_tab style its own genuinely different
   behavior: drops down from directly below the header (measured at
   runtime in site.js via --header-total-height, robust regardless of
   logo size), full width, rather than sliding in as a narrow
   full-height side panel. */
body.menu-trigger-menu_tab .site-sidebar {
  display: none;
  left: 0;
  right: 0;
  top: var(--header-total-height, 150px);
  bottom: auto;
  width: 100%;
  max-height: calc(100vh - var(--header-total-height, 150px));
  padding: 20px 0 80px;
  border-right: none;
  border-top: 1px solid #dee2e6;
  transform: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.menu-trigger-menu_tab .site-sidebar.open {
  display: block !important;
}

body.menu-trigger-menu_tab .site-sidebar-nav li a {
  text-align: center;
  font-size: 1.15rem;
  padding: 16px 20px;
}

/* FOOTER */
.site-footer {
  background: #212529;
  color: #adb5bd;
  padding: 48px 0 0;
  margin-top: 60px;
}

.site-footer h5,
.site-footer h6 {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 12px;
}

.contact-label {
  color: #ffffff;
  font-weight: 600;
}

.site-footer a {
  color: #adb5bd;
  text-decoration: none;
}

.site-footer a:hover {
  color: #ffffff;
}

.social-icons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 1rem;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}

.social-icon:hover {
  background: #0d6efd;
  color: #ffffff;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 16px 0;
  margin-top: 32px;
  text-align: center;
  font-size: 0.8rem;
  color: #6c757d;
}

.footer-year {
  font-size: 0.75rem;
  opacity: 0.7;
  margin: 0;
}

/* PAGE CONTENT */
.page-content img {
  max-width: 100%;
  height: auto;
}

.page-content p {
  margin-bottom: 1rem;
}

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */

.cookie-consent {
  position: fixed;
  z-index: 99999;
  padding: 16px 20px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  display: none;
  animation: cookieSlideUp 0.4s ease forwards;
}

.cookie-consent.cookie-bottom-bar {
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.cookie-consent.cookie-bottom-left {
  bottom: 20px;
  left: 20px;
  width: 360px;
  border-radius: 10px;
}

.cookie-consent.cookie-bottom-right {
  bottom: 20px;
  right: 20px;
  width: 360px;
  border-radius: 10px;
}

@keyframes cookieSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cookie-consent-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cookie-consent-msg {
  flex: 1;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  min-width: 200px;
}

.cookie-privacy-link {
  text-decoration: underline;
  margin-left: 4px;
}

.cookie-consent-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-btn-accept,
.cookie-btn-decline {
  padding: 8px 18px;
  border: none;
  border-radius: 5px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.cookie-btn-accept:hover,
.cookie-btn-decline:hover { opacity: 0.85; }

@media (max-width: 576px) {
  .cookie-bottom-left,
  .cookie-bottom-right {
    left: 12px;
    right: 12px;
    width: auto;
  }
  .cookie-consent-inner { flex-direction: column; }
  .cookie-consent-btns { width: 100%; }
  .cookie-btn-accept,
  .cookie-btn-decline { flex: 1; }
}

/* ============================================================
   LIVE CHAT WIDGET
   ============================================================ */

/* Bubble button */
.chat-bubble-btn {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  z-index: 9998;
  transition: transform 0.2s, box-shadow 0.2s;
}

.chat-bubble-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.chat-bubble-btn.chat-pos-left { right: auto; left: 24px; }

.chat-unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #dc3545;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

/* Chat window */
.chat-window {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 340px;
  max-height: 520px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: none;
  flex-direction: column;
  z-index: 9997;
  overflow: hidden;
  animation: chatSlideUp 0.25s ease;
}

.chat-window.chat-pos-left { right: auto; left: 24px; }

@keyframes chatSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-window.open { display: flex; }

/* Header */
.chat-win-header {
  padding: 0 16px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.chat-win-title {
  font-weight: 700;
  font-size: 0.95rem;
}

.chat-win-status {
  font-size: 0.75rem;
  opacity: 0.85;
}

.chat-win-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}

.chat-win-close:hover { color: #fff; }

/* Start form */
.chat-start-form {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-start-form p {
  font-size: 0.875rem;
  color: #6c757d;
  margin: 0;
}

.chat-start-form input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s;
}

.chat-start-form input:focus { border-color: var(--chat-color, #0d6efd); }

.chat-start-btn {
  padding: 9px;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.chat-start-btn:hover { opacity: 0.9; }

/* Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: none;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}

.chat-message.from-visitor {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-message.from-admin,
.chat-message.from-ai {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-bubble-msg {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  word-break: break-word;
}

.from-visitor .chat-bubble-msg {
  color: #fff;
  border-bottom-right-radius: 4px;
}

.from-admin .chat-bubble-msg,
.from-ai .chat-bubble-msg {
  background: #f0f2f5;
  color: #212529;
  border-bottom-left-radius: 4px;
}

.chat-msg-time {
  font-size: 0.68rem;
  color: #adb5bd;
  margin-top: 3px;
  padding: 0 4px;
}

.chat-typing {
  display: none;
  align-self: flex-start;
}

.chat-typing-dots {
  background: #f0f2f5;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 10px 14px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.chat-typing-dot {
  width: 7px;
  height: 7px;
  background: #adb5bd;
  border-radius: 50%;
  animation: typingBounce 1.2s infinite;
}

.chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-5px); }
}

/* Input area */
.chat-input-wrap {
  display: none;
  padding: 10px 12px;
  border-top: 1px solid #dee2e6;
  flex-shrink: 0;
}

.chat-input-inner {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.chat-input {
  flex: 1;
  border: 1px solid #dee2e6;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 0.85rem;
  resize: none;
  max-height: 90px;
  outline: none;
  line-height: 1.4;
  transition: border-color 0.15s;
}

.chat-input:focus { border-color: var(--chat-color, #0d6efd); }

.chat-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.chat-send-btn:hover { opacity: 0.9; }

/* Closed notice */
.chat-closed-msg {
  text-align: center;
  padding: 12px;
  font-size: 0.78rem;
  color: #6c757d;
  border-top: 1px solid #dee2e6;
  flex-shrink: 0;
}

@media (max-width: 400px) {
  .chat-window { width: calc(100vw - 24px); right: 12px; }
  .chat-window.chat-pos-left { left: 12px; }
}

/* ============================================================
   CONTACT FORM
   ============================================================ */

.contact-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.cf-field-wrap {
  grid-column: span 2;
}

.cf-field-wrap.cf-half {
  grid-column: span 1;
}

.cf-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: #212529;
}

.cf-req {
  color: #dc3545;
  margin-left: 2px;
}

.cf-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #212529;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: block;
}

.cf-input:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13,110,253,0.12);
}

textarea.cf-input {
  resize: vertical;
  min-height: 120px;
}

select.cf-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236c757d' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.cf-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}

.cf-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  cursor: pointer;
}

.cf-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  cursor: pointer;
  line-height: 1.5;
}

.cf-captcha {
  margin-bottom: 16px;
}

.cf-submit-btn {
  display: inline-block;
  padding: 12px 32px;
  background: #0d6efd;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  font-family: inherit;
}

.cf-submit-btn:hover {
  background: #0a58ca;
  transform: translateY(-1px);
}

.contact-success {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(25,135,84,0.08);
  border: 1px solid rgba(25,135,84,0.3);
  border-radius: 8px;
  padding: 16px 20px;
  color: #146c43;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.contact-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(220,53,69,0.08);
  border: 1px solid rgba(220,53,69,0.3);
  border-radius: 8px;
  padding: 14px 18px;
  color: #b02a37;
  font-size: 0.875rem;
  margin-bottom: 16px;
}

.contact-map-wrap {
  position: sticky;
  top: 80px;
}

.contact-map-wrap iframe,
.contact-map-embed iframe {
  width: 100% !important;
  height: 100%;
}

/* VvvebJs "Google Maps" widget (used in V page builder pages).
   V does not reliably persist an inline height on this node when resized
   via its Style panel, so the map is forced to fill whatever height its
   parent <section> is set to. To resize a map on a page, resize the
   section wrapping it in V, not the map component itself. */
[data-component-maps] {
  display: block;
  height: 100%;
}

@media (max-width: 576px) {
  .contact-form-fields { grid-template-columns: 1fr; }
  .cf-field-wrap.cf-half { grid-column: span 1; }
}

/* ============================================================
   BLOG FRONT END
   ============================================================ */

.blog-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 12px;
}

.blog-page-header h1 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
}

.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: #6c757d;
  text-decoration: none;
  transition: color 0.15s;
}

.blog-back-link:hover { color: #0d6efd; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.blog-card {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  background: #fff;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.blog-card-img-wrap {
  display: block;
  overflow: hidden;
  height: 200px;
}

.blog-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

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

.blog-card-body {
  padding: 20px;
}

.blog-card-cat {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0d6efd;
  margin-bottom: 8px;
  text-decoration: none;
}

.blog-card-cat:hover { text-decoration: underline; }

.blog-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
}

.blog-card-title a {
  color: inherit;
  text-decoration: none;
}

.blog-card-title a:hover { color: #0d6efd; }

.blog-card-excerpt {
  font-size: 0.875rem;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-meta {
  display: flex;
  gap: 12px;
  font-size: 0.775rem;
  color: #adb5bd;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.blog-card-meta i { margin-right: 3px; }

.blog-card-read-more {
  font-size: 0.825rem;
  font-weight: 600;
  color: #0d6efd;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s;
}

.blog-card-read-more:hover { gap: 8px; }

/* Blog Pagination */
.blog-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.blog-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  color: #495057;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
}

.blog-page-btn:hover,
.blog-page-btn.active {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

/* Blog Sidebar */
.blog-sidebar-widget {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}

.blog-sidebar-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #dee2e6;
}

.blog-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-cat-list li { border-bottom: 1px solid #dee2e6; }
.blog-cat-list li:last-child { border-bottom: none; }

.blog-cat-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  color: #495057;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
}

.blog-cat-list a:hover,
.blog-cat-list a.active { color: #0d6efd; }

.blog-cat-list span {
  background: #dee2e6;
  color: #6c757d;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

.blog-recent-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-recent-item {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.blog-recent-item img {
  width: 56px;
  height: 44px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}

.blog-recent-title {
  font-size: 0.825rem;
  font-weight: 600;
  line-height: 1.4;
  color: #212529;
}

.blog-recent-item:hover .blog-recent-title { color: #0d6efd; }

.blog-recent-date {
  font-size: 0.75rem;
  color: #adb5bd;
  margin-top: 3px;
}

.blog-empty {
  text-align: center;
  padding: 60px 0;
  color: #adb5bd;
}

.blog-empty i { font-size: 3rem; display: block; margin-bottom: 12px; }

/* Single Post */
.post-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.post-breadcrumb a { color: #6c757d; text-decoration: none; }
.post-breadcrumb a:hover { color: #0d6efd; }

.post-header { margin-bottom: 24px; }

.post-cat-badge {
  display: inline-block;
  background: #0d6efd;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 4px;
  text-decoration: none;
  margin-bottom: 12px;
}

.post-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 16px;
}

.post-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.825rem;
  color: #6c757d;
}

.post-meta i { margin-right: 4px; }

.post-featured-img {
  margin-bottom: 28px;
  border-radius: 10px;
  overflow: hidden;
}

.post-featured-img img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 480px;
  object-fit: cover;
}

.post-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #212529;
  margin-bottom: 36px;
}

.post-content h2 { font-size: 1.5rem; font-weight: 700; margin: 28px 0 12px; }
.post-content h3 { font-size: 1.25rem; font-weight: 700; margin: 24px 0 10px; }
.post-content p  { margin-bottom: 1rem; }
.post-content img { max-width: 100%; border-radius: 6px; }
.post-content blockquote {
  border-left: 4px solid #0d6efd;
  padding: 12px 20px;
  margin: 20px 0;
  background: #f0f7ff;
  border-radius: 0 6px 6px 0;
  color: #495057;
  font-style: italic;
}

.post-share {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 36px;
  font-size: 0.875rem;
  color: #6c757d;
}

.post-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  transition: transform 0.2s, opacity 0.2s;
}

.post-share-btn:hover { transform: scale(1.1); opacity: 0.9; color: #fff; }
.post-share-fb { background: #1877f2; }
.post-share-tw { background: #000; }
.post-share-li { background: #0a66c2; }

.post-related { margin-bottom: 36px; }
.post-related h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 16px; }

.post-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.post-related-card {
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dee2e6;
  transition: transform 0.2s;
}

.post-related-card:hover { transform: translateY(-3px); }

.post-related-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.post-related-no-img {
  height: 120px;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 1.5rem;
}

.post-related-title {
  font-size: 0.825rem;
  font-weight: 600;
  padding: 10px 10px 4px;
  line-height: 1.4;
}

.post-related-date {
  font-size: 0.75rem;
  color: #adb5bd;
  padding: 0 10px 10px;
}

@media (max-width: 576px) {
  .post-related-grid { grid-template-columns: 1fr; }
  .post-title { font-size: 1.5rem; }
}

/* ============================================================
   EVENTS FRONT END
   ============================================================ */

.events-front-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 12px;
}

.events-front-header h1 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
}

.events-view-toggle {
  display: flex;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
}

.events-view-btn {
  padding: 8px 16px;
  font-size: 0.825rem;
  font-weight: 500;
  color: #6c757d;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border-right: 1px solid #dee2e6;
  transition: background 0.15s, color 0.15s;
}

.events-view-btn:last-child { border-right: none; }

.events-view-btn:hover { background: #f0f2f5; color: #212529; }

.events-view-btn.active {
  background: #0d6efd;
  color: #fff;
}

/* Front event cards */
.front-events-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.front-event-card {
  display: flex;
  gap: 20px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.front-event-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.front-event-past { opacity: 0.7; }

.front-event-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  background: #0d6efd;
  color: #fff;
  padding: 12px 10px;
  flex-shrink: 0;
  text-align: center;
}

.front-event-past .front-event-date-block { background: #6c757d; }

.front-event-month {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.front-event-day {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.front-event-thru {
  font-size: 0.6rem;
  opacity: 0.7;
  margin: 2px 0;
}

.front-event-img {
  width: 160px;
  flex-shrink: 0;
  overflow: hidden;
}

.front-event-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.front-event-info {
  padding: 16px;
  flex: 1;
  min-width: 0;
}

.front-event-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.front-event-badge {
  font-size: 0.65rem;
  background: #0dcaf0;
  color: #fff;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.front-event-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.825rem;
  color: #6c757d;
  margin-bottom: 10px;
}

.front-event-meta i {
  width: 14px;
  color: #0d6efd;
  margin-right: 4px;
}

.front-event-desc {
  font-size: 0.875rem;
  color: #495057;
  line-height: 1.6;
}

/* Front Calendar */
.front-cal-wrap { max-width: 100%; }

.front-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.front-cal-month {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}

.front-cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  color: #495057;
  text-decoration: none;
  transition: background 0.15s;
}

.front-cal-nav-btn:hover {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.front-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid #dee2e6;
  border-top: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 32px;
}

.front-cal-day-hdr {
  padding: 8px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #6c757d;
  background: #f8f9fa;
  border-right: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}

.front-cal-cell {
  min-height: 80px;
  padding: 6px;
  border-right: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}

.front-cal-empty { background: #fafafa; }
.front-cal-today { background: #f0f7ff; }

.front-cal-num {
  font-size: 0.825rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 4px;
}

.front-cal-today .front-cal-num {
  display: inline-flex;
  width: 22px;
  height: 22px;
  background: #0d6efd;
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.front-cal-event-dot {
  display: block;
  font-size: 0.68rem;
  background: rgba(13,110,253,0.1);
  color: #0d6efd;
  border-radius: 3px;
  padding: 1px 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.front-cal-more {
  font-size: 0.65rem;
  color: #adb5bd;
}

.front-cal-events-list h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.front-cal-events-list .front-event-card { margin-bottom: 16px; }

.events-empty {
  text-align: center;
  padding: 60px 0;
  color: #adb5bd;
}

.events-empty i { font-size: 3rem; display: block; margin-bottom: 12px; }

@media (max-width: 768px) {
  .front-event-img { display: none; }
  .front-event-card { gap: 0; }
  .front-cal-cell { min-height: 50px; }
  .front-cal-event-dot { display: none; }
  .front-cal-has-events .front-cal-num::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #0d6efd;
    border-radius: 50%;
    margin-left: 3px;
    vertical-align: middle;
  }
}

/* ============================================================
   GALLERY FRONT END
   ============================================================ */

.gallery-front-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.gallery-front-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  background: #f0f2f5;
}

.gallery-front-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.gallery-front-item:hover img { transform: scale(1.05); }

.gallery-front-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: 0.78rem;
  padding: 20px 8px 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.gallery-front-item:hover .gallery-front-caption { opacity: 1; }

/* Mosaic */
.gallery-front-mosaic {
  columns: 3;
  gap: 8px;
}

.gallery-mosaic-item {
  break-inside: avoid;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
}

.gallery-mosaic-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s;
}

.gallery-mosaic-item:hover img { transform: scale(1.03); }

.gallery-front-empty {
  text-align: center;
  padding: 60px 0;
  color: #adb5bd;
}

.gallery-front-empty i { font-size: 3rem; display: block; margin-bottom: 12px; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.3s;
}

.lightbox-overlay.open { opacity: 1; }

.lightbox-content {
  position: relative;
  z-index: 100000;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

.lightbox-caption {
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
  margin-top: 10px;
  text-align: center;
}

.lightbox-counter {
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  margin-top: 4px;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: fixed;
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
  transition: background 0.2s;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255,255,255,0.25);
}

.lightbox-close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
}

.lightbox-prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

.lightbox-next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .gallery-front-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-front-mosaic { columns: 2; }
}

@media (max-width: 480px) {
  .gallery-front-grid { grid-template-columns: repeat(1, 1fr); }
  .gallery-front-mosaic { columns: 1; }
}

/* ============================================================
   RECENT POSTS COMPONENT (inserted via Quill)
   ============================================================ */

.recent-posts-component {
  padding: 32px 0;
  margin: 32px 0;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}

.recent-posts-heading {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #212529;
}

.recent-posts-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 24px;
}

.recent-posts-grid.recent-posts-count-2 {
  grid-template-columns: repeat(2, 1fr);
}

.recent-posts-grid.recent-posts-count-1 {
  grid-template-columns: 1fr;
  max-width: 400px;
}

.recent-post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  background: #fff;
}

.recent-post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.recent-post-img {
  height: 180px;
  overflow: hidden;
}

.recent-post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.recent-post-card:hover .recent-post-img img {
  transform: scale(1.04);
}

.recent-post-no-img {
  height: 180px;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 2rem;
}

.recent-post-body {
  padding: 16px;
  flex: 1;
}

.recent-post-cat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0d6efd;
  margin-bottom: 6px;
}

.recent-post-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
  color: #212529;
}

.recent-post-card:hover .recent-post-title {
  color: #0d6efd;
}

.recent-post-excerpt {
  font-size: 0.825rem;
  color: #6c757d;
  line-height: 1.5;
  margin-bottom: 8px;
}

.recent-post-date {
  font-size: 0.75rem;
  color: #adb5bd;
}

.recent-posts-footer {
  text-align: center;
}

.recent-posts-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0d6efd;
  color: #fff;
  padding: 10px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.15s, transform 0.15s;
}

.recent-posts-btn:hover {
  background: #0a58ca;
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 576px) {
  .recent-posts-grid.recent-posts-count-2 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SHOP FRONT END
   ============================================================ */

.shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 12px;
}

.shop-header h1 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
}

.shop-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0d6efd;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  position: relative;
  transition: background 0.15s;
}

.shop-cart-btn:hover { background: #0a58ca; color: #fff; }

.shop-cart-count {
  background: #dc3545;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Shop Sidebar */
.shop-sidebar { position: sticky; top: 80px; }

.shop-widget {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
}

.shop-widget-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #dee2e6;
}

.shop-cat-list,
.shop-sort-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shop-cat-list li,
.shop-sort-list li { border-bottom: 1px solid #dee2e6; }
.shop-cat-list li:last-child,
.shop-sort-list li:last-child { border-bottom: none; }

.shop-cat-list a,
.shop-sort-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  color: #495057;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
}

.shop-cat-list a:hover,
.shop-cat-list a.active,
.shop-sort-list a:hover,
.shop-sort-list a.active { color: #0d6efd; font-weight: 600; }

.shop-cat-list span {
  background: #dee2e6;
  color: #6c757d;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

/* Shop Grid */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.shop-grid-4 { grid-template-columns: repeat(4, 1fr); }

.shop-product-card {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.shop-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.shop-product-img-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  height: 200px;
  background: #f0f2f5;
}

.shop-product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.shop-product-card:hover .shop-product-img-wrap img { transform: scale(1.05); }

.shop-product-no-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 2.5rem;
}

.shop-sale-badge,
.shop-digital-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.shop-sale-badge    { background: #dc3545; color: #fff; }
.shop-digital-badge { background: #0d6efd; color: #fff; top: 10px; left: auto; right: 10px; }

.shop-product-body {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.shop-product-cat {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0d6efd;
  text-decoration: none;
  margin-bottom: 6px;
  display: inline-block;
}

.shop-product-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 6px;
  flex: 1;
}

.shop-product-name a { color: inherit; text-decoration: none; }
.shop-product-name a:hover { color: #0d6efd; }

.shop-product-desc {
  font-size: 0.8rem;
  color: #6c757d;
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: 8px;
  flex-wrap: wrap;
}

.shop-product-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }

.shop-price-original {
  text-decoration: line-through;
  color: #adb5bd;
  font-size: 0.8rem;
}

.shop-price-current {
  font-size: 1.1rem;
  font-weight: 700;
  color: #212529;
}

.shop-price-sale { color: #dc3545; }

.shop-out-of-stock {
  font-size: 0.75rem;
  color: #adb5bd;
  font-style: italic;
}

.shop-add-btn {
  font-size: 0.775rem;
  font-weight: 600;
  color: #0d6efd;
  text-decoration: none;
  white-space: nowrap;
}

.shop-add-btn:hover { text-decoration: underline; }

.shop-empty {
  text-align: center;
  padding: 60px 0;
  color: #adb5bd;
}

.shop-empty i { font-size: 3rem; display: block; margin-bottom: 12px; }

/* Single Product */
.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-main-img {
  border-radius: 10px;
  overflow: hidden;
  background: #f0f2f5;
  aspect-ratio: 1;
}

.product-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s;
}

.product-no-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: #adb5bd;
}

.product-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.product-thumb {
  width: 72px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s;
}

.product-thumb.active,
.product-thumb:hover { border-color: #0d6efd; }

.product-title {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.product-sku {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 12px;
}

.product-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.product-price-original {
  text-decoration: line-through;
  color: #adb5bd;
  font-size: 1.1rem;
}

.product-price {
  font-size: 2rem;
  font-weight: 800;
  color: #212529;
}

.product-price-sale { color: #dc3545; }

.product-save-badge {
  background: #dc3545;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
}

.product-short-desc {
  font-size: 0.95rem;
  color: #495057;
  line-height: 1.6;
  margin-bottom: 16px;
}

.product-badges { display: flex; gap: 8px; flex-wrap: wrap; }

.product-badge {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
}

.product-badge-digital  { background: #cff4fc; color: #055160; }
.product-badge-service  { background: #d1e7dd; color: #0a3622; }
.product-badge-warning  { background: #fff3cd; color: #664d03; }

.product-cart-form { margin-bottom: 16px; }

.product-qty-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-weight: 600;
}

.product-qty-input {
  display: flex;
  align-items: center;
  border: 1px solid #ced4da;
  border-radius: 8px;
  overflow: hidden;
}

.qty-btn {
  background: #f8f9fa;
  border: none;
  width: 36px;
  height: 38px;
  font-size: 1.1rem;
  cursor: pointer;
  color: #495057;
  transition: background 0.15s;
}

.qty-btn:hover { background: #e9ecef; }

.product-qty-input input,
.qty-field {
  width: 54px;
  height: 38px;
  text-align: center;
  border: none;
  border-left: 1px solid #ced4da;
  border-right: 1px solid #ced4da;
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
}

.product-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0d6efd;
  color: #fff;
  padding: 14px 32px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  font-family: inherit;
}

.product-add-btn:hover {
  background: #0a58ca;
  transform: translateY(-2px);
}

.product-out-of-stock {
  display: inline-block;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 12px 24px;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 16px;
}

.product-meta-info {
  font-size: 0.875rem;
  color: #6c757d;
  margin-top: 10px;
}

.product-meta-info i { color: #0d6efd; margin-right: 5px; }

.product-digital-info {
  background: #f0f7ff;
  border: 1px solid #b6d4fe;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: #084298;
  line-height: 2;
  margin-top: 12px;
}

.product-digital-info i { margin-right: 5px; }

.product-full-desc h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #dee2e6;
}

.product-related h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 20px;
}

/* ============================================================
   CART
   ============================================================ */

.cart-items {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid #dee2e6;
}

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

.cart-item-img {
  width: 72px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: #f0f2f5;
  flex-shrink: 0;
}

.cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-no-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
}

.cart-item-name a {
  font-weight: 600;
  color: #212529;
  text-decoration: none;
  font-size: 0.95rem;
}

.cart-item-name a:hover { color: #0d6efd; }
.cart-item-type { font-size: 0.75rem; color: #6c757d; margin-top: 3px; }
.cart-item-price { font-size: 0.875rem; color: #6c757d; margin-top: 3px; }

.cart-item-total { font-weight: 700; font-size: 1rem; white-space: nowrap; }

.cart-item-remove {
  background: none;
  border: none;
  color: #adb5bd;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  transition: color 0.15s;
}

.cart-item-remove:hover { color: #dc3545; }

.cart-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.cart-coupon { margin-bottom: 16px; }

.cart-coupon-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cart-coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #d1e7dd;
  border: 1px solid #a3cfbb;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.875rem;
  color: #0a3622;
}

.cart-coupon-remove {
  background: none;
  border: none;
  color: #0a3622;
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: underline;
  font-family: inherit;
}

.cart-summary {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 24px;
  position: sticky;
  top: 80px;
}

.cart-summary-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.cart-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.cart-summary-table td {
  padding: 7px 0;
  border-bottom: 1px solid #dee2e6;
  color: #495057;
}

.cart-summary-table td:last-child { text-align: right; }
.cart-summary-discount td { color: #198754; }

.cart-summary-total td {
  border-bottom: none;
  padding-top: 12px;
  font-size: 1.1rem;
  color: #212529;
}

.cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #0d6efd;
  color: #fff;
  padding: 14px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
  margin-bottom: 10px;
}

.cart-checkout-btn:hover {
  background: #0a58ca;
  color: #fff;
  transform: translateY(-2px);
}

.cart-secure-badge {
  text-align: center;
  font-size: 0.775rem;
  color: #6c757d;
}

.cart-secure-badge i { margin-right: 4px; color: #198754; }

/* ============================================================
   CHECKOUT
   ============================================================ */

.checkout-section {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
}

.checkout-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #dee2e6;
}

.checkout-shipping-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.checkout-shipping-opt:has(input:checked) { border-color: #0d6efd; background: #f0f7ff; }
.checkout-shipping-opt input { accent-color: #0d6efd; }

.checkout-shipping-label {
  flex: 1;
  font-size: 0.875rem;
}

.checkout-shipping-label strong { display: block; }
.checkout-shipping-label small { color: #6c757d; }

.checkout-shipping-price {
  font-weight: 700;
  font-size: 0.9rem;
}

.stripe-card-element {
  border: 1px solid #ced4da;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.stripe-card-element:focus-within {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
}

.checkout-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #198754;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  font-family: inherit;
  margin-bottom: 12px;
}

.checkout-submit-btn:hover:not(:disabled) {
  background: #146c43;
  transform: translateY(-2px);
}

.checkout-submit-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.checkout-secure-note {
  text-align: center;
  font-size: 0.775rem;
  color: #6c757d;
  margin: 0;
}

.checkout-secure-note i { color: #198754; margin-right: 4px; }

.checkout-summary {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 24px;
  position: sticky;
  top: 80px;
}

.checkout-items { display: flex; flex-direction: column; gap: 12px; }

.checkout-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.checkout-item-img {
  position: relative;
  width: 52px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e9ecef;
}

.checkout-item-img img { width: 100%; height: 100%; object-fit: cover; }
.checkout-item-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #adb5bd; }

.checkout-item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #0d6efd;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-item-name {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: #212529;
}

.checkout-item-price {
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ============================================================
   ORDER CONFIRMATION
   ============================================================ */

.confirm-wrap { max-width: 860px; margin: 0 auto; }

.confirm-header {
  text-align: center;
  margin-bottom: 32px;
}

.confirm-icon { font-size: 4rem; margin-bottom: 12px; }

.confirm-header h1 {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.confirm-subtitle {
  font-size: 1rem;
  color: #495057;
  margin-bottom: 12px;
}

.confirm-order-number {
  display: inline-block;
  background: #f0f7ff;
  border: 1px solid #b6d4fe;
  border-radius: 20px;
  padding: 6px 20px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #084298;
}

.confirm-notice {
  background: #d1e7dd;
  border: 1px solid #a3cfbb;
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 0.9rem;
  color: #0a3622;
  margin-bottom: 24px;
  text-align: center;
}

.confirm-notice i { margin-right: 6px; }

.confirm-downloads {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.confirm-downloads h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #664d03;
}

.confirm-downloads h3 i { margin-right: 6px; }

.confirm-download-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  flex-wrap: wrap;
}

.confirm-download-name { flex: 1; font-weight: 600; font-size: 0.9rem; }

.confirm-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0d6efd;
  color: #fff;
  padding: 8px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s;
}

.confirm-download-btn:hover { background: #0a58ca; color: #fff; }

.confirm-download-meta {
  font-size: 0.75rem;
  color: #664d03;
  width: 100%;
}

.confirm-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 20px;
}

.confirm-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #dee2e6;
}

.confirm-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }

.confirm-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.875rem;
  padding: 6px 0;
  border-bottom: 1px solid #f0f2f5;
}

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

.confirm-item-name { flex: 1; }
.confirm-item-qty { color: #6c757d; margin-left: 4px; }
.confirm-item-price { font-weight: 600; white-space: nowrap; }

.confirm-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  padding: 7px 0;
  border-bottom: 1px solid #f0f2f5;
}

.confirm-detail-row:last-child { border-bottom: none; }
.confirm-detail-row span { color: #6c757d; }

.confirm-actions {
  text-align: center;
  margin-top: 32px;
}

/* Responsive shop */
@media (max-width: 991px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .cart-item { grid-template-columns: 60px 1fr auto; }
  .cart-item-qty { grid-column: 2; }
  .cart-item-total { display: none; }
}

@media (max-width: 575px) {
  .shop-grid { grid-template-columns: 1fr 1fr; }
  .shop-grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   NAV CART ICON
   ============================================================ */

.nav-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px !important;
  font-size: 1.1rem;
}

.nav-cart-count {
  position: absolute;
  top: 2px;
  right: 0px;
  background: #dc3545;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* ============================================================
   HERO VIDEO
   ============================================================ */

.hero-video-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  max-height: 900px;
  overflow: hidden;
  background: #000;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
}

/* Self-hosted video */
.hero-video-el {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* YouTube/Vimeo iframe */
.hero-video-iframe-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* 16:9 */
  min-height: 100vh;
  min-width: 177.77vh; /* 16:9 */
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Overlay */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Content */
.hero-video-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.hero-video-heading {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 16px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.hero-video-subhead {
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: rgba(255,255,255,0.9);
  margin-bottom: 28px;
  max-width: 600px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.hero-video-btn {
  display: inline-block;
  background: #0d6efd;
  color: #fff;
  padding: 14px 36px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.hero-video-btn:hover {
  background: #0a58ca;
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .hero-video-section { height: 70vh; }
}

/* ============================================================
   ZEHLM SECTIONS — FRONT END
   ============================================================ */

.zehlm-section {
  width: 100%;
  box-sizing: border-box;
}

.zehlm-section img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.zehlm-section h1,
.zehlm-section h2,
.zehlm-section h3,
.zehlm-section h4 {
  line-height: 1.3;
  margin-bottom: 0.75em;
}

.zehlm-section p {
  line-height: 1.7;
  margin-bottom: 1em;
}

.zehlm-section ul,
.zehlm-section ol {
  padding-left: 1.5em;
  margin-bottom: 1em;
  line-height: 1.7;
}

.zehlm-section-btn {
  display: inline-block;
  font-family: inherit;
}

.zehlm-col-grid {
  width: 100%;
}

@media (max-width: 768px) {
  .zehlm-col-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   SITE NAV LAYOUT (admin/alter-nav.php sets body.layout-*)
   All four modes are always off-canvas at every screen size —
   opened only via the hamburger button. "sidebar_left"/"sidebar_right"
   and "hamburger_left"/"hamburger_right" now share identical behavior;
   they're kept as separate named options in the admin UI only because
   left/right placement still needs to be chosen, not because the
   underlying mechanics differ.
   ============================================================ */

:root {
  --site-sidebar-width: 260px;
}

.site-wrap {
  display: flex;
  min-height: 100vh;
}

/* ---- SIDEBAR (always off-canvas, all four layouts, all screen sizes) ---- */
.site-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--site-sidebar-width);
  overflow-y: auto;
  background: #ffffff;
  border-right: 1px solid #dee2e6;
  z-index: 1000;
  transition: transform 0.25s ease;
  padding: 90px 0 20px;
  transform: translateX(-100%);
}

.site-sidebar.open {
  transform: translateX(0);
}

.layout-sidebar_right .site-sidebar,
.layout-hamburger_right .site-sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid #dee2e6;
  transform: translateX(100%);
}

.layout-sidebar_right .site-sidebar.open,
.layout-hamburger_right .site-sidebar.open {
  transform: translateX(0);
}

.site-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px 20px;
}

.site-brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: inherit;
  text-decoration: none;
}

.site-sidebar-close {
  display: inline-flex;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: inherit;
  cursor: pointer;
  padding: 4px;
  align-items: center;
  justify-content: center;
}

.site-theme-toggle-wrap {
  padding: 0 20px 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid #dee2e6;
  text-align: left;
}

.site-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  color: inherit;
  width: 100%;
}

.site-theme-icon-sun,
.site-theme-icon-moon {
  font-size: 0.9rem;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.site-theme-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  color: #6c757d;
}

.site-theme-toggle[aria-pressed="false"] .site-theme-icon-sun,
.site-theme-toggle[aria-pressed="true"]  .site-theme-icon-moon {
  opacity: 1;
}

.site-theme-track {
  position: relative;
  width: 42px;
  height: 22px;
  background: #ced4da;
  border-radius: 11px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.site-theme-toggle[aria-pressed="true"] .site-theme-track {
  background: #0d6efd;
}

.site-theme-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.site-theme-toggle[aria-pressed="true"] .site-theme-knob {
  transform: translateX(20px);
}

.site-sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
}

.site-sidebar-nav li a {
  display: block;
  padding: 12px 20px;
  color: #212529;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.15s;
}

.site-sidebar-nav li a:hover {
  background: #f8f9fa;
}

.site-sidebar-nav .nav-cart-link {
  display: inline-flex;
  align-items: center;
}

/* ---- MAIN / TOPBAR (never pushed aside — sidebar always overlays) ---- */
.site-main {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  flex-direction: column;
}

.site-main > main {
  flex: 1 0 auto;
}

.site-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 10px;
  border-bottom: 1px solid #dee2e6;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 900;
}

/* The topbar itself needs to outrank the sidebar's z-index (1000) while the
   panel is open — bumping only the button's z-index doesn't work here since
   .site-topbar already establishes its own stacking context as its parent */
.site-topbar:has(.hamburger.is-open) {
  z-index: 1001;
}

/* Left-side layouts only: the topbar's logo sits right next to the button,
   over the same left edge the sidebar occupies. Raising the topbar would
   otherwise duplicate the logo on top of the sidebar's own header — hide
   it there while open. Right-side layouts don't have this conflict (logo
   stays on the empty left side, X rises on the right), so they keep it. */
body:not(.layout-sidebar_right):not(.layout-hamburger_right) .site-topbar:has(.hamburger.is-open) .site-topbar-brand {
  display: none;
}

.site-topbar .hamburger {
  display: flex !important;
  order: 0;
}

.site-topbar-brand {
  order: 1;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}

.site-topbar-brand-text {
  font-size: clamp(0.8rem, 0.55rem + 1.3vw, 1.75rem);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

@media (max-width: 991.98px) {
  /* Logo reverted -- was fine as-is, the actual problem is purely the
     text. Going meaningfully smaller this time (a fixed value, not
     another incremental clamp range) since 0.8rem -> 0.65rem ->
     0.6rem across three rounds wasn't producing a visible difference. */
  .site-topbar-brand-text {
    font-size: 0.5rem;
    line-height: 1.1;
  }
}

.layout-sidebar_right .site-topbar .hamburger,
.layout-hamburger_right .site-topbar .hamburger {
  order: 2;
  margin-left: auto;
}

.layout-sidebar_right .site-topbar-brand,
.layout-hamburger_right .site-topbar-brand {
  order: 1;
}

/* ---- OVERLAY (shared by all off-canvas states) ---- */
.site-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

.site-sidebar-overlay.show {
  display: block;
}

/* ============================================================
   DARK / LIGHT MODE (site-wide, toggled from the sidebar panel)
   html[data-bs-theme="dark"] set by inline anti-flash script + site.js
   ============================================================ */

html[data-bs-theme="dark"] body {
  background: #16181c;
  color: #e9ecef;
}

html[data-bs-theme="dark"] .site-sidebar {
  background: #1e2126;
  border-color: #32363d;
}

html[data-bs-theme="dark"] .site-sidebar-header {
  border-color: #32363d;
}

html[data-bs-theme="dark"] .site-theme-toggle-wrap {
  border-color: #32363d;
}

html[data-bs-theme="dark"] .site-sidebar-close,
html[data-bs-theme="dark"] .site-theme-toggle {
  color: #e9ecef;
}

html[data-bs-theme="dark"] .site-theme-label {
  color: #adb5bd;
}

html[data-bs-theme="dark"] .site-sidebar-nav li a {
  color: #e9ecef;
}

html[data-bs-theme="dark"] .site-sidebar-nav li a:hover {
  background: #2a2e35;
}

html[data-bs-theme="dark"] .site-topbar {
  background: #1e2126;
  border-color: #32363d;
  color: #e9ecef;
}

html[data-bs-theme="dark"] .hamburger {
  color: #ffffff;
  border-color: rgba(255,255,255,0.25);
}

html[data-bs-theme="dark"] .site-topbar-brand {
  color: #e9ecef;
}

html[data-bs-theme="dark"] .page-content {
  color: #e9ecef;
}

html[data-bs-theme="dark"] .site-sidebar-overlay {
  background: rgba(0,0,0,0.7);
}

/* ============================================================
   HERO SLIDER (renders from tbl_slider when hero_video is off)
   ============================================================ */

.hero-slider {
  height: 60vh;
  min-height: 400px;
  max-height: 650px;
}

.hero-slider .carousel-item {
  height: 60vh;
  min-height: 400px;
  max-height: 650px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #000;
}

.hero-slider-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.hero-slider .carousel-caption {
  bottom: auto;
  top: 50%;
  left: 50%;
  right: auto;
  width: 90%;
  max-width: 700px;
  transform: translate(-50%, -50%);
}

.hero-slider .carousel-caption.align-center {
  left: 50%;
  right: auto;
  text-align: center;
  transform: translate(-50%, -50%);
}

.hero-slider .carousel-caption.align-left {
  left: 5%;
  right: auto;
  text-align: left;
  transform: translateY(-50%);
}

.hero-slider .carousel-caption.align-right {
  left: auto;
  right: 5%;
  text-align: right;
  transform: translateY(-50%);
}

.hero-slider .carousel-caption h2 {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.hero-slider .carousel-caption p {
  color: #ffffff;
  font-size: 1.15rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  margin-bottom: 1.25rem;
}

@media (max-width: 767.98px) {
  .hero-slider,
  .hero-slider .carousel-item {
    height: 42vh;
    min-height: 300px;
    max-height: 450px;
  }
  .hero-slider .carousel-caption h2 {
    font-size: 1.6rem;
  }
  .hero-slider .carousel-caption p {
    font-size: 1rem;
  }
}

/* ============================================================
   FOOTER NEWSLETTER SIGNUP
   ============================================================ */

.footer-newsletter-desc {
  font-size: 0.8rem;
  color: #adb5bd;
  margin-bottom: 12px;
}

.footer-newsletter-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.footer-newsletter-row {
  display: flex;
  gap: 0;
  max-width: 320px;
}

.footer-newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid #495057;
  border-right: none;
  border-radius: 6px 0 0 6px;
  background: #16181c;
  color: #e9ecef;
  font-size: 0.875rem;
}

.footer-newsletter-input::placeholder {
  color: #6c757d;
}

.footer-newsletter-input:focus {
  outline: none;
  border-color: var(--bs-primary, #0d6efd);
}

.footer-newsletter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--bs-primary, #0d6efd);
  border-radius: 0 6px 6px 0;
  background: var(--bs-primary, #0d6efd);
  color: var(--theme-primary-text, #ffffff);
  font-size: 0.9rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.footer-newsletter-btn:hover {
  opacity: 0.9;
}

.footer-newsletter-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.footer-newsletter-msg {
  font-size: 0.8rem;
  margin-top: 8px;
  min-height: 1.2em;
}

.footer-newsletter-msg-success {
  color: #75d68a;
}

.footer-newsletter-msg-error {
  color: #f28b82;
}

@media (max-width: 575.98px) {
  .footer-newsletter-row {
    max-width: 100%;
  }
}

/* ============================================================
   FOOTER HOURS (office hours / service hours, below logo)
   ============================================================ */

.footer-hours {
  margin-top: 14px;
}

.footer-hours-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 4px;
}

.footer-hours-text {
  font-size: 0.8rem;
  color: #adb5bd;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ============================================================
   SCROLL TO TOP BUTTON
   Position/color/size/border/radius all admin-configurable;
   this just handles the fixed positioning + show/hide transition
   ============================================================ */

.scroll-top-btn {
  position: fixed;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  z-index: 950;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

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

.scroll-top-btn:hover {
  filter: brightness(0.92);
}

.scroll-top-right {
  right: 24px;
}

.scroll-top-left {
  left: 24px;
}

@media (max-width: 575.98px) {
  .scroll-top-btn {
    bottom: 16px;
  }
  .scroll-top-right {
    right: 16px;
  }
  .scroll-top-left {
    left: 16px;
  }
}

/* ============================================================
   ACCESSIBILITY WIDGET
   ============================================================ */

.a11y-widget-btn {
  position: fixed;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  z-index: 950;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.a11y-widget-btn:hover {
  filter: brightness(0.92);
}

.a11y-widget-right {
  right: 24px;
}

.a11y-widget-left {
  left: 24px;
}

.a11y-widget-center {
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 575.98px) {
  .a11y-widget-btn {
    bottom: 16px;
  }
  .a11y-widget-right {
    right: 16px;
  }
  .a11y-widget-left {
    left: 16px;
  }
}

/* Modal option grid -- icon-in-circle cards, matching the reference
   layout style. Border color comes from --a11y-option-border, set
   inline on the grid container from PHP so it follows the theme's
   secondary/gold color the same way every other border fix tonight
   does (or the widget's own manual border color when theme-follow is
   off) -- never hardcoded here. */
.a11y-option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 575.98px) {
  .a11y-option-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.a11y-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
}

.a11y-option-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--a11y-option-border, #6c757d);
  font-size: 1.5rem;
  color: var(--a11y-option-border, #6c757d);
  transition: background 0.15s, color 0.15s;
}

.a11y-option-card:hover .a11y-option-circle {
  background: var(--a11y-option-border, #6c757d);
  color: #ffffff;
}

.a11y-option-card.a11y-option-active .a11y-option-circle {
  background: var(--a11y-option-border, #6c757d);
  color: #ffffff;
}

.a11y-option-label {
  font-size: 0.8rem;
  font-weight: 600;
}

.a11y-option-sublabel {
  font-size: 0.7rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* Text Size -- scales on top of whatever the theme's own fluid
   font-size clamp() already resolves to, rather than replacing it. */
html.a11y-text-large {
  font-size: calc(var(--bs-body-font-size, 1rem) * 1.15) !important;
}
html.a11y-text-larger {
  font-size: calc(var(--bs-body-font-size, 1rem) * 1.3) !important;
}

/* High Contrast -- targets the specific utility classes already
   confirmed elsewhere tonight to run low-contrast by design
   (text-secondary, text-muted, .small, text-white-50), forcing them
   to full-contrast values instead. */
html.a11y-high-contrast body {
  background: #ffffff !important;
  color: #000000 !important;
}
html.a11y-high-contrast .text-secondary,
html.a11y-high-contrast .text-muted,
html.a11y-high-contrast .text-white-50 {
  color: #000000 !important;
}
html.a11y-high-contrast .bg-body,
html.a11y-high-contrast .bg-body-tertiary,
html.a11y-high-contrast .bg-light-subtle {
  background: #ffffff !important;
}
html.a11y-high-contrast a {
  color: #0000ee !important;
}

/* Dyslexia-Friendly Font -- a widely-recommended, less-polarizing
   choice than the more famous "dyslexia fonts" (which most systems
   don't have installed anyway) -- wide, uniform letterforms and
   generous spacing are the actual research-supported factors. */
html.a11y-dyslexia-font,
html.a11y-dyslexia-font body {
  font-family: Verdana, Tahoma, Geneva, sans-serif !important;
  letter-spacing: 0.03em !important;
  line-height: 1.6 !important;
}

/* Underline Links */
html.a11y-underline-links a {
  text-decoration: underline !important;
}

/* Reduce Motion -- the CSS side handles transitions/animations;
   site.js separately pauses any active Bootstrap carousels, since
   their auto-advance is JS-driven and CSS alone can't stop it. */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Reduce Saturation / Monochrome -- applied to body so it covers
   photos, colored backgrounds, and buttons alike in one pass. */
html.a11y-reduce-saturation body {
  filter: saturate(0.5);
}
html.a11y-monochrome body {
  filter: grayscale(1);
}

/* Big Cursor -- a real, visibly larger cursor via inline SVG data URI,
   since CSS's own cursor keywords don't support custom sizing. */
html.a11y-big-cursor,
html.a11y-big-cursor * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="black" stroke="white" stroke-width="1" d="M3 2l18 8-7.5 2.5L11 20z"/></svg>') 4 4, auto !important;
}

/* Highlight Titles -- makes every heading visually distinct for
   easier page scanning, without altering the underlying markup. */
html.a11y-highlight-titles h1,
html.a11y-highlight-titles h2,
html.a11y-highlight-titles h3,
html.a11y-highlight-titles h4,
html.a11y-highlight-titles h5,
html.a11y-highlight-titles h6 {
  background: #fff3cd !important;
  color: #000000 !important;
  outline: 2px solid #997404;
  padding: 2px 6px;
}

/* Hide Images -- visibility rather than display:none, so layout
   spacing doesn't jump/reflow when toggled. */
html.a11y-hide-images img {
  visibility: hidden;
}

/* Text Spacing */
html.a11y-text-spacing body {
  letter-spacing: 0.05em !important;
  word-spacing: 0.15em !important;
}

/* Line Height */
html.a11y-line-height body,
html.a11y-line-height p,
html.a11y-line-height li {
  line-height: 2 !important;
}

/* Disclaimer collapse toggle -- caret flips to point up when expanded,
   same convention as any standard accordion. */
.a11y-disclaimer-caret {
  transition: transform 0.2s ease;
}
#a11yDisclaimerToggle[aria-expanded="true"] .a11y-disclaimer-caret {
  transform: rotate(180deg);
}

/* Google Translate dropdown not scrolling -- two confirmed, separate
   causes combining here:
   1. modal-dialog-scrollable sets overflow:hidden on .modal-content
      itself (a documented Bootstrap behavior, not a bug specific to
      us), which clips anything -- like Google's dropdown -- that
      needs to escape that boundary. Scoped to this modal only, so
      other modals on the site keep their normal scrollable behavior.
   2. Google's own translate widget isn't mobile-scroll-friendly by
      default without this exact override -- a well-documented issue
      with their widget generally, not something specific to this
      site or how it's embedded here. */
#a11yModal .modal-content {
  overflow: visible;
}
/* Google Translate -- proven working styling, not a guess: strips
   Google's default clutter (icon, banner, tooltips, activity
   indicators) down to a clean inline text link, which combined with
   a narrowed language list (see site.js) sidesteps the dropdown
   scrolling problem entirely rather than fighting it directly. Link
   color driven by the theme's secondary/gold color rather than a
   hardcoded value, matching every other accent color in this widget. */
#google_translate_element {
  margin: 0;
  padding: 0;
  height: 25px;
  display: inline-block;
}
.goog-te-gadget {
  display: inline-block !important;
}
.goog-te-gadget .goog-te-gadget-simple a {
  color: var(--bs-secondary, #FFB117);
  font-size: 16px !important;
}
.goog-te-gadget-simple {
  background-color: transparent !important;
  border: none !important;
  white-space: nowrap !important;
}
.goog-te-gadget-simple * {
  box-sizing: initial !important;
  margin: initial !important;
  padding: initial !important;
  display: inline !important;
  vertical-align: middle !important;
}
.goog-te-gadget-simple img {
  height: 11px !important;
  width: 11px !important;
}
.goog-te-menu-value {
  border: none !important;
}
.goog-te-menu2 {
  border: none !important;
}
.goog-te-menu-value span:first-child {
  border: none !important;
}
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame .skiptranslate {
  display: none !important;
}
/* Google pushes <body> down with an inline top offset to make room
   for its banner, even once the banner itself is hidden above --
   this is what actually closes the gap. */
body {
  top: 0 !important;
}
.goog-te-gadget-icon {
  display: none !important;
}
#goog-gt-tt,
.goog-tooltip.skiptranslate {
  display: none !important;
  top: 0 !important;
}
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.activity-root,
.status-message,
.started-activity-container {
  display: none !important;
}