.oolink-svg-container, .oolink-svg-preview{
    width: 100%;  
    padding: 35px 0;
    display: inline-block;
}
.oolink-svg-container svg, .oolink-svg-preview svg{
    max-width: 100%;
    max-height: calc(100vh - 150px);
}
.oolink-color-container{
    padding: 15px;
    background-color: white;
    text-align: left;
}
.oolink-color-container.fixed{
    position: fixed;
    top: 70px;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}
.oolink-color-container .color-item{ 
    margin-bottom: 3px;
    padding: 5px;
}
.oolink-color-container .color-item .color-display{
    padding: 10px; 
    margin-right: 10px;
    margin-bottom: -4px;
    display: inline-block;
    border: 1px solid black;
    border-radius: 10px;
}  
.oolink-color-container .color-item .color-text{ 
    width: 80px;
    display: inline-block;
    margin-right: 5px;
    font-size: 80%;
}
.oolink-color-container .color-item .color-edit-label{
    width: 110px;
    display: inline-block;
    font-size: 85%;
}
.oolink-color-container .color-item .color-group{
    width: 90px;
    display: inline-block;
    font-size: 85%;
}
.oolink-picker-container{
    display: none;
    position: fixed!important;
    top: 0px!important;
    left: 0px!important;
}
.oolink-row{
    display: flex;
}
.oolink-col-12{
    flex: 0 0 auto;
    width: 100%;
}
.oolink-col-8{
    flex: 0 0 auto;
    width: 66.66666667%;
}
.oolink-col-6{
    flex: 0 0 auto;
    width: 49.66666667%;
}
.oolink-col-4{
    flex: 0 0 auto;
    width: 33.33333333%;
} 
.oolink-left{
    text-align: left;
}
.oolink-center{
    text-align: center;
}
.oolink-right{
    text-align: right;
}
.oolink-selected,
.oolink-hover{
    background-color: rgb(243, 243, 243);
}
@media(max-width: 768px){
    .oolink-row{
        display: block;
    }
    .oolink-col-8,
    .oolink-col-6,
    .oolink-col-4{
        width: 100%; 
        display: inline-block;
    } 
    .oolink-svg-container, .oolink-svg-preview{
        height: 600px;
    }
    .oolink-color-container.fixed{
        display: inline-block;
        position: initial;
        top: initial;
        overflow-y: initial; 
    }
} 
@media(max-width: 600px){
    .oolink-svg-container, .oolink-svg-preview{
        height: 400px;
    }
    .oolink-svg-container svg, .oolink-svg-preview svg{
        max-height: 400px;
    }
}

/* Oolink 0.0.8: keep the fitted SVG at a useful size inside Change Color. */
.oolink_change_bag_color_popup .oolink-svg-container,
.oolink_change_bag_color_popup .oolink-svg-preview{
    width: 100%;
    box-sizing: border-box;
}
.oolink_change_bag_color_popup .oolink-svg-container svg,
.oolink_change_bag_color_popup .oolink-svg-preview svg{
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 180px);
}
@media(max-width:768px){
    .oolink_change_bag_color_popup .oolink-svg-container,
    .oolink_change_bag_color_popup .oolink-svg-preview{
        height: 600px;
    }
}
@media(max-width:600px){
    .oolink_change_bag_color_popup .oolink-svg-container,
    .oolink_change_bag_color_popup .oolink-svg-preview{
        height: 400px;
    }
    .oolink_change_bag_color_popup .oolink-svg-container svg,
    .oolink_change_bag_color_popup .oolink-svg-preview svg{
        max-height: 400px;
    }
}


/* ==========================================================
   OOLINK 0.1.1 - MOBILE CHANGE COLOR LAYOUT
   ========================================================== */
.oolink-mobile-zoom-container{
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}
.oolink_change_bag_color_popup .oolink-mobile-zoom-svg{
    transform-origin: center center;
    will-change: transform;
    touch-action: none;
    cursor: grab;
}
.oolink_change_bag_color_popup .oolink-mobile-zoom-svg:active{
    cursor: grabbing;
}

@media(max-width:768px){
    .oolink_change_bag_color_popup{
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    /* Give the bag a little less vertical space so the picker can fit below it. */
    .oolink_change_bag_color_popup .oolink-svg-container,
    .oolink_change_bag_color_popup .oolink-svg-preview{
        height:40vh !important;
        min-height:230px;
        max-height:40vh;
        padding:8px 6px;
        box-sizing:border-box;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    }

    .oolink_change_bag_color_popup .oolink-svg-container svg,
    .oolink_change_bag_color_popup .oolink-svg-preview svg{
        width:100% !important;
        height:100% !important;
        max-width:100% !important;
        max-height:100% !important;
        object-fit:contain;
        display:block;
        margin:0 auto;
    }

    /* Compact mobile picker: ALL controls, including OK, stay visible. */
    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker{
        position:fixed !important;
        left:50% !important;
        right:auto !important;
        top:auto !important;
        bottom:6px !important;
        transform:translateX(-50%) !important;
        width:min(86vw, 280px) !important;
        max-width:86vw !important;
        height:auto !important;
        max-height:38vh !important;
        overflow:hidden !important;
        z-index:100001 !important;
        box-sizing:border-box !important;
        margin:0 !important;
        padding:0 !important;
        box-shadow:0 3px 18px rgba(0,0,0,.25);
        background:#f2f2f2;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_wrapper{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
        font-size:8px !important;
        padding:.35em !important;
        margin:0 !important;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_wrapper > *{
        margin:.35em !important;
    }

    /* The original picker uses a square that can become too tall on phones.
       Give it a fixed responsive height so the lower controls are not pushed
       below the viewport. */
    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_sl{
        min-width:0 !important;
        height:min(45vw, 185px) !important;
        flex:1 1 auto !important;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_sl::before{
        display:none !important;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_hue{
        height:16px !important;
        padding:.5em !important;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_alpha{
        width:14px !important;
        padding:.5em !important;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_slider{
        min-height:0 !important;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_editor{
        width:5rem !important;
        min-width:0 !important;
        height:30px !important;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_editor input{
        font-size:12px !important;
        padding:3px 4px !important;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_sample{
        min-width:30px !important;
        height:30px !important;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_done button,
    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_cancel button{
        min-width:52px !important;
        height:30px !important;
        padding:3px 7px !important;
        font-size:14px !important;
        line-height:1 !important;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_selector{
        padding:.7em !important;
    }

    .oolink_change_bag_color_popup .oolink-color-container{
        max-height:45vh;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        box-sizing:border-box;
        padding:8px;
    }

    .oolink_change_bag_color_popup .button-box{
        position:sticky !important;
        top:0 !important;
        z-index:100000;
        box-sizing:border-box;
        padding:8px 10px !important;
    }

    .oolink_change_bag_color_popup .button-box a{
        margin:4px 5px 0 !important;
    }
}

@media(max-width:480px){
    .oolink_change_bag_color_popup .oolink-svg-container,
    .oolink_change_bag_color_popup .oolink-svg-preview{
        height:38vh !important;
        max-height:38vh;
        min-height:220px;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker{
        width:84vw !important;
        max-width:84vw !important;
        max-height:40vh !important;
        bottom:5px !important;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_wrapper{
        font-size:7.5px !important;
    }

    .oolink_change_bag_color_popup .oolink-picker-container.oolink-mobile-picker .picker_sl{
        height:min(43vw, 175px) !important;
    }
}


/* ==========================================================
   OOLINK 0.1.4 - LIBRARY-ONLY FRONTEND
   Keep only the library workflow on the customization page.
   Make the three visible action buttons match the site's
   "XEM TẤT CẢ" visual style.
   ========================================================== */
body.oolink-hide-svg-upload #svgFileUploadedByBrowser{
    display:none !important;
}
body.oolink-hide-svg-upload .oolink-file-input-only-wrap{
    display:none !important;
}

/* Remove the redundant generic DOWNLOAD control only. */
.oolink-hide-redundant-download{
    display:none !important;
}

/*
 * Unified action-button appearance, inspired by the theme's
 * "XEM TẤT CẢ" button: dark text, translucent/white background,
 * light border, rounded corners and a soft shadow.
 */
.oolink-renamed-change-color,
.oolink-renamed-png-save,
.oolink-library-picker-button,
body.oolink-library-page .oolink-library-picker-button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    color:#000 !important;
    background:rgba(255,255,255,.88) !important;
    border:1px solid #ddd !important;
    border-radius:5px !important;
    box-shadow:0 6px 16px rgba(0,0,0,.14) !important;
    text-decoration:none !important;
    text-transform:none !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    min-height:38px !important;
    padding:9px 18px !important;
    cursor:pointer !important;
    transition:all .15s ease !important;
}

.oolink-renamed-change-color:hover,
.oolink-renamed-change-color:focus,
.oolink-renamed-png-save:hover,
.oolink-renamed-png-save:focus,
.oolink-library-picker-button:hover,
.oolink-library-picker-button:focus{
    color:#000 !important;
    background:rgba(255,255,255,.98) !important;
    border-color:#d2d2d2 !important;
    box-shadow:0 8px 20px rgba(0,0,0,.18) !important;
    outline:none !important;
}

@media(max-width:768px){
    .oolink-renamed-change-color,
    .oolink-renamed-png-save,
    .oolink-library-picker-button{
        min-height:42px !important;
        padding:10px 16px !important;
    }
}

/* ==========================================================
   OOLINK 0.1.5 - FINAL ACTION BUTTON OVERRIDE
   Match the Flatsome "XEM TẤT CẢ" look more strictly.
   ========================================================== */
.oolink-renamed-change-color,
.oolink-renamed-change-color *,
.oolink-renamed-png-save,
.oolink-renamed-png-save *,
.oolink-library-picker-button,
.oolink-library-picker-button *{
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
    opacity:1 !important;
    text-shadow:none !important;
    font-family:inherit !important;
}

.oolink-renamed-change-color,
.oolink-renamed-png-save,
.oolink-library-picker-button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    vertical-align:middle !important;
    box-sizing:border-box !important;
    height:40px !important;
    min-height:40px !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 7px 10px 0 !important;
    padding:0 18px !important;
    border:1px solid rgba(0,0,0,.10) !important;
    border-radius:5px !important;
    background:rgba(255,255,255,.88) !important;
    box-shadow:0 5px 14px rgba(0,0,0,.13) !important;
    font-size:13px !important;
    font-weight:600 !important;
    line-height:40px !important;
    letter-spacing:.1px !important;
    text-align:center !important;
    text-decoration:none !important;
    text-transform:none !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    outline:none !important;
    -webkit-appearance:none !important;
    appearance:none !important;
}

.oolink-renamed-change-color:hover,
.oolink-renamed-change-color:focus,
.oolink-renamed-png-save:hover,
.oolink-renamed-png-save:focus,
.oolink-library-picker-button:hover,
.oolink-library-picker-button:focus{
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
    background:rgba(255,255,255,.96) !important;
    border-color:rgba(0,0,0,.12) !important;
    box-shadow:0 7px 18px rgba(0,0,0,.16) !important;
}

@media(max-width:768px){
    .oolink-renamed-change-color,
    .oolink-renamed-png-save,
    .oolink-library-picker-button{
        height:40px !important;
        min-height:40px !important;
        padding:0 15px !important;
        margin-right:5px !important;
        font-size:13px !important;
        line-height:40px !important;
        white-space:normal !important;
    }
}


/* ==========================================================
   OOLINK 0.1.6 - iOS SAFARI FALLBACK
   Runtime JS also applies these values inline with !important.
   ========================================================== */
.oolink-renamed-change-color,
.oolink-renamed-png-save,
.oolink-library-picker-button{
    -webkit-appearance:none !important;
    appearance:none !important;
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
    font-family:Roboto, sans-serif !important;
    font-weight:400 !important;
    font-style:normal !important;
    text-transform:uppercase !important;
}

@media (max-width:768px){
    .oolink-renamed-change-color,
    .oolink-renamed-png-save,
    .oolink-library-picker-button{
        -webkit-appearance:none !important;
        appearance:none !important;
        background:#ffffff !important;
        background-color:#ffffff !important;
        background-image:none !important;
        color:#000000 !important;
        -webkit-text-fill-color:#000000 !important;
        font-family:Roboto, sans-serif !important;
        font-weight:400 !important;
        text-transform:uppercase !important;
    }
}


/* 0.1.13 desktop click reliability: keep editable SVG geometry targetable. */
.oolink-svg-container svg path,
.oolink-svg-container svg polygon,
.oolink_change_bag_color_popup svg path,
.oolink_change_bag_color_popup svg polygon {
    pointer-events: all !important;
    cursor: pointer;
}

/* Oolink RAL CLASSIC lookup result — Step 1 */
.oolink-ral-result{
    margin:10px 0 14px;
    padding:10px 12px;
    border:1px solid #d9d9d9;
    border-radius:4px;
    background:#fafafa;
    line-height:1.35;
    color:#111;
}

/* v0.1.20 RAL result: outside the color list so Oolink rebuilds do not erase it. */
.oolink-ral-result{box-sizing:border-box;margin:8px 0 10px;padding:9px 10px;background:#fff;border:1px solid #ddd;border-radius:3px;line-height:1.25;color:#111;max-width:220px;display:block;position:relative;z-index:20;}

/* v0.1.21 — Keep RAL result in the page workspace, clear of the fixed color list. */
@media (min-width: 769px){
    .oolink-ral-result{
        position: fixed !important;
        top: 205px !important;
        right: 220px !important;
        width: 190px !important;
        max-width: 190px !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid #d9d9d9 !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
        z-index: 99999 !important;
    }
}
@media (max-width: 768px){
    .oolink-ral-result{
        position: relative !important;
        width: auto !important;
        max-width: none !important;
        margin: 8px 0 10px !important;
    }
}

.oolink-ral-leather-image img{object-fit:cover;display:block;}

/* v0.1.25 production: obsolete manual RAL texture control is hidden.
 * Texture is applied automatically after the user accepts a color.
 */
.oolink-hide-obsolete-ral-button{display:none !important;}


/* ==========================================================
   OOLINK 0.1.33 - DESKTOP COLOR EDITOR UI
   1) Remove the old popup LƯU / HỦY controls.
   2) Put the editable SVG in the visual center of the screen.
   3) Enlarge the SVG so individual bag areas are easier to click.
   4) Keep the color list on the right as the control panel.
   NOTE: This is UI-only. The SVG node, color engine, RAL engine,
   texture engine and PNG export mechanism are not changed.
   ========================================================== */
@media (min-width: 769px){
    /* The turquoise LƯU / HỦY bar belongs to the old popup workflow.
       The public white LƯU ẢNH button outside the popup is untouched. */
    .oolink_change_bag_color_popup .button-box{
        display:none !important;
    }

    /* Full-screen popup becomes a clean editor workspace. */
    .oolink_change_bag_color_popup{
        overflow:hidden !important;
    }

    /* Center the actual editable SVG in the computer screen. */
    .oolink_change_bag_color_popup .oolink-svg-container,
    .oolink_change_bag_color_popup .oolink-svg-preview{
        position:fixed !important;
        left:50% !important;
        top:50% !important;
        transform:translate(-50%, -50%) !important;
        width:min(78vw, 1500px) !important;
        height:82vh !important;
        min-height:520px !important;
        max-height:82vh !important;
        margin:0 !important;
        padding:0 !important;
        box-sizing:border-box !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        z-index:99990 !important;
        background:transparent !important;
    }

    .oolink_change_bag_color_popup .oolink-svg-container svg,
    .oolink_change_bag_color_popup .oolink-svg-preview svg{
        width:100% !important;
        height:100% !important;
        max-width:100% !important;
        max-height:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        display:block !important;
        margin:0 auto !important;
        object-fit:contain !important;
    }

    /* Right-side color controls remain accessible and scroll independently. */
    .oolink_change_bag_color_popup .oolink-color-container{
        position:fixed !important;
        top:70px !important;
        right:0 !important;
        bottom:15px !important;
        width:180px !important;
        max-width:180px !important;
        max-height:none !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        box-sizing:border-box !important;
        padding:10px !important;
        background:#fff !important;
        z-index:99998 !important;
        border-left:1px solid #e5e5e5 !important;
        box-shadow:-3px 0 12px rgba(0,0,0,.06) !important;
    }

    /* Keep the RAL information card visible, immediately to the left of
       the right-side color panel. */
    .oolink_change_bag_color_popup .oolink-ral-result{
        right:190px !important;
    }
}

@media (min-width: 769px) and (max-height: 800px){
    .oolink_change_bag_color_popup .oolink-svg-container,
    .oolink_change_bag_color_popup .oolink-svg-preview{
        height:76vh !important;
        max-height:76vh !important;
        min-height:460px !important;
    }
}


/* ==========================================================
   OOLINK 0.1.35 - CLEAN EDITOR WORKSPACE
   The customization page becomes an app-like workspace:
   hide website chrome/background content and leave the SVG/editor controls.
   No change to RAL, texture or PNG export engine.
   ========================================================== */
@media (min-width:769px){
    body.oolink-clean-editor{
        overflow:hidden !important;
        background:#ffffff !important;
    }
    body.oolink-clean-editor #wpadminbar,
    body.oolink-clean-editor #header,
    body.oolink-clean-editor .header-wrapper,
    body.oolink-clean-editor header,
    body.oolink-clean-editor #footer,
    body.oolink-clean-editor .footer-wrapper,
    body.oolink-clean-editor footer,
    body.oolink-clean-editor .page-title,
    body.oolink-clean-editor .breadcrumbs,
    body.oolink-clean-editor .page-header{
        display:none !important;
    }
    body.oolink-clean-editor #wrapper,
    body.oolink-clean-editor #main,
    body.oolink-clean-editor .page-wrapper,
    body.oolink-clean-editor .content-area{
        width:100vw !important;
        max-width:none !important;
        min-height:100vh !important;
        margin:0 !important;
        padding:0 !important;
        background:#ffffff !important;
    }
    /* Remove the large empty theme spacing around the editor, but don't alter
       the internal editor controls themselves. */
    body.oolink-clean-editor .oolink-svg-container,
    body.oolink-clean-editor .oolink-svg-preview{
        margin:0 !important;
    }
}

/* Keep the editor itself visually clean: only the SVG and its controls remain. */
body.oolink-clean-editor .oolink-svg-container,
body.oolink-clean-editor .oolink-svg-preview{
    background:transparent !important;
}

/* Main menu button: same visual language as the existing public action buttons. */
.oolink-main-menu-button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 18px !important;
    margin:0 7px 10px 0 !important;
    border:1px solid rgba(0,0,0,.10) !important;
    border-radius:5px !important;
    background:#ffffff !important;
    color:#000000 !important;
    box-shadow:0 5px 14px rgba(0,0,0,.13) !important;
    font-family:Roboto,sans-serif !important;
    font-size:13px !important;
    font-weight:400 !important;
    line-height:40px !important;
    text-decoration:none !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
    cursor:pointer !important;
}
.oolink-main-menu-button:hover,
.oolink-main-menu-button:focus{
    background:#ffffff !important;
    color:#000000 !important;
    box-shadow:0 7px 18px rgba(0,0,0,.16) !important;
}


/* v0.1.38: public editor buttons must remain interactive above the clean workspace. */
.oolink-main-menu-button,
.oolink-renamed-change-color,
.oolink-renamed-png-save{
    pointer-events:auto !important;
    position:relative !important;
    z-index:100010 !important;
    cursor:pointer !important;
}
/* Mobile picker dock: a separate OK row, outside popup clipping/scrolling. */
@media (max-width:768px){
 body.oolink-clean-editor .oolink_change_bag_color_popup .button-box{display:none!important;}
 body.oolink-clean-editor .oolink_change_bag_color_popup{
  position:fixed!important;inset:0!important;width:100%!important;
  height:100dvh!important;max-height:100dvh!important;box-sizing:border-box!important;
  padding-top:calc(64px + env(safe-area-inset-top,0px))!important;
 }
 body.oolink-clean-editor .knstudio-editor-toolbar{
  position:fixed!important;top:0!important;left:0!important;right:0!important;
  width:100%!important;box-sizing:border-box!important;z-index:100015!important;
  padding:calc(8px + env(safe-area-inset-top,0px)) 8px 8px!important;
  margin:0!important;background:#fff!important;justify-content:center!important;
  align-items:flex-start!important;flex-wrap:nowrap!important;gap:6px!important;
 }
 body.oolink-clean-editor .knstudio-editor-toolbar > .oolink-renamed-png-save,
 body.oolink-clean-editor .knstudio-editor-toolbar > .oolink-main-menu-button,
 body.oolink-clean-editor .knstudio-editor-toolbar > #knstudio-color-all-switch{
  margin:0!important;flex-shrink:0!important;
 }
 body.oolink-clean-editor .knstudio-editor-toolbar > .oolink-renamed-png-save,
 body.oolink-clean-editor .knstudio-editor-toolbar > #knstudio-color-all-switch{
  padding:0 8px!important;font-size:12px!important;
 }
}
@media (max-width:768px){
 body.oolink-clean-editor .oolink-ral-leather-image img{display:none!important;}
 body.oolink-clean-editor .knstudio-editor-toolbar > .oolink-main-menu-button{align-self:flex-start!important;top:0!important;transform:none!important;}
 body > .oolink-picker-container.oolink-mobile-picker{
  position:fixed!important;top:auto!important;right:auto!important;
  transform:none!important;max-width:none!important;max-height:none!important;
  height:auto!important;overflow:visible!important;margin:0!important;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px))!important;
  box-sizing:border-box!important;background:#f2f2f2!important;z-index:100020!important;
 }
 body > .oolink-mobile-picker .picker_wrapper{
  display:grid!important;grid-template-columns:minmax(0,1fr) 24px!important;
  width:100%!important;max-width:none!important;margin:0!important;padding:0!important;
  gap:6px!important;box-sizing:border-box!important;
 }
 body > .oolink-mobile-picker .picker_wrapper::before,
 body > .oolink-mobile-picker .picker_sl::before{display:none!important;}
 body > .oolink-mobile-picker .picker_wrapper > *{margin:0!important;min-width:0!important;order:0!important;box-sizing:border-box!important;}
 body > .oolink-mobile-picker .picker_hue{grid-column:1 / -1;grid-row:1;height:22px!important;padding:0!important;}
 body > .oolink-mobile-picker .picker_sl{grid-column:1;grid-row:2;height:var(--knstudio-picker-field-height,100px)!important;min-height:0!important;padding:0!important;}
 body > .oolink-mobile-picker .picker_alpha{grid-column:2;grid-row:2;width:24px!important;height:var(--knstudio-picker-field-height,100px)!important;min-height:0!important;padding:0!important;}
 body > .oolink-mobile-picker .picker_editor{grid-column:1;grid-row:3;width:100%!important;height:36px!important;}
 body > .oolink-mobile-picker .picker_editor input{font-size:16px!important;width:100%!important;height:36px!important;box-sizing:border-box!important;}
 body > .oolink-mobile-picker .picker_sample{grid-column:2;grid-row:3;height:36px!important;}
 body > .oolink-mobile-picker .picker_done{grid-column:1 / -1;grid-row:4;order:10!important;}
 body > .oolink-mobile-picker .picker_done button{width:100%!important;min-height:44px!important;margin:0!important;font-size:16px!important;}
}

/* Hide RAL card and diagnostic color values; retain texture lookup. */
body.oolink-clean-editor .oolink-ral-result,
.oolink_change_bag_color_popup .oolink-ral-result,
#oolink_change_svg_color .oolink-ral-result { display:none !important; }

/* RAL UI may be moved directly to body; keep lookup nodes for textures. */
.oolink-ral-result,.oolink-ral-leather-image {display:none!important;}
@media(max-width:768px){
 body.oolink-clean-editor .oolink_change_bag_color_popup .oolink-svg-container,
 body.oolink-clean-editor .oolink_change_bag_color_popup .oolink-svg-preview{
  height:calc(100dvh - 145px)!important;max-height:none!important;min-height:0!important;
  overflow:visible!important;background:transparent!important;
 }
 body.oolink-clean-editor .oolink_change_bag_color_popup .oolink-svg-container svg,
 body.oolink-clean-editor .oolink_change_bag_color_popup .oolink-svg-preview svg{
  max-height:100%!important;max-width:100%!important;overflow:visible!important;
 }
 body.oolink-clean-editor .oolink_change_bag_color_popup .oolink-col-4,
 body.oolink-clean-editor .oolink_change_bag_color_popup .oolink-col-4 > .oolink-center{
  background:transparent!important;min-height:0!important;padding:0!important;margin:0!important;
 }
}