/* ==========================================================================
   PrintiBeaver -- Design System v2 shared components (Mission 72, ds)
   Reads ONLY tokens from pb-tokens.css (no literal colour; the Mission 72
   source-contract test scans this file). Logical properties everywhere
   (RTL first); every interactive element: 44px target, dark 2px focus ring.
   Razor partials: Views/Shared/DesignSystem/*.cshtml; JS: Content/js/pb-ds.js.
   Documentation: docs/MISSION72/DESIGN_SYSTEM_V2_COMPONENTS_HE.md
   ========================================================================== */

/* ---------- Icons: directional vs semantic ----------------------------------
   A directional icon (back / forward / chevron) mirrors in RTL; a semantic
   icon (heart, cart, search, star) never does. */
[dir="rtl"] .pb-icon-directional { transform: scaleX(-1); }
.pb-icon-semantic { transform: none !important; }

/* ---------- Visually hidden (screen readers only) ---------- */
.pb-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Fields: label always visible, required in text + aria-required,
   inline error with aria-describedby, value kept after an error ---------- */
.pb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--pb-space-4); min-width: 0; }
.pb-field-label { font-size: var(--pb-text-body-s); font-weight: var(--pb-weight-semibold); color: var(--pb-color-text); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.pb-field-required { color: var(--pb-color-text-muted); font-weight: var(--pb-weight-regular); font-size: var(--pb-text-caption); }
.pb-field-hint { font-size: var(--pb-text-body-s); color: var(--pb-color-text-muted); margin: 0; }
.pb-field-error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--pb-text-body-s); color: var(--pb-status-error); font-weight: var(--pb-weight-semibold); margin: 0; }
.pb-field-error svg { flex-shrink: 0; margin-top: 2px; }
.pb-field-error:empty { display: none; }
.pb-input, .pb-textarea, .pb-select {
    width: 100%; min-height: var(--pb-h-input); padding: 10px var(--pb-space-4);
    border: 1px solid var(--pb-color-border-muted); border-radius: var(--pb-radius-control);
    background: var(--pb-color-surface); color: var(--pb-color-text);
    font: inherit; font-size: var(--pb-text-body); line-height: var(--pb-lh-body);
}
.pb-textarea { min-height: var(--pb-h-textarea-min); resize: vertical; }
.pb-input:focus, .pb-textarea:focus, .pb-select:focus { outline: none; border-color: var(--pb-color-focus); box-shadow: 0 0 0 1px var(--pb-color-focus); }
.pb-input::placeholder, .pb-textarea::placeholder { color: var(--pb-color-text-muted); opacity: 1; }
.pb-input:disabled, .pb-textarea:disabled, .pb-select:disabled { background: var(--pb-color-surface-disabled); color: var(--pb-color-text-disabled); border-color: var(--pb-color-border); cursor: not-allowed; }
.pb-field--invalid .pb-input, .pb-field--invalid .pb-textarea, .pb-field--invalid .pb-select,
.pb-input[aria-invalid="true"], .pb-textarea[aria-invalid="true"], .pb-select[aria-invalid="true"] { border-color: var(--pb-status-error); box-shadow: 0 0 0 1px var(--pb-status-error); }
/* select: the chevron follows the writing direction (inset-inline-end) */
.pb-select {
    appearance: none; -webkit-appearance: none;
    padding-inline-end: calc(var(--pb-space-4) + 24px);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: 20px; background-position: left var(--pb-space-3) center;
}
[dir="ltr"] .pb-select { background-position: right var(--pb-space-3) center; }
.pb-select:disabled { background-image: none; }

/* checkbox / radio: 20px visual, 44px target */
.pb-check, .pb-radio { display: inline-flex; align-items: center; gap: var(--pb-space-3); min-height: var(--pb-touch-target); padding: 4px 2px; cursor: pointer; font-size: var(--pb-text-body); color: var(--pb-color-text); }
.pb-check input, .pb-radio input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--pb-color-action); cursor: pointer; }
.pb-check input:focus-visible, .pb-radio input:focus-visible { outline: 2px solid var(--pb-color-focus); outline-offset: 2px; }
.pb-check input:disabled, .pb-radio input:disabled { cursor: not-allowed; }
.pb-check input:disabled ~ *, .pb-radio input:disabled ~ * { color: var(--pb-color-text-disabled); }
.pb-choice-group { display: flex; flex-direction: column; gap: 2px; border: 0; margin: 0; padding: 0; min-width: 0; }
.pb-choice-group > legend { font-size: var(--pb-text-body-s); font-weight: var(--pb-weight-semibold); padding: 0; margin-bottom: 4px; }
.pb-choice-group--row { flex-direction: row; flex-wrap: wrap; gap: 4px var(--pb-space-4); }

/* switch 44x24 with a fixed label; state also in text (data-on / data-off) */
.pb-switch { display: inline-flex; align-items: center; gap: var(--pb-space-3); min-height: var(--pb-touch-target); cursor: pointer; font-size: var(--pb-text-body); }
.pb-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.pb-switch-track { position: relative; width: var(--pb-w-switch); height: var(--pb-h-switch); border-radius: var(--pb-radius-pill); background: var(--pb-color-border-muted); flex-shrink: 0; transition: background-color var(--pb-motion-fast) var(--pb-ease); }
.pb-switch-track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--pb-color-surface); transition: transform var(--pb-motion-fast) var(--pb-ease); }
.pb-switch input:checked ~ .pb-switch-track { background: var(--pb-color-action); }
.pb-switch input:checked ~ .pb-switch-track::after { transform: translateX(20px); }
[dir="rtl"] .pb-switch input:checked ~ .pb-switch-track::after { transform: translateX(-20px); }
.pb-switch input:focus-visible ~ .pb-switch-track { outline: 2px solid var(--pb-color-focus); outline-offset: 2px; }
.pb-switch input:disabled ~ .pb-switch-track { background: var(--pb-color-surface-disabled); }
.pb-switch input:disabled ~ .pb-switch-track::after { background: var(--pb-color-text-disabled); }
.pb-switch-state { font-size: var(--pb-text-body-s); color: var(--pb-color-text-muted); min-width: 3em; }
.pb-switch input:checked ~ .pb-switch-state::before { content: attr(data-on); }
.pb-switch input:not(:checked) ~ .pb-switch-state::before { content: attr(data-off); }

/* search bar 56 / 64: ONE container, clear button + submit */
.pb-search-bar { display: flex; align-items: center; gap: var(--pb-space-2); height: var(--pb-h-search); padding-inline: var(--pb-space-4) 6px; border: 1px solid var(--pb-color-border-muted); border-radius: var(--pb-radius-pill); background: var(--pb-color-surface); max-width: 720px; }
.pb-search-bar:focus-within { border-color: var(--pb-color-focus); box-shadow: 0 0 0 1px var(--pb-color-focus); }
.pb-search-bar > svg { color: var(--pb-color-text-muted); flex-shrink: 0; width: 20px; height: 20px; }
.pb-search-bar input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--pb-text-body); color: var(--pb-color-text); height: 100%; }
.pb-search-bar input::-webkit-search-cancel-button { display: none; }
.pb-search-bar input:focus-visible { outline: none; }
.pb-search-bar .pb-search-clear { display: none; }
.pb-search-bar.pb-has-value .pb-search-clear { display: inline-flex; }
.pb-search-bar .pb-btn { min-height: calc(var(--pb-h-search) - 12px); }

/* stepper: +/- with range, explicit disabled; the value is a real input */
.pb-stepper { display: inline-flex; align-items: center; border: 1px solid var(--pb-color-border-muted); border-radius: var(--pb-radius-control); background: var(--pb-color-surface); min-height: var(--pb-h-button-md); overflow: hidden; }
.pb-stepper button { width: var(--pb-touch-target); min-height: var(--pb-h-button-md); border: 0; background: transparent; color: var(--pb-color-text); font: inherit; font-size: 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pb-stepper button:hover { background: var(--pb-color-surface-subtle); }
.pb-stepper button:focus-visible { outline: 2px solid var(--pb-color-focus); outline-offset: -3px; }
.pb-stepper button:disabled { color: var(--pb-color-text-disabled); background: var(--pb-color-surface-disabled); cursor: not-allowed; }
.pb-stepper input { width: 3.5em; min-height: 0; height: auto; border: 0; border-inline: 1px solid var(--pb-color-border); border-radius: 0; text-align: center; font: inherit; font-size: var(--pb-text-body); font-variant-numeric: tabular-nums; padding: 8px 4px; background: transparent; color: var(--pb-color-text); -moz-appearance: textfield; }
.pb-stepper input::-webkit-outer-spin-button, .pb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pb-stepper input:focus { outline: 2px solid var(--pb-color-focus); outline-offset: -2px; box-shadow: none; border-color: var(--pb-color-border); }

/* uploader: dropzone + real file input + preview list + limits text */
.pb-uploader { border: 2px dashed var(--pb-color-border-muted); border-radius: var(--pb-radius-card); padding: var(--pb-space-6) var(--pb-space-4); text-align: center; background: var(--pb-color-surface-subtle); display: flex; flex-direction: column; align-items: center; gap: var(--pb-space-2); }
.pb-uploader.pb-is-over { border-color: var(--pb-color-action); background: var(--pb-color-action-soft); }
.pb-uploader:focus-within { outline: 2px solid var(--pb-color-focus); outline-offset: 2px; }
.pb-uploader svg { width: 32px; height: 32px; color: var(--pb-color-text-muted); }
.pb-uploader-limits { font-size: var(--pb-text-body-s); color: var(--pb-color-text-muted); margin: 0; }
.pb-uploader input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pb-uploader-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: start; }
.pb-uploader-list li { display: flex; align-items: center; gap: var(--pb-space-3); padding: 8px 12px; border: 1px solid var(--pb-color-border); border-radius: var(--pb-radius-control); background: var(--pb-color-surface); font-size: var(--pb-text-body-s); }
.pb-uploader-list img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.pb-uploader-list .pb-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
.pb-uploader-list .pb-file-size { color: var(--pb-color-text-muted); font-variant-numeric: tabular-nums; }
.pb-uploader-list li.pb-is-rejected { border-color: var(--pb-status-error); color: var(--pb-status-error); }

/* ---------- Product / catalog card (.pb-feed-card is the stable name the E2E reads; these add the v2 lines) ---------- */
.pb-feed-card-media { box-shadow: none; border-radius: var(--pb-radius-media); background: var(--pb-media-matte); }
.pb-card-line { font-size: var(--pb-text-body-s); color: var(--pb-color-text-muted); margin: 0; display: flex; gap: 6px; align-items: center; min-width: 0; }
.pb-card-line svg { flex-shrink: 0; width: 16px; height: 16px; }
.pb-card-line > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-feed-card-licence[data-licence] { font-weight: var(--pb-weight-medium); color: var(--pb-color-text); }
.pb-feed-card-heart { color: var(--pb-color-text); }
.pb-feed-card-heart:hover, .pb-feed-card-heart.pb-is-liked { color: var(--pb-action-text); }
.pb-feed-card:hover .pb-feed-card-media, .pb-feed-card:focus-within .pb-feed-card-media { box-shadow: var(--pb-shadow-card-theme); }
.pb-feed-card-heart:focus-visible { outline: 2px solid var(--pb-color-focus); outline-offset: 2px; }
.pb-feed-card-kind-badge { background: var(--pb-color-surface); border: 1px solid var(--pb-color-border); color: var(--pb-color-text); backdrop-filter: none; }
.pb-feed-card-kind-label { font-size: var(--pb-text-body-s); color: var(--pb-color-text-muted); }
.pb-feed-card-variant { background: var(--pb-color-surface-subtle); color: var(--pb-color-text); font-size: var(--pb-text-caption); }
.pb-feed-card-cta { color: var(--pb-color-link); font-size: var(--pb-text-body-s); min-height: var(--pb-touch-target); display: inline-flex; align-items: center; }
.pb-feed-card .pb-m71-badge { box-shadow: none; border: 1px solid var(--pb-color-border); }
.pb-feed-card .pb-m71-badge-new { background: var(--pb-color-action); color: var(--pb-color-text-on-action); border-color: var(--pb-color-action); }
.pb-feed-card .pb-m71-badge-popular { background: var(--pb-color-action-soft); color: var(--pb-color-text); }
/* image error / missing: a neutral surface with the kind icon, never the browser's broken image */
.pb-feed-card-media.pb-img-error img, .pb-media-error img { display: none; }
.pb-feed-card-media.pb-img-error::before, .pb-media-error::before { content: ""; position: absolute; inset: 0; background: var(--pb-color-surface-subtle); }
.pb-feed-card-media.pb-img-error > .pb-media-fallback, .pb-media-error > .pb-media-fallback { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--pb-color-text-muted); font-size: var(--pb-text-body-s); }
.pb-media-fallback { display: none; }

/* ---------- Gallery: hero + thumbnails (desktop), swipe (mobile), zoom, skeleton, image error ---------- */
.pb-gallery { display: flex; flex-direction: column; gap: var(--pb-space-2); min-width: 0; }
.pb-gallery-hero { position: relative; aspect-ratio: 1; border-radius: var(--pb-radius-media); overflow: hidden; background: var(--pb-color-surface-subtle); display: flex; align-items: center; justify-content: center; }
.pb-gallery-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-gallery-hero.pb-is-loading img { opacity: 0; }
.pb-gallery-hero.pb-is-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--pb-color-skeleton) 25%, var(--pb-color-skeleton-highlight) 50%, var(--pb-color-skeleton) 75%); background-size: 200% 100%; animation: pb-sk-shimmer 1.2s linear infinite; }
.pb-gallery-zoom { position: absolute; inset-inline-end: var(--pb-space-2); bottom: var(--pb-space-2); z-index: 2; }
.pb-gallery-thumbs { display: flex; gap: var(--pb-space-2); overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px; scrollbar-width: thin; }
.pb-gallery-thumb { flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: var(--pb-radius-control); background: var(--pb-color-surface-subtle); overflow: hidden; cursor: pointer; scroll-snap-align: start; }
.pb-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-gallery-thumb.is-active, .pb-gallery-thumb[aria-current="true"] { border-color: var(--pb-color-text); }
.pb-gallery-thumb:focus-visible { outline: 2px solid var(--pb-color-focus); outline-offset: 2px; }
@media (max-width: 767px) {
    /* swipe: the hero becomes a snapping strip of every image; thumbnails hidden, dots instead */
    .pb-gallery--swipe .pb-gallery-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; border-radius: var(--pb-radius-card); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .pb-gallery--swipe .pb-gallery-strip::-webkit-scrollbar { display: none; }
    .pb-gallery--swipe .pb-gallery-strip > .pb-gallery-hero { flex: 0 0 100%; scroll-snap-align: center; border-radius: 0; }
    .pb-gallery--swipe .pb-gallery-thumbs { display: none; }
}
.pb-gallery-dots { display: flex; justify-content: center; gap: 6px; }
.pb-gallery-dots button { width: 24px; height: 24px; border: 0; background: transparent; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pb-gallery-dots button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pb-color-border-muted); }
.pb-gallery-dots button[aria-current="true"]::after { background: var(--pb-color-text); width: 10px; height: 10px; }
.pb-gallery-dots button:focus-visible { outline: 2px solid var(--pb-color-focus); outline-offset: 0; border-radius: 50%; }
@media (min-width: 768px) { .pb-gallery-dots { display: none; } }
.pb-zoom-dialog { max-width: min(96vw, 1200px); max-height: 96vh; padding: 0; border: 1px solid var(--pb-color-border-strong); border-radius: var(--pb-radius-dialog); background: var(--pb-color-surface-subtle); }
.pb-zoom-dialog img { max-width: 96vw; max-height: 90vh; display: block; object-fit: contain; }
.pb-zoom-dialog .pb-zoom-close { position: absolute; top: var(--pb-space-2); inset-inline-end: var(--pb-space-2); }

/* ---------- Modal / drawer (native <dialog>: focus trap + Escape by the browser; pb-ds.js returns focus) ---------- */
.pb-modal { border: 1px solid var(--pb-color-border-strong); padding: 0; background: var(--pb-color-surface-subtle); color: var(--pb-color-text); border-radius: var(--pb-radius-dialog); width: min(100vw - 32px, 600px); max-height: min(85dvh, 760px); box-shadow: var(--pb-shadow-modal); }
.pb-modal--sm { width: min(100vw - 32px, 440px); }
.pb-modal::backdrop { background: var(--pb-color-backdrop); }
.pb-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pb-space-3); padding: var(--pb-space-5) var(--pb-space-6) 0; }
.pb-modal-head h2 { margin: 0; font-size: var(--pb-text-h2); line-height: var(--pb-lh-h2); font-weight: var(--pb-weight-h2); }
.pb-modal-body { padding: var(--pb-space-4) var(--pb-space-6); overflow-y: auto; max-height: calc(85dvh - 170px); }
.pb-modal-foot { display: flex; gap: var(--pb-space-2); justify-content: flex-end; flex-wrap: wrap; padding: 0 var(--pb-space-6) var(--pb-space-5); }
.pb-modal-foot .pb-btn { min-width: 120px; }
@media (max-width: 767px) {
    /* bottom sheet */
    .pb-modal, .pb-modal--sm { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--pb-radius-modal) var(--pb-radius-modal) 0 0; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .pb-modal-foot { flex-direction: column-reverse; }
    .pb-modal-foot .pb-btn { width: 100%; }
}
.pb-drawer { border: 0; border-inline-start: 1px solid var(--pb-color-border-strong); padding: 0; background: var(--pb-color-surface-subtle); color: var(--pb-color-text); width: min(100vw, 460px); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; inset-inline-start: auto; inset-inline-end: 0; box-shadow: var(--pb-shadow-overlay); display: none; flex-direction: column; }
.pb-drawer[open] { display: flex; }
.pb-drawer::backdrop { background: var(--pb-color-backdrop); }
.pb-drawer .pb-modal-body { flex: 1 1 auto; max-height: none; }
@media (max-width: 767px) {
    .pb-drawer { width: 100vw; height: auto; max-height: 92dvh; inset-inline: 0; margin: auto 0 0; border-radius: var(--pb-radius-modal) var(--pb-radius-modal) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
.pb-modal[open], .pb-drawer[open] { animation: pb-fade-in var(--pb-motion-base) var(--pb-ease); }
@keyframes pb-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Banner: icon + explicit title + text + action; a start border as the non-colour pattern ---------- */
.pb-banner { display: flex; gap: var(--pb-space-3); align-items: flex-start; padding: var(--pb-space-3) var(--pb-space-4); border: 1px solid var(--pb-color-border); border-inline-start-width: 4px; border-radius: var(--pb-radius-control); background: var(--pb-color-surface-subtle); color: var(--pb-color-text); margin: 0 0 var(--pb-space-4); }
.pb-banner svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; }
.pb-banner-body { flex: 1 1 auto; min-width: 0; }
.pb-banner-title { display: block; font-weight: var(--pb-weight-bold); margin: 0 0 2px; }
.pb-banner-text { margin: 0; }
.pb-banner-actions { display: flex; gap: var(--pb-space-2); flex-wrap: wrap; margin-top: var(--pb-space-2); }
.pb-banner-close { flex-shrink: 0; margin-inline-start: auto; }
.pb-banner--info { border-inline-start-color: var(--pb-status-info); background: var(--pb-status-info-soft); }
.pb-banner--info svg { color: var(--pb-status-info); }
.pb-banner--neutral { border-inline-start-color: var(--pb-status-neutral); background: var(--pb-status-neutral-soft); }
.pb-banner--success { border-inline-start-color: var(--pb-status-success); background: var(--pb-status-success-soft); }
.pb-banner--success svg { color: var(--pb-status-success); }
.pb-banner--warning { border-inline-start-color: var(--pb-status-warning); border-inline-start-style: double; border-inline-start-width: 6px; background: var(--pb-status-warning-soft); }
.pb-banner--warning svg { color: var(--pb-status-warning); }
.pb-banner--error { border-inline-start-color: var(--pb-status-error); border-inline-start-style: dashed; background: var(--pb-status-error-soft); }
.pb-banner--error svg { color: var(--pb-status-error); }
/* the layout's flash banners (FlashHelper) keep their ids / .pb-success .pb-error classes and gain the v2 shape */
.pb-success.pb-banner, .pb-error.pb-banner { color: var(--pb-color-text); font-size: var(--pb-text-body); padding: var(--pb-space-3) var(--pb-space-4); }
.pb-error.pb-banner { border-inline-start: 4px dashed var(--pb-status-error); }

/* ---------- Toast: RTL-aware corner, auto-dismiss only for information ---------- */
.pb-toast-region { position: fixed; inset-inline-end: var(--pb-space-4); bottom: calc(var(--pb-space-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--pb-z-toast); display: flex; flex-direction: column; gap: var(--pb-space-2); max-width: min(420px, calc(100vw - 32px)); }
@media (max-width: 767px) { .pb-toast-region { bottom: calc(var(--pb-h-bottomnav) + var(--pb-space-3) + env(safe-area-inset-bottom, 0px)); inset-inline: var(--pb-space-4); max-width: none; } }
.pb-toast { display: flex; align-items: flex-start; gap: var(--pb-space-3); padding: var(--pb-space-3) var(--pb-space-4); border-radius: var(--pb-radius-card); background: var(--pb-color-surface-subtle); color: var(--pb-color-text); border: 1px solid var(--pb-color-border-strong); box-shadow: var(--pb-shadow-dropdown); animation: pb-fade-in var(--pb-motion-base) var(--pb-ease); }
.pb-toast svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.pb-toast-body { flex: 1 1 auto; min-width: 0; font-size: var(--pb-text-body-s); line-height: var(--pb-lh-body-s); }
.pb-toast-title { display: block; font-weight: var(--pb-weight-bold); }
.pb-toast--info { background: var(--pb-status-info-soft); } .pb-toast--info svg { color: var(--pb-status-info); }
.pb-toast--error { background: var(--pb-status-error-soft); border-inline-start: 4px dashed var(--pb-status-error); } .pb-toast--error svg { color: var(--pb-status-error); }
.pb-toast--warning { background: var(--pb-status-warning-soft); border-inline-start: 6px double var(--pb-status-warning); } .pb-toast--warning svg { color: var(--pb-status-warning); }
.pb-toast--success { background: var(--pb-status-success-soft); border-inline-start: 4px solid var(--pb-status-success); } .pb-toast--success svg { color: var(--pb-status-success); }

/* ---------- Tooltip: opens on hover AND keyboard focus; never the only explanation ---------- */
.pb-tip { position: relative; }
.pb-tip > .pb-tip-text { position: absolute; z-index: var(--pb-z-tooltip); inset-inline-start: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); background: var(--pb-color-surface-subtle); color: var(--pb-color-text); border: 1px solid var(--pb-color-border-strong); box-shadow: var(--pb-shadow-dropdown); padding: 6px 10px; border-radius: var(--pb-radius-xs); font-size: var(--pb-text-body-s); line-height: var(--pb-lh-body-s); white-space: normal; width: max-content; max-width: min(280px, 80vw); opacity: 0; visibility: hidden; transition: opacity var(--pb-motion-fast) var(--pb-ease); pointer-events: none; text-align: center; }
[dir="rtl"] .pb-tip > .pb-tip-text { transform: translateX(50%); }
.pb-tip:hover > .pb-tip-text, .pb-tip:focus-within > .pb-tip-text, .pb-tip.pb-is-open > .pb-tip-text { opacity: 1; visibility: visible; }
.pb-tip-trigger { display: inline-flex; align-items: center; justify-content: center; width: var(--pb-touch-target); height: var(--pb-touch-target); border: 0; background: transparent; color: var(--pb-color-text-muted); cursor: help; border-radius: 50%; }
.pb-tip-trigger:hover { color: var(--pb-color-text); }
.pb-tip-trigger:focus-visible { outline: 2px solid var(--pb-color-focus); outline-offset: 2px; }

/* ---------- Skeletons (reduced motion: no shimmer) ---------- */
.pb-sk { display: block; background: var(--pb-color-skeleton); border-radius: var(--pb-radius-xs); position: relative; overflow: hidden; }
.pb-sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--pb-color-skeleton-highlight) 50%, transparent 100%); transform: translateX(-100%); animation: pb-sk-sweep 1.4s var(--pb-ease) infinite; }
.pb-sk-line { height: 14px; margin: 6px 0; }
.pb-sk-line--short { width: 55%; }
.pb-sk-title { height: 20px; width: 70%; margin: 8px 0; }
.pb-sk-block { aspect-ratio: 1; border-radius: var(--pb-radius-card); }
.pb-sk-circle { width: 44px; height: 44px; border-radius: 50%; }
.pb-sk-button { height: var(--pb-h-button-md); width: 140px; border-radius: var(--pb-radius-control); }
.pb-sk-card { display: flex; flex-direction: column; gap: 4px; }
@keyframes pb-sk-sweep { to { transform: translateX(100%); } }
@keyframes pb-sk-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .pb-sk::after, .pb-gallery-hero.pb-is-loading::after { animation: none; }
    .pb-modal[open], .pb-drawer[open], .pb-toast { animation: none; }
}

/* ---------- Empty / error states: icon + title + text + a way forward ---------- */
.pb-state-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--pb-space-2); padding: var(--pb-space-8) var(--pb-space-4); max-width: 480px; margin-inline: auto; color: var(--pb-color-text-muted); }
.pb-state-card svg { width: 40px; height: 40px; color: var(--pb-color-text-muted); }
.pb-state-card--error svg { color: var(--pb-status-error); }
.pb-state-card-title { margin: 0; font-size: var(--pb-text-h4); font-weight: var(--pb-weight-semibold); color: var(--pb-color-text); }
.pb-state-card-text { margin: 0; max-width: 40ch; }
.pb-state-card-actions { display: flex; gap: var(--pb-space-2); flex-wrap: wrap; justify-content: center; margin-top: var(--pb-space-2); }

/* ---------- Navigation: header 76 / 60, bottom nav with safe area (base in site.css) ---------- */
.pb-header-row { height: var(--pb-h-header); }
.pb-topnav a { min-height: var(--pb-touch-target); display: inline-flex; align-items: center; padding-inline: 4px; border-bottom: 2px solid transparent; }
.pb-topnav a.pb-nav-active, .pb-topnav a[aria-current="page"] { color: var(--pb-color-text); border-bottom-color: var(--pb-color-border-selected); background: var(--pb-color-surface-selected); border-radius: var(--pb-radius-xs) var(--pb-radius-xs) 0 0; }
.pb-bottomnav a.pb-nav-active, .pb-bottomnav button.pb-nav-active { color: var(--pb-action-text); font-weight: var(--pb-weight-bold); }
.pb-bottomnav a.pb-nav-active .pb-bottomnav-icon { position: relative; }
.pb-bottomnav a.pb-nav-active .pb-bottomnav-icon::after { content: ""; position: absolute; inset-inline: -8px; bottom: -4px; height: 2px; background: var(--pb-color-border-selected); border-radius: 2px; }
.pb-back-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--pb-touch-target); color: var(--pb-color-text); font-weight: var(--pb-weight-medium); }
.pb-back-link svg { width: 20px; height: 20px; }

/* ---------- Footer: link groups, accordion on mobile ---------- */
.pb-footer { background: var(--pb-color-surface-subtle); border-top: 1px solid var(--pb-color-border); color: var(--pb-color-text-muted); margin-top: var(--pb-section-gap); padding: var(--pb-space-8) 0 var(--pb-space-6); }
.pb-footer-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--pb-space-6); margin-bottom: var(--pb-space-6); }
.pb-footer-group > summary, .pb-footer-group-title { list-style: none; font-weight: var(--pb-weight-semibold); color: var(--pb-color-text); margin: 0 0 var(--pb-space-2); font-size: var(--pb-text-body); min-height: var(--pb-touch-target); display: flex; align-items: center; cursor: default; }
.pb-footer-group > summary::-webkit-details-marker { display: none; }
.pb-footer-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-footer-group a { display: inline-flex; align-items: center; min-height: var(--pb-touch-target); color: var(--pb-color-text-muted); }
.pb-footer-group a:hover { color: var(--pb-color-text); }
.pb-footer-version { color: var(--pb-color-text-muted); font-size: var(--pb-text-caption); font-variant-numeric: tabular-nums; margin-inline-start: auto; }
@media (max-width: 640px) { .pb-footer-version { margin-inline-start: 0; flex-basis: 100%; } }
.pb-footer-meta { display: flex; flex-wrap: wrap; gap: var(--pb-space-2) var(--pb-space-4); align-items: center; font-size: var(--pb-text-body-s); border-top: 1px solid var(--pb-color-border); padding-top: var(--pb-space-4); }
@media (min-width: 768px) {
    .pb-footer-group[open] > summary, .pb-footer-group > summary { pointer-events: none; }
    .pb-footer-group:not([open]) ul { display: flex; }
}
@media (max-width: 767px) {
    .pb-footer-groups { grid-template-columns: 1fr; gap: 0; }
    .pb-footer-group { border-bottom: 1px solid var(--pb-color-border); }
    .pb-footer-group > summary { cursor: pointer; justify-content: space-between; }
    .pb-footer-group > summary::after { content: "\002B"; font-size: 20px; color: var(--pb-color-text-muted); }
    .pb-footer-group[open] > summary::after { content: "\2212"; }
    .pb-footer-group ul { padding-bottom: var(--pb-space-3); }
}

/* ---------- Price: isolated bidi, tabular digits ---------- */
.pb-price { display: inline-block; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
/* R3101 money: tabular digits, LTR isolate; the big money size 24/32 700 */
.pb-money { font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; display: inline-block; }
.pb-money--lg { font-size: var(--pb-text-money); line-height: var(--pb-lh-money); font-weight: var(--pb-weight-money); }
.pb-price--lg { font-size: var(--pb-text-h3); font-weight: var(--pb-weight-bold); }
.pb-price-from { font-size: var(--pb-text-body-s); color: var(--pb-color-text-muted); margin-inline-end: 4px; }

/* ---------- Hero band: the gradient is decoration only (a thin band / art), never behind small text ---------- */
.pb-brand-band { height: 6px; background: var(--pb-gradient-brand); border-radius: var(--pb-radius-pill); }
.pb-hero-art { color: var(--pb-brand-coral); }
.pb-hero-art--gradient { background: var(--pb-gradient-brand); border-radius: var(--pb-radius-media); aspect-ratio: 4 / 3; max-width: 320px; }
.pb-brand-hero { background: var(--pb-brand-gradient); border-radius: var(--pb-radius-media); }

/* ---------- StatusChip (V3.1): icon / mark + written status, never colour alone (finance_rule) ---------- */
.pb-status-chip { display: inline-flex; align-items: center; gap: 4px; min-height: var(--pb-h-chip); padding: 0 var(--pb-space-2); border-radius: var(--pb-radius-pill); font-size: var(--pb-text-caption); line-height: var(--pb-lh-caption); font-weight: var(--pb-weight-semibold); border: 1px solid currentColor; white-space: nowrap; }
.pb-status-chip--success { color: var(--pb-success-text); background: var(--pb-success-surface); }
.pb-status-chip--warning { color: var(--pb-warning-text); background: var(--pb-warning-surface); }
.pb-status-chip--danger { color: var(--pb-danger-text); background: var(--pb-danger-surface); }
.pb-status-chip--info { color: var(--pb-info-text); background: var(--pb-info-surface); }
.pb-status-chip--neutral { color: var(--pb-neutral-text); background: var(--pb-neutral-surface); }

/* ---------- Media in both themes (component_contracts.media): photos keep their colours, never a global
   invert / filter; a transparent 3D render sits on the neutral matte with a readable boundary ---------- */
.pb-feed-card-media, .pb-gallery-hero, .pb-model-details-image { background: var(--pb-media-matte); outline: 1px solid var(--pb-color-border); outline-offset: -1px; }
.pb-feed-card-media img, .pb-gallery-hero img, .pb-model-details-image img { filter: none; }

/* ---------- Reduced motion: no directional motion (V3), the card lift and fades stop ---------- */
@media (prefers-reduced-motion: reduce) {
    .pb-feed-card, .pb-feed-card:hover, .pb-people-card:hover, .pb-collection-card:hover { transform: none !important; }
    body { transition: none; }
}

/* ---------- Scrollbar follows the theme (component_contracts.scrollbar) ---------- */
html { scrollbar-color: var(--pb-control-border) var(--pb-canvas); }

/* ---------- Header at the narrowest widths (320-374): the logo word yields to the mark so the account / preferences /
   menu controls (44px targets) fit without a horizontal scroll; the link keeps its accessible name (aria-label) ---------- */
@media (max-width: 374px) {
    .pb-header-row { gap: var(--pb-space-2); }
    .pb-header-end { gap: var(--pb-space-1); }
    .pb-logo-word { display: none; }
}
@media (max-width: 767px) {
    .pb-header-row { gap: var(--pb-space-3); }
}

/* ---------- Bottom nav: items share the width and never push the page wider (a long label wraps to two lines,
   never truncated: the label is the item's name) ---------- */
@media (max-width: 767px) {
    .pb-bottomnav a, .pb-bottomnav button { min-width: 0; padding-inline: 2px; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
}

/* ---------- Showcase contrast samples: the pair is drawn by CSS content (an illustration, also of the pairs that MUST
   NOT carry text), so it is not itself a text node to be measured ---------- */
.ds-chip-sample::before { content: attr(data-sample); }

/* ---------- Home = catalog (owner brief R3200): the search is the centre of the first screen -- a centred hero with the
   display title, one sentence, the large search bar (64 desktop / 56 mobile) and the two journeys under it; the brand
   gradient only as the thin band above the title (decoration, no text on it). Ids / journeys unchanged. ---------- */
.pb-m71-hero { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; padding-block: var(--pb-space-10) var(--pb-space-8); }
.pb-m71-hero .pb-hero-copy { max-width: 760px; width: 100%; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.pb-m71-hero .pb-brand-band { margin-inline: auto; }
.pb-m71-hero .pb-hero-title { font-size: var(--pb-text-display); line-height: var(--pb-lh-display); margin-bottom: var(--pb-space-3); }
.pb-m71-hero .pb-hero-sub { margin-inline: auto; color: var(--pb-text-secondary); }
.pb-m71-hero .pb-hero-art { display: none; }
.pb-m71-hero .pb-m71-search { width: 100%; max-width: 720px; margin-inline: auto; }
.pb-m71-hero .pb-m71-search .pb-search { box-shadow: var(--pb-shadow-card); }
.pb-m71-hero .pb-m71-search > .pb-btn { min-height: var(--pb-h-search); padding-inline: var(--pb-space-6); border-radius: var(--pb-radius-pill); }
.pb-m71-hero .pb-hero-actions { justify-content: center; }
.pb-m71-hero .pb-hero-help { text-align: center; }
@media (max-width: 767px) {
    .pb-m71-hero { padding-block: var(--pb-space-6) var(--pb-space-4); }
    .pb-m71-hero .pb-m71-search { flex-direction: column; }
    .pb-m71-hero .pb-m71-search > .pb-btn { width: 100%; }
}

/* ---------- Card micro-interaction: the image breathes on hover / keyboard focus (no layout shift; off under reduced motion) ---------- */
.pb-feed-card-media img { transition: transform var(--pb-motion-base) var(--pb-ease); }
.pb-feed-card:hover .pb-feed-card-media img, .pb-feed-card:focus-within .pb-feed-card-media img { transform: scale(1.03); }
.pb-feed-card-title { font-size: var(--pb-text-body); line-height: var(--pb-lh-body); }
@media (prefers-reduced-motion: reduce) {
    .pb-feed-card-media img { transition: none; }
    .pb-feed-card:hover .pb-feed-card-media img, .pb-feed-card:focus-within .pb-feed-card-media img { transform: none; }
}

/* ---------- Wallet tiles (WalletSummary): the caption sits on a tinted tile -- it reads the stronger neutral text so it
   stays >= 4.5:1 on the tint in both themes; the state is also the tile's written label (finance_rule) ---------- */
.pb-wd-tile .pb-muted, .pb-wd-tile .pb-tiny { color: var(--pb-neutral-text); }

/* ---------- WCAG 2.5.8: a standalone small link in a card gets a 24px target ---------- */
.pb-identity-name { display: inline-flex; align-items: center; min-height: 24px; }

/* ---------- Tooltip layout fix: a hidden tooltip takes no space (it widened the page at 430px while invisible);
   on a phone the open tooltip is a fixed bar above the bottom nav, never past the screen edge ---------- */
.pb-tip > .pb-tip-text { display: none; }
.pb-tip:hover > .pb-tip-text, .pb-tip:focus-within > .pb-tip-text, .pb-tip.pb-is-open > .pb-tip-text { display: block; }
.pb-tip.pb-is-closed > .pb-tip-text { display: none; }
@media (max-width: 767px) {
    .pb-tip > .pb-tip-text, [dir="rtl"] .pb-tip > .pb-tip-text { position: fixed; inset-inline: var(--pb-space-4); bottom: calc(var(--pb-h-bottomnav) + var(--pb-space-3) + env(safe-area-inset-bottom, 0px)); transform: none; width: auto; max-width: none; }
}

/* ---------- DataTable on a phone: a table box never clips its own overflow (overflow-x on display:table is ignored),
   so a wide admin / finance table widened the whole page; on < 768 it becomes its own horizontal scroller (the
   _Layout script then makes it keyboard-focusable). Amounts keep their columns; nothing is hidden. ---------- */
@media (max-width: 767px) {
    main table.pb-table:not(.pb-r920-table) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- DataTable -> cards on a phone (V12 quality bar). pb-ds.js marks every main table.pb-table with
   .pb-table--stack + data-label per cell; each row becomes a card: the first cell is the card title, every other cell a
   "label · value" line (amounts stay LTR-isolated and tabular). The head stays in the DOM for screen readers' context
   but is visually hidden; zebra / hover are dropped (a card is the unit). ---------- */
@media (max-width: 767px) {
    main table.pb-table--stack, main table.pb-table--stack > tbody, main table.pb-table--stack > tbody > tr, main table.pb-table--stack > tbody > tr > td { display: block; width: 100%; max-width: 100%; }
    main table.pb-table--stack { overflow: visible; border: 0; background: transparent; }
    main table.pb-table--stack > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    main table.pb-table--stack > tbody > tr { background: var(--pb-surface) !important; border: 1px solid var(--pb-divider); border-radius: var(--pb-radius-card); padding: var(--pb-space-3) var(--pb-space-4); margin: 0 0 var(--pb-space-3); box-shadow: var(--pb-shadow-card-theme); }
    main table.pb-table--stack > tbody > tr > td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pb-space-3); padding: 6px 0; border: 0; text-align: start; white-space: normal; overflow-wrap: anywhere; min-width: 0; font-size: var(--pb-text-compact); line-height: var(--pb-lh-compact); }
    main table.pb-table--stack > tbody > tr > td + td { border-top: 1px solid var(--pb-divider); }
    main table.pb-table--stack > tbody > tr > td[data-label]::before { content: attr(data-label); color: var(--pb-text-secondary); font-weight: var(--pb-weight-medium); flex: 0 0 auto; max-width: 45%; }
    main table.pb-table--stack > tbody > tr > td:first-child { font-size: var(--pb-text-body); font-weight: var(--pb-weight-semibold); }
    main table.pb-table--stack > tbody > tr > td:first-child::before { display: none; }
    main table.pb-table--stack > tbody > tr > td > * { min-width: 0; }
    main table.pb-table--stack > tbody > tr > td:empty { display: none; }
    main table.pb-table--stack .pb-table-amount { text-align: end; }
}
@media (max-width: 767px) {
    /* Studio list as cards: the desktop grid keeps its min-width; stacked it fits the phone */
    main table.pb-studio.pb-table--stack { min-width: 0; font-size: var(--pb-text-compact); }
    .pb-studio-wrap:has(> table.pb-table--stack) { overflow: visible; border: 0; background: transparent; }
    main table.pb-studio.pb-table--stack > tbody > tr > td { height: auto; }
    main table.pb-studio.pb-table--stack .pb-studio-name, main table.pb-studio.pb-table--stack .pb-studio-link, main table.pb-studio.pb-table--stack .pb-studio-why { max-width: none; white-space: normal; }
}
/* V19 MASTER (QA UI-STUDIO-TABLET_*-responsive): the V19 tablet tier (768-1199) gets the studio cards too -- the 980px desktop
   grid inside the narrower tablet column left row controls (price, checkboxes) outside the viewport. Same card rules as the phone. */
@media (min-width: 768px) and (max-width: 1199px) {
    main table.pb-studio.pb-table--stack, main table.pb-studio.pb-table--stack > tbody, main table.pb-studio.pb-table--stack > tbody > tr, main table.pb-studio.pb-table--stack > tbody > tr > td { display: block; width: 100%; max-width: 100%; }
    main table.pb-studio.pb-table--stack { min-width: 0; overflow: visible; border: 0; background: transparent; font-size: var(--pb-text-compact); }
    main table.pb-studio.pb-table--stack > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    main table.pb-studio.pb-table--stack > tbody > tr { background: var(--pb-surface) !important; border: 1px solid var(--pb-divider); border-radius: var(--pb-radius-card); padding: var(--pb-space-3) var(--pb-space-4); margin: 0 0 var(--pb-space-3); box-shadow: var(--pb-shadow-card-theme); }
    main table.pb-studio.pb-table--stack > tbody > tr > td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pb-space-3); padding: 6px 0; border: 0; text-align: start; white-space: normal; overflow-wrap: anywhere; min-width: 0; height: auto; line-height: var(--pb-lh-compact); }
    main table.pb-studio.pb-table--stack > tbody > tr > td + td { border-top: 1px solid var(--pb-divider); }
    main table.pb-studio.pb-table--stack > tbody > tr > td[data-label]::before { content: attr(data-label); color: var(--pb-text-secondary); font-weight: var(--pb-weight-medium); flex: 0 0 auto; max-width: 45%; }
    main table.pb-studio.pb-table--stack > tbody > tr > td:first-child::before { display: none; }
    main table.pb-studio.pb-table--stack > tbody > tr > td > * { min-width: 0; }
    main table.pb-studio.pb-table--stack > tbody > tr > td:empty { display: none; }
    .pb-studio-wrap:has(> table.pb-studio.pb-table--stack) { overflow: visible; border: 0; background: transparent; }
    main table.pb-studio.pb-table--stack .pb-studio-name, main table.pb-studio.pb-table--stack .pb-studio-link, main table.pb-studio.pb-table--stack .pb-studio-why { max-width: none; white-space: normal; }
}

/* ---------- WCAG 1.4.1: a link inside running text / a list item / a definition is told apart by an underline, not
   by colour alone (axe link-in-text-block on the wallet route list) ---------- */
main :is(li, dd, .pb-wd-row, .pb-help-text, .pb-muted) > a:not([class]) { text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--pb-color-link-underline); text-underline-offset: 3px; }

/* ==========================================================================
   MISSION 72 ds2 -- V12 design gaps: the legacy form screens (request create / details / bid, checkout, wallet,
   withdraw, Studio) adopt the shared components through their existing classes (ids / classes untouched).
   ========================================================================== */

/* ---------- Choice chips (RadioGroup / FilterChips): one look for every legacy choice list -- wrapping chips, 44px
   targets, the selected one = surfaceSelected + selectionBorder + bold + the native radio stays visible (never colour
   alone). Beats ".pb-form-group label { display:block }" which stretched every choice into a full-width row. ---------- */
.pb-r920-radios, .pb-pg-chips, .pb-checkout-radios, .pb-wd-fieldset:has(> .pb-wd-radio) { display: flex; flex-wrap: wrap; gap: var(--pb-space-2); border: 0; padding: 0; margin: 0 0 var(--pb-space-4); min-width: 0; }
.pb-r920-radios > legend, .pb-pg-chips > legend, .pb-wd-fieldset > legend { width: 100%; font-size: var(--pb-text-label); line-height: var(--pb-lh-label); font-weight: var(--pb-weight-label); margin-bottom: var(--pb-space-2); padding: 0; float: none; }
.pb-form-group label.pb-r920-radio, .pb-form-group label.pb-pg-chip, label.pb-r920-radio, label.pb-pg-chip, .pb-checkout-radio, .pb-wd-radio {
    display: inline-flex; align-items: center; gap: var(--pb-space-2); width: auto; min-height: var(--pb-touch-target); margin: 0;
    padding: 6px var(--pb-space-4); border: 1px solid var(--pb-control-border); border-radius: var(--pb-radius-pill);
    background: var(--pb-surface); color: var(--pb-text-primary); font-size: var(--pb-text-compact); font-weight: var(--pb-weight-medium); cursor: pointer;
    transition: background-color var(--pb-motion-fast) var(--pb-ease), border-color var(--pb-motion-fast) var(--pb-ease);
}
.pb-r920-radio:hover, .pb-pg-chip:hover, .pb-checkout-radio:hover, .pb-wd-radio:hover { background: var(--pb-surface-hover); }
.pb-r920-radio:has(input:checked), .pb-pg-chip:has(input:checked), .pb-checkout-radio:has(input:checked), .pb-wd-radio:has(input:checked) {
    background: var(--pb-surface-selected); border-color: var(--pb-selection-border); box-shadow: inset 0 0 0 1px var(--pb-selection-border); font-weight: var(--pb-weight-semibold);
}
.pb-r920-radio:has(input:focus-visible), .pb-pg-chip:has(input:focus-visible), .pb-checkout-radio:has(input:focus-visible), .pb-wd-radio:has(input:focus-visible) { outline: 2px solid var(--pb-focus); outline-offset: 2px; }
.pb-r920-radio input, .pb-pg-chip input, .pb-checkout-radio input, .pb-wd-radio input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--pb-action-primary); flex: none; }
.pb-r920-radio:has(input:disabled), .pb-checkout-radio--off { background: var(--pb-disabled-surface); color: var(--pb-disabled-text); border-color: var(--pb-divider); cursor: not-allowed; opacity: 1; }
.pb-pg-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--pb-control-border); flex: none; }
@media (max-width: 767px) {
    .pb-r920-radios, .pb-pg-chips, .pb-checkout-radios { gap: var(--pb-space-2); }
}

/* ---------- Stepper (NumberField) on the legacy forms: 44px buttons, 48px value ---------- */
.pb-r920-stepper { display: inline-flex; align-items: stretch; gap: 0; border: 1px solid var(--pb-control-border); border-radius: var(--pb-radius-control); overflow: hidden; background: var(--pb-surface-raised); }
.pb-r920-stepper button, .pb-r920-stepper .pb-btn { min-width: var(--pb-touch-target); min-height: var(--pb-h-input); border: 0; border-radius: 0; background: transparent; color: var(--pb-text-primary); font-size: 20px; padding: 0; }
.pb-r920-stepper button:hover { background: var(--pb-surface-hover); }
.pb-r920-stepper button:focus-visible { outline: 2px solid var(--pb-focus); outline-offset: -3px; }
.pb-r920-stepper input { width: 72px; min-height: var(--pb-h-input); border: 0; border-inline: 1px solid var(--pb-divider); border-radius: 0; text-align: center; background: transparent; font-variant-numeric: tabular-nums; }

/* ---------- Section cards of the legacy screens: one rhythm (24 padding, H3 titles, 16 gaps), raised summary ---------- */
.pb-r920-card, .pb-checkout-card, .pb-wd-section { padding: var(--pb-space-6); border-radius: var(--pb-radius-card); }
.pb-r920-card > h3, .pb-wd-section-title { font-size: var(--pb-text-h3); line-height: var(--pb-lh-h3); font-weight: var(--pb-weight-h3); margin: 0 0 var(--pb-space-4); }
.pb-r920-page h1, .pb-checkout h1, .pb-wd-page h1 { font-size: var(--pb-text-h1); line-height: var(--pb-lh-h1); margin: var(--pb-space-1) 0 var(--pb-space-2); }
.pb-r920-grid2 { gap: 0 var(--pb-space-4); }
.pb-r920-actions, .pb-checkout-actions, .pb-wd-actions { gap: var(--pb-space-3); margin-top: var(--pb-space-4); }
@media (max-width: 767px) {
    .pb-r920-card, .pb-checkout-card, .pb-wd-section { padding: var(--pb-space-4); }
    .pb-r920-actions .pb-btn, .pb-checkout-actions .pb-btn, .pb-wd-actions .pb-btn { width: 100%; }
}
.pb-r920-crumb, .pb-checkout-crumb, .pb-wd-crumb { font-size: var(--pb-text-compact); color: var(--pb-text-secondary); }

/* ---------- WalletSummary: tiles in a 2-column grid on a phone, the amount in the money style (24/32 700, tabular,
   LTR-isolated); the state is the written label + a start edge pattern (finance_rule: never green/red alone) ---------- */
.pb-wd-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--pb-space-3); }
@media (max-width: 767px) { .pb-wd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pb-wd-tile { padding: var(--pb-space-4); border-inline-start-width: 4px; }
.pb-wd-tile-label { font-size: var(--pb-text-label); line-height: var(--pb-lh-label); font-weight: var(--pb-weight-label); color: var(--pb-text-primary); }
.pb-wd-tile-amount { font-size: var(--pb-text-money); line-height: var(--pb-lh-money); font-weight: var(--pb-weight-money); font-variant-numeric: tabular-nums; unicode-bidi: isolate; text-align: start; }
.pb-wd-tile-available { border-inline-start-color: var(--pb-success-text); border-inline-start-style: solid; }
.pb-wd-tile-pending { border-inline-start-color: var(--pb-info-text); border-inline-start-style: dashed; }
.pb-wd-tile-hold { border-inline-start-color: var(--pb-warning-text); border-inline-start-style: double; }
.pb-wd-tile-withdrawable { border-inline-start-color: var(--pb-action-primary); border-inline-start-style: solid; }
.pb-checkout-big, .pb-checkout-total { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.pb-checkout-big { font-size: var(--pb-text-money); line-height: var(--pb-lh-money); font-weight: var(--pb-weight-money); }
.pb-checkout-paybox { background: var(--pb-surface-raised); border-color: var(--pb-divider); border-radius: var(--pb-radius-control); padding: var(--pb-space-4); }

/* ---------- Keyboard focus on form controls (R3101 focus contract: 2px --pb-focus, 2px separation). The legacy
   "input/select/textarea:focus { outline:none }" rules come after the generic :focus-visible rule with the same
   specificity and removed the ring on keyboard focus; this one is more specific and wins. ---------- */
html body :is(input, select, textarea, button, a, summary, [tabindex]):focus-visible { outline: 2px solid var(--pb-focus); outline-offset: 2px; }
html body .pb-search input:focus-visible, html body .pb-search-bar input:focus-visible { outline: none; }   /* the search container carries the ring */
@media (max-width: 767px) {
    /* a cell with multi-line content (line breaks, blocks, lists, several links) stacks its label above the value */
    main table.pb-table--stack > tbody > tr > td:is(:has(br), :has(> div), :has(> ul), :has(> p), :has(> a + a), :has(> span + span + span)) { display: block; }
    main table.pb-table--stack > tbody > tr > td:is(:has(br), :has(> div), :has(> ul), :has(> p), :has(> a + a), :has(> span + span + span))[data-label]::before { display: block; max-width: none; margin-bottom: 4px; }
}

/* MISSION 76 (V13 E / F15, WCAG 2.2 2.5.8) -- touch targets on the public discovery screens measured at 390px:
   the route radios were 13x13 with an inline label, "see all" / search-type / breadcrumb links were 20-22px tall.
   The whole label is the target (>= 44px tall); small text links get a 24px minimum box on coarse pointers. */
.pb-disc-route label, .pb-m71-filters fieldset > label { display: inline-flex; align-items: center; gap: 8px; min-height: var(--pb-touch-target); cursor: pointer; }
.pb-disc-route input[type="radio"], .pb-m71-filters fieldset > label > input[type="radio"] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--pb-color-action); cursor: pointer; }
@media (pointer: coarse) {
    main a.pb-tiny, #pbDiscHead a { display: inline-flex; align-items: center; min-height: 24px; }
    .pb-check input { width: 24px; height: 24px; }
}

/* M78 -- /Requests/Create path cards act as one radio group: clear selected state + keyboard focus. */
.pb-path-option { transition: border-color var(--pb-motion-fast, 150ms) ease, background-color var(--pb-motion-fast, 150ms) ease; }
.pb-path-option:hover { border-color: var(--pb-color-border-strong, var(--accent)); }
.pb-path-option.pb-path-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pb-path-option:has(input:focus-visible) { outline: 2px solid var(--pb-color-focus, var(--accent)); outline-offset: 2px; }

/* ---------- V14 workstream D -- Brand R8 shell: MARK slot (image when the OWNER supplies an approved
   asset, otherwise the existing "PB" text mark), one lockup, 44x44 link target, illustration slot. ---------- */
.pb-logo { min-height: var(--pb-r8-target, 48px); min-width: var(--pb-r8-target, 48px); display: inline-flex; align-items: center; }
img.pb-logo-mark { width: var(--pb-r8-mark-header, 32px); height: auto; background: none; border-radius: 0; object-fit: contain; margin-inline-end: var(--pb-r8-mark-gap, 8px); }
.pb-footer-mark { display: inline-flex; align-items: center; gap: var(--pb-r8-mark-gap, 8px); }
.pb-footer-mark img { width: var(--pb-r8-mark-footer, 24px); height: auto; }
.pb-brand-illu { display: block; margin-block-end: var(--pb-r8-illu-gap, 16px); }
.pb-brand-illu img { display: block; height: auto; max-inline-size: var(--pb-illu-d, 96px); width: 100%; }
@media (max-width: 640px) {
    img.pb-logo-mark { width: var(--pb-r8-mark-header-sm, 28px); }
    .pb-brand-illu { margin-block-end: var(--pb-r8-illu-gap-sm, 12px); }
    .pb-brand-illu img { max-inline-size: var(--pb-illu-m, 64px); }
}
@media (max-width: 340px) { .pb-brand-illu { display: none; } } /* decorative: hidden before text/buttons shrink */
@media (prefers-reduced-motion: reduce) { .pb-brand-illu, .pb-brand-illu img { animation: none !important; transition: none !important; } }

/* V14-UX-01 -- 44x44 targets: language toggle (was ~40px), contact verify, add budget. */
.pb-langswitch button { min-height: var(--pb-r8-target, 48px); min-width: var(--pb-r8-target, 48px); padding: 4px 6px; }
#pbBudgetToggle, #pbOpenContactDialog, [data-pb-open="pbContactDialog"] { min-height: var(--pb-r8-target, 48px); }

/* MISSION 83 -- admin "who is this" person chip + compact queue rows + details drawer */
.pb-m83-person { display:inline-flex; align-items:center; gap:8px; min-height:40px; vertical-align:middle; }
.pb-m83-avatar { flex:0 0 32px; width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; background:var(--pb-color-action-soft); color:var(--pb-primary); }
.pb-m83-person-text { line-height:1.25; }
.pb-m83-person-name { font-weight:700; }
.pb-m83-person-meta { font-size:.78rem; color:var(--pb-muted); }
.pb-m83-tag { display:inline-block; padding:0 6px; border-radius:999px; font-size:.7rem; border:1px solid var(--pb-border); color:var(--pb-muted); }
.pb-m83-tag-bad, .pb-m83-warn { color:var(--pb-danger); border-color:var(--pb-danger); }
.pb-m83-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; min-height:48px; padding:6px 12px; border-bottom:1px solid var(--pb-border); }
.pb-m83-row > .pb-m83-grow { flex:1 1 260px; min-width:0; }
.pb-m83-drawer { width:100%; }
.pb-m83-drawer > summary { cursor:pointer; font-size:.85rem; color:var(--pb-primary); }
.pb-m83-drawer dl { display:grid; grid-template-columns:max-content 1fr; gap:4px 12px; margin:8px 0; font-size:.88rem; }
.pb-m83-drawer dt { color:var(--pb-muted); }
.pb-m83-drawer dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---------- M84: pill search focus (owner screenshot). The generic "input[type=search|text]:focus" rules in site.css
   painted a rectangular border/box-shadow on the inner <input> over the rounded pill. The input inside any pill
   wrapper never draws its own focus; the wrapper shows it with a 2px token ring on the same pill radius. ---------- */
html body :is(.pb-search, .pb-search-bar) input:is(:focus, :focus-visible) { outline: none; border-color: transparent; box-shadow: none; }
html body :is(.pb-search, .pb-search-bar):focus-within { border-color: var(--pb-color-focus); box-shadow: 0 0 0 2px var(--pb-color-focus); transition: none; }   /* V18: focus ring 2px, shown at once */
/* V17 (U-FOCUS) -- the home hero search (#pbHomeSearch) set its own card shadow at (0,3,0), beating the ring above, so
   keyboard focus was invisible there. The hero pill keeps its card shadow AND shows the 2px focus ring. */
html body .pb-m71-hero .pb-m71-search .pb-search:focus-within { border-color: var(--pb-color-focus); box-shadow: 0 0 0 2px var(--pb-color-focus), var(--pb-shadow-card); }

/* ===== V17 S4 -- 8 UI states + FRIDAY complex components (tokens only, logical properties for RTL/LTR) ===== */
.pb-uistates[data-pb-ui-state="idle"] { display: none; }
.pb-uistate { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem; margin-block: .5rem; border: 1px solid var(--pb-color-border); border-radius: 10px; background: var(--pb-color-surface); color: var(--pb-color-text); }
.pb-uistate[hidden] { display: none; }
.pb-uistate-title { margin: 0; font-weight: 600; }
.pb-uistate-body { margin: 0; flex: 1 1 16rem; color: var(--pb-color-text-muted); overflow-wrap: anywhere; }
.pb-uistate--success { background: var(--pb-state-success-bg); border-color: var(--pb-state-success-border); color: var(--pb-state-success-text); }
.pb-uistate--invalid, .pb-uistate--network_error, .pb-uistate--denied, .pb-uistate--system_blocked { background: var(--pb-danger-surface); border-color: var(--pb-danger); color: var(--pb-danger-text); }
.pb-uistate--stale, .pb-uistate--empty { background: var(--pb-state-warning-bg); border-color: var(--pb-state-warning-border); color: var(--pb-state-warning-text); }
.pb-uistate--loading { background: var(--pb-state-info-bg); border-color: var(--pb-state-info-border); color: var(--pb-state-info-text); }
.pb-uistate-spinner { inline-size: 1.25rem; block-size: 1.25rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: pbUiSpin .8s linear infinite; }
@keyframes pbUiSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pb-uistate-spinner { animation: none; } }

.pb-cx { border: 1px solid var(--pb-color-border); border-radius: 12px; padding: .75rem 1rem 1rem; margin: 0 0 1rem; min-inline-size: 0; display: grid; gap: .75rem; }
.pb-cx-legend { font-weight: 600; padding-inline: .25rem; }
.pb-cx-row { display: grid; gap: .25rem; min-inline-size: 0; }
.pb-cx-label { font-weight: 500; overflow-wrap: anywhere; }
.pb-cx-input { min-block-size: var(--pb-touch-target); inline-size: 100%; max-inline-size: 36rem; box-sizing: border-box; }
.pb-cx-input--short { max-inline-size: 8rem; }
textarea.pb-cx-input { min-block-size: 6rem; }
.pb-cx-group { border: 0; padding: 0; margin: 0; min-inline-size: 0; display: grid; gap: .25rem; }
.pb-cx-check { display: flex; align-items: center; gap: .5rem; min-block-size: var(--pb-touch-target); cursor: pointer; overflow-wrap: anywhere; }
.pb-cx-check input { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
.pb-cx-seg { grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); }
.pb-cx-empty { margin: 0; color: var(--pb-color-text-muted); }
.pb-cx-readonly { display: block; min-block-size: var(--pb-touch-target); padding-block: .6rem; color: var(--pb-color-text); overflow-wrap: anywhere; }
.pb-cx-error { margin: 0; color: var(--pb-danger-text); }
.pb-cx-affix, .pb-cx-range { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pb-cx-range input[type="range"] { flex: 1 1 10rem; min-block-size: var(--pb-touch-target); }
.pb-cx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pb-cx-list-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.pb-cx-list-row .pb-cx-input { flex: 1 1 12rem; }
.pb-cx .pb-btn, .pb-uistate .pb-btn { min-block-size: var(--pb-touch-target); min-inline-size: var(--pb-touch-target); }
.pb-cx :focus-visible, .pb-uistate :focus-visible { outline: 3px solid var(--pb-color-focus); outline-offset: 2px; }
/* reflow 400% / 320px: one column, nothing hidden (F02: no mobile-only copies of editable controls) */
@media (max-width: 480px) { .pb-cx { padding-inline: .75rem; } .pb-cx-input { max-inline-size: none; } }
.pb-uistate--financial_unknown { background: var(--pb-state-warning-bg); border-color: var(--pb-state-warning-border); color: var(--pb-state-warning-text); }
.pb-seller-note { margin-block: 0 .75rem; }
[data-pb-conflict="true"] { outline: 2px solid var(--pb-danger); outline-offset: 2px; }

/* ---------- M82 C-04 -- horizontal overflow found by acceptance stream C: /AdminPricing at 768 (122 px), /AdminAuditLog at
   320 (15 px), the /studio table. Same responsive-table pattern as above: a table wrapper is its own scroller, a card or
   filter row never widens the page, and the 768..1023 band (above the phone stack) scrolls the table inside its box. ---------- */
.pb-table-wrap, .pb-studio-wrap, .pb-wiz-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pb-fin-card, .pb-r920-card { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.pb-r920-filters input, .pb-r920-filters select, .pb-r920-filters .pb-form-group { min-width: 0; max-width: 100%; }
@media (min-width: 768px) and (max-width: 1023px) {
    main .pb-fin-card table.pb-table, main .pb-studio-wrap > table.pb-table { display: block; max-width: 100%; overflow-x: auto; }
}

/* M82 C-05 -- a link that shares its cell / line with running text (axe link-in-text-block, /AdminFileSecurity model
   column) is told apart by the M73 underline: thin, low-contrast, static. */
a.pb-text-link { text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--pb-color-link-underline); text-underline-offset: 3px; }

/* ===== V18 FINAL SUNDAY (W3): shared component deltas. Token-only colours (no hex here). ===== */
/* H2 is always H2 (24/32 desktop, 22/30 mobile) — a card / checkout / modal title no longer renders at H3 size. */
h2, .pb-r920-card > h2, .pb-checkout h2 { font-size: var(--pb-text-h2); line-height: var(--pb-lh-h2); font-weight: var(--pb-weight-h2); }
h3 { font-size: var(--pb-text-h3); line-height: var(--pb-lh-h3); }
/* Buttons: primary >= 52 on mobile / 48 desktop (token), secondary / outline / small keep the 44 hit area. */
.pb-btn { min-height: var(--pb-h-button-primary); }
.pb-btn.pb-btn-outline, .pb-btn.pb-btn-secondary, .pb-btn.pb-btn-ghost { min-height: var(--pb-h-button-secondary); }
.pb-btn.pb-btn-sm { min-height: var(--pb-touch-target); }
/* Form fields: 48 min, label above, helper and error under the field, form column max 640. */
.pb-input, .pb-select, input.pb-input, select.pb-select { min-height: var(--pb-h-field); }
.pb-form, .pb-form-narrow { max-width: var(--pb-form-max); }
.field-validation-error, .pb-field-error { display: block; margin-top: 4px; color: var(--pb-v3-danger); font-size: var(--pb-text-label); line-height: var(--pb-lh-label); }
.input-validation-error, [aria-invalid="true"] { border-color: var(--pb-v3-danger) !important; }
.validation-summary-errors { border: 1px solid var(--pb-v3-danger); background: var(--pb-v3-danger-bg); color: var(--pb-v3-danger); border-radius: var(--pb-radius-control); padding: var(--pb-v18-space-2) var(--pb-v18-space-3); }
.validation-summary-valid { display: none; }
/* Focus: one visible 2px ring with 2px offset on every interactive element, keyboard only. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: var(--pb-focus-width) solid var(--pb-color-focus); outline-offset: var(--pb-focus-offset); }
/* States: loading / empty / disabled / error. */
[aria-busy="true"] { cursor: progress; opacity: .75; }
.pb-state-empty, .pb-empty { padding: var(--pb-v18-space-5) var(--pb-v18-space-3); text-align: center; color: var(--pb-color-text-muted); }
.pb-state-error { border-inline-start: 4px solid var(--pb-v3-danger); background: var(--pb-v3-danger-bg); padding: var(--pb-v18-space-2) var(--pb-v18-space-3); border-radius: var(--pb-radius-control); }
:disabled, [aria-disabled="true"] { cursor: not-allowed; }
/* Layout: two columns only from 960px with a 32px gap; no horizontal page scroll at 320. */
html, body { overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; }
@media (min-width: 960px) { .pb-two-col { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pb-two-col-gap); } }
/* RTL / LTR: logical properties; numbers, codes and e-mails keep LTR inside RTL text. */
.pb-ltr, [dir="ltr"] code, input[type="email"], input[type="tel"], input[type="url"] { direction: ltr; unicode-bidi: isolate; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }

/* V18 integration: field height 48 for the discovery sort. */
.pb-m71-filters select { min-height: 48px; }

/* V18 integration: the V18 type + field tokens win over older per-component sizes (H1 28/36 -> 32/40, H2 22/30 -> 24/32,
   fields >= 48; ":not(#_)" lifts specificity above the per-screen class rules). The home hero keeps its display size. */
html body main h1:not(.pb-m71-hero h1):not(.pb-display):not(#_) { font-size: var(--pb-text-h1); line-height: var(--pb-lh-h1); }
html body main h2:not(#_) { font-size: var(--pb-text-h2); line-height: var(--pb-lh-h2); }
html body main input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not(#_),
html body main select:not([multiple]):not(#_) { min-height: 48px; box-sizing: border-box; }

/* V25-W1-05 (PB_V25 UIUX spec screen B): on mobile (<768) the ONE primary action the server chose for the product page
   (#pbRequestPrintCta, or #pbPfGetCta when it is not demoted to outline) stays reachable as a bottom bar above the
   bottom nav, with the safe-area inset. CSS only: which CTA renders, its href and its label stay server-side. */
@media (max-width: 767.98px) {
    .pb-model-details-actions #pbRequestPrintCta,
    .pb-model-details-actions #pbPfGetCta:not(.pb-btn-outline) {
        position: fixed; z-index: 30; inset-inline: var(--pb-space-4);
        bottom: calc(var(--pb-h-bottomnav) + var(--pb-space-2) + env(safe-area-inset-bottom, 0px));
        display: flex !important; justify-content: center; align-items: center; text-align: center;
        min-height: var(--pb-h-button-primary); box-shadow: var(--pb-shadow-dropdown);
    }
    body.pb-no-bottomnav .pb-model-details-actions #pbRequestPrintCta,
    body.pb-no-bottomnav .pb-model-details-actions #pbPfGetCta:not(.pb-btn-outline) { bottom: calc(var(--pb-space-3) + env(safe-area-inset-bottom, 0px)); }
    .pb-model-details:has(#pbRequestPrintCta, #pbPfGetCta:not(.pb-btn-outline)) { padding-bottom: calc(var(--pb-h-button-primary) + var(--pb-space-6)); }
    body:has(.pb-model-details-actions #pbRequestPrintCta, .pb-model-details-actions #pbPfGetCta:not(.pb-btn-outline)) .pb-toast-region {
        bottom: calc(var(--pb-h-bottomnav) + var(--pb-h-button-primary) + var(--pb-space-4) + env(safe-area-inset-bottom, 0px));
    }
}

/* V25 integration (matrix 48 rule): a checkbox's target is its whole label -- the label is at least one 48 touch target tall */
label.pb-r920-check, .pb-terms-consent-check { min-block-size: var(--pb-touch-target, 48px); }
label.pb-r920-check { display: flex; align-items: center; gap: 8px; }