/* Formatting for the replacement product tooltips and modern jQuery UI widgets. */
.ui-tooltip.gt-product-tooltip { max-width:250px; padding:10px 12px; border:1px solid #ad7d3e; border-radius:10px; background:#fff8ed; color:#362418; box-shadow:0 4px 18px #0003; font-size:13px; line-height:1.45; z-index:10000; }
.gt-product-tooltip h6 { margin:0 0 5px; font-size:14px; }
.gt-product-tooltip p { margin:4px 0; }
.ui-dialog .ui-dialog-titlebar-close { box-sizing:border-box; }
.ui-dialog.gt-product-detail-dialog .ui-dialog-titlebar-close,
.gt-cart-bag-dialog-shell .ui-dialog-titlebar-close { font-size:0; }
/* Keep the mixer sidebar inside narrower desktop/tablet viewports. */
@media (min-width:761px) and (max-width:980px) {
    #main.mixer { width:calc(100% - 20px); max-width:calc(100% - 20px); margin-left:10px; margin-right:10px; box-sizing:border-box; }
    #mixer_content { margin-right:263px; min-width:0; }
    #mixer_sidebar { width:245px; margin-left:0; right:0; }
    #mixer_sidebar.fliege { right:10px; }
    .mixer #bag { width:100%; box-sizing:border-box; }
}
/* Explicit grid placement keeps the character counter and hint out of the input row. */
@media (max-width:760px) {
    .mixer #bag #rename_form { grid-template-columns:minmax(0,1fr) 44px !important; }
    .mixer #bag #bag_name { grid-column:1; grid-row:1; font-size:16px !important; line-height:1.35 !important; min-height:44px !important; text-align:left; }
    .mixer #bag #rename-button { grid-column:2; grid-row:1; width:44px; height:44px; font-size:0; padding:0 !important; }
    .mixer #bag #rename-button .ui-icon { margin:0; }
    .mixer #bag #rename_form > .hidden { display:none !important; }
    .mixer #bag #rename_form > .bag-name-counter,
    .mixer #bag #bag-card-hint { grid-column:1 / -1; min-width:0; }
}
@media (hover:none) { .ui-tooltip.gt-product-tooltip { display:none !important; } }