.elementor-15 .elementor-element.elementor-element-132f941{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-15 .elementor-element.elementor-element-a512952{--spacer-size:50px;background-image:url("https://www.thecreamybean.com/wp-content/uploads/2025/11/Bright-Background-Image-e1762221883614.webp");background-position:center center;background-size:cover;}.elementor-15 .elementor-element.elementor-element-71117c7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;}.elementor-15 .elementor-element.elementor-element-71117c7.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-15 .elementor-element.elementor-element-1e63b2d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-15 .elementor-element.elementor-element-5b6b3af{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;border-style:none;}.elementor-15 .elementor-element.elementor-element-c3201a7{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-15 .elementor-element.elementor-element-bc63d8a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-style:none;border-radius:0px 0px 0px 0px;}.elementor-15 .elementor-element.elementor-element-99c483e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:none;--border-style:none;}.elementor-15 .elementor-element.elementor-element-476c7d9{background-image:url("https://www.thecreamybean.com/wp-content/uploads/2025/11/Screenshot-2025-11-03-201916.webp");margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;background-position:-58px 99px;background-size:cover;border-style:none;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-15 .elementor-element.elementor-element-1267223{background-color:#4B2E2ED1;margin:-5px 8px calc(var(--kit-widget-spacing, 0px) + 8px) 8px;padding:8px 8px 8px 8px;border-style:none;font-family:"Poppins", Sans-serif;font-size:18px;font-weight:400;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;word-spacing:0em;}body.elementor-page-15:not(.elementor-motion-effects-element-type-background), body.elementor-page-15 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.thecreamybean.com/wp-content/uploads/2025/11/barn-wall-background.webp");background-size:cover;}@media(max-width:1024px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-15 .elementor-element.elementor-element-476c7d9{background-position:-99px 82px;background-repeat:no-repeat;background-size:cover;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-15 .elementor-element.elementor-element-1267223{font-size:16px;}}@media(max-width:767px){.elementor-15 .elementor-element.elementor-element-71117c7{--width:280px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-15 .elementor-element.elementor-element-476c7d9.elementor-element{--align-self:center;}.elementor-15 .elementor-element.elementor-element-476c7d9{background-position:-99px 0px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-15 .elementor-element.elementor-element-1267223{font-size:14px;}}@media(min-width:768px){.elementor-15 .elementor-element.elementor-element-1e63b2d{--width:50%;}.elementor-15 .elementor-element.elementor-element-99c483e{--width:50%;}}/* Start custom CSS for html, class: .elementor-element-476c7d9 */css

/* Touch-Friendly Slider Tweaks for Coffee Roast Profiles App in Elementor */
@media only screen and (max-width: 768px) {
    body {
        padding: 20px 10px !important;
        font-size: 14px;
        touch-action: manipulation; /* Improves touch responsiveness */
    }
    
    h1 {
        font-size: 2em !important;
        margin-bottom: 5px;
    }
    
    p {
        font-size: 1em !important;
        margin-bottom: 20px;
    }
    
    .slider-wrapper {
        width: 90vw !important;
        max-width: 300px;
        margin: 10px auto !important;
        padding: 10px 0; /* Add vertical padding for easier touch access */
    }
    
    #scaleLabels {
        font-size: 12px !important;
        margin: 5px 0 !important;
        justify-content: space-between;
        padding: 0 5px; /* Slight padding to avoid edge touches */
    }
    
    #scaleLabels span {
        font-size: 11px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 22%;
        touch-action: none; /* Prevent accidental zooming on labels */
    }
    
    #slider {
        width: 100% !important;
        height: 8px !important;
        margin: 10px 0 !important; /* Extra margin for thumb clearance */
        touch-action: pan-x; /* Allow horizontal panning only */
        -webkit-tap-highlight-color: transparent; /* Remove tap highlight for cleaner look */
    }
    
    #slider::-webkit-slider-thumb {
        width: 44px !important; /* Minimum touch target size (Apple Human Interface Guidelines) */
        height: 44px !important;
        margin-top: -18px; /* Center the larger thumb */
        border-radius: 50%;
        background: #F5DEB3;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0,0,0,0.4);
        transition: transform 0.2s ease;
        -webkit-appearance: none;
        appearance: none;
    }
    
    #slider::-webkit-slider-thumb:hover,
    #slider::-webkit-slider-thumb:active {
        transform: scale(1.05); /* Subtle feedback on touch */
        background: #E6D3B0; /* Slight color change on active */
    }
    
    #slider::-moz-range-thumb {
        width: 44px !important;
        height: 44px !important;
        border: none;
        border-radius: 50%;
        background: #F5DEB3;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0,0,0,0.4);
        margin-top: 0; /* Adjust for Firefox */
    }
    
    #slider::-moz-range-thumb:hover,
    #slider::-moz-range-thumb:active {
        transform: scale(1.05);
        background: #E6D3B0;
    }
    
    /* Track adjustments for better visibility on touch */
    #slider::-webkit-slider-runnable-track {
        height: 8px;
        border-radius: 5px;
        background: linear-gradient(to right, #CC9B65 0%, #8B4513 50%, #0A0705 100%);
    }
    
    #colorBox {
        width: 180px !important;
        height: 180px !important;
        margin: 20px auto !important;
        font-size: 1em !important;
        border-width: 2px !important;
        touch-action: manipulation; /* Quick taps on color box */
    }
    
    #currentLevel {
        font-size: 0.9em !important;
        padding: 8px 15px !important;
        margin: 15px;
        touch-action: none; /* Prevent interactions if not needed */
    }
}

@media only screen and (max-width: 480px) {
    .slider-wrapper {
        width: 95vw !important;
        padding: 15px 0; /* More padding on smaller screens */
    }
    
    #scaleLabels span {
        font-size: 10px !important;
        max-width: 20%;
    }
    
    #slider {
        height: 10px !important; /* Slightly thicker track for easier swipe */
    }
    
    #slider::-webkit-slider-thumb {
        width: 48px !important;
        height: 48px !important;
        margin-top: -19px;
    }
    
    #slider::-moz-range-thumb {
        width: 48px !important;
        height: 48px !important;
    }
    
    #colorBox {
        width: 150px !important;
        height: 150px !important;
        font-size: 0.9em !important;
    }
    
    h1 {
        font-size: 1.8em !important;
    }
    
    p {
        font-size: 0.95em !important;
    }
}

/* Prevent zoom on input focus for iOS */
#slider:focus {
    outline: none;
}

/* Optional: Add haptic feedback simulation via JS, but keep CSS-only for now *//* End custom CSS */