/* All frontend styling is scoped; values may be set in WooCommerce > Ribbon Preview. */
#yut-ribbon{--yut-panel-bg:#fff;--yut-panel-text:#342724;--yut-panel-border:#ded8d3;--yut-banner-bg:#f6eff2;--yut-banner-text:#614454;--yut-button-bg:#654655;--yut-button-text:#fff;--yut-button-hover-bg:#49323e;--yut-button-hover-text:#fff;--yut-canvas-bg:#f5f2ef;box-sizing:border-box;background:var(--yut-panel-bg);color:var(--yut-panel-text);border:1px solid var(--yut-panel-border);border-radius:12px;padding:14px;margin:16px 0 24px;max-width:100%;position:relative;z-index:5}
#yut-ribbon *{box-sizing:border-box}
#yut-ribbon .yut-heading{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;padding:10px;border-radius:6px;background:var(--yut-banner-bg);color:var(--yut-banner-text)}
#yut-ribbon .yut-heading strong,#yut-ribbon .yut-heading span{color:inherit}
#yut-ribbon .yut-heading span{font-size:12px}
#yut-ribbon canvas{display:block;width:100%;height:auto;margin:10px 0;border-radius:6px;background:var(--yut-canvas-bg);touch-action:pan-y;cursor:pointer}
#yut-ribbon #yut-status,#yut-ribbon .yut-hint{font-size:12px;margin:6px 0;color:var(--yut-panel-text)}
#yut-ribbon .yut-editor{border-top:1px solid var(--yut-panel-border);margin-top:8px;padding-top:8px}
#yut-ribbon .yut-editor summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--yut-panel-text);padding:4px 0}
#yut-ribbon .yut-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
#yut-ribbon .yut-controls label{font-size:12px;flex:1;min-width:100px;color:var(--yut-panel-text)}
#yut-ribbon .yut-controls select{display:block;width:100%;min-height:40px;border:1px solid var(--yut-panel-border);border-radius:5px;background:var(--yut-panel-bg);color:var(--yut-panel-text);padding:4px;font-size:12px}
#yut-ribbon .yut-controls input[type=range]{display:block;width:100%;accent-color:var(--yut-button-bg);min-height:28px}
#yut-ribbon .yut-controls .yut-bold-label{display:flex;align-items:center;gap:8px;min-height:44px}
#yut-ribbon .yut-bold-label input{width:18px;height:18px;margin:0;accent-color:var(--yut-button-bg);flex:none}
#yut-ribbon .yut-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
#yut-ribbon .yut-actions button{font-size:12px;padding:8px 12px;min-height:40px;border:1px solid var(--yut-button-bg);border-radius:6px;background:var(--yut-button-bg);color:var(--yut-button-text);cursor:pointer;filter:none;box-shadow:none;transition:background-color .15s,color .15s}
#yut-ribbon .yut-actions button:hover,#yut-ribbon .yut-actions button:focus-visible{background:var(--yut-button-hover-bg);border-color:var(--yut-button-hover-bg);color:var(--yut-button-hover-text);filter:none}
#yut-ribbon small{display:block;font-size:11px;color:var(--yut-panel-text);margin-top:8px}
#yut-ribbon .yut-warning{font-weight:700}
#yut-ribbon input:focus-visible,#yut-ribbon select:focus-visible,#yut-ribbon button:focus-visible,#yut-ribbon canvas:focus-visible{outline:2px solid var(--yut-panel-text);outline-offset:3px}
@media(max-width:767px){#yut-ribbon{padding:10px}#yut-ribbon.yut-sticky{position:sticky;top:var(--yut-top,0px);z-index:20;max-height:55vh;overflow-y:auto;overscroll-behavior:contain}#yut-ribbon .yut-heading{font-size:13px}#yut-ribbon .yut-controls{gap:8px}#yut-ribbon .yut-controls label{flex:1 1 40%;min-width:0}#yut-ribbon .yut-editor summary{min-height:32px}}
@media(prefers-reduced-motion:reduce){#yut-ribbon .yut-actions button{transition:none}}

#yut-ribbon .yut-line-card{min-width:0;margin:14px 0;padding:12px;border:1px solid var(--yut-panel-border);border-radius:8px}
#yut-ribbon .yut-line-card legend{font-weight:700;font-size:14px;padding:0 6px;color:var(--yut-panel-text)}
#yut-ribbon .yut-line-wording{margin:0 0 8px;font-size:13px;overflow-wrap:anywhere;white-space:pre-wrap}
#yut-ribbon [hidden]{display:none!important}

#yut-ribbon .yut-hint{white-space:pre-line}
#yut-ribbon button:disabled{opacity:.5;cursor:not-allowed}
#yut-zoom-dialog{box-sizing:border-box;width:min(94vw,1400px);max-width:94vw;max-height:90vh;padding:48px 16px 16px;border:0;border-radius:12px;background:#fff;overflow:auto}
#yut-zoom-dialog::backdrop{background:rgba(0,0,0,.7)}
#yut-zoom-canvas{display:block;width:100%;height:auto}
#yut-zoom-close{position:absolute;top:8px;right:12px;min-height:36px;padding:6px 12px;border:1px solid #ccc;border-radius:6px;background:#fff;color:#222;cursor:pointer}
#yut-zoom-close:focus-visible{outline:2px solid #222;outline-offset:2px}

#yut-ribbon .yut-toolbar{align-items:center;gap:16px}
#yut-ribbon .yut-repeat-label{flex:1 1 180px;max-width:320px;font-size:12px;color:var(--yut-panel-text)}
#yut-ribbon .yut-repeat-label input{display:block;width:100%;min-height:28px;accent-color:var(--yut-button-bg)}

#yut-ribbon .yut-logo-adjust{margin-top:14px;padding:12px;border:1px solid var(--yut-panel-border);border-radius:8px}
#yut-ribbon .yut-logo-adjust summary{cursor:pointer;font-size:13px}
#yut-ribbon #yut-logo-converted{max-width:500px;cursor:default;background-color:#fff;background-image:linear-gradient(45deg,#e4e4e4 25%,transparent 25%),linear-gradient(-45deg,#e4e4e4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4e4e4 75%),linear-gradient(-45deg,transparent 75%,#e4e4e4 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}

/* Explicit chevron survives themes that remove the native select arrow. */
#yut-ribbon .yut-controls select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235e6460' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px 9px}
@media(forced-colors:active){#yut-ribbon .yut-controls select{appearance:auto;-webkit-appearance:auto;background-image:none}}

/* Opt-in fixed preview: only the editor body scrolls, never the ribbon/toolbar. */
#yut-ribbon.yut-locked{position:relative;top:auto;max-height:none;overflow:visible;z-index:auto}
#yut-ribbon.yut-locked #yut-editor-scroll{height:auto;min-height:0;max-height:var(--yut-controls-height,320px);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;padding:0 6px 4px 0;-webkit-overflow-scrolling:touch}
#yut-ribbon.yut-locked #yut-editor-scroll:focus-visible{outline:2px solid var(--yut-panel-text);outline-offset:2px}
@media(max-width:767px){#yut-ribbon.yut-locked #yut-editor-scroll{max-height:var(--yut-controls-height,240px)}}
/* Compact logo identity and accessible funeral assignment buttons. */
#yut-ribbon .yut-logo-thumb{display:block;width:64px;height:48px;object-fit:contain;margin:4px 0}
#yut-ribbon .yut-logo-thumb-label{display:block;font-weight:600}
#yut-ribbon .yut-logo-choice{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:84px;padding:6px;border:2px solid var(--yut-panel-border);border-radius:6px;background:var(--yut-panel-bg);color:var(--yut-panel-text);cursor:pointer;font:inherit;line-height:1.3}
#yut-ribbon .yut-logo-choice[aria-pressed="true"]{border-color:var(--yut-button-bg);box-shadow:0 0 0 1px var(--yut-button-bg)}
#yut-ribbon .yut-logo-choice:hover{border-color:var(--yut-button-hover-bg)}
#yut-ribbon .yut-logo-choice:focus-visible{outline:2px solid var(--yut-button-bg);outline-offset:3px}

#yut-ribbon .yut-logo-thumb{background:var(--yut-thumbnail-bg,#fff);border-radius:3px;padding:4px;box-sizing:content-box}
#yut-ribbon .yut-logo-position{margin:12px 0}
#yut-ribbon .yut-position-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#yut-ribbon .yut-position-buttons button{flex:1;min-width:90px;min-height:40px;padding:8px 12px;border:1px solid var(--yut-button-bg);border-radius:6px;background:var(--yut-panel-bg);color:var(--yut-panel-text);font:inherit;font-size:12px;cursor:pointer;box-shadow:none}
#yut-ribbon .yut-position-buttons button[aria-pressed="true"]{background:var(--yut-button-bg);color:var(--yut-button-text)}
#yut-ribbon .yut-position-buttons button:hover{background:var(--yut-button-hover-bg);color:var(--yut-button-hover-text);border-color:var(--yut-button-hover-bg)}

/* Match the Logo 1 / Logo 2 control headings, independent of theme strong styles. */
#yut-ribbon #yut-logo-position-heading{display:block;font-family:inherit;font-size:12px;font-weight:600;line-height:inherit;color:var(--yut-panel-text);margin:0}

/* Funeral tie is popup-only; the product page retains the flat strip. */
#yut-tie-dialog{box-sizing:border-box;width:min(94vw,900px);max-width:94vw;max-height:94vh;padding:48px 16px 16px;border:0;border-radius:12px;background:#fff;overflow:auto}
#yut-tie-dialog::backdrop{background:rgba(0,0,0,.7)}
#yut-tie-canvas{display:block;width:auto;max-width:100%;max-height:calc(90vh - 70px);height:auto;margin:auto;object-fit:contain}
#yut-tie-close{position:absolute;top:8px;right:12px;min-height:36px;padding:6px 12px;border:1px solid #ccc;border-radius:6px;background:#fff;color:#222;cursor:pointer}
#yut-tie-close:focus-visible{outline:2px solid #222;outline-offset:2px}

/* iPhone Safari save sheet: actual PNG image enables native save/share actions. */
#yut-ribbon .yut-save-dialog{box-sizing:border-box;width:min(94vw,900px);max-height:88vh;overflow:auto;border:1px solid var(--yut-panel-border);border-radius:12px;padding:18px;background:var(--yut-panel-bg);color:var(--yut-panel-text)}
#yut-ribbon .yut-save-dialog::backdrop{background:rgba(0,0,0,.55)}
#yut-ribbon .yut-save-dialog img{display:block;width:100%;height:auto;max-height:55vh;object-fit:contain;-webkit-touch-callout:default}
#yut-ribbon .yut-save-dialog h3{font-size:18px;margin:0 0 10px;color:inherit}
#yut-ribbon .yut-save-dialog p{font-size:14px;line-height:1.5;color:inherit}
#yut-ribbon .yut-save-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
#yut-ribbon .yut-save-actions button,#yut-ribbon .yut-save-actions a{display:inline-block;min-height:44px;padding:10px 14px;border:1px solid var(--yut-button-bg);border-radius:6px;background:var(--yut-button-bg);color:var(--yut-button-text);font-size:14px;text-decoration:none;cursor:pointer}
#yut-ribbon .yut-save-actions button:hover,#yut-ribbon .yut-save-actions a:hover{background:var(--yut-button-hover-bg);color:var(--yut-button-hover-text)}

/* Optional banner metadata wraps; selected logo-height mode uses existing theme variables. */
.yut-heading{flex-wrap:wrap;gap:8px;}
#yut-banner-details{overflow-wrap:anywhere;}
#yut-logo-settings[hidden]{display:none!important;}


#yut-ribbon .yut-controls [hidden],#yut-shared-logo-controls[hidden]{display:none!important;}
/* Optional information box. */
#yut-preview-info{margin:8px 0;overflow-wrap:anywhere;}
#yut-preview-info[hidden]{display:none!important;}