/* Shared service headings and stable upload steps for the OnlineFoto skin. */
.of-skin #htmlwizardpanel input.input[type=submit],.of-skin #htmlwizardpanel input.input[type=button],.of-skin #htmlwizardpanel input.input[type=submit]:hover,.of-skin #htmlwizardpanel input.input[type=button]:hover{border:1px solid var(--of-wine)!important;padding:8px 16px!important;min-height:38px!important;height:38px!important;background:var(--of-wine)!important;color:#fff!important;box-sizing:border-box;transform:none;font:14px/20px Arial,sans-serif!important}
.of-skin #htmlwizardpanel .of-bulk-photo-settings{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 20px}
.of-skin #htmlwizardpanel .of-bulk-photo-settings .htmluploadsectiontitle{margin:0!important;color:var(--of-wine);font-size:13px}
.of-skin #htmlwizardpanel .of-bulk-photo-settings>span{display:inline-flex!important;align-items:center;gap:6px;padding:0!important;margin:0!important;white-space:nowrap;font-size:13px}
.of-skin #htmlwizardpanel .of-bulk-photo-settings>br{display:none}
.of-skin #htmlwizardpanel .of-bulk-photo-settings input:not([type=radio]):not([type=submit]){width:60px;min-height:34px;font-size:13px;padding:5px}
.of-skin #htmlwizardpanel .of-bulk-photo-settings select{min-height:34px;font-size:13px;padding:5px}
.of-skin .of-service-welcome{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:100px;padding:20px 24px!important;margin:0 0 18px;border:1px solid var(--of-line);border-radius:10px;background:#f0f5f1;box-sizing:border-box}
.of-skin .calendar-shell>.of-service-welcome{margin-bottom:0}
.of-skin .of-service-welcome h1{margin:0;font:600 23px/1.3 Arial,sans-serif;color:var(--of-wine)}
.of-skin .of-service-welcome p{padding:0!important;margin:7px 0 0!important;font:14px/1.5 Arial,sans-serif;color:var(--of-muted)}
.of-skin .of-service-welcome>a{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:8px 16px;border:1px solid var(--of-wine);border-radius:7px;background:var(--of-wine);color:white!important;font-size:14px}
.of-skin .uploadhub-title{display:none}
.of-skin .uploadhub-topbar{display:none}
.of-skin #htmlwizardpanel .of-upload-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 18px}
.of-skin #htmlwizardpanel .of-upload-step{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:9px 12px;border:1px solid var(--of-line);border-radius:6px;background:#fff;color:var(--of-wine);font:600 13px/1.4 Arial,sans-serif;box-sizing:border-box;text-decoration:none;transition:background-color .15s,border-color .15s}
.of-skin #htmlwizardpanel .of-upload-step.is-active{background:var(--of-blush);border-color:#c79da9}
.of-skin #htmlwizardpanel a.of-upload-step:hover{background:var(--of-blush);border-color:#b88c9c}
.of-skin #htmlwizardpanel .of-upload-step b{display:inline-grid;place-items:center;flex-shrink:0;width:23px;height:23px;border-radius:50%;background:var(--of-blush);font-size:12px}
.of-skin #htmlwizardpanel .of-upload-step.is-active b{background:var(--of-wine);color:white}
.of-skin #htmlwizardpanel .uploadslot{padding:8px 10px;margin:0 0 8px;gap:8px;align-items:center}
.of-skin #htmlwizardpanel .uploadslot>span{display:inline-flex!important;align-items:center;flex-wrap:wrap;gap:7px;padding:0!important;margin:0!important;line-height:1.4}
.of-skin #htmlwizardpanel .uploadslot input,.of-skin #htmlwizardpanel .uploadslot select{height:36px!important;min-height:36px!important;padding:6px 8px!important;font:13px Arial,sans-serif;border:1px solid #c8d3cb;box-sizing:border-box;transition:none;transform:none}
.of-skin #htmlwizardpanel .uploadslot input[type=file]{width:280px;max-width:100%;padding:0!important;line-height:34px;background:#fff}
.of-skin #htmlwizardpanel .uploadslot input[type=file]::file-selector-button{height:34px;margin:0 8px 0 0;padding:0 10px;border:0;border-right:1px solid #c8d3cb;background:var(--of-blush);color:var(--of-wine);font:13px Arial,sans-serif;cursor:pointer}
/* One horizontal, scrollable row for each calendar selector, at every width. */
.of-skin .calendar-shell .calendar-product-list,.of-skin .calendar-shell .calendar-template-list{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:260px;max-height:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity}
.of-skin .calendar-product-item,.of-skin .calendar-template-item{scroll-snap-align:start}
@media(max-width:700px){
 .of-skin .of-service-welcome{padding:17px!important;gap:14px;flex-wrap:wrap;min-height:0}
 .of-skin .of-service-welcome h1{font-size:21px}
 .of-skin .of-service-welcome p{font-size:13px}
 .of-skin #htmlwizardpanel .of-upload-steps{grid-template-columns:minmax(0,1fr);gap:7px}
 .of-skin #htmlwizardpanel .of-upload-step{justify-content:flex-start;min-height:42px}
 .of-skin #htmlwizardpanel .uploadslot>span{width:100%}
 .of-skin #htmlwizardpanel .uploadslot input[type=file]{width:100%;margin:0}
 .of-skin .calendar-shell .calendar-product-list,.of-skin .calendar-shell .calendar-template-list{grid-auto-columns:85%}
}

/* Photobook controls: distinct idle, selected, pressed and unavailable states. */
.of-skin .photobook-shell button:not(:disabled){cursor:pointer;transition:background-color .12s,box-shadow .12s,filter .12s}
.of-skin .photobook-shell button:not(:disabled):hover{filter:brightness(.88);box-shadow:0 2px 5px #65002025}
.of-skin .photobook-shell button:not(:disabled):active{filter:brightness(.72);box-shadow:inset 0 2px 5px #40001855}
.of-skin .photobook-shell button:focus-visible,.of-skin .photobook-shell summary:focus-visible{outline:3px solid #b86680!important;outline-offset:3px}
.of-skin .photobook-shell button:disabled{background:#e7ece8!important;border-color:#c8d3cb!important;color:#91838a!important;opacity:1;cursor:not-allowed;box-shadow:none!important}
.of-skin .photobook-shell .photobook-page-tab{background:#fff!important;color:#850029!important;border:1px solid #b9c9be!important;min-height:40px;padding:8px 15px!important}
.of-skin .photobook-shell .photobook-pages .photobook-page-tab.active{background:#98002e!important;color:#fff!important;border-color:#98002e!important;box-shadow:inset 0 -4px 0 #59001b!important;font-weight:bold}
.of-skin .photobook-shell .photobook-photo-thumb{background:#fff!important;color:#850029!important;padding:3px!important;border:2px solid transparent!important;border-radius:5px;min-height:0;aspect-ratio:1;box-shadow:none}
.of-skin .photobook-shell .photobook-photo-thumb.active{border-color:#98002e!important;box-shadow:0 0 0 1px #98002e!important}
.of-skin .photobook-shell .photobook-photo-thumb .photobook-used-badge{top:auto;bottom:2px;left:2px;right:2px;height:auto;min-width:0;line-height:1.3;padding:3px 1px;border-radius:3px;background:#365e49!important;color:#fff!important;font-size:10px;font-style:normal;white-space:normal}
.of-skin .photobook-shell .photobook-photo-thumb img{width:100%;height:100%;object-fit:cover}
.of-skin .photobook-shell .photobook-photo-thumb>span{position:absolute;bottom:3px;left:3px;background:#ffffffdf;padding:1px 5px;border-radius:3px;font-size:11px}
.of-skin .photobook-photo-pool{grid-template-columns:repeat(3,minmax(0,1fr));background:#f4f7f4;border-color:#d4dfd7;border-radius:5px;scrollbar-gutter:auto}
.of-skin .photobook-photo-pool:empty{display:none}
.of-skin .photobook-shell .photobook-product-card{background:#fff!important;color:#40343c!important;border:2px solid #d4dfd7!important}
.of-skin .photobook-shell .photobook-product-card.active{background:#eaf0eb!important;border-color:#98002e!important;box-shadow:inset 0 -3px 0 #98002e}
/* Keep the editing tools within their column, including open disclosures. */
.of-skin .photobook-side-tools{container-type:inline-size;min-width:0}
.of-skin .photobook-image-tools{min-width:0;max-width:100%;box-sizing:border-box}
.of-skin .photobook-image-tools[open]{max-height:none;overflow:visible}
.of-skin .photobook-image-tools>summary{padding:8px 2px;font:700 13px/20px Arial,sans-serif;font-size:clamp(11px,5cqi,14px);white-space:nowrap;box-sizing:border-box}
.of-skin .photobook-side-tools .photobook-layout-title{font:700 14px/20px Arial,sans-serif;white-space:nowrap;text-align:left;min-width:0}
.of-skin .photobook-image-tools input,.of-skin .photobook-image-tools select,.of-skin .photobook-image-tools textarea{min-width:0;max-width:100%;box-sizing:border-box}
.of-skin .photobook-image-tools input[type=range]{display:block;width:100%;margin-left:0;margin-right:0}
.of-skin .photobook-image-tools .photobook-background-tool,.of-skin .photobook-image-tools .photobook-slot-editor,.of-skin .photobook-image-tools .photobook-text-editor{grid-template-columns:minmax(0,1fr);min-width:0}
.of-skin .photobook-image-tools .photobook-layout-tool{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}
.of-skin .photobook-image-tools .photobook-text-row{grid-template-columns:minmax(0,1fr) 76px;min-width:0}
@media(min-width:901px){.of-skin .photobook-preview-wrap{grid-template-columns:minmax(0,1fr) 300px}}
/* Editor rhythm: heading, one line of space, label directly above its control. */
.of-skin .photobook-image-tools :is(.photobook-slot-adjust,.photobook-background-tool,.photobook-text-editor,.photobook-slot-editor,.photobook-layout-tool){row-gap:0}
.of-skin .photobook-image-tools .photobook-layout-title{margin:0 0 16px}
.of-skin .photobook-image-tools label{display:flex;flex-direction:column;gap:2px;margin:0 0 16px;font:600 12px/18px Arial,sans-serif;min-width:0}
.of-skin .photobook-image-tools label>input,.of-skin .photobook-image-tools label>select,.of-skin .photobook-image-tools label>textarea{margin:0}
.of-skin .photobook-image-tools label>input[type=range]{height:20px!important;min-height:20px!important;padding:0!important;border:0;background:transparent;box-shadow:none;accent-color:#98002e}
.of-skin .photobook-image-tools .photobook-scale-control{margin-top:16px}
.of-skin .photobook-image-tools .photobook-slot-adjust{margin-bottom:16px;min-width:0;grid-template-columns:minmax(0,1fr)}
.of-skin .photobook-image-tools :is(.photobook-slot-editor,.photobook-text-editor)>.photobook-secondary-button+.photobook-secondary-button{margin-top:9px}
.of-skin .photobook-shell{border-radius:11px}
.of-skin .photobook-shell>.of-service-welcome{border-radius:10px}
.of-skin .photobook-shell .photobook-upload-button{display:flex;align-items:center;justify-content:center;border-radius:7px;color:#fff!important;font:600 14px/20px Arial,sans-serif;min-height:44px;padding:10px 14px}
.of-skin #photobook-photo-input[hidden]{display:none!important}
.of-skin .photobook-controls{border:1px solid #cdd8e5;box-sizing:border-box}

/* Poster/canvas review uses the same controls as the upload slots. */
.of-skin #htmlwizardpanel.of-print-review :is(select,input[type=text]){height:36px!important;min-height:36px!important;padding:6px 8px!important;font:13px Arial,sans-serif;border:1px solid #c8d3cb;box-sizing:border-box;transition:none;transform:none}
.of-skin #htmlwizardpanel.of-print-review .of-print-size-controls{max-width:100%;line-height:44px}

/* The complete review row follows the upload row, including quantity and finish. */
.of-skin #htmlwizardpanel.of-print-review .of-print-settings-row,
.of-skin #htmlwizardpanel.of-print-review .of-bulk-photo-settings{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 10px;background:#fff;border:1px solid #c8d3cb;border-radius:6px}
.of-skin #htmlwizardpanel.of-print-review .of-print-settings-row>span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px;border:0!important;padding:0!important;margin:0!important;line-height:1.4}
.of-skin #htmlwizardpanel.of-print-review .of-print-settings-row input[type=text],
.of-skin #htmlwizardpanel.of-print-review .of-bulk-photo-settings input[type=text]{width:74px}