/* OnlineFoto service controls. Loaded after module CSS and palette.css.
   Shared appearance only: no upload, pricing, pickup or partner-engine behavior. */
.of-skin.of-service-page .uploadhub-input.qty {
  width:84px; min-width:84px; box-sizing:border-box;
}
.of-skin.of-service-page {
  --of-control-font: Arial, Helvetica, sans-serif;
  --of-control-size: 14px;
  --of-control-leading: 20px;
  --of-control-radius: 7px;
  --of-control-gap: 9px;
  --of-control-height: 40px;
  --of-control-hover: #780024;
  --of-control-pressed: #59001b;
}
.of-skin.of-service-page :is(.uploadhub-shell,.calendar-shell,.photobook-shell,.gift-editor,.webshop-order-shell) {
  font-family:var(--of-control-font); font-size:14px; line-height:1.45;
}
.of-skin.of-service-page :is(#htmlwizardpanel, .of-main, .uploadhub-guide, .photobook-notice, .photobook-reader, .photobook-cart-modal, .calendar-cart-modal, .gift-login-modal) :is(button:not(:where(.photobook-photo-thumb, .photobook-product-card, .calendar-photo-thumb, .calendar-product-item, .calendar-template-item, .calendar-cart-close, .photobook-cart-close, .gift-login-close)), input[type=button], input[type=submit], input[type=reset], .uploadhub-button, .calendar-upload-button, .gift-control-button, .calendar-cart-link, .photobook-cart-link, .webshop-order-button, .of-button) {
  box-sizing:border-box!important; font:600 var(--of-control-size)/var(--of-control-leading) var(--of-control-font)!important;
  min-height:var(--of-control-height)!important; height:auto!important; padding:9px 14px!important;
  border:1px solid var(--of-wine,#98002e)!important; border-radius:var(--of-control-radius)!important;
  background:var(--of-wine,#98002e)!important; color:#fff!important; text-decoration:none!important;
  align-self:center; cursor:pointer; box-shadow:none!important; filter:none!important; transform:none!important;
  transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.of-skin.of-service-page :is(#htmlwizardpanel, .of-main, .uploadhub-guide, .photobook-notice, .photobook-reader, .photobook-cart-modal, .calendar-cart-modal, .gift-login-modal) :is(button:not(:where(.photobook-photo-thumb, .photobook-product-card, .calendar-photo-thumb, .calendar-product-item, .calendar-template-item, .calendar-cart-close, .photobook-cart-close, .gift-login-close)), input[type=button], input[type=submit], input[type=reset], .uploadhub-button, .calendar-upload-button, .gift-control-button, .calendar-cart-link, .photobook-cart-link, .webshop-order-button, .of-button):where(.secondary,.calendar-secondary-button,.photobook-secondary-button,.calendar-page-button,.photobook-page-tab,.webshop-main-button,.webshop-subcategory-button, .uploadhub-fit-toggle button,.gift-side-switch button) {background:#fff!important;color:#850029!important;border-color:#b9c9be!important}
.of-skin.of-service-page :is(#htmlwizardpanel, .of-main, .uploadhub-guide, .photobook-notice, .photobook-reader, .photobook-cart-modal, .calendar-cart-modal, .gift-login-modal) :is(button:not(:where(.photobook-photo-thumb, .photobook-product-card, .calendar-photo-thumb, .calendar-product-item, .calendar-template-item, .calendar-cart-close, .photobook-cart-close, .gift-login-close)), input[type=button], input[type=submit], input[type=reset], .uploadhub-button, .calendar-upload-button, .gift-control-button, .calendar-cart-link, .photobook-cart-link, .webshop-order-button, .of-button):not(:disabled):not([disabled]):not([aria-disabled=true]):hover {background:var(--of-control-hover)!important;color:#fff!important;border-color:var(--of-control-hover)!important;box-shadow:0 2px 5px #65002025!important}
.of-skin.of-service-page :is(#htmlwizardpanel, .of-main, .uploadhub-guide, .photobook-notice, .photobook-reader, .photobook-cart-modal, .calendar-cart-modal, .gift-login-modal) :is(button:not(:where(.photobook-photo-thumb, .photobook-product-card, .calendar-photo-thumb, .calendar-product-item, .calendar-template-item, .calendar-cart-close, .photobook-cart-close, .gift-login-close)), input[type=button], input[type=submit], input[type=reset], .uploadhub-button, .calendar-upload-button, .gift-control-button, .calendar-cart-link, .photobook-cart-link, .webshop-order-button, .of-button):is(.active,.is-active,[aria-pressed=true],[aria-selected=true]) {background:var(--of-wine,#98002e)!important;color:#fff!important;border-color:var(--of-wine,#98002e)!important;box-shadow:inset 0 -3px 0 #59001b!important}
.of-skin.of-service-page :is(#htmlwizardpanel, .of-main, .uploadhub-guide, .photobook-notice, .photobook-reader, .photobook-cart-modal, .calendar-cart-modal, .gift-login-modal) :is(button:not(:where(.photobook-photo-thumb, .photobook-product-card, .calendar-photo-thumb, .calendar-product-item, .calendar-template-item, .calendar-cart-close, .photobook-cart-close, .gift-login-close)), input[type=button], input[type=submit], input[type=reset], .uploadhub-button, .calendar-upload-button, .gift-control-button, .calendar-cart-link, .photobook-cart-link, .webshop-order-button, .of-button):not(:disabled):not([disabled]):not([aria-disabled=true]):active {background:var(--of-control-pressed)!important;color:#fff!important;box-shadow:inset 0 2px 5px #30001060!important}
.of-skin.of-service-page :is(#htmlwizardpanel, .of-main, .uploadhub-guide, .photobook-notice, .photobook-reader, .photobook-cart-modal, .calendar-cart-modal, .gift-login-modal) :is(button:not(:where(.photobook-photo-thumb, .photobook-product-card, .calendar-photo-thumb, .calendar-product-item, .calendar-template-item, .calendar-cart-close, .photobook-cart-close, .gift-login-close)), input[type=button], input[type=submit], input[type=reset], .uploadhub-button, .calendar-upload-button, .gift-control-button, .calendar-cart-link, .photobook-cart-link, .webshop-order-button, .of-button):focus-visible {outline:3px solid #b86680!important;outline-offset:2px!important}
.of-skin.of-service-page :is(#htmlwizardpanel, .of-main, .uploadhub-guide, .photobook-notice, .photobook-reader, .photobook-cart-modal, .calendar-cart-modal, .gift-login-modal) :is(button:not(:where(.photobook-photo-thumb, .photobook-product-card, .calendar-photo-thumb, .calendar-product-item, .calendar-template-item, .calendar-cart-close, .photobook-cart-close, .gift-login-close)), input[type=button], input[type=submit], input[type=reset], .uploadhub-button, .calendar-upload-button, .gift-control-button, .calendar-cart-link, .photobook-cart-link, .webshop-order-button, .of-button):is(:disabled,[disabled],[aria-disabled=true]) {background:#e7ece8!important;color:#91838a!important;border-color:#c8d3cb!important;cursor:not-allowed;opacity:1!important;filter:none!important;box-shadow:none!important}

/* Compact repeat controls keep their layout while sharing the same visual states. */
.of-skin.of-service-page #htmlwizardpanel :is(.uploadhub-fit-toggle,.uploadhub-folder-file-row) button {min-height:34px!important;padding:6px 10px!important;font-size:13px!important}
.of-skin.of-service-page :is(.uploadhub-topbar-actions,.uploadhub-folder-actions,.uploadhub-card-actions,.calendar-cart-actions,.photobook-cart-actions) {gap:var(--of-control-gap)}
.of-skin.of-service-page .gift-side-switch {display:flex;gap:var(--of-control-gap)}
.of-skin.of-service-page .gift-side-switch button {flex:1;min-width:0}
/* Keep selection cards and photo thumbnails at their original image dimensions. */
.of-skin.of-service-page :is(.photobook-product-card,.calendar-product-item,.calendar-template-item) {font-family:var(--of-control-font);line-height:1.45;background:#fff!important;color:#40343c!important;border-color:#c8d3cb!important}
.of-skin.of-service-page :is(.photobook-product-card,.calendar-product-item,.calendar-template-item):hover {border-color:#98002e!important;background:#f3f7f3!important}
.of-skin.of-service-page :is(.photobook-product-card,.calendar-product-item,.calendar-template-item).active {background:#eaf0eb!important;border-color:#98002e!important;box-shadow:inset 0 -3px 0 #98002e!important}
.of-skin.of-service-page :is(.photobook-product-card,.calendar-product-item,.calendar-template-item,.photobook-photo-thumb,.calendar-photo-thumb):active {filter:brightness(.86)}
.of-skin.of-service-page :is(.photobook-product-card,.calendar-product-item,.calendar-template-item,.photobook-photo-thumb,.calendar-photo-thumb):focus-visible {outline:3px solid #b86680;outline-offset:2px}
.of-skin.of-service-page :is(.calendar-cart-close,.photobook-cart-close,.gift-login-close):hover {background:#780024!important;color:white!important}
.of-skin.of-service-page :is(.calendar-cart-close,.photobook-cart-close,.gift-login-close):active {background:#59001b!important;color:white!important}
/* File upload labels remain native file selectors. */
.of-skin.of-service-page :is(.calendar-upload-button,.gift-control-button):focus-within {outline:3px solid #b86680;outline-offset:2px}
.of-skin.of-service-page #htmlwizardpanel input[type=file]::file-selector-button {font:600 13px/20px var(--of-control-font);background:#e3ebe5;color:#850029;border-color:#b9c9be;cursor:pointer}
.of-skin.of-service-page #htmlwizardpanel input[type=file]::file-selector-button:hover {background:#780024;color:#fff}
.of-skin.of-service-page #htmlwizardpanel input[type=file]::file-selector-button:active {background:#59001b;color:#fff}
@media(prefers-reduced-motion:reduce){.of-skin.of-service-page button{transition:none!important}}

/* Shared readable form typography; preserve the compact photobook tool labels. */
.of-skin.of-service-page #htmlwizardpanel {font-family:var(--of-control-font);font-size:14px;line-height:1.45}
.of-skin.of-service-page :is(.uploadhub-shell,.calendar-controls,.calendar-side-tools,.gift-controls,.photobook-controls) :is(select,input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]),textarea) {font:13px/20px var(--of-control-font)}
.of-skin.of-service-page :is(.calendar-side-tools,.gift-controls) label {line-height:1.4}
@media(max-width:700px){.of-skin.of-service-page {--of-control-height:44px}}

/* Responsive gift editor; calibrated preview keeps its original 4:3 geometry. */
.of-skin.of-service-page .gift-shell{width:100%;max-width:none;min-width:0}
.of-skin.of-service-page .gift-editor{border:1px solid var(--of-line,#d6dee8);border-radius:10px;overflow:hidden}
.of-skin.of-service-page .gift-editor-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:var(--of-blush,#eaf0eb)}
.of-skin.of-service-page .gift-editor-head>div{display:block;min-width:0}
.of-skin.of-service-page .gift-editor-close{width:auto;flex-shrink:0}
.of-skin.of-service-page .gift-editor-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;padding:20px;box-sizing:border-box;align-items:start}
.of-skin.of-service-page .gift-preview-panel{display:block;width:auto;min-width:0;padding:0;position:sticky;top:16px}
.of-skin.of-service-page .gift-preview-stage{width:100%;height:auto;aspect-ratio:4/3;box-sizing:content-box;border:0;outline:1px solid var(--of-line,#d6dee8);border-radius:8px;background:#f7f8fa}
.of-skin.of-service-page .gift-controls{display:block;width:auto;min-width:0;padding:16px;box-sizing:border-box;border:1px solid var(--of-line,#d6dee8);border-radius:8px;background:#fff}
/* Shared side-tool rhythm: label, control, breathing room. */
.of-skin.of-service-page :is(.gift-controls,.calendar-side-tools){font:13px/1.45 var(--of-control-font);overflow-wrap:break-word}
.of-skin.of-service-page .gift-control-label{font-size:13px;line-height:18px;margin:16px 0 3px;color:#263340}
.of-skin.of-service-page .gift-controls input[type=range]{display:block;box-sizing:border-box;width:100%;height:20px!important;min-height:20px!important;margin:0 0 16px;padding:0;accent-color:var(--of-wine,#98002e)}
.of-skin.of-service-page .gift-control-input{min-width:0;max-width:100%;border-radius:6px;min-height:36px}
.of-skin.of-service-page .gift-control-row{display:flex;align-items:center;justify-content:space-between;gap:10px;overflow:visible;margin:12px 0 16px}
.of-skin.of-service-page .gift-control-row label,.of-skin.of-service-page .gift-control-row input{float:none}
.of-skin.of-service-page .gift-check-row{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:18px;background:#f6f9f6;border-color:var(--of-line,#d6dee8)}
.of-skin.of-service-page .gift-check-row input{flex:none;margin:2px 0 0;accent-color:var(--of-wine,#98002e)}
.of-skin.of-service-page .gift-side-switch button{width:auto}
.of-skin.of-service-page .gift-selected-product{padding:12px 14px;line-height:1.45}
@media(max-width:900px){
 .of-skin.of-service-page .gift-editor-body{grid-template-columns:minmax(0,1fr);padding:14px;gap:16px}
 .of-skin.of-service-page .gift-preview-panel{position:static}
 .of-skin.of-service-page .gift-controls{width:100%}
 .of-skin.of-service-page .gift-editor-head{padding:14px}
}
/* Product photography occupies the same calibrated 4:3 frame as the measuring tool. */
.of-skin.of-service-page .gift-product-photo{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain;margin:0;padding:0;border:0}
.of-skin.of-service-page .gift-back-image-row[hidden]{display:none!important}
.of-skin.of-service-page .gift-print-area.spread{background:transparent;outline:0}
.of-skin.of-service-page .gift-print-area.spread .gift-print-curve-svg{display:block}
.of-skin.of-service-page .gift-side-switch{flex-wrap:wrap}
.of-skin.of-service-page #gift-price-summary{margin:12px 0;font-weight:600;color:var(--of-wine);line-height:1.5}
/* The global icon size must never constrain the calibration overlay. */
.of-skin.of-service-page .gift-print-curve-svg{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
.of-skin.of-service-page .gift-print-curve-svg path{stroke:var(--of-wine,#98002e)}
.of-skin.of-service-page #htmlwizardpanel .gift-side-switch button{font-size:12px!important;padding:7px 6px!important;white-space:nowrap;min-height:36px!important}

/* Gift catalog filters sit above the full-width product grid. */
.of-skin.of-service-page .gift-shell .webshop-layout{grid-template-columns:minmax(0,1fr);gap:16px}
.of-skin.of-service-page .gift-shell .webshop-filter-panel{display:flex;align-items:center;gap:20px;width:100%;min-width:0;box-sizing:border-box;padding:14px 18px}
.of-skin.of-service-page .gift-shell .webshop-filter-title{margin:0;flex:none}
.of-skin.of-service-page .gift-shell .webshop-filter-group.active{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 18px;flex:1;max-width:720px;min-width:0}
.of-skin.of-service-page .gift-filter-field{min-width:0}
.of-skin.of-service-page .gift-filter-field .webshop-filter-label{display:block;margin:0 0 4px;font:600 13px/18px Arial,sans-serif}
.of-skin.of-service-page .gift-filter-field select{display:block;width:100%;margin:0;font:13px/20px Arial,sans-serif}
@media(max-width:700px){
 .of-skin.of-service-page .gift-shell .webshop-filter-panel{display:block;padding:12px}
 .of-skin.of-service-page .gift-shell .webshop-filter-title{margin-bottom:10px}
 .of-skin.of-service-page .gift-shell .webshop-filter-group.active{grid-template-columns:minmax(0,1fr);max-width:none}
}

/* Keep the calibrated print boundary visible above the photo in both views. */
.of-skin.of-service-page .gift-print-curve-svg{z-index:8;pointer-events:none}
.of-skin.of-service-page .gift-print-curve-svg path{stroke-width:2;stroke-dasharray:4 3;filter:drop-shadow(0 0 1px white)}
.of-skin.of-service-page #gift-placement{width:100%;min-width:0;max-width:100%;box-sizing:border-box;white-space:nowrap}

.of-skin.of-service-page #htmlwizardpanel :is(.uploadhub-setup-notice,.uploadhub-folder-warning,.uploadhub-folder-error){margin:0!important;padding:12px 16px;border:1px solid #c58b9e;border-left:4px solid #98002e;border-radius:7px;background:#eaf1ec;color:#800026;font:600 16px/1.5 Arial,sans-serif}
.of-skin.of-service-page #htmlwizardpanel .uploadhub-folder-notices{display:grid;gap:6px;margin:0}
.of-skin.of-service-page #htmlwizardpanel .uploadhub-folder-notices:empty{display:none}

/* Photo rows share column widths: file sizes and status text cannot shift controls. */
.of-skin.of-service-page .uploadhub-folder-files {container-type:inline-size}
.of-skin.of-service-page #htmlwizardpanel .uploadhub-folder-file-row {
  display:grid; grid-template-columns:minmax(150px,1fr) 88px 204px 110px 112px;
  align-items:center; gap:8px 10px; padding:10px 12px;
}
.of-skin.of-service-page #htmlwizardpanel .uploadhub-folder-file-row > * {min-width:0;margin:0}
.of-skin.of-service-page .uploadhub-folder-file-row > .uploadhub-folder-file-meta {text-align:right;overflow-wrap:anywhere}
.of-skin.of-service-page .uploadhub-folder-file-row .uploadhub-item-size {width:170px;min-width:0;box-sizing:border-box}
.of-skin.of-service-page #htmlwizardpanel .uploadhub-folder-file-actions {
  display:flex;flex-wrap:wrap;gap:8px;grid-column:1 / -1;
}
.of-skin.of-service-page #htmlwizardpanel .uploadhub-folder-file-status {grid-column:1 / -1;text-align:left}
@container (min-width: 1380px) {
  .of-skin.of-service-page #htmlwizardpanel .uploadhub-folder-file-row {grid-template-columns:minmax(150px,1fr) 88px 204px 110px 112px 560px}
  .of-skin.of-service-page #htmlwizardpanel .uploadhub-folder-file-actions {grid-column:auto}
}
@container (max-width: 760px) {
  .of-skin.of-service-page #htmlwizardpanel .uploadhub-folder-file-row {grid-template-columns:minmax(0,1fr) 110px 112px}
  .of-skin.of-service-page .uploadhub-folder-file-main {grid-column:1 / 3}
  .of-skin.of-service-page .uploadhub-folder-file-row .uploadhub-item-size {width:100%}
}
@container (max-width: 440px) {
  .of-skin.of-service-page #htmlwizardpanel .uploadhub-folder-file-row {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .of-skin.of-service-page .uploadhub-folder-file-main {grid-column:1 / -1}
  .of-skin.of-service-page .uploadhub-folder-file-row > .uploadhub-folder-file-meta:not(.uploadhub-folder-file-status) {grid-column:1 / -1;text-align:left}
  .of-skin.of-service-page .uploadhub-folder-file-row > label:first-of-type {grid-column:1 / -1}
}

/* Square photo previews; the black paper outline remains above white Fit bands. */
.of-skin.of-service-page .uploadhub-hover-preview :is(.uploadhub-hover-preview-card,.uploadhub-hover-preview-stage,.uploadhub-preview-frame,.uploadhub-preview-image){border-radius:0!important}
.of-skin.of-service-page .uploadhub-hover-preview .uploadhub-preview-frame-fit::after{content:"";position:absolute;inset:0;border:1px solid #000;pointer-events:none;z-index:3}

/* Photographs sit on plain white paper, without a transparency checkerboard. */
.of-skin #htmlwizardpanel .uploadhub-preview-stage,.admin-body #htmlwizardpanel .uploadhub-preview-stage{background:#fff!important}
.of-skin :is(.gift-cart-title,.gift-editor-head,.gift-selected-product){background:#e3ebe5;border-color:#cbd7ce}
.of-skin .gift-cart-panel{border-color:#cbd7ce;background:#fff}

/* Light sage-grey empty-state surfaces, matching the deeper upload dropzone. */
.of-skin #htmlwizardpanel .uploadhub-empty{background:#f0f5f1;border-color:#cbd7ce;color:#5f7165}
.of-skin .of-service-welcome{background:#f0f5f1}

/* Match the secondary action buttons while keeping the drop instruction non-interactive. */
.of-skin.of-service-page .uploadhub-drop-hint{background:#fff;color:#850029;border-color:#b9c9be}

/* Checkout warnings follow the burgundy brand color. */
.of-skin #htmlwizardpanel table.orderwarning td{color:var(--of-wine,#98002e);border-color:var(--of-wine,#98002e)}
.of-skin #htmlwizardpanel :is(.orderdataerror,.htmluploadsectiontitle,ul.htmluploaderrors li.error){color:var(--of-wine,#98002e)}
.of-skin #htmlwizardpanel .of-order-pickup{margin:8px 0 16px}
.of-skin .uploadhub-order-fill{display:inline-block;white-space:nowrap;margin-left:5px;color:var(--of-wine,#98002e)}
.uploadhub-folder-mode{font-size:13px;color:var(--of-wine,#98002e)}

/* Consistent review actions for poster and canvas, with Next on the right. */
.of-skin.of-service-page #htmlwizardpanel .of-print-review-actions{gap:10px;margin:16px 0 0;padding:0}
.of-skin.of-service-page #htmlwizardpanel .of-print-review-actions>input:not([type=hidden]){margin:0}
.of-skin.of-service-page #htmlwizardpanel .of-print-review-actions>.of-print-review-next{margin-left:auto}
@media(max-width:540px){
 .of-skin.of-service-page #htmlwizardpanel .of-print-review-actions>input:not([type=hidden]){width:100%;margin:0!important}
}

/* White background for the customer mug preview. */
.of-skin.of-service-page .gift-preview-stage{background:#fff}