/* ScreenHouse Static Site Styles */

/* ── Theme Variables ── */
:root {
  /* Brand palette */
  --sh-primary: #39b54a;
  --sh-primary-light: #8bda81;
  --sh-secondary: #192433;
  --sh-accent: #28a745;
  --sh-dark: #00354b;
  --sh-footer-bg: #1a1a2e;
  --sh-mega-accent: #0d6efd;

  /* Neutral palette */
  --sh-text: #192433;
  --sh-text-muted: #aaa;
  --sh-border: #dee2e6;
  --sh-bg-light: #f8f9fa;
  --sh-bg-muted: #efefef;

  /* Overlays */
  --sh-overlay: rgba(0, 0, 0, 0.5);
  --sh-overlay-dark: rgba(1, 15, 28, 0.5);

  /* Typography */
  --sh-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Bootstrap overrides — maps theme colors to Bootstrap utilities */
  --bs-primary: var(--sh-primary);
  --bs-primary-rgb: 57, 181, 74;
  --bs-success: var(--sh-accent);
  --bs-success-rgb: 40, 167, 69;
  --bs-body-font-family: var(--sh-font-family);
  --bs-body-color: var(--sh-text);
  --bs-border-color: var(--sh-border);
  --bs-light: var(--sh-bg-light);
  --bs-light-rgb: 248, 249, 250;
  --bs-link-color: var(--sh-primary);
  --bs-link-hover-color: var(--sh-accent);
}

/* Base */
body {
  font-family: var(--sh-font-family);
  overflow-x: hidden;
}

/* White outline button (used on dark/hero backgrounds) */
.btn-outline-white {
  color: #fff;
  border-color: #fff;
  background-color: transparent;
}

.btn-outline-white:hover,
.btn-outline-white:focus,
.btn-outline-white:focus-visible {
  color: var(--sh-secondary);
  background-color: #fff;
  border-color: #fff;
  box-shadow: none;
}

/* Sticky Header */
.tp-header-sticky.header-sticky {
  position: fixed !important;
  left: 0;
  margin: auto;
  top: 0;
  width: 100%;
  z-index: 99;
  animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  box-shadow: 0px 2px 6px rgba(1, 15, 28, 0.16);
  background: #fff;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mega Menu */
.mega-dropdown {
  position: static;
}

.mega-menu {
  width: 100%;
  left: 0;
  right: 0;
  border: none;
  border-top: 1px solid var(--sh-border);
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-top: 0;
}

/* Hover to open dropdown (desktop only) */
@media (min-width: 768px) {
  .mega-dropdown:hover > .mega-menu {
    display: block;
  }

  .mega-dropdown > .nav-link {
    cursor: pointer;
  }
}

.mega-menu-title {
  font-size: 0.95rem;
  border-bottom: 2px solid var(--sh-mega-accent);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

.mega-menu-title:hover {
  color: var(--sh-mega-accent) !important;
}

.mega-menu ul li a:hover {
  color: var(--sh-mega-accent) !important;
}

/* Desktop header layout */
.header-desktop {
  min-height: 50px;
}

.header-logo {
  margin-right: 0.5rem;
}

/* Navigation */
.main-nav {
  min-width: 0;
  margin-left: 2em;
}

.main-nav .nav {
  flex-wrap: nowrap;
}

.main-nav .nav-link {
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.9rem 0.75rem;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--sh-text);
  transition: color 0.2s, background-color 0.2s;
}

.main-nav .mega-dropdown {
  border-left: 1px solid var(--sh-border);
}

/* Right border on the last visible item */
.main-nav .mega-dropdown:last-of-type {
  border-right: 1px solid var(--sh-border);
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus {
  color: var(--sh-primary);
  background-color: var(--sh-bg-light);
}

/* Header icons */
.header-icons {
  margin-left: auto;
  gap: 0.25rem;
}

.header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: var(--sh-text);
  text-decoration: none;
  transition: color 0.2s;
}

.header-icon:hover {
  color: var(--sh-primary);
}

/* Progressive nav item hiding at tighter widths */
/* nav-hide-1 = last item, nav-hide-2 = second to last, nav-hide-3 = third to last */
@media (min-width: 768px) and (max-width: 991px) {
  .main-nav .nav-link {
    font-size: 0.78rem;
    padding: 0.85rem 0.5rem;
  }
  .main-nav {
    margin-left: 1em;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .main-nav .nav-hide-1 {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 819px) {
  .main-nav .nav-hide-2 {
    display: none;
  }
}

/* Dropdown caret removal */
.main-nav .nav-link.dropdown-toggle::after {
  display: none;
}

/* Hero sections */
.hero {
  min-height: 300px;
}

.hero-default {
  position: relative;
  overflow: hidden;
}

.hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(0, 0, 0, 1);
  margin-bottom: 0;
  line-height: 3.5rem;
  color: #fff;
}

@media (max-width: 767px) {
  .hero-title {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}

/* Breadcrumb/Hero overlay */
.breadcrumb__overlay {
  position: relative;
}

.breadcrumb__overlay::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--sh-overlay-dark);
  z-index: 0;
}

.breadcrumb__title {
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  margin-bottom: 6px;
  color: #fff;
}

@media (max-width: 767px) {
  .breadcrumb__title {
    font-size: 32px;
  }
}

/* Hero Fullscreen */
.hero-fullscreen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hero Search */
.hero-search {
  background-color: var(--sh-bg-light);
}

/* Z-index utility */
.z-index-1 {
  z-index: 1;
}

/* Include background utility */
.include-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Content areas */
.content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
}

.content h2 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.content ul, .content ol {
  margin-bottom: 1rem;
}

/* WYSIWYG (page.main rich text) link lists — nicer arrow bullets, tighter spacing.
   The editor wraps each item as <li><p><a>…</a></p></li>, so kill the inner <p>
   margins and drive the rhythm from the <li>. */
.main-richtext ul {
  list-style: none;
  padding-left: 1rem;
  margin-bottom: 2rem;
}
.main-richtext ul li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 0.75rem;
  margin-bottom: 0.75rem;
}
.main-richtext ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: 700;
  line-height: inherit;
}
.main-richtext ul li p {
  margin: 0;
}

/* Cards */
.card {
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* Grid sections */
.catalog-grid .card-img-top,
.category-grid .card-img-top,
.product-grid .card-img-top,
.custom-grid .card-img-top {
  object-fit: cover;
}

/* Gallery */
.sh-gallery__main {
  background: var(--sh-bg-light);
  border-radius: 8px;
  overflow: hidden;
}

.sh-gallery__main .splide__slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sh-gallery__main-img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  display: block;
}

.sh-gallery__link {
  display: block;
  position: relative;
  cursor: zoom-in;
}

.sh-gallery__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--sh-overlay);
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.sh-gallery__link:hover .sh-gallery__zoom {
  opacity: 1;
}

/* Native scrollable thumbnail strip (replaces the Splide nav carousel) */
.sh-gallery__thumbs-strip {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.sh-gallery__thumb {
  flex: 0 0 auto;
  width: 100px;
  height: 100px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.sh-gallery__thumb:hover { opacity: 0.9; }
.sh-gallery__thumb.is-active { border-color: #000; opacity: 1; }

.sh-gallery__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .sh-gallery__thumb { width: 70px; height: 70px; }
}

@media (max-width: 767px) {
  .sh-gallery__main-img {
    max-height: 400px;
  }
}

/* About Section - copied from original Nuxt project */
.tp-about-area {
  padding-top: 0;
}

.pt-95 {
  padding-top: 0;
}

#about-screenhouse #about-nav {
  display: none
}

#about-screenhouse .static {
  position: absolute;
  z-index: 2;
  width: 100%;
  top: 50%;
  left: 50%;
  text-align: center;
  opacity: 1;
  transition: all .25s ease-in-out;
  transform: translate(-50%, calc(-50% - .5px))
}

@media (min-width:1200px) {
  #about-screenhouse .static {
    width: 50%;
    left: auto;
    right: 0;
    transform: translate(0, calc(-50% - .5px))
  }
}

#about-screenhouse .static span {
  display: block
}

#about-screenhouse #about-nav .inner {
  justify-content: center;
  display: flex;
  flex-direction: column;
  position: absolute;
  padding: 1em;
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9;
}

#about-screenhouse #about-nav .inner p,
#about-screenhouse #about-nav .inner h3 {
  color: #fff;
}

#about-screenhouse .subtitle {
  color: #fff;
  font-size: 1.1em;
  font-weight: 700;
  padding: 0 2em
}

@media (min-width:767px) {
  #about-screenhouse .subtitle {
    padding: 0 10em
  }
}

#about-screenhouse .static .btn {
  display: table;
  margin: 30px auto 0
}

#about-screenhouse .static.hidden {
  opacity: 0;
  transition-delay: .25s
}

@media (min-width:1200px) {
  #about-screenhouse #about-nav {
    display: block;
    height: 450px;
    position: absolute;
    width: 50%;
    left: 0;
    overflow: hidden
  }
}

#about-screenhouse {
  position: relative;
  overflow: hidden;
  height: 470px
}

@media (min-width:375px) {
  #about-screenhouse {
    height: 400px
  }
}

@media (min-width:768px) {
  #about-screenhouse {
    height: 300px
  }
}

@media (min-width:1200px) {
  #about-screenhouse,
  #about-screenhouse #about-nav {
    height: 385px
  }
}

@media (min-width:1400px) {
  #about-screenhouse,
  #about-screenhouse #about-nav {
    height: 450px
  }
}

#about-screenhouse #about-nav .slat {
  cursor: pointer;
  position: relative;
  z-index: 5;
  top: 0;
  height: 100%;
  width: 33.333%;
  display: block;
  overflow: hidden;
  float: left;
  border-right: 2px solid #000
}

#about-screenhouse #about-nav .slat .feature {
  position: absolute;
  z-index: 5;
  width: 100%;
  top: 50%;
  left: 50%;
  font-size: 1.5rem;
  line-height: 1.15;
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, .75);
  transform: translate(-50%, -25px)
}

@media (min-width:991px) {
  #about-screenhouse #about-nav .slat .feature {
    font-size: 2rem;
    line-height: 1.15
  }
}

#about-screenhouse #about-nav .slat .feature span {
  display: block
}

#about-screenhouse #about-nav .slat .image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  background-color: var(--sh-dark);
  z-index: 4;
  top: 0;
  right: -170%;
  height: 110%;
  width: 350%;
  opacity: .75;
  transition: all .2s ease-in-out;
  background-blend-mode: luminosity
}

#about-screenhouse #about-nav .slat.active .image,
#about-screenhouse #about-nav .slat:hover .image {
  opacity: 0.5;
  background-color: var(--sh-primary-light)
}

#about-screenhouse #about-nav .slat .color {
  background-color: var(--sh-dark);
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all .2s ease-in-out
}

#about-screenhouse #about-nav .slat .color img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#about-screenhouse #about-nav .slat.active .color,
#about-screenhouse #about-nav .slat:hover .color {
  background-color: #cfc
}

#about-screenhouse #about-nav .slat.toggled .inner {
  display: flex;
}

#about-screenhouse #about-nav .slat .inner {
  display: none;
}

#about-screenhouse #about-nav .slat.toggled .feature {
  display: none;
}

#about-screenhouse #about-nav .slat .inner a:not(.btn) {
  color: var(--sh-primary-light);
}

#about-screenhouse .bg,
#about-screenhouse .hero-bg {
  background-position: left center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

#about-screenhouse-mobile {
  position: relative;
  background-color: var(--sh-dark);
  display: flex;
  align-items: center
}

#about-screenhouse-mobile span {
  flex: 1;
  padding: 20px;
  text-align: center;
  color: #fff;
  border-right: 1px solid #777;
  font-weight: 700
}

#about-screenhouse-mobile span:last-child {
  border-right: none;
}

@media (min-width:1200px) {
  #about-screenhouse-mobile {
    display: none
  }
}

/* Footer */
.bg-sh-dark {
  background-color: var(--sh-footer-bg);
  color: #fff;
}

.tp-footer-widget-title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--sh-accent);
}

.tp-footer-social {
  display: flex;
  gap: 15px;
}

.tp-footer-social .social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  color: #fff;
  transition: background 0.3s ease;
}

.tp-footer-social .social:hover {
  background: var(--sh-accent);
}

.tp-footer-social .social svg {
  width: 18px;
  height: 18px;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: var(--sh-text-muted);
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--sh-accent);
  text-decoration: none;
}

.payment-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.payment-links .p-icon {
  background: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  /* Intrinsic width/height attrs (for CLS/aspect-ratio) are display-normalized here:
     keep the icons 30px tall with proportional width regardless of the attribute values. */
  height: 30px;
  width: auto;
}

footer a {
  color: var(--sh-primary-light);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 991px) {
  #about-nav .slat {
    min-height: 120px;
  }

  .static.hero {
    min-height: 300px;
  }
}

/* Content Page Blocks Grid */
.content-block-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 4px;
}

.content-block-item {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  cursor: pointer;
}

.content-block-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.content-block-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--sh-overlay);
  z-index: 1;
  transition: background-color 0.3s ease;
}

.content-block-item:hover::before {
  background-color: rgba(0, 0, 0, 0);
}

.content-block-item a {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.content-block-item a span,
.content-block-item a small {
  display: block;
}

.content-block-item h2 {
  display: block;
  font-size: 2rem;
  width: 100%;
  color: #fff;
  font-weight: 900;
  position: relative;
  z-index: 1;
  margin: 0 0 -10px 0;
  text-shadow: 0 0 10px #000;
  line-height: 1.2em;
}

.content-block-item small {
  font-size: 80%;
  font-weight: 300;
  line-height: 1rem;
}

/* First row with 3 columns */
.content-block-container > .content-block-item:nth-child(-n+3) {
  grid-column: span 4;
  height: 300px;
}

/* Second row with 4 columns */
.content-block-container > .content-block-item:nth-child(n+4) {
  grid-column: span 3;
  height: 200px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .content-block-container > .content-block-item {
    grid-column: span 12 !important;
  }
  .content-block-container > .content-block-item:nth-child(-n+3) {
    height: 200px;
  }
}

/* Content Container Sizing */
/* These modify Bootstrap's .container max-width on larger screens */
@media (min-width: 1200px) {
  .content-container-sm {
    max-width: 720px !important;
  }

  .content-container-md {
    max-width: 960px !important;
  }

  .content-container-lg {
    max-width: 1140px !important;
  }
}

/* Slanted Header Styles */
@media (min-width: 767px) {
  .slanted {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    height: 42px;
    margin-bottom: 1em;
  }

  /* Dark left half — full-width background layer */
  .slanted::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sh-secondary);
    z-index: 0;
  }

  /* Light right half — skewed overlay */
  .slanted::after {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 48%;
    right: -8px;
    background: var(--sh-bg-muted);
    transform: skewX(-25deg);
    border-left: 10px solid #fff;
    z-index: 1;
  }

  .slanted h2 {
    position: relative;
    z-index: 2;
    padding-left: 1rem;
  }

  .btn-slanted {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 8px 16px !important;
    color: white;
    background: linear-gradient(to right, var(--sh-mega-accent), var(--sh-dark));
    border: none;
    border-radius: 4px;
    font-weight: lighter;
    text-transform: uppercase;
    margin-right: -8px;
    min-width: 108px;
    text-decoration: none;
    top:-1px;
  }

  .btn-slanted:hover {
    color: white;
    background: var(--sh-mega-accent);
  }

  .slanted.green {
    background-image: linear-gradient(to right, var(--sh-accent) 53%, transparent 50%);
  }

  .slanted.green h2 {
    color: #fff;
  }

  .slanted.green::before {
    background: var(--sh-accent);
  }
}

@media (max-width: 767px) {
  .slanted::before,
  .slanted::after {
    display: none;
  }

  .slanted {
    margin-left: 0;
    background-image: none;
  }

  .slanted h2 {
    background: var(--sh-bg-muted);
    padding: 0.35em;
    flex-grow: 1;
    margin-right: 1em;
    border-radius: 6px;
  }

  .slanted .text-white {
    color: var(--sh-secondary) !important;
  }
}

@media (max-width: 500px) {
  .slanted {
    display: block !important;
    height: unset;
  }

  .slanted .btn {
    margin: 0.5em 0 !important;
    position: relative;
  }
}

/* ── Subtle breadcrumbs ── */
.breadcrumb-subtle .breadcrumb {
  --bs-breadcrumb-divider-color: #b8bfc6;
  font-size: 0.8rem;
}

.breadcrumb-subtle .breadcrumb-item a {
  color: var(--sh-text-muted);
  text-decoration: none;
}

.breadcrumb-subtle .breadcrumb-item a:hover {
  color: var(--sh-primary);
}

.breadcrumb-subtle .breadcrumb-item.active {
  color: #8a929b;
}

/* ── Related Products (compressed 2-column) ── */
.related-compact-item {
  height: 150px;
  border: 1px solid var(--sh-border);
  border-radius: 6px;
  background: #fff;
  color: var(--sh-text);
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.related-compact-item:hover {
  border-color: var(--sh-primary);
  background: var(--sh-bg-light);
}

/* Fixed-size thumbnail; image fills it edge-to-edge (bleeds to top/left/bottom) */
.related-compact-thumb {
  width: 190px;
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
}

.related-compact-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Text wrapper: vertically centered, clamped so every row aligns identically */
.related-compact-body {
  min-width: 0;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.related-compact-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-compact-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-compact-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
  line-height: 1.2;
  color: var(--sh-secondary);
}

.related-compact-summary {
  font-size: 0.825rem;
  line-height: 1.35;
  color: #5c6670;
  margin: 0 0 0.3rem;
}

.related-compact-link {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--sh-primary);
}

.related-compact-item:hover .related-compact-link {
  text-decoration: underline;
}

/* ── Subnav Rail (floating section navigation) ── */

/* Anchor landing position under the sticky header */
section[id] {
  scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.subnav-rail {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translate(12px, -50%);
  z-index: 90;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 56px;
  padding: 0.4rem 0.35rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--sh-border);
  border-radius: 28px;
  box-shadow: 0 4px 16px rgba(1, 15, 28, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}

.subnav-rail--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%);
}

/* Expanded: widen and reveal inline labels */
.subnav-rail--expanded {
  width: 210px;
  align-items: stretch;
  border-radius: 18px;
}

.subnav-rail--alternate {
  background: rgba(25, 36, 51, 0.92);
  border-color: rgba(255, 255, 255, 0.15);
}

.subnav-rail-anchors {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  margin: 0;
  width: 100%;
}

.subnav-rail--expanded .subnav-rail-anchors {
  align-items: stretch;
}

/* Shared item row (home / dot / action / expand) */
.subnav-home,
.subnav-dot,
.subnav-action,
.subnav-expand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 34px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.subnav-rail--expanded .subnav-home,
.subnav-rail--expanded .subnav-dot,
.subnav-rail--expanded .subnav-action,
.subnav-rail--expanded .subnav-expand {
  justify-content: flex-start;
  gap: 0.7rem;
  padding-left: 0.5rem;
}

/* Dot marker — an invisible 26px hit area with the unchanged grey dot centered
   via ::after. Larger target, identical visual. */
.subnav-dot .subnav-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: none;
  border: none;
  flex-shrink: 0;
}

.subnav-dot .subnav-marker::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c4cbd3;
  transition: background 0.2s ease, transform 0.2s ease;
}

/* Align the 26px hit area under the 32px badge column when expanded */
.subnav-rail--expanded .subnav-dot .subnav-marker {
  margin: 0 3px;
}

.subnav-rail--alternate .subnav-dot .subnav-marker::after {
  background: rgba(255, 255, 255, 0.4);
}

.subnav-dot:hover .subnav-marker::after,
.subnav-dot:focus-visible .subnav-marker::after {
  background: var(--sh-primary-light);
  transform: scale(1.3);
}

.subnav-dot.active .subnav-marker::after {
  background: var(--sh-primary);
  transform: scale(1.45);
}

/* Badge markers (home / actions / expand) */
.subnav-home .subnav-marker,
.subnav-action .subnav-marker,
.subnav-expand .subnav-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.subnav-home .subnav-marker,
.subnav-expand .subnav-marker,
.subnav-action--secondary .subnav-marker {
  background: var(--sh-bg-light);
  border: 1px solid var(--sh-border);
  color: var(--sh-secondary);
}

.subnav-action--primary .subnav-marker {
  background: var(--sh-primary);
  color: #fff;
}

.subnav-home:hover .subnav-marker,
.subnav-expand:hover .subnav-marker,
.subnav-action--secondary:hover .subnav-marker {
  border-color: var(--sh-primary);
  color: var(--sh-primary);
}

.subnav-action--primary:hover .subnav-marker {
  box-shadow: 0 3px 10px rgba(57, 181, 74, 0.45);
}

/* Chevron points right (collapse) when expanded */
.subnav-rail--expanded .subnav-expand .subnav-marker {
  transform: rotate(180deg);
}

/* Labels — hover tooltip when collapsed */
.subnav-label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  background: var(--sh-secondary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.45em 0.8em;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.subnav-rail:not(.subnav-rail--expanded) .subnav-home:hover .subnav-label,
.subnav-rail:not(.subnav-rail--expanded) .subnav-dot:hover .subnav-label,
.subnav-rail:not(.subnav-rail--expanded) .subnav-dot:focus-visible .subnav-label,
.subnav-rail:not(.subnav-rail--expanded) .subnav-action:hover .subnav-label,
.subnav-rail:not(.subnav-rail--expanded) .subnav-action:focus-visible .subnav-label,
.subnav-rail:not(.subnav-rail--expanded) .subnav-expand:hover .subnav-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.subnav-rail:not(.subnav-rail--expanded) .subnav-dot.active .subnav-label {
  background: var(--sh-primary);
}

/* Labels — inline when expanded */
.subnav-rail--expanded .subnav-label {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  background: none;
  color: var(--sh-secondary);
  padding: 0;
  font-size: 0.9rem;
}

.subnav-rail--alternate.subnav-rail--expanded .subnav-label {
  color: #fff;
}

.subnav-rail--expanded .subnav-dot.active .subnav-label {
  color: var(--sh-primary);
  font-weight: 600;
}

/* Home divider (top) + actions divider (bottom) */
.subnav-home {
  min-height: 40px;
  padding-bottom: 0.35rem;
  margin-bottom: 0.1rem;
  border-bottom: 1px solid var(--sh-border);
}

.subnav-rail-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  padding-top: 0.35rem;
  margin-top: 0.1rem;
  border-top: 1px solid var(--sh-border);
}

.subnav-rail--expanded .subnav-rail-actions {
  align-items: stretch;
}

.subnav-rail--alternate .subnav-home {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.subnav-rail--alternate .subnav-rail-actions {
  border-top-color: rgba(255, 255, 255, 0.15);
}

/* Mobile floating pill + menu — center-right edge */
.subnav-fab {
  position: fixed;
  right: 20px;
  top: 50%;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.subnav-fab--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* Full pill, offset from the edge */
.subnav-fab-toggle {
  width: 44px;
  height: 58px;
  border-radius: 999px;
  border: none;
  background: var(--sh-secondary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(1, 15, 28, 0.28);
}

/* Hide the pill while the menu is open */
.subnav-fab--open .subnav-fab-toggle {
  display: none;
}

/* Menu header with close control */
.subnav-fab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.15rem 0.15rem 0.5rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--sh-border);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sh-text-muted);
}

.subnav-fab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--sh-secondary);
  cursor: pointer;
}

.subnav-fab-close:hover {
  background: var(--sh-bg-light);
}

.subnav-fab--open .subnav-fab-toggle {
  background: var(--sh-primary);
}

.subnav-fab-menu {
  display: none;
  min-width: 200px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--sh-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(1, 15, 28, 0.2);
  padding: 0.5rem;
}

.subnav-fab--open .subnav-fab-menu {
  display: block;
}

.subnav-fab-link {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--sh-text);
  text-decoration: none;
  font-size: 0.95rem;
}

.subnav-fab-link:hover,
.subnav-fab-link.active {
  background: var(--sh-bg-light);
  color: var(--sh-primary);
  font-weight: 600;
}

.subnav-fab-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.25rem 0.25rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--sh-border);
}

/* ── Product grid cards (page.pgrid) — ported from nuxt grid-catalog-product ── */

/* Value-prop checkmark list */
ul.checkmarks {
  list-style-type: none;
  padding-left: 0;
}
ul.checkmarks li {
  position: relative;
  padding-left: 0.8em;
  margin-left: 1em;
}
ul.checkmarks li::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: -0.5em;
  top: 0;
  transform: rotate(45deg);
  height: 0.9rem;
  width: 0.5em;
  border-bottom: 0.15em solid;
  border-right: 0.15em solid;
  color: #39b54a;
}

/* Spacing utilities used by the cards */
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }

/* Product grid cards: no underline on the title (or image) links */
.grid-catalog-item a { text-decoration: none; }

/* Grid card action buttons */
.grid-catalog-item .btn-grid-primary,
.grid-catalog-item .btn-grid-success {
  background-color: #fff;
  border-color: #e5e5e5 !important;
  font-weight: 400;
  height: 100%;
}
.grid-catalog-item .btn-grid-primary { color: #007bff; }
.grid-catalog-item .btn-grid-primary:hover {
  background-color: #007bff !important;
  border-color: #007bff;
  color: #fff;
}
.grid-catalog-item .btn-grid-primary:hover svg path { fill: #fff; }
.grid-catalog-item .btn-grid-success { color: #28a745; }
.grid-catalog-item .btn-grid-success:hover {
  background-color: #28a745 !important;
  border-color: #28a745;
  color: #fff;
}
.grid-catalog-item .btn-grid-success:hover svg path { fill: #fff; }
.grid-catalog-item:hover .btn-grid-primary,
.grid-catalog-item:hover .btn-grid-success {
  background-color: #e5e5e5;
  border-color: #e5e5e5;
}
.btn-grid-primary svg,
.btn-grid-success svg {
  margin-right: 5px;
  min-width: 25px;
}
.btn-grid-primary svg path { fill: #007bff; }
.btn-grid-success svg path { fill: #28a745; }

.grid-catalog-item ul li {
  font-size: 0.95rem;
  line-height: 1.2em;
  margin-bottom: 0.25em;
}

/* 50/50 split buttons */
.grid-btn-50 .btn {
  width: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 2px;
}
@media (min-width: 767px) and (max-width: 991px) {
  .grid-btn-50 .btn span { font-size: 0.9rem; }
}

/* Main-section alerts: soften background + border to 50% opacity (text unaffected).
   Uses the Bootstrap 5.3 alert CSS variables so it works for every alert variant. */
.main-alert {
  background-color: color-mix(in srgb, var(--bs-alert-bg) 30%, transparent);
  border-color: color-mix(in srgb, var(--bs-alert-border-color) 30%, transparent);
}

/* ── Product main: buy box (right) + gallery (left), long copy below ── */
.product-buybox { }
@media (min-width: 992px) {
  .product-buybox { position: sticky; top: 90px; }
}
.buybox-hook { font-size: 1.05rem; color: #444; }

/* Quick-facts chips (pulled from the page.alerts slim block) */
.buybox-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.buybox-fact {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.85rem 0.35rem 0.35rem;
  border: 1px solid #dff1ff; border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,123,255,0) 40%, rgba(0,123,255,.05) 100%);
  text-decoration: none; color: #192433; font-size: 0.85rem; font-weight: 500;
  transition: border-color .15s, background .15s;
}
.buybox-fact:hover { border-color: #077bff; color: #192433; }
.buybox-fact .circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #dff1ff; border: 1px solid #fff; font-weight: 700; flex-shrink: 0;
}
.buybox-fact:hover .circle { background: #077bff; color: #fff; border-color: #077bff; }

/* Demoted inline note (was a full alert box) */
.buybox-note {
  font-size: 0.875rem; color: #5a6b7b;
  background: #f6fbff; border-left: 3px solid #bfe0ff; border-radius: 4px;
  padding: 0.6rem 0.8rem; gap: 0.5rem;
}
.buybox-note svg { width: 18px; height: 18px; flex-shrink: 0; margin: 2px 0 0 0; color: #077bff; }
.buybox-note a { color: #077bff; }

/* Overview (long description, full width below the header) */
.product-overview { font-size: 1rem; line-height: 1.6; }

/* Quick-facts modal (the standalone alerts-slim that defined these may be suppressed) */
.tp-product-modal .modal-content { border-radius: 10px; border: none; }
.tp-product-modal-content { padding: 20px; position: relative; }
.tp-product-modal-close-btn { position: absolute; top: 8px; right: 14px; background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.tp-product-modal-close-btn:hover { opacity: 0.7; }

/* Buy-box CTA buttons — each always 50% of the row (one button = same width as if
   there were two). No movement/shadow effects; only the background color transitions. */
.buybox-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0; }
.buybox-cta .btn {
  flex: 0 0 calc(50% - 0.3rem);
  justify-content: center;
  padding: 0.8rem 1.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 10px;
  transition: background-color 0.15s ease;
}

/* Section header bottom-border colour — always #444 (overrides Bootstrap .border-dark). */
.content-section-header { border-bottom-color: #444 !important; }

/* ============================================================================
   Comparison tables (page.comptable)
   Ported verbatim from the legacy Nuxt component comptable.vue <style> block.
   Mobile: only the .active column is shown and .comparison-tabs switches it;
   >=767px the tabs hide and every column displays.
   ============================================================================ */
/*comparison table*/
.comparison-table ul {
    margin-left: 20px;
}

ul.comparison-tabs {
    background: #fff;
    border: 5px solid #fff;
    display: block;
    float: left;
    list-style-type: none;
    margin: 0 0 0 -5px;
    padding: 0;
    position: sticky;
    top: 114px;
    width: 102%;
    z-index: 99;
}

ul.comparison-tabs li {
    float: left;
    width: 25%;
}

ul.comparison-tabs li img {
    border: 1px solid #fff;
    width: 100%;
}

ul.comparison-tabs i:last-child {
    border-right: 1px solid #DDD;
}

.comparison-tabs button {
    background: #FFF;
    border-right: 0;
    border: 1px solid #DDD;
    color: #999;
    font-size: 14px;
    font-weight: bold;
    margin-left: 0;
    padding: 10px;
    width: 100%;
}

@media (max-width: 400px) {
    .comparison-tabs button {
        font-size: 10px;
        padding: 5px;
    }
}

.comparison-tabs li:last-child button {
    border-right: 1px solid #DDD;
}

ul.comparison-tabs li.active button {
    background: #F5F5F5;
    color: #000;
}

.comparison-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.comparison-table th {
    background: #F5F5F5;
    display: none;
    position: relative;
    /* Establishes a positioning context for positioning img absolutely */
    overflow: hidden;
    /* Ensures the image does not spill out of the cell */
    height: 180px;
    /* Set a specific height for all table headers */
}

.image-link {
    display: block;
    height: 100%;
    position: relative;
}
.tab-image-link {
    display: block;
    height: 90px;
    position: relative;
}
.image-link img,
.tab-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.comparison-table .label,
.tab-image-link button {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    padding: 5px 0;
}

.comparison-table td {
    border: 1px solid #DDD;
    empty-cells: show;
    padding: 10px;
}

.comparison-table td,
.comparison-table th {
    text-align: left;
}

.comparison-table td:nth-child(1) {
    font-weight: bold;

}

.comparison-table td+td,
.comparison-table th+th {
    display: none;
    text-align: left;
}

.text-center {
    text-align: center;
}

.comparison-table .bg-purple,
.comparison-tabs .bg-purple {
    border-top: 3px solid #A32362;
}

.comparison-table .bg-blue,
.comparison-tabs .bg-blue {
    border-top: 3px solid #0097CF;
}

.comparison-table .bg-green,
.comparison-tabs .bg-green {
    border-top: 3px solid #99cc33;
}

.comparison-table .bg-orange,
.comparison-tabs .bg-orange {
    border-top: 3px solid #ffc107;
}

.comparison-table .sep {
    background: #F5F5F5;
    color: #000 !important;
    font-weight: bold !important;
    text-align: center;
}

.comparison-table .txt-l {
    font-size: 28px;
    font-weight: bold;
}

.comparison-table .txt-top {
    left: -2px;
    position: relative;
    top: -9px;
}

.comparison-table .tick {
    color: #2CA01C;
    font-size: 18px;
}

.comparison-table .hide {
    background: none;
    border: 0;
}

@media (max-width: 991px) {

    .comparison-table th {
        font-size: 12px;
    }
}

.comparison-table tbody td:not(:first-child) {
  display: none;
}
.comparison-table tbody td.active {
  display: table-cell;
}
@media (min-width: 767px) {
    ul.comparison-tabs {
        display: none;
    }

    .comparison-table td,
    .comparison-table th {
        display: table-cell !important;
    }

    .comparison-table td+td,
    .comparison-table th+th {
        width: auto;
    }
}

/* Column-count aware tabs. The legacy rule above hardcodes 25% (4 columns),
   which left a gap on the 3-column tables. Additive — 4-col is unchanged. */
ul.comparison-tabs[data-cols="2"] li { width: 50%; }
ul.comparison-tabs[data-cols="3"] li { width: 33.3333%; }
ul.comparison-tabs[data-cols="5"] li { width: 20%; }

/* Mobile row geometry (< 767px).
   thead is hidden here (.comparison-table th { display:none }) and the
   .comparison-tabs strip replaces it, so each row shows only the label cell plus
   the .active product cell. Their colspans (2 + 2) total 4, while separator rows
   span the full desktop width (2 + 2N) — that mismatch makes the widest row set
   the column basis and leaves content rows at a fraction of the width.

   The legacy component papered over this by rewriting colspans in JS on every
   media change. Static HTML can only carry one colspan, so instead we drop out of
   table layout below the breakpoint and let flex size the two visible cells.
   colspan becomes irrelevant here; desktop (>= 767px) is untouched. */
@media (max-width: 766.98px) {
    .comparison-table { table-layout: auto; }

    .comparison-table tbody tr {
        display: flex;
        width: 100%;
    }

    /* label column + the selected product column */
    .comparison-table tbody td:first-child {
        display: block;
        flex: 0 0 34%;
    }
    .comparison-table tbody td.active {
        display: block;
        flex: 1 1 66%;
    }

    /* separator rows are a single cell — always full width */
    .comparison-table tbody td.sep {
        display: block;
        flex: 1 1 100%;
    }
}