/* --- BASIC LAYOUT & STYLING --- */


.transparent {
	opacity: 0 !important;
}



/* --- TABLE STYLING START --- */
/* --- TABLE STYLING START --- */
/* --- TABLE STYLING START --- */
/* --- TABLE STYLING START --- */
/* --- TABLE STYLING START --- */



/* Highlight styling for table cells */
.td_highlight {
  color: #006400;
  border-radius: 3em 0;
  margin: 0;
  background-image: linear-gradient(-100deg, rgba(255, 224, 0, 0.025), rgba(255, 224, 0, 0.125) 95%, rgba(255, 224, 0, 0.025));
}

/* Adjust widths for table cells using the common table classes */
.sppb-addon-table-main.bt tbody td:before,
.sppb-addon-table-main th:first-child {
  width: 34% !important;
}

/* Set width for table header cells in columns 2 to 7 */
th:nth-child(2),
th:nth-child(3),
th:nth-child(4),
th:nth-child(5),
th:nth-child(6),
th:nth-child(7) {
  width: 11% !important;
}

/* Hide the search icon in the table search wrapper */
.sppb-addon-table-search-wrap i {
  display: none;
}


/* table-series */

.ts-link {
    color: #fff;
}
.ts-link:link {
    color: #fff;
}
.ts-link:visited {
    color: #fff;
}
.ts-link:hover {
    color: #fff;
}
.ts-link:active {
    color: #fff;
}


/* --- TABLE STYLING END --- */
/* --- TABLE STYLING END --- */
/* --- TABLE STYLING END --- */
/* --- TABLE STYLING END --- */
/* --- TABLE STYLING END --- */




/* --- ADOBE PDF VIEWER --- START --- */

/* Existing styles for buttons */
.button-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

.pdf-button {
  width: 200px;
  height: 150px;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  cursor: pointer;
  box-shadow: 0px 0px 5px 0px rgba(178, 178, 178, 1);
}

.button-caption {
  min-width: 100px;
  background-color: #ffffff;
  color: #464855;
  font-size: 12px;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  text-align: center;
  padding: 5px 5px;
  margin: 15px;    
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* New styles for Adobe PDF viewer */
.adobe-dc-view {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
}

/* Style for the backdrop (if present) */
.adobe-dc-view-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 9998 !important;
}

/* Ensure all child elements of adobe-dc-view are on top */
.adobe-dc-view * {
  z-index: 10000 !important;
}

@media (max-width: 768px) {
  .pdf-button {
    width: 150px;
    height: 112px;
  }
}

@media (max-width: 480px) {
  .pdf-button {
    width: 100px;
    height: 75px;
  }
}



/* --- ADOBE PDF VIEWER --- END --- */
/* --- ADOBE PDF VIEWER --- END --- */
/* --- ADOBE PDF VIEWER --- END --- */
/* --- ADOBE PDF VIEWER --- END --- */
/* --- ADOBE PDF VIEWER --- END --- */




/* --- KEYFRAMES FOR MENU --- START --- */
/* --- KEYFRAMES FOR MENU --- START --- */
/* --- KEYFRAMES FOR MENU --- START --- */
/* --- KEYFRAMES FOR MENU --- START --- */
/* --- KEYFRAMES FOR MENU --- START --- */



:root {
  /* Variables for the flash highlight animation */
  --flash-bg: #FF6600;
  --anim-duration: 0.8s;
  --anim-timing: ease-in-out;
  --anim-iteration: 1;
--anim-fill: forwards;
}

/* Keyframes: simple "flash" with orange background and slight corner rounding */
@keyframes flashHighlight {
  0% {
    background-color: transparent;
    border-radius: 0;
  }
  40% {
    background-color: var(--flash-bg);
    border-radius: 5px;
  }
  100% {
    background-color: transparent;
    border-radius: 0;
  }
}

/* Animated highlight classes with sequential delays */
.highlight1 {
  animation: flashHighlight var(--anim-duration) var(--anim-timing) 3s var(--anim-iteration) var(--anim-fill);
}
.highlight2 {
  animation: flashHighlight var(--anim-duration) var(--anim-timing) 3.8s var(--anim-iteration) var(--anim-fill);
}
.highlight3 {
  animation: flashHighlight var(--anim-duration) var(--anim-timing) 4.6s var(--anim-iteration) var(--anim-fill);
}
.highlight4 {
  animation: flashHighlight var(--anim-duration) var(--anim-timing) 5.4s var(--anim-iteration) var(--anim-fill);
}
.highlight5 {
  animation: flashHighlight var(--anim-duration) var(--anim-timing) 6.2s var(--anim-iteration) var(--anim-fill);
}
.highlight6 {
  animation: flashHighlight var(--anim-duration) var(--anim-timing) 7s var(--anim-iteration) var(--anim-fill);
}




/* --- KEYFRAMES FOR MENU --- END --- */
/* --- KEYFRAMES FOR MENU --- END --- */
/* --- KEYFRAMES FOR MENU --- END --- */
/* --- KEYFRAMES FOR MENU --- END --- */
/* --- KEYFRAMES FOR MENU --- END --- */




/* --- VIDEO PROGRESS BAR --- START --- */
/* --- VIDEO PROGRESS BAR --- START --- */
/* --- VIDEO PROGRESS BAR --- START --- */
/* --- VIDEO PROGRESS BAR --- START --- */
/* --- VIDEO PROGRESS BAR --- START --- */



.pb-link {
    color: #fff;
}
.pb-link:link {
    color: #fff;
}
.pb-link:visited {
    color: #fff;
}
.pb-link:hover {
    color: #fff;
}
.pb-link:active {
    color: #fff;
}


/* --- VIDEO PROGRESS BAR --- END --- */
/* --- VIDEO PROGRESS BAR --- END --- */
/* --- VIDEO PROGRESS BAR --- END --- */
/* --- VIDEO PROGRESS BAR --- END --- */
/* --- VIDEO PROGRESS BAR --- END --- */





/* --- SCROLL CONTROL --- START --- */
/* --- SCROLL CONTROL --- START --- */
/* --- SCROLL CONTROL --- START --- */
/* --- SCROLL CONTROL --- START --- */
/* --- SCROLL CONTROL --- START --- */


#the_warranty {
  scroll-margin-top: -20em;
}


#the_user_manuals {
  scroll-margin-top: -0em;
}


/* --- SCROLL CONTROL --- END --- */
/* --- SCROLL CONTROL --- END --- */
/* --- SCROLL CONTROL --- END --- */
/* --- SCROLL CONTROL --- END --- */
/* --- SCROLL CONTROL --- END --- */




/* --- NEWS ARTICLES --- START --- */
/* --- NEWS ARTICLES --- START --- */
/* --- NEWS ARTICLES --- START --- */
/* --- NEWS ARTICLES --- START --- */
/* --- NEWS ARTICLES --- START --- */


blockquote {
  margin: 20px 0;
  padding: 20px;
  background-color: #f8f8f8;
  border-left: 5px solid #e0e0e0;
  font-style: italic;
}
blockquote p {
  margin: 0;
}


/* --- NEWS ARTICLES --- END --- */
/* --- NEWS ARTICLES --- END --- */
/* --- NEWS ARTICLES --- END --- */
/* --- NEWS ARTICLES --- END --- */
/* --- NEWS ARTICLES --- END --- */




/* --- REMOVE ZOOM FUNCTION IN PORTFOLIO --- START --- */
/* --- REMOVE ZOOM FUNCTION IN PORTFOLIO --- START --- */
/* --- REMOVE ZOOM FUNCTION IN PORTFOLIO --- START --- */
/* --- REMOVE ZOOM FUNCTION IN PORTFOLIO --- START --- */
/* --- REMOVE ZOOM FUNCTION IN PORTFOLIO --- START --- */



.sp-simpleportfolio-btns a.btn-zoom {display: none !important; visibility: hidden; }


/* --- REMOVE ZOOM FUNCTION IN PORTFOLIO --- END --- */
/* --- REMOVE ZOOM FUNCTION IN PORTFOLIO --- END --- */
/* --- REMOVE ZOOM FUNCTION IN PORTFOLIO --- END --- */
/* --- REMOVE ZOOM FUNCTION IN PORTFOLIO --- END --- */
/* --- REMOVE ZOOM FUNCTION IN PORTFOLIO --- END --- */






  
  
/* ====================================================
   START - SPECFICIATIONS CURRENCY TOGGLE
   
   AvaMoment · site-wide currency toggle for non-config pages
   Scope: buttons carrying both .toggleCurrency and .avm
   Safe with configurator: configurator rules have different selectors.
   
   ==================================================== */
.toggleCurrency.avm{
  background:transparent;
  border:0;
  padding:0 3px;
  margin:0;
  font:inherit;
  line-height:1;
  color:inherit;
  cursor:pointer;
}
.toggleCurrency.avm .usd-part,
.toggleCurrency.avm .cad-part{
  font-size:14px;
  text-decoration:none !important;
}
.toggleCurrency.avm .usd-part{ color:#3366FF; }
.toggleCurrency.avm .cad-part{ color:#ff6600; }
.toggleCurrency.avm .fa-right-left{
  color:#3366FF;
  font-size:9px;
  padding:0 3px;
  vertical-align:middle;
}
/* interaction hygiene */
.toggleCurrency.avm .usd-part:hover,
.toggleCurrency.avm .cad-part:hover,
.toggleCurrency.avm .usd-part.active,
.toggleCurrency.avm .cad-part.active,
.toggleCurrency.avm:focus,
.toggleCurrency.avm:focus-visible{
  text-decoration:none !important;
  outline:none;
}
/* price tint for CAD outside configurator (harmless overlap if duplicated) */
:not(.desay-config-root) .price-number.cad{ color:#ff6600; }
   
  
/* ====================================================
   END - SPECFICIATIONS CURRENCY TOGGLE
   ==================================================== */

   







/* ====================================================
   CONFIGURATOR & USD/CAD TOGGLE – blue‑underline version
   ==================================================== */
:root {
  --toggle-color-default:    #464845;
  --toggle-color-active:     #3366FF;
  --toggle-color-cad:        #ff6600;
  --toggle-underline-thick:  2px;
  --toggle-underline-offset: 3px;
  --toggle-transition:       color .25s ease, text-decoration .25s ease;
}

/* ====================================================
   CONFIGURATOR & USD/CAD TOGGLE (blue‑underline version)
   ==================================================== */
.toggleCurrency {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  padding: 0.5em 0.1em;
}

.toggleCurrency .separator {
  font-size: 0.75rem;
  padding: 0 0.25rem;
  color: var(--toggle-color-default);
}

.toggleCurrency .usd-part,
.toggleCurrency .cad-part {
  color: var(--toggle-color-default);
  text-decoration: none;
  transition: var(--toggle-transition);
  padding: 0 0.25rem;
}

/* Hover underline */
.toggleCurrency:hover .usd-part,
.toggleCurrency:hover .cad-part {
  color: var(--toggle-color-active);
  text-decoration: underline var(--toggle-color-active) var(--toggle-underline-thick);
  text-underline-offset: var(--toggle-underline-offset);
}

/* USD underline when NOT cad-active */
.toggleCurrency:not(.cad-active) .usd-part {
  color: var(--toggle-color-active);
  text-decoration: underline var(--toggle-color-active) var(--toggle-underline-thick);
  text-underline-offset: var(--toggle-underline-offset);
}

/* CAD underline when button IS cad-active */
.toggleCurrency.cad-active .cad-part {
  color: var(--toggle-color-cad);
  text-decoration: underline var(--toggle-color-active) var(--toggle-underline-thick);
  text-underline-offset: var(--toggle-underline-offset);
}



























/* ====================================================
   PRICE CELL HIGHLIGHTS
   ==================================================== */

/* Base color & transition for any price-number */
.price-number {
  color: #464845;
  transition: color 0.2s;
}

/* Converted prices */
.price-number.cad {
  color: #ff6600;
}


/* Glow on totals */
.value.total {
  text-shadow: 0 0 8px #ff6600;
}
 

/* Only target the total line’s price span */
.variant-line.total .price-number {
  text-shadow: 0 0 8px #ff6600;
}



  
/* ====================================================
   EXCHANGE RATE LINK
   ==================================================== */

.exchange-rate {
  font-size: 0.7em;
  color: #555;
  margin-bottom: 10px;
}

.exchange-rate__link {
  color: #0066cc;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: color 0.2s, border-bottom-style 0.2s;
}

.exchange-rate__link:hover,
.exchange-rate__link:focus {
  color: #004499;
  border-bottom-style: solid;
}































/* ====================================================
   CONFIGURATOR LAYOUT & VARIANT CARD TWEAKS
   ==================================================== */



/* ====================================================
   CONFIGURATOR FURTHER DETAILS
   ==================================================== */



/* ====================================================
   RESPONSIVE ADJUSTMENTS
   ==================================================== */

/* Stack columns under 992px */
@media (max-width: 992px) {
  .custom-layout-container {
    display: flex;
    flex-direction: column;
  }
  .custom-layout-container .column {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* Simplify grids & wrap pixel buttons under 768px */
@media (max-width: 768px) {
  .row-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pixel-choice-row {
    flex-wrap: wrap;
    gap: 0.25em;
  }
  .pixel-toggle-btn {
    margin: 0.25em;
  }
}


/* ====================================================
   END - CONFIGURATOR & USD/CAD TOGGLE
   ==================================================== */






/* ====================================================
   START - SPACING IN THE HEADER MENU
   ==================================================== */



/* make the separator span act like a real heading, with space below */
.custom-separator-class {
  display: block;
  font-weight: 600;
  margin-bottom: 0.75em;  /* space after the “Indoor · Installation” */
}

/* push every submenu link away from whatever’s above it */
.custom-submenu-class {
  display: block;          /* so margin-top actually applies */
  margin-top: 0.5em;       /* space before each series link */
  line-height: 1.4;        /* tighten up the link text */
  color: inherit;          /* keep your theme font color */
  text-decoration: none;   /* remove underline, if any */
}

/* if you only want the very first submenu in each group to be pushed further: */
.sp-mega-group .custom-separator-class + .menu_item > .custom-submenu-class {
  margin-top: 1em;
}



/* ====================================================
   END - SPACING IN THE HEADER MENU
   ==================================================== */


























/* ----------------------------------------------------- */
/* highlight the sub menu in a sequence */
 









.sp-megamenu-parent .sp-mega-group > li > a,
#sp-menu .sp-megamenu-parent .sp-mega-group li {font-weight: normal;}




/* Ensure it inherits the appropriate styles and applies them consistently */
.sp-group-title.custom-separator-class {
    display: block; /* Ensures it spans the full width */
    font-size: 14px; /* Matches the desired text size */
    font-weight: bold; /* Bold font */
    text-transform: uppercase; /* Uppercase text for a uniform appearance */
    color: #333; /* Dark gray color */
    padding: 8px 15px; /* Add padding for spacing */
    margin: 0; /* Prevent any unwanted margin */
    border-bottom: 1px solid #ddd; /* Add a thin bottom border for the separator line */
    box-sizing: border-box; /* Ensures padding is included within width */
}

/* Adjust for menu alignment if needed */
.sp-megamenu-parent .sp-group-title.custom-separator-class {
    text-align: left; /* Aligns text properly */
}

/* When inside dropdowns */
.sp-dropdown .sp-group-title.custom-separator-class {
    font-size: 14px; /* Adjust font size in dropdown */
    padding: 10px 15px; /* Consistent spacing */
    border-bottom: 1px solid #ddd; /* Separator style */
}

/* Optional styling for spacing within the dropdown menu */
.sp-dropdown li.sp-menu-item > a.sp-group-title.custom-separator-class {
    margin-top: 10px; /* Add space above the separator */
    margin-bottom: 10px; /* Add space below the separator */
}

/* Mobile adjustments (if necessary) */
@media (max-width: 991px) {
    .sp-group-title.custom-separator-class {
        font-size: 13px; /* Slightly smaller font size for mobile */
        padding: 6px 10px; /* Adjust padding */
        text-align: center; /* Center-align text */
    }
}



.sp-standalone-menu-item {
    /* Inherit styles from sp-menu-item */
    font-size: 14px;
    line-height: 1.5;
    padding: 10px 15px;
    display: inline-block;
    color: #252525;
    text-transform: capitalize;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.sp-standalone-menu-item:hover {
    /* Add hover effect */
    color: #f68e13;
    background-color: rgba(246, 142, 19, 0.1);
    text-decoration: none;
}

.sp-standalone-menu-item.active {
    /* Active state */
    font-weight: bold;
    border-bottom: 2px solid #f68e13;
}

.sp-standalone-menu-item::before {
    /* Add decorative elements if needed */
    content: '•';
    margin-right: 8px;
    color: #007bff;
    font-weight: bold;
}

.sp-standalone-menu-item.special {
    /* Custom styling for special items */
    background: linear-gradient(45deg, #f68e13, #ff6600);
    color: #fff;
    border-radius: 5px;
    padding: 12px 20px;
}


/* ====================================================
   START - CONTACT
   ==================================================== */

.info-block {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.icon-col {
  width: 22px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-col i {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", sans-serif;
  font-weight: 300;
  display: inline-block;
  line-height: 1;
}

.info-text {
  line-height: 1.5;
}

.info-text > div + div {
  margin-top: 0.5em;
}

/* Unified dotted underline link style for email, phone, web */
.info-text a {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  color: inherit;
  text-decoration-color: rgba(0, 0, 0, 0.5); /* 50% black underline */
  transition: text-decoration-color 0.25s ease-in-out;
}

.info-text a:hover {
  text-decoration-color: #ff6600; /* full orange underline on hover */
}

/* Contact card image + label block */
.contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.contact-photo {
  max-width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.contact-label {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Stack multiple contact cards under one icon */
.contact-multi {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ====================================================
   END - CONTACT
   ==================================================== */




/* ====================================================
   START - POP UP MODAL
   ==================================================== */

  .pip {
    font-family: 'Raleway', sans-serif;
    font-size: 0.75em;
    color: #464855;
    line-height: 1.6;
  }

  .pip h2 {
    margin: 0 0 1rem 0;
    color: #464855;
    font-weight: 500;
    font-size: 1.4em;
  }

  .pip hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 1rem 0;
    opacity: 0.5;
  }
  
  
/* ====================================================
   END - POP UP MODAL
   ==================================================== */
  
  
  

   /* USD⇄CAD color: apply everywhere, not just inside the configurator */
#specifications .priceNumber.cad,
#overview .priceNumber.cad,
.desay-config-root .priceNumber.cad{
  color:#ff6600 !important;
}

/* If you show a “priceRange” host in non-config sections, mirror it too */
#specifications .price-range.cad,
#overview .price-range.cad{
  color:#ff6600 !important;
}