/* =========================================================
   Plump Moose – Custom Overrides
   Loads AFTER theme.css to override vendor styles
   ========================================================= */

/* --- Goodies Font --- */
@font-face {
  font-family: 'Goodies';
  src: url('../assets/fonts/Goodies-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- Baloo Font --- */
@font-face {
  font-family: 'Baloo';
  src: url('../assets/fonts/baloo.regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- Brand Color Tokens --- */
:root {
  --pm-light: #8ECAE6;
  --pm-primary: #219EBC;
  --pm-dark: #023047;
  --pm-accent: #FFB703;
  --pm-accent-strong: #FB8500;
}

/* --- Site Baseline --- */
body {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #151515 !important;
  background-color: #f5f5f5 !important;
}

/* --- Typography – Display Fonts --- */
.swiper-slide h1 {
  font-family: 'HandmadeAlphabet', serif;
  letter-spacing: 0.04em;
}

.section__header h4,
.heading-decorated,
h2 {
  font-family: 'HandmadeAlphabet', serif;
  letter-spacing: 0.03em;
}

/* --- Typography – Body Text --- */
p,
.post-minimal p,
.quote-creative .q {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.65;
}

p {
  color: #333;
}

/* --- Typography – Inherit Rules --- */
.rd-navbar-nav a,
.rd-nav-link,
.button,
.thumb-corporate__title {
  font-family: inherit;
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--pm-dark);
}

h1 span,
h2 span,
.heading-decorated span {
  color: var(--pm-primary);
}

.bg-gray-dark h1,
.bg-gray-dark h2,
.bg-gray-dark h3,
.bg-gray-dark h4,
.bg-gray-dark h5,
.bg-gray-dark h6,
.bg-gray-dark p,
.bg-gray-3 p,
.bg-gray-3 h1,
.bg-gray-3 h2,
.bg-gray-3 h3,
.bg-gray-3 h4,
.bg-gray-3 h5,
.bg-gray-3 h6 {
  color: #f5f5f5;
}

/* --- Buttons --- */
.button-primary,
.button-primary:focus,
.button-primary:active {
  background-color: var(--pm-primary);
  border-color: var(--pm-primary);
  color: #000000 !important;
}

.button-primary:hover {
  background-color: var(--pm-accent-strong);
  border-color: var(--pm-accent-strong);
  color: var(--pm-dark);
}

.button-black,
.button-darker {
  background-color: var(--pm-dark);
  border-color: var(--pm-dark);
}

/* Theme overrides button-darker inside .bg-gray-dark to light text on light blue (#8ECAE6)
   which fails contrast. Force dark text instead. */
.bg-gray-dark .button-darker,
.bg-gray-dark .button-darker:focus,
.bg-gray-dark .button-darker:active {
  color: var(--pm-dark) !important;
}

/* --- Dark Section Backgrounds --- */
.bg-gray-dark {
  background-color: var(--pm-dark) !important;
}

.bg-gray-3 {
  background-color: #012635;
}

.bg-gray-4 {
  background-color: #f4f9fb;
}

.bg-gray-dark img {
  filter: none;
  mix-blend-mode: normal;
}

.bg-gray-dark::before {
  background-color: rgba(2, 48, 71, 0.85);
}

/* --- Decorative Dividers --- */
.object-decorated__divider,
.post-minimal__divider,
.divider {
  background-color: #FB8500;
}

/* --- Text Color: Section-Specific --- */
.small,
.text-small,
.cite,
.list-terms-inline dd,
.list-terms-inline dt,
.post-minimal__time,
.quote-creative__meta,
.quote-creative__meta .small {
  color: var(--pm-primary);
}

.post-minimal p {
  color: var(--pm-dark);
}

.quote-creative .q {
  color: var(--pm-dark);
}

/* --- Top Utility Bar --- */
.pm-topbar {
  background: #FB8500;
  color: var(--pm-dark);
  font-size: 15px;
  height: 36px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10002;
  width: 100%;
  flex: none;
}

.pm-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 16px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pm-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.pm-topbar-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.pm-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.pm-topbar-link {
  color: var(--pm-dark);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.pm-topbar-link img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.pm-topbar-link:hover {
  color: #023047;
}

@media (max-width: 768px) {
  /* Keep flex so align-items:center handles vertical containment.
     Force-hide the right side so the left div is the only flex item,
     then justify-content:center (from the 992px rule) naturally centers it. */
  .pm-topbar-right {
    display: none !important;
  }
  /* Scale the heart icon down so it fits inside the bar without overflow */
  .pm-topbar-icon {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (max-width: 992px) {
  .pm-topbar-inner {
    justify-content: center;
  }
  .pm-topbar-left {
    justify-content: center;
  }
  .pm-topbar {
    order: -1;
  }
}

/* --- Page Header --- */
.page-header {
  background: #f3f3f3;
}

.page-header,
.rd-navbar-wrap,
.rd-navbar {
  position: relative !important;
  top: auto !important;
  margin-top: 0 !important;
  display: block !important;
}

.rd-navbar-wrap {
  min-height: 80px;
}

/* Logo row spacing */
.rd-navbar-aside {
  padding: 40px 0 30px 0;
}

/* Divider line under logo row */
.rd-navbar-main-outer {
  border-top: 1px solid #dddddd;
}

/* Nav row spacing */
.rd-navbar-main {
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Desktop Navigation --- */
.rd-navbar-nav {
  display: flex;
  gap: 35px;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

/* On desktop, nav-wrap fills available width so items spread evenly
   across the row, keeping Contact Us well clear of the cart icon. */
@media (min-width: 993px) {
  .rd-navbar-nav-wrap {
    flex: 1;
  }
  .rd-navbar-nav {
    justify-content: space-evenly;
    gap: 0;
  }
}

.rd-navbar-nav > li {
  margin: 0;
}

.rd-navbar-nav a,
.rd-navbar-nav a:visited {
  color: var(--pm-dark) !important;
  font-size: 16px;
  font-weight: 500;
}

.rd-navbar-nav a:hover,
.rd-navbar-nav li.active > a {
  color: var(--pm-primary) !important;
}

/* Hamburger icon color */
.rd-navbar-toggle span,
.rd-navbar-toggle span::before,
.rd-navbar-toggle span::after {
  background-color: var(--pm-dark);
}

/* --- Custom Nav (pm-main-nav) --- */
.pm-main-nav {
  display: flex;
  gap: 55px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pm-main-nav li a {
  text-decoration: none;
  letter-spacing: 1px;
  font-family: inherit;
}

/* --- Custom Header Layout --- */
.pm-header-top {
  background: #f4f4f4;
  padding: 30px 0;
}

.pm-header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pm-logo img {
  display: block;
}

.pm-header-divider {
  border-top: 1px solid #e0e0e0;
}

.pm-header-nav {
  background: #f4f4f4;
}

.pm-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.pm-nav-cart {
  display: flex;
  align-items: center;
}

.pm-logo-row {
  padding: 30px 0 15px 0;
}

.pm-nav-row {
  border-top: 1px solid #e5e5e5;
  padding: 15px 0;
}

/* --- Mobile / Desktop Visibility --- */
.pm-mobile-only {
  display: none !important;
}

.pm-desktop-only {
  display: flex !important;
}

@media (max-width: 992px) {
  .pm-mobile-only {
    display: block !important;
  }
  .pm-desktop-only {
    display: none !important;
  }
}

/* --- Cart Overlay --- */
.pm-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10010;
  display: none;
}

.pm-cart-overlay.active,
body.pm-cart-open .pm-cart-overlay {
  display: block;
}

/* --- Cart Drawer --- */
.pm-cart-drawer {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  max-width: 90%;
  height: 100vh;
  background: #f5f5f5;
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transition: right 0.35s ease;
  z-index: 10011;
}

.pm-cart-drawer.active,
body.pm-cart-open .pm-cart-drawer {
  right: 0;
}

@media (max-width: 768px) {
  .pm-cart-drawer {
    width: 100%;
    right: -100%;
  }
}

.pm-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  z-index: 1;
}

.pm-cart-header h4 {
  margin: 0;
  font-family: 'HandmadeAlphabet', serif;
}

.pm-cart-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  position: relative;
  z-index: 2;
}

.pm-cart-items {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.pm-cart-empty {
  font-size: 14px;
  opacity: 0.7;
}

.pm-cart-footer {
  padding: 16px;
  border-top: 1px solid #e5e5e5;
}

.pm-cart-subtotal {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pm-cart-view,
.pm-cart-checkout {
  display: block;
  text-align: center;
  padding: 10px;
  margin-top: 8px;
  text-decoration: none;
  font-weight: 600;
}

.pm-cart-view {
  border: 1px solid #023047;
  color: #023047;
  transition: background 0.2s, color 0.2s;
}
.pm-cart-view:hover {
  background: #219ebc;
  color: #f5f5f5;
}

.pm-cart-checkout {
  background: #023047;
  color: #f5f5f5;
  transition: background 0.2s;
}
.pm-cart-checkout:hover {
  background: #FB8500;
  color: #fff;
}

.pm-cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.pm-cart-thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
  background: #219ebc;
  flex-shrink: 0;
  padding: 4px;
}

.pm-cart-thumb-placeholder {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: 6px;
  background: #f0ebe3;
  flex-shrink: 0;
}

.pm-cart-item-info {
  flex: 1;
  min-width: 0;
}

.pm-cart-item-name {
  font-weight: 600;
  margin: 0;
  color: #151515;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-cart-item-price {
  margin: 4px 0 0;
  color: #666;
  font-size: 13px;
}

.pm-cart-item-remove {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
}

.pm-cart-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.pm-cart-trigger:hover {
  transform: scale(1.1);
}

.pm-cart-trigger img {
  width: 26px;
  height: auto;
  display: block;
}

/* Cart item count badge */
.pm-cart-trigger {
  position: relative;
}

.pm-cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #FB8500;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

.pm-cart-wrapper {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.pm-desktop-cart {
  margin-left: 20px;
}

.pm-desktop-cart .pm-cart-trigger,
.pm-cart-wrapper .pm-cart-trigger {
  display: inline-flex !important;
  padding-right: 0;
}

.pm-desktop-cart .pm-cart-trigger img {
  display: block !important;
}

/* Cart: mobile text link */
.pm-mobile-cart a {
  font-weight: 600;
  color: #023047;
}

.rd-navbar-fixed .pm-mobile-cart a:hover {
  color: var(--pm-accent-strong);
}

/* --- Auth Overlay --- */
.pm-auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 11000;
}

.pm-auth-overlay.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Mobile Auth Links --- */
.pm-mobile-auth a {
  font-weight: 600;
  color: #023047;
}

.rd-navbar-fixed .pm-mobile-auth a:hover {
  color: var(--pm-accent-strong);
}

/* --- Mobile CTA in white gap area --- */
.pm-mobile-cta-wrapper {
  display: none;
}

@media (max-width: 991px) {
  /* Grid wrapper: single column, both rows always span identical width */
  .pm-mobile-cta-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    flex: 1;
    padding: 0 16px;
    gap: 6px;
  }

  /* Top row: Sign In + Cart centered */
  .pm-mobile-quickbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
  }

  /* Sign In / logged-in chip — icon + label always move together */
  .pm-mob-signin,
  .pm-mob-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #023047;
    text-decoration: none;
  }
  .pm-mob-signin:hover,
  .pm-mob-signin:focus,
  .pm-mob-user:hover,
  .pm-mob-user:focus {
    color: #023047;
    text-decoration: none;
  }
  .pm-mob-signin i,
  .pm-mob-user i {
    font-size: 20px;
    color: #023047;
  }
  .pm-mob-signin img,
  .pm-mob-user img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
  .pm-mob-user span {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pm-mob-cart {
    padding: 4px 0;
  }

  /* Bottom row: block so width:100% fills the grid cell, margin:0 kills theme's * + .button top margin */
  .pm-mob-cta.button {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center;
  }
}

/* ── Mobile: collapse aside desktop spacing + hide now-empty content-outer ── */
/* NOTE: Selectors intentionally omit .rd-navbar-fixed to prevent CLS.
   RD Navbar JS adds that class AFTER first paint, causing the header to
   shrink and the swiper to shift. By using only the media query, these
   styles are applied from the very first CSS render — no JS-triggered shift. */
@media (max-width: 992px) {
  .rd-navbar-aside {
    padding: 0 !important;
  }
  .rd-navbar-content-outer,
  .rd-navbar-content__toggle {
    display: none !important;
  }
}

/* Hide quickbar on desktop */
@media (min-width: 992px) {
  .pm-mobile-quickbar { display: none; }
}

/* --- Mobile Nav Fixes --- */
/* NOTE: Selectors intentionally omit .rd-navbar-fixed to prevent CLS.
   These rules are applied from first CSS render so JS adding that class
   causes no visual change (no layout shift). */
@media (max-width: 992px) {
  /* Hide desktop cart icon on mobile - it's in the utility bar now */
  .pm-cart-wrapper {
    display: none;
  }

  /* Hide swiper arrows on mobile - dots handle navigation */
  .swiper-navigation_modern {
    display: none !important;
  }

  .pm-cart-trigger {
    position: relative;
    z-index: 1;
  }
  /* Take nav wrap out of flow immediately so nothing shifts when JS runs */
  .rd-navbar-nav-wrap {
    position: absolute !important;
    top: 0;
    bottom: auto;
    height: 100vh;
    overflow-y: auto;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .rd-navbar-nav {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* --- Nav Font & Readability --- */
.rd-navbar .rd-navbar-nav > li > a {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* --- Fixed Navbar Overrides --- */
/* Force dark text for ALL nav link states in mobile fixed mode.
   Theme uses #f5f5f5 text on brownish #9d7f6c bg for active/hover states — fails contrast.
   Override all states to dark navy on transparent (inherits #f5f5f5 from nav-wrap bg). */
.rd-navbar-fixed .rd-navbar-nav li > a,
.rd-navbar-fixed .rd-navbar-nav a:hover,
.rd-navbar-fixed .rd-navbar-dropdown a:hover,
.rd-navbar-fixed .rd-navbar-nav li.focus > a,
.rd-navbar-fixed .rd-navbar-nav li.active > a,
.rd-navbar-fixed .rd-navbar-nav li.opened > a {
  color: #023047 !important;
}

.rd-navbar-fixed .rd-navbar-nav li > a {
  background: transparent !important;
}

.rd-navbar-fixed .rd-navbar-nav li:hover > a,
.rd-navbar-fixed .rd-navbar-nav li.active > a,
.rd-navbar-fixed .rd-navbar-nav li.focus > a,
.rd-navbar-fixed .rd-navbar-nav li.opened > a {
  background-color: rgba(2, 48, 71, 0.08) !important;
}

/* --- Swiper Controls --- */
.swiper-pagination-bullet {
  background: var(--pm-light);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: var(--pm-accent-strong);
}

.swiper-button-prev,
.swiper-button-next {
  color: var(--pm-accent);
  transition: color 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  color: var(--pm-accent-strong);
}

.swiper-button-prev::before,
.swiper-button-next::before {
  color: #023047 !important;
}

.swiper-button-prev:hover::before,
.swiper-button-next:hover::before {
  color: var(--pm-accent-strong) !important;
}

/* Add transparency to the white navigation button backgrounds only */
/* display handled per breakpoint - desktop only */
@media (min-width: 993px) {
  .swiper-navigation_modern {
    display: flex !important;
  }
}

.swiper-navigation_modern {
  background: transparent !important;
  padding: 10px 5px !important;
  gap: 19px !important;
  bottom: -2px !important;
}

.swiper-navigation_modern .swiper-button-prev,
.swiper-navigation_modern .swiper-button-next {
  background: rgba(245, 245, 245, 0.7) !important;
  width: 120px !important;
  height: 100px !important;
  padding: 20px 24px !important;
  border-radius: 4px !important;
}

.swiper-navigation_modern .swiper-button-prev::before,
.swiper-navigation_modern .swiper-button-next::before {
  background: transparent !important;
  line-height: 64px !important;
}

.swiper-navigation_modern .swiper-button-prev:hover,
.swiper-navigation_modern .swiper-button-next:hover {
  background: rgba(245, 245, 245, 0.85) !important;
}

.swiper-slide h1,
.swiper-slide h2,
.swiper-slide h4 {
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 6px 20px rgba(0, 0, 0, 0.4);
}

/* --- Owl Carousel Controls --- */
.owl-dot,
.owl-dot:focus {
  background: rgba(33, 158, 188, 0.3) !important;
}

.owl-dot:hover,
.owl-dot.active {
  background-color: var(--pm-primary) !important;
}

/* Override theme brown (#9d7f6c) on owl dots inside dark card backgrounds */
.bg-gray-dark .owl-carousel .owl-dot:hover,
.bg-gray-dark .owl-carousel .owl-dot.active {
  background-color: var(--pm-primary) !important;
}

.owl-arrow {
  color: var(--pm-primary);
}

.owl-arrow:hover {
  color: var(--pm-dark);
}

/* Override theme brown (#9d7f6c) on carousel prev/next arrows */
.owl-prev:hover,
.owl-next:hover {
  background: var(--pm-dark) !important;
  color: #fff !important;
}

/* Override "See More" button hover sweep color in project cards */
.thumb-janez .button-darker::before,
.thumb-janez .button-darker:hover::before {
  background: var(--pm-primary) !important;
}
.bg-gray-dark .button-darker::before,
.bg-gray-dark .button-darker:hover::before {
  background: var(--pm-primary) !important;
}

/* --- Footer --- */
.footer-modern a,
.footer-modern a:visited {
  color: var(--pm-light);
}

.footer-modern a:hover {
  color: var(--pm-accent);
}

.footer-modern .icon-style-modern {
  color: var(--pm-light);
}

.footer-modern .icon-style-modern:hover {
  color: var(--pm-accent-strong);
}

.footer-modern p,
.footer-modern dd,
.footer-modern dt {
  color: var(--pm-light);
}

/* --- Preloader --- */
.preloader {
  background-color: var(--pm-dark);
}

.loadingProgressG {
  background-color: var(--pm-accent-strong);
}

.loadingProgressG::before {
  background-color: var(--pm-accent);
}

/* --- Back to Top Button (square, consistent across all pages) --- */
.ui-to-top,
.scrollToTop,
.back-to-top {
  position: fixed;
  bottom: 28px;
  left: 28px !important;
  right: auto !important;
  width: 40px;
  height: 40px;
  font-size: 24px;
  line-height: 38px;
  text-align: center;
  text-decoration: none;
  color: #f5f5f5 !important;
  background: #023047 !important;
  border: none;
  cursor: pointer;
  z-index: 9999;
  transform: translateY(100px);
  transition: background 0.3s ease, transform 0.3s ease;
}

.ui-to-top.active,
.scrollToTop.active,
.back-to-top.active {
  transform: translateY(0);
}

.ui-to-top:hover,
.scrollToTop:hover,
.back-to-top:hover {
  background: #FB8500 !important;
  color: #f5f5f5 !important;
}

/* --- Create Your Own Sign CTA (navbar) --- */
.rd-navbar-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pm-cta-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  user-select: none;
}

.pm-cta-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Baloo', serif;
  font-size: 27px;
  font-weight: normal;
  color: #219EBC;
  line-height: 1.25;
  letter-spacing: 0.4px;
  text-shadow: 1px 2px 4px rgba(180, 180, 180, 0.6);
}
.pm-cta-wrap:hover .pm-cta-text {
  color: #1a7a92;
}

/* Dark brown animated scene box */
.pm-cta-scene {
  position: relative;
  width: 180px;
  height: 110px;
  flex: 0 0 180px; /* lock width, prevent flex from stretching */
  background-image: url('../assets/images/darkbrown.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 3px 4px 12px rgba(0,0,0,0.45);
  border-radius: 2px;
  border: 3px solid rgb(2, 48, 71);
}

/* State crossfade layers */
.pm-cta-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-cta-layer-a { opacity: 1; }
.pm-cta-layer-b { opacity: 0; }

.pm-cta-state {
  display: block;
  width: auto;
  height: auto;
  max-width: 126px; /* 70% of 180px — explicit px, percentages unreliable in abs/flex context */
  max-height: 77px; /* 70% of 110px */
  object-fit: contain;
  filter: brightness(1.15) drop-shadow(1px 2px 3px rgba(0,0,0,0.55));
}

.pm-cta-heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  max-width: 18px;
  pointer-events: none;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.4));
  overflow: visible;
}

/* Brush — starts off the right edge, JS animates it */
.pm-cta-brush {
  position: absolute;
  top: 50%;
  left: 0;
  height: 85%;
  width: auto;
  transform: translateX(210px) translateY(-50%) rotate(30deg);
  transform-origin: center center;
  z-index: 5;
  pointer-events: none;
}

/* Hide on mobile */
@media (max-width: 991px) {
  .rd-navbar-content-outer {
    display: none !important;
  }
}

/* --- Portfolio Cards: Mobile Fix --- */
/* theme.css sets align-items but not display:flex or height on mobile,
   causing absolute-positioned images to have no container height */
@media (max-width: 767px) {
  .thumb-janez {
    display: flex;
    min-height: 280px;
  }
  /* bg-gray-dark uses !important in style.css, overriding theme's transparent mobile setting */
  .thumb-janez__content.bg-gray-dark {
    background-color: transparent !important;
  }
}

/* --- Accessibility: Form Contrast --- */
/* Theme default form input text (#9b9b9b on #f5f5f5) fails WCAG 4.5:1.
   Override with a darker color for sufficient contrast. */
.form-input {
  color: #333;
}

.form-label,
.form-label-outside,
.rd-input-label {
  color: #444;
}

/* ============================================================
   Mobile Bottom Nav
   ============================================================ */
.pm-bottom-nav {
  display: none; /* desktop: hidden */
}

@media (max-width: 991px) {

  /* Show bottom nav */
  .pm-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: #023047;
    border-top: 2px solid rgba(255,255,255,0.1);
    z-index: 10003; /* below cart drawer (10011) so cart slides over it */
    padding-bottom: env(safe-area-inset-bottom, 0); /* iPhone home bar */
  }

  .pm-bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: color 0.2s;
  }

  .pm-bnav-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .pm-bnav-item:hover,
  .pm-bnav-item:active {
    color: #FB8500;
  }

  /* Cart wrap — holds icon + badge */
  .pm-bnav-cart-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Badge on cart icon */
  .pm-bnav-badge {
    position: absolute !important;
    top: -6px !important;
    right: -8px !important;
    background: #FB8500;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  /* Logged-in user label — not clickable, just informational */
  .pm-bnav-user {
    cursor: default;
    color: rgba(255,255,255,0.6);
  }
  .pm-bnav-user span {
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Push page content above the bottom nav */
  body {
    padding-bottom: 62px !important;
  }

  /* Hide the old hamburger toggle */
  .rd-navbar-toggle {
    display: none !important;
  }

  /* Hide only the icon row (sign-in + cart) — those live in bottom nav now */
  .pm-mobile-quickbar {
    display: none !important;
  }

  /* Keep the Create Your Own Sign button visible in the mobile header */
  .pm-mobile-cta-wrapper {
    display: flex !important;
    justify-content: center;
    padding: 6px 12px;
  }

  /* Push tawk.to chat bubble above the bottom nav */
  #tawk-bubble-container,
  .tawk-min-container {
    bottom: 72px !important;
  }

}

/* --- CLS Fix: Pre-set fixed navbar page offset ---
   JS adds rd-navbar-fixed-linked to <html> at ~370ms, triggering:
     html.rd-navbar-fixed-linked .page { padding-top: 56px }   (theme.css)
   Pre-setting this in CSS before JS runs makes that change a visual no-op,
   eliminating the main-content layout shift. Navbar is fixed at ≤991px
   (data-md-layout="rd-navbar-fixed"), static at ≥992px (no offset needed). */
@media (max-width: 991px) {
  .page {
    padding-top: 56px;
  }
}

/* --- CLS Fix: Owl Carousel pre-init --- */
/* Before Owl JS runs it adds .owl-loaded. Without this, all carousel items
   stack vertically (~1900px) and then collapse to one row when JS fires,
   causing a massive Cumulative Layout Shift. This clips the container to one
   item height until Owl takes over. */
.owl-carousel:not(.owl-loaded) {
  overflow: hidden;
  max-height: 420px;
}
@media (max-width: 767px) {
  .owl-carousel:not(.owl-loaded) {
    max-height: 320px;
  }
}

/* --- Banner image aspect ratio fix ---
   Theme sets width:100% but no height override, so HTML height attribute locks height
   at a fixed px value causing ratio mismatch at smaller containers. Force height:auto.
   Scoped to ≥768px only — at mobile the theme uses position:absolute + height:100%
   (object-fit: cover) and overriding that breaks the card layout and causes CLS. */
@media (min-width: 768px) {
  .thumb-janez img {
    height: auto;
  }
}

/* --- Heading Visual Size Corrections (semantic levels changed for a11y) --- */
/* Portfolio card titles: h5→h3 for heading order; restore h5 visual size */
.thumb-janez h3 {
  font-size: 18px;
  line-height: 1.33333;
}

/* Swiper banner captions: match h2 size to h1 across all breakpoints */
.swiper-slide-caption h2 {
  font-size: 32px;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .swiper-slide-caption h2 {
    font-size: 56px;
    line-height: 1.4;
  }
}

@media (min-width: 992px) {
  .swiper-slide-caption h2 {
    font-size: 62px;
    line-height: 1.2;
  }
}

@media (min-width: 1200px) {
  .swiper-slide-caption h2 {
    font-size: 70px;
  }
}

/* Swiper banner captions: h4→p for heading order; restore caption appearance */
.swiper-slide-caption p {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Swiper subtitle: orange accent bar as wide backdrop behind text */
/* Using ::before pseudo-element — avoids the WOW animation system
   which forces opacity:0 on the .not-animated divider span */
.swiper-slide-caption .object-decorated {
  position: relative !important;
  display: inline-block !important;
  padding: 5px 18px !important;
  margin-left: 0 !important;
  text-align: center !important;
}

.swiper-slide-caption .object-decorated::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #FB8500;
  border-radius: 3px;
  opacity: 0.82;
  z-index: 0;
}

/* Hide the original divider span — replaced by ::before above */
.swiper-slide-caption .object-decorated__divider {
  display: none !important;
}

.swiper-slide-caption .object-decorated p {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* "Find Us In Person" section header: h4→h2 for heading order; restore h4 visual size */
#news h2 {
  font-size: 22px;
  line-height: 1.35;
}

/* --- Mobile: Center navbar logo --- */
/* Theme sets .rd-navbar-fixed .rd-navbar-brand to position:fixed; left:56px
   (right after the 48px toggle button). Override just the left position and
   add a centering transform — everything else stays as the theme intended. */
@media (max-width: 991px) {
  .rd-navbar-fixed .rd-navbar-brand {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 767px) {
  /* Footer logo */
  .footer-modern .brand,
  .footer-modern .brand__name {
    display: block;
    text-align: center;
  }
  /* Footer headings: hide left decorative line, center text */
  .footer-modern .heading-decorated {
    padding-left: 0;
    text-align: center;
  }
  .footer-modern .heading-decorated::before {
    display: none;
  }
  /* Useful Links: switch from 3-column grid to vertical centered list */
  .footer-modern .list-nav {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    margin-left: 0;
  }
  .footer-modern .list-nav > li {
    width: auto;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
}

/* Anchor scroll offset — keeps section headings below the sticky navbar */
#contact {
  scroll-margin-top: 75px;
}