/* ------------------------------------------------------------------ */
/* Paw Royale — box model                                              */
/* ------------------------------------------------------------------ */
/* Neither the browser default nor Radzen's fluent sheet sets this
   globally, so every `width: 100%` that also carried padding — the
   header bar among them — was measuring wider than its parent and
   pushing a horizontal scrollbar onto the page. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Paw Royale — design tokens                                          */
/* ------------------------------------------------------------------ */
:root {
    /* Light-only for now, so the UA paints form controls, scrollbars and
       spinners light even on a device set to dark. The dark treatment is
       parked in paw-royale-dark.css and is not loaded. */
    color-scheme: light;
    --pr-ink: #16375C;
    --pr-ink-soft: #3F5878;
    /* #4F6A88 clears 4.5:1 on cream (5.37) and on --pr-sky (4.89); the old
       #55708F only made 4.47 against --pr-sky. */
    --pr-ink-muted: #4F6A88;
    --pr-blue: #6E8FBF;
    /* Decorative --pr-blue is only 3.17:1 on cream, so text hover uses this. */
    --pr-link-hover: #3E6EA8;
    --pr-cream: #FBFAF7;
    --pr-cream-0: rgba(251, 250, 247, 0);
    --pr-mist: #EEF2F8;
    --pr-sky: #EAF0F8;
    --pr-sky-0: rgba(234, 240, 248, 0);
    --pr-hero: #C9D8EC;
    --pr-sand: #DED7C8;
    --pr-on-sand: #4A4436;
    --pr-sand-line: #7A6E57;
    --pr-line: #E3E7EE;
    /* Bounds the size/colour pickers, so it has to clear 3:1 (WCAG 1.4.11). */
    --pr-line-strong: #74879F;
    --pr-brass: #C6A96B;

    --pr-footer-bg: #16375C;
    --pr-footer-text: #DCE7F5;
    --pr-footer-link: #A9C0DC;
    --pr-footer-dim: #8FA9C9;
    --pr-footer-rule: rgba(169, 192, 220, 0.25);

    /* Toile artwork is light, so each surface dims it with its own veil. */
    --pr-veil: rgba(251, 250, 247, 0.45);
    --pr-veil-hover: rgba(251, 250, 247, 0.2);
    --pr-veil-mark: rgba(251, 250, 247, 0.72);
    --pr-veil-band: rgba(251, 250, 247, 0);
    --pr-header-bg: rgba(251, 250, 247, 0.92);

    --pr-focus: #16375C;
    /* HIG mobile control minimum: 44x44 pt. */
    --pr-tap: 44px;

    --rz-text-font-family: Jost, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rz-heading-font-family: Prata, Georgia, serif;
    /* rem, not px, so browser/OS text-size settings still scale the body. */
    --rz-body-font-size: 1rem;
    --rz-body-line-height: 1.6;
    --rz-border-radius: 0;

    --rz-white: #ffffff;
    --rz-black: #000000;

    --rz-base: #EEF2F8;
    --rz-base-50: #FBFAF7;
    --rz-base-100: #F5F7FB;
    --rz-base-200: #EEF2F8;
    --rz-base-300: #E3E7EE;
    --rz-base-400: #C9D3E1;
    --rz-base-500: #9DB0C8;
    --rz-base-600: #55708F;
    --rz-base-700: #3F5878;
    --rz-base-800: #24507F;
    --rz-base-900: #16375C;
    --rz-base-light: #EAF0F8;
    --rz-base-lighter: #FBFAF7;
    --rz-base-dark: #3F5878;
    --rz-base-darker: #16375C;

    --rz-primary: #16375C;
    --rz-primary-light: #6E8FBF;
    --rz-primary-lighter: #EAF0F8;
    --rz-primary-dark: #24507F;
    --rz-primary-darker: #0F2843;

    --rz-secondary: #DED7C8;
    --rz-secondary-light: #EAE5DA;
    --rz-secondary-lighter: #F5F2EB;
    --rz-secondary-dark: #CFC5B1;
    --rz-secondary-darker: #BFB6A3;

    --rz-info: #6E8FBF;
    --rz-info-light: #9DB8DD;
    --rz-info-lighter: #EAF0F8;
    --rz-info-dark: #55708F;
    --rz-info-darker: #3F5878;

    --rz-success: #4A6B4F;
    --rz-success-light: #9BB49F;
    --rz-success-lighter: #E7EFE8;
    --rz-success-dark: #3E5B42;
    --rz-success-darker: #324A36;

    --rz-warning: #C6A96B;
    --rz-warning-light: #E0CDA3;
    --rz-warning-lighter: #F7F1E4;
    --rz-warning-dark: #AE9257;
    --rz-warning-darker: #8E7644;

    --rz-danger: #9A4038;
    --rz-danger-light: #C99189;
    --rz-danger-lighter: #F3E5E3;
    --rz-danger-dark: #85372F;
    --rz-danger-darker: #6E2D27;

    --rz-on-base: #16375C;
    --rz-on-base-light: #16375C;
    --rz-on-base-lighter: #16375C;
    --rz-on-base-dark: #FBFAF7;
    --rz-on-base-darker: #FBFAF7;
    --rz-on-primary: #FBFAF7;
    --rz-on-primary-light: #FBFAF7;
    --rz-on-primary-lighter: #16375C;
    --rz-on-primary-dark: #FBFAF7;
    --rz-on-primary-darker: #FBFAF7;
    --rz-on-secondary: #16375C;
    --rz-on-secondary-light: #16375C;
    --rz-on-secondary-lighter: #16375C;
    --rz-on-secondary-dark: #16375C;
    --rz-on-secondary-darker: #16375C;
    --rz-on-info: #FBFAF7;
    --rz-on-info-lighter: #16375C;
    --rz-on-success: #ffffff;
    --rz-on-warning: #16375C;
    --rz-on-danger: #ffffff;

    --rz-body-background-color: #FBFAF7;
    --rz-body-color: #16375C;
    --rz-text-color: #16375C;
    --rz-text-title-color: #16375C;
    --rz-text-secondary-color: #3F5878;
    --rz-text-tertiary-color: #4F6A88;
    --rz-text-disabled-color: #9DB0C8;
    --rz-link-color: #16375C;
    --rz-link-hover-color: #3E6EA8;
    --rz-border-color: #E3E7EE;
    --rz-outline-color: #74879F;
    --rz-panel-border-radius: 0;
    --rz-card-border-radius: 0;
    --rz-input-border-radius: 0;
    --rz-button-border-radius: 0;
}

/* ------------------------------------------------------------------ */
/* Typography                                                          */
/* ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.rz-text-h1, .rz-text-display-h1,
.rz-text-h2, .rz-text-display-h2,
.rz-text-h3, .rz-text-display-h3,
.rz-text-h4, .rz-text-display-h4,
.rz-text-h5, .rz-text-display-h5,
.rz-text-h6, .rz-text-display-h6 {
    font-family: var(--rz-heading-font-family);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--pr-ink);
}

.rz-text-display-h1, .rz-text-h1 {
    font-size: clamp(2rem, 4.8vw, 3.75rem);
    line-height: 1.1;
}

.rz-text-display-h2, .rz-text-h2 {
    font-size: clamp(1.75rem, 3.6vw, 2.625rem);
    line-height: 1.15;
}

.rz-text-display-h3, .rz-text-h3 {
    font-size: clamp(1.625rem, 3.2vw, 2.25rem);
    line-height: 1.2;
}

.rz-text-display-h4, .rz-text-h4 {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    line-height: 1.3;
}

.rz-text-display-h5, .rz-text-h5 {
    font-size: 1.0625rem;
    line-height: 1.35;
}

.rz-text-display-h6, .rz-text-h6 {
    font-size: 0.9375rem;
    line-height: 1.4;
}

body, .rz-text-body1, .rz-text-body2, .rz-text-subtitle1, .rz-text-subtitle2,
.rz-text-caption, .rz-text-overline, .rz-button, .rz-inputtext {
    font-family: var(--rz-text-font-family);
}

.rz-text-body1 {
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--pr-ink-soft);
}

.rz-text-body2 {
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--pr-ink-soft);
}

.rz-text-overline, .pr-eyebrow {
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--pr-ink-muted);
}

.rz-button {
    font-family: var(--rz-text-font-family);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.rz-button.rz-button-lg {
    padding: 0.95rem 2.5rem;
}

a {
    color: var(--rz-link-color);
    text-decoration: none;
}

a:hover, a:focus {
    color: var(--rz-link-hover-color);
}

/* ------------------------------------------------------------------ */
/* Layout shell                                                        */
/* ------------------------------------------------------------------ */
body {
    background: var(--pr-cream);
    color: var(--pr-ink);
    /* Stop iOS Safari inflating text when the device is rotated. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(110, 143, 191, 0.24);
    overscroll-behavior-y: none;
}

.pr-body {
    --rz-body-padding: 0;
    padding: 0;
    background: var(--pr-cream);
}

/* Keyboard users need a target to land on before the whole header. */
.pr-skip-link {
    position: absolute;
    left: 0.5rem;
    top: -100%;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--pr-ink);
    color: var(--pr-cream);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pr-skip-link:focus {
    top: 0.5rem;
    color: var(--pr-cream);
}

.pr-header {
    background: var(--pr-header-bg);
    /* Safari — including iOS 17 and earlier — still needs the prefix. */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pr-line);
    box-shadow: none;
    height: auto;
    padding: 0;
}

/* Firefox before 103 and any engine without backdrop-filter gets an opaque
   bar rather than text sliding under content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pr-header {
        background: var(--pr-cream);
    }
}

.pr-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.375rem 2rem;
    padding-left: max(2rem, env(safe-area-inset-left));
    padding-right: max(2rem, env(safe-area-inset-right));
    width: 100%;
}

.pr-navlink {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--pr-tap);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pr-ink);
}

/* The tap target is 44px tall but the rule still sits under the word, so the
   navigation looks exactly as it did before. */
.pr-navlink::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 0.85em);
    height: 1px;
    background: transparent;
}

.pr-navlink:hover {
    color: var(--pr-link-hover);
}

.pr-navlink-active::after {
    background: var(--pr-ink);
}

.pr-navlink-cart {
    color: var(--pr-link-hover);
}

.pr-lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--pr-ink-muted);
}

.pr-lang-link {
    color: inherit;
    min-height: var(--pr-tap);
    display: inline-flex;
    align-items: center;
}

.pr-lang-link:hover {
    color: var(--pr-link-hover);
}

.pr-lang-link-active {
    color: var(--pr-ink);
    font-weight: 500;
}

/* The two lines stack to 38px on their own; the floor takes the link to a full
   touch row without changing the bar, which the 44px nav links already set. */
.pr-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--pr-tap);
}

.pr-wordmark {
    font-family: var(--rz-heading-font-family);
    font-size: 1.375rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--pr-ink);
}

.pr-wordmark-sub {
    /* Was 0.5rem (8px) — under the 11pt platform minimum for legible text. */
    font-size: 0.6875rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--pr-ink-muted);
}

.pr-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 5rem 2rem;
    padding-left: max(2rem, env(safe-area-inset-left));
    padding-right: max(2rem, env(safe-area-inset-right));
    width: 100%;
}

.pr-section-narrow {
    max-width: 1080px;
}

.pr-section-tight {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.pr-quiet {
    background: var(--pr-sky);
}

.pr-sand {
    background: var(--pr-sand);
}

.pr-sand .rz-text-body1,
.pr-sand .rz-text-body2 {
    color: var(--pr-on-sand);
}

/* ------------------------------------------------------------------ */
/* Hero and toile bands                                                */
/* ------------------------------------------------------------------ */
.pr-hero-media {
    position: relative;
    width: 100%;
    height: clamp(380px, 46vw, 560px);
    background-color: var(--pr-hero);
    background-image: url('../images/paw-royale-toile.png');
    background-size: cover;
    background-position: center 38%;
    overflow: hidden;
}

/* The clip covers the band edge to edge at any aspect ratio; the toile painted on
   .pr-hero-media stays behind it, so it is what shows while the file loads and what
   is left if the browser will not decode it. */
.pr-hero-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    border: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .pr-hero-video {
        display: none;
    }
}

.pr-hero-media::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: linear-gradient(180deg, var(--pr-veil-band) 0%, var(--pr-cream) 100%);
}

.pr-toile-band {
    position: relative;
    width: 100%;
    height: clamp(340px, 40vw, 560px);
    background-image: url('../images/paw-royale-toile.png');
    background-size: cover;
    background-position: center;
}

.pr-toile-band::before,
.pr-toile-band::after {
    content: '';
    position: absolute;
    inset: 0;
}

.pr-toile-band::before {
    background: linear-gradient(180deg, var(--pr-sky) 0%, var(--pr-sky-0) 26%, var(--pr-sky-0) 74%, var(--pr-sky) 100%);
}

.pr-toile-band::after {
    background: linear-gradient(90deg, var(--pr-sky) 0%, var(--pr-sky-0) 14%, var(--pr-sky-0) 86%, var(--pr-sky) 100%);
}

/* ------------------------------------------------------------------ */
/* Product grid, cards and shots                                       */
/* ------------------------------------------------------------------ */
.pr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: 1.75rem;
    width: 100%;
}

.pr-grid-pillars {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}

.pr-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.pr-shot {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: var(--pr-mist);
    background-image: url('../images/paw-royale-toile.png');
    background-size: 260%;
    background-position: center;
    overflow: hidden;
}

.pr-shot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--pr-veil);
    transition: background 0.35s ease;
}

.pr-card:hover .pr-shot::after {
    background: var(--pr-veil-hover);
}

.pr-shot-mark {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    padding: 1.5rem;
}

.pr-shot-monogram {
    font-family: var(--rz-heading-font-family);
    font-size: 1.75rem;
    letter-spacing: 0.06em;
    color: var(--pr-ink);
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pr-sand);
    background: var(--pr-veil-mark);
}

.pr-shot-caption {
    /* Was 0.625rem (10px); 11px is the platform floor for legible text. */
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pr-ink-muted);
}

/* A real photograph replaces the toile and the monogram. The cream veil stays, but
   lighter: over a placeholder it is the texture, over a photograph it would be a fog. */
.pr-shot-photo {
    background-image: none;
}

.pr-shot-photo::after {
    background: transparent;
}

.pr-card:hover .pr-shot-photo::after {
    background: var(--pr-veil-hover);
}

.pr-shot-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* The tiles are 4:5 and the photographs will not be; cropping keeps the grid even. */
    object-fit: cover;
    display: block;
}

.pr-shot-square {
    aspect-ratio: 1 / 1;
}

.pr-shot-wide {
    aspect-ratio: 3 / 2;
}

.pr-shot-thumb {
    aspect-ratio: 1 / 1;
    cursor: pointer;
    border: 1px solid transparent;
}

.pr-shot-thumb-selected {
    border-color: var(--pr-ink);
    box-shadow: inset 0 0 0 2px var(--pr-ink);
}

/* The thumbnails are real buttons, so strip the UA chrome and let the tile
   inside supply the whole appearance. */
.pr-thumb-button {
    display: block;
    width: 84px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.pr-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    padding: 5px 11px;
    background: var(--pr-ink);
    color: var(--pr-cream);
    /* Was 0.5625rem (9px) — well under the 11pt minimum. */
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pr-product-name {
    font-family: var(--rz-heading-font-family);
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--pr-ink);
}

.pr-product-detail {
    font-size: 0.8125rem;
    font-weight: 300;
    color: var(--pr-ink-muted);
}

/* Both of these read as plain text, but where they are links they are the only
   way through — the product image beside them is hidden from assistive tech.
   The padding is invisible and takes each one up to a 44px row. */
a.pr-product-name,
a.pr-product-detail {
    display: inline-flex;
    align-items: center;
    min-height: var(--pr-tap);
}

.pr-price {
    font-size: 0.9375rem;
    color: var(--pr-ink);
}

.pr-swatch {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid var(--pr-line-strong);
    display: inline-block;
}

/* ------------------------------------------------------------------ */
/* Small pieces                                                        */
/* ------------------------------------------------------------------ */
.pr-underline-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--pr-tap);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    align-self: flex-start;
    color: var(--pr-ink);
}

/* Same trick as .pr-navlink: 44px of target, hairline still hugging the text. */
.pr-underline-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 0.85em);
    height: 1px;
    background: var(--pr-line-strong);
}

.pr-underline-link:hover::after {
    background: var(--pr-ink);
}

.pr-pillar {
    border-top: 1px solid var(--pr-line);
    padding-top: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.pr-pillar-title {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pr-ink);
}

.pr-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pr-tap);
    min-height: var(--pr-tap);
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--pr-line-strong);
    background: transparent;
    color: var(--pr-ink);
    font-family: var(--rz-text-font-family);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.pr-option:hover {
    border-color: var(--pr-ink);
}

/* Selection carries a doubled edge as well as the fill, so it survives a
   grayscale or high-contrast rendering rather than reading as colour alone. */
.pr-option-selected {
    border-color: var(--pr-ink);
    background: var(--pr-ink);
    color: var(--pr-cream);
    box-shadow: inset 0 0 0 2px var(--pr-cream);
}

/* What an ornament or an engraving adds, sitting inside the button beside the
   name. Quieter than the name, and it inherits the fill's colour when the
   button is the chosen one. */
.pr-option-extra {
    margin-left: 0.5rem;
    color: var(--pr-ink-muted);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.pr-option-selected .pr-option-extra,
.pr-pillar-title .pr-option-extra {
    color: inherit;
    opacity: 0.75;
}

/* The button is a full 44x44 target; the visible disc stays 30px and is drawn
   by the pseudo-element, with the swatch colour passed in as --pr-swatch. */
.pr-swatch-button {
    position: relative;
    width: var(--pr-tap);
    height: var(--pr-tap);
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pr-swatch-button::before {
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--pr-line-strong);
    background: var(--pr-swatch, transparent);
}

.pr-swatch-button-selected::after {
    content: '';
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--pr-ink);
}

.pr-swatch-group {
    /* Negative margin keeps the row optically aligned now that each button
       carries 7px of invisible padding on every side. */
    margin: -7px;
}

.pr-divider {
    height: 1px;
    background: var(--pr-line);
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* Cart and checkout                                                   */
/* ------------------------------------------------------------------ */
.pr-line-item {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 1.25rem;
    align-items: start;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--pr-line);
}

.pr-summary {
    background: var(--pr-sky);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pr-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9375rem;
    font-weight: 300;
    color: var(--pr-ink-soft);
}

.pr-summary-total {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--pr-ink);
    border-top: 1px solid var(--pr-line-strong);
    padding-top: 1rem;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.pr-footer {
    /* Own tokens rather than --pr-ink: in dark mode the ink is the text
       colour, which would flip the footer to a light slab. */
    background: var(--pr-footer-bg);
    color: var(--pr-footer-text);
    padding: 4.5rem 2rem 2rem;
    padding-left: max(2rem, env(safe-area-inset-left));
    padding-right: max(2rem, env(safe-area-inset-right));
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

.pr-footer-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 2.75rem;
}

.pr-footer-heading {
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--pr-footer-text);
    margin: 0;
}

.pr-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pr-footer a {
    display: inline-flex;
    align-items: center;
    min-height: var(--pr-tap);
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--pr-footer-link);
}

.pr-footer a:hover {
    color: var(--pr-footer-text);
}

.pr-footer-note {
    font-size: 0.8125rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--pr-footer-link);
    max-width: 30ch;
}

.pr-footer-bottom {
    max-width: 1320px;
    margin: 3.5rem auto 0;
    padding-top: 1.375rem;
    border-top: 1px solid var(--pr-footer-rule);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--pr-footer-dim);
}

.pr-footer-bottom a {
    color: var(--pr-footer-dim);
    font-size: 0.75rem;
}

.pr-footer :focus-visible {
    outline-color: var(--pr-footer-text);
}
/* ------------------------------------------------------------------ */
/* Back office                                                         */
/* ------------------------------------------------------------------ */
/* The admin shell is its own layout — no storefront header or footer, a rail
   on the left and one scrolling column beside it. It draws on the same tokens
   as the shop, so it reads as the same house even though only one person
   ever sees it. Square corners hold here too. */
.pr-admin {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--pr-cream);
}

.pr-admin-side {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 100vh;
    padding: 1.75rem 1.25rem;
    padding-left: max(1.25rem, env(safe-area-inset-left));
    overflow-y: auto;
    background: var(--pr-sky);
    border-right: 1px solid var(--pr-line);
}

.pr-admin-brand {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    text-decoration: none;
}

.pr-admin-nav {
    display: flex;
    flex-direction: column;
}

/* Same 44px floor as the storefront nav, with the rule hugging the word. */
.pr-admin-navlink {
    display: flex;
    align-items: center;
    min-height: var(--pr-tap);
    color: var(--pr-ink-soft);
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.pr-admin-navlink:hover {
    color: var(--pr-link-hover);
}

.pr-admin-navlink-active {
    color: var(--pr-ink);
    font-weight: 500;
    box-shadow: inset 2px 0 0 var(--pr-brass);
    padding-left: 0.75rem;
}

.pr-admin-navlink-quiet {
    min-height: 0;
    font-size: 0.8125rem;
    color: var(--pr-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pr-admin-side-foot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1.25rem;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--pr-line);
}

.pr-admin-who {
    font-size: 0.8125rem;
    color: var(--pr-ink-muted);
    overflow-wrap: anywhere;
}

.pr-admin-signout {
    min-height: var(--pr-tap);
    width: 100%;
    padding: 0 0.75rem;
    background: none;
    border: 1px solid var(--pr-line-strong);
    color: var(--pr-ink);
    font: inherit;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.pr-admin-signout:hover {
    background: var(--pr-cream);
}

.pr-admin-main {
    padding: 2.5rem 2rem 4rem;
    padding-right: max(2rem, env(safe-area-inset-right));
}

/* Sign-in sits on its own, centred, with none of the shell around it. */
.pr-admin-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1.25rem;
    background: var(--pr-sky);
}

.pr-admin-auth-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 26rem;
    padding: 2.5rem 2rem;
    background: var(--pr-cream);
    border: 1px solid var(--pr-line);
}

.pr-admin-label {
    display: block;
    margin: 1rem 0 0.375rem;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pr-ink-muted);
}

/* Static SSR, so these are plain inputs rather than Radzen's — matched by hand. */
.pr-admin-input {
    width: 100%;
    min-height: var(--pr-tap);
    padding: 0 0.75rem;
    background: var(--pr-cream);
    border: 1px solid var(--pr-line-strong);
    border-radius: 0;
    color: var(--pr-ink);
    font: inherit;
    /* 16px floor, or iOS Safari zooms the page on focus. */
    font-size: 1rem;
}

.pr-admin-submit {
    width: 100%;
    min-height: var(--pr-tap);
    margin-top: 1.75rem;
    background: var(--pr-ink);
    border: 1px solid var(--pr-ink);
    color: var(--pr-cream);
    font: inherit;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.pr-admin-submit:hover {
    background: var(--pr-primary-dark);
    border-color: var(--pr-primary-dark);
}

.pr-admin-error {
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.75rem;
    background: var(--rz-danger-lighter);
    border-left: 2px solid var(--rz-danger);
    color: var(--rz-danger-darker);
    font-size: 0.875rem;
}

.pr-admin-error a {
    color: inherit;
}

.pr-admin-card {
    padding: 1.5rem;
    background: var(--rz-white);
    border: 1px solid var(--pr-line);
}

.pr-admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--pr-line);
    border: 1px solid var(--pr-line);
}

.pr-admin-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--rz-white);
}

.pr-admin-stat-value {
    font-family: var(--rz-heading-font-family);
    font-size: 1.75rem;
    line-height: 1.1;
    color: var(--pr-ink);
}

.pr-admin-stat-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pr-ink-muted);
}

.pr-admin-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pr-admin-list li {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 0;
    border-top: 1px solid var(--pr-line);
}

.pr-admin-list li:first-child {
    border-top: 0;
}

.pr-admin-list-note {
    display: block;
    font-size: 0.8125rem;
    color: var(--pr-ink-muted);
}

.pr-admin-grid-link {
    color: var(--pr-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--pr-brass);
}

.pr-admin-grid-link:hover {
    color: var(--pr-link-hover);
}

/* The variant, category and colour tables are hand-rolled rather than Radzen
   grids, because every cell is an editor and a grid would fight the tab order. */
.pr-admin-table-scroll {
    overflow-x: auto;
}

.pr-admin-table {
    width: 100%;
    border-collapse: collapse;
    /* Below this the editors start clipping, so the wrapper scrolls instead. */
    min-width: 720px;
}

.pr-admin-table th {
    padding: 0 0.5rem 0.625rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pr-ink-muted);
    border-bottom: 1px solid var(--pr-line);
}

.pr-admin-table td {
    padding: 0.375rem 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--pr-line);
}

.pr-admin-table tr:last-child td {
    border-bottom: 0;
}

.pr-admin-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pr-admin-sku {
    font-size: 0.8125rem;
    color: var(--pr-ink-muted);
    overflow-wrap: anywhere;
}

.pr-admin-swatch {
    display: block;
    width: 22px;
    height: 22px;
    border: 1px solid var(--pr-line-strong);
}

.pr-admin-swatch-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 0.375rem;
    vertical-align: -2px;
}

.pr-admin-out {
    color: var(--rz-danger);
    font-weight: 500;
}

.pr-admin-low {
    color: var(--rz-warning-darker);
    font-weight: 500;
}

/* Photography. The grid is deliberately generous: judging a shot from a
   thumbnail the size of a stamp is how the wrong one ends up as the main. */
.pr-admin-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
}

.pr-admin-photo {
    position: relative;
    margin: 0;
    border: 1px solid var(--pr-line);
    background: var(--rz-white);
    padding: 0.75rem;
}

.pr-admin-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--pr-mist);
}

.pr-admin-photo-primary {
    border-color: var(--pr-ink);
    box-shadow: inset 0 0 0 1px var(--pr-ink);
}

.pr-admin-photo-flag {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    padding: 4px 10px;
    background: var(--pr-ink);
    color: var(--pr-cream);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pr-admin-photo figcaption {
    margin-top: 0.75rem;
}

/* The list row thumbnail: small, but a photograph is still the fastest way to
   tell two collars apart. */
.pr-admin-thumb {
    width: 44px;
    height: 55px;
    object-fit: cover;
    display: block;
    background: var(--pr-mist);
    border: 1px solid var(--pr-line);
}

.pr-admin-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rz-heading-font-family);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--pr-ink-muted);
}



/* ------------------------------------------------------------------ */
/* Radzen component tuning                                             */
/* ------------------------------------------------------------------ */
.rz-textbox, .rz-textarea, .rz-dropdown, .rz-numeric, .rz-spinner {
    border-radius: 0;
    background: var(--pr-cream);
}

.rz-tabview-nav li .rz-tabview-title {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.rz-steps-item .rz-steps-number {
    border-radius: 0;
}

.rz-steps-item .rz-steps-title {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* Three steps side by side need about 410px; below that they were running off
   the edge of the checkout and taking the page's width with them. Let them
   wrap and drop the connecting rules, which only read as joins on one line. */
@media (max-width: 560px) {
    .rz-steps > ul {
        flex-wrap: wrap;
        gap: 0.5rem 1.25rem;
    }

    .rz-steps .rz-steps-item:not(:last-child) {
        flex: 0 0 auto;
    }

    .rz-steps .rz-steps-item:not(:last-child)::after {
        display: none;
    }

    .rz-steps-item .rz-steps-title {
        letter-spacing: 0.08em;
    }
}

.rz-card {
    box-shadow: none;
    border: 1px solid var(--pr-line);
}

/* iOS Safari zooms the whole page when a focused field is under 16px, and
   Radzen's fluent inputs ship at 0.875rem. Hold the floor at 16px. */
.rz-textbox, .rz-textarea, .rz-numeric input, .rz-dropdown .rz-dropdown-label,
.rz-dropdown-filter, .rz-autocomplete input, .rz-datepicker input,
.rz-inputtext, input, textarea, select {
    font-size: 1rem;
}

/* Radzen pins its text inputs to a fixed height of 32px. Because the box model
   is border-box, that height swallows the field's own padding instead of adding
   to it, which crushed the newsletter box to a two-pixel content strip. Let the
   padding do the sizing and hold the floor at a full touch row. */
.rz-textbox,
.rz-textarea,
.rz-dropdown {
    height: auto;
    min-height: var(--pr-tap);
}

/* Radzen buttons and list items inherit their own paddings; hold them to the
   platform minimum control size so they stay comfortable on touch. The numeric
   spinners are excluded: they are stacked inside a single field, so a 44px
   floor on each made them twice the height of the box they live in. */
.rz-button:not(.rz-numeric-button), .rz-radiobutton-box, .rz-chkbox-box {
    min-height: var(--pr-tap);
}

/* The field is the touch target; the two arrows split its height and are the
   secondary way in, so they hold the 28px reduced minimum rather than 44. */
.rz-numeric {
    min-height: var(--pr-tap);
}

.rz-numeric .rz-numeric-input {
    min-height: calc(var(--pr-tap) - 2px);
}

.rz-numeric .rz-numeric-button {
    min-width: 28px;
    height: calc((var(--pr-tap) - 2px) / 2);
}

/* Radzen's accordion header is a button; it ships at 36px. */
.rz-accordion-header > button,
.rz-accordion-header > a {
    min-height: var(--pr-tap);
    display: flex;
    align-items: center;
}

.rz-radiobutton-box, .rz-chkbox-box {
    min-width: var(--pr-tap);
}

/* An icon-only button has no text to widen it — the menu toggle came out
   32px across, which is a miss on a phone. */
.rz-button.rz-button-icon-only:not(.rz-numeric-button) {
    min-width: var(--pr-tap);
}

.rz-radiobutton, .rz-chkbox {
    display: inline-flex;
    align-items: center;
    min-height: var(--pr-tap);
}

/* Data grids are the one wide thing on the site; let them scroll sideways on
   a phone instead of forcing the page to. */
.pr-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------------ */
/* Focus and keyboard                                                  */
/* ------------------------------------------------------------------ */
/* Radzen's fluent sheet clears the UA outline on most controls, which leaves
   keyboard users with nothing to follow. Put one visible ring back on
   everything focusable, using :focus-visible so pointer clicks stay quiet. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.rz-button:focus-visible,
.rz-textbox:focus-visible,
.rz-textarea:focus-visible,
.rz-dropdown:focus-visible,
.rz-numeric:focus-visible,
.rz-accordion-header a:focus-visible,
.rz-steps-item a:focus-visible,
.rz-tabview-nav a:focus-visible {
    outline: 2px solid var(--pr-focus);
    outline-offset: 3px;
}

/* The colour picker draws its own selected ring inside the button box, so its
   focus ring is pulled in to sit just outside the disc. */
.pr-swatch-button:focus-visible {
    outline-offset: -4px;
}

.pr-option:focus-visible,
.pr-thumb-button:focus-visible {
    outline-offset: 2px;
}

/* Windows high contrast: system colours replace the palette, so make sure the
   ring survives and selected states keep a non-colour cue. */
@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    .rz-button:focus-visible {
        outline: 2px solid Highlight;
    }

    .pr-option-selected,
    .pr-shot-thumb-selected {
        border: 2px solid Highlight;
    }
}

.pr-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

::selection {
    background: var(--pr-hero);
    color: var(--pr-ink);
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                      */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
.pr-mobile-only {
    display: none;
}

@media (max-width: 900px) {
    .pr-header-inner {
        grid-template-columns: auto 1fr auto;
        padding: 0.25rem 1rem;
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .pr-desktop-only {
        display: none !important;
    }

    .pr-mobile-only {
        display: flex;
    }

    .pr-section {
        padding: 3rem 1.25rem;
        padding-left: max(1.25rem, env(safe-area-inset-left));
        padding-right: max(1.25rem, env(safe-area-inset-right));
    }

    .pr-footer {
        padding: 3rem 1.25rem 2rem;
        padding-left: max(1.25rem, env(safe-area-inset-left));
        padding-right: max(1.25rem, env(safe-area-inset-right));
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }

    .pr-line-item {
        grid-template-columns: 72px 1fr;
    }

    .pr-line-item > :last-child {
        grid-column: 1 / -1;
    }

    /* The drawer is the only navigation on a phone, so its rows get the full
       target height and a rule between them. */
    .pr-nav-drawer .pr-navlink {
        width: 100%;
        border-bottom: 1px solid var(--pr-line);
    }

    .pr-nav-drawer .pr-navlink:last-child {
        border-bottom: 0;
    }

    .pr-nav-drawer .pr-navlink::after {
        content: none;
    }
}

/* Small phones: the three-up header runs out of room for the wordmark before
   the 900px breakpoint has anything left to give. */
@media (max-width: 420px) {
    .pr-wordmark {
        font-size: 1.125rem;
    }

    .pr-wordmark-sub {
        letter-spacing: 0.2em;
    }

    .pr-header-inner {
        gap: 0.5rem;
    }

    .pr-grid {
        gap: 1.25rem;
    }
}

/* Short landscape windows on a phone: the hero should not eat the viewport. */
@media (max-height: 520px) and (orientation: landscape) {
    .pr-hero-media {
        height: 60vh;
    }

    .pr-toile-band {
        height: 55vh;
    }
}

/* The back office is a desktop job, but a restock run happens on a phone in the
   workshop — so the rail unpins and lies flat rather than eating half the width. */
@media (max-width: 900px) {
    .pr-admin {
        grid-template-columns: minmax(0, 1fr);
    }

    .pr-admin-side {
        position: static;
        height: auto;
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .pr-admin-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 1.25rem;
    }

    .pr-admin-navlink-active {
        padding-left: 0;
        box-shadow: inset 0 -2px 0 var(--pr-brass);
    }

    .pr-admin-side-foot {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .pr-admin-signout {
        width: auto;
        margin-left: auto;
    }

    .pr-admin-main {
        padding: 2rem 1.25rem 3rem;
    }

    .pr-admin-card {
        padding: 1.25rem;
    }
}