/* Prints: the walkthrough photo prints and posters share (assets/prints.js). Uses the theme's tokens where they exist and plain values where they do not. Phone first. Posters add assets/posters.css. */

.hp-prints { --c-ink: var(--wp--preset--color--ink, #1D1D1F); --c-body: var(--wp--preset--color--body, #3A3A3E); --c-quiet: var(--wp--preset--color--quiet, #6E6E73); --c-line: var(--wp--preset--color--line, #E8E8ED); --c-line-strong: var(--wp--preset--color--line-strong, #D2D2D7); --c-tile: var(--wp--preset--color--tile, #F5F5F7); --c-surface: var(--wp--preset--color--surface, #fff); --c-brand: var(--wp--preset--color--brand-deep, #5B46C7); --c-soft: var(--wp--preset--color--brand-soft, #EDE9FC); --c-danger: var(--wp--preset--color--danger, #C54E60); --c-danger-tile: #B4394C; /* the danger a shade deeper for small text on the tile ground, where the theme's falls under 4.5:1 */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); margin: 0 auto; color: var(--c-ink); }
.hp-prints.hp-prints { max-width: 62rem; } /* doubled so it outranks the block layout's width rule on whatever page holds the shortcode */
.hp-prints *, .hp-prints *::before, .hp-prints *::after { box-sizing: border-box; }
.hp-prints [hidden] { display: none !important; }
.hp-prints button { -webkit-tap-highlight-color: transparent; }
.hp-prints button:focus-visible, .hp-prints select:focus-visible, .hp-prints input:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.hp-prints__file { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Buttons: the theme's pill, since .wp-element-button does not reach inside the app. */
.hp-prints__button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.2; color: #fff; background: var(--c-ink); border: 0; border-radius: 999px; padding: 0.8rem 1.4rem; cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap; transition: background-color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease); }
.hp-prints__button:hover { background: var(--c-brand); color: #fff; transform: translateY(-1px); }
.hp-prints__button:disabled { opacity: 0.5; transform: none; cursor: default; background: var(--c-ink); }
.hp-prints__button--secondary { background: transparent; color: var(--c-ink); border: 1px solid var(--c-line-strong); padding: calc(0.8rem - 1px) calc(1.4rem - 1px); }
.hp-prints__button--secondary:hover { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-ink); }
.hp-prints__button--secondary:disabled { background: transparent; }
.hp-prints__quiet { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--c-brand); cursor: pointer; }
.hp-prints__quiet:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* The head: where you are, the tools, the step's title. */
.hp-prints__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; margin-bottom: 1.25rem; }
.hp-prints__steps { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.hp-prints__step { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.75rem 0 0.25rem; background: none; border: 0; border-radius: 999px; font: inherit; font-size: 0.9rem; font-weight: 500; color: var(--c-quiet); cursor: pointer; }
.hp-prints__step:disabled { cursor: default; opacity: 0.55; }
.hp-prints__step-n { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--c-tile); color: var(--c-quiet); font-size: 0.8rem; font-weight: 700; }
.hp-prints__step.is-current { color: var(--c-ink); }
.hp-prints__step.is-current .hp-prints__step-n, .hp-prints__step.is-done .hp-prints__step-n { background: var(--c-ink); color: #fff; }
.hp-prints__tools { display: flex; gap: 1.25rem; margin-left: auto; }
.hp-prints__title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--c-ink); margin: 0; outline: none; }
.hp-prints__lede { color: var(--c-quiet); font-size: 1.05rem; line-height: 1.45; margin: 0.5rem 0 1.5rem; max-width: 40rem; }
.hp-prints__hint { color: var(--c-quiet); font-size: 0.95rem; line-height: 1.45; margin: 0; }
.hp-prints__note { color: var(--c-quiet); font-size: 0.9rem; margin: 0.75rem 0 0; }
.hp-prints__label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--c-quiet); margin-bottom: 0.5rem; }
.hp-prints__notice { background: var(--c-soft); color: var(--c-ink); border-radius: 12px; padding: 0.75rem 1rem; margin: 0 0 1rem; font-size: 0.95rem; }

/* Step 1: the drop area and the grid. */
.hp-prints__drop { display: grid; justify-items: center; gap: 0.5rem; text-align: center; background: var(--c-tile); border: 2px dashed transparent; border-radius: 20px; padding: 2.5rem 1rem; margin-bottom: 1.25rem; cursor: pointer; transition: border-color 160ms var(--ease), background-color 160ms var(--ease); }
.hp-prints__drop.is-over { border-color: var(--c-brand); background: var(--c-soft); }
.hp-prints__drop-icon { width: 3rem; height: 3rem; color: var(--c-quiet); margin-bottom: 0.25rem; }
.hp-prints__drop-icon svg { width: 100%; height: 100%; }
.hp-prints__drop-hint { margin: 0; color: var(--c-quiet); font-size: 0.9rem; }
.hp-prints__drop.is-compact { grid-auto-flow: column; grid-template-columns: auto 1fr; align-items: center; justify-items: start; text-align: left; padding: 0.75rem 0.75rem 0.75rem 1rem; gap: 0.15rem 1rem; }
.hp-prints__drop.is-compact .hp-prints__button { grid-row: 1 / span 2; }
.hp-prints__drop.is-compact .hp-prints__drop-icon { display: none; }
@media (hover: none) { .hp-prints__drop-hint--drag { display: none; } }
@media (hover: hover) { .hp-prints__drop-hint--touch { display: none; } }
.hp-prints__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
@media (min-width: 900px) { .hp-prints__grid { grid-template-columns: repeat(6, 1fr); gap: 0.75rem; } }
.hp-prints__tile { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--c-tile); }
.hp-prints__thumb { display: block; width: 100%; height: 100%; background: var(--c-tile); }
.hp-prints__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-prints__thumb.is-empty { background-color: var(--c-tile); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23A1A1A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='10' width='36' height='28' rx='4'/%3E%3Ccircle cx='17' cy='20' r='3'/%3E%3Cpath d='M6 33l11-9 8 7 6-5 11 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 40% auto; }
.hp-prints__tile.is-queued .hp-prints__thumb img, .hp-prints__tile.is-uploading .hp-prints__thumb img { opacity: 0.75; }
.hp-prints__tile.is-rejected .hp-prints__thumb, .hp-prints__tile.is-failed .hp-prints__thumb { opacity: 0.5; }
.hp-prints__ring { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.hp-prints__ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.hp-prints__ring-track { fill: rgba(29, 29, 31, 0.35); stroke: rgba(255, 255, 255, 0.4); stroke-width: 4; }
.hp-prints__ring-fill { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; transition: stroke-dashoffset 200ms var(--ease); }
.hp-prints__tile.is-done .hp-prints__ring, .hp-prints__tile.is-failed .hp-prints__ring, .hp-prints__tile.is-rejected .hp-prints__ring { display: none; }
.hp-prints__remove { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: #fff; }
.hp-prints__remove span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: rgba(29, 29, 31, 0.72); font-size: 1.1rem; line-height: 1; transition: background-color 160ms var(--ease); }
.hp-prints__remove:hover span { background: var(--c-ink); }
.hp-prints__tile-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0.4rem 0.5rem; font-size: 0.75rem; line-height: 1.25; color: #fff; background: rgba(197, 78, 96, 0.92); }
.hp-prints__retry { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); white-space: nowrap; min-height: 44px; padding: 0.4rem 1rem; border: 0; border-radius: 999px; background: var(--c-ink); color: #fff; font: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; }

/* Step 2: the paper, then a row per photo. */
.hp-prints__paper { margin-bottom: 1.5rem; }
.hp-prints__paper .hp-prints__hint { margin-top: 0.6rem; }
.hp-prints__segment { display: inline-flex; max-width: 100%; padding: 2px; background: var(--c-tile); border-radius: 999px; vertical-align: middle; }
.hp-prints__segment-item { min-height: 44px; padding: 0 1rem; border: 1px solid transparent; border-radius: 999px; background: transparent; font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--c-quiet); cursor: pointer; white-space: nowrap; transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); }
.hp-prints__segment-item:hover { color: var(--c-ink); }
.hp-prints__segment-item[aria-checked="true"], .hp-prints__segment-item[aria-pressed="true"] { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-line-strong); }
/* Four papers on the narrowest phones: the top control becomes four equal cells that shrink, so Metallic stays inside the pill. Scoped to the paper block, so the crop step's Portrait / Landscape control keeps its natural width. */
@media (max-width: 400px) { .hp-prints__paper .hp-prints__segment { display: flex; } .hp-prints__paper .hp-prints__segment-item { flex: 1 1 0; min-width: 0; padding: 0 0.5rem; font-size: 0.875rem; } }
/* The quiet line under the paper control, shown while any photo's own paper differs, with the way back. */
.hp-prints__paper-differs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--c-quiet); }
.hp-prints__rows-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.hp-prints__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.hp-prints__row { background: var(--c-tile); border-radius: 20px; padding: 0.9rem; }
@media (min-width: 600px) { .hp-prints__row { padding: 1.1rem 1.25rem; } }
.hp-prints__row-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.hp-prints__row-thumb { flex: 0 0 auto; width: 4rem; height: 4rem; border: 0; padding: 0; border-radius: 12px; overflow: hidden; background: var(--c-line); cursor: zoom-in; }
@media (min-width: 600px) { .hp-prints__row-thumb { width: 5rem; height: 5rem; } }
.hp-prints__row-name { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.hp-prints__row-file { font-weight: 500; overflow-wrap: anywhere; }
.hp-prints__row-px { font-size: 0.8rem; color: var(--c-quiet); }
/* The photo's own paper, a compact select under the name; the label and the select share a row. */
.hp-prints__row-paper { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; max-width: 100%; font-size: 0.85rem; color: var(--c-quiet); }
.hp-prints__row-paper .hp-prints__select { flex: 0 1 auto; width: auto; min-width: 0; font-size: 0.9rem; padding: 0 1.9rem 0 0.75rem; background-position: right 0.65rem center; }
.hp-prints__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
/* Wide screens: the photo and its name on the left, the size lines beside them, so the controls do not sit in a corner of a wide tile. */
@media (min-width: 900px) { .hp-prints__row { display: grid; grid-template-columns: 18rem 1fr; column-gap: 1.25rem; align-items: start; justify-items: start; } .hp-prints__row-head { grid-row: 1 / span 2; margin-bottom: 0; } .hp-prints__lines { width: 100%; } }
/* A line: on a phone the size takes a row of its own and the count sits under it; from 600px up they share one row. */
.hp-prints__line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.hp-prints__select { flex: 1 1 100%; min-height: 44px; font: inherit; font-size: 1rem; font-weight: 500; color: var(--c-ink); background-color: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; padding: 0 2.1rem 0 0.9rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6E73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; cursor: pointer; }
.hp-prints__select:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-soft); }
@media (min-width: 600px) { .hp-prints__select { flex: 0 0 auto; } .hp-prints__lines { gap: 0.5rem; } }
.hp-prints__stepper { display: inline-flex; align-items: center; gap: 0.25rem; }
.hp-prints__step-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; transition: border-color 160ms var(--ease); }
.hp-prints__step-btn:hover { border-color: var(--c-ink); }
.hp-prints__qty { width: 3.4rem; min-height: 44px; font: inherit; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; text-align: center; color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; padding: 0 0.25rem; -moz-appearance: textfield; appearance: textfield; }
.hp-prints__qty::-webkit-outer-spin-button, .hp-prints__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hp-prints__qty:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-soft); }
.hp-prints__line-remove { width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--c-quiet); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.hp-prints__line-remove:hover { color: var(--c-ink); background: var(--c-surface); }
.hp-prints__warn { flex-basis: 100%; margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--c-danger); }
.hp-prints__add-size { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.25rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--c-brand); cursor: pointer; }
.hp-prints__add-size:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* The larger look at a photo. */
.hp-prints__viewer { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: rgba(0, 0, 0, 0.88); cursor: zoom-out; }
.hp-prints__viewer img { display: block; max-width: 100%; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); object-fit: contain; border-radius: 12px; }
.hp-prints__viewer-close { position: absolute; top: max(0.5rem, env(safe-area-inset-top, 0px)); right: 0.5rem; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }

/* Step 3: the crop. The frame is the print: a sheet of paper lying on a quiet ground, its measurements drawn above and beside it, the photo filling it edge to edge and moving under it. The sheet is as wide as the ground allows and never taller than 60vh. */
.hp-prints__crop { display: grid; gap: 1rem; justify-items: center; }
/* The title between Previous and Next, so the way to the other prints is in view at any scroll position. */
.hp-prints__nav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 0.75rem; width: 100%; }
.hp-prints__nav-btn { width: 44px; height: 44px; padding: 0 0 0.1em; border: 1px solid var(--c-line-strong); border-radius: 999px; background: transparent; color: var(--c-ink); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: border-color 160ms var(--ease); }
.hp-prints__nav-btn:hover { border-color: var(--c-ink); }
.hp-prints__nav-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--c-line-strong); }
.hp-prints__crop-title { margin: 0; min-width: 0; font-weight: 600; text-align: center; }
/* The ground: the tile color, padded and rounded, holding the print with its two measurements, then the caption and the readout. --aspect is set here by the script. It is sized to the print (the print's width plus its own 1.5rem of padding, at least 28rem so a portrait print and the readout have room, and never more than the column), so on a wide screen it is a tile holding the print rather than a band with a small print in it. */
.hp-prints__sheet { --aspect: 1.5; width: min(100%, calc(var(--cap) * var(--aspect) + 1.75rem + 1.5rem)); min-width: min(100%, 28rem); padding: 0.5rem 1rem 0.9rem 0.5rem; background: var(--c-tile); border-radius: 20px; }
/* The sheet's height: never more than 60vh, and no more than leaves the rest of the step (the title, the zoom, the tools, the hint, the strip and the bar: about 35rem with the ground's own room) in view, so on a phone a portrait print and the strip of the others are on the screen together; never under 30vh, so a short screen still gets a print to work with. Where the browser knows dvh (the height with the phone's address bar showing) that is the height that counts; a custom property is not checked until it is used, so the switch is an @supports rather than a second declaration. */
.hp-prints__sheet { --cap: max(30vh, min(60vh, 100vh - 35rem)); }
@supports (height: 1dvh) { .hp-prints__sheet { --cap: max(30dvh, min(60dvh, 100dvh - 35rem)); } }
/* Wider than a phone, holding the whole step in view would cost most of a laptop's height and leave a small print, so only the title, the zoom and the tools (about 26rem) are kept in view above the bar and the strip may scroll under it, as the first layout did. */
@media (min-width: 768px) { .hp-prints__sheet { --cap: max(30vh, min(60vh, 100vh - 26rem)); } }
@supports (height: 1dvh) { @media (min-width: 768px) { .hp-prints__sheet { --cap: max(30dvh, min(60dvh, 100dvh - 26rem)); } } }
/* The print: a 1.75rem row above the sheet for the width line and a 1.75rem column beside it for the height line, so the lines sit against the sheet however wide it is. Its width is the sheet's (from the height cap and the aspect, or the ground's width when that is less) plus the column; centered. */
.hp-prints__print { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); grid-template-rows: 1.75rem auto; width: min(100%, calc(var(--cap) * var(--aspect) + 1.75rem)); margin: 0 auto; }
/* The sheet: white, a hairline edge and the soft shadow of a print lying on a table. The photo fills it edge to edge, as a borderless print does. */
.hp-prints__frame { grid-area: 2 / 2; position: relative; width: 100%; aspect-ratio: var(--aspect); background: var(--c-surface); box-shadow: 0 14px 34px -16px rgba(29, 29, 31, 0.35), 0 1px 2px rgba(29, 29, 31, 0.08); overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; }
/* The edge is drawn over the photo's outer pixel rather than as a border, so the frame's measured size stays the crop's. */
.hp-prints__frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(29, 29, 31, 0.12); pointer-events: none; }
.hp-prints__frame:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 4px; }
.hp-prints__frame.is-dragging { cursor: grabbing; }
/* The dimension lines: 1px of ink with 8px ticks at the ends, and the measurement on a small white label centered on the line (turned on its side beside the sheet). */
.hp-prints__dim { position: relative; }
.hp-prints__dim--w { grid-area: 1 / 2; height: 1.75rem; }
.hp-prints__dim--h { grid-area: 2 / 1; width: 1.75rem; }
.hp-prints__dim::before, .hp-prints__dim::after { content: ""; position: absolute; }
.hp-prints__dim--w::before { left: 0; right: 0; top: 50%; height: 1px; background: var(--c-ink); }
.hp-prints__dim--w::after { left: 0; right: 0; top: calc(50% - 4px); height: 8px; border-left: 1px solid var(--c-ink); border-right: 1px solid var(--c-ink); }
.hp-prints__dim--h::before { top: 0; bottom: 0; left: 50%; width: 1px; background: var(--c-ink); }
.hp-prints__dim--h::after { top: 0; bottom: 0; left: calc(50% - 4px); width: 8px; border-top: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-ink); }
.hp-prints__dim-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0.1rem 0.4rem; border-radius: 6px; background: var(--c-surface); font-size: 0.75rem; font-weight: 500; line-height: 1.2; color: var(--c-ink); white-space: nowrap; }
.hp-prints__dim--h .hp-prints__dim-label { transform: translate(-50%, -50%) rotate(-90deg); }
/* The caption and the readout: centered under the sheet, so they are inset by the height line's column. */
.hp-prints__sheet-caption { margin: 0.9rem 0 0; padding-left: 1.75rem; font-size: 0.9rem; font-weight: 500; line-height: 1.3; color: var(--c-ink); text-align: center; }
.hp-prints__readout { margin: 0.2rem 0 0; padding-left: 1.75rem; font-size: 0.85rem; line-height: 1.4; color: var(--c-quiet); text-align: center; }
.hp-prints__readout.is-low { color: var(--c-danger-tile); }
.hp-prints__readout-more { display: block; } /* its own line, so the two sentences do not run together */
.hp-prints__frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hp-prints__frame-note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 1rem; text-align: center; color: var(--c-quiet); font-size: 0.95rem; }
.hp-prints__zoom { display: flex; align-items: center; gap: 0.75rem; width: min(100%, 24rem); color: var(--c-quiet); font-size: 0.9rem; }
.hp-prints__zoom input { flex: 1; min-width: 0; min-height: 44px; margin: 0; accent-color: var(--c-ink); cursor: pointer; }
.hp-prints__crop-tools { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0.75rem; }
.hp-prints__crop-tools .hp-prints__button { min-width: 44px; } /* a tap target, however short its word ("Fill") */
/* On a phone the three tools share one row (compact pills, so Rotate, Portrait / Landscape and Fill fit 375px) and the step's parts sit a little closer, so the whole step is in view above the bar. */
@media (max-width: 430px) {
  .hp-prints__crop { gap: 0.75rem; }
  .hp-prints__crop-tools { gap: 0.4rem; }
  .hp-prints__crop-tools .hp-prints__button { font-size: 0.9rem; padding: calc(0.8rem - 1px) calc(0.75rem - 1px); }
  .hp-prints__crop-tools .hp-prints__segment-item { font-size: 0.9rem; padding: 0 0.75rem; }
}
.hp-prints__crop-hint { text-align: center; }
.hp-prints__strip { position: relative; display: flex; gap: 0.5rem; width: 100%; overflow-x: auto; list-style: none; margin: 0; padding: 0.25rem 0 0.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.hp-prints__strip li { flex: 0 0 auto; }
.hp-prints__strip-item { display: grid; gap: 0.25rem; justify-items: center; width: 4.5rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.75rem; color: var(--c-quiet); cursor: pointer; }
.hp-prints__strip-item .hp-prints__thumb { width: 4rem; height: 4rem; border-radius: 12px; overflow: hidden; border: 2px solid transparent; transition: border-color 160ms var(--ease); }
.hp-prints__strip-item.is-current .hp-prints__thumb { border-color: var(--c-ink); }
.hp-prints__strip-item.is-current { color: var(--c-ink); font-weight: 600; }

/* The bar that stays at the bottom: the count and the total, and the one button. */
.hp-prints__bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px)); background: var(--c-surface); border-top: 1px solid var(--c-line); }
.hp-prints__bar-text { min-width: 0; font-weight: 500; color: var(--c-ink); }
.hp-prints__bar-error { display: block; margin-top: 0.15rem; font-size: 0.9rem; font-weight: 400; color: var(--c-danger); }

@media (prefers-reduced-motion: reduce) {
  .hp-prints *, .hp-prints *::before, .hp-prints *::after { transition: none !important; animation: none !important; }
  .hp-prints__strip { scroll-behavior: auto; }
}

/* Browsers without aspect-ratio (older Safari): square tiles by padding; the frame's height comes from the script. */
@supports not (aspect-ratio: 1) {
  .hp-prints__tile::before { content: ""; display: block; padding-top: 100%; }
  .hp-prints__tile > .hp-prints__thumb { position: absolute; inset: 0; }
}

/* The shared sheet step's pieces. The tools under the sheet (the zoom, the three buttons and the hint for an image; the placement control for a PDF page) sit in one centered column. */
.hp-prints__tools-row { display: grid; gap: 1rem; justify-items: center; width: 100%; }
.hp-prints__tools-row:empty { display: none; }
@media (max-width: 430px) { .hp-prints__tools-row { gap: 0.75rem; } }
/* A PDF page is placed, not moved. */
.hp-prints__frame.is-fixed { cursor: default; touch-action: auto; }
/* A step with something beside the sheet (posters: the order as it is priced, the proof): side by side on a wide screen, one after the other on a phone. */
.hp-prints__check { display: grid; gap: 1.5rem; }
.hp-prints__check > * { min-width: 0; }
@media (min-width: 960px) { .hp-prints__check { grid-template-columns: minmax(0, 1fr) 22rem; gap: 2rem; align-items: start; } .hp-prints__side { position: sticky; top: 6rem; } }
.hp-prints__bar-sub { display: block; margin-top: 0.1rem; font-size: 0.85rem; font-weight: 400; color: var(--c-quiet); }