.cta-btn-checkout {

  max-width: max-content;

}



#side-cart {

  max-width: 700px;

}



.fingerprint-btn, .btt-btn {

    bottom: 1rem;

}



/* =========================================

   HERO — description text (mobile-friendly, larger font)

   ========================================= */



/* Base (desktop/tablet) */

.section.top-section .container > span.reveal-fade-in.reveal-fade-in--up {

  display: block;

  font-weight: 600;

  line-height: 1.55;

  max-width: 60ch;

  text-wrap: balance;

  -webkit-hyphens: auto;

  hyphens: auto;

}



/* Tablet and below */

@media (max-width: 992px) {

  .section.top-section .container > span.reveal-fade-in.reveal-fade-in--up {

    font-size: clamp(1.2rem, 3.2vw, 1.6rem);

    font-weight: 700;

    line-height: 1.6;

    margin-block: 0.25rem 0.5rem;

  }

}



/* Phones */

@media (max-width: 640px) {

  .section.top-section .container > span.reveal-fade-in.reveal-fade-in--up {

    font-size: clamp(1.35rem, 5.2vw, 1.8rem);

    letter-spacing: 0.2px;

    font-weight: 700;

    line-height: 1.65;

  }

}



/* Very small phones */

@media (max-width: 380px) {

  .section.top-section .container > span.reveal-fade-in.reveal-fade-in--up {

    font-size: clamp(1.4rem, 6vw, 1.9rem);

    line-height: 1.7;

  }

}



/* =========================================================

   PRODUCTS HERO (":slug*" page)

   Keep banner same height (40vh) and prevent title from cutting

   Also keep the phrase wrapped in .nowrap (e.g., “ki vam”) together

   ========================================================= */



/* 1) Base: keep hero content visible above the background image */

.section.section-padding.relative.h-\[40vh\],

section.section.section-padding.relative[class*="h-[40vh]"] {

  position: relative;

  overflow: visible; /* allow text to render fully */

}



/* Ensure inner containers don’t clip animated elements/text */

.section.section-padding.relative.h-\[40vh\] .container,

section.section.section-padding.relative[class*="h-[40vh]"] .container {

  position: relative;

  z-index: 2;

  overflow: visible;

}



/* If any wrapper uses .overflow-hidden, relax it here inside hero */

section.section.section-padding.relative[class*="h-[40vh]"] .overflow-hidden {

  overflow: visible !important;

}



/* 2) Title defaults (desktop/tablet) */

section.section.section-padding.relative[class*="h-[40vh]"] h2 {

  font-weight: 800;

  line-height: 1.2;

  color: #003479;

  max-width: 90%;

  white-space: normal;

  word-break: keep-all;   /* avoid breaking short words/phrases */

  text-wrap: balance;

}



/* Optional: keep specific short phrase on one line

   Wrap it in markup: <span class="nowrap">ki vam</span> */

.nowrap {

  white-space: nowrap;

}



/* 3) Mobile adjustments */

@media (max-width: 640px) {

  /* Keep banner the same height but position content safely */

  section.section.section-padding.relative[class*="h-[40vh]"] {

    height: 40vh !important;   /* keep image height unchanged */

    display: flex;

    align-items: flex-end;      /* position text near bottom */

    padding-bottom: 3.5rem;     /* breathing space from edge */

  }



  /* Larger, readable title that won’t get clipped */

  section.section.section-padding.relative[class*="h-[40vh]"] h2 {

    font-size: clamp(1.5rem, 6vw, 2.2rem);

    line-height: 1.2;

    word-spacing: 1px;

  }



  /* Breadcrumbs tighter so they don’t steal vertical space */

  section.section.section-padding.relative[class*="h-[40vh]"] .breadcrumbs {

    padding-top: 6px !important;

    padding-bottom: 6px !important;

  }

}



/* 4) Very small phones (≤375px)

   Make the font slightly smaller to ensure the text comes in 2 rows */

@media (max-width: 375px) {

  section.section.section-padding.relative[class*="h-[40vh]"] {

    padding-bottom: 2.8rem; /* a bit less bottom space */

  }



  section.section.section-padding.relative[class*="h-[40vh]"] h2 {

    font-size: clamp(1.35rem, 5.4vw, 1.6rem); /* smaller for 2-line layout */

    line-height: 1.25;

    letter-spacing: 0.2px;

    max-width: 88%;

  }

}

.blog-content h2, h3 {
    margin-bottom: 2rem;
    color: var(--primary-dark);
}

.blog-content h4 {
  margin-bottom: 1.5rem;
}

.blog-content p {
    margin-bottom: 1.5rem;
}

.blog-content ul {
    list-style-type:disc;
    padding-left:1.6rem;
    margin-bottom: 2rem;
}

.site-header {
  position: relative;
}

.marquee-header-wrap {
  z-index: 999;
}

.cta-btn-checkout:disabled {
  background-color: rgb(167, 167, 167) !important;
}

.cta-btn-checkout:disabled::after {
  content: unset;
}

.floating-banner {
  background-color: var(--primary);
}

.floating-banner--close {
  right: 2rem;
}