/*STYLE FOR PRODUCTS PAGES*/
:root {
  --primary-color: #C51D34; /* main brand color */
}
/*TYPOGRAPHY*/
h2.p-sec-title {
  font-size: 2.25rem;
  font-weight: bold;
  text-align: center;
  margin: 120px auto;
}
h3.tech-description {
  font-size: 1.3rem;
  line-height: 1.5;
}
.product-section-title {
  margin-top:60px;
  margin-bottom: 60px;
}
.product-section-title h2 {
  font-size: 2.25rem;
  font-weight: bold;
  text-align: center;
}
.product-section-title h4 {
  font-size: 1.125rem;
  text-align: center;
}

@media (max-width: 767.98px) {
  .product-section-title {
    margin-bottom: 30px;
  }
  .product-section-title h2 {
    font-size: 1.8rem;
  }
}
/*END TYPOGRAPHY ========================================================*/


/* STANDARD PRODUCT STYLES ======================================================
================================================================================= */
.st-header-top h1 {
  font-size:42px;
}
.st-header-top img {
  max-height: 660px;
  mix-blend-mode: darken;
}
.st-header-top h3 {
  font-size:18px;
}
.st-header-top-desc img {
  height: 40px;
}
.key-features-section h2 {
  font-weight: bold;
}

@media (max-width: 767.98px) {
  .st-header-top h1 {
    font-size: 38px;
  }
  .st-header-top img {
    margin-bottom: 30px;
  }
}

/* END STANDARD PRODUCT */


/*Products Menu*/
.product-toc {
  background: #000;
  padding: 10px 0;
  border-bottom: 1px solid #232323;
}
.nav-pills .nav-link {
  color:#fff;
  font-weight: normal;
  text-transform: capitalize;
}
.product-toc .nav-link.active, .product-toc .nav-link:hover {
  background:none;
  color: var(--primary-color);
}

/* Animation-ready base (optional but helps stability) */
.product-toc {
  will-change: transform, opacity;
}

/* Fixed state starts above the viewport (hidden) */
.product-toc-fixed {
  transform: translateY(-120%);
  opacity: 0;
  transition: transform .35s ease, opacity .25s ease, box-shadow .25s ease;
  background: #000;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding: .5rem 0;
  z-index: 1030;
}

/* When visible, slide down and fade in */
.product-toc-fixed.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Spacer prevents layout jump when menu becomes fixed */
.product-toc-spacer { width: 100%; display: none; }

/* Active item in the product menu */
.product-toc .nav-link.btn.active,
.product-toc .nav-link.btn[aria-current="true"] {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background: transparent;
  font-weight: 700;
}
.product-toc .nav-link.btn:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}
/*END products menu*/


/*OVERVIEW AR ROWS ==============================================*/
.section-alt-rows .row {
  padding-bottom: 120px;
  padding-top: 120px;
}
.section-alt-rows {
  padding-top: 180px;
}
.section-alt-rows .ar-ft-row {
  margin-bottom: 120px !important;
}
/* Extra top space before the first row in alt-rows section */
.section-alt-rows .ar-ft-row:first-child {
  margin-top: 140px;
}
.ar-ft-col {
  max-width: 536px;
  margin:0 auto;
}
.ar-ft-col h3 {
  font-size: 1.5rem;
  font-weight: bold;
}
/* Alternating rows section – minimal helpers */
.section-alt-rows .letter-spacing-1 { letter-spacing: .06em; }
.section-alt-rows .alt-row-content > :last-child { margin-bottom: 0; }

/* Dystanse zgodne z designem */
@media (min-width: 768px) {
  .py-md-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  .mb-md-6 { margin-bottom: 5rem !important; }
}


/* =====================================================================
   TECHNOLOGY SECTION — FINAL VERSION (CLEAN + NO DUPLICATES)
===================================================================== */

.technology-wrapper {
    position: relative;
}

.tech-carousel-container {
    width: 100%;
    position: relative;
    margin-top: 40px;
}

/* Bootstrap default must stay */
#techCarousel .carousel-inner {
    width: 100%;
}

/* Center wrapper */
.tech-card-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Card */
.tech-card {
    position: relative;
    width: 75vw;
    max-width: 1200px;
    height: 710px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}

.tech-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.tech-card-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: #fff;
}

.tech-card-plus {
    font-size: 48px;
    font-weight: bold;
}

.tech-card-title {
    font-size: 1.2rem;
    line-height: 1.3;
}

/* Modal (left unchanged) */
.tech-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:2000;
}
.tech-modal.active{ display:flex; }
.tech-modal-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
}
.tech-modal-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tech-modal-title {
  font-weight: bold;
}
.tech-modal-body {
  padding: 20px;
}
.tech-modal-close {
  cursor: pointer;
  transition: transform 0.25s ease;
}
.tech-modal-close:hover {
  transform: scale(1.1);
}
.tech-modal-close span {
  font-size: 1.5rem;
  
}
.tech-modal-item-title {
  font-weight: bold;
  margin-bottom: 20px;
}
.tech-modal-content{
    position:relative;
    width:90%;
    max-width:1100px;
    max-height:90vh;
    background:#fff;
    border-radius:16px;
    overflow-y:auto;
    padding:24px;
    z-index:10;
}
.tech-modal-main-image {
  margin-bottom: 20px;
  border-radius: 15px;
}
/* Smooth modal animation using keyframes */
/* Base state – no animation by default */
.tech-modal-content {
    opacity: 0; /* will be animated in when modal becomes active */
}

/* When modal becomes active, animate the content in */
.tech-modal.active .tech-modal-content {
    animation: techModalIn 0.35s ease forwards;
}

/* Optional: overlay fade-in animation */
.tech-modal-overlay {
    opacity: 0;
}

.tech-modal.active .tech-modal-overlay {
    animation: techOverlayIn 0.35s ease forwards;
}

/* Keyframes for content */
@keyframes techModalIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Keyframes for overlay */
@keyframes techOverlayIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 575px) {
    .tech-card {
        width: 90vw;
        height: 480px;
    }
}


/* Give spacing between slides */
#techCarousel .carousel-item {
  padding-right: 10vw; /* space that reveals 70% of next card */
}

/* Ensure inner does not hide overflow */
#techCarousel .carousel-inner {
  overflow: visible !important;
}

/* ALLOW NEXT SLIDE TO BE VISIBLE */
#techCarousel {
  overflow: visible !important;
}

#techCarousel .carousel-inner {
  overflow: visible !important;
  display: flex;              /* this is required for peek */
}

#techCarousel .carousel-item {
  flex: 0 0 auto !important;  /* DO NOT stretch to 100% */
  padding-right: 10vw;        /* amount of visible next slide */
}

.tech-card-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}


/* ==========================================
   CUSTOM TECHNOLOGY SLIDER (VISION AI STYLE)
========================================== */
/* Disable text selection inside slider */
#techSlider,
#techSlider * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
#techSlider{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* smooth iOS */
}


.tech-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 40px;
}

.tech-slider-track {
  display: flex;
  gap: 4vw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: calc(50vw - 37.5vw); /* center first card */
}

.tech-slider-track::-webkit-scrollbar {
  display: none;
}

.tech-slide {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 75vw;
  max-width: 1200px;
  cursor: pointer;
}

/* CARD */
.tech-card {
  position: relative;
  width: 100%;
  height: 610px;
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .35s ease, transform .35s ease;
}
.tech-card:hover {
  box-shadow: 0 0 25px rgba(44,195,252,0.31);
  transform: translateY(-3px);
}
.tech-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* CONTENT */
.tech-card-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px;
  z-index: 2;
  display: block;
  color: #fff;
}

.tech-card-plus {
  font-size: 48px;
  font-weight: bold;
}

.tech-card-title {
  font-size: 1.6rem;
  line-height: 1.3;
}

/* ARROWS */
.tech-arrows {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
  width: 1.2rem;
  height: 1.2rem;
  background-position: 0px 2px;
}
.tech-slider-arrows {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

.tech-arrow-btn {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #fff !important;
  border: 1px solid #eaeaea;
  transition: border-color 0.3s ease;
}

.tech-arrow-btn span {
  filter: brightness(0.6) invert(0);
}
.tech-arrow-btn:hover {
  border: 1px solid #666;
}
.tech-arrow-btn:hover span {
  filter: brightness(0.4) invert(0);
}

@media (max-width: 575px) {
    .tech-slide {
        width: 90vw;
    }
    .tech-card {
        height: 480px;
    }
}

/* ===============================
   DESKTOP — ALIGN SLIDER LEFT
   =============================== */

@media (min-width: 992px) {

    /* Track starts from the left, without centering */
    .tech-slider-track {
        padding-left: 40px !important;
        justify-content: flex-start;
    }

    /* Each slide has a max width of 921px */
    .tech-slide {
        width: 821px !important;
        max-width: 821px !important;
    }

    /* The card is also 921px */
    .tech-card {
        width: 821px !important;
        max-width: 821px !important;
    }
}


/* ===========================
   Process / timeline section
   =========================== */

.process-section {
  position: relative;
}

.process-wrapper {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 0;
}

/* Center vertical line */
.process-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 10px;
  transform: translateX(-50%);
  background: #e9ecef; /* base line color */
  overflow: hidden;    /* hide progress overflow */
  border-radius: 10px 10px 0 0;
}

/* Progress indicator growing down */
.process-line-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;                        /* will be controlled via JS */
  background: #c51d34;              /* brand color */
  transition: height 0.25s ease-out; /* smooth fill animation */
}

/* Single step wrapper */
.process-step {
  position: relative;
  margin: 120px 0;
}
/* Content block */
.process-step-content {
  width: 45%;
  padding: 25px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
  border-radius: 20px;
}
/* Fade-in base state for process step content */
.process-step-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible state */
.process-step-content.fade-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Left side (image/title/desc on the left) */
.process-step.is-left .process-step-content {
  margin-right: 55%;
  text-align: right;
}

/* Right side */
.process-step.is-right .process-step-content {
  margin-left: 55%;
  text-align: left;
}

/* Dot on the center line */
.process-step-dot {
position: absolute;
  top: 50%;                          /* middle of image */
  left: 50%;                         /* center of timeline */
  transform: translate(-50%, -50%);  /* perfect centering */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(197, 29, 52, 0.15);
  transition: background-color 0.25s ease, transform 0.25s ease;
  z-index: 2;
}

/* Image spacing */
.process-step-image {
  position: relative;
  margin-bottom: 20px;

}
.process-step-image img {
  border-radius: 15px;
}

.process-step-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: left;
  margin: 10px;
}
.process-step-desc {
  text-align: left;
  margin: 10px;
}

/* Active step styling */
.process-step.is-active .process-step-dot {
  background-color: #c51d34;
  transform: translateX(-50%) scale(1.15);
}

/* Responsive layout */
@media (max-width: 767.98px) {
  .process-line {
    left: 7px;                 /* move line to the left on mobile */
    transform: none;
  }

  .process-step-content {
    width: 92%;
    margin: 0 0 0 30px;         /* indent from line */
    text-align: left;
  }

  .process-step-dot {
    left: 12px;
    transform: translateX(-50%);
  }

  .process-step.is-left .process-step-content,
  .process-step.is-right .process-step-content {
    margin-right: 0;
    margin-left: 30px;
    text-align: left;
  }
}


/* ---------------  END TECHNOLOGY ------------------------ */


/* ------------------------------------ INSTRUMENT -------------------------------------------------------*/
.instrument-section p, .instrument-section h2, .instrument-section h3, .instrument-section h4 {
  color:#fff !important;
}
.instrument-presentation {
  display: flex;
  justify-content: center;
}
.instrument-presentation img {
  margin-bottom: 90px;
  margin-top:60px
}
.instrument-bg {
  background: url('/wp-content/themes/zeutec-web/assets/img/instrument-section-bg.webp') no-repeat center -777px;
}

@media (max-width: 767.98px) {
  .instrument-bg {
    background: url('/wp-content/themes/zeutec-web/assets/img/instrument-section-bg.webp') no-repeat center bottom;
  }
}

/*------------------------------------- UNIQUE FEATURES ---------------------------------------------------*/
.unique-features {
  background-color: #000;
}
.unique-features .accordion-item {
  padding-top:25px;
  background: #000;
  border: 1px solid #646464;
  color: #fff;
}
.uf-main-img {
  margin-bottom: 60px;
}
@media (max-width: 767.98px) {
  .uf-main-img {
    scale: 1.9;
    margin-bottom: 100px;
  }
}

/* Instrument rows fade-in base state */
.instrument-row {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Instrument rows when visible on scroll */
.instrument-row.instrument-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Remove Bootstrap background from the button */
.feature-button {
    background: #000 !important;
    color:#fff;
    box-shadow: none !important;
    border-radius: 20px !important;
    display: flex;
    align-items: center;
    position: relative;
    min-height: 100px;
    padding-bottom: 20px;
}
.unique-features .accordion-button:not(.collapsed), .unique-features .accordion-button:hover {
  color:#D41A2D;
}
/* HIDE default Bootstrap arrow */
.feature-button::after {
    display: none;
}

/* ICON next to title */
.feature-icon {
    object-fit: contain;
}
.featured-icon-box {
  height: 125px;
  margin-left: 25px;
  display: flex;
  align-items: flex-end;
}
.accordion-item img {
/* empty */
}

/* Title styling */
.feature-title {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
}

/* CIRCLE + ICON */
.feature-toggle-icon {
    width: 28px;
    height: 28px;
    border: 2px solid #D41A2D;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

/* Plus symbol */
.feature-toggle-icon::before,
.feature-toggle-icon::after {
    content: "";
    position: absolute;
    background: #D41A2D;
    width: 11px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.feature-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* When OPEN → turn into X */
.feature-button:not(.collapsed) .feature-toggle-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
    width: 11px;
}

.feature-button:not(.collapsed) .feature-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 11px;
}

/* Fade only on accordion content, not all panels */
.accordion-body {
   /* opacity: 0;*/ /*disabled*/
    transition: opacity .35s linear;
}

.accordion-collapse.show .accordion-body {
    opacity: 1;
}
/* Smooth rotation animation for the icon */
.feature-toggle-icon,
.feature-toggle-icon::before,
.feature-toggle-icon::after {
    transition: all .35s ease;
    transform-origin: center;
}


/* ------------------------ SOLUTIONS --------------------------- */

/* Tabs section wrapper */
.product-tabs-section {
  position: relative;
}

/* Left nav - vertical pills */
.product-tabs-nav .nav-link {
  text-align: left;                /* Align text to left */
  border-radius: 0rem;           /* Rounded corners */
  margin-bottom: 0.5rem;           /* Vertical spacing */
  padding: 0.75rem 1rem;           /* Comfortable padding */
  border-bottom: 1px solid rgba(0,0,0,0.08); /* Light border */
  color:#000;
}

/* Active tab state */
.product-tabs-nav .nav-link.active {
  background-color: #f5f5f5;       /* Light background for active tab */
  font-weight: 600;           /* Slightly bolder text */
  color:#000;
}
/* HOVER ON INACTIVE TAB — grey arrow + bold text */
.product-tabs-nav .nav-link:not(.active):hover {
  font-weight: 600;
}
.product-tabs-nav .nav-link:not(.active):hover .tab-arrow-icon {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  color: rgba(0,0,0,0.35); /* grey arrow */
}

/* OPTIONAL — movement for active hover */
.product-tabs-nav .nav-link.active:hover .tab-arrow-icon {
  transform: translateX(2px);
}

/* Tab content area base (no shadow by default) */
.product-tabs-content {
  border-radius: 0.75rem;          /* Rounded content area */
  padding: 2.5rem;                 /* Inner spacing */
  background-color: #ffffff;       /* White background */
  box-shadow: none;                /* No shadow initially */
  transition: box-shadow 0.3s ease; /* Smooth shadow transition */
}

/* Shadow when user is in the tabs area */
.product-tabs-content.tabs-shadow-active {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

/* Make WYSIWYG content nicer inside tab/accordion */
.product-tabs-content p,
.product-tabs-accordion .accordion-body p {
  margin-bottom: 0.75rem;          /* Space between paragraphs */
}
.product-tabs-content h4 {
  font-weight: 600;
}
/* Default — arrow hidden */
.tab-arrow-icon {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease, color .25s ease;
  font-size: 20px !important;
}

/* ACTIVE TAB — black arrow */
.product-tabs-nav .nav-link.active .tab-arrow-icon {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  color: rgba(0,0,0,0.85);      /* dark arrow */
}

/* HOVER ON INACTIVE TAB — show grey arrow */
.product-tabs-nav .nav-link:not(.active):hover .tab-arrow-icon {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  color: rgba(0,0,0,0.35);      /* grey arrow */
}

/* OPTIONAL: hover effect for active tab — slight move */
.product-tabs-nav .nav-link.active:hover .tab-arrow-icon {
  transform: translateX(2px);
}


/* ===================== OVERVIEW - Featured Slider ===================== */

/* Typography */
.features-slider-section h2,
.features-slider-section h3,
.features-slider-section h4,
.features-slider-section p {
  color: #fff;
}

/* Section base */
.features-slider-section {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Optional container helper */
.fs-container {
  width: 100%;
}

/* ===================== BACKGROUND GRADIENTS (per slide class) ===================== */
.features-slider-section.coffee {
  background: radial-gradient(
    ellipse at center,
    #58391F 0%,
    #2C1808 20%,
    #000000 70%,
    #000000 100%
  );
}

.features-slider-section.rise {
  background: radial-gradient(
    ellipse at center,
    #1F582B 0%,
    #113118 20%,
    #000000 70%,
    #000000 100%
  );
}

.features-slider-section.wheat {
  background: radial-gradient(
    ellipse at center,
    #806d30 0%,
    #3d3d16 20%,
    #000000 70%,
    #000000 100%
  );
}

/* ===================== DECORATIVE BEANS LAYER ===================== */
/* Base layer (hidden by default; becomes visible with .is-active) */
.features-slider-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.06);
  transition:
    transform 1.1s cubic-bezier(.22,.61,.36,1),
    opacity 0.9s ease;
}

/* Keep all real content above beans */
.features-slider-section > * {
  position: relative;
  z-index: 1;
}

/* Coffee beans images */
.features-slider-section.coffee::before {
  background-image:
    url("../assets/img/beans/bean-1.png"),
    url("../assets/img/beans/bean-2.png"),
    url("../assets/img/beans/bean-3.png"),
    url("../assets/img/beans/bean-4.png"),
    url("../assets/img/beans/bean-5.png"),
    url("../assets/img/beans/bean-6.png");
  background-repeat: no-repeat;
  background-size: 80px, 60px, 100px, 70px, 320px, 380px;
  background-position: 22% 2%, 9% 20%, 75% 5%, 89% 23%, -8% 100%, 109% 100%;
}

/* Rise beans images */
.features-slider-section.rise::before {
  background-image:
    url("../assets/img/beans/rise-1.png"),
    url("../assets/img/beans/rise-2.png"),
    url("../assets/img/beans/rise-3.png"),
    url("../assets/img/beans/rise-4.png"),
    url("../assets/img/beans/rise-blur01.png"),
    url("../assets/img/beans/rise-blur02.png");
  background-repeat: no-repeat;
  background-size: 80px, 60px, 100px, 70px, 320px, 380px;
  background-position: 22% 2%, 9% 20%, 75% 5%, 89% 23%, -8% 100%, 109% 100%;
}

/* Wheat beans images */
.features-slider-section.wheat::before {
  background-image:
    url("../assets/img/beans/wheat-1.webp"),
    url("../assets/img/beans/wheat-3.webp"),
    url("../assets/img/beans/wheat-4.webp"),
    url("../assets/img/beans/wheat-2.webp");
  background-repeat: no-repeat;
  background-size: 40px, 100px, 80px, 100px;
  background-position: 25% 2%, 9% 20%, 75% 5%, 85% 23%;
}
.features-slider-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.06);
  transition:
    transform 1.1s cubic-bezier(.22,.61,.36,1),
    opacity 0.9s ease;
}
.features-slider-section.wheat::after {
  background-image:
    url("../assets/img/beans/wheat-5.webp"),
    url("../assets/img/beans/wheat-6.webp");
  background-repeat: no-repeat;
  background-size: 320px, 380px;
  background-position: -8% 100%, 109% 100%;
  filter: blur(5px);
}
/* Visible beans (active slide) */
.features-slider-section.is-active::after {
  opacity: 0.9;
  transform: translate3d(0, 0, 0) scale(1);
}


/* Visible beans (active slide) */
.features-slider-section.is-active::before {
  opacity: 0.9;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Enter states (beans coming in from outside) */
.features-slider-section.enter-next::before {
  opacity: 0;
  transform: translate3d(8%, 6%, 0) scale(1.12);
}

.features-slider-section.enter-prev::before {
  opacity: 0;
  transform: translate3d(-8%, -6%, 0) scale(1.12);
}

/* Exit states (beans going out) */
.features-slider-section.exit-next::before {
  opacity: 0;
  transform: translate3d(-10%, -8%, 0) scale(0.96);
}

.features-slider-section.exit-prev::before {
  opacity: 0;
  transform: translate3d(10%, 8%, 0) scale(0.96);
}

.fs-modal .modal-body img {
  max-width: 100vh;
}
@media (max-width: 767.98px) {
  .features-slider-section.coffee::before {
     background-image:
    url("../assets/img/beans/bean-1.png"),
    url("../assets/img/beans/bean-2.png"),
    url("../assets/img/beans/bean-3.png"),
    url("../assets/img/beans/bean-4.png"),
    url("../assets/img/beans/bean-5.png"),
    url("../assets/img/beans/bean-6.png");
    background-position: 22% 2%, 9% 20%, 75% 5%, 89% 23%, -54% 100%, 209% 100%;
    background-size: 80px, 60px, 100px, 70px, 220px, 280px;
  }
  .features-slider-section.rise::before {
  background-image:
    url("../assets/img/beans/rise-1.png"),
    url("../assets/img/beans/rise-2.png"),
    url("../assets/img/beans/rise-3.png"),
    url("../assets/img/beans/rise-4.png"),
    url("../assets/img/beans/rise-blur01.png"),
    url("");
    background-position: 22% 2%, 9% 20%, 75% 5%, 89% 23%, -86% 101%, 50% 100%;
  }
.features-slider-section.wheat::after {
  background-image:
    url("../assets/img/beans/wheat-5.webp"),
    url("../assets/img/beans/wheat-6.webp");
  background-repeat: no-repeat;
  background-size: 120px, 180px;
  background-position: -8% 100%, 109% 100%;
  filter: blur(5px);
}
}
/* ===================== BOOTSTRAP CAROUSEL FADE ===================== */
.features-carousel.carousel-fade .carousel-item {
  transition: opacity 0.8s ease;
}

/* ===================== MAIN IMAGE ANIMATION ===================== */
.features-carousel .carousel-item .fs-main-img {
  opacity: 0;
  transform: translateY(18px) scale(0.99);
  transition: opacity 0.7s ease, transform 0.9s ease;
  will-change: opacity, transform;
}

.features-carousel .carousel-item.active .fs-main-img {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Exit hint during transition */
.features-carousel .carousel-item.carousel-item-start .fs-main-img,
.features-carousel .carousel-item.carousel-item-end .fs-main-img {
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
}

/* ===================== SIDE BUTTONS ===================== */
.fs-image-wrapper {
  position: relative;
  display: inline-block;
}

.fs-sides {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.fs-side-stack {
  width: 250px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
}

.fs-side-stack--left {
  left: -47%;
  align-items: flex-end;
}

.fs-side-stack--right {
  right: -47%;
  align-items: flex-start;
}

.fs-side-btn {
  background: transparent;
  border: 2px solid #fff;
  padding: 5px 15px;
  border-radius: 25px;
  color: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
}

.fs-side-btn img {
  max-height: 30px;
  padding: 2px;
}

.fs-side-btn__text {
  margin-left: 7px;
  font-size: 16px;
}

/* ===================== TEXT CONTENT ANIMATION ===================== */
.features-carousel .carousel-item .fs-content h2,
.features-carousel .carousel-item .fs-content p {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.7s ease;
}

.features-carousel .carousel-item.active .fs-content h2,
.features-carousel .carousel-item.active .fs-content p {
  opacity: 1;
  transform: translateY(0);
}

.features-carousel .carousel-item.active .fs-content h2 { transition-delay: 0.10s; }
.features-carousel .carousel-item.active .fs-content p  { transition-delay: 0.18s; }

/* ===================== ARROWS ===================== */
.fs-arrows {
  display: flex;
}

.features-slider-section .carousel-control-next-icon,
.features-slider-section .carousel-control-prev-icon {
  width: 4.2rem;
  height: 4.2rem;
}

/* ===================== ACCESSIBILITY ===================== */
@media (prefers-reduced-motion: reduce) {
  .features-slider-section::before,
  .features-carousel * {
    transition: none !important;
    animation: none !important;
  }
}

/* Modal container */
.fs-modal .modal-content {
  background-color: #000;
  color: #fff;
  padding: 20px;
}
.fs-modal .modal-header {
  border:none;
  align-items: flex-start;
}
.fs-modal .btn-close {
    filter: invert(1);
    opacity: 1;
    transition: opacity 0.2s ease;
    font-size: 0.85rem;
    border: 2px solid #000;
    border-radius: 999px;
    padding: 10px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.fs-modal .btn-close:hover {
  transform: scale(1.1);
  opacity: 1;
}
.modal-header-text p {
  margin: 0;
  font-size: 0.925rem;
}

/* Start state (hidden, slightly below) */
.features-carousel .carousel-item .fs-side-btn {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

/* Active state (visible, in place) */
.features-carousel .carousel-item.active .fs-side-btn {
  opacity: 1;
  transform: translateY(0);
}

/* While slide is leaving / entering – keep buttons hidden */
.features-carousel .carousel-item.carousel-item-start .fs-side-btn,
.features-carousel .carousel-item.carousel-item-end .fs-side-btn {
  opacity: 0;
  transform: translateY(20px);
}

/* ===================== SIDE BUTTON HOVER ===================== */

.fs-side-btn:hover {
  border-color: rgba(255,255,255,0.8);
}
/* Hover must beat carousel "active" transform rules */
.features-carousel .carousel-item.active .fs-side-stack--left .fs-side-btn {
  transform-origin: right center;
  display: flex;
  align-items: center;
}

.features-carousel .carousel-item.active .fs-side-stack--right .fs-side-btn {
  transform-origin: left center;
  display: flex;
  align-items: center;
}

.features-carousel .carousel-item.active .fs-side-stack--left .fs-side-btn:hover {
  transform: translateY(-2px) scale(1.03);
}

.features-carousel .carousel-item.active .fs-side-stack--right .fs-side-btn:hover {
  transform: translateY(-2px) scale(1.03);
}

/* Smooth hover */
.features-carousel .carousel-item.active .fs-side-btn {
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

@media (max-width: 767.98px) {
  .fs-container {
    --bs-gutter-x: 2.0rem;
    padding-left: 20px;
    padding-right: 20px;
  }
  .section-alt-rows img {
    margin-bottom: 30px;
  }
  .features-carousel .carousel-item.active .fs-main-img {
    max-width: 300px;
  }
  .fs-side-btn {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .section-alt-rows .row {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

/* =========================== MAIN SLIDER =========================== */
.ms-section {background-color: #000;}




/* ---------------------------------------------
   APPLICATIONS — MATCH DESIGN (CENTERED + ARROWS BELOW)
---------------------------------------------- */

/* Section background (project has black / very dark) */
.app-sec-title {
 margin-bottom: 100px;
}

/* Main wrapper: center everything vertically */
.applications-carousel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center viewport and arrows */
}

/* Viewport: full width, but content centered like in mockup */
.applications-viewport {
  width: 100%;
  margin: 0 auto;
  padding: 10px 20px 0; /* No bottom padding, arrows are below */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* Hide scrollbar (optional) */
.applications-viewport::-webkit-scrollbar {
  display: none;
}

/* Track: centered row */
.applications-track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  justify-content: center; /* Center cards when there is space */
  padding: 0 20px;         /* Keeps the row away from edges on wide screens */
}

/* Card: match sizes and rounded corners from design */
.applications-card {
  flex: 0 0 auto;
  width: 324px;
  max-width: 360px;
  border-radius: 20px;
  padding: 28px 26px;
  scroll-snap-align: start;
  /* Use CSS variable as a background source */
  background: var(--app-card-bg, #fff);
  display: flex;
  flex-direction: column;
}
 .applications-card h3 {
  font-size: 18px;
}
/* Image area: centered grain/seed */
.applications-card__img {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.applications-card__img img {
  max-height: 140px;
  max-width: 70%;
  width: auto;
  height: auto;
  display: block;
}
.st-product-card {
  padding: 0;
}
.st-product-card h3 {
  margin-top:20px;
}
.applications-offcanvas__content h3, .applications-offcanvas__content h4 {
  line-height: 1.5;
}
.applications-offcanvas__content h4 {
  font-size: 1.2rem;
}
.st-product-carousel .btn-std-black {
  margin: 25px auto;
}
.st-product-card .applications-card__img {
  height: auto;
}
.st-product-card .applications-card__img img {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
    max-width: 100%;
    max-height: fit-content;
    height: unset;
    width: 100%;
}


/* Typography similar to mockup */
.applications-card__title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #111;
}

.applications-card__desc {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 22px;
  color: rgba(0,0,0,0.75);
}

/* Button: black pill */
.applications-card__btn {
  margin-top: auto;       /* Push button to bottom */
  border-radius: 999px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1;
  max-width: 122px;
}

/* Center whole carousel */
.applications-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Arrows row */
.applications-arrows {
  margin-top: 48px;
  display: flex;
  gap: 25px;
  justify-content: center;
}

/* Arrow button */
.applications-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  padding: 0;
  border: none;
  background: #ffffff;
  color: transparent;
  cursor: pointer;

  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);

  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Hover */
.applications-arrow:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.25);
}

/* Disabled */
.applications-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* Icon */
.applications-arrow::before {
  content: '';
  width: 16px;
  height: 16px;
  display: block;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Left arrow */
.applications-arrow--prev::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
}

/* Right arrow */
.applications-arrow--next::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
/* =================================================
   Standard product – Applications nav (progress + arrows)
================================================= */

.applications-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.applications-progress{
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}

.applications-progress-bar{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #111;
  transition: width .2s ease;
}


/* Desktop: no dragging, only buttons; keep transform animation */
@media (min-width: 992px) {
  .applications-viewport {
    overflow: hidden;     /* Disable mouse drag scroll on desktop */
    scroll-snap-type: none;
  }

  .applications-track {
    will-change: transform;
    transition: transform 300ms ease;
  }
}

/* Mobile: show 1 card per view nicely centered */
@media (max-width: 575px) {
  .applications-track {
    justify-content: flex-start; /* Better for native swipe */
  }

  .applications-card {
    width: min(360px, 86vw);
  }

  .applications-viewport {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Optional: keep exactly 4 cards centered like in mockup */
@media (min-width: 1400px) {
  .applications-viewport {
    max-width: 1410px !important; 
  }
}

@media (max-width: 575px) {
  .applications-track {
    justify-content: flex-start; /* required for scroll centering */
  }

  .applications-viewport {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 768px) {
  .app-sec-title {
    margin-bottom: 40px;
  }

}
/* =========================================================
   APPLICATIONS carousel — prevent card clipping < 1400px
   ========================================================= */

@media (max-width: 1399.98px) and (min-width: 992px) {
  /* Give the viewport some breathing room so cards don't get clipped */
  .applications-viewport {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Slightly smaller cards on mid screens */
  .applications-card {
    width: 320px;
    max-width: 320px;
  }
}

/* -------------------------------------------------
   APPLICATIONS carousel — mobile: 1 centered card
-------------------------------------------------- */

.applications-viewport {
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .applications-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    /* JS will set this so first/last card can be centered */
    padding-left: var(--app-side-pad, 0px);
    padding-right: var(--app-side-pad, 0px);
  }

  .applications-track {
    display: flex;
    width: max-content; /* prevent wrapping / let it scroll naturally */
  }

  .applications-card {
    flex: 0 0 auto;

    /* 1 card visible + breathing room (adjust 48px if you want tighter) */
    width: min(360px, calc(100vw - 48px));

    scroll-snap-align: center;
  }

  /* Optional: hide scrollbar (if you want) */
  .applications-viewport::-webkit-scrollbar {
    display: none;
  }
}
/*END STANDARD APP SLIDER*/


/* =========================================================
   FIX: Prevent horizontal page shifting on mobile
   ========================================================= */

/* Global safety net */
html, body {
  overflow-x: hidden;
}

/* Extra safety for common wrappers (Bootstrap/Understrap) */
.container,
.container-fluid,
section {

}

/* ---- MAIN CAUSE: side stacks in features slider overflow on mobile ---- */
@media (max-width: 991.98px) {
  /* Keep the whole slider from creating horizontal overflow */
  .features-slider-section {
    overflow: hidden;
  }

  /* Remove negative offsets that push content outside viewport */
  .fs-side-stack--left,
  .fs-side-stack--right {
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    align-items: center;
  }

  /* Optional: make stacks sit below image instead of on sides */
  .fs-side-stack {
    position: static;
    transform: none;
    margin-top: 16px;
  }

  .fs-sides {
    position: static;
    inset: auto;
  }
}


/* =========================================================
   PRODUCT TOC (menu) — mobile: 1-row horizontal scroll
   ========================================================= */

.product-toc {
  width: 100%;
}

/* Desktop stays centered like now */
.product-toc .nav {
  flex-wrap: wrap;
}

/* Mobile: one line + swipe horizontally */
@media (max-width: 991.98px) {
  .product-toc {
    overflow: hidden; /* keep section clean */
  }

  .product-toc .nav {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    white-space: nowrap;
    gap: 10px;

    /* space on sides so pills don't stick to edges */
    padding: 6px 16px;

    /* optional: smooth feel */
    scroll-behavior: smooth;

    /* optional: snap to items */
    scroll-snap-type: x mandatory;
  }

  .product-toc .nav-item {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  .product-toc .nav-link {
    flex: 0 0 auto;

    /* keep each pill one-line */
    white-space: nowrap;

    /* slightly smaller to save vertical space */
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1;
  }

  /* optional: hide scrollbar */
  .product-toc .nav::-webkit-scrollbar {
    display: none;
  }
}


/* =========================================================
   APPLICATIONS — fix clipping on 992–1399px
   ========================================================= */

@media (min-width: 992px) and (max-width: 1399.98px) {

  /* Keep cards fully visible inside the masked viewport */
  .applications-viewport {
    overflow: hidden !important;
    box-sizing: border-box;
    padding-left: 44px !important;
    padding-right: 44px !important;
  }

  /* IMPORTANT: do not center the track on mid screens,
     because centered track + transform causes edge clipping */
  .applications-track {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* =========================================
   Applications carousel (layout like mockup)
========================================= */

.apps-header .apps-subtitle{
  font-size: 14px;
  opacity: .7;
}

.apps-header .apps-title{
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.apps-header .apps-desc{
  max-width: 720px;
  font-size: 14px;
  line-height: 1.7;
  opacity: .75;
}

/* Carousel spacing */
.apps-carousel{
  margin-top: 10px;
}

/* Multi-item base:
   We will clone items in JS, so each .carousel-item becomes a "slot" that can hold multiple cards */
.apps-carousel .carousel-inner{
  overflow: visible;
}

.apps-carousel .carousel-item{
  display: flex;
  gap: 24px;
  align-items: stretch;
}

/* Card */
.apps-card{
  width: 100%;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.apps-card-image{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f2f2f2;
}

.apps-card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.apps-card-body{
  padding: 20px 18px 22px 18px;
}

.apps-card-title{
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* Button like in mockup (black pill) */
.apps-card-btn{
  background: #000;
  color: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 600;
  text-transform: lowercase;
  border: 0;
}

.apps-card-btn:hover{
  background: #111;
  color: #fff;
}

/* Bottom controls */
.apps-control-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.apps-control-btn span{
  font-size: 26px;
  line-height: 1;
  transform: translateY(-1px);
}

/* Desktop: show 4 cards per slide */
@media (min-width: 1200px){
  .apps-carousel .carousel-item > .apps-card{
    flex: 0 0 calc((100% - 24px * 3) / 4);
  }
}

/* Tablet: show 2 cards per slide */
@media (min-width: 768px) and (max-width: 1199.98px){
  .apps-carousel .carousel-item > .apps-card{
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

/* Mobile: show 1 card per slide */
@media (max-width: 767.98px){
  .apps-carousel .carousel-item{
    gap: 16px;
  }

  .apps-carousel .carousel-item > .apps-card{
    flex: 0 0 100%;
  }

  .apps-header .apps-title{
    font-size: 32px;
  }
}

/* FIX: 5+ cards -> prevent first card clipping on desktop */
@media (min-width: 992px) {
  .applications-track {
    justify-content: flex-start !important; /* was center */
  }
}

/* Applications Offcanvas */
/* Full width */
.applications-offcanvas{
  width: 100% !important;
  max-width: 100% !important;
  border-left: none;
}

/* Make entire offcanvas a column layout */
.applications-offcanvas{
  display: flex;
  flex-direction: column;
}

/* Body scrolls, footer stays visible */
.applications-offcanvas .offcanvas-body{
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Your centered content container inside body */
.app-offcanvas-body{
  padding: 0;
}

/* Content area centered */
.app-offcanvas-content{
  margin: 80px auto 0;
  width: 100%;
  max-width: 1200px;
  padding: 0 16px;

  /* leave room so footer doesn't cover content */
  padding-bottom: 120px;
}

.applications-offcanvas__content {
  max-width: 800px;
  margin-top: 60px;
}

/* Footer pinned at bottom of offcanvas */
.app-offcanvas-footer{
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  padding: 40px 0;
}

/* Arrow row */
.app-offcanvas-arrows{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;

  display: flex;
  justify-content: center;
  gap: 28px;
}

/* Remove bootstrap absolute positioning */
.applications-offcanvas .carousel-control-prev,
.applications-offcanvas .carousel-control-next{
  position: static;
  width: 56px;
  height: 56px;
  opacity: 1;
  transform: none;
}
.applications-offcanvas .carousel-control-prev-icon,
.applications-offcanvas .carousel-control-next-icon{
  width: 44px;
  height: 44px;
}

/* Lock background scroll without changing scroll position */
body.app-scroll-locked{
  position: fixed;
  width: 100%;
  overflow: hidden;
}
/* When offcanvas is open, block page scroll */
body.offcanvas-open {
  overflow: hidden !important;
}
.applications-offcanvas .offcanvas-body {
  overflow-y: auto;
}
html:has(.offcanvas.show),
body.offcanvas-open{
  overflow: hidden !important;
}

/* Offcanvas header layout */
.applications-offcanvas .offcanvas-header{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: relative;
}

/* Title centered in middle column */
.applications-offcanvas .offcanvas-title{
  grid-column: 2;
  text-align: center;
  margin: 60px 0 0;
}

/* Close button pinned to right column */
.applications-offcanvas .btn-close{
  grid-column: 3;
  justify-self: end;
}
.applications-offcanvas .carousel-fade .carousel-item {
  transition: opacity .6s cubic-bezier(.4,0,.2,1);
}

/* DESCRIPTION */
/* Image width options */
.product-image-wrapper img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
}

/* 100% */
.img-full {
  width: 100%;
  max-width: 100%;
}

/* 800px */
.img-800 {
  max-width: 800px;
  width: 100%;
}

/* 500px */
.img-500 {
  max-width: 500px;
  width: 100%;
}

/* Original but never overflow container */
.img-original {
  width: auto;
  height: auto;
  max-width: 100%;
  display: inline-block;
}

/* Spacer layout */

.product-spacer {
  width: 100%;
}

/* =================================================
   TECHNOLOGY slider nav (progress + arrows)
================================================= */

.tech-slider-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* Progress bar (front-page style equivalent) */
.tech-slider-progress{
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}

.tech-slider-progress-bar{
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: #111;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .12s linear;
  will-change: transform;
}

/* =================================================
   VISION AI – APPLICATIONS slider (scoped, safe)
   Works ONLY inside: .applications-section--vision
================================================= */

.applications-section--vision .app-products__slider{
  position: relative;
}

.applications-section--vision .app-products__viewport{
  overflow: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 30px;
  padding-top: 10px;
}

.applications-section--vision .app-products__viewport::-webkit-scrollbar{
  display: none;
}

.applications-section--vision .app-products__track{
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.applications-section--vision .app-products__card{
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  flex: 0 0 calc((100% - 24px*3) / 4);
}

@media (max-width: 1599.98px){
  .applications-section--vision .app-products__card{ flex: 0 0 calc((100% - 24px*2) / 3); }
}

@media (max-width: 1199.98px){
  .applications-section--vision .app-products__card{ flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 575.98px){
  .applications-section--vision .app-products__card{ flex-basis: 100%; }
}

.applications-section--vision .app-products__card-inner{
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  padding-top: 24px;
  padding-bottom: 18px;
  padding-left: 24px;
  padding-right: 24px;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0,0,0,.03);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}

/* Hover like homepage */
.applications-section--vision .app-products__card:hover .app-products__card-inner{
  transform: translateY(-0px);
  box-shadow: 0 10px 15px rgba(0,0,0,.14);
  color:#000;
}

.applications-section--vision .app-products__image{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0 10px;
  min-height: 250px;
  overflow: hidden;
}

.applications-section--vision .app-products__image img{
  max-width: 100%;
  height: auto;
  display: block;
  max-height: 200px;
  transition: transform 0.4s ease;
}

.applications-section--vision .app-products__card:hover .app-products__image img{
  transform: scale(1.00);
}

.applications-section--vision .app-products__bottom{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  min-height: 40px;
  margin-top: 0;
}

.applications-section--vision .app-products__text{
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.applications-section--vision .app-products__bottom .btn-std-black{
  margin-top: auto;
  align-self: flex-start;
  margin-bottom: 10px;
}

.applications-section--vision .app-products__card-title{
  font-weight: 600;
  line-height: 1.2;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.applications-section--vision .app-products__desc{
  margin-top: 10px;
  opacity: .85;
  font-size: 14px;
  line-height: 1.4;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Optional round arrow button on the right (unused if you use Learn more button) */
.applications-section--vision .app-products__btn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.applications-section--vision .app-products__btn::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  content: '';
  width: 18px;
  height: 18px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Nav (progress + arrows) */
.applications-section--vision .app-products__nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.applications-section--vision .app-products__progress{
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}

.applications-section--vision .app-products__progress-bar{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #111;
  transition: width .2s ease;
}

/* =================================================
   HERO VIDEO (autoplay, no controls) - VISION AI
================================================= */

.hero-video{
  position: relative;
  background: #000;
  overflow: hidden;
  min-height: 80vh;
}

/* media wrapper */
.hero-video__media{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}

/* video */
.hero-video__video{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;

  /* Helps prevent 1px seams on some mobile browsers */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Optional: subtle dark overlay for readability */
.hero-video__overlay{
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.08), rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.95));
  z-index: 1;
}

/* Content layer */
.hero-video__content{
  position: relative;
  z-index: 3;
  padding: 140px 0 100px;
  color: #fff;
}

/* =================================================
   EDGE MASK (apply on media wrapper - most reliable)
================================================= */

.hero-video__media::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;

  background:
    /* TOP fade */
    linear-gradient(
      to bottom,
      #000 0%,
      rgba(0,0,0,0.85) 10%,
      rgba(0,0,0,0) 22%
    ),
    /* BOTTOM fade */
    linear-gradient(
      to top,
      #000 0%,
      rgba(0,0,0,0.85) 10%,
      rgba(0,0,0,0) 22%
    ),
    /* LEFT fade */
    linear-gradient(
      to right,
      #000 0%,
      rgba(0,0,0,0.95) 15%,
      rgba(0,0,0,0) 26%
    ),
    /* RIGHT fade */
    linear-gradient(
      to left,
      #000 0%,
      rgba(0,0,0,0.95) 15%,
      rgba(0,0,0,0) 26%
    );
}

/* =================================================
   MOBILE
================================================= */

@media (max-width: 768px){

  .hero-video{
    min-height: 50vh;
  }

  .hero-video__video{
    object-fit: cover;
    transform: scale(1.05);
    transform-origin: center;
  }

  /* mobile edge mask – only top & bottom */
  .hero-video__media::after{
    background:

      /* TOP fade */
      linear-gradient(
        to bottom,
        #000 0%,
        rgba(0,0,0,0.7) 6%,
        rgba(0,0,0,0) 14%
      ),

      /* BOTTOM fade */
      linear-gradient(
        to top,
        #000 0%,
        rgba(0,0,0,0.7) 6%,
        rgba(0,0,0,0) 14%
      );
  }

}