/*========== Non-Mobile First Method ==========*/ /* Salient's own core CSS sets body{overflow:hidden} unconditionally, then a theme-options-generated stylesheet (salient-dynamic-styles.css) only restores overflow:visible at min-width:1000px. Below that, body stays clipped and breaks position:sticky for any descendant (e.g. #pdp-tab-nav) - the real page scroll happens on , but body (overflow:hidden) becomes sticky's reference container and its own scrollTop never moves, so nothing ever "sticks". Verified live this doesn't affect the mobile off-canvas menu - background scroll is already unlocked while it's open even in the unmodified baseline, so this isn't disabling anything. */ @media only screen and (max-width: 999px) { html body, html body.compensate-for-scrollbar { overflow: visible !important; } } /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { #footer-widgets.fratelli-footer-widgets-6col .fratelli-footer-row { flex-wrap: nowrap; } #footer-widgets.fratelli-footer-widgets-6col .fratelli-footer-col-wide { flex: 0 0 12%; max-width: 12%; } } @media only screen and (max-width : 999px) { #footer-widgets.fratelli-footer-widgets-6col .fratelli-footer-row { display: flex; flex-wrap: wrap; gap: 30px; } #footer-widgets.fratelli-footer-widgets-6col .fratelli-footer-col-wide { width: 100%; flex: 1 1 100%; max-width: 100%; display: flex; align-items: center; justify-content: space-between; margin-left: 0; } #footer-widgets.fratelli-footer-widgets-6col .fratelli-footer-col-wide .footerlogo { min-width: 120px; } #footer-widgets.fratelli-footer-widgets-6col .fratelli-footer-col { flex: 0 0 130px; max-width: none; min-width: 130px; } #footercontact { margin-top: 0 !important; } #footer-outer .widget { margin-bottom: 0 !important; } #custom_html-2 {display: block; margin: 0 0 0 auto;} /* Category landing blades (woo.php category_landing_blades()/ engineered_in_detail_section() - [divider custom_height_phone="300px"]): Salient's own "phone" divider-height class only takes effect at its own narrower default breakpoint. Override so the 300px phone height applies from <=999px instead, matching this site's tablet breakpoint. !important needed since the divider's own height is set as an inline style. */ .divider-wrap.height_phone_300px .divider { height: 300px !important; } .section.section--hero.kooka-hero { min-height: 60vh; } .section.section--hero.kooka-hero .container { margin-left: 30px; text-align: left; } .nectar-video-color-overlay {background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.9) 40%, rgba(0,0,0,0.3) 75%);} } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { .form-field.half { width: 100%; float: left; } .split-features .vc_column-inner .wpb_wrapper { columns: 1; column-gap: 40px; } .prod-tabs .wpb_tabs_nav { display: flex; flex-wrap: wrap; } #tab-downloads .nectar-hor-list-item[data-columns="2"][data-column-layout="xlarge_first"] > div:nth-child(1) { width: 60% !important; } #tab-downloads .nectar-hor-list-item .nectar-list-item[data-icon="true"] > * { display: block; vertical-align: middle; text-align: left; } #tab-videos { display: block !important;} #tab-accessories ul.products[class*="columns-"] li.product{width: 100% !important} .woocommerce-mini-cart-item, .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart .cart_list li{display: flex; flex-direction: column;text-align: left; align-items: baseline !important;} body:not(.woocommerce-order-received) .col2-set { display: flex; justify-content: space-between; flex-direction: column !important; } .staggs-configurator-popup.popup-vertical .staggs-configurator-main .staggs-product-view { top: 20px !important; position: fixed; min-height: 390px; max-width: 320px; margin: 0 auto; } .staggs-configurator-popup .staggs-configurator-main.align-left .staggs-product-options { margin-top: 360px; } .staggs-configurator-main{background-color: #F6F6F6;} } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { } /* Kooka elements - responsive rules from here on live in this file, not custom.css (base/desktop styles stay in custom.css). */ @media (max-width: 690px) { .kooka-form-section { padding: 65px 4vw; } .kooka-form-card { padding: 38px 22px; } #pdp-tab-nav { display: none; } /* engineered_in_detail_section() (PDP "Explore the Features") only - Salient's own [divider] shortcode emits a scoped inline