/* ==========================================================================
   JWL Crown Metals Design System
   ========================================================================== */

:root {
    --color-ink: #15130f;
    --color-charcoal: #24211c;
    --color-graphite: #403b33;
    --color-muted: #746d61;
    --color-gold: #d4a83f;
    --color-gold-soft: #e4c66f;
    --gradient-logo-gold: linear-gradient(135deg, #fff0aa 0%, var(--color-gold) 46%, #fff4bd 100%);
    --color-silver: #d8d8d4;
    --color-copper: #b56a3f;
    --color-ivory: #fbf7ed;
    --color-paper: #f4efe3;
    --color-gold-wash: #fdf9ec;
    --color-vault-pattern: #24211c;
    --color-white: #ffffff;
    --color-success: #497f52;
    --color-danger: #9e3f36;

    --font-heading: "Playfair Display", Georgia, serif;
    --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --container-width: 1180px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-full: 999px;
    --shadow-soft: 0 18px 50px rgb(21 19 15 / 0.08);
    --shadow-lift: 0 24px 70px rgb(21 19 15 / 0.16);
    --transition: 180ms ease;

    --bs-primary: var(--color-gold);
    --bs-primary-rgb: 212, 168, 63;
    --bs-secondary: var(--color-graphite);
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--color-ink);
    --bs-body-bg: var(--color-ivory);
    --bs-border-radius: var(--radius-md);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-ivory);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    letter-spacing: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--color-gold);
}

button {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
}

h1 {
    max-width: 17ch;
    font-size: 3.65rem;
}

h2 {
    font-size: 2.85rem;
}

h1,
h2 {
    position: relative;
    display: block;
    color: var(--color-ink);
    isolation: isolate;
    --heading-outline-width: 3px;
}

h1::before,
h2::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: none;
    color: transparent;
    content: attr(data-outline);
    pointer-events: none;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: var(--heading-outline-width) var(--color-ink);
}

h1:not([data-outline])::before,
h2:not([data-outline])::before {
    content: none;
}

.spot-card h2::before,
.trust-item h2::before {
    content: none;
}

.spot-card h2 .heading-fill,
.trust-item h2 .heading-fill {
    animation: none;
    background: none;
    color: var(--color-gold);
    -webkit-text-fill-color: var(--color-gold);
}

.heading-fill {
    position: relative;
    z-index: 1;
    display: inline;
    background: var(--gradient-logo-gold);
    background-clip: text;
    background-position: 0% 50%;
    background-size: 220% 100%;
    color: var(--color-gold);
    animation: heading-gold-flow 7s ease-in-out infinite alternate;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes heading-gold-flow {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}

h3 {
    font-size: 1.25rem;
}

p {
    margin: 0;
}

/* Layout */

.site-container {
    width: min(100% - 2rem, var(--container-width));
    margin-inline: auto;
}

.section {
    padding-block: var(--space-9);
}

.section--tight {
    padding-block: var(--space-7);
}

.section--paper {
    background: var(--color-gold-wash);
}

.section-header {
    max-width: 720px;
    margin-bottom: var(--space-7);
}

.section-header--center {
    margin-inline: auto;
    text-align: center;
}

.section-header p {
    max-width: 58ch;
    margin-top: var(--space-4);
    color: var(--color-muted);
    font-size: 1.08rem;
}

.section-header--center p {
    margin-inline: auto;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    color: var(--color-gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 2.25rem;
    height: 1px;
    background: currentColor;
    content: "";
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}

.btn-brand {
    min-height: 2.9rem;
    border: 1px solid var(--color-gold);
    background: var(--color-gold);
    color: var(--color-ink);
    padding: 0.85rem 1.35rem;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.btn-brand:hover,
.btn-brand:focus {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-white);
    transform: translateY(-1px);
}

.btn-brand--large {
    min-height: 3.25rem;
    padding-inline: 1.6rem;
}

.btn-quiet {
    border-color: rgb(21 19 15 / 0.16);
    background: transparent;
    color: var(--color-ink);
}

.btn-quiet:hover,
.btn-quiet:focus {
    border-color: var(--color-gold);
    background: var(--color-gold);
    color: var(--color-ink);
}

/* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgb(21 19 15 / 0.96);
    backdrop-filter: blur(18px);
}

.site-header.is-scrolled {
    box-shadow: 0 12px 30px rgb(21 19 15 / 0.24);
}

.market-ribbon {
    border-bottom: 1px solid rgb(216 216 212 / 0.12);
    background: #0e0d0b;
    color: var(--color-silver);
    font-size: 0.82rem;
}

.market-ribbon__inner {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    gap: var(--space-4);
    overflow-x: auto;
    white-space: nowrap;
}

.market-ribbon__label {
    color: var(--color-gold);
    font-weight: 700;
}

.market-ribbon__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.market-ribbon__item strong {
    color: var(--color-white);
}

.market-ribbon__change--up {
    color: #93d49b;
}

.market-ribbon__change--down {
    color: #d9948d;
}

.market-ribbon__note {
    color: rgb(216 216 212 / 0.72);
}

.site-nav {
    border-bottom: 1px solid rgb(216 216 212 / 0.1);
    padding-block: 0.65rem;
}

.site-nav__inner {
    display: flex;
    justify-content: space-between;
}

.site-nav__inner,
.site-nav__menu {
    align-items: center;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    font-weight: 800;
}

.site-brand__mark {
    width: 7rem;
    height: 4rem;
    border-radius: 0;
    object-fit: contain;
}

.site-nav__links {
    gap: var(--space-1);
    margin-inline: auto;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.6rem;
    border-radius: var(--radius-full);
    padding-inline: var(--space-4);
    color: rgb(216 216 212 / 0.88);
    font-size: 0.94rem;
    font-weight: 700;
    transition: background var(--transition), color var(--transition);
}

.site-nav__link:hover,
.site-nav__link:focus {
    background: rgb(216 216 212 / 0.1);
    color: var(--color-gold);
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.site-nav__account {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    border: 1px solid rgb(216 216 212 / 0.2);
    border-radius: var(--radius-full);
    color: rgb(216 216 212 / 0.86);
    padding-inline: var(--space-4);
    font-size: 0.86rem;
    font-weight: 800;
    transition: border-color var(--transition), color var(--transition), transform var(--transition);
}

.site-nav__account:hover,
.site-nav__account:focus {
    border-color: var(--color-gold);
    color: var(--color-gold);
    transform: translateY(-1px);
}

.cart-button,
.site-nav__toggle {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(216 216 212 / 0.28);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-white);
    transition: border-color var(--transition), transform var(--transition);
}

.cart-button:hover,
.site-nav__toggle:hover {
    border-color: var(--color-gold);
    transform: translateY(-1px);
}

.cart-button__icon {
    width: 1rem;
    height: 1.1rem;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.cart-button__icon::before {
    display: block;
    width: 0.5rem;
    height: 0.35rem;
    margin: -0.35rem auto 0;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    content: "";
}

.cart-button__count {
    position: absolute;
    top: -0.2rem;
    right: -0.15rem;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    background: var(--color-gold);
    color: var(--color-ink);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.25rem;
    text-align: center;
}

.site-nav__toggle {
    flex-direction: column;
    gap: 0.22rem;
}

.site-nav__toggle-line {
    width: 1rem;
    height: 2px;
    background: currentColor;
}

/* Hero */

.hero-section {
    --hero-crown-tile-height: 5rem;
    --hero-crown-tile-width: 8.5rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-7);
    background: linear-gradient(115deg, var(--color-ivory), var(--color-paper));
}

.hero-section::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        url("../images/crown-graphic.svg"),
        url("../images/crown-graphic.svg");
    background-position:
        0 0,
        calc(var(--hero-crown-tile-width) / 2) calc(var(--hero-crown-tile-height) / 2);
    background-repeat: repeat;
    background-size:
        var(--hero-crown-tile-width) var(--hero-crown-tile-height),
        var(--hero-crown-tile-width) var(--hero-crown-tile-height);
    content: "";
    mix-blend-mode: multiply;
    opacity: 0.055;
    pointer-events: none;
}

.hero-section__grid {
    display: grid;
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.82fr);
    align-items: center;
    gap: var(--space-8);
}

.hero-section__content p {
    max-width: 42rem;
    margin-block: var(--space-4) var(--space-5);
    color: var(--color-graphite);
    font-size: 1.08rem;
}

.hero-showcase {
    position: relative;
    min-height: 32rem;
    perspective: 1200px;
}

.hero-showcase::before {
    position: absolute;
    top: 11%;
    right: 9%;
    width: min(64%, 25rem);
    aspect-ratio: 1;
    border: 1px solid rgb(212 168 63 / 0.28);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgb(255 240 170 / 0.35), rgb(212 168 63 / 0.08));
    content: "";
    filter: blur(0);
    transform: rotate(7deg);
    animation: hero-glow-drift 8s ease-in-out infinite;
}

.hero-product-card {
    display: block;
    position: absolute;
    overflow: hidden;
    border: 1px solid rgb(21 19 15 / 0.12);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-white);
    box-shadow: var(--shadow-soft);
    transform-origin: center;
    transition: box-shadow var(--transition), transform var(--transition);
    will-change: transform;
}

.hero-product-card::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0 38%, rgb(255 255 255 / 0.32) 46%, transparent 56% 100%);
    content: "";
    opacity: 0;
    transform: translateX(-120%);
    transition: opacity var(--transition);
}

.hero-product-card:hover,
.hero-product-card:focus {
    z-index: 5;
    box-shadow: var(--shadow-lift);
}

.hero-product-card:hover::after,
.hero-product-card:focus::after {
    opacity: 1;
    animation: hero-card-shine 1s ease;
}

.hero-product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}

.hero-product-card:hover img,
.hero-product-card:focus img {
    transform: scale(1.055);
}

.hero-product-card--main {
    right: 0;
    bottom: 2rem;
    z-index: 3;
    width: min(78%, 30rem);
    aspect-ratio: 1;
    animation: hero-card-float-main 7.5s ease-in-out infinite;
}

.hero-product-card--top {
    top: 0;
    left: 1rem;
    z-index: 3;
    width: min(37%, 14rem);
    aspect-ratio: 1;
    animation: hero-card-float-top 8.4s ease-in-out infinite;
}

.hero-product-card--bottom {
    bottom: -0.5rem;
    left: -3.5rem;
    z-index: 4;
    width: min(34%, 12.75rem);
    aspect-ratio: 1;
    animation: hero-card-float-bottom 8s ease-in-out infinite;
}

.hero-product-card__meta {
    display: grid;
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    left: var(--space-3);
    z-index: 2;
    gap: var(--space-1);
    border: 1px solid rgb(255 255 255 / 0.24);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgb(21 19 15 / 0.28), rgb(21 19 15 / 0.82));
    padding: var(--space-3);
    backdrop-filter: blur(10px);
}

.hero-product-card__meta span {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.25;
}

.hero-product-card__meta strong {
    color: var(--color-gold-soft);
    font-size: 1rem;
    line-height: 1.1;
}

.hero-product-card--main .hero-product-card__meta {
    right: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: var(--space-4);
}

.hero-product-card--main .hero-product-card__meta span {
    font-size: 0.95rem;
}

.hero-product-card--main .hero-product-card__meta strong {
    font-size: 1.35rem;
}

@keyframes hero-card-float-main {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-1deg);
    }

    50% {
        transform: translate3d(-0.45rem, -0.65rem, 0) rotate(1.5deg);
    }
}

@keyframes hero-card-float-top {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(4deg);
    }

    50% {
        transform: translate3d(0.35rem, 0.75rem, 0) rotate(1deg);
    }
}

@keyframes hero-card-float-bottom {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-5deg);
    }

    50% {
        transform: translate3d(0.65rem, -0.45rem, 0) rotate(-2deg);
    }
}

@keyframes hero-card-shine {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

@keyframes hero-glow-drift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(7deg);
    }

    50% {
        transform: translate3d(-0.8rem, 0.4rem, 0) rotate(3deg);
    }
}

/* Spot Prices */

.spot-section {
    border-block: 1px solid rgb(21 19 15 / 0.08);
    background: var(--color-white);
}

.spot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 14rem)) minmax(16rem, 1fr);
    align-items: center;
    gap: var(--space-4);
}

.spot-card {
    min-height: 10rem;
    border: 1px solid rgb(21 19 15 / 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

.spot-card span {
    color: var(--color-gold);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.spot-card h2 {
    --heading-outline-width: 0px;
    margin-top: var(--space-2);
    font-size: 1.5rem;
    line-height: 1.15;
}

.spot-card strong {
    display: block;
    margin-top: var(--space-3);
    font-size: 1.5rem;
}

.spot-card__change {
    font-weight: 700;
}

.spot-card__change--up {
    color: var(--color-success);
}

.spot-card__change--down {
    color: var(--color-danger);
}

.spot-grid__note {
    color: var(--color-muted);
}

/* Category Circles */

.category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
}

.category-circle {
    display: flex;
    position: relative;
    align-items: center;
    min-height: 12rem;
    aspect-ratio: 1;
    border: 1px solid rgb(21 19 15 / 0.1);
    border-radius: var(--radius-full);
    background: var(--color-white);
    padding: var(--space-5);
    text-align: center;
    flex-direction: column;
    justify-content: center;
    isolation: isolate;
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.category-circle::before,
.category-circle::after {
    position: absolute;
    border-radius: var(--radius-full);
    content: "";
    pointer-events: none;
}

.category-circle::before {
    inset: 0.55rem;
    border: 2px dotted rgb(212 168 63 / 0.88);
    opacity: 0;
    transition: opacity var(--transition);
}

.category-circle::after {
    inset: 1.2rem;
    border: 1px solid rgb(212 168 63 / 0.14);
}

.category-circle:hover,
.category-circle:focus {
    border-color: rgb(212 168 63 / 0.48);
    box-shadow: var(--shadow-soft);
    transform: translateY(-4px);
}

.category-circle:hover::before,
.category-circle:focus::before {
    animation: category-border-spin 8s linear infinite;
    opacity: 1;
}

.category-circle__icon {
    display: inline-flex;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-full);
    background: rgb(212 168 63 / 0.08);
    color: var(--color-gold);
}

.category-circle__icon svg {
    width: 2.75rem;
    height: 2.75rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.category-circle__label {
    display: block;
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
}

@keyframes category-border-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Products */

.product-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-5);
}

.product-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-bottom: var(--space-7);
}

.filter-button {
    min-height: 2.4rem;
    border: 1px solid rgb(21 19 15 / 0.12);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-graphite);
    padding-inline: var(--space-4);
    font-size: 0.9rem;
    font-weight: 700;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.filter-button:hover,
.filter-button:focus,
.filter-button.is-active {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-white);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
}

.product-card {
    display: flex;
    min-width: 0;
    border: 1px solid rgb(21 19 15 / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-white);
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}

.product-card:hover,
.product-card:focus-within {
    box-shadow: var(--shadow-lift);
    transform: translateY(-5px);
}

.product-card.is-hidden {
    display: none;
}

.product-card__media {
    display: block;
    position: relative;
    aspect-ratio: 1;
    background: var(--color-paper);
    overflow: hidden;
}

.product-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 240ms ease, transform 240ms ease;
}

.product-card__image--hover {
    opacity: 0;
}

.product-card:hover .product-card__image--primary {
    opacity: 0;
    transform: scale(1.03);
}

.product-card:hover .product-card__image--hover {
    opacity: 1;
    transform: scale(1.03);
}

.product-card__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    border-radius: var(--radius-full);
    background: rgb(251 247 237 / 0.92);
    color: var(--color-ink);
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 800;
}

.product-card__body {
    display: flex;
    min-height: 15.5rem;
    padding: var(--space-5);
    flex: 1;
    flex-direction: column;
}

.product-card__category {
    margin-bottom: var(--space-2);
    color: var(--color-copper);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.product-card h3 {
    min-height: 3.4rem;
}

.product-card h3 a:hover {
    color: var(--color-gold);
}

.product-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block: auto var(--space-4);
    padding-top: var(--space-5);
}

.product-card__meta strong {
    font-size: 1.25rem;
}

.product-card__meta span {
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.product-card__button {
    width: 100%;
    border-color: var(--color-gold-soft);
    background: var(--color-gold-soft);
    color: var(--color-ink);
}

.product-card__button:hover,
.product-card__button:focus {
    border-color: var(--color-gold);
    background: var(--color-gold);
    color: var(--color-ink);
}

/* Product Detail */

.product-detail-hero {
    padding-block: var(--space-7) var(--space-9);
    background: linear-gradient(115deg, var(--color-ivory), var(--color-paper));
}

.breadcrumb-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.breadcrumb-nav a {
    color: var(--color-graphite);
}

.breadcrumb-nav a:hover,
.breadcrumb-nav a:focus {
    color: var(--color-gold);
}

.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(22rem, 0.78fr);
    align-items: start;
    gap: var(--space-7);
}

.product-gallery {
    display: grid;
    gap: var(--space-4);
}

.product-gallery__main,
.product-gallery__thumbs img {
    border: 1px solid rgb(21 19 15 / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
}

.product-gallery__main {
    overflow: hidden;
}

.product-gallery__main img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.product-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.product-gallery__thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.product-summary {
    border: 1px solid rgb(21 19 15 / 0.1);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 0.9);
    padding: var(--space-6);
    box-shadow: var(--shadow-soft);
}

.product-summary h1 {
    max-width: 12ch;
    font-size: 3rem;
}

.product-summary__lead {
    margin-top: var(--space-4);
    color: var(--color-graphite);
    font-size: 1.02rem;
}

.product-price-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-block: var(--space-5);
}

.product-price-block div {
    border: 1px solid rgb(21 19 15 / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-gold-wash);
    padding: var(--space-4);
}

.product-price-block span,
.purchase-panel__row label,
.purchase-options legend,
.product-detail-list dt {
    display: block;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.product-price-block strong {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-ink);
    font-size: 1.35rem;
    line-height: 1.2;
}

.purchase-panel {
    display: grid;
    gap: var(--space-4);
}

.purchase-panel__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.quantity-control {
    display: grid;
    width: 11.5rem;
    grid-template-columns: 2.8rem 1fr 2.8rem;
    border: 1px solid rgb(21 19 15 / 0.14);
    border-radius: var(--radius-full);
    background: var(--color-white);
    overflow: hidden;
}

.quantity-control button,
.quantity-control input {
    min-height: 2.8rem;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    text-align: center;
}

.quantity-control button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-weight: 900;
}

.quantity-control button:hover,
.quantity-control button:focus {
    background: var(--color-gold-wash);
}

.quantity-control input {
    width: 100%;
    border-inline: 1px solid rgb(21 19 15 / 0.1);
    font-weight: 800;
}

.purchase-options {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    border: 0;
    padding: 0;
}

.purchase-options label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    border: 1px solid rgb(21 19 15 / 0.12);
    border-radius: var(--radius-md);
    background: var(--color-white);
    padding: var(--space-4);
}

.purchase-options input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.25rem;
    accent-color: var(--color-gold);
}

.purchase-options strong,
.purchase-options small {
    display: block;
}

.purchase-options strong {
    color: var(--color-ink);
    line-height: 1.25;
}

.purchase-options small {
    margin-top: var(--space-1);
    color: var(--color-muted);
    font-size: 0.86rem;
}

.purchase-panel__button {
    width: 100%;
}

.product-info-section {
    background: var(--color-white);
}

.product-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--space-5);
}

.product-info-card {
    border: 1px solid rgb(21 19 15 / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-ivory);
    padding: var(--space-6);
}

.product-info-card h2 {
    font-size: 2.25rem;
}

.product-detail-list {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-5) 0 0;
}

.product-detail-list div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 1px solid rgb(21 19 15 / 0.1);
    padding-bottom: var(--space-3);
}

.product-detail-list dd {
    margin: 0;
    color: var(--color-ink);
    font-weight: 800;
    text-align: right;
}

.product-info-card--dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--color-ink);
    color: var(--color-silver);
}

.product-info-card--dark::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-vault-pattern);
    content: "";
    opacity: 0.36;
    pointer-events: none;
    -webkit-mask-image: url("../images/crown-graphic.svg");
    mask-image: url("../images/crown-graphic.svg");
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 8rem 4.75rem;
    mask-size: 8rem 4.75rem;
}

.product-info-card--dark h2 {
    color: var(--color-white);
}

.product-info-card--dark p {
    max-width: 42rem;
    margin-top: var(--space-4);
}

.product-info-card__note {
    border-left: 3px solid var(--color-gold);
    padding-left: var(--space-4);
    color: var(--color-white);
    font-weight: 700;
}

.related-products .section-header {
    margin-bottom: var(--space-5);
}

/* Cart */

.cart-hero {
    padding-block: var(--space-7);
    background: linear-gradient(115deg, var(--color-ivory), var(--color-paper));
}

.cart-hero__copy {
    max-width: 44rem;
}

.cart-hero__copy p {
    max-width: 38rem;
    margin-top: var(--space-4);
    color: var(--color-graphite);
    font-size: 1.05rem;
}

.cart-section {
    background: var(--color-white);
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.42fr);
    align-items: start;
    gap: var(--space-5);
}

.cart-panel,
.cart-summary {
    border: 1px solid rgb(21 19 15 / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-ivory);
    padding: var(--space-6);
}

.cart-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.cart-panel__head h2,
.cart-summary h2 {
    font-size: 2.25rem;
}

.cart-empty {
    border: 1px dashed rgb(21 19 15 / 0.18);
    border-radius: var(--radius-md);
    background: var(--color-white);
    padding: var(--space-7);
    text-align: center;
}

.cart-empty p {
    max-width: 30rem;
    margin: var(--space-3) auto var(--space-5);
    color: var(--color-muted);
}

.cart-items {
    display: grid;
    gap: var(--space-4);
}

.cart-item {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    border: 1px solid rgb(21 19 15 / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-white);
    padding: var(--space-4);
}

.cart-item__media {
    display: block;
    border-radius: var(--radius-md);
    background: var(--color-paper);
    overflow: hidden;
}

.cart-item__media img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.cart-item__category {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-copper);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cart-item h3 {
    max-width: 32rem;
}

.cart-item h3 a:hover,
.cart-item h3 a:focus {
    color: var(--color-gold);
}

.cart-item p {
    margin-top: var(--space-2);
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.cart-item__fulfillment {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    margin-top: var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-gold-wash);
    color: var(--color-ink);
    padding-inline: var(--space-3);
    font-size: 0.78rem;
    font-weight: 800;
}

.cart-item__controls {
    display: grid;
    justify-items: end;
    gap: var(--space-3);
}

.cart-item__controls strong {
    font-size: 1.2rem;
}

.quantity-control--small {
    width: 8.75rem;
    grid-template-columns: 2.35rem 1fr 2.35rem;
}

.quantity-control--small button,
.quantity-control--small input {
    min-height: 2.35rem;
}

.cart-item__remove {
    border: 0;
    background: transparent;
    color: var(--color-muted);
    padding: 0;
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.cart-item__remove:hover,
.cart-item__remove:focus {
    color: var(--color-danger);
}

.cart-summary {
    position: sticky;
    top: 9rem;
    background: var(--color-ink);
    color: var(--color-silver);
}

.cart-summary h2 {
    color: var(--color-white);
}

.cart-totals {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.cart-totals div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 1px solid rgb(216 216 212 / 0.14);
    padding-bottom: var(--space-3);
}

.cart-totals dt {
    color: rgb(216 216 212 / 0.72);
    font-weight: 700;
}

.cart-totals dd {
    margin: 0;
    color: var(--color-white);
    font-weight: 800;
    text-align: right;
}

.cart-totals__total {
    align-items: baseline;
    border-bottom: 0;
    padding-top: var(--space-2);
}

.cart-totals__total dt,
.cart-totals__total dd {
    color: var(--color-gold-soft);
    font-size: 1.18rem;
}

.cart-summary__note {
    border-left: 3px solid var(--color-gold);
    margin-bottom: var(--space-5);
    padding-left: var(--space-4);
}

.cart-summary__note p,
.cart-summary__fineprint {
    margin-top: var(--space-2);
    color: rgb(216 216 212 / 0.72);
    font-size: 0.9rem;
}

.cart-summary__checkout {
    width: 100%;
}

.cart-summary__checkout:disabled {
    border-color: rgb(216 216 212 / 0.2);
    background: rgb(216 216 212 / 0.18);
    color: rgb(216 216 212 / 0.6);
    cursor: not-allowed;
    transform: none;
}

.cart-summary__checkout.is-disabled {
    border-color: rgb(216 216 212 / 0.2);
    background: rgb(216 216 212 / 0.18);
    color: rgb(216 216 212 / 0.6);
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* Checkout */

.checkout-section {
    background: var(--color-white);
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.42fr);
    align-items: start;
    gap: var(--space-5);
}

.checkout-empty,
.checkout-panel {
    border: 1px solid rgb(21 19 15 / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-ivory);
    padding: var(--space-6);
}

.checkout-empty {
    text-align: center;
}

.checkout-empty p {
    margin-block: var(--space-3) var(--space-5);
    color: var(--color-muted);
}

.checkout-panel__head {
    margin-bottom: var(--space-5);
}

.checkout-panel__head h2 {
    font-size: 2.25rem;
}

.checkout-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-5);
    border: 0;
    padding: 0;
}

.checkout-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    min-height: 10rem;
    border: 1px solid rgb(21 19 15 / 0.12);
    border-radius: var(--radius-md);
    background: var(--color-white);
    padding: var(--space-5);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.checkout-choice:hover,
.checkout-choice:focus-within,
.checkout-choice:has(input:checked) {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.checkout-choice input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.25rem;
    accent-color: var(--color-gold);
}

.checkout-choice strong,
.checkout-choice small {
    display: block;
}

.checkout-choice strong {
    color: var(--color-ink);
    line-height: 1.2;
}

.checkout-choice small {
    margin-top: var(--space-2);
    color: var(--color-muted);
    font-size: 0.9rem;
}

.checkout-choice--vault {
    background:
        linear-gradient(135deg, rgb(21 19 15 / 0.94), rgb(36 33 28 / 0.92)),
        var(--color-ink);
    color: var(--color-silver);
}

.checkout-choice--vault strong {
    color: var(--color-white);
}

.checkout-choice--vault small {
    color: rgb(216 216 212 / 0.76);
}

.checkout-vault-callout,
.checkout-summary__vault-note {
    border-left: 3px solid var(--color-gold);
    border-radius: var(--radius-sm);
    background: var(--color-gold-wash);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
}

.checkout-vault-callout p,
.checkout-summary__vault-note p {
    margin: var(--space-2) 0 0;
    color: var(--color-graphite);
}

.checkout-form-section {
    display: grid;
    gap: var(--space-4);
    border-top: 1px solid rgb(21 19 15 / 0.1);
    padding-top: var(--space-5);
}

.checkout-form-section + .checkout-form-section {
    margin-top: var(--space-5);
}

.checkout-form-section h3 {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.checkout-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.checkout-field-grid__wide {
    grid-column: 1 / -1;
}

.checkout-form label {
    display: grid;
    gap: var(--space-2);
}

.checkout-form-section label > span {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.checkout-form input:not([type="radio"]),
.checkout-form textarea {
    width: 100%;
    border: 1px solid rgb(21 19 15 / 0.14);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-ink);
    padding: 0.85rem 1rem;
}

.checkout-form textarea {
    resize: vertical;
}

.checkout-payment-button {
    width: 100%;
    margin-top: var(--space-6);
}

.checkout-payment-button:disabled {
    border-color: rgb(21 19 15 / 0.16);
    background: rgb(21 19 15 / 0.16);
    color: rgb(21 19 15 / 0.52);
    cursor: not-allowed;
    transform: none;
}

.checkout-fineprint {
    margin-top: var(--space-3);
    color: var(--color-muted);
    font-size: 0.9rem;
    text-align: center;
}

.checkout-summary {
    position: sticky;
    top: 9rem;
    background: var(--color-ink);
    color: var(--color-silver);
}

.checkout-summary h2 {
    color: var(--color-white);
}

.checkout-summary__items {
    display: grid;
    gap: var(--space-3);
}

.checkout-summary-item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    border-bottom: 1px solid rgb(216 216 212 / 0.14);
    padding-bottom: var(--space-3);
}

.checkout-summary-item img {
    width: 4.5rem;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.checkout-summary-item span,
.checkout-summary-item small {
    display: block;
    color: rgb(216 216 212 / 0.62);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.checkout-summary-item strong {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-white);
    line-height: 1.25;
}

.checkout-summary-item small {
    margin-top: var(--space-1);
    text-transform: none;
}

.checkout-summary-item b {
    color: var(--color-gold-soft);
    white-space: nowrap;
}

.checkout-summary__vault-note {
    margin: var(--space-5) 0 0;
    background: rgb(228 198 111 / 0.12);
    color: var(--color-white);
}

.checkout-summary__vault-note p {
    color: rgb(216 216 212 / 0.76);
}

/* Vault Page */

.vault-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-8);
    background: linear-gradient(115deg, var(--color-ivory), var(--color-paper));
}

.vault-page-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        url("../images/crown-graphic.svg"),
        url("../images/crown-graphic.svg");
    background-position: 0 0, 4.25rem 2.5rem;
    background-repeat: repeat;
    background-size: 8.5rem 5rem;
    content: "";
    mix-blend-mode: multiply;
    opacity: 0.045;
    pointer-events: none;
}

.vault-page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(28rem, 1fr);
    align-items: center;
    gap: var(--space-7);
}

.vault-page-hero__content p {
    max-width: 42rem;
    margin-block: var(--space-4) var(--space-5);
    color: var(--color-graphite);
    font-size: 1.08rem;
}

.vault-animation-card {
    margin: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    padding: var(--space-4);
    box-shadow: none;
}

.vault-flow-svg {
    display: block;
    width: 100%;
    height: auto;
}

.vault-flow-svg text {
    font-family: var(--font-body);
    font-weight: 800;
    text-anchor: middle;
}

.vault-flow-svg__track {
    fill: none;
    stroke: var(--color-gold);
    stroke-dasharray: 10 12;
    stroke-linecap: round;
    stroke-width: 4;
    animation: vault-track-drift 2.8s linear infinite;
}

.vault-flow-svg__track--out {
    animation-delay: -1.2s;
}

.vault-flow-svg__label circle {
    fill: var(--color-ink);
    stroke: var(--color-gold);
    stroke-width: 2;
}

.vault-flow-svg__label text {
    fill: var(--color-gold-soft);
    font-size: 16px;
}

.vault-flow-svg__product-stack rect,
.vault-flow-svg__product-stack circle {
    fill: var(--color-gold-wash);
    stroke: var(--color-gold);
    stroke-width: 3;
}

.vault-flow-svg__product-stack text,
.vault-flow-svg__safe text,
.vault-flow-svg__shipment text {
    fill: var(--color-graphite);
    font-family: var(--font-heading);
    font-size: 20px;
}

.vault-flow-svg__moving {
    fill: url(#vaultGoldGradient);
    stroke: var(--color-ink);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
}

.vault-flow-svg__moving text {
    fill: var(--color-ink);
    font-size: 14px;
}

.vault-flow-svg__moving--one {
    animation: vault-piece-one 5.6s ease-in-out infinite;
}

.vault-flow-svg__moving--two {
    animation: vault-piece-two 5.6s ease-in-out infinite;
    animation-delay: 1.15s;
}

.vault-flow-svg__safe path,
.vault-flow-svg__safe circle,
.vault-flow-svg__safe rect {
    stroke: var(--color-gold);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.vault-flow-svg__safe-body {
    fill: var(--color-ink);
}

.vault-flow-svg__safe-door {
    fill: var(--color-charcoal);
}

.vault-flow-svg__dial {
    fill: var(--color-gold-wash);
    animation: vault-dial-pulse 2.8s ease-in-out infinite;
}

.vault-flow-svg__safe-glow {
    fill: none;
    stroke: var(--color-gold-soft);
    animation: vault-safe-glow 2.8s ease-in-out infinite;
}

.vault-flow-svg__shipment path {
    fill: var(--color-gold-wash);
    stroke: var(--color-gold);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.vault-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.vault-process-card,
.vault-choice-card,
.vault-window-card {
    border: 1px solid rgb(21 19 15 / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-white);
    padding: var(--space-5);
}

.vault-process-card {
    min-height: 16rem;
}

.vault-process-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-gold);
    color: var(--color-ink);
    font-weight: 900;
}

.vault-process-card p,
.vault-choice-card p,
.vault-window-card p {
    margin-top: var(--space-3);
    color: var(--color-muted);
}

.vault-page-compare {
    background: var(--color-white);
}

.vault-compare-grid,
.vault-window-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-5);
}

.vault-compare-copy p {
    max-width: 42rem;
    margin-top: var(--space-4);
    color: var(--color-muted);
}

.vault-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.vault-choice-card span {
    display: inline-flex;
    margin-bottom: var(--space-4);
    color: var(--color-gold);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vault-choice-card--featured {
    background: var(--color-ink);
    color: var(--color-silver);
}

.vault-choice-card--featured h3 {
    color: var(--color-white);
}

.vault-choice-card--featured p {
    color: rgb(216 216 212 / 0.78);
}

.vault-window-card {
    min-height: 20rem;
}

.vault-window-card h2 {
    font-size: 2.35rem;
}

.vault-window-card__note {
    border-left: 3px solid var(--color-gold);
    padding-left: var(--space-4);
    color: var(--color-ink);
    font-weight: 800;
}

.vault-window-card--dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--color-ink);
    color: var(--color-silver);
}

.vault-window-card--dark::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-vault-pattern);
    content: "";
    opacity: 0.38;
    pointer-events: none;
    -webkit-mask-image:
        url("../images/crown-graphic.svg"),
        url("../images/crown-graphic.svg");
    mask-image:
        url("../images/crown-graphic.svg"),
        url("../images/crown-graphic.svg");
    -webkit-mask-position: 0 0, 4rem 2.35rem;
    mask-position: 0 0, 4rem 2.35rem;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 8rem 4.75rem, 8rem 4.75rem;
    mask-size: 8rem 4.75rem, 8rem 4.75rem;
}

.vault-window-card--dark h2 {
    color: var(--color-white);
}

.vault-check-list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.vault-check-list li {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: var(--space-3);
    color: rgb(216 216 212 / 0.82);
}

.vault-check-list li::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--radius-full);
    background: var(--color-gold);
    color: var(--color-ink);
    content: "✓";
    font-size: 0.8rem;
    font-weight: 900;
}

.vault-page-products .section-header {
    margin-bottom: var(--space-5);
}

@keyframes vault-track-drift {
    to {
        stroke-dashoffset: -44;
    }
}

@keyframes vault-piece-one {
    0%,
    12% {
        opacity: 0;
        transform: translate(78px, 238px) scale(0.84);
    }

    26%,
    42% {
        opacity: 1;
        transform: translate(220px, 214px) scale(1);
    }

    56%,
    100% {
        opacity: 0;
        transform: translate(352px, 244px) scale(0.72);
    }
}

@keyframes vault-piece-two {
    0%,
    12% {
        opacity: 0;
        transform: translate(120px, 292px) scale(0.84);
    }

    30%,
    48% {
        opacity: 1;
        transform: translate(286px, 236px) scale(1);
    }

    62%,
    100% {
        opacity: 0;
        transform: translate(622px, 296px) scale(0.82);
    }
}

@keyframes vault-dial-pulse {
    0%,
    100% {
        fill: var(--color-gold-wash);
    }

    50% {
        fill: var(--color-gold-soft);
    }
}

@keyframes vault-safe-glow {
    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 1;
    }
}

/* Vault Account */

.account-hero,
.vault-account-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-8);
    background: linear-gradient(115deg, var(--color-ivory), var(--color-paper));
}

.account-hero::before,
.vault-account-hero::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        url("../images/crown-graphic.svg"),
        url("../images/crown-graphic.svg");
    background-position: 0 0, 4.25rem 2.5rem;
    background-repeat: repeat;
    background-size: 8.5rem 5rem;
    content: "";
    mix-blend-mode: multiply;
    opacity: 0.045;
    pointer-events: none;
}

.account-hero::after,
.vault-account-hero::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(21 19 15 / 0.58), rgb(21 19 15 / 0.26) 52%, transparent 78%);
    content: "";
    pointer-events: none;
}

.account-hero__grid,
.vault-account-hero__grid {
    display: grid;
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.55fr);
    align-items: center;
    gap: var(--space-7);
}

.account-hero__copy .eyebrow,
.vault-account-hero__copy .eyebrow {
    color: var(--color-gold-soft);
}

.account-hero__copy p,
.vault-account-hero__copy p {
    max-width: 42rem;
    margin-top: var(--space-4);
    color: rgb(255 255 255 / 0.86);
    font-size: 1.08rem;
}

.account-login-card,
.account-support-card,
.vault-account-summary,
.vault-dashboard-panel,
.vault-ship-panel {
    border: 1px solid rgb(21 19 15 / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-white);
    padding: var(--space-6);
    box-shadow: var(--shadow-soft);
}

.account-login-card {
    display: grid;
    gap: var(--space-4);
}

.account-login-card h2,
.account-support-card h2,
.vault-dashboard-panel h2,
.vault-ship-panel h2 {
    font-size: 2rem;
}

.form-field {
    display: grid;
    gap: var(--space-2);
}

.form-field label {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.form-field input {
    width: 100%;
    min-height: 3.15rem;
    border: 1px solid rgb(21 19 15 / 0.14);
    border-radius: var(--radius-full);
    background: var(--color-ivory);
    color: var(--color-ink);
    padding-inline: var(--space-4);
}

.form-field input:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgb(212 168 63 / 0.18);
    outline: 0;
}

/* Google Places autocomplete widget (checkout address field) — matched to .form-field input. */
[data-checkout-page] gmp-place-autocomplete {
    width: 100%;
    border: 1px solid rgb(21 19 15 / 0.14);
    border-radius: var(--radius-full);
    background-color: var(--color-ivory);
    color: var(--color-ink);
    font-family: inherit;
    font-size: 1rem;
}

[data-checkout-page] gmp-place-autocomplete::part(input) {
    min-height: 3.15rem;
    padding-inline: var(--space-4);
}

.account-login-card__button {
    width: 100%;
}

.account-login-card p,
.account-support-card p {
    color: var(--color-muted);
}

.account-support-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.vault-account-summary {
    background: var(--color-ink);
    color: var(--color-silver);
}

.vault-account-summary > span {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--color-gold);
    font-weight: 900;
    letter-spacing: 0.12em;
}

.vault-account-summary strong {
    display: block;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 2.1rem;
    line-height: 1.05;
}

.vault-account-summary dl {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
}

.vault-account-summary div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 1px solid rgb(216 216 212 / 0.14);
    padding-bottom: var(--space-3);
}

.vault-account-summary dt,
.vault-held-item dt,
.vault-ship-panel__facts dt {
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vault-account-summary dt {
    color: rgb(216 216 212 / 0.62);
}

.vault-account-summary dd,
.vault-held-item dd,
.vault-ship-panel__facts dd {
    margin: 0;
    font-weight: 800;
    text-align: right;
}

.vault-dashboard-section {
    background: var(--color-white);
}

.vault-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.42fr);
    align-items: start;
    gap: var(--space-5);
}

.vault-dashboard-panel__head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.vault-dashboard-panel__count {
    align-self: start;
    border-radius: var(--radius-full);
    background: var(--color-gold-wash);
    color: var(--color-ink);
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 900;
}

.vault-held-list {
    display: grid;
    gap: var(--space-4);
}

.vault-held-item {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    border: 1px solid rgb(21 19 15 / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-ivory);
    padding: var(--space-4);
}

.vault-held-item__media {
    display: block;
    border-radius: var(--radius-md);
    background: var(--color-paper);
    overflow: hidden;
}

.vault-held-item__media img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.vault-held-item__body > span {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-copper);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vault-held-item h3 a:hover,
.vault-held-item h3 a:focus {
    color: var(--color-gold);
}

.vault-held-item dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
}

.vault-held-item dd {
    text-align: left;
}

.vault-held-item__meta {
    display: grid;
    justify-items: end;
    gap: var(--space-1);
}

.vault-held-item__meta strong {
    font-size: 1.2rem;
}

.vault-held-item__meta span {
    color: var(--color-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.vault-ship-panel {
    position: sticky;
    top: 9rem;
    background: var(--color-ink);
    color: var(--color-silver);
}

.vault-ship-panel h2 {
    color: var(--color-white);
}

.vault-ship-panel p {
    margin-top: var(--space-4);
    color: rgb(216 216 212 / 0.76);
}

.vault-ship-panel__facts {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.vault-ship-panel__facts div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 1px solid rgb(216 216 212 / 0.14);
    padding-bottom: var(--space-3);
}

.vault-ship-panel__facts dt {
    color: rgb(216 216 212 / 0.62);
}

.vault-ship-panel__facts dd {
    color: var(--color-white);
}

.vault-ship-panel__button {
    width: 100%;
}

.vault-ship-panel__message {
    border-left: 3px solid var(--color-gold);
    padding-left: var(--space-4);
    color: var(--color-white);
    font-weight: 700;
}

.vault-add-more-section .section-header {
    margin-bottom: var(--space-5);
}

/* Crown Vault */

.vault-section {
    --vault-crown-tile-height: 5rem;
    --vault-crown-tile-width: 8.5rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--color-ink);
    color: var(--color-silver);
}

.vault-section::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--color-vault-pattern);
    content: "";
    opacity: 0.42;
    pointer-events: none;
    -webkit-mask-image:
        url("../images/crown-graphic.svg"),
        url("../images/crown-graphic.svg");
    mask-image:
        url("../images/crown-graphic.svg"),
        url("../images/crown-graphic.svg");
    -webkit-mask-position:
        0 0,
        calc(var(--vault-crown-tile-width) / 2) calc(var(--vault-crown-tile-height) / 2);
    mask-position:
        0 0,
        calc(var(--vault-crown-tile-width) / 2) calc(var(--vault-crown-tile-height) / 2);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size:
        var(--vault-crown-tile-width) var(--vault-crown-tile-height),
        var(--vault-crown-tile-width) var(--vault-crown-tile-height);
    mask-size:
        var(--vault-crown-tile-width) var(--vault-crown-tile-height),
        var(--vault-crown-tile-width) var(--vault-crown-tile-height);
}

.vault-section h2,
.vault-section h3 {
    color: var(--color-white);
}

.vault-section__grid {
    display: grid;
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
    gap: var(--space-7);
}

.vault-section__grid--single {
    grid-template-columns: minmax(0, 42rem);
    justify-content: center;
    text-align: center;
}

.vault-section__content p {
    max-width: 42rem;
    margin-top: var(--space-4);
}

.vault-section__fee {
    border-left: 3px solid var(--color-gold);
    padding-left: var(--space-4);
    color: var(--color-white);
    font-weight: 700;
}

.vault-section__grid--single .vault-section__fee {
    border-left: 0;
    border-top: 3px solid var(--color-gold);
    padding-top: var(--space-4);
    padding-left: 0;
}

.vault-section .btn-brand {
    margin-top: var(--space-6);
}

.vault-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.vault-step {
    min-height: 13rem;
    border: 1px solid rgb(216 216 212 / 0.16);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

.vault-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: var(--space-4);
    border-radius: 50%;
    background: var(--color-gold);
    color: var(--color-ink);
    font-weight: 800;
}

.vault-step p {
    margin-top: var(--space-3);
    color: rgb(216 216 212 / 0.78);
}

/* Trust */

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.trust-item {
    border-top: 1px solid rgb(21 19 15 / 0.16);
    padding-top: var(--space-5);
}

.trust-item h2 {
    --heading-outline-width: 0px;
    font-size: 1.65rem;
}

.trust-item p {
    margin-top: var(--space-3);
    color: var(--color-muted);
}

/* Footer */

.site-footer {
    background: var(--color-charcoal);
    color: rgb(216 216 212 / 0.76);
    padding-block: var(--space-8) var(--space-5);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1fr);
    gap: var(--space-7);
}

.site-footer h2 {
    color: var(--color-white);
}

.site-footer__brand p {
    max-width: 26rem;
    margin-top: var(--space-4);
    font-size: 0.92rem;
    line-height: 1.55;
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.site-footer__nav h2 {
    margin-bottom: var(--space-4);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-footer__nav a {
    display: block;
    margin-top: var(--space-2);
    color: rgb(216 216 212 / 0.76);
    font-size: 0.92rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.site-footer__nav a:hover {
    color: var(--color-gold);
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--space-5);
    margin-top: var(--space-7);
    border-top: 1px solid rgb(216 216 212 / 0.14);
    padding-top: var(--space-5);
    color: rgb(216 216 212 / 0.58);
    font-size: 0.86rem;
}

/* Utility Pages */

.utility-page {
    min-height: 62vh;
}

.utility-page__inner {
    max-width: 42rem;
}

.policy-page__inner {
    max-width: 48rem;
}

.utility-page p {
    margin-block: var(--space-4) var(--space-5);
    color: var(--color-muted);
}

.policy-page p {
    margin-block: var(--space-4) var(--space-5);
    color: var(--color-muted);
    font-size: 1.08rem;
}

/* Legal Documents (Terms & Conditions, Bailment & Storage Agreement) */

.legal-page__inner {
    max-width: 52rem;
}

.legal-page__header {
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-7);
    border-bottom: 1px solid rgb(64 59 51 / 0.16);
}

.legal-page__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-4);
    font-size: 0.9rem;
    color: var(--color-muted);
}

.legal-page__meta strong {
    color: var(--color-graphite);
    font-weight: 600;
}

.legal-page__lead {
    margin-top: var(--space-5);
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--color-graphite);
}

/* Table of contents */
.legal-toc {
    margin-bottom: var(--space-7);
    padding: var(--space-5) var(--space-6);
    background: var(--color-gold-wash);
    border: 1px solid rgb(212 168 63 / 0.28);
    border-radius: var(--radius-md);
}

.legal-toc h2 {
    margin: 0 0 var(--space-4);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-graphite);
}

.legal-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: var(--space-6);
    font-size: 0.95rem;
}

.legal-toc__list li {
    break-inside: avoid;
    margin-bottom: var(--space-2);
}

.legal-toc__list a {
    color: var(--color-graphite);
    text-decoration: none;
    transition: color var(--transition);
}

.legal-toc__list a:hover,
.legal-toc__list a:focus-visible {
    color: var(--color-gold);
    text-decoration: underline;
}

/* Document body */
.legal-doc {
    color: var(--color-ink);
    line-height: 1.7;
}

.legal-section {
    margin-bottom: var(--space-7);
    scroll-margin-top: 6rem; /* clears the sticky header when anchor-linked */
}

.legal-section > h2 {
    margin: 0 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    line-height: 1.25;
    color: var(--color-ink);
}

.legal-clause {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.legal-clause__n {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-graphite);
}

.legal-clause__t > p {
    margin: 0 0 var(--space-3);
}

.legal-clause__t > p:last-child {
    margin-bottom: 0;
}

/* (a) (b) (c) sub-lists and definition lists */
.legal-alpha {
    list-style: none;
    counter-reset: legal-alpha;
    margin: var(--space-3) 0 0;
    padding: 0;
}

.legal-alpha > li {
    counter-increment: legal-alpha;
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.legal-alpha > li::before {
    content: "(" counter(legal-alpha, lower-alpha) ")";
    color: var(--color-graphite);
    font-weight: 600;
}

.legal-alpha--defs > li > span:first-child::before {
    content: none;
}

.legal-defs {
    margin: var(--space-3) 0 0;
}

.legal-defs dt {
    font-weight: 600;
    color: var(--color-ink);
}

.legal-defs dd {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-4);
}

/* Placeholder to be supplied by the client / their lawyer */
.legal-blank {
    background: rgb(158 63 54 / 0.12);
    color: var(--color-danger);
    padding: 0 0.4em;
    border-radius: var(--radius-sm);
    font-weight: 600;
    white-space: nowrap;
}

.legal-note {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid rgb(64 59 51 / 0.16);
    font-size: 0.95rem;
    color: var(--color-muted);
}

@media (max-width: 640px) {
    .legal-toc__list {
        columns: 1;
    }

    .legal-clause {
        grid-template-columns: 2.5rem 1fr;
    }
}

/* Owner Guide (admin) */

.guide-doc {
    max-width: 52rem;
}

.guide-lead {
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--color-graphite);
    margin: 0 0 var(--space-6);
    max-width: 62ch;
}

.guide-doc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: rgb(36 33 28 / 0.06);
    padding: 0.1em 0.42em;
    border-radius: var(--radius-sm);
    border: 1px solid rgb(36 33 28 / 0.1);
}

.guide-toc {
    background: var(--color-gold-wash);
    border: 1px solid rgb(212 168 63 / 0.28);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-7);
}

.guide-toc h2 {
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin: 0 0 var(--space-4);
    font-weight: 700;
}

.guide-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: var(--space-7);
    counter-reset: guide-toc;
}

.guide-toc li {
    margin: 0 0 var(--space-2);
    break-inside: avoid;
    counter-increment: guide-toc;
}

.guide-toc a {
    display: flex;
    gap: 0.55em;
    align-items: baseline;
    text-decoration: none;
    color: var(--color-ink);
    font-size: 0.95rem;
}

.guide-toc a::before {
    content: counter(guide-toc, decimal-leading-zero);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-gold);
    font-variant-numeric: tabular-nums;
}

.guide-toc a:hover,
.guide-toc a:focus-visible {
    color: var(--color-gold);
}

.guide-section {
    margin: 0 0 var(--space-8);
    scroll-margin-top: 6rem;
}

.guide-section > h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 var(--space-3);
    display: flex;
    align-items: baseline;
    gap: 0.55em;
}

.guide-section > h2 .n {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-gold);
    min-width: 2em;
    height: 2em;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transform: translateY(-2px);
}

.guide-section p {
    max-width: 64ch;
}

.guide-section h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: var(--space-5) 0 var(--space-2);
}

.guide-section ul,
.guide-section ol.steps {
    max-width: 62ch;
}

.guide-section ol.steps li,
.guide-section ul li {
    margin: 0.35rem 0;
}

/* Screenshot in a browser frame */
.guide-shot {
    margin: var(--space-5) 0 var(--space-3);
    border: 1px solid rgb(36 33 28 / 0.14);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background: var(--color-white);
}

.guide-shot__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.9rem;
    background: var(--color-paper);
    border-bottom: 1px solid rgb(36 33 28 / 0.12);
}

.guide-shot__dots {
    display: inline-flex;
    gap: 6px;
}

.guide-shot__dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.guide-shot__dots i:nth-child(1) { background: #e0a58f; }
.guide-shot__dots i:nth-child(2) { background: #e6cd8a; }
.guide-shot__dots i:nth-child(3) { background: #a9c59b; }

.guide-shot__addr {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.8rem;
    color: var(--color-muted);
    background: var(--color-ivory);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    border: 1px solid rgb(36 33 28 / 0.12);
}

.guide-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.guide-shot figcaption {
    padding: 0.7rem 1rem;
    font-size: 0.86rem;
    color: var(--color-muted);
}

/* Callouts */
.guide-callout {
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
    border-left: 4px solid var(--color-muted);
    background: rgb(36 33 28 / 0.05);
}

.guide-callout--tip {
    border-left-color: var(--color-gold);
    background: var(--color-gold-wash);
}

.guide-callout__k {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-gold);
    margin: 0 0 0.3rem;
}

.guide-callout--note .guide-callout__k {
    color: var(--color-muted);
}

.guide-callout p {
    margin: 0;
    max-width: 62ch;
}

/* Reference table */
.guide-ref {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-4) 0;
    font-size: 0.95rem;
}

.guide-ref th,
.guide-ref td {
    text-align: left;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid rgb(36 33 28 / 0.12);
    vertical-align: top;
}

.guide-ref th {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.guide-ref td code {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .guide-toc ol {
        columns: 1;
    }
}

/* Client Notes */

.client-note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px dashed rgb(212 168 63 / 0.58);
    border-radius: var(--radius-sm);
    background: rgb(212 168 63 / 0.12);
    color: var(--color-graphite);
    padding: 0.3rem 0.55rem;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
}

.client-note::before {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--color-ink);
    color: var(--color-gold-soft);
    padding-inline: 0.4rem;
    content: "Client note";
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.client-note--block {
    display: block;
    border-left: 3px solid var(--color-gold);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
}

.client-note--block::before {
    display: flex;
    width: max-content;
    margin-bottom: var(--space-2);
}

.client-note--block strong {
    display: block;
}

.client-note--block p {
    margin: var(--space-2) 0 0;
    color: inherit;
    font-size: inherit;
}

.site-footer .client-note,
.site-header .client-note,
.cart-summary .client-note,
.checkout-summary .client-note,
.product-info-card--dark .client-note,
.vault-section .client-note,
.vault-ship-panel .client-note {
    background: rgb(228 198 111 / 0.14);
    color: rgb(255 255 255 / 0.84);
}

.site-footer .client-note::before,
.site-header .client-note::before,
.cart-summary .client-note::before,
.checkout-summary .client-note::before,
.product-info-card--dark .client-note::before,
.vault-section .client-note::before,
.vault-ship-panel .client-note::before {
    background: var(--color-gold-soft);
    color: var(--color-ink);
}

/* Motion */

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 520ms ease, transform 520ms ease;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .heading-fill {
        animation: none;
    }
}

/* Responsive */

@media (max-width: 1199.98px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-summary h1 {
        font-size: 2.65rem;
    }

    .vault-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-support-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    h1 {
        max-width: 15ch;
        font-size: 3.65rem;
    }

    h2 {
        font-size: 2.55rem;
    }

    .site-nav__menu {
        margin-top: var(--space-4);
        border-top: 1px solid rgb(21 19 15 / 0.08);
        padding-top: var(--space-4);
    }

    .site-nav__links {
        align-items: stretch;
        margin-inline: 0;
    }

    .site-nav__link {
        justify-content: center;
    }

    .site-nav__actions {
        justify-content: center;
        margin-top: var(--space-3);
    }

    .hero-section__grid,
    .product-detail,
    .product-info-grid,
    .cart-layout,
    .checkout-layout,
    .vault-page-hero__grid,
    .vault-compare-grid,
    .vault-window-grid,
    .account-hero__grid,
    .vault-account-hero__grid,
    .vault-dashboard-layout,
    .vault-section__grid,
    .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .hero-showcase {
        min-height: 30rem;
    }

    .hero-product-card--top {
        left: 0;
    }

    .spot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spot-grid__note {
        grid-column: 1 / -1;
    }

    .product-section-head {
        grid-template-columns: 1fr;
    }

    .product-filters {
        justify-content: flex-start;
        margin-bottom: var(--space-6);
    }

    .product-grid,
    .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-summary h1 {
        max-width: 16ch;
    }

    .cart-summary {
        position: static;
    }

    .checkout-summary {
        position: static;
    }

    .vault-ship-panel {
        position: static;
    }

    .vault-page-hero__grid {
        gap: var(--space-5);
    }
}

@media (max-width: 767.98px) {
    .section {
        padding-block: var(--space-8);
    }

    .hero-section {
        --hero-crown-tile-height: 4rem;
        --hero-crown-tile-width: 7rem;
        padding-block: 1.25rem;
    }

    .vault-section {
        --vault-crown-tile-height: 4rem;
        --vault-crown-tile-width: 7rem;
    }

    .vault-page-hero::before {
        background-position: 0 0, 3.5rem 2rem;
        background-size: 7rem 4rem;
    }

    .hero-section__grid {
        gap: var(--space-5);
    }

    h1 {
        font-size: 2.45rem;
    }

    .product-summary h1 {
        max-width: none;
        font-size: 2.25rem;
    }

    h2 {
        --heading-outline-width: 0px;
        font-size: 2.1rem;
    }

    h2::before {
        content: none;
    }

    h2 .heading-fill {
        animation: none;
        background: none;
        color: var(--color-gold);
        -webkit-text-fill-color: var(--color-gold);
    }

    .market-ribbon__inner {
        width: 100%;
    }

    .site-brand__mark {
        width: 5.5rem;
        height: 3.2rem;
    }

    .hero-showcase {
        min-height: 22rem;
    }

    .hero-showcase::before {
        top: 13%;
        right: 0;
        width: 72%;
    }

    .hero-product-card--main {
        right: 0;
        bottom: 1rem;
        width: 66%;
    }

    .hero-product-card--top {
        top: 0;
        left: 0;
        width: 34%;
    }

    .hero-product-card--bottom {
        bottom: 0;
        left: 6%;
        width: 36%;
    }

    .hero-product-card__meta {
        right: var(--space-2);
        bottom: var(--space-2);
        left: var(--space-2);
        padding: var(--space-2);
    }

    .hero-product-card__meta span {
        font-size: 0.68rem;
    }

    .hero-product-card__meta strong {
        font-size: 0.86rem;
    }

    .hero-product-card--main .hero-product-card__meta {
        right: var(--space-3);
        bottom: var(--space-3);
        left: var(--space-3);
        grid-template-columns: 1fr;
        padding: var(--space-3);
    }

    .hero-product-card--main .hero-product-card__meta span {
        font-size: 0.78rem;
    }

    .hero-product-card--main .hero-product-card__meta strong {
        font-size: 1.05rem;
    }

    .product-grid,
    .vault-process-grid,
    .vault-choice-grid,
    .account-support-grid,
    .vault-steps,
    .trust-grid,
    .site-footer__nav {
        grid-template-columns: 1fr;
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-circle {
        min-height: auto;
        border-radius: var(--radius-full);
        padding: var(--space-4);
    }

    .category-circle__icon {
        width: 3.8rem;
        height: 3.8rem;
    }

    .category-circle__icon svg {
        width: 2.35rem;
        height: 2.35rem;
    }

    .spot-grid {
        grid-template-columns: 1fr;
    }

    .product-card__body {
        min-height: auto;
    }

    .product-detail-hero {
        padding-block: var(--space-5) var(--space-8);
    }

    .product-summary,
    .product-info-card,
    .cart-panel,
    .cart-summary,
    .checkout-panel,
    .account-login-card,
    .account-support-card,
    .vault-account-summary,
    .vault-dashboard-panel,
    .vault-ship-panel {
        padding: var(--space-5);
    }

    .vault-animation-card {
        padding: var(--space-2);
    }

    .vault-window-card h2 {
        font-size: 2.1rem;
    }

    .product-price-block,
    .purchase-panel__row,
    .checkout-choice-grid,
    .checkout-field-grid {
        grid-template-columns: 1fr;
    }

    .purchase-panel__row {
        display: grid;
        justify-content: stretch;
    }

    .quantity-control {
        width: 100%;
    }

    .product-gallery__thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-detail-list div {
        display: grid;
    }

    .product-detail-list dd {
        text-align: left;
    }

    .cart-panel__head {
        display: grid;
    }

    .cart-panel__head .btn {
        width: 100%;
    }

    .cart-empty {
        padding: var(--space-5);
    }

    .cart-item {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        align-items: start;
    }

    .cart-item__controls {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-items: stretch;
        align-items: center;
    }

    .cart-item__controls strong,
    .cart-item__remove {
        justify-self: start;
    }

    .checkout-choice {
        min-height: auto;
        padding: var(--space-4);
    }

    .checkout-summary-item {
        grid-template-columns: 4rem minmax(0, 1fr);
        align-items: start;
    }

    .checkout-summary-item img {
        width: 4rem;
    }

    .checkout-summary-item b {
        grid-column: 2;
    }

    .quantity-control--small {
        width: 100%;
        grid-column: 1 / -1;
    }

    .site-nav__account {
        justify-content: center;
        width: 100%;
    }

    .account-hero,
    .vault-account-hero {
        padding-block: var(--space-7);
    }

    .vault-account-summary div,
    .vault-dashboard-panel__head,
    .vault-ship-panel__facts div {
        display: grid;
    }

    .vault-account-summary dd,
    .vault-ship-panel__facts dd {
        text-align: left;
    }

    .vault-held-item {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        align-items: start;
    }

    .vault-held-item dl {
        grid-template-columns: 1fr;
    }

    .vault-held-item__meta {
        grid-column: 1 / -1;
        justify-items: start;
    }

    .site-footer__bottom {
        flex-direction: column;
    }
}

/* =========================================================================
   Admin portal (Vault Admin) — reuses design tokens from :root
   ========================================================================= */

.admin-body {
    background: var(--color-paper);
    min-height: 100vh;
}

.admin-main {
    padding-bottom: var(--space-9);
}

/* Form controls: extend .form-field to selects used across admin forms */
.form-field select {
    width: 100%;
    min-height: 3.15rem;
    border: 1px solid rgb(21 19 15 / 0.14);
    border-radius: var(--radius-full);
    background: var(--color-ivory);
    color: var(--color-ink);
    padding-inline: var(--space-4);
    font-family: var(--font-body);
}

.form-field select:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgb(212 168 63 / 0.18);
    outline: 0;
}

/* Small + danger button variants */
.btn-sm {
    min-height: 2.35rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.btn-danger {
    border-color: rgb(158 63 54 / 0.4);
    color: var(--color-danger);
}

.btn-danger:hover,
.btn-danger:focus {
    border-color: var(--color-danger);
    background: var(--color-danger);
    color: var(--color-white);
}

/* Top bar */
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgb(21 19 15 / 0.97);
    backdrop-filter: blur(18px);
}

.admin-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
}

.admin-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.admin-topbar__mark {
    height: 3rem;
    width: auto;
}

.admin-topbar__tag {
    color: var(--color-gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.admin-topbar__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
}

.admin-topbar__link {
    color: rgb(255 255 255 / 0.78);
    font-size: 0.92rem;
    font-weight: 600;
}

.admin-topbar__link:hover,
.admin-topbar__link.is-active {
    color: var(--color-white);
}

.admin-topbar__logout {
    margin: 0;
}

/* Flash messages */
.admin-flash-stack {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.admin-flash {
    border: 1px solid rgb(21 19 15 / 0.12);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: var(--color-white);
    padding: var(--space-4) var(--space-5);
    font-size: 0.95rem;
}

.admin-flash--success { border-left-color: var(--color-success); }
.admin-flash--error { border-left-color: var(--color-danger); }
.admin-flash--info { border-left-color: var(--color-gold); }

/* Section rhythm */
.admin-section {
    padding-top: var(--space-7);
}

.admin-back {
    display: inline-block;
    margin-bottom: var(--space-5);
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.admin-back:hover { color: var(--color-ink); }

.admin-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-7);
}

.admin-page-head--stack {
    display: block;
}

.admin-page-head h1 {
    margin-block: var(--space-2);
}

.admin-page-head p {
    color: var(--color-muted);
    max-width: 52ch;
}

.admin-narrow {
    max-width: 640px;
}

/* Stat row */
.admin-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-7);
}

.admin-stat {
    border: 1px solid rgb(21 19 15 / 0.08);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    padding: var(--space-5) var(--space-6);
}

.admin-stat__value {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--color-ink);
}

.admin-stat__label {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Highlights a stat tile when it needs attention (e.g. pending shipments > 0) */
.admin-stat--alert {
    border-color: rgb(212 168 63 / 0.4);
}

.admin-stat--alert .admin-stat__value {
    color: #8a6b16;
}

/* Table */
.admin-table-wrap {
    border: 1px solid rgb(21 19 15 / 0.08);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.admin-table th,
.admin-table td {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    vertical-align: middle;
}

.admin-table thead th {
    color: var(--color-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid rgb(21 19 15 / 0.1);
}

.admin-table tbody tr + tr td {
    border-top: 1px solid rgb(21 19 15 / 0.06);
}

.admin-table__client {
    display: grid;
    gap: 2px;
    color: var(--color-ink);
}

.admin-table__client span {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.admin-table__actions {
    text-align: right;
}

.admin-tag {
    display: inline-block;
    border-radius: var(--radius-full);
    background: var(--color-gold-wash);
    color: var(--color-graphite);
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Countdown / status badge */
.days-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.days-badge--ok {
    background: rgb(73 127 82 / 0.14);
    color: var(--color-success);
}

.days-badge--warn {
    background: rgb(212 168 63 / 0.2);
    color: #8a6b16;
}

.days-badge--danger {
    background: rgb(158 63 54 / 0.14);
    color: var(--color-danger);
}

/* Dashboard table: flags a vault whose customer requested their shipment */
.ship-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    background: rgb(212 168 63 / 0.2);
    color: #8a6b16;
}

.admin-empty {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    border: 1px dashed rgb(21 19 15 / 0.18);
    border-radius: var(--radius-md);
    background: var(--color-white);
    padding: var(--space-7);
}

/* Detail layout */
.admin-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

.admin-col {
    display: grid;
    gap: var(--space-5);
    align-content: start;
}

.admin-panel {
    border: 1px solid rgb(21 19 15 / 0.08);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    padding: var(--space-6);
}

.admin-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.admin-panel__head h2 {
    font-size: 1.3rem;
}

.admin-panel__count {
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.admin-panel__hint {
    margin-bottom: var(--space-4);
    color: var(--color-muted);
    font-size: 0.9rem;
}

.admin-panel__empty {
    color: var(--color-muted);
}

.admin-panel--danger {
    border-color: rgb(158 63 54 / 0.24);
}

.admin-panel--danger h2 {
    font-size: 1.2rem;
    color: var(--color-danger);
    margin-bottom: var(--space-3);
}

/* Held item rows */
.admin-item-list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-item {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    border: 1px solid rgb(21 19 15 / 0.07);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

.admin-item__media {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.admin-item__body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.admin-item__body strong {
    font-size: 0.98rem;
    line-height: 1.25;
}

.admin-item__meta {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.admin-item__source {
    justify-self: start;
    border-radius: var(--radius-full);
    padding: 0.12rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--color-gold-wash);
    color: var(--color-graphite);
}

.admin-item__source--facebook {
    background: rgb(66 103 178 / 0.14);
    color: #2f4f96;
}

.admin-item__source--manual {
    background: rgb(116 109 97 / 0.16);
    color: var(--color-graphite);
}

.admin-item__remove {
    margin: 0;
}

/* Add-product + new-vault forms */
.admin-form {
    display: grid;
    gap: var(--space-4);
}

.admin-add-form__row,
.admin-new-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.admin-new-form {
    padding: var(--space-6);
}

/* Countdown panel */
.admin-countdown {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
}

.admin-countdown__figure {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.admin-countdown__number {
    font-family: var(--font-heading);
    font-size: 3.4rem;
    line-height: 1;
    color: var(--color-gold);
}

.admin-countdown__unit {
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-facts {
    display: grid;
    gap: var(--space-3);
    width: 100%;
    margin: 0;
}

.admin-facts > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    border-top: 1px solid rgb(21 19 15 / 0.06);
    padding-top: var(--space-3);
}

.admin-facts dt {
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-facts dd {
    margin: 0;
    font-weight: 600;
}

/* Login */
.admin-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-6);
}

.admin-login__card {
    width: min(100%, 420px);
    border: 1px solid rgb(21 19 15 / 0.08);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-lift);
    padding: var(--space-8) var(--space-7);
    text-align: center;
}

.admin-login__brand {
    display: inline-block;
    margin-bottom: var(--space-4);
}

.admin-login__brand img {
    height: 3.5rem;
    width: auto;
}

.admin-login h1 {
    margin-block: var(--space-2) var(--space-3);
}

.admin-login p {
    color: var(--color-muted);
    margin-bottom: var(--space-5);
}

.admin-login__form {
    display: grid;
    gap: var(--space-4);
    text-align: left;
}

.admin-login__submit {
    width: 100%;
}

.admin-login .eyebrow,
.admin-login__card .admin-flash {
    justify-content: center;
}

/* Responsive */
@media (min-width: 640px) {
    .admin-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .admin-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        align-items: start;
    }
}

@media (max-width: 520px) {
    .admin-add-form__row,
    .admin-new-form__row {
        grid-template-columns: 1fr;
    }

    .admin-item {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .admin-item__remove {
        grid-column: 2 / -1;
        justify-self: start;
    }
}

/* Checkout confirmation */
.checkout-complete {
    display: flex;
    justify-content: center;
}

.checkout-complete__inner {
    display: flex;
    justify-content: center;
}

.checkout-complete__card {
    width: min(100%, 640px);
    text-align: center;
    border: 1px solid rgb(21 19 15 / 0.08);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    padding: var(--space-8) var(--space-7);
}

.checkout-complete__card .eyebrow {
    justify-content: center;
}

.checkout-complete__card p {
    color: var(--color-muted);
    margin-top: var(--space-4);
}

.checkout-complete__actions {
    justify-content: center;
    margin-top: var(--space-6);
}

/* Admin: shipping/storage rate editor */
.admin-rates {
    margin-bottom: var(--space-7);
}

.admin-rates__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.admin-rates__head h2 {
    font-size: 1.3rem;
    margin-top: var(--space-2);
}

.admin-rates__fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: var(--space-4);
    align-items: end;
}

.admin-rates__save {
    min-height: 3.15rem;
}

@media (max-width: 720px) {
    .admin-rates__fields {
        grid-template-columns: 1fr 1fr;
    }
    .admin-rates__save {
        grid-column: 1 / -1;
    }
}

/* Checkout page: order summary item list (mirrors cart-item but compact, for the aside) */
.checkout-summary-items {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.checkout-summary-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
}

.checkout-summary-item img {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.checkout-summary-item strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.25;
}

.checkout-summary-item span {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.checkout-page__pay {
    width: 100%;
    margin-top: var(--space-5);
}

/* Checkout page: per-item fulfilment tag */
.checkout-summary-item__tag {
    display: inline-block;
    margin-left: var(--space-1);
    border-radius: var(--radius-full);
    padding: 0.05rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--color-gold-wash);
    color: var(--color-graphite);
    vertical-align: middle;
}

.checkout-summary-item__tag--vault {
    background: rgb(212 168 63 / 0.2);
    color: #8a6b16;
}

/* Admin: customer access panel (link + PIN) */
.admin-access-pin {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.admin-access-pin__label {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-access-pin__value {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    letter-spacing: 0.3em;
    color: var(--color-ink);
}

.admin-customer-access .form-field input[readonly] {
    background: var(--color-gold-wash);
    font-size: 0.85rem;
    cursor: pointer;
}

/* Customer vault: sign-in help steps + logout */
.vault-access-steps {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding-left: 1.2rem;
    color: var(--color-graphite);
}

.vault-access-steps li {
    line-height: 1.4;
}

.vault-account-logout {
    margin-top: var(--space-5);
}

/* Checkout page: two-column form row (name, address) */
.checkout-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 420px) {
    .checkout-form-row {
        grid-template-columns: 1fr;
    }
}

/* Storefront flash messages */
.site-flash-stack {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* Customer vault: self-serve ship / extend actions */
.vault-ship-panel__actions {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.vault-ship-panel__actions form {
    margin: 0;
}

.vault-ship-panel__actions .btn {
    width: 100%;
}

.vault-ship-panel__fineprint {
    margin-top: var(--space-4);
}

/* Footer market-reference note (customer-facing) */
.site-footer__note {
    margin: 0;
    font-size: 0.78rem;
    opacity: 0.7;
}

/* Plain fineprint + inline error (replaces the old dev "client-note" styling) */
.fineprint {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-muted);
}

.fineprint--block {
    display: block;
    margin-top: var(--space-3);
}

.form-error {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-danger);
}

.checkout-complete__vault {
    margin: var(--space-4) 0;
    padding: var(--space-4) var(--space-5);
    text-align: left;
    background: var(--color-gold-wash);
    border: 1px solid #eadfbf;
    border-radius: var(--radius-md);
}

.checkout-complete__vault p {
    margin-top: var(--space-2);
    color: var(--color-muted);
    font-size: 0.95rem;
}