:root {
    /* Container */
    --container-max-width: 100%;
    --container-xxs-max-width: 27.5rem; /* 440px */
    --container-xs-max-width: 42.5rem; /* 680px */
    --container-sm-max-width: 61.25rem; /* 980px */
    --container-md-max-width: 71.875rem; /* 1150px */
    --container-lg-max-width: 78.75rem; /* 1260px */
    --container-xl-max-width: 85rem; /* 1360px */
    --container-gutter: 1.25rem;

    --section-vertical-spacing: 2.5rem;
    --section-vertical-spacing-tight: 2.5rem;

    --section-stack-gap: 2.25rem;
    --section-stack-gap-tight: 2.25rem;
    /* TODO: check this */
    --heading-font-family: "Avenir Next", sans-serif;
    --heading-font-weight: 400;
    --heading-font-style: normal;
    --heading-text-transform: uppercase;
    --heading-letter-spacing: 0.18em;
    --header-padding-block: 1rem;

    /* Form settings */
    --form-gap: 1.25rem; /* Gap between fieldset and submit button */
    --fieldset-gap: 1rem; /* Gap between each form input within a fieldset */
    --form-control-gap: 0.625rem; /* Gap between input and label (ignored for floating label) */
    --checkbox-control-gap: 0.75rem; /* Horizontal gap between checkbox and its associated label */
    --input-padding-block: 0.65rem; /* Vertical padding for input, textarea and native select */
    --input-padding-inline: 0.8rem; /* Horizontal padding for input, textarea and native select */
    --checkbox-size: 0.875rem; /* Size (width and height) for checkbox */

    /* Other sizes */
    --sticky-area-height: calc(
        var(--announcement-bar-is-sticky, 0) * var(--announcement-bar-height, 0px) + var(--header-is-sticky, 0) * var(--header-height, 0px)
    );

    /* RTL support */
    --transform-logical-flip: 1;
    --transform-origin-start: left;
    --transform-origin-end: right;

    /**
 * ---------------------------------------------------------------------
 * TYPOGRAPHY
 * ---------------------------------------------------------------------
 */

    /* Font properties */
    --heading-font-family: "Avenir Next", sans-serif;
    --heading-font-weight: 400;
    --heading-font-style: normal;
    --heading-text-transform: uppercase;
    --heading-letter-spacing: 0.18em;
    --text-font-family: "Avenir Next Ultra", sans-serif;
    --text-font-weight: 600;
    --text-font-style: normal;
    --text-letter-spacing: 0em;
    --button-font: var(--text-font-style) var(--text-font-weight) var(--text-sm) / 1.65 var(--text-font-family);
    --button-text-transform: uppercase;
    --button-letter-spacing: 0.18em;

    /* Font sizes */
    --text-heading-size-factor: 1;
    --text-h1: max(0.6875rem, clamp(1.375rem, 1.146341463414634rem + 0.975609756097561vw, 2rem) * var(--text-heading-size-factor));
    --text-h2: max(0.6875rem, clamp(1.25rem, 1.0670731707317074rem + 0.7804878048780488vw, 1.75rem) * var(--text-heading-size-factor));
    --text-h3: max(0.6875rem, clamp(1.125rem, 1.0335365853658536rem + 0.3902439024390244vw, 1.375rem) * var(--text-heading-size-factor));
    --text-h4: max(0.6875rem, clamp(1rem, 0.9542682926829268rem + 0.1951219512195122vw, 1.125rem) * var(--text-heading-size-factor));
    --text-h5: calc(0.875rem * var(--text-heading-size-factor));
    --text-h6: calc(0.75rem * var(--text-heading-size-factor));

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.125rem;

    /* Rounded variables (used for border radius) */
    --rounded-full: 9999px;
    --button-border-radius: 0rem;
    --input-border-radius: 0rem;

    /* Box shadow */
    --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.05);
    --shadow: 0 5px 15px rgb(0 0 0 / 0.05);
    --shadow-md: 0 5px 30px rgb(0 0 0 / 0.05);
    --shadow-block: px px px rgb(var(--text-primary) / 0);

    /**
 * ---------------------------------------------------------------------
 * OTHER
 * ---------------------------------------------------------------------
 */

    --checkmark-svg-url: url(/assets/checkmark.svg);
    --cursor-zoom-in-svg-url: url(/assets/cursor-zoom-in.svg);
}

[dir="rtl"]:root {
    /* RTL support */
    --transform-logical-flip: -1;
    --transform-origin-start: right;
    --transform-origin-end: left;
}

@media screen and (min-width: 700px) {
    :root {
        /* Typography (font size) */
        --text-xs: 0.75rem;
        --text-sm: 0.8125rem;
        --text-base: 0.875rem;
        --text-lg: 1rem;
        --text-xl: 1.25rem;

        /* Spacing settings */
        --container-gutter: 2rem;
    }
}

@media screen and (min-width: 1000px) {
    :root {
        /* Spacing settings */
        --container-gutter: 3rem;

        --section-vertical-spacing: 4rem;
        --section-vertical-spacing-tight: 4rem;

        --section-stack-gap: 3rem;
        --section-stack-gap-tight: 3rem;
    }
}

:root {
    /* Overlay used for modal */
    --page-overlay: 0 0 0 / 0.4;

    /* We use the first scheme background as default */
    /*--page-background: 235 235 235;*/
    --page-background: 232 232 232;

    /* Product colors */
    --on-sale-text: 227 44 43;
    --on-sale-badge-background: 227 44 43;
    --on-sale-badge-text: 255 255 255;
    --sold-out-badge-background: 239 239 239;
    --sold-out-badge-text: 0 0 0 / 0.65;
    --custom-badge-background: 28 28 28;
    --custom-badge-text: 255 255 255;
    --star-color: 28 28 28;

    /* Status colors */
    --success-background: 212 227 203;
    --success-text: 48 122 7;
    --warning-background: 253 241 224;
    --warning-text: 237 138 0;
    --error-background: 243 204 204;
    --error-text: 203 43 43;
}

.color-scheme--scheme-1 {
    /* Color settings */
    --accent: 92 92 92;
    --text-color: 92 92 92;
    --background: 235 235 235 / 1;
    --background-without-opacity: 255 255 255;
    --background-gradient: ;
    --border-color: 219 219 219; /* Button colors */
    --button-background: 92 92 92;
    --button-text-color: 255 255 255;

    /* Circled buttons */
    --circle-button-background: 255 255 255;
    --circle-button-text-color: 28 28 28;
}

.jasperosso-section:has(.section-spacing.color-scheme--bg-54922f2e920ba8346f6dc0fba343d673)
    + .jasperosso-section:has(.section-spacing.color-scheme--bg-54922f2e920ba8346f6dc0fba343d673:not(.bordered-section))
    .section-spacing {
    padding-block-start: 0;
}

.color-scheme--scheme-2 {
    /* Color settings */
    --accent: 92 92 92;
    --text-color: 92 92 92;
    --background: 243 243 243 / 1;
    --background-without-opacity: 243 243 243;
    --background-gradient: ;
    --border-color: 220 220 220; /* Button colors */
    --button-background: 92 92 92;
    --button-text-color: 255 255 255;

    /* Circled buttons */
    --circle-button-background: 255 255 255;
    --circle-button-text-color: 92 92 92;
}

.jasperosso-section:has(.section-spacing.color-scheme--bg-78566feb045e1e2e6eb726ab373c36bd)
    + .jasperosso-section:has(.section-spacing.color-scheme--bg-78566feb045e1e2e6eb726ab373c36bd:not(.bordered-section))
    .section-spacing {
    padding-block-start: 0;
}

.color-scheme--scheme-3 {
    /* Color settings */
    --accent: 255 255 255;
    --text-color: 255 255 255;
    --background: 28 28 28 / 1;
    --background-without-opacity: 28 28 28;
    --background-gradient: ;
    --border-color: 62 62 62; /* Button colors */
    --button-background: 255 255 255;
    --button-text-color: 28 28 28;

    /* Circled buttons */
    --circle-button-background: 255 255 255;
    --circle-button-text-color: 28 28 28;
}

.jasperosso-section:has(.section-spacing.color-scheme--bg-c1f8cb21047e4797e94d0969dc5d1e44)
    + .jasperosso-section:has(.section-spacing.color-scheme--bg-c1f8cb21047e4797e94d0969dc5d1e44:not(.bordered-section))
    .section-spacing {
    padding-block-start: 0;
}

.color-scheme--scheme-4 {
    /* Color settings */
    --accent: 255 255 255;
    --text-color: 255 255 255;
    --background: 0 0 0 / 0;
    --background-without-opacity: 0 0 0;
    --background-gradient: ;
    --border-color: 255 255 255; /* Button colors */
    --button-background: 255 255 255;
    --button-text-color: 28 28 28;

    /* Circled buttons */
    --circle-button-background: 255 255 255;
    --circle-button-text-color: 28 28 28;
}

.jasperosso-section:has(.section-spacing.color-scheme--bg-3671eee015764974ee0aef1536023e0f)
    + .jasperosso-section:has(.section-spacing.color-scheme--bg-3671eee015764974ee0aef1536023e0f:not(.bordered-section))
    .section-spacing {
    padding-block-start: 0;
}

.color-scheme--dialog {
    /* Color settings */
    --accent: 92 92 92;
    --text-color: 92 92 92;
    --background: 243 243 243 / 1;
    --background-without-opacity: 243 243 243;
    --background-gradient: ;
    --border-color: 220 220 220; /* Button colors */
    --button-background: 92 92 92;
    --button-text-color: 255 255 255;

    /* Circled buttons */
    --circle-button-background: 255 255 255;
    --circle-button-text-color: 92 92 92;
}

* {
    margin: 0;
    padding: 0;
    user-select: none;
    overflow: hidden;
    scrollbar-width: 0;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* disable blue ehighlight on mobile phones */
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    --text-h6: calc(0.7rem * var(--text-heading-size-factor));
}

@media screen and (max-width: 768px) {
    * {
        --text-h6: calc(0.6rem * var(--text-heading-size-factor));
    }
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

html,
body {
    width: 100vw;
    min-height: 100svh;
    overflow: hidden;
}

a {
    text-decoration: none;
}

:root {
    font-family: "Avenir Next";
    line-height: 1.5;
    /* font-weight: 400; */

    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    --jasperosso-red: rgb(144, 6, 3);
    overflow-wrap: anywhere;
    word-wrap: normal;
}

/* LOADING */
#loadingSpinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#loadingSpinnerBorder {
    border: 4px solid rgba(255, 255, 255, 0.1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-left-color: #000000;
    animation: spin 1s linear infinite;
    position: absolute;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* #lottieWraper {
  width: 60px;
  height: 60px;
} */

#loadingPercentages {
    color: #000000;
    font-weight: 600;
    font-size: 13px;
    position: absolute;
}

#loadingLogo {
    /* background-color: aqua; */
    margin-top: 110px;
    width: 180px;
    height: 21px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='71' viewBox='0 0 600 71' fill='none'%3E%3Cscript xmlns=''/%3E%3Cscript xmlns=''/%3E%3Cpath d='M15.2873 0.923406H39.0903V2.66757H37.7565C35.1915 2.66757 33.5499 2.87278 32.8317 3.28317C32.0109 3.69357 31.4979 4.51435 31.2927 5.64294C31.0876 6.77153 30.8824 9.43914 30.8824 13.7483V47.2982C30.8824 51.6074 30.6772 54.8906 30.3694 57.2503C30.0616 59.5075 29.0356 61.7647 27.4966 63.9193C25.9576 66.0739 23.803 67.7155 21.238 68.844C18.6731 69.9726 15.5951 70.5882 12.1067 70.5882C8.61833 70.5882 5.23256 69.87 3.18057 68.4337C1.12859 66.9973 0 65.3557 0 63.3037C0 61.2517 0.410397 61.1491 1.12859 60.3283C1.84679 59.5075 2.77018 59.0971 3.89877 59.0971C5.02736 59.0971 5.95075 59.5075 6.66895 60.2257C7.38714 60.9439 7.79754 61.8673 7.79754 62.8933C7.79754 63.9193 7.69494 64.2271 7.38714 64.8427C7.07934 65.4583 6.97674 65.8687 6.97674 66.1765C6.97674 66.9973 7.48974 67.6129 8.41313 68.0233C9.33653 68.4337 10.5677 68.7414 12.0041 68.7414C14.8769 68.7414 17.3393 67.8181 19.2886 65.9713C21.238 64.1245 22.4692 61.9699 22.8796 59.5075C23.29 57.0451 23.4952 52.9412 23.4952 47.1956V13.6457C23.4952 9.54173 23.3926 6.97674 23.1874 5.74555C22.9822 4.51436 22.4692 3.69357 21.6484 3.28317C20.8276 2.87278 19.186 2.56497 16.6211 2.56497H15.3899V0.820801L15.2873 0.923406Z' fill='%23131313'/%3E%3Cpath d='M83.7208 33.3447H64.227L62.8932 36.6279C60.9438 41.3475 59.9178 44.4254 59.9178 45.8618C59.9178 47.2982 60.4308 48.5294 61.4568 49.3502C62.4828 50.171 63.8166 50.5814 65.4582 50.5814V52.3256H50.1709V50.5814C52.4281 50.2736 54.1723 49.4528 55.1983 48.2216C56.3268 46.9904 57.6606 44.3228 59.1996 40.3215C59.3022 39.9111 59.9178 38.4747 61.0464 35.9097L75.9233 0.3078H77.3597L94.4937 41.0397L96.8535 46.3748C97.3665 47.606 98.0847 48.5294 99.0081 49.2476C99.9315 49.9658 101.265 50.3762 103.009 50.5814V52.3256H82.9V50.5814C85.3624 50.5814 87.004 50.3762 87.9274 50.0684C88.7482 49.658 89.2612 48.9398 89.2612 47.9138C89.2612 46.8878 88.6456 45.7592 87.517 42.9891L83.6182 33.4473L83.7208 33.3447ZM83.1052 31.6006L74.0765 9.74691L65.0478 31.6006H83.2078H83.1052Z' fill='%23131313'/%3E%3Cpath d='M120.452 51.71V35.1915H122.298C124.453 45.9645 129.48 51.2996 137.586 51.2996C145.691 51.2996 143.947 50.2736 145.999 48.2216C148.051 46.1696 148.974 43.9125 148.974 41.3475C148.974 38.7825 148.153 36.6279 146.409 34.8837C144.665 33.1395 141.484 31.2928 136.867 29.3434C132.763 27.5992 129.685 26.0602 127.531 24.7264C125.479 23.3926 123.837 21.6484 122.606 19.5964C121.478 17.4419 120.862 15.1847 120.862 12.8249C120.862 9.13133 122.093 6.15596 124.658 3.69358C127.223 1.2312 130.404 0 134.302 0C138.201 0 138.509 0.307798 140.458 1.02599C142.408 1.74419 144.357 3.18059 146.409 5.43778C147.538 4.00139 148.256 2.565 148.359 0.923418H150V14.3639H148.359C147.435 10.4651 145.691 7.38714 143.229 5.12996C140.766 2.87278 137.996 1.7442 134.815 1.7442C131.635 1.7442 129.48 2.56499 128.146 4.20657C126.71 5.84816 125.992 7.69496 125.992 9.64435C125.992 11.5937 126.915 14.0561 128.659 15.6977C130.404 17.3393 133.584 19.1861 138.201 21.3406C142.613 23.29 145.794 24.9316 147.846 26.0602C149.898 27.2914 151.436 28.933 152.668 30.985C153.899 33.1395 154.514 35.4993 154.514 38.3721C154.514 42.7839 153.078 46.3748 150.103 49.0424C147.127 51.8126 143.229 53.1464 138.406 53.1464C133.584 53.1464 128.044 50.9918 124.35 46.6826C123.53 47.9138 122.914 49.5554 122.504 51.71H120.657H120.452Z' fill='%23131313'/%3E%3Cpath d='M188.988 28.1122V38.8851C188.988 42.8865 188.988 45.554 189.295 46.7852C189.501 48.0164 190.014 48.9398 190.834 49.5554C191.655 50.171 193.194 50.4788 195.554 50.4788H197.298V52.223H173.803V50.4788H175.137C177.291 50.4788 178.83 50.171 179.651 49.658C180.472 49.145 180.985 48.2216 181.293 47.093C181.601 45.9644 181.601 43.1943 181.601 38.8851V13.7483C181.601 9.64433 181.498 7.07933 181.293 5.84814C181.088 4.61695 180.575 3.79617 179.754 3.38577C178.933 2.97537 177.291 2.66756 174.726 2.66756H173.803V0.923396L180.267 0.718185C185.397 0.512987 189.398 0.4104 192.271 0.4104C197.606 0.4104 201.607 0.820778 204.48 1.64157C207.353 2.46237 209.713 4.00137 211.559 6.05336C213.406 8.20794 214.33 10.8755 214.33 14.0561C214.33 17.2367 213.714 19.2886 212.483 21.4432C211.252 23.5978 209.405 25.2394 207.148 26.368C204.788 27.4966 200.684 28.0096 194.836 28.0096H189.193L188.988 28.1122ZM188.988 26.1628H192.681C195.657 26.1628 198.016 25.855 199.863 25.2394C201.71 24.6238 203.146 23.3926 204.378 21.5458C205.609 19.699 206.224 17.3393 206.224 14.5691C206.224 10.3625 205.198 7.18193 203.146 5.23254C201.094 3.28316 197.709 2.25717 192.989 2.25717C188.269 2.25717 190.014 2.25718 189.09 2.35978V26.0602L188.988 26.1628Z' fill='%23131313'/%3E%3Cpath d='M272.196 36.2175H274.043L272.914 52.223H230.438V50.4788H231.464C234.029 50.4788 235.67 50.171 236.389 49.4528C237.107 48.7346 237.62 47.9138 237.825 46.8878C238.03 45.8619 238.133 43.1943 238.133 38.8851V13.7483C238.133 9.84956 238.03 7.28458 237.825 6.05339C237.62 4.8222 237.107 4.0014 236.389 3.48841C235.67 2.97541 234.029 2.7702 231.566 2.7702V1.026H268.194L269.426 13.8509H267.681C266.861 10.2599 265.835 7.69495 264.706 6.25857C263.577 4.71958 262.141 3.7962 260.499 3.3858C258.858 2.9754 256.293 2.7702 252.702 2.7702H245.623V24.316H251.06C253.523 24.316 255.267 24.1108 256.293 23.7004C257.319 23.29 257.934 22.6744 258.242 21.751C258.55 20.9303 258.755 19.1861 258.755 16.6211H260.499V34.1656H258.755C258.755 31.2928 258.55 29.446 258.037 28.42C257.524 27.4966 256.908 26.7784 255.985 26.5732C255.062 26.2654 253.523 26.1628 251.265 26.1628H245.623V38.2695C245.623 44.3229 246.033 47.9138 246.751 48.9398C247.572 49.9658 249.624 50.5814 253.112 50.5814H256.908C259.576 50.5814 261.833 50.2736 263.577 49.5554C265.322 48.8372 266.963 47.4008 268.502 45.2463C270.041 43.0917 271.272 40.1163 272.196 36.3201V36.2175Z' fill='%23131313'/%3E%3Cpath d='M345.964 52.2231H332.114C329.651 50.4789 325.958 46.0671 320.93 38.7826C319.289 36.4228 317.647 34.2682 315.903 32.1136C314.159 29.959 312.927 28.7278 312.312 28.2148C311.696 27.7018 310.67 27.4966 309.234 27.4966H307.182V38.8852C307.182 42.8865 307.182 45.5541 307.49 46.7853C307.695 48.0165 308.208 48.9399 309.029 49.5555C309.85 50.1711 311.388 50.4789 313.748 50.4789H316.211V52.2231H291.689V50.4789H293.331C295.486 50.4789 297.025 50.1711 297.845 49.6581C298.666 49.1451 299.179 48.2217 299.487 47.0931C299.692 45.9645 299.795 43.1943 299.795 38.8852V13.7484C299.795 9.6444 299.692 7.07941 299.487 5.84822C299.282 4.61703 298.769 3.79624 297.948 3.38584C297.127 2.97545 295.486 2.66764 292.921 2.66764H292.1V0.923468L299.487 0.513046C304.412 0.307848 308.208 0.205261 311.183 0.205261C316.108 0.205261 320.007 0.615645 323.085 1.53904C326.163 2.46243 328.625 3.89884 330.472 6.05343C332.319 8.10541 333.345 10.5678 333.345 13.4405C333.345 16.3133 332.114 19.6991 329.651 22.0589C327.189 24.4187 323.495 25.8551 318.776 26.4707C320.93 27.4966 324.419 31.1902 329.138 37.654C333.037 42.8865 336.115 46.2723 338.27 47.9139C340.527 49.5555 343.092 50.3763 346.17 50.4789V52.2231H345.964ZM307.182 25.7525C309.029 25.7525 310.978 25.6499 313.03 25.5473C315.082 25.5473 316.826 25.1369 318.263 24.7265C319.802 24.3161 320.93 23.5979 321.854 22.7771C322.777 21.9563 323.495 20.7251 324.008 19.3913C324.521 17.9549 324.829 16.2107 324.829 14.1588C324.829 10.5678 323.906 7.69501 322.161 5.54043C320.315 3.38585 316.416 2.25724 310.363 2.25724C304.309 2.25724 308.311 2.25726 307.182 2.46246V25.8551V25.7525Z' fill='%23131313'/%3E%3Cpath d='M356.943 26.2654C356.943 18.3653 359.61 12.0041 364.843 7.18194C370.075 2.35978 376.744 0 384.644 0C392.545 0 399.316 2.35981 404.651 7.07937C409.986 11.7989 412.654 18.2627 412.654 26.4706C412.654 34.6785 410.089 40.8345 404.959 45.7592C399.829 50.684 393.058 53.1464 384.747 53.1464C376.436 53.1464 369.973 50.684 364.74 45.7592C359.508 40.8345 356.943 34.3707 356.943 26.1628V26.2654ZM365.561 26.4706C365.561 34.6785 367.203 40.9371 370.486 45.0411C373.769 49.145 378.694 51.197 385.26 51.197C391.826 51.197 395.623 49.145 398.906 45.0411C402.291 40.9371 403.933 34.7811 403.933 26.5732C403.933 18.3653 402.291 12.5171 399.008 8.20793C395.725 4.00137 390.903 1.8468 384.644 1.8468C378.386 1.8468 373.769 3.89879 370.486 8.10536C367.203 12.2093 365.561 18.3653 365.561 26.4706Z' fill='%23131313'/%3E%3Cpath d='M434.405 51.71V35.1915H436.252C438.406 45.9645 443.434 51.2996 451.539 51.2996C459.644 51.2996 457.9 50.2736 459.952 48.2216C461.901 46.1696 462.927 43.9125 462.927 41.3475C462.927 38.7825 462.107 36.6279 460.362 34.8837C458.618 33.1395 455.438 31.2928 450.821 29.3434C446.717 27.5992 443.639 26.0602 441.484 24.7264C439.432 23.3926 437.791 21.6484 436.559 19.5964C435.328 17.5445 434.815 15.1847 434.815 12.8249C434.815 9.13133 436.046 6.15596 438.611 3.69358C441.176 1.2312 444.357 0 448.256 0C452.154 0 452.462 0.307798 454.412 1.02599C456.361 1.74419 458.31 3.18059 460.362 5.43778C461.491 4.00139 462.209 2.565 462.312 0.923418H463.953V14.3639H462.312C461.388 10.4651 459.644 7.38714 457.182 5.12996C454.719 2.87278 451.949 1.7442 448.769 1.7442C445.588 1.7442 443.434 2.56499 442.1 4.20657C440.663 5.84816 439.945 7.69496 439.945 9.64435C439.945 11.5937 440.869 14.0561 442.613 15.6977C444.357 17.3393 447.537 19.1861 452.154 21.3406C456.566 23.29 459.747 24.9316 461.799 26.0602C463.851 27.2914 465.39 28.933 466.621 30.985C467.852 33.1395 468.468 35.4993 468.468 38.3721C468.468 42.7839 467.031 46.3748 464.056 49.0424C461.183 51.8126 457.182 53.1464 452.36 53.1464C447.537 53.1464 441.997 50.9918 438.304 46.6826C437.483 47.9138 436.867 49.5554 436.457 51.71H434.61H434.405Z' fill='%23131313'/%3E%3Cpath d='M489.603 51.71V35.1915H491.45C493.605 45.9645 498.632 51.2996 506.737 51.2996C514.843 51.2996 513.098 50.2736 515.15 48.2216C517.1 46.1696 518.126 43.9125 518.126 41.3475C518.126 38.7825 517.305 36.6279 515.561 34.8837C513.817 33.1395 510.636 31.2928 506.019 29.3434C501.915 27.5992 498.837 26.0602 496.683 24.7264C494.631 23.3926 492.989 21.6484 491.758 19.5964C490.527 17.5445 490.014 15.1847 490.014 12.8249C490.014 9.13133 491.245 6.15596 493.81 3.69358C496.375 1.2312 499.555 0 503.454 0C507.353 0 507.661 0.307798 509.61 1.02599C511.559 1.74419 513.509 3.18059 515.561 5.43778C516.689 4.00139 517.408 2.565 517.51 0.923418H519.152V14.3639H517.51C516.587 10.4651 514.843 7.38714 512.38 5.12996C509.918 2.87278 507.148 1.7442 503.967 1.7442C500.787 1.7442 498.632 2.56499 497.298 4.20657C495.862 5.84816 495.144 7.69496 495.144 9.64435C495.144 11.5937 496.067 14.0561 497.811 15.6977C499.555 17.3393 502.736 19.1861 507.353 21.3406C511.765 23.29 514.945 24.9316 516.997 26.0602C519.049 27.2914 520.588 28.933 521.819 30.985C523.051 33.1395 523.666 35.4993 523.666 38.3721C523.666 42.7839 522.23 46.3748 519.254 49.0424C516.382 51.8126 512.38 53.1464 507.558 53.1464C502.736 53.1464 497.196 50.9918 493.502 46.6826C492.681 47.9138 492.066 49.5554 491.655 51.71H489.808H489.603Z' fill='%23131313'/%3E%3Cpath d='M544.289 26.2654C544.289 18.3653 546.956 12.0041 552.189 7.18194C557.524 2.35978 564.09 0 571.99 0C579.89 0 586.662 2.35981 591.997 7.07937C597.332 11.7989 600 18.2627 600 26.4706C600 34.6785 597.435 40.8345 592.305 45.7592C587.175 50.684 580.403 53.1464 572.093 53.1464C563.782 53.1464 557.319 50.684 552.086 45.7592C546.854 40.8345 544.289 34.3707 544.289 26.1628V26.2654ZM552.907 26.4706C552.907 34.6785 554.549 40.9371 557.832 45.0411C561.115 49.145 566.04 51.197 572.606 51.197C579.172 51.197 582.968 49.145 586.252 45.0411C589.637 40.9371 591.279 34.7811 591.279 26.5732C591.279 18.3653 589.637 12.5171 586.354 8.20793C583.071 4.00137 578.249 1.8468 571.99 1.8468C565.732 1.8468 561.115 3.89879 557.832 8.10536C554.549 12.2093 552.907 18.3653 552.907 26.4706Z' fill='%23131313'/%3E%3Cscript xmlns=''/%3E%3C/svg%3E");
}

/* CANVAS */
#renderCanvas {
    height: 56.25vw;
    width: 100vw !important;
    max-height: 50vh;
    outline: none;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
@media screen and (min-width: 1024px) {
    #renderCanvas {
        height: calc(100svh - var(--site-header-height));
        max-height: 100%;
        width: 70vw !important;
    }
}

#canvasAndSidebar {
    position: relative;
    color: #1f1f1f;
}

@media screen and (min-width: 1024px) {
    #canvasAndSidebar {
        display: flex;
        flex-direction: row;
    }
}

/* SIDEBAR */
#sideBar {
    display: flex;
    flex-direction: column;
    height: calc(100svh - var(--site-render-canvas-height) - var(--site-header-height) - 2rem);
    position: relative;
}

@media screen and (min-width: 1024px) {
    #sideBar {
        width: 30vw;
        height: calc(100svh -var(--site-header-height) - var(--site-price-height));
        border-left: 1px solid #e0e0e0;
    }
}

#optionsSideBar {
    overflow-y: scroll;
    scroll-behavior: smooth;
    height: calc(100svh - var(--site-header-height) - var(--site-price-height));
    background-color: white;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

@media screen and (min-width: 1024px) {
    #optionsSideBar {
        height: calc(100svh - var(--site-header-height) - var(--site-price-height));
    }
}

#modelNameContainer {
    margin: 1rem;
    margin-left: var(--container-gutter);
    position: absolute;
}

@media screen and (min-width: 700px) {
    #modelNameContainer {
        margin-left: var(--container-gutter);
    }
}

/* MODEL TITLE */

#modelTypeDisplay {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
    font-size: var(--text-h2);
    line-height: 1.7;
}
#modelVariantDisplay {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
    font-size: var(--text-h6);
    line-height: 1.7;
}

/* APPLY TO ALL */
#applyToAllMaterialsContainer {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #1f1f1f;
    padding: 4px 14px 4px 4px;
    border-radius: 32px;
    margin: 0 auto;
    gap: 1rem;

    position: absolute;
    top: 1rem;
    right: 1rem;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.applyToAllMaterialsText {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
    overflow-wrap: anywhere;
    word-wrap: normal;
    font-size: var(--text-h6);
    line-height: 1.7;
}

@media screen and (min-width: 1024px) {
    #applyToAllMaterialsContainer {
        right: calc(30vw + 1rem);
    }
}

#applyToAllMaterialsContainer.s-active {
    opacity: 1;
}

#applyToAllMaterialsImg {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid #1f1f1f;
}

/* NAV OPTIONS */
.navOptionContainer {
    position: relative;
    overflow: visible;
    display: none;
}

.navOptionTitle {
    position: sticky;
    top: 0;
    background-color: var(--jasperosso-red);
    color: white;
    padding: 0.5rem 1rem;
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
    font-size: var(--text-h6);
    line-height: 1.7;
    z-index: 10;
}

.navOptionDropdown {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid hsl(0 0% 88% / 1);
    cursor: pointer;
    align-items: center;
    padding-right: calc(var(--container-gutter) - 7px);
}

/* @Rich ADDED START */
.navOptionDropdown.s-sticky {
    position: sticky;
    top: 32px;
    background-color: white;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

@media screen and (min-width: 1024px) {
    .navOptionDropdown.s-sticky {
        top: 35px;
    }
}
/* @Rich ADDED END */

.navOptionDropdownTitle {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
    font-size: var(--text-h6);
    line-height: 1.1;
}

.squareOptionContainer {
    /* display: none; */
}

.navOptionContainer.sideOptionsContainer .navOptionBackText,
.navOptionContainer.sideOptionsContainer .sideOptionArrow {
    /* display: none; */
}
.navOptionContainer.sideOptionsContainer .navOptionDropdown:empty {
    display: none;
}

.navOptionContainer.sideOptionsContainer .navOptionBackText {
    margin-left: auto;
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
    font-size: var(--text-h6);
    line-height: 1.1;
}
.navOptionContainer.sideOptionsContainer .sideOptionArrow {
    transform: rotate(-90deg);
}

.navOptionContainer.sideOptionsContainer .navOptionTitleText {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
    font-size: var(--text-h6);
    line-height: 1.1;
}

.sideOptionsContainer {
    position: absolute;
    width: 100%;
    top: 0px;
    background-color: white;
    height: fit-content;
    transition: all 0.3s ease-in-out;
    overflow-y: scroll;
    display: block;
    left: 100%; 
    height: 100%; 
    z-index: 11;
}

.sideOptionsContainer .dropDownContainer {
    /* height: 100svh; */
    grid-auto-rows: min-content;
}

@media screen and (min-width: 1024px) {
    .sideOptionsContainer {
        width: 30vw;
    }
}

.sideOptionsTitle {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(144 6 3);
    color: white;
    position: sticky;
    top: 0;
    padding: 0.5rem 1rem;
    max-height: 35px;
    padding-right: calc(var(--container-gutter) - 7px);
    z-index: 12;
}

/* DROPDOWN  */
.dropDownContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
    /* Fix for iPad scrolling */
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent zoom on iOS */
    touch-action: manipulation;
}

.dropDownContainer::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

/* Specific fix for lace dropdown containers on iPad */
@media (pointer: coarse) {
    .dropDownContainer {
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        overscroll-behavior: contain;
    }
}

/* Additional iPad specific fixes */
@supports (-webkit-touch-callout: none) {
    .dropDownContainer {
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0);
        /* Hardware acceleration for better scrolling */
        will-change: scroll-position;
    }
}

.squareOptionContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.dropDownOptionContainer {
    padding: 0.7rem;
}

@media screen and (min-width: 390px) {
    .dropDownContainer,
    .squareOptionContainer {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.optionImg.optionsOptionImg,
.dropDownOptionImg {
    aspect-ratio: 1/1;
    max-width: 85px;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    transition: all 0.5s ease-in-out;
    background-position: center;
    background-size: 100%;
}

.dropDownOptionImg.activeOption {
    border-color: #900603;
}

.optionContainer {
    padding: 0.7rem;
}

.optionTitle {
    text-align: center;
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
    overflow-wrap: anywhere;
    word-wrap: normal;
    font-size: var(--text-h6);
    font-size: 0.6rem;
    line-height: 1.2;
    margin-top: 0.5rem;
}

.dropDownOptionButton {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dropDownOptionTitle {
    text-align: center;
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
    overflow-wrap: anywhere;
    word-wrap: normal;
    font-size: var(--text-h6);
    font-size: 0.6rem;
    line-height: 1.2;
    margin-top: 0.5rem;
}

#debugMode {
    display: none;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 20px;
    color: #ff0000;
    font-size: 20px;
    font-weight: 500;
}

@media screen and (orientation: portrait) and (max-width: 500px) {
    #debugMode {
        display: none;
        width: 350px;
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 20px;
        color: #ff0000;
        font-size: 15px;
        font-weight: 500;
    }
}

.hamBtnContainer {
    width: 2rem;
    height: 2rem;
}

* {
    font-family: "Avenir Next", sans-serif;
    font-weight: 300;
}

#fps {
    position: absolute;
    background-color: rgb(31, 31, 31);
    border: 2px solid rgb(144, 6, 2);
    text-align: center;
    font-size: 16px;
    color: white;
    bottom: 15px;
    left: 20px;
    width: 60px;
    height: 28px;
}