/* The configurator. Uses the theme's tokens where they exist and plain values where they do not. */

.hp-config { --c-ink: var(--wp--preset--color--ink, #15181F); --c-body: var(--wp--preset--color--body, #3A3F4A); --c-quiet: var(--wp--preset--color--quiet, #767C89); --c-line: var(--wp--preset--color--line, #E4E2DC); --c-line-strong: var(--wp--preset--color--line-strong, #CFCCC4); --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-display: var(--wp--preset--font-family--display, Georgia, serif); }
.hp-config fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.hp-config__legend { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--c-quiet); margin: 0 0 0.75rem; padding: 0; }
.hp-config__presets { margin-bottom: 2rem; }
.hp-config__preset-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; }
.hp-preset {
  display: grid; gap: 0.2rem; text-align: left; cursor: pointer; font: inherit;
  background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 16px; padding: 1rem 1.1rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.hp-preset:hover { border-color: var(--c-line-strong); transform: translateY(-1px); }
.hp-preset.is-selected { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.hp-preset__name { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.15; }
.hp-preset__text { font-size: 0.82rem; color: var(--c-quiet); line-height: 1.4; }
.hp-preset__price { font-size: 0.9rem; font-weight: 500; margin-top: 0.35rem; }

.hp-config__groups { border-top: 1px solid var(--c-line); }
.hp-config__groups > .hp-config__legend { margin-top: 1.25rem; }
.hp-group { border-bottom: 1px solid var(--c-line); }
.hp-group__summary { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0; cursor: pointer; list-style: none; }
.hp-group__summary::-webkit-details-marker { display: none; }
.hp-group__name { font-weight: 500; color: var(--c-ink); min-width: 6rem; }
.hp-group__value { color: var(--c-body); flex: 1; }
.hp-group__chevron { width: 0.55rem; height: 0.55rem; border-right: 1.5px solid var(--c-quiet); border-bottom: 1.5px solid var(--c-quiet); transform: rotate(45deg); transition: transform 160ms ease; margin-right: 0.25rem; }
.hp-group[open] .hp-group__chevron { transform: rotate(-135deg); }
.hp-group__text { font-size: 0.9rem; color: var(--c-quiet); margin: 0 0 0.75rem; }
.hp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; padding: 0.25rem 0 1.25rem; }
.hp-tiles--quantity { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.hp-tile {
  display: grid; gap: 0.15rem; align-content: start; text-align: left; cursor: pointer; font: inherit;
  background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 14px; padding: 0.8rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.hp-tile:hover { border-color: var(--c-line-strong); }
.hp-tile.is-selected { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.hp-tile.is-unavailable { opacity: 0.45; }
.hp-tile__swatch { display: block; aspect-ratio: 3 / 2; border-radius: 10px; margin-bottom: 0.5rem; border: 1px solid rgba(21, 24, 31, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); background: #eee; }
.hp-tile__label { font-weight: 500; font-size: 0.95rem; line-height: 1.25; }
.hp-tiles--quantity .hp-tile__label { font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; }
.hp-tile__text { font-size: 0.8rem; color: var(--c-quiet); line-height: 1.35; }
.hp-tile__price { font-size: 0.82rem; color: var(--c-body); margin-top: 0.25rem; min-height: 1.1em; }
.hp-tile.is-selected .hp-tile__price { color: var(--c-ink); }

/* Swatch fills, the same set the theme's materials row uses (the theme defines them; these are
   the fallback so the plugin works with any theme). */
.hp-swatch__chip--uncoated { background: linear-gradient(160deg, #fdfdfb, #f1f0ec); }
.hp-swatch__chip--cotton { background: radial-gradient(circle at 30% 30%, #ffffff, #f4f2ec 70%); }
.hp-swatch__chip--cream { background: linear-gradient(160deg, #f8f2e4, #ede4cf); }
.hp-swatch__chip--kraft { background: linear-gradient(160deg, #c8a97c, #b08e5f); }
.hp-swatch__chip--black { background: linear-gradient(160deg, #2a2d34, #131519); }
.hp-swatch__chip--soft-touch { background: linear-gradient(160deg, #e9e6ef, #d7d3df); }
.hp-swatch__chip--gloss { background: linear-gradient(135deg, #ffffff 0%, #eef0f4 40%, #ffffff 55%, #dfe3ea 100%); }
.hp-swatch__chip--foil { background: linear-gradient(135deg, #f3e2a6 0%, #c9a24a 35%, #f7ecc2 50%, #b8892f 70%, #e9cf7a 100%); }
.hp-swatch__chip--none { background: repeating-linear-gradient(45deg, #f4f3f0 0 6px, #e9e7e2 6px 8px); }

.hp-config .variations.hp-config__selects { visibility: hidden; position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hp-config .variations.hp-config__selects .reset_variations { visibility: hidden !important; } /* WooCommerce sets it visible inline */

.hp-config__buy { margin-top: 1.5rem; display: grid; gap: 1rem; }
.hp-config__total { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: baseline; }
.hp-config__total-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--c-quiet); grid-column: 1 / -1; }
.hp-config__total-price { font-weight: 700; font-size: 2.25rem; letter-spacing: -0.03em; line-height: 1; color: var(--c-ink); }
.hp-config__total-price.is-empty { font-family: inherit; font-size: 1rem; color: var(--c-quiet); }
.hp-config__total-each { color: var(--c-quiet); }
.hp-config .single_variation .woocommerce-variation-price { display: none; } /* the total above replaces it */
.hp-config .woocommerce-variation-availability { font-size: 0.9rem; color: var(--c-quiet); }
.hp-config .woocommerce-variation-add-to-cart { display: flex; gap: 0.75rem; align-items: center; }
.hp-config .quantity .qty { width: 4.5rem; text-align: center; }
.hp-config .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1; }
@media (max-width: 480px) { .hp-config__preset-row { grid-template-columns: 1fr; } }

/* Number options: a stepper. */
.hp-number { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0 1.25rem; flex-wrap: wrap; }
.hp-number__step { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 1.25rem; cursor: pointer; }
.hp-number__step:hover { border-color: var(--c-ink); }
.hp-number__input { width: 6.5rem; font: inherit; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; text-align: center; color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; padding: 0.4rem 0.5rem; }
.hp-number__input:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-soft); }
.hp-number__unit { color: var(--c-quiet); }
.hp-number__range { color: var(--c-quiet); font-size: 0.85rem; flex-basis: 100%; }
.hp-config__grid-buy .single_add_to_cart_button { width: 100%; }
.hp-config__grid-buy .single_add_to_cart_button.disabled { opacity: 0.5; cursor: not-allowed; }

/* Templates, artwork and instructions. */
.hp-config__extras { display: grid; gap: 1.5rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); }
.hp-config__templates { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.hp-config__template { font-weight: 500; color: var(--c-brand); text-decoration: none; }
.hp-config__template:hover { text-decoration: underline; }
.hp-artwork__hint { margin: 0.25rem 0 0.75rem; color: var(--c-quiet); font-size: 0.9rem; }
.hp-artwork__drop { display: block; position: relative; border: 1.5px dashed var(--c-line-strong); border-radius: 14px; padding: 1.5rem 1rem; text-align: center; color: var(--c-quiet); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.hp-artwork__drop:hover, .hp-artwork__drop.is-over { border-color: var(--c-ink); background: var(--c-tile); color: var(--c-ink); }
.hp-artwork__file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hp-artwork__list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.5rem; }
.hp-artwork__item { display: grid; grid-template-columns: 1fr auto auto; gap: 0.25rem 0.75rem; align-items: center; background: var(--c-tile); border-radius: 12px; padding: 0.7rem 0.9rem; font-size: 0.92rem; }
.hp-artwork__name { font-weight: 500; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-artwork__meta { color: var(--c-quiet); white-space: nowrap; }
.hp-artwork__bar { grid-column: 1 / -1; display: block; height: 3px; background: var(--c-line); border-radius: 999px; overflow: hidden; }
.hp-artwork__bar span { display: block; height: 100%; width: 0; background: var(--c-ink); transition: width 200ms ease; }
.hp-artwork__warn { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; color: #8A5A00; }
.hp-artwork__item.is-failed .hp-artwork__warn { color: #C54E60; }
.hp-artwork__remove { background: none; border: 0; padding: 0; font: inherit; font-size: 0.85rem; color: var(--c-quiet); cursor: pointer; }
.hp-artwork__remove:hover { color: #C54E60; }
.hp-config__notes { display: grid; gap: 0.5rem; }
.hp-config__notes textarea { width: 100%; box-sizing: border-box; min-height: 4.5rem; font: inherit; color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; padding: 0.75rem 1rem; resize: vertical; }
.hp-config__notes textarea:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-soft); }

/* The order page's own sections (files, proofs, messages) sit outside .hp-config and .hp-prints:
   they carry the same color tokens, so an upload area draws its dashed box and a line its tile. */
.hp-order-artwork, .hp-proofs, .hp-messages { --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); }

/* Artwork on the order page. */
.hp-order-artwork { margin-top: 1.5rem; }
.hp-order-artwork h2 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.hp-order-artwork__line { background: var(--c-tile); border-radius: 16px; padding: 1rem 1.25rem; margin-bottom: 0.75rem; }
.hp-order-artwork__line h3 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.hp-card-files__what { margin: -0.25rem 0 0.25rem; color: var(--c-body); overflow-wrap: anywhere; }
.hp-order-artwork .hp-artwork__list { margin-top: 0; }
.hp-order-artwork .hp-artwork__item { background: var(--c-surface); }
.hp-order-artwork .hp-artwork__drop { margin-top: 0.75rem; padding: 1rem; background: var(--c-surface); }

/* Proofs on the order page. */
.hp-proofs { margin-top: 1.5rem; }
.hp-proofs h2, .hp-messages h2 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.hp-proof { background: var(--c-tile, #F5F5F7); border-radius: 20px; padding: 1.25rem; margin-bottom: 1rem; }
.hp-proof--superseded { opacity: 0.6; }
.hp-proof__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.hp-proof__head h3 { font-size: 1.15rem; margin: 0; }
.hp-proof__line { font-weight: 400; color: var(--c-quiet, #6E6E73); }
.hp-proof__status { font-size: 0.85rem; font-weight: 500; color: var(--c-quiet, #6E6E73); }
.hp-proof--waiting .hp-proof__status { color: #8A5A00; }
.hp-proof--approved .hp-proof__status { color: #2F7D4F; }
.hp-proof__note { margin: 0.75rem 0 0; color: var(--c-body, #3A3A3E); }
.hp-proof__view { display: block; width: 100%; height: 32rem; margin-top: 1rem; border: 0; border-radius: 12px; background: #fff; }
.hp-proof__view--image { height: auto; }
.hp-proof__open { margin: 0.5rem 0 0; font-size: 0.9rem; }
.hp-proof__open a { color: var(--c-brand, #5B46C7); text-decoration: none; font-weight: 500; }
.hp-proof__decide { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--c-line, #E8E8ED); display: grid; gap: 0.75rem; }
.hp-proof__ask { margin: 0; color: var(--c-body, #3A3A3E); }
.hp-proof__confirm { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 500; color: var(--c-ink, #1D1D1F); }
.hp-proof__confirm input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; }
.hp-proof__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hp-proof__approve, .hp-proof__send-changes, .hp-messages__form button { font: inherit; font-weight: 500; color: #fff; background: var(--c-ink, #1D1D1F); border: 0; border-radius: 999px; padding: 0.75rem 1.4rem; cursor: pointer; }
.hp-proof__approve:hover, .hp-proof__send-changes:hover, .hp-messages__form button:hover { background: var(--c-brand, #5B46C7); }
.hp-proof__approve:disabled, .hp-messages__form button:disabled { opacity: 0.5; }
.hp-proof__toggle-changes { font: inherit; font-weight: 500; color: var(--c-ink, #1D1D1F); background: transparent; border: 1px solid var(--c-line-strong, #D2D2D7); border-radius: 999px; padding: 0.75rem 1.4rem; cursor: pointer; }
.hp-proof__changes { display: grid; gap: 0.6rem; }
.hp-proof__changes[hidden] { display: none; }
.hp-proof__changes textarea, .hp-messages__form textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--c-ink, #1D1D1F); background: #fff; border: 1px solid var(--c-line, #E8E8ED); border-radius: 12px; padding: 0.75rem 1rem; resize: vertical; }
.hp-proof__error, .hp-messages__error { margin: 0; min-height: 1.2em; color: #C54E60; font-size: 0.9rem; }
.hp-proof__decision { margin: 1rem 0 0; font-weight: 500; color: var(--c-ink, #1D1D1F); }

/* Messages on the order page. */
.hp-messages { margin-top: 1.5rem; }
.hp-messages__list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.6rem; }
.hp-message { max-width: 80%; background: var(--c-tile, #F5F5F7); border-radius: 16px; padding: 0.75rem 1rem; }
.hp-message--customer { margin-left: auto; background: var(--c-soft, #EDE9FC); }
.hp-message__who { font-weight: 600; font-size: 0.85rem; color: var(--c-ink, #1D1D1F); }
.hp-message__when { font-size: 0.8rem; color: var(--c-quiet, #6E6E73); margin-left: 0.5rem; }
.hp-message__text { margin: 0.25rem 0 0; color: var(--c-body, #3A3A3E); white-space: pre-line; }
.hp-messages__form { display: grid; gap: 0.6rem; }
.hp-messages__row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hp-messages__hint { font-size: 0.85rem; color: var(--c-quiet, #6E6E73); }
h2:has(+ .woocommerce-OrderUpdates), .woocommerce-OrderUpdates { display: none; } /* the thread above replaces WooCommerce's list */

/* Quotes in the account. */
.hp-quotes { width: 100%; border-collapse: collapse; }
.hp-quotes th, .hp-quotes td { text-align: left; padding: 0.8rem 0.75rem; border-bottom: 1px solid var(--c-line, #E8E8ED); vertical-align: middle; }
.hp-quotes th { font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--c-quiet, #6E6E73); }
.hp-quotes a, .hp-quote__back a { color: var(--c-brand, #5B46C7); text-decoration: none; font-weight: 500; }
.hp-quote__num { text-align: right !important; }
.hp-quote__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.hp-quote__head h2 { margin: 0; }
.hp-quote__status { font-weight: 500; color: var(--c-quiet, #6E6E73); }
.hp-quote--sent .hp-quote__status { color: #8A5A00; }
.hp-quote--accepted .hp-quote__status { color: #2F7D4F; }
.hp-quote__meta { color: var(--c-quiet, #6E6E73); margin: 0.25rem 0 1rem; }
.hp-quote__note { background: var(--c-tile, #F5F5F7); border-radius: 16px; padding: 1rem 1.25rem; margin: 0 0 1.25rem; }
.hp-quote__lines { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.hp-quote__lines th, .hp-quote__lines td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--c-line, #E8E8ED); }
.hp-quote__lines th { font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--c-quiet, #6E6E73); }
.hp-quote__lines tfoot td { border-bottom: 0; font-weight: 600; color: var(--c-ink, #1D1D1F); }
.hp-quote__total { font-size: 1.35rem; }
.hp-quote__payment { color: var(--c-quiet, #6E6E73); font-size: 0.95rem; }
.hp-quote__decide { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--c-line, #E8E8ED); display: grid; gap: 0.75rem; }
.hp-quote__agree { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 500; color: var(--c-ink, #1D1D1F); }
.hp-quote__agree input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; }
.hp-quote__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hp-quote__accept, .hp-quote__send-decline { font: inherit; font-weight: 500; color: #fff; background: var(--c-ink, #1D1D1F); border: 0; border-radius: 999px; padding: 0.75rem 1.4rem; cursor: pointer; }
.hp-quote__accept:hover, .hp-quote__send-decline:hover { background: var(--c-brand, #5B46C7); }
.hp-quote__accept:disabled { opacity: 0.5; }
.hp-quote__toggle-decline { font: inherit; font-weight: 500; color: var(--c-ink, #1D1D1F); background: transparent; border: 1px solid var(--c-line-strong, #D2D2D7); border-radius: 999px; padding: 0.75rem 1.4rem; cursor: pointer; }
.hp-quote__decline-box { display: grid; gap: 0.6rem; }
.hp-quote__decline-box[hidden] { display: none; }
.hp-quote__decline-box textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--c-ink, #1D1D1F); background: #fff; border: 1px solid var(--c-line, #E8E8ED); border-radius: 12px; padding: 0.75rem 1rem; resize: vertical; }
.hp-quote__error { margin: 0; min-height: 1.2em; color: #C54E60; font-size: 0.9rem; }
.hp-quote__decision { font-weight: 500; color: var(--c-ink, #1D1D1F); margin-top: 1rem; }
.hp-quote__decision a { color: var(--c-brand, #5B46C7); text-decoration: none; }

/* The account: the dashboard, the files, the orders list's flags. */
.hp-dash { display: grid; gap: 1rem; }
.hp-dash__head h2 { font-size: var(--wp--preset--font-size--xx-large, 2.25rem); margin: 0 0 0.25rem; letter-spacing: -0.02em; }
.hp-dash__lede { color: var(--wp--preset--color--quiet); margin: 0 0 0.5rem; font-size: 1.1rem; }
.hp-dash__tile { background: var(--wp--preset--color--surface, #fff); border-radius: 20px; padding: 1.5rem 1.75rem; }
.hp-dash__tile h3 { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--quiet); margin: 0 0 0.75rem; }
.hp-dash__tile--attention { background: var(--wp--preset--color--brand-soft, #EFEBFF); }
.hp-dash__list, .hp-dash__orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.hp-dash__list a { font-weight: 500; color: var(--wp--preset--color--ink); text-decoration: none; font-size: 1.1rem; }
.hp-dash__list a:hover { text-decoration: underline; }
.hp-dash__order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 1rem; text-decoration: none; color: var(--wp--preset--color--ink); padding: 0.75rem 0; border-top: 1px solid var(--wp--preset--color--line, #E5E5EA); }
.hp-dash__orders li:first-child .hp-dash__order { border-top: 0; padding-top: 0; }
.hp-dash__order-what { grid-column: 1; font-weight: 500; }
.hp-dash__order-meta { grid-column: 1; }
.hp-dash__order-where { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--wp--preset--color--brand, #5B46C7); font-weight: 500; white-space: nowrap; }
.hp-dash__order-meta, .hp-dash__empty { color: var(--wp--preset--color--quiet); font-size: 0.95rem; }
.hp-dash__more { margin: 1rem 0 0; display: flex; gap: 1.5rem; }
.hp-dash__more a { font-weight: 500; }
.hp-dash__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem; }
.hp-dash__tile--small { text-decoration: none; color: var(--wp--preset--color--ink); }
.hp-dash__tile--small:hover { background: var(--wp--preset--color--brand-soft, #EFEBFF); }
.hp-dash__tile--small p { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.hp-files { width: 100%; border-collapse: collapse; background: var(--wp--preset--color--surface, #fff); border-radius: 16px; overflow: hidden; }
.hp-files th { text-align: left; font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wp--preset--color--quiet); padding: 0.9rem 1rem; border-bottom: 1px solid var(--wp--preset--color--line, #E5E5EA); }
.hp-files td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--wp--preset--color--line, #E5E5EA); vertical-align: top; }
.hp-files td:nth-child(2) { white-space: nowrap; }
.hp-files tr:last-child td { border-bottom: 0; }
.hp-files__name { font-weight: 500; }
.hp-files__meta { display: block; color: var(--wp--preset--color--quiet); font-size: 0.85rem; }
.hp-files__loose { color: var(--wp--preset--color--quiet); }
.hp-files__actions { text-align: right; }
.hp-files__remove { min-height: 44px; background: none; border: 1px solid var(--wp--preset--color--line, #E5E5EA); border-radius: 999px; padding: 0.35rem 0.9rem; font: inherit; font-size: 0.9rem; cursor: pointer; color: var(--wp--preset--color--ink); }
.hp-files__remove:hover { border-color: var(--wp--preset--color--ink); }
/* On a phone each file is a block of its own: the name, when it was sent, what it is on, Remove. */
@media (max-width: 600px) {
  .hp-files, .hp-files tbody, .hp-files tr, .hp-files td { display: block; }
  .hp-files thead { display: none; }
  .hp-files tr { padding: 0.9rem 1rem; border-bottom: 1px solid var(--wp--preset--color--line, #E5E5EA); }
  .hp-files tr:last-child { border-bottom: 0; }
  .hp-files td { padding: 0; border: 0; }
  .hp-files td:nth-child(2), .hp-files td:nth-child(3) { margin-top: 0.35rem; font-size: 0.9rem; }
  .hp-files td[data-label]::before { content: attr(data-label) " "; color: var(--wp--preset--color--quiet); }
  .hp-files__actions { text-align: left; }
  .hp-files__actions:not(:empty) { margin-top: 0.5rem; }
}
.hp-files__lede, .hp-files__empty { color: var(--wp--preset--color--quiet); }
.hp-job__where { display: block; }
.hp-job__flag { display: block; color: var(--wp--preset--color--brand, #5B46C7); font-size: 0.9rem; font-weight: 500; }
.hp-artwork__reuse { display: inline-block; margin-top: 0.75rem; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--wp--preset--color--brand, #5B46C7); cursor: pointer; }
.hp-artwork__mine { margin-top: 0.75rem; padding: 1rem 1.25rem; background: var(--wp--preset--color--tile, #F5F5F7); border-radius: 16px; color: var(--wp--preset--color--quiet); font-size: 0.95rem; }
.hp-artwork__mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.hp-artwork__mine-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.hp-artwork__mine-use { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--wp--preset--color--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; }
.hp-artwork__item.is-reused { border-left: 3px solid var(--wp--preset--color--brand, #5B46C7); }

/* A photo print's line on the order page: the photo's thumbnail before its name. */
.hp-artwork__item:has(> .hp-prints__cart-thumb) { grid-template-columns: auto 1fr auto auto; }
.hp-prints__cart-thumb { width: 3rem; height: 3rem; object-fit: cover; border-radius: 8px; display: block; }
/* A file the site no longer has (includes/retention.php): "Kept at the press" on a line of its own, under its name. */
.hp-artwork__gone { grid-column: 1 / -1; color: var(--wp--preset--color--quiet, #6E6E73); font-size: 0.85rem; }
.hp-artwork__item:has(> .hp-prints__cart-thumb) .hp-artwork__gone { grid-column: 2 / -1; margin-top: -0.25rem; }