:root {
    --forest-950: #071f19;
    --forest-900: #0b2c23;
    --forest-800: #123e31;
    --forest-700: #1b5541;
    --parchment-50: #fffdf7;
    --parchment-100: #f8f1df;
    --parchment-200: #eee1c5;
    --parchment-300: #dfcda8;
    --ink-950: #14231d;
    --ink-800: #29382f;
    --ink-600: #5d665f;
    --brass-500: #b88b3d;
    --brass-400: #d0aa63;
    --blue: #183b50;
    --red: #6e2d32;
    --olive: #59623e;
    --purple: #3e3558;
    --brown: #6c4c2f;
    --line: rgba(69, 55, 30, .16);
    --shadow: 0 16px 38px rgba(36, 28, 15, .12);
    --shadow-sm: 0 8px 18px rgba(36, 28, 15, .10);
    --serif: Georgia, "Times New Roman", serif;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --radius: 18px;
    --header-h: 92px;
    --container: 1180px;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 12px)
}

body {
    margin: 0;
    background: var(--parchment-50);
    color: var(--ink-950);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55
}

body.nav-open, body.filter-open {
    overflow: hidden
}

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

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

button, input, select, textarea {
    font: inherit
}

button {
    cursor: pointer
}

.site-container {
    width: min(calc(100% - 32px), var(--container));
    margin-inline: auto
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.skip-link {
    position: fixed;
    left: 16px;
    top: -60px;
    z-index: 999;
    background: #fff;
    padding: 10px 16px
}

.skip-link:focus {
    top: 12px
}

.eyebrow {
    margin: 0 0 8px;
    color: #866326;
    font: 700 .73rem/1.2 var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase
}

.text-link {
    color: #715522;
    font-family: var(--serif);
    font-weight: 700;
    white-space: nowrap
}

.text-link:hover {
    text-decoration: underline
}

.text-link--center {
    display: block;
    text-align: center;
    margin-top: 16px
}

.button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 750;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease
}

.button:active {
    transform: translateY(1px)
}

.button--primary {
    color: #fff8e8;
    background: var(--forest-900);
    box-shadow: 0 8px 16px rgba(7, 31, 25, .17)
}

.button--primary:hover {
    background: var(--forest-800)
}

.button--secondary {
    background: rgba(255, 253, 247, .74);
    border-color: #b79556;
    color: #3a2e1d
}

.button--ghost {
    border-color: var(--line);
    background: transparent
}

.button--disabled {
    background: #ddd6c8;
    color: #817a6e
}

.button--wide {
    width: 100%
}

.message-stack {
    position: fixed;
    z-index: 95;
    top: calc(var(--header-h) + 12px);
    left: 16px;
    right: 16px;
    display: grid;
    gap: 8px;
    pointer-events: none
}

.message {
    margin-left: auto;
    max-width: 420px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--forest-700);
    font-size: .9rem
}

.message--error {
    border-left-color: #9b3838
}

.site-header {
    height: var(--header-h);
    position: sticky;
    top: 0;
    z-index: 90;
    background: linear-gradient(180deg, #0c2e24, #09271f);
    color: #f6e6bc;
    border-bottom: 1px solid rgba(208, 170, 99, .35);
    box-shadow: 0 3px 16px rgba(0, 0, 0, .12)
}

.header-inner {
    height: 100%;
    display: grid;
    grid-template-columns:52px 1fr 60px;
    align-items: center;
    gap: 8px
}

.icon-button, .nav-close {
    border: 0;
    background: transparent;
    color: inherit
}

.icon-button {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(208, 170, 99, .24);
    display: grid;
    place-items: center
}

.icon-button svg {
    width: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round
}

.brand {
    text-align: center;
    display: flex;
    flex-direction: column;
    line-height: 1;
    color: var(--brass-400);
    font-family: var(--serif);
    letter-spacing: .09em
}

.brand__main {
    font-size: 1.18rem;
    font-weight: 700
}

.brand__sub {
    font-size: .78rem;
    margin-top: 5px;
    letter-spacing: .2em
}

.bag-button {
    justify-self: end;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #113f32;
    color: #fff7df;
    font-family: var(--serif);
    position: relative
}

.bag-button__count {
    position: absolute;
    top: -3px;
    right: -2px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: 20px;
    background: #96373d;
    color: white;
    font: 700 .72rem/21px var(--sans);
    text-align: center
}

.bag-button__label {
    font-weight: 700
}

.nav-backdrop {
    position: fixed;
    inset: var(--header-h) 0 0;
    background: rgba(3, 13, 10, .38);
    opacity: 0;
    visibility: hidden;
    transition: .22s
}

.site-nav {
    position: fixed;
    left: 16px;
    right: 16px;
    top: var(--header-h);
    background: #fffdf8;
    color: var(--ink-950);
    box-shadow: var(--shadow);
    padding: 18px 20px 20px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: .22s;
    border: 1px solid var(--parchment-300);
    max-height: calc(100vh - var(--header-h) - 24px);
    overflow: auto
}

.site-nav__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    color: #8b692d;
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase
}

.nav-close {
    font-size: 1.9rem;
    line-height: 1;
    color: #5a4c38
}

.site-nav > a {
    display: flex;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font: 1.25rem/1.25 var(--serif)
}

.site-nav > a:last-child {
    border-bottom: 0
}

.nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible
}

.nav-open .site-nav {
    transform: none;
    opacity: 1;
    visibility: visible
}

.home-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f5ead3 0%, #fffaf0 100%);
    border-bottom: 1px solid var(--line)
}

.home-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image: radial-gradient(rgba(119, 91, 42, .16) .8px, transparent .8px);
    background-size: 7px 7px;
    pointer-events: none
}

.home-hero__inner {
    min-height: 570px;
    padding: 50px 0 250px;
    position: relative
}

.home-hero__copy {
    position: relative;
    z-index: 3;
    max-width: 560px
}

.home-hero h1, .page-hero h1, .book-detail-copy h1, .success-card h1 {
    margin: 0;
    color: #0f3329;
    font: 500 clamp(2.45rem, 11vw, 5.2rem)/.92 var(--serif);
    letter-spacing: -.045em
}

.hero-lede {
    max-width: 500px;
    margin: 20px 0 0;
    color: #3f4d45;
    font-size: 1rem
}

.hero-actions {
    display: grid;
    gap: 10px;
    margin-top: 26px;
    max-width: 360px
}

.hero-castle {
    position: absolute;
    z-index: 1;
    left: -10%;
    right: -10%;
    bottom: -50px;
    height: 340px;
    background: linear-gradient(180deg, rgba(248, 241, 223, 0) 0%, rgba(248, 241, 223, .12) 50%, #f8f1df 98%), url('../images/hero/castle-archive-mobile.jpg') center 48%/cover no-repeat;
    mix-blend-mode: multiply;
    filter: saturate(.72) contrast(.95);
    opacity: .82;
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 88%, transparent 100%)
}

.store-section {
    padding: 44px 0
}

.store-section--tint {
    background: #f4ead5;
    border-block: 1px solid var(--line)
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px
}

.section-heading h2, .journey-section h2, .filter-drawer h2, .tracking-card h2 {
    margin: 0;
    font: 600 clamp(1.55rem, 6vw, 2.2rem)/1.05 var(--serif);
    color: #2c2a20
}

.section-heading--stacked {
    align-items: start;
    flex-direction: column
}

.section-heading--stacked > p {
    margin: 0;
    color: var(--ink-600);
    max-width: 500px
}

.book-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(156px, 72%);
    gap: 14px;
    overflow-x: auto;
    padding: 2px 2px 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin
}

.book-card {
    scroll-snap-align: start;
    background: rgba(255, 253, 247, .92);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    min-width: 0
}

.book-card__cover {
    display: block;
    aspect-ratio: 3/4.25;
    background: #e6d8ba;
    overflow: hidden
}

.book-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.book-cover-fallback {
    width: 100%;
    height: 100%;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #f6e3af;
    background: radial-gradient(circle at 50% 30%, #224d3d, #09271f 75%);
    font-family: var(--serif);
    position: relative
}

.book-cover-fallback:after {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(208, 170, 99, .65);
    pointer-events: none
}

.book-cover-fallback__mark {
    font-size: .68rem;
    letter-spacing: .2em;
    color: #d4ac61;
    margin-bottom: 18px
}

.book-cover-fallback strong {
    font-size: 1.05rem;
    line-height: 1.08
}

.book-cover-fallback small {
    margin-top: 9px;
    color: #dec994
}

.book-card__body {
    padding: 12px
}

.book-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    font: 700 1rem/1.2 var(--serif)
}

.book-card__author {
    margin: 4px 0 11px;
    color: #6a6b63;
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.book-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.book-card__footer > strong {
    font-family: var(--serif);
    font-size: .94rem
}

.quick-add {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--forest-900);
    color: #fff6df;
    font-size: 1.25rem;
    line-height: 1
}

.availability-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #658557
}

.availability-dot--off {
    background: #a8a397
}

.empty-card {
    padding: 24px;
    border: 1px dashed #bca77a;
    border-radius: 16px;
    text-align: center;
    color: #655b47
}

.empty-card p {
    margin-bottom: 0
}

.mood-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 10px
}

.mood-card {
    min-height: 116px;
    border-radius: 14px;
    padding: 14px 8px;
    color: #fff7e7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    font-family: var(--serif);
    border: 1px solid rgba(255, 255, 255, .12);
    text-align: center
}

.mood-card__sigil {
    font-size: 1.65rem;
    color: #e2c47f
}

.mood-card--dark {
    background: #203a3c
}

.mood-card--cozy {
    background: var(--brown)
}

.mood-card--epic {
    background: var(--blue)
}

.mood-card--romantic {
    background: var(--red)
}

.mood-card--calm {
    background: var(--olive)
}

.mood-card--mysterious {
    background: var(--purple)
}

.journey-section {
    padding: 48px 0 54px;
    background: #fffaf0
}

.journey-section > div > h2 {
    margin-bottom: 26px
}

.journey-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 12px
}

.journey-step {
    padding: 16px 10px;
    border: 1px solid #c9b07c;
    border-radius: 14px;
    text-align: center;
    position: relative;
    background: #fffdf8
}

.journey-step span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0 auto 9px;
    border: 1px solid #a37f3c;
    border-radius: 50%;
    color: #906c2f;
    font-size: .72rem
}

.journey-step strong, .journey-step small {
    display: block
}

.journey-step strong {
    font-family: var(--serif)
}

.journey-step small {
    margin-top: 3px;
    color: #6d6d63;
    font-size: .73rem
}

.journey-cta {
    margin-top: 22px;
    width: 100%
}

.page-hero {
    background: #efe2c8;
    padding: 40px 0 32px;
    border-bottom: 1px solid var(--line)
}

.page-hero--compact h1 {
    font-size: clamp(2.7rem, 12vw, 4rem)
}

.page-hero p:last-child {
    max-width: 600px;
    margin: 12px 0 0;
    color: #526158
}

.catalog-page, .cart-page, .checkout-page, .track-page {
    padding: 26px 0 56px
}

.catalog-search {
    display: grid;
    grid-template-columns:1fr;
    gap: 9px
}

.search-field {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #cbb990;
    border-radius: 12px;
    background: #fff;
    padding: 0 14px
}

.search-field svg {
    width: 21px;
    fill: none;
    stroke: #6a695f;
    stroke-width: 1.8
}

.search-field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent
}

.button--search {
    width: 100%
}

.catalog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 18px 0 10px
}

.filter-button {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #bfa977;
    background: #fff9ed;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700
}

.filter-button i {
    width: 7px;
    height: 7px;
    background: #8f3438;
    border-radius: 50%
}

.sort-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6a624f;
    font-size: .85rem
}

.sort-control select {
    border: 0;
    background: transparent;
    color: #2f342f;
    font-weight: 700;
    max-width: 150px
}

.active-filters {
    display: flex;
    gap: 7px;
    overflow: auto;
    padding: 6px 0 10px
}

.active-filters span, .active-filters a {
    flex: none;
    padding: 7px 10px;
    border-radius: 999px;
    background: #ede2cb;
    font-size: .76rem
}

.active-filters a {
    background: #173b30;
    color: #fff
}

.result-count {
    margin: 7px 0 15px;
    color: #6d6b61;
    font-size: .82rem
}

.catalog-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 14px 10px
}

.empty-state {
    padding: 60px 18px;
    text-align: center;
    border: 1px dashed #c5b287;
    border-radius: 18px;
    background: #fffaf1
}

.empty-state > span {
    display: block;
    color: #a17731;
    font-size: 2rem
}

.empty-state h2 {
    font: 600 1.6rem var(--serif);
    margin: 14px 0 6px
}

.empty-state p {
    color: #6f7068;
    margin: 0 0 18px
}

.filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 96;
    background: rgba(3, 14, 10, .5);
    opacity: 0;
    visibility: hidden;
    transition: .2s
}

.filter-drawer {
    position: fixed;
    z-index: 97;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    background: #fffdf7;
    border-radius: 22px 22px 0 0;
    transform: translateY(102%);
    transition: .25s;
    overflow: auto;
    box-shadow: 0 -16px 50px rgba(0, 0, 0, .2)
}

.filter-open .filter-backdrop {
    opacity: 1;
    visibility: visible
}

.filter-open .filter-drawer {
    transform: none
}

.filter-drawer form {
    padding: 22px 20px
}

.filter-drawer__head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line)
}

.filter-drawer__head button {
    border: 0;
    background: transparent;
    font-size: 2rem;
    color: #655d4f
}

.filter-drawer fieldset {
    margin: 0;
    padding: 20px 0;
    border: 0;
    border-bottom: 1px solid var(--line)
}

.filter-drawer legend {
    font: 700 1rem var(--serif);
    margin-bottom: 10px
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.filter-options label input {
    position: absolute;
    opacity: 0
}

.filter-options label span {
    display: block;
    padding: 8px 11px;
    border: 1px solid #cab990;
    border-radius: 999px;
    font-size: .8rem
}

.filter-options label input:checked + span {
    background: #123e31;
    color: #fff;
    border-color: #123e31
}

.filter-actions {
    position: sticky;
    bottom: -22px;
    background: #fffdf7;
    padding: 15px 0 22px;
    display: grid;
    grid-template-columns:1fr 1.3fr;
    gap: 10px
}

.book-detail-page {
    padding: 24px 0 50px
}

.back-link {
    display: inline-block;
    color: #6e5a33;
    margin-bottom: 18px;
    font-size: .85rem
}

.book-detail-grid {
    display: grid;
    gap: 24px
}

.book-detail-cover {
    width: min(76vw, 330px);
    aspect-ratio: 3/4.25;
    margin-inline: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 42px rgba(35, 27, 14, .2);
    background: #e4d5b6
}

.book-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.book-cover-fallback--large strong {
    font-size: 1.6rem
}

.tag-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.tag-row span {
    padding: 5px 9px;
    border-radius: 999px;
    background: #ece0c8;
    color: #725824;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em
}

.book-detail-copy h1 {
    font-size: clamp(2.4rem, 10vw, 4.4rem)
}

.book-detail-author {
    margin: 10px 0;
    color: #666b63;
    font-family: var(--serif);
    font-size: 1.08rem
}

.book-detail-price {
    margin: 18px 0 8px;
    font: 700 1.65rem var(--serif)
}

.availability-badge {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 8px;
    background: #dfe8db;
    color: #2e5c3b;
    font-size: .78rem;
    font-weight: 800
}

.availability-badge--unavailable {
    background: #eadcdc;
    color: #783e3e
}

.availability-badge--preorder {
    background: #dce5ea;
    color: #345466
}

.book-detail-description {
    margin: 22px 0;
    color: #3f4a43
}

.detail-order-form {
    margin-bottom: 22px
}

.book-meta {
    margin: 24px 0 0;
    border-top: 1px solid var(--line)
}

.book-meta > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line)
}

.book-meta dt {
    color: #77746b
}

.book-meta dd {
    margin: 0;
    font-weight: 700;
    text-align: right
}

.cart-layout, .checkout-layout, .track-layout {
    display: grid;
    gap: 24px
}

.cart-items {
    display: grid;
    gap: 12px
}

.cart-item {
    display: grid;
    grid-template-columns:74px 1fr;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px
}

.cart-item__cover {
    width: 74px;
    aspect-ratio: 3/4.25;
    border-radius: 8px;
    overflow: hidden;
    background: #e8dcc3
}

.cart-item__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cart-item__copy {
    min-width: 0
}

.cart-item__copy > a > strong {
    font: 700 1rem var(--serif)
}

.cart-item__copy p {
    margin: 2px 0;
    color: #77756c;
    font-size: .75rem
}

.cart-item__copy > span {
    font: 700 .9rem var(--serif)
}

.cart-item__actions {
    margin-top: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.quantity-form {
    display: flex;
    align-items: center;
    border: 1px solid #cdbd99;
    border-radius: 8px;
    overflow: hidden
}

.quantity-form button, .quantity-form input {
    height: 32px;
    border: 0;
    background: #fff
}

.quantity-form > button:not(.update-link) {
    width: 30px
}

.quantity-form input {
    width: 34px;
    text-align: center;
    appearance: textfield
}

.update-link {
    padding: 0 8px;
    color: #315c4c;
    font-size: .72rem;
    border-left: 1px solid #ddd0b4 !important
}

.remove-link {
    border: 0;
    background: transparent;
    color: #8b3d3d;
    font-size: .75rem
}

.cart-item__total {
    grid-column: 2;
    font-family: var(--serif);
    justify-self: end
}

.order-summary {
    padding: 20px;
    background: #f2e6cc;
    border: 1px solid #d2bf95;
    border-radius: 16px;
    height: max-content
}

.order-summary > div:not(.checkout-item) {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(92, 69, 30, .16)
}

.order-summary .summary-total {
    font-size: 1.1rem;
    border-top: 1px solid #bba370;
    margin-top: 8px
}

.summary-note {
    color: #716a5c;
    font-size: .76rem
}

.checkout-form {
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px
}

.form-section h2 {
    font: 700 1.4rem var(--serif);
    margin: 0 0 14px
}

.form-grid {
    display: grid;
    gap: 13px
}

.form-field {
    display: grid;
    gap: 6px;
    font-size: .82rem;
    font-weight: 700;
    color: #544e42
}

.form-field input, .form-field textarea {
    width: 100%;
    border: 1px solid #cbb992;
    border-radius: 10px;
    background: #fffdf9;
    padding: 12px 13px;
    outline: 0;
    color: #202c26
}

.form-field input:focus, .form-field textarea:focus {
    border-color: #2d6753;
    box-shadow: 0 0 0 3px rgba(45, 103, 83, .10)
}

.field-error {
    color: #8f3135
}

.form-error, .cancelled-note {
    padding: 12px;
    border-radius: 10px;
    background: #f3e0e0;
    color: #7b3235;
    margin-bottom: 14px
}

.checkout-trust {
    margin: 20px 0;
    padding: 16px;
    border-radius: 12px;
    background: #edf0e6;
    color: #3d4d42
}

.checkout-trust strong {
    font-family: var(--serif)
}

.checkout-trust ol {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: .82rem
}

.checkout-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(92, 69, 30, .15);
    font-size: .82rem
}

.checkout-item span {
    max-width: 68%
}

.success-page {
    padding: 50px 0 70px;
    background: linear-gradient(180deg, #efe2c6, #fffaf0)
}

.success-card {
    max-width: 620px;
    text-align: center;
    background: #fffdf7;
    border: 1px solid #cdb88b;
    border-radius: 22px;
    padding: 28px 20px;
    box-shadow: var(--shadow)
}

.success-seal {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    background: #143d31;
    color: #f5dca0;
    font-size: 1.7rem
}

.success-card h1 {
    font-size: clamp(2.8rem, 12vw, 4.2rem)
}

.success-card > p:not(.eyebrow) {
    color: #666b62
}

.order-identity {
    display: grid;
    gap: 10px;
    margin: 22px 0;
    text-align: left
}

.order-identity > div {
    padding: 13px;
    border: 1px solid #dbcba9;
    border-radius: 10px;
    background: #faf2df
}

.order-identity span, .order-identity strong {
    display: block
}

.order-identity span {
    color: #7c7468;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em
}

.order-identity strong {
    font-family: monospace;
    font-size: 1.05rem;
    margin-top: 3px
}

.success-summary {
    display: flex;
    justify-content: space-between;
    margin: 18px 0;
    padding: 14px 0;
    border-block: 1px solid var(--line)
}

.success-card > .button + .button {
    margin-top: 9px
}

.track-form {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    display: grid;
    gap: 13px;
    height: max-content
}

.tracking-card {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm)
}

.tracking-card__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line)
}

.tracking-card__head > span {
    color: #7a7569;
    font-size: .76rem
}

.timeline {
    list-style: none;
    margin: 20px 0;
    padding: 0
}

.timeline li {
    display: grid;
    grid-template-columns:28px 1fr;
    gap: 10px;
    min-height: 64px;
    position: relative
}

.timeline li:after {
    content: "";
    position: absolute;
    left: 9px;
    top: 20px;
    bottom: -5px;
    width: 1px;
    background: #d4c6a7
}

.timeline li:last-child:after {
    display: none
}

.timeline i {
    width: 19px;
    height: 19px;
    border: 2px solid #c3b898;
    border-radius: 50%;
    background: #fff;
    z-index: 1
}

.timeline li.is-done i {
    background: #18513e;
    border-color: #18513e;
    box-shadow: inset 0 0 0 4px #fff
}

.timeline li.is-current strong {
    color: #15513d
}

.timeline strong, .timeline small {
    display: block
}

.timeline strong {
    font-family: var(--serif)
}

.timeline small {
    color: #857f72
}

.shipping-meta {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 8px
}

.shipping-meta > div {
    background: #f4ecda;
    padding: 10px;
    border-radius: 8px
}

.shipping-meta span, .shipping-meta strong {
    display: block
}

.shipping-meta span {
    font-size: .68rem;
    color: #7b7568
}

.shipping-meta strong {
    margin-top: 2px;
    font-size: .82rem
}

.site-footer {
    padding: 36px 0;
    background: #08271f;
    color: #d9c89f;
    border-top: 1px solid #87682e
}

.footer-grid {
    display: grid;
    gap: 22px
}

.footer-brand {
    font: 700 1.2rem var(--serif);
    color: #d5ad61;
    letter-spacing: .08em
}

.footer-brand span {
    display: block;
    font-size: .76rem;
    letter-spacing: .22em;
    margin-top: 4px
}

.site-footer p {
    color: #abac9f;
    font-family: var(--serif);
    margin: 8px 0 0
}

.footer-links {
    display: grid;
    gap: 9px;
    color: #efe2c2;
    font-size: .86rem
}

@media (min-width: 600px) {
    .site-container {
        width: min(calc(100% - 48px), var(--container))
    }

    .hero-actions {
        grid-template-columns:1fr 1fr;
        max-width: 520px
    }

    .home-hero__inner {
        padding-bottom: 300px
    }

    .mood-grid {
        grid-template-columns:repeat(6, 1fr)
    }

    .mood-card {
        min-height: 132px
    }

    .journey-grid {
        grid-template-columns:repeat(4, 1fr)
    }

    .journey-cta {
        width: auto
    }

    .catalog-search {
        grid-template-columns:1fr auto
    }

    .button--search {
        width: auto
    }

    .catalog-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap: 18px 14px
    }

    .book-rail {
        grid-auto-columns: minmax(170px, 34%)
    }

    .cart-item {
        grid-template-columns:88px 1fr auto
    }

    .cart-item__cover {
        width: 88px
    }

    .cart-item__total {
        grid-column: 3;
        grid-row: 1;
        align-self: center
    }

    .form-grid {
        grid-template-columns:1fr 1fr
    }

    .form-field--wide {
        grid-column: 1/-1
    }

    .order-identity {
        grid-template-columns:1fr 1fr
    }

    .footer-grid {
        grid-template-columns:1fr 1fr
    }

    .footer-links {
        grid-template-columns:1fr 1fr
    }
}

@media (min-width: 900px) {
    :root {
        --header-h: 84px
    }

    .header-inner {
        grid-template-columns:1fr auto 80px
    }

    .nav-toggle, .nav-backdrop, .site-nav__head {
        display: none
    }

    .brand {
        justify-self: start;
        text-align: left
    }

    .brand__main {
        font-size: 1.3rem
    }

    .site-nav {
        position: static;
        display: flex;
        align-items: center;
        gap: 24px;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: transparent;
        color: #f6e6bc;
        box-shadow: none;
        border: 0;
        padding: 0;
        max-height: none;
        overflow: visible;
        grid-column: 2;
        grid-row: 1
    }

    .site-nav > a {
        display: block;
        border: 0;
        padding: 6px 0;
        font: 700 .86rem var(--sans);
        color: #eee0bd
    }

    .site-nav > a:last-child {
        display: none
    }

    .bag-button {
        grid-column: 3
    }

    .home-hero__inner {
        min-height: 650px;
        padding: 104px 0 100px;
        display: flex;
        align-items: center
    }

    .home-hero__copy {
        width: 54%
    }

    .hero-castle {
        left: 44%;
        right: -8%;
        bottom: -20px;
        height: 650px;
        background-position: center 46%;
        mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 90%)
    }

    .store-section {
        padding: 64px 0
    }

    .book-rail {
        grid-auto-flow: initial;
        grid-template-columns:repeat(4, 1fr);
        overflow: visible;
        padding-bottom: 0
    }

    .catalog-grid {
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap: 24px 18px
    }

    .book-detail-grid {
        grid-template-columns:minmax(300px, 430px) 1fr;
        align-items: start;
        gap: 70px
    }

    .book-detail-cover {
        width: 100%;
        position: sticky;
        top: calc(var(--header-h) + 28px)
    }

    .cart-layout {
        grid-template-columns:minmax(0, 1fr) 330px;
        align-items: start
    }

    .order-summary {
        position: sticky;
        top: calc(var(--header-h) + 22px)
    }

    .checkout-layout {
        grid-template-columns:minmax(0, 1fr) 360px;
        align-items: start
    }

    .track-layout {
        grid-template-columns:360px minmax(0, 1fr);
        align-items: start
    }

    .filter-drawer {
        left: auto;
        right: 0;
        top: 0;
        bottom: 0;
        width: min(440px, 100%);
        max-height: none;
        border-radius: 0;
        transform: translateX(102%)
    }

    .filter-open .filter-drawer {
        transform: none
    }

    .filter-actions {
        bottom: -22px
    }

    .footer-grid {
        grid-template-columns:1.3fr 1fr
    }

    .footer-links {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (min-width: 1160px) {
    .book-rail {
        grid-template-columns:repeat(6, 1fr)
    }

    .catalog-grid {
        grid-template-columns:repeat(5, minmax(0, 1fr))
    }
}

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

    *, *:before, *:after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important
    }
}


/* ================================================================
   Grizelline Archive v2.0 - Saved Stories + Payment Experience
   ================================================================ */
.book-card {
    position: relative
}

.wishlist-toggle {
    position: absolute;
    z-index: 5;
    right: 8px;
    top: 8px
}

.wishlist-toggle__button {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(119, 91, 42, .24);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 253, 247, .94);
    color: #6b6254;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: 0 5px 12px rgba(35, 27, 14, .12);
    backdrop-filter: blur(4px)
}

.wishlist-toggle__button.is-saved {
    background: #6e2d32;
    color: #fff7e9;
    border-color: #6e2d32
}

.wishlist-toggle__button:hover {
    transform: translateY(-1px)
}

.saved-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px
}

.detail-actions {
    display: grid;
    gap: 9px;
    margin: 22px 0
}

.detail-actions .detail-order-form {
    margin: 0
}

.detail-back {
    display: inline-block;
    margin-bottom: 18px;
    color: #765b28;
    font: 700 .82rem var(--sans)
}

.form-field select {
    width: 100%;
    border: 1px solid #cbb992;
    border-radius: 10px;
    background: #fffdf9;
    padding: 12px 13px;
    outline: 0;
    color: #202c26
}

.form-field select:focus {
    border-color: #2d6753;
    box-shadow: 0 0 0 3px rgba(45, 103, 83, .10)
}

.payment-status-card {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 9px;
    margin: 16px 0
}

.payment-status-card > div {
    padding: 12px;
    border: 1px solid #dfcfab;
    border-radius: 10px;
    background: #faf3e2;
    text-align: left
}

.payment-status-card span, .payment-status-card strong {
    display: block
}

.payment-status-card span {
    font-size: .7rem;
    color: #777065;
    text-transform: uppercase;
    letter-spacing: .07em
}

.payment-status-card strong {
    margin-top: 3px;
    font-family: var(--serif)
}

.payment-status {
    color: #765b28
}

.payment-status--paid {
    color: #236142
}

.payment-status--waiting_verification {
    color: #375d75
}

.payment-status--rejected {
    color: #8c393d
}

.payment-instruction {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid #cfb77f;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8eed7, #fffaf0);
    text-align: left
}

.payment-instruction > strong, .payment-instruction > span, .payment-instruction > small {
    display: block
}

.payment-instruction > strong {
    font: 700 1.1rem var(--serif);
    color: #173d31
}

.payment-instruction > span {
    font: 700 1.25rem/1.3 monospace;
    margin-top: 4px;
    word-break: break-all
}

.payment-instruction > small {
    margin-top: 4px;
    color: #6e675b
}

.payment-instruction > p:not(.eyebrow) {
    margin: 4px 0 0;
    color: #655e52
}

.qris-image {
    width: min(100%, 280px);
    aspect-ratio: 1;
    object-fit: contain;
    margin: 10px auto 0;
    background: #fff;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px
}

.payment-page {
    padding: 28px 0 64px
}

.payment-layout {
    display: grid;
    gap: 20px
}

.payment-panel, .payment-upload-card {
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    height: max-content
}

.payment-upload-card h2 {
    margin: 0;
    font: 700 1.55rem var(--serif)
}

.payment-upload-card > p {
    color: #68685f
}

.payment-form {
    display: grid;
    gap: 13px;
    margin-top: 18px
}

.payment-form input[type=file] {
    padding: 10px;
    background: #faf5e9;
    border-style: dashed
}

.payment-note {
    font-size: .8rem;
    color: #6f695e
}

.proof-existing {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-block: 1px solid var(--line);
    font-size: .8rem
}

.proof-existing a {
    font-weight: 700;
    color: #315c4c
}

.paid-seal {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #1c5944;
    color: #fff;
    margin-bottom: 14px;
    font-size: 1.5rem
}

.payment-track {
    margin: 16px 0;
    padding: 14px;
    border-radius: 12px;
    background: #f7efdd;
    border: 1px solid #ddcda9
}

.payment-track span, .payment-track strong, .payment-track small, .payment-track a {
    display: block
}

.payment-track strong {
    font-family: var(--serif);
    font-size: 1.05rem
}

.payment-track small {
    color: #746e63;
    margin-top: 2px
}

.payment-track a {
    margin-top: 8px;
    color: #315c4c;
    font-weight: 700;
    font-size: .78rem
}

.tracking-items {
    margin: 18px 0;
    padding-top: 15px;
    border-top: 1px solid var(--line)
}

.tracking-items > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: .8rem
}

.tracking-items > div span {
    max-width: 70%
}

.tracking-items__total {
    border-top: 1px solid var(--line);
    margin-top: 5px;
    padding-top: 11px !important;
    font-size: .95rem !important
}

@media (min-width: 600px) {
    .payment-layout {
        grid-template-columns:1fr 1fr;
        align-items: start
    }

    .payment-panel, .payment-upload-card {
        padding: 24px
    }
}

@media (min-width: 900px) {
    .payment-page {
        padding: 46px 0 80px
    }

    .payment-layout {
        grid-template-columns:minmax(0, 1fr) minmax(360px, .85fr);
        gap: 30px
    }

    .payment-upload-card {
        position: sticky;
        top: calc(var(--header-h) + 24px)
    }
}

/* ================================================================
   Grizelline Archive v3.0 - Original Stories + Storyteller Studio
   Existing CSS stays consolidated in this file by design.
   ================================================================ */
.hero-mood-link {
    display: inline-block;
    margin-top: 14px;
    color: #7e6027;
    font: 700 .78rem var(--sans)
}

.originals-home-section {
    padding: 48px 0;
    background: linear-gradient(145deg, #09291f 0%, #103a2d 58%, #183b50 130%);
    color: #f7edd6;
    position: relative;
    overflow: hidden
}

.originals-home-section:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 15%, rgba(206, 171, 99, .15), transparent 30%), linear-gradient(90deg, transparent 49.7%, rgba(211, 180, 114, .05) 50%, transparent 50.3%);
    pointer-events: none
}

.originals-home-section .site-container {
    position: relative
}

.originals-home-section .eyebrow {
    color: #d4ae67
}

.originals-home-head {
    display: grid;
    gap: 20px;
    margin-bottom: 24px
}

.originals-home-head h2 {
    margin: 0;
    font: 700 clamp(2rem, 8vw, 3rem)/1.02 var(--serif)
}

.originals-home-head p:not(.eyebrow) {
    margin: 8px 0 0;
    color: #c8cbbd;
    max-width: 620px
}

.originals-home-head .button {
    width: 100%;
    border-color: rgba(232, 206, 149, .5);
    color: #fff4d8
}

.originals-empty {
    padding: 24px;
    border: 1px solid rgba(213, 177, 105, .35);
    border-radius: 18px;
    background: rgba(2, 15, 11, .24);
    display: grid;
    gap: 20px;
    align-items: center
}

.originals-empty span {
    font-size: 2rem;
    color: #d5ad61
}

.originals-empty h3 {
    margin: 5px 0;
    font: 700 1.55rem var(--serif)
}

.originals-empty p:not(.eyebrow) {
    margin: 0;
    color: #c8cbbd
}

.originals-empty .button {
    width: 100%
}

.story-grid {
    display: grid;
    grid-template-columns:1fr;
    gap: 18px
}

.story-grid--home .story-card {
    background: #fffaf0
}

.story-card {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns:104px minmax(0, 1fr)
}

.story-card__cover {
    display: block;
    min-height: 170px;
    background: #173d31
}

.story-card__cover > img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.story-cover-fallback {
    height: 100%;
    min-height: 170px;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    text-align: center;
    background: radial-gradient(circle at 50% 20%, rgba(208, 170, 99, .26), transparent 34%), linear-gradient(155deg, #0c3429, #183d32 58%, #142e3d);
    color: #f6e9c8;
    border: 1px solid rgba(215, 179, 106, .32)
}

.story-cover-fallback small {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .56rem;
    color: #d7b66f
}

.story-cover-fallback strong {
    font: 700 1.08rem/1.05 var(--serif)
}

.story-cover-fallback span {
    font-size: .67rem;
    color: #c2c5b8
}

.story-card__body {
    padding: 14px;
    min-width: 0
}

.story-card__meta {
    min-height: 18px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap
}

.story-card__meta span {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #79602d
}

.story-card__title {
    display: block;
    margin-top: 4px;
    font: 700 1.2rem/1.08 var(--serif);
    color: #15352a
}

.story-card__creator {
    display: block;
    margin-top: 4px;
    color: #765927;
    font-size: .72rem;
    font-weight: 700
}

.story-card__body > p {
    margin: 8px 0 10px;
    color: #687068;
    font-size: .72rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.story-card__footer {
    padding-top: 9px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    font-size: .66rem;
    color: #74746a
}

.story-card__footer a {
    color: #3a6655;
    font-weight: 800
}

.story-cover-fallback--large {
    aspect-ratio: 3/4.2;
    min-height: 0;
    padding: 28px
}

.story-cover-fallback--large strong {
    font-size: clamp(1.7rem, 8vw, 2.5rem)
}

.mood-card-wrap {
    display: grid;
    min-width: 0
}

.mood-card-wrap .mood-card {
    border-radius: 12px 12px 0 0
}

.mood-card small {
    display: block;
    margin-top: 3px;
    font: 700 .58rem var(--sans);
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .65
}

.mood-story-link {
    display: block;
    padding: 7px 5px;
    text-align: center;
    border: 1px solid #d7c49c;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: #fffaf0;
    color: #6c5225;
    font-size: .63rem;
    font-weight: 800
}

.journey-actions {
    display: grid;
    gap: 9px;
    margin-top: 22px
}

.journey-actions .button {
    width: 100%
}

.story-hero {
    background: linear-gradient(165deg, #f7efdc, #efe0bd 62%, #e4cf9e)
}

.story-hero__actions {
    margin-top: 20px
}

.stories-page {
    padding: 28px 0 64px
}

.story-search {
    display: grid;
    gap: 9px;
    margin-bottom: 18px
}

.story-search select {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #cab890;
    border-radius: 12px;
    background: #fffdf8;
    color: #26342d
}

.story-search .button {
    width: 100%
}

.story-list-heading {
    margin-top: 28px
}

.story-detail-page {
    padding: 28px 0 38px
}

.story-detail-grid {
    display: grid;
    gap: 26px
}

.story-detail-cover {
    width: min(78%, 300px);
    margin-inline: auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow)
}

.story-detail-cover > img {
    width: 100%;
    aspect-ratio: 3/4.2;
    object-fit: cover
}

.story-detail-copy h1 {
    margin: 8px 0 3px;
    font: 700 clamp(2.3rem, 11vw, 4.2rem)/.98 var(--serif)
}

.story-byline {
    margin: 0 0 18px;
    color: #62695f
}

.story-byline a {
    color: #6f5424;
    font-weight: 800
}

.story-synopsis {
    color: #46534b
}

.story-synopsis p {
    margin: 0 0 13px
}

.creator-mini-card {
    margin-top: 20px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f4ecda;
    display: grid;
    grid-template-columns:48px 1fr;
    gap: 12px;
    align-items: center
}

.creator-mini-card > img, .creator-mini-card > span {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover
}

.creator-mini-card > span {
    display: grid;
    place-items: center;
    background: #174534;
    color: #f4dfad;
    font: 700 1.25rem var(--serif)
}

.creator-mini-card small, .creator-mini-card strong, .creator-mini-card a {
    display: block
}

.creator-mini-card small {
    font-size: .62rem;
    text-transform: uppercase;
    color: #7d7565
}

.creator-mini-card strong {
    font-family: var(--serif)
}

.creator-mini-card a {
    font-size: .68rem;
    color: #6e5325;
    font-weight: 800;
    margin-top: 2px
}

.chapter-index-section {
    padding: 36px 0 64px;
    background: #f1e6cf;
    border-block: 1px solid #ddcba5
}

.chapter-index {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #d3bf94;
    border-radius: 14px;
    overflow: hidden;
    background: #fffaf0
}

.chapter-index li + li {
    border-top: 1px solid #e0d3b6
}

.chapter-index a {
    display: grid;
    grid-template-columns:34px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 15px 13px
}

.chapter-index a > span {
    font: 700 .75rem var(--serif);
    color: #9b7b3d
}

.chapter-index strong, .chapter-index small {
    display: block
}

.chapter-index strong {
    font: 700 1rem var(--serif)
}

.chapter-index small {
    margin-top: 2px;
    color: #817b70;
    font-size: .66rem
}

.chapter-index b {
    font-size: .65rem;
    color: #37624f
}

.reader-page {
    background: #fffdf8;
    min-height: 70vh
}

.reader-progress {
    position: sticky;
    top: var(--header-h);
    z-index: 30;
    height: 3px;
    background: #eadfc8
}

.reader-progress span {
    display: block;
    height: 100%;
    background: #b68a3c
}

.reader-shell {
    width: min(calc(100% - 34px), 760px);
    margin: auto;
    padding: 30px 0 70px
}

.reader-head {
    text-align: center;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line)
}

.reader-head > a {
    display: inline-block;
    color: #765a29;
    font-size: .74rem;
    font-weight: 800
}

.reader-head p {
    margin: 16px 0 4px;
    color: #827b6d;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em
}

.reader-head h1 {
    margin: 0;
    font: 700 clamp(2.1rem, 10vw, 3.4rem)/1 var(--serif)
}

.reader-head > span {
    display: block;
    margin-top: 10px;
    color: #6d716a;
    font-size: .75rem
}

.reader-head > span a {
    color: #6d5427;
    font-weight: 700
}

.reader-content {
    padding: 30px 0;
    font: 1.08rem/1.85 var(--serif);
    color: #292d29
}

.reader-content p {
    margin: 0 0 1.45em
}

.reader-content p:first-child:first-letter {
    float: left;
    font: 700 4.2rem/.8 var(--serif);
    padding: 9px 8px 2px 0;
    color: #7e602b
}

.reader-nav {
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns:1fr auto 1fr;
    gap: 8px;
    align-items: center
}

.reader-nav > div:last-child {
    text-align: right
}

.reader-nav .button {
    min-height: 42px;
    padding: 8px 10px;
    font-size: .7rem
}

.reader-nav__index {
    font-size: .68rem;
    font-weight: 800;
    color: #705629
}

.creator-profile-page {
    padding-bottom: 40px
}

.creator-banner {
    height: 150px;
    background-position: center;
    background-size: cover;
    border-bottom: 1px solid #b79a5e
}

.creator-banner--fallback {
    background: radial-gradient(circle at 78% 20%, rgba(211, 173, 96, .28), transparent 30%), linear-gradient(135deg, #09291f, #123d30 52%, #1a3545)
}

.creator-profile-shell {
    margin-top: -44px;
    position: relative
}

.creator-profile-head {
    display: grid;
    grid-template-columns:88px 1fr;
    gap: 15px;
    align-items: end
}

.creator-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #fff9eb;
    box-shadow: 0 8px 18px rgba(15, 25, 20, .17)
}

.creator-avatar--fallback {
    display: grid;
    place-items: center;
    background: #174535;
    color: #f2d89c;
    font: 700 2rem var(--serif)
}

.creator-profile-head h1 {
    margin: 2px 0 0;
    font: 700 2rem/1 var(--serif)
}

.creator-profile-head > div > p:not(.eyebrow) {
    margin: 5px 0 0;
    color: #6d726c
}

.creator-bio {
    max-width: 760px;
    margin-top: 22px;
    color: #455048;
    font-family: var(--serif);
    font-size: 1.02rem
}

.creator-bio p {
    margin: 0 0 11px
}

.auth-page {
    padding: 38px 0 70px;
    background: linear-gradient(160deg, #f7f0df, #fffdf8 58%, #efe1c4)
}

.auth-shell {
    display: grid;
    gap: 22px
}

.auth-copy h1 {
    margin: 0;
    font: 700 clamp(2.3rem, 11vw, 4rem)/.98 var(--serif)
}

.auth-copy > p:not(.eyebrow) {
    color: #626a63;
    max-width: 560px
}

.auth-card {
    padding: 18px;
    border: 1px solid #d5c39b;
    background: #fffdf8;
    border-radius: 18px;
    box-shadow: var(--shadow-sm)
}

.form-stack {
    display: grid;
    gap: 14px
}

.form-helper {
    margin: 2px 0 0;
    text-align: center;
    color: #72736b;
    font-size: .76rem
}

.form-helper a {
    color: #684f21;
    font-weight: 800
}

.form-error {
    display: block;
    color: #8c373a;
    background: #f6e7e5;
    padding: 7px 9px;
    border-radius: 8px;
    font-weight: 650
}

.form-field small {
    font-size: .68rem;
    font-weight: 500;
    color: #77776f
}

.form-field small ul {
    margin: 3px 0;
    padding-left: 17px
}

.studio-page {
    padding: 34px 0 70px;
    background: #f8f1e2
}

.studio-head {
    display: grid;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid #d8c9aa
}

.studio-head h1 {
    margin: 0;
    font: 700 clamp(2.2rem, 10vw, 3.8rem)/1 var(--serif)
}

.studio-head p:not(.eyebrow) {
    margin: 8px 0 0;
    color: #666d66;
    max-width: 650px
}

.studio-head__actions {
    display: grid;
    gap: 8px
}

.studio-stats {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 9px;
    margin: 18px 0 30px
}

.studio-stats > div {
    padding: 16px 12px;
    border: 1px solid #d7c59f;
    border-radius: 13px;
    background: #fffaf0
}

.studio-stats span, .studio-stats small {
    display: block
}

.studio-stats span {
    font: 700 2rem/1 var(--serif);
    color: #164332
}

.studio-stats small {
    margin-top: 5px;
    color: #787367;
    font-size: .67rem;
    text-transform: uppercase;
    letter-spacing: .06em
}

.studio-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin-bottom: 12px
}

.studio-toolbar h2 {
    margin: 0;
    font: 700 1.55rem var(--serif)
}

.studio-toolbar a {
    font-size: .7rem;
    color: #755825;
    font-weight: 800
}

.studio-story-list {
    display: grid;
    gap: 10px
}

.studio-story-row {
    display: grid;
    grid-template-columns:62px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid #d8c8a8;
    background: #fffdf8;
    border-radius: 14px
}

.studio-story-row__cover {
    width: 62px;
    aspect-ratio: 3/4;
    border-radius: 8px;
    overflow: hidden;
    background: #153d31
}

.studio-story-row__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.studio-story-row__cover span {
    height: 100%;
    display: grid;
    place-items: center;
    color: #d8b76f;
    font: 700 1rem var(--serif)
}

.studio-story-row__copy {
    min-width: 0
}

.studio-story-row__copy h3 {
    margin: 5px 0 1px;
    font: 700 1.05rem var(--serif)
}

.studio-story-row__copy p {
    margin: 0;
    color: #79776e;
    font-size: .64rem
}

.studio-story-row__actions {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    gap: 12px
}

.studio-story-row__actions .button {
    min-height: 38px;
    padding: 7px 14px;
    font-size: .7rem
}

.studio-story-row__actions .text-link {
    font-size: .7rem
}

.status-pill {
    display: inline-block;
    border-radius: 20px;
    padding: 4px 8px;
    font-size: .58rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em
}

.status-pill--draft {
    background: #e7dfcf;
    color: #6f6758
}

.status-pill--published {
    background: #dcebe2;
    color: #205840
}

.studio-empty {
    padding: 34px 20px;
    text-align: center;
    border: 1px dashed #cdb98d;
    border-radius: 18px;
    background: #fffaf0
}

.studio-empty > span {
    font-size: 2rem;
    color: #b88938
}

.studio-empty h2 {
    margin: 7px 0;
    font: 700 1.6rem var(--serif)
}

.studio-empty p {
    color: #6e7169
}

.studio-empty .button {
    width: 100%;
    margin-top: 8px
}

.studio-form-page, .chapter-editor-page {
    padding: 34px 0 70px;
    background: #f8f1e3
}

.studio-form-shell {
    display: grid;
    gap: 22px
}

.studio-form-intro h1, .studio-editor-head h1 {
    margin: 0;
    font: 700 clamp(2rem, 10vw, 3.4rem)/1 var(--serif)
}

.studio-form-intro > p:not(.eyebrow) {
    color: #686d67
}

.studio-form {
    padding: 17px;
    border: 1px solid #d6c39c;
    background: #fffdf8;
    border-radius: 16px
}

.form-field--studio > label {
    font-size: .73rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #685a43
}

.form-field--studio input[type=file] {
    padding: 9px;
    background: #f8f0df
}

.form-field--studio ul {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 6px
}

.form-field--studio ul label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid #ded0b2;
    border-radius: 8px;
    background: #fff;
    font-size: .7rem;
    font-weight: 650
}

.form-field--studio input[type=checkbox] {
    width: auto
}

.studio-editor-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin-bottom: 18px
}

.studio-editor-grid {
    display: grid;
    gap: 20px
}

.studio-chapter-panel {
    padding: 17px;
    border: 1px solid #d4c097;
    border-radius: 16px;
    background: #f2e7d0;
    height: max-content
}

.studio-chapter-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.studio-chapter-panel__head h2 {
    margin: 0;
    font: 700 1.5rem var(--serif)
}

.studio-chapter-panel__head .button {
    min-height: 40px;
    padding: 8px 12px;
    font-size: .7rem
}

.studio-chapter-list {
    list-style: none;
    padding: 0;
    margin: 14px 0;
    display: grid;
    gap: 7px
}

.studio-chapter-list li {
    display: grid;
    grid-template-columns:30px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: #fffaf0;
    border: 1px solid #dbcaab;
    border-radius: 9px
}

.studio-chapter-list > li > span {
    color: #9b7838;
    font: 700 .68rem var(--serif)
}

.studio-chapter-list strong, .studio-chapter-list small {
    display: block
}

.studio-chapter-list strong {
    font: 700 .85rem var(--serif)
}

.studio-chapter-list small {
    font-size: .58rem;
    color: #827d72
}

.studio-chapter-list a {
    font-size: .65rem;
    color: #37614f;
    font-weight: 800
}

.studio-chapter-panel > form + .button, .studio-chapter-panel > form {
    margin-top: 9px
}

.chapter-editor-shell {
    max-width: 900px
}

.chapter-editor-form {
    padding: 17px;
    border: 1px solid #d5c29b;
    background: #fffdf8;
    border-radius: 16px
}

.chapter-editor-form textarea {
    min-height: 54vh;
    font: 1rem/1.7 var(--serif);
    resize: vertical
}

.chapter-editor-actions {
    display: grid;
    gap: 8px
}

.chapter-editor-actions .button {
    width: 100%
}

.nav-logout {
    margin: 0
}

.nav-logout button {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: inherit;
    padding: 13px 0;
    text-align: left;
    font: 1.25rem/1.25 var(--serif)
}

@media (min-width: 600px) {
    .story-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap: 18px
    }

    .story-card {
        grid-template-columns:118px minmax(0, 1fr)
    }

    .story-search {
        grid-template-columns:minmax(0, 1.8fr) 1fr 1fr auto
    }

    .story-search .button {
        width: auto
    }

    .story-search .search-field {
        grid-column: 1/-1
    }

    .story-detail-grid {
        grid-template-columns:240px minmax(0, 1fr);
        align-items: start
    }

    .story-detail-cover {
        width: 100%;
        margin: 0
    }

    .creator-banner {
        height: 220px
    }

    .creator-profile-shell {
        margin-top: -58px
    }

    .creator-profile-head {
        grid-template-columns:116px 1fr
    }

    .creator-avatar {
        width: 116px;
        height: 116px
    }

    .auth-shell {
        grid-template-columns:1fr 1fr;
        align-items: start;
        gap: 42px
    }

    .studio-head {
        grid-template-columns:1fr auto;
        align-items: end
    }

    .studio-head__actions {
        grid-template-columns:auto auto
    }

    .studio-stats {
        grid-template-columns:repeat(4, 1fr)
    }

    .studio-story-row {
        grid-template-columns:70px minmax(0, 1fr) auto;
        align-items: center
    }

    .studio-story-row__cover {
        width: 70px
    }

    .studio-story-row__actions {
        grid-column: auto;
        display: grid;
        justify-items: end
    }

    .studio-empty .button {
        width: auto
    }

    .studio-form-shell {
        grid-template-columns:.8fr 1.2fr;
        align-items: start
    }

    .chapter-editor-actions {
        grid-template-columns:1fr 1fr
    }

    .originals-empty {
        grid-template-columns:1fr auto
    }

    .originals-empty .button {
        width: auto
    }

    .journey-actions {
        grid-template-columns:auto auto;
        justify-content: center
    }

    .journey-actions .button {
        width: auto
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    .header-inner {
        grid-template-columns:52px 1fr 60px
    }

    .nav-toggle {
        display: grid
    }

    .nav-backdrop {
        display: block
    }

    .brand {
        justify-self: center;
        text-align: center
    }

    .site-nav {
        position: fixed;
        left: 24px;
        right: 24px;
        top: var(--header-h);
        display: block;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        background: #fffdf8;
        color: var(--ink-950);
        box-shadow: var(--shadow);
        border: 1px solid var(--parchment-300);
        padding: 18px 20px 20px;
        max-height: calc(100vh - var(--header-h) - 24px);
        overflow: auto;
        grid-column: auto;
        grid-row: auto
    }

    .site-nav__head {
        display: flex
    }

    .site-nav > a {
        display: flex;
        border-bottom: 1px solid var(--line);
        padding: 13px 0;
        font: 1.25rem/1.25 var(--serif);
        color: var(--ink-950)
    }

    .site-nav > a:last-of-type {
        border-bottom: 0
    }

    .nav-open .site-nav {
        transform: none;
        opacity: 1;
        visibility: visible
    }

    .bag-button {
        grid-column: auto
    }

    .nav-logout button {
        color: var(--ink-950)
    }
}

@media (min-width: 900px) {
    .originals-home-head {
        grid-template-columns:1fr auto;
        align-items: end
    }

    .originals-home-head .button {
        width: auto
    }

    .story-detail-page {
        padding: 52px 0 68px
    }

    .story-detail-grid {
        grid-template-columns:minmax(270px, 360px) minmax(0, 1fr);
        gap: 68px
    }

    .story-detail-cover {
        position: sticky;
        top: calc(var(--header-h) + 28px)
    }

    .story-detail-copy {
        padding-top: 22px
    }

    .chapter-index-shell {
        max-width: 900px
    }

    .reader-shell {
        padding-top: 54px
    }

    .creator-banner {
        height: 290px
    }

    .creator-profile-shell {
        margin-top: -70px
    }

    .creator-profile-head {
        grid-template-columns:140px 1fr
    }

    .creator-avatar {
        width: 140px;
        height: 140px
    }

    .auth-page {
        padding: 70px 0 100px
    }

    .auth-shell {
        gap: 78px
    }

    .auth-card {
        padding: 26px
    }

    .studio-page {
        padding: 58px 0 90px
    }

    .studio-editor-grid {
        grid-template-columns:minmax(0, 1.15fr) minmax(330px, .85fr);
        align-items: start
    }

    .studio-chapter-panel {
        position: sticky;
        top: calc(var(--header-h) + 24px)
    }

    .studio-form {
        padding: 24px
    }

    .chapter-editor-form {
        padding: 26px
    }
}

@media (min-width: 1200px) {
    .header-inner {
        grid-template-columns:170px minmax(0, 1fr) 64px;
        gap: 16px
    }

    .site-nav {
        justify-content: center;
        gap: 14px
    }

    .site-nav > a {
        font-size: .72rem;
        white-space: nowrap
    }

    .site-nav .nav-secondary, .site-nav .nav-bag-link {
        display: none
    }

    .nav-logout button {
        border: 0;
        padding: 6px 0;
        color: #eee0bd;
        font: 700 .72rem var(--sans);
        white-space: nowrap
    }

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

    .story-grid--home {
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }

    .story-card {
        grid-template-columns:1fr;
        display: block
    }

    .story-card__cover {
        aspect-ratio: 3/4;
        min-height: 0
    }

    .story-cover-fallback {
        min-height: 100%;
        aspect-ratio: 3/4
    }

    .story-card__body {
        padding: 16px
    }

    .story-card__title {
        font-size: 1.3rem
    }

    .story-card__body > p {
        font-size: .76rem
    }

    .originals-home-section {
        padding: 70px 0
    }

    .originals-home-head {
        margin-bottom: 30px
    }
}

/* v3.0 QA contrast correction */
.originals-home-head .button--secondary {
    background: transparent;
    color: #f8e9c7;
    border-color: #d0aa63
}

.originals-home-head .button--secondary:hover {
    background: rgba(255, 255, 255, .06)
}

/* v4.0 — My Archive & Operational Backoffice */
.account-page {
    padding: 34px 0 72px;
    background: linear-gradient(165deg, #f7efde, #fffdf8 56%, #eee1c8);
    min-height: 70vh
}

.account-shell {
    display: grid;
    gap: 22px
}

.account-shell--narrow {
    max-width: 940px
}

.account-head {
    display: grid;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid #d9c9a8
}

.account-head h1 {
    margin: 0;
    font: 700 clamp(2.1rem, 10vw, 3.8rem)/1 var(--serif)
}

.account-head p:not(.eyebrow) {
    max-width: 720px;
    margin: 8px 0 0;
    color: #68706a
}

.account-head .button {
    width: 100%
}

.account-stats {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 9px
}

.account-stats > a {
    display: grid;
    gap: 5px;
    padding: 16px 14px;
    border: 1px solid #d8c7a4;
    border-radius: 14px;
    background: #fffaf0;
    color: inherit;
    box-shadow: var(--shadow-sm)
}

.account-stats strong {
    font: 700 2rem/1 var(--serif);
    color: #174332
}

.account-stats span {
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #746e62
}

.account-grid {
    display: grid;
    gap: 12px
}

.account-panel {
    padding: 16px;
    border: 1px solid #d9c8a7;
    border-radius: 16px;
    background: #fffdf8;
    box-shadow: var(--shadow-sm)
}

.account-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #e7dcc5
}

.account-panel__head h2, .account-panel > h2 {
    margin: 0;
    font: 700 1.35rem var(--serif)
}

.account-panel__head a {
    font-size: .68rem;
    font-weight: 800;
    color: #6e5426
}

.account-row {
    display: grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid #eee4d0;
    color: inherit
}

.account-row:last-child {
    border-bottom: 0
}

.account-row strong, .account-row span {
    display: block
}

.account-row strong {
    font: 700 .94rem var(--serif)
}

.account-row span {
    margin-top: 3px;
    font-size: .65rem;
    color: #7c786e
}

.account-row b {
    font-size: .7rem;
    color: #37614f;
    text-align: right
}

.account-empty {
    margin: 14px 0 2px;
    color: #78756d;
    font-size: .75rem
}

.account-actions {
    display: grid;
    gap: 8px
}

.account-actions .button {
    width: 100%
}

.creator-profile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 14px 0 18px
}

.creator-profile-actions > span {
    font-size: .7rem;
    font-weight: 800;
    color: #6f6c64
}

.creator-profile-actions form {
    margin: 0
}

.creator-profile-actions .button {
    min-height: 40px;
    padding: 8px 14px
}

.backoffice-body {
    margin: 0;
    background: #eef0eb;
    color: #17251f;
    font-family: var(--sans)
}

.backoffice-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    background: #082d24;
    color: #f1e2bd;
    border-bottom: 1px solid #315044
}

.backoffice-brand {
    display: grid;
    color: inherit;
    line-height: 1;
    text-decoration: none
}

.backoffice-brand strong {
    font: 800 1.1rem var(--serif);
    letter-spacing: .08em
}

.backoffice-brand span {
    margin-top: 3px;
    font-size: .58rem;
    letter-spacing: .18em
}

.backoffice-user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .68rem
}

.backoffice-user a {
    color: #f1e2bd;
    font-weight: 800
}

.backoffice-layout {
    min-height: calc(100vh - 58px)
}

.backoffice-nav {
    display: flex;
    gap: 6px;
    overflow: auto;
    padding: 9px 12px;
    background: #10392f;
    border-bottom: 1px solid #315044
}

.backoffice-nav a {
    flex: 0 0 auto;
    padding: 8px 11px;
    border-radius: 8px;
    color: #e8d9b6;
    font-size: .68rem;
    font-weight: 800
}

.backoffice-nav a:hover {
    background: #204c40
}

.backoffice-main {
    min-width: 0;
    padding: 18px 12px 48px
}

.backoffice-main .message-stack {
    position: static;
    margin-bottom: 14px
}

.backoffice-page-head {
    display: grid;
    gap: 12px;
    margin-bottom: 18px
}

.backoffice-page-head h1 {
    margin: 0;
    font: 700 clamp(2rem, 8vw, 3rem)/1 var(--serif)
}

.backoffice-page-head p:not(.eyebrow) {
    margin: 7px 0 0;
    color: #657069
}

.backoffice-stats {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 8px;
    margin-bottom: 18px
}

.backoffice-stats article {
    padding: 14px;
    border: 1px solid #ced6ce;
    border-radius: 11px;
    background: #fff
}

.backoffice-stats span, .backoffice-stats small {
    display: block
}

.backoffice-stats span {
    font: 700 1.35rem/1.05 var(--serif);
    color: #154839;
    overflow-wrap: anywhere
}

.backoffice-stats small {
    margin-top: 6px;
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6d756f
}

.backoffice-panel {
    margin-bottom: 14px;
    padding: 15px;
    border: 1px solid #ccd5cd;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(18, 44, 34, .05)
}

.backoffice-panel > h2, .backoffice-panel__head h2 {
    margin: 0;
    font: 700 1.3rem var(--serif)
}

.backoffice-panel > h3 {
    margin: 18px 0 8px;
    font: 700 1rem var(--serif)
}

.backoffice-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px
}

.backoffice-panel__head a {
    font-size: .68rem;
    font-weight: 800;
    color: #315d4c
}

.backoffice-table-wrap {
    overflow: auto
}

.backoffice-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
    font-size: .7rem
}

.backoffice-table th, .backoffice-table td {
    padding: 10px 9px;
    border-bottom: 1px solid #e5e9e5;
    text-align: left;
    vertical-align: top
}

.backoffice-table th {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #69716c;
    background: #f5f7f4
}

.backoffice-table a {
    font-weight: 800;
    color: #2b654f
}

.backoffice-list {
    display: grid
}

.backoffice-list > a, .backoffice-list > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #e6eae6;
    color: inherit
}

.backoffice-list > *:last-child {
    border-bottom: 0
}

.backoffice-list strong, .backoffice-list span {
    display: block
}

.backoffice-list strong {
    font: 700 .83rem var(--serif)
}

.backoffice-list span {
    font-size: .63rem;
    color: #6d756f;
    text-align: right
}

.backoffice-filters {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #cbd4cc;
    border-radius: 11px;
    background: #fff
}

.backoffice-filters input, .backoffice-filters select, .backoffice-panel input, .backoffice-panel select, .backoffice-panel textarea {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid #c8d0c9;
    border-radius: 8px;
    background: #fff;
    font: inherit
}

.backoffice-filters .button {
    width: 100%
}

.backoffice-detail-grid {
    display: grid;
    gap: 14px
}

.backoffice-dl {
    display: grid;
    gap: 8px;
    margin: 14px 0
}

.backoffice-dl > div {
    padding: 10px;
    background: #f5f7f4;
    border-radius: 8px
}

.backoffice-dl dt {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #69726c
}

.backoffice-dl dd {
    margin: 4px 0 0;
    font-size: .76rem
}

.backoffice-body .form-field {
    display: grid;
    gap: 5px
}

.backoffice-body .form-field > span {
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #59665e
}

.backoffice-body input[type=checkbox] {
    width: auto
}

.backoffice-body .button--secondary {
    color: #214a3b;
    border-color: #8ca598;
    background: #fff
}

.backoffice-body .button--primary {
    background: #143f32;
    color: #fff;
    border-color: #143f32
}

@media (min-width: 600px) {
    .account-head {
        grid-template-columns:1fr auto;
        align-items: end
    }

    .account-head .button {
        width: auto
    }

    .account-stats {
        grid-template-columns:repeat(4, 1fr)
    }

    .account-grid {
        grid-template-columns:1fr 1fr
    }

    .account-actions {
        grid-template-columns:repeat(3, auto);
        justify-content: start
    }

    .account-actions .button {
        width: auto
    }

    .backoffice-stats {
        grid-template-columns:repeat(4, 1fr)
    }

    .backoffice-filters {
        grid-template-columns:minmax(220px, 1fr) 180px 180px auto
    }

    .backoffice-filters .button {
        width: auto
    }

    .backoffice-page-head {
        grid-template-columns:1fr auto;
        align-items: end
    }

    .backoffice-detail-grid {
        grid-template-columns:minmax(0, 1.15fr) minmax(300px, .85fr)
    }
}

@media (min-width: 900px) {
    .backoffice-layout {
        display: grid;
        grid-template-columns:190px minmax(0, 1fr)
    }

    .backoffice-nav {
        position: sticky;
        top: 58px;
        align-self: start;
        height: calc(100vh - 58px);
        display: grid;
        align-content: start;
        gap: 4px;
        padding: 18px 12px;
        border-right: 1px solid #315044;
        border-bottom: 0;
        overflow: auto
    }

    .backoffice-nav a {
        padding: 10px 12px
    }

    .backoffice-main {
        padding: 28px 28px 64px
    }

    .account-page {
        padding: 58px 0 90px
    }

    .account-grid {
        gap: 16px
    }

    .account-panel {
        padding: 19px
    }
}

/* v5.0 — launch readiness additions; full visual redesign is intentionally deferred to v6.0 */
.book-card__stock {
    margin: -4px 0 9px;
    color: #6a6b63;
    font-size: .68rem;
    font-weight: 700
}

.book-card__stock--off {
    color: #944a4a
}

.creator-start-page {
    min-height: 68vh;
    padding: 42px 0 72px;
    background: linear-gradient(160deg, #f7efde 0, #fffdf8 58%, #eee1c8 100%)
}

.creator-start-shell {
    display: grid;
    gap: 22px
}

.creator-start-copy {
    max-width: 760px
}

.creator-start-copy h1 {
    margin: 0;
    font: 600 clamp(2.35rem, 10vw, 4.6rem)/.96 var(--serif);
    letter-spacing: -.035em;
    color: #12382d
}

.creator-start-copy > p:not(.eyebrow) {
    max-width: 680px;
    margin: 18px 0 0;
    color: #59645d
}

.creator-start-actions {
    display: grid;
    gap: 9px;
    margin-top: 24px
}

.creator-start-steps {
    display: grid;
    gap: 10px
}

.creator-start-steps article {
    padding: 17px;
    border: 1px solid #d5c39d;
    border-radius: 15px;
    background: rgba(255, 253, 248, .9);
    box-shadow: var(--shadow-sm)
}

.creator-start-steps span {
    display: block;
    margin-bottom: 8px;
    color: #9a7330;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em
}

.creator-start-steps strong {
    display: block;
    font: 700 1.08rem var(--serif)
}

.creator-start-steps p {
    margin: 6px 0 0;
    color: #666d67;
    font-size: .78rem
}

.error-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px 16px;
    background: radial-gradient(circle at 50% 20%, #f8edda, #fffdf8 58%, #e9dcc2)
}

.error-card {
    width: min(100%, 620px);
    padding: 30px 24px;
    border: 1px solid #d0bc91;
    border-radius: 20px;
    background: #fffdf8;
    box-shadow: var(--shadow);
    text-align: center
}

.error-card h1 {
    margin: 0;
    font: 600 clamp(2rem, 9vw, 3.6rem)/1 var(--serif);
    color: #12382d
}

.error-card p:not(.eyebrow) {
    margin: 15px auto 22px;
    max-width: 480px;
    color: #626963
}

.error-card .button {
    min-width: 190px
}

.backoffice-dl dd {
    overflow-wrap: anywhere
}

@media (min-width: 600px) {
    .creator-start-actions {
        grid-template-columns:auto auto;
        justify-content: start
    }

    .creator-start-steps {
        grid-template-columns:1fr 1fr
    }
}

@media (min-width: 900px) {
    .creator-start-page {
        padding: 72px 0 100px
    }

    .creator-start-shell {
        grid-template-columns:minmax(0, 1.1fr) minmax(360px, .9fr);
        gap: 70px;
        align-items: start
    }

    .creator-start-steps {
        grid-template-columns:1fr 1fr
    }

    .error-card {
        padding: 42px
    }
}

/* ==========================================================================
   v6.0 UI TEST 01B — HOME REFINED
   Scope: existing Header / Navigation + Homepage + Footer only.

   RULES FOR THIS TEST
   - Django templates, URLs, class names, and IDs are NOT renamed.
   - Backend / database logic is NOT changed.
   - Desktop + tablet use castle-archive-desktop.jpg.
   - Mobile uses castle-archive-mobile.jpg.
   - Scroll motion is controlled by classes added dynamically from main.js.
   ========================================================================== */

:root {
    --header-h: 76px;
    --v6-header-height: 76px;
    --v6-cream: #fbf6e9;
    --v6-cream-deep: #efe4cf;
    --v6-forest: #17382d;
    --v6-forest-soft: #36584b;
    --v6-brass: #9d7d43;
    --v6-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   01. HEADER / NAVIGATION
   Existing selectors only: .site-header, .header-inner, .site-nav, etc.
   -------------------------------------------------------------------------- */
.site-header {
    height: var(--v6-header-height);
    background: rgba(251, 246, 233, .96);
    color: var(--v6-forest);
    border-bottom: 1px solid rgba(23, 56, 45, .10);
    box-shadow: 0 8px 28px rgba(18, 44, 34, .06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.header-inner {
    height: 100%;
    grid-template-columns: 48px minmax(0, 1fr) 52px;
    gap: 12px;
}

.icon-button {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border-color: rgba(23, 56, 45, .15);
    background: rgba(255, 253, 247, .72);
    color: var(--v6-forest);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.icon-button:hover {
    border-color: rgba(157, 125, 67, .44);
    background: #fffdf7;
}

.icon-button:active {
    transform: scale(.97);
}

.icon-button svg {
    width: 23px;
    stroke-width: 1.55;
}

.brand {
    color: var(--v6-forest);
    letter-spacing: .075em;
}

.brand__main {
    font-size: 1.08rem;
    font-weight: 700;
}

.brand__sub {
    margin-top: 4px;
    color: var(--v6-brass);
    font-size: .66rem;
    letter-spacing: .24em;
}

.bag-button {
    width: 48px;
    height: 48px;
    background: var(--v6-forest);
    color: #fff8e8;
    box-shadow: 0 8px 20px rgba(23, 56, 45, .15);
}

.bag-button__label {
    font-size: .82rem;
}

.bag-button__count {
    top: -2px;
    right: -3px;
    min-width: 21px;
    height: 21px;
    line-height: 17px;
    border: 2px solid var(--v6-cream);
    background: #8c3338;
}

.nav-backdrop {
    display: none;
}

.site-nav {
    z-index: 160;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100svh;
    max-height: none;
    padding: calc(88px + env(safe-area-inset-top)) 26px calc(28px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: radial-gradient(circle at 84% 12%, rgba(184, 154, 93, .12), transparent 26%),
    linear-gradient(180deg, #fbf6e9 0%, #f6edd9 100%);
    color: var(--v6-forest);
    box-shadow: none;
    transform: translate3d(0, -102%, 0);
    opacity: 1;
    visibility: visible;
    transition: transform .36s var(--v6-motion-ease);
}

.nav-open .site-nav {
    transform: translate3d(0, 0, 0);
}

.site-nav__head {
    min-height: 46px;
    margin-bottom: 4px;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(23, 56, 45, .12);
    color: var(--v6-brass);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .2em;
}

.nav-close {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(23, 56, 45, .13);
    border-radius: 999px;
    color: var(--v6-forest);
    font-size: 1.55rem;
}

.site-nav > a,
.nav-logout button {
    min-height: 55px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid rgba(23, 56, 45, .095);
    background: transparent;
    color: var(--v6-forest);
    text-align: left;
    font: 600 clamp(1.38rem, 7vw, 1.7rem)/1 var(--serif);
    letter-spacing: -.015em;
}

.site-nav > a span {
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(157, 125, 67, .12);
    font: 800 .62rem/1 var(--sans);
}

.site-nav .nav-secondary {
    color: #456157;
}

.nav-logout {
    margin: 0;
}

.nav-logout button {
    cursor: pointer;
}

.nav-open .brand,
.nav-open .bag-button,
.nav-open .nav-toggle {
    position: relative;
    z-index: 180;
}

.nav-open .nav-toggle,
.nav-open .brand,
.nav-open .bag-button {
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   02. HOMEPAGE HERO — MOBILE FIRST
   Mobile castle is now a full hero background layer behind the headline.
   No extra castle block below the CTA, so the hero stays compact.
   Existing HTML / class / ID names remain unchanged.
   -------------------------------------------------------------------------- */
.home-hero {
    position: relative;
    min-height: 590px;
    overflow: hidden;
    isolation: isolate;
    background: var(--v6-cream);
    border-bottom: 1px solid rgba(23, 56, 45, .10);
}

/*
   Soft parchment veil:
   keeps the castle visible while preserving headline readability.
*/
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(
            circle at 50% 18%,
            rgba(255, 253, 247, .92) 0%,
            rgba(255, 253, 247, .68) 31%,
            rgba(255, 253, 247, .25) 55%,
            transparent 76%
    ),
    linear-gradient(
            180deg,
            rgba(251, 246, 233, .44) 0%,
            rgba(251, 246, 233, .20) 42%,
            rgba(239, 228, 207, .64) 100%
    );
    pointer-events: none;
}

/*
   Existing .hero-castle element becomes the mobile background artwork.
   It occupies the complete hero instead of reserving space below the copy.
*/
.hero-castle {
    --castle-parallax-y: 0px;
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(0, var(--castle-parallax-y), 0) scale(1.035);
    transform-origin: center center;
    background: linear-gradient(
            180deg,
            rgba(251, 246, 233, .06) 0%,
            rgba(251, 246, 233, 0) 58%,
            rgba(239, 228, 207, .52) 100%
    ),
    url('../images/hero/castle-archive-mobile.jpg') center 38% / cover no-repeat;
    filter: saturate(.78) contrast(.94);
    opacity: .88;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
    will-change: transform;
}

/*
   Copy remains above both castle and parchment veil.
*/
.home-hero__inner {
    min-height: 590px;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    padding-top: clamp(34px, 6vh, 48px);
    padding-bottom: clamp(38px, 7vh, 56px);
}

.home-hero__copy {
    position: relative;
    z-index: 4;
    width: min(100%, 650px);
    margin-inline: auto;
    text-align: center;
}

/*
   A restrained glow immediately behind the copy prevents busy castle
   details from competing with the editorial headline.
*/
.home-hero__copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -32px -16px -26px;
    border-radius: 42%;
    background: radial-gradient(
            ellipse at center,
            rgba(255, 253, 247, .68) 0%,
            rgba(255, 253, 247, .40) 42%,
            rgba(255, 253, 247, 0) 76%
    );
    pointer-events: none;
}

.home-hero .eyebrow {
    margin-bottom: 14px;
    color: #86662f;
    letter-spacing: .20em;
}

.home-hero h1 {
    max-width: 8.4ch;
    margin: 0 auto;
    color: var(--v6-forest);
    font-size: clamp(3rem, 14vw, 4.45rem);
    line-height: .90;
    font-weight: 600;
    letter-spacing: -.047em;
    text-wrap: balance;
    text-shadow: 0 2px 20px rgba(255, 253, 247, .58);
}

.hero-lede {
    max-width: 330px;
    margin: 20px auto 0;
    color: #465b52;
    font-size: clamp(.92rem, 3.8vw, 1rem);
    line-height: 1.62;
    text-wrap: pretty;
    text-shadow: 0 1px 12px rgba(255, 253, 247, .70);
}

.hero-actions {
    max-width: 390px;
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.home-hero .button {
    min-height: 50px;
    border-radius: 999px;
}

.home-hero .button--primary {
    background: var(--v6-forest);
    box-shadow: 0 14px 32px rgba(23, 56, 45, .18);
}

.home-hero .button--secondary {
    background: rgba(255, 253, 247, .84);
    border-color: rgba(23, 56, 45, .19);
    color: var(--v6-forest);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.hero-mood-link {
    display: inline-block;
    margin-top: 18px;
    color: #694f25;
    font: 800 .69rem/1.2 var(--sans);
    letter-spacing: .035em;
    text-shadow: 0 1px 10px rgba(255, 253, 247, .85);
}

/* --------------------------------------------------------------------------
   03. HOMEPAGE SECTIONS
   Same existing section/card classes; only the visual treatment is refined.
   -------------------------------------------------------------------------- */
.store-section {
    padding: clamp(66px, 13vw, 104px) 0;
    background: var(--v6-cream);
}

.store-section--tint {
    background: var(--v6-cream-deep);
    border-color: rgba(23, 56, 45, .10);
}

.section-heading {
    align-items: flex-end;
    margin-bottom: 30px;
}

.section-heading h2,
.journey-section h2 {
    color: var(--v6-forest);
    font-weight: 600;
    letter-spacing: -.03em;
}

.section-heading .text-link,
.text-link {
    color: #81652f;
}

.book-rail {
    gap: 16px;
    padding-bottom: 20px;
}

.originals-home-section {
    position: relative;
    overflow: hidden;
    padding: clamp(74px, 14vw, 112px) 0;
    background: radial-gradient(circle at 82% 16%, rgba(208, 170, 99, .13), transparent 26%),
    linear-gradient(145deg, #0b2c23 0%, #12382d 58%, #0f2d25 100%);
}

.originals-home-section::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -240px;
    top: -270px;
    border: 1px solid rgba(231, 207, 154, .10);
    border-radius: 50%;
    pointer-events: none;
}

.originals-home-head {
    position: relative;
    z-index: 1;
    gap: 24px;
}

.originals-home-head h2 {
    color: #fff5dd;
    font-weight: 600;
    letter-spacing: -.03em;
}

.originals-home-head > div > p:not(.eyebrow) {
    color: #c0cbc3;
    line-height: 1.7;
}

.originals-home-head .button--secondary {
    border-radius: 999px;
    color: #fff3d2;
    border-color: rgba(208, 170, 99, .62);
}

.originals-empty {
    border-color: rgba(213, 177, 105, .28);
    background: rgba(3, 20, 15, .26);
}

.mood-section {
    background: radial-gradient(circle at 12% 20%, rgba(184, 154, 93, .08), transparent 26%),
    var(--v6-cream);
}

.mood-grid {
    gap: 12px;
}

.mood-card {
    min-height: 126px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 14px 28px rgba(32, 33, 27, .10);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.mood-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(32, 33, 27, .14);
    filter: saturate(1.04);
}

.mood-story-link {
    min-height: 34px;
    display: grid;
    place-items: center;
    border-radius: 0 0 14px 14px;
    background: #fffdf7;
}

.journey-section {
    padding: clamp(74px, 13vw, 108px) 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent),
    var(--v6-cream-deep);
}

.journey-section > .site-container > .eyebrow,
.journey-section > .site-container > h2 {
    text-align: center;
}

.journey-section > .site-container > h2 {
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: 34px;
}

.journey-step {
    min-height: 148px;
    display: grid;
    place-content: center;
    padding: 20px 12px;
    border-color: rgba(157, 125, 67, .42);
    border-radius: 18px;
    background: rgba(255, 253, 247, .72);
    box-shadow: 0 12px 30px rgba(69, 55, 30, .06);
}

.journey-step span {
    background: var(--v6-cream);
}

.journey-actions {
    margin-top: 28px;
}

/* --------------------------------------------------------------------------
   04. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
    padding: 70px 0;
    background: radial-gradient(circle at 88% 10%, rgba(208, 170, 99, .08), transparent 24%),
    #071f19;
    color: #c6d0ca;
    border-top: 1px solid rgba(208, 170, 99, .20);
}

.footer-brand {
    color: #f3e1b5;
    font-family: var(--serif);
    font-size: 1.25rem;
    letter-spacing: .08em;
}

.footer-brand span {
    color: #caa45d;
    font-size: .75em;
    letter-spacing: .18em;
}

.site-footer p {
    color: #92a198;
}

.footer-links a {
    color: #d5d9ce;
}

.footer-links a:hover {
    color: #f2dba5;
}

/* --------------------------------------------------------------------------
   05. SCROLL SCENE MOTION
   main.js adds .scroll-scene and direction classes at runtime. Backgrounds
   stay fixed while each section's existing .site-container enters / exits.
   -------------------------------------------------------------------------- */
html.motion-ready .scroll-scene > .site-container {
    opacity: .30;
    filter: blur(2px);
    transform: translate3d(0, 24px, 0) scale(.992);
    transition: opacity .62s var(--v6-motion-ease),
    transform .78s var(--v6-motion-ease),
    filter .72s var(--v6-motion-ease);
    will-change: opacity, transform, filter;
}

html.motion-ready .scroll-scene.scene-from-top:not(.is-scene-visible) > .site-container {
    transform: translate3d(0, -26px, 0) scale(.992);
}

html.motion-ready .scroll-scene.scene-from-bottom:not(.is-scene-visible) > .site-container {
    transform: translate3d(0, 26px, 0) scale(.992);
}

html.motion-ready .scroll-scene.scene-exit-to-top:not(.is-scene-visible) > .site-container {
    opacity: .18;
    filter: blur(3px);
    transform: translate3d(0, -32px, 0) scale(.988);
}

html.motion-ready .scroll-scene.scene-exit-to-bottom:not(.is-scene-visible) > .site-container {
    opacity: .18;
    filter: blur(3px);
    transform: translate3d(0, 32px, 0) scale(.988);
}

html.motion-ready .scroll-scene.is-scene-visible > .site-container {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

/* Child staggering makes rails/cards feel alive without changing markup. */
html.motion-ready .scroll-scene .book-card,
html.motion-ready .scroll-scene .story-card,
html.motion-ready .scroll-scene .mood-card-wrap,
html.motion-ready .scroll-scene .journey-step {
    transition: opacity .52s var(--v6-motion-ease),
    transform .64s var(--v6-motion-ease),
    box-shadow .22s ease;
}

html.motion-ready .scroll-scene:not(.is-scene-visible) .book-card,
html.motion-ready .scroll-scene:not(.is-scene-visible) .story-card,
html.motion-ready .scroll-scene:not(.is-scene-visible) .mood-card-wrap,
html.motion-ready .scroll-scene:not(.is-scene-visible) .journey-step {
    opacity: .38;
    transform: translate3d(0, 18px, 0) scale(.985);
}

html.motion-ready .scroll-scene.is-scene-visible .book-card,
html.motion-ready .scroll-scene.is-scene-visible .story-card,
html.motion-ready .scroll-scene.is-scene-visible .mood-card-wrap,
html.motion-ready .scroll-scene.is-scene-visible .journey-step {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

html.motion-ready .scroll-scene.is-scene-visible .book-card:nth-child(2),
html.motion-ready .scroll-scene.is-scene-visible .story-card:nth-child(2),
html.motion-ready .scroll-scene.is-scene-visible .mood-card-wrap:nth-child(2),
html.motion-ready .scroll-scene.is-scene-visible .journey-step:nth-child(2) {
    transition-delay: .05s;
}

html.motion-ready .scroll-scene.is-scene-visible .book-card:nth-child(3),
html.motion-ready .scroll-scene.is-scene-visible .story-card:nth-child(3),
html.motion-ready .scroll-scene.is-scene-visible .mood-card-wrap:nth-child(3),
html.motion-ready .scroll-scene.is-scene-visible .journey-step:nth-child(3) {
    transition-delay: .10s;
}

html.motion-ready .scroll-scene.is-scene-visible .book-card:nth-child(4),
html.motion-ready .scroll-scene.is-scene-visible .story-card:nth-child(4),
html.motion-ready .scroll-scene.is-scene-visible .mood-card-wrap:nth-child(4),
html.motion-ready .scroll-scene.is-scene-visible .journey-step:nth-child(4) {
    transition-delay: .15s;
}

html.motion-ready .scroll-scene.is-scene-visible .book-card:nth-child(5),
html.motion-ready .scroll-scene.is-scene-visible .mood-card-wrap:nth-child(5) {
    transition-delay: .20s;
}

html.motion-ready .scroll-scene.is-scene-visible .book-card:nth-child(6),
html.motion-ready .scroll-scene.is-scene-visible .mood-card-wrap:nth-child(6) {
    transition-delay: .25s;
}

/* --------------------------------------------------------------------------
   05A. MOBILE HERO WIDTH REFINEMENT
   Keeps the hero compact on common 360–599 px phone widths.
   -------------------------------------------------------------------------- */
@media (min-width: 360px) and (max-width: 599px) {
    .home-hero,
    .home-hero__inner {
        min-height: 610px;
    }

    .home-hero h1 {
        max-width: 8.6ch;
    }

    .hero-lede {
        max-width: 350px;
    }

    .hero-castle {
        background-position: center 37%;
    }
}

/* --------------------------------------------------------------------------
   06. TABLET — switches to the dedicated wide castle asset.
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
    .hero-actions {
        grid-template-columns: 1fr 1fr;
    }

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

@media (min-width: 768px) {
    /*
       TABLET HERO
       Keep the castle as an absolute visual layer instead of forcing the
       hero into a hard two-column grid. This matches the editorial overlap
       used on desktop while staying stable at 768–1199px.
    */
    .home-hero {
        min-height: max(640px, calc(100svh - var(--v6-header-height)));
    }

    .home-hero__inner {
        min-height: inherit;
        display: flex;
        align-items: center;
        padding-top: 56px;
        padding-bottom: 60px;
    }

    .home-hero__copy {
        width: min(57%, 560px);
        max-width: 560px;
        margin: 0;
        text-align: left;
    }

    .home-hero__copy::before {
        inset: -54px -96px -54px -54px;
        border-radius: 46%;
        background: radial-gradient(
                ellipse at 28% 50%,
                rgba(255, 253, 247, .88) 0%,
                rgba(255, 253, 247, .60) 44%,
                rgba(255, 253, 247, .18) 68%,
                rgba(255, 253, 247, 0) 82%
        );
    }

    .home-hero h1 {
        max-width: 7.2ch;
        margin-left: 0;
        margin-right: 0;
        font-size: clamp(4rem, 7.15vw, 5.7rem);
        line-height: .90;
    }

    .hero-lede {
        max-width: 440px;
        margin-left: 0;
        margin-right: 0;
    }

    .hero-actions {
        max-width: 440px;
        margin-left: 0;
        margin-right: 0;
    }

    /*
       The desktop/tablet artwork now spans the complete hero layer.
       We size the actual image independently instead of `cover`, so the
       castle itself is not unpredictably cropped by viewport aspect ratio.
    */
    .hero-castle {
        inset: 0;
        width: 100%;
        height: 100%;
        transform: translate3d(0, var(--castle-parallax-y), 0);
        background-image: linear-gradient(
                90deg,
                rgba(251, 246, 233, .98) 0%,
                rgba(251, 246, 233, .90) 26%,
                rgba(251, 246, 233, .42) 48%,
                rgba(251, 246, 233, .06) 66%,
                rgba(251, 246, 233, 0) 100%
        ),
        url('../images/hero/castle-archive-desktop.jpg');
        background-size: 100% 100%, 78% auto;
        background-position: center, right center;
        background-repeat: no-repeat;
        filter: saturate(.80) contrast(.95);
        opacity: .98;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (min-width: 900px) {
    .mood-section .section-heading--stacked {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        align-items: center;
    }
}

/* Tablet keeps the mobile/tablet menu behavior even though the hero is split. */
@media (min-width: 900px) and (max-width: 1199px) {
    :root {
        --header-h: 82px;
        --v6-header-height: 82px;
    }

    .header-inner {
        grid-template-columns: 48px minmax(0, 1fr) 52px;
    }

    .site-nav {
        top: 0;
        left: auto;
        right: 0;
        width: min(430px, 86vw);
        max-width: 430px;
        height: 100svh;
        padding: calc(98px + env(safe-area-inset-top)) 32px 28px;
        transform: translate3d(102%, 0, 0);
        box-shadow: -24px 0 70px rgba(10, 32, 24, .14);
    }

    .nav-open .site-nav {
        transform: translate3d(0, 0, 0);
    }

    .nav-backdrop {
        display: block;
        inset: 0;
        background: rgba(7, 31, 25, .35);
        opacity: 0;
        visibility: hidden;
    }

    .nav-open .nav-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .nav-open .brand,
    .nav-open .bag-button {
        opacity: 1;
        pointer-events: auto;
    }
}

/* --------------------------------------------------------------------------
   07. DESKTOP
   Simple editorial split: text left, wide castle composition overlapping right.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    :root {
        --header-h: 84px;
        --v6-header-height: 84px;
    }

    .site-header {
        background: rgba(251, 246, 233, .95);
    }

    .header-inner {
        grid-template-columns: 190px minmax(0, 1fr) 58px;
        gap: 24px;
    }

    .nav-toggle,
    .nav-backdrop,
    .site-nav__head {
        display: none;
    }

    .brand {
        justify-self: start;
        text-align: left;
    }

    .brand__main {
        font-size: 1.12rem;
    }

    .site-nav {
        position: static;
        inset: auto;
        width: auto;
        max-width: none;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(12px, 1.15vw, 20px);
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        opacity: 1;
        visibility: visible;
    }

    .site-nav > a,
    .nav-logout button {
        min-height: 38px;
        width: auto;
        display: inline-flex;
        padding: 0;
        border: 0;
        color: var(--v6-forest);
        font: 700 .70rem/1 var(--sans);
        letter-spacing: .015em;
        white-space: nowrap;
    }

    .site-nav > a:hover,
    .nav-logout button:hover {
        color: var(--v6-brass);
    }

    .site-nav .nav-secondary,
    .site-nav .nav-bag-link {
        display: none;
    }

    .nav-logout {
        display: inline-flex;
    }

    .bag-button {
        justify-self: end;
    }

    .home-hero {
        min-height: max(680px, calc(100svh - var(--v6-header-height)));
    }

    .home-hero__inner {
        width: min(calc(100% - 64px), 1360px);
        min-height: inherit;
        display: flex;
        align-items: center;
        gap: 0;
        padding-top: 58px;
        padding-bottom: 66px;
    }

    .home-hero__copy {
        width: min(47%, 620px);
        max-width: 620px;
    }

    .home-hero h1 {
        max-width: 7ch;
        font-size: clamp(5rem, 5.65vw, 6.75rem);
        line-height: .90;
    }

    .hero-castle {
        inset: 0;
        width: 100%;
        height: 100%;
        background-size: 100% 100%, 72% auto;
        background-position: center, right center;
        background-repeat: no-repeat;
    }

    .store-section {
        padding: 96px 0;
    }

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

/* --------------------------------------------------------------------------
   07B. WIDE DESKTOP
   Keep the hero from looking tiny on large monitors while preserving the
   same class names and markup.
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    .home-hero__inner {
        width: min(calc(100% - 96px), 1520px);
    }

    .home-hero__copy {
        width: min(45%, 660px);
        max-width: 660px;
    }

    .home-hero h1 {
        font-size: clamp(5.8rem, 4.6vw, 7.1rem);
    }

    .hero-castle {
        background-size: 100% 100%, 70% auto;
    }
}

/* --------------------------------------------------------------------------
   08. SMALL PHONE SAFETY
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
    .site-container {
        width: min(calc(100% - 24px), var(--container));
    }

    .site-nav {
        padding-inline: 20px;
    }

    .site-nav > a,
    .nav-logout button {
        min-height: 51px;
        font-size: 1.3rem;
    }

    .home-hero,
    .home-hero__inner {
        min-height: 560px;
    }

    .home-hero__inner {
        padding-top: 30px;
        padding-bottom: 34px;
    }

    .home-hero h1 {
        max-width: 8.2ch;
        font-size: clamp(2.8rem, 14.4vw, 3.75rem);
    }

    .hero-lede {
        max-width: 292px;
        font-size: .9rem;
        line-height: 1.58;
    }

    .hero-actions {
        margin-top: 21px;
        gap: 9px;
    }

    .hero-castle {
        inset: 0;
        width: 100%;
        height: 100%;
        background-position: center 39%;
        transform: translate3d(0, var(--castle-parallax-y), 0) scale(1.06);
    }

    .mood-grid {
        gap: 8px;
    }
}

/* --------------------------------------------------------------------------
   09. REDUCED MOTION / ACCESSIBILITY
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.motion-ready .scroll-scene > .site-container,
    html.motion-ready .scroll-scene .book-card,
    html.motion-ready .scroll-scene .story-card,
    html.motion-ready .scroll-scene .mood-card-wrap,
    html.motion-ready .scroll-scene .journey-step,
    .site-nav,
    .icon-button,
    .mood-card,
    .hero-castle {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
        animation: none;
    }
}


/* ==========================================================================
   v6.0 UI TEST 01C — HERO INTEGRATED BACKGROUND FIX
   Tablet + desktop only.

   Intent:
   - The castle landscape is ONE hero background scene.
   - Headline/copy/buttons sit on top of that scene.
   - No visible split between a cream text panel and an image panel.
   - Existing HTML, class names, IDs, JS and backend stay unchanged.
   ========================================================================== */

@media (min-width: 768px) {
    .home-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        background: #f5ecda;
    }

    .home-hero__inner {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        min-height: max(650px, calc(100svh - var(--v6-header-height)));
        padding-top: clamp(56px, 7vh, 86px);
        padding-bottom: clamp(60px, 8vh, 94px);
    }

    .home-hero__copy {
        position: relative;
        z-index: 4;
        width: min(53%, 610px);
        max-width: 610px;
        margin: 0;
        text-align: left;
    }

    .home-hero h1 {
        max-width: 7.3ch;
        font-size: clamp(4.25rem, 7vw, 6.25rem);
        line-height: .90;
    }

    .hero-lede {
        max-width: 500px;
        margin-left: 0;
        margin-right: 0;
    }

    .hero-actions {
        max-width: 500px;
        margin-left: 0;
        margin-right: 0;
        grid-template-columns: 1fr 1fr;
    }

    .hero-castle {
        --castle-parallax-y: 0px;
        position: absolute;
        z-index: 1;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        filter: saturate(.78) contrast(.96);
        -webkit-mask-image: none;
        mask-image: none;
        transform: translate3d(0, var(--castle-parallax-y), 0) scale(1.018);
        transform-origin: center center;
        background-image: linear-gradient(90deg,
        rgba(251, 246, 233, .98) 0%,
        rgba(251, 246, 233, .94) 17%,
        rgba(251, 246, 233, .82) 34%,
        rgba(251, 246, 233, .53) 50%,
        rgba(251, 246, 233, .18) 66%,
        rgba(251, 246, 233, .035) 80%,
        rgba(251, 246, 233, 0) 100%
        ),
        linear-gradient(180deg,
                rgba(251, 246, 233, .08) 0%,
                rgba(251, 246, 233, 0) 62%,
                rgba(239, 228, 207, .36) 100%
        ),
        url('../images/hero/castle-archive-desktop.jpg');
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-size: 100% 100%, 100% 100%, cover;
        background-position: center, center, right center;
        will-change: transform;
    }
}

/* Tablet: keep copy readable while still showing landscape behind it. */
@media (min-width: 768px) and (max-width: 1199px) {
    .home-hero__inner {
        width: min(calc(100% - 48px), var(--container));
        min-height: max(620px, calc(100svh - var(--v6-header-height)));
    }

    .home-hero__copy {
        width: min(60%, 560px);
    }

    .home-hero h1 {
        max-width: 7.15ch;
        font-size: clamp(4.05rem, 8.6vw, 5.65rem);
    }

    .hero-castle {
        background-image: linear-gradient(90deg,
        rgba(251, 246, 233, .985) 0%,
        rgba(251, 246, 233, .94) 24%,
        rgba(251, 246, 233, .77) 43%,
        rgba(251, 246, 233, .40) 59%,
        rgba(251, 246, 233, .10) 73%,
        rgba(251, 246, 233, 0) 100%
        ),
        linear-gradient(180deg,
                rgba(251, 246, 233, .08) 0%,
                rgba(251, 246, 233, 0) 62%,
                rgba(239, 228, 207, .34) 100%
        ),
        url('../images/hero/castle-archive-desktop.jpg');
        background-size: 100% 100%, 100% 100%, cover;
        background-position: center, center, 63% center;
    }
}

/* Desktop: scene spans the whole hero. Castle remains right-weighted, but the
   landscape continues behind the headline so the composition feels unified. */
@media (min-width: 1200px) {
    .home-hero__inner {
        width: min(calc(100% - 64px), 1360px);
        min-height: max(680px, calc(100svh - var(--v6-header-height)));
    }

    .home-hero__copy {
        width: min(48%, 630px);
        max-width: 630px;
    }

    .home-hero h1 {
        max-width: 7ch;
        font-size: clamp(5rem, 5.65vw, 6.8rem);
    }

    .hero-castle {
        background-position: center, center, right center;
    }
}

@media (min-width: 1600px) {
    .home-hero__inner {
        width: min(calc(100% - 96px), 1520px);
    }

    .home-hero__copy {
        width: min(46%, 680px);
        max-width: 680px;
    }

    .home-hero h1 {
        font-size: clamp(5.9rem, 4.7vw, 7.35rem);
    }

    .hero-castle {
        background-position: center, center, right 45%;
    }
}

/* ========================================================================== 
   11. V7 — GROWTH / COMMERCE / SHARING
   --------------------------------------------------------------------------
   v7 intentionally extends the approved v6 visual system. Existing selectors
   are preserved; these styles only cover new controls and data surfaces.
   ========================================================================== */

.share-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 1.15rem 0 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.share-actions > span {
    flex: 1 0 100%;
    color: var(--ink-800);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.share-action {
    appearance: none;
    border: 1px solid rgba(20, 35, 49, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .56);
    color: var(--forest-900);
    cursor: pointer;
    font: 700 .82rem/1 var(--sans);
    padding: .72rem 1rem;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.share-action:hover,
.share-action:focus-visible {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .9);
    border-color: rgba(20, 35, 49, .34);
}

.share-action.is-done {
    border-color: rgba(79, 111, 45, .35);
    background: rgba(79, 111, 45, .10);
}

.success-breakdown {
    display: grid;
    gap: .65rem;
    margin: 1.15rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.success-breakdown > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
}

.success-breakdown .success-summary {
    margin-top: .25rem;
    padding-top: .85rem;
    border-top: 1px solid var(--line);
    font-size: 1.08rem;
}

.backoffice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
}

.backoffice-stats article span {
    overflow-wrap: anywhere;
}

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

@media (min-width: 720px) {
    .studio-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .studio-stats {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

/* ========================================================================== 
   12. V7.0.1 — MOBILE ACCOUNT + BACKOFFICE POLISH
   --------------------------------------------------------------------------
   Responsive-only refinement. Existing account/backoffice routes, data and
   desktop layout are preserved. The goal is to eliminate narrow-screen
   overflow and make operational pages comfortable at 320–430px.
   ========================================================================== */

.account-shell,
.account-head,
.account-head > div,
.account-stats,
.account-grid,
.account-panel,
.account-row,
.backoffice-layout,
.backoffice-main,
.backoffice-page-head,
.backoffice-panel,
.backoffice-list,
.backoffice-list > a,
.backoffice-list > div {
    min-width: 0;
}

.account-head h1,
.account-panel__head h2,
.account-row strong,
.account-row span,
.backoffice-page-head h1,
.backoffice-panel__head h2,
.backoffice-list strong,
.backoffice-list span {
    overflow-wrap: anywhere;
    word-break: normal;
}

.backoffice-topbar__start {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.backoffice-nav-toggle,
.backoffice-nav-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.backoffice-nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(241, 226, 189, .34);
    border-radius: 10px;
}

.backoffice-nav-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.backoffice-nav__head,
.backoffice-nav-backdrop {
    display: none;
}

@media (max-width: 599px) {
    .account-page {
        padding: 18px 0 56px;
        overflow-x: clip;
    }

    .account-page .site-container {
        width: min(calc(100% - 24px), var(--container));
    }

    .account-shell {
        gap: 14px;
    }

    .account-head {
        gap: 14px;
        padding: 18px;
        border: 1px solid rgba(157, 125, 67, .34);
        border-radius: 20px;
        background:
            radial-gradient(circle at 92% 8%, rgba(208, 170, 99, .17), transparent 38%),
            rgba(255, 253, 248, .74);
        box-shadow: 0 10px 34px rgba(67, 52, 30, .06);
    }

    .account-head h1 {
        max-width: 100%;
        font-size: clamp(2rem, 10.5vw, 3rem);
        line-height: .98;
        letter-spacing: -.025em;
    }

    .account-head p:not(.eyebrow) {
        margin-top: 10px;
        font-size: .92rem;
        line-height: 1.65;
    }

    .account-head .button {
        min-height: 48px;
        justify-content: center;
    }

    .account-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .account-stats > a {
        min-width: 0;
        min-height: 116px;
        align-content: center;
        padding: 16px;
        border-radius: 18px;
    }

    .account-stats strong {
        font-size: clamp(1.9rem, 10vw, 2.45rem);
    }

    .account-stats span {
        overflow-wrap: anywhere;
        line-height: 1.3;
    }

    .account-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .account-panel {
        padding: 15px;
        border-radius: 18px;
        overflow: hidden;
    }

    .account-panel__head {
        align-items: flex-start;
    }

    .account-panel__head h2,
    .account-panel > h2 {
        font-size: 1.28rem;
        line-height: 1.1;
    }

    .account-panel__head a {
        flex: 0 0 auto;
        padding-top: 2px;
    }

    .account-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        padding: 13px 0;
    }

    .account-row strong {
        font-size: 1rem;
        line-height: 1.15;
    }

    .account-row span {
        font-size: .7rem;
        line-height: 1.45;
    }

    .account-row b {
        justify-self: start;
        text-align: left;
    }

    .account-actions {
        gap: 10px;
    }

    .account-actions .button {
        min-height: 48px;
        justify-content: center;
    }

    .account-shell--narrow {
        max-width: none;
    }
}

@media (max-width: 359px) {
    .account-stats {
        grid-template-columns: 1fr;
    }

    .account-stats > a {
        min-height: 94px;
    }
}

@media (max-width: 899px) {
    .backoffice-body {
        overflow-x: hidden;
    }

    .backoffice-body.backoffice-nav-open {
        overflow: hidden;
    }

    .backoffice-topbar {
        min-height: 62px;
        padding: 9px 12px;
    }

    .backoffice-nav-toggle {
        display: grid;
    }

    .backoffice-brand strong {
        font-size: 1rem;
    }

    .backoffice-user {
        gap: 8px;
    }

    .backoffice-user span {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .backoffice-user a {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        border: 1px solid rgba(241, 226, 189, .28);
        border-radius: 9px;
    }

    .backoffice-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 44;
        display: block;
        background: rgba(4, 20, 16, .54);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .24s ease, visibility .24s ease;
    }

    .backoffice-nav {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 45;
        width: min(86vw, 320px);
        height: 100dvh;
        display: grid;
        align-content: start;
        gap: 5px;
        padding: 16px 14px 28px;
        border: 0;
        border-right: 1px solid #315044;
        background: #10392f;
        box-shadow: 20px 0 50px rgba(3, 21, 16, .22);
        overflow-y: auto;
        transform: translate3d(-104%, 0, 0);
        transition: transform .28s cubic-bezier(.22, 1, .36, 1);
    }

    .backoffice-nav__head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        min-height: 48px;
        margin-bottom: 6px;
        padding: 0 4px 10px;
        border-bottom: 1px solid rgba(232, 217, 182, .18);
        color: #e8d9b6;
        font: 800 .72rem var(--sans);
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .backoffice-nav-close {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(232, 217, 182, .28);
        border-radius: 10px;
        font-size: 1.55rem;
        line-height: 1;
    }

    .backoffice-nav a {
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: .76rem;
    }

    .backoffice-nav a:hover,
    .backoffice-nav a:focus-visible {
        background: #204c40;
    }

    .backoffice-body.backoffice-nav-open .backoffice-nav {
        transform: translate3d(0, 0, 0);
    }

    .backoffice-body.backoffice-nav-open .backoffice-nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .backoffice-layout {
        min-height: calc(100dvh - 62px);
    }

    .backoffice-main {
        width: 100%;
        padding: 18px 12px 52px;
    }

    .backoffice-page-head {
        gap: 8px;
        margin-bottom: 14px;
    }

    .backoffice-page-head h1 {
        font-size: clamp(2rem, 10vw, 2.8rem);
        overflow-wrap: anywhere;
    }

    .backoffice-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .backoffice-stats article {
        min-width: 0;
        min-height: 100px;
        display: grid;
        align-content: center;
        padding: 13px;
        border-radius: 13px;
    }

    .backoffice-stats span {
        font-size: clamp(1.18rem, 6vw, 1.55rem);
    }

    .backoffice-panel {
        padding: 14px;
        border-radius: 14px;
    }

    .backoffice-panel__head {
        align-items: flex-start;
    }

    .backoffice-table-wrap {
        width: calc(100% + 2px);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .backoffice-table {
        min-width: 640px;
    }

    .backoffice-list > a,
    .backoffice-list > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .backoffice-list span {
        text-align: left;
    }

    .backoffice-actions {
        justify-content: stretch;
    }

    .backoffice-actions .button {
        flex: 1 1 180px;
        justify-content: center;
    }
}

@media (max-width: 359px) {
    .backoffice-user span {
        display: none;
    }

    .backoffice-stats {
        grid-template-columns: 1fr;
    }

    .backoffice-stats article {
        min-height: 82px;
    }
}

/* ========================================================================== 
   13. V7.0.2 — OWNER BACKOFFICE OVERHAUL
   --------------------------------------------------------------------------
   Private superuser console. Keeps the existing /backoffice/ route and the
   consolidated main.css/main.js architecture while replacing Django Admin as
   the normal day-to-day operating surface.
   ========================================================================== */

.owner-console {
    --owner-bg: #edf0eb;
    --owner-panel: #ffffff;
    --owner-panel-soft: #f5f7f4;
    --owner-forest: #082d24;
    --owner-forest-2: #10392f;
    --owner-forest-3: #1a4b3d;
    --owner-gold: #c8a45f;
    --owner-border: #d4dbd4;
    --owner-muted: #69736d;
    --owner-danger: #87424a;
    --owner-warning: #9a6c27;
}

.owner-console .backoffice-topbar {
    min-height: 68px;
    padding: 10px 20px;
    background:
        linear-gradient(90deg, rgba(200, 164, 95, .08), transparent 38%),
        var(--owner-forest);
    border-bottom-color: rgba(222, 205, 165, .18);
    box-shadow: 0 8px 26px rgba(4, 25, 19, .12);
}

.owner-console .backoffice-brand strong {
    font-size: 1.15rem;
    letter-spacing: .11em;
}

.owner-console .backoffice-brand span {
    color: #d7c69d;
    font-weight: 800;
}

.owner-console__owner-badge {
    padding: 6px 9px;
    border: 1px solid rgba(241, 226, 189, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    color: #eadfca;
    font-size: .64rem;
    font-weight: 750;
}

.owner-nav {
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), transparent 32%),
        var(--owner-forest-2);
}

.owner-nav__group {
    display: grid;
    gap: 3px;
    margin-bottom: 15px;
}

.owner-nav__label {
    display: block;
    padding: 0 11px 6px;
    color: rgba(232, 217, 182, .55);
    font-size: .56rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.owner-nav__group a {
    position: relative;
}

.owner-nav__group a.is-active {
    background: rgba(232, 217, 182, .12);
    color: #fff5d9;
}

.owner-nav__group a.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 4px;
    background: var(--owner-gold);
}

.owner-nav__group--system {
    padding-top: 12px;
    border-top: 1px solid rgba(232, 217, 182, .13);
}

.owner-nav__footer {
    margin-top: auto;
    padding: 16px 10px 4px;
    border-top: 1px solid rgba(232, 217, 182, .13);
}

.owner-nav__footer p {
    margin: 0 0 10px;
    color: rgba(232, 217, 182, .52);
    font-size: .6rem;
}

.owner-nav__footer form {
    margin: 0;
}

.owner-nav__footer button {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(232, 217, 182, .22);
    border-radius: 9px;
    background: transparent;
    color: #eadfca;
    font-size: .68rem;
    font-weight: 800;
}

.owner-nav__footer button:hover,
.owner-nav__footer button:focus-visible {
    background: rgba(232, 217, 182, .08);
}

.owner-console .backoffice-main {
    background:
        radial-gradient(circle at 96% 0%, rgba(200, 164, 95, .08), transparent 28rem),
        var(--owner-bg);
}

.owner-page-head {
    padding-bottom: 4px;
}

.owner-command-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}

.owner-command-card {
    min-width: 0;
    min-height: 126px;
    display: grid;
    align-content: end;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--owner-border);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(200,164,95,.12), transparent 52%),
        #fff;
    box-shadow: 0 7px 24px rgba(18, 44, 34, .045);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.owner-command-card:hover,
.owner-command-card:focus-visible {
    transform: translateY(-2px);
    border-color: #aebfb3;
    box-shadow: 0 12px 30px rgba(18, 44, 34, .09);
}

.owner-command-card > span {
    margin-bottom: auto;
    color: #8a6b32;
    font-size: .56rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.owner-command-card strong {
    margin-top: 16px;
    font: 700 1.05rem/1.1 var(--serif);
    color: #153f32;
}

.owner-command-card small {
    margin-top: 6px;
    color: var(--owner-muted);
    font-size: .64rem;
    line-height: 1.45;
}

.owner-stat-grid article {
    position: relative;
    overflow: hidden;
}

.owner-stat-grid article::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: #c8d6ce;
}

.owner-stat-grid .owner-stat--attention::after {
    background: var(--owner-danger);
}

.owner-stat-grid .owner-stat--warning::after {
    background: var(--owner-warning);
}

.owner-dashboard-grid {
    align-items: start;
}

.owner-attention-list {
    display: grid;
}

.owner-attention-list > a {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #e7ebe7;
}

.owner-attention-list > a:last-child {
    border-bottom: 0;
}

.owner-attention-list strong,
.owner-attention-list small {
    display: block;
}

.owner-attention-list strong {
    font: 700 .84rem/1.15 var(--serif);
}

.owner-attention-list small {
    margin-top: 4px;
    color: var(--owner-muted);
    font-size: .61rem;
}

.owner-attention-list b {
    color: #516059;
    font-size: .62rem;
    white-space: nowrap;
}

.owner-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #82928a;
    box-shadow: 0 0 0 4px rgba(130,146,138,.1);
}

.owner-status-dot--attention {
    background: var(--owner-danger);
    box-shadow: 0 0 0 4px rgba(135,66,74,.1);
}

.owner-status-dot--warning {
    background: var(--owner-warning);
    box-shadow: 0 0 0 4px rgba(154,108,39,.1);
}

.owner-empty {
    margin: 12px 0 4px;
    color: var(--owner-muted);
    font-size: .72rem;
}

.owner-pill {
    display: inline-flex;
    padding: 4px 7px;
    border: 1px solid #d7ded8;
    border-radius: 999px;
    background: #f6f8f6;
    color: #41534a;
    font-size: .58rem;
    font-weight: 800;
    white-space: nowrap;
}

.owner-table-note {
    display: block;
    margin-top: 4px;
    color: var(--owner-muted);
    font-size: .58rem;
    line-height: 1.35;
}

.owner-subnav {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    margin: -4px 0 14px;
    padding: 0 0 3px;
    scrollbar-width: thin;
}

.owner-subnav a {
    flex: 0 0 auto;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid #cad3cc;
    border-radius: 9px;
    background: rgba(255,255,255,.78);
    color: #31584a;
    font-size: .66rem;
    font-weight: 800;
}

.owner-subnav a span {
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 99px;
    background: #e8eee9;
    text-align: center;
    font-size: .56rem;
}

.owner-filter--catalog,
.owner-filter--simple {
    grid-template-columns: minmax(180px, 1fr) minmax(160px, 220px) auto;
}

.owner-filter--simple {
    grid-template-columns: minmax(220px, 1fr) auto;
}

.owner-form {
    padding: clamp(16px, 3vw, 26px);
}

.owner-form--narrow {
    max-width: 760px;
}

.owner-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.owner-form-grid--single {
    grid-template-columns: 1fr;
}

.owner-form-field--wide {
    grid-column: 1 / -1;
}

.owner-form .form-field {
    align-content: start;
}

.owner-form .form-field > span {
    color: #42534a;
}

.owner-form input,
.owner-form select,
.owner-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 11px;
    border: 1px solid #c6d0c8;
    border-radius: 9px;
    background: #fff;
    color: #17251f;
    outline: none;
}

.owner-form textarea,
.owner-form select[multiple] {
    min-height: 132px;
}

.owner-form input:focus,
.owner-form select:focus,
.owner-form textarea:focus {
    border-color: #698b7b;
    box-shadow: 0 0 0 3px rgba(76, 118, 98, .11);
}

.owner-form input[type="checkbox"] {
    width: 20px;
    min-height: 20px;
    accent-color: var(--owner-forest-3);
}

.owner-form input[type="file"] {
    padding: 8px;
}

.owner-form .form-field > small {
    color: #748079;
    font-size: .6rem;
    line-height: 1.45;
}

.owner-form .form-error,
.owner-console .form-error {
    color: #8a363f;
    font-weight: 700;
}

.owner-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e3e8e4;
}

.owner-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.owner-settings-card {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    padding: 18px;
    border: 1px solid var(--owner-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(18, 44, 34, .04);
}

.owner-settings-card > span {
    color: #88682f;
    font-size: .57rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.owner-settings-card strong {
    margin-top: 16px;
    font: 700 1.2rem/1.1 var(--serif);
}

.owner-settings-card p {
    margin: 8px 0 20px;
    color: var(--owner-muted);
    font-size: .68rem;
}

.owner-settings-card b {
    margin-top: auto;
    color: #31584a;
    font-size: .62rem;
}

.owner-settings-card--technical {
    background: #f1f2ef;
    border-style: dashed;
}

.owner-console .backoffice-panel {
    border-color: var(--owner-border);
}

.owner-console .backoffice-table tbody tr:hover {
    background: #fafcf9;
}

.owner-console .backoffice-table td strong {
    color: #203f34;
}

@media (min-width: 900px) {
    .owner-console .backoffice-layout {
        grid-template-columns: 236px minmax(0, 1fr);
    }

    .owner-console .backoffice-nav {
        top: 68px;
        height: calc(100vh - 68px);
        padding: 20px 13px 14px;
    }

    .owner-console .backoffice-main {
        padding: 32px 34px 72px;
    }

    .owner-command-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

@media (min-width: 1200px) {
    .owner-console .backoffice-main {
        padding-inline: clamp(34px, 4vw, 64px);
    }
}

@media (max-width: 899px) {
    .owner-console .backoffice-topbar {
        min-height: 62px;
        padding: 9px 12px;
    }

    .owner-console__owner-badge {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .owner-nav__footer {
        margin-top: 16px;
    }

    .owner-filter--catalog,
    .owner-filter--simple {
        grid-template-columns: 1fr;
    }

    .owner-filter--catalog .button,
    .owner-filter--simple .button {
        width: 100%;
    }
}

@media (max-width: 599px) {
    .owner-command-grid,
    .owner-settings-grid,
    .owner-form-grid {
        grid-template-columns: 1fr;
    }

    .owner-command-card {
        min-height: 112px;
    }

    .owner-form-field--wide {
        grid-column: auto;
    }

    .owner-form-actions .button {
        width: 100%;
        justify-content: center;
    }

    .owner-attention-list > a {
        grid-template-columns: 10px minmax(0, 1fr);
    }

    .owner-attention-list > a > b {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 420px) {
    .owner-console__owner-badge {
        display: none;
    }
}

/* ========================================================================
   V7.0.3 — HIERARCHICAL CATEGORY FILTER
   ------------------------------------------------------------------------
   Marketplace-inspired information hierarchy using Grizelline styling.
   Category remains a radio filter; accordion buttons only expand/collapse.
   ======================================================================== */
.filter-category-tree {
    display: grid;
    gap: 4px;
}

.filter-category-tree input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-category-all,
.filter-category-row label {
    min-width: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.filter-category-all {
    min-height: 40px;
    padding: 0 10px;
    margin-bottom: 6px;
    border: 1px solid #d9ccb0;
    border-radius: 9px;
    background: #fffaf0;
    font-size: .78rem;
    font-weight: 750;
}

.filter-category-all:has(input:checked) {
    border-color: #315f4e;
    background: #eef4ef;
    color: #173b30;
}

.filter-category-branch {
    min-width: 0;
}

.filter-category-row {
    min-height: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
}

.filter-category-row:not(:has(.filter-category-toggle)) {
    grid-template-columns: minmax(0, 1fr);
}

.filter-category-row label {
    min-height: 40px;
    padding: 6px 8px;
    color: #5f665f;
    font-size: .82rem;
    line-height: 1.25;
}

.filter-category-row label span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.filter-category-row--level-1 label {
    color: #213d33;
    font-weight: 800;
}

.filter-category-row--level-2 label {
    padding-left: 22px;
    font-weight: 680;
}

.filter-category-row--level-3 label {
    padding-left: 42px;
    color: #6d6d65;
}

.filter-category-row:has(input:checked) {
    background: #edf3ee;
}

.filter-category-row:has(input:checked) label {
    color: #174a39;
    font-weight: 800;
}

.filter-category-toggle {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.filter-category-toggle:hover,
.filter-category-toggle:focus-visible {
    background: #f0eadc;
    outline: none;
}

.filter-category-toggle > span {
    width: 8px;
    height: 8px;
    display: block;
    border-right: 2px solid #6b746e;
    border-bottom: 2px solid #6b746e;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .18s ease;
}

.filter-category-branch.is-open > .filter-category-row .filter-category-toggle > span {
    transform: rotate(225deg) translate(-1px, -1px);
}

.filter-category-branch > .filter-category-children {
    display: none;
}

.filter-category-branch.is-open > .filter-category-children {
    display: block;
}

.filter-category-children {
    position: relative;
}

.filter-category-children::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 5px;
    left: 12px;
    width: 1px;
    background: #e2d9c5;
}

.filter-category-children .filter-category-children::before {
    left: 31px;
}

/* ========================================================================
   V7.0.3 — OWNER CATEGORY TREE
   ------------------------------------------------------------------------
   Keeps the Backoffice table compact while making parent/child depth clear.
   ======================================================================== */
.category-tree-name {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.category-tree-name--depth-2 {
    padding-left: 20px;
}

.category-tree-name--depth-3 {
    padding-left: 42px;
}

.category-tree-branch {
    color: #9b8151;
    font-weight: 500;
}

.category-admin-table td:nth-child(2),
.category-admin-table td:nth-child(4),
.category-admin-table td:nth-child(6),
.category-admin-table td:nth-child(7) {
    white-space: nowrap;
}

@media (max-width: 599px) {
    .filter-category-row--level-2 label {
        padding-left: 19px;
    }

    .filter-category-row--level-3 label {
        padding-left: 36px;
    }
}

.owner-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ecefeb;
    color: #657069;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.owner-status--success {
    background: #e8f2eb;
    color: #285b42;
}

/* --------------------------------------------------------------------------
   v7.0.5 — Conversion Copy & Marketing Readiness
   Supporting copy for commerce-first homepage section headings.
   -------------------------------------------------------------------------- */
.section-supporting {
    max-width: 520px;
    margin: 10px 0 0;
    color: var(--ink-600);
    font-size: .94rem;
    line-height: 1.6;
}

/* ==========================================================================
   v7.0.5 — HOMEPAGE HERO FULL-BLEED FINAL
   --------------------------------------------------------------------------
   Goal:
   - Desktop/tablet castle artwork fills the whole hero.
   - No empty parchment gutters on the left/right.
   - Castle remains visually anchored on the right.
   - Landscape / trees remain visible beneath the left copy.
   - Copy readability is protected by a soft parchment veil.
   - Mobile keeps its dedicated portrait artwork.
   ========================================================================== */


/* --------------------------------------------------------------------------
   01. HERO BASE
   -------------------------------------------------------------------------- */

.home-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(
            180deg,
            #f8f0df 0%,
            #f3e8d3 100%
        );

    border-bottom: 1px solid rgba(69, 55, 30, .14);
}


/*
 * home-hero__inner also has .site-container.
 * For the hero only, release it from the normal content max-width.
 *
 * Other sections still use the regular .site-container.
 */
.site-container.home-hero__inner {
    position: relative;

    width: 100%;
    max-width: none;
    margin-inline: 0;

    min-height: 660px;

    padding:
        52px
        clamp(20px, 5vw, 72px)
        310px;

    display: grid;
    align-items: center;

    overflow: hidden;
}


/* --------------------------------------------------------------------------
   02. ARTWORK
   Mobile is the default.
   -------------------------------------------------------------------------- */

.hero-castle,
.home-hero__castle {
    --castle-parallax-y: 0px;

    position: absolute;
    z-index: 0;

    left: -10%;
    right: -10%;
    bottom: -4%;

    height: 380px;

    transform:
        translate3d(
            0,
            var(--castle-parallax-y),
            0
        );

    background-image:
        linear-gradient(
            180deg,
            rgba(248, 241, 223, 0) 0%,
            rgba(248, 241, 223, .01) 54%,
            rgba(239, 228, 207, .88) 100%
        ),
        url("../images/hero/castle-archive-mobile.jpg");

    background-repeat: no-repeat;

    background-size:
        cover,
        cover;

    background-position:
        center,
        center 52%;

    filter:
        saturate(.78)
        contrast(.96);

    opacity: .96;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 9%,
            #000 91%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 9%,
            #000 91%,
            transparent 100%
        );

    pointer-events: none;
    will-change: transform;
}


/* --------------------------------------------------------------------------
   03. COPY
   -------------------------------------------------------------------------- */

.home-hero__copy {
    position: relative;
    z-index: 3;

    width: min(100%, 650px);

    margin-inline: auto;

    text-align: center;
}


.home-hero .eyebrow,
.home-hero__eyebrow {
    position: relative;
    z-index: 3;

    margin-bottom: 16px;

    color: #8c6930;

    letter-spacing: .22em;
}


.home-hero h1,
.home-hero__title {
    position: relative;
    z-index: 3;

    margin: 0;

    color: #123b30;

    font-size:
        clamp(
            3.05rem,
            14.6vw,
            5.25rem
        );

    line-height: .88;

    font-weight: 600;

    letter-spacing: -.047em;

    text-wrap: balance;
}


.hero-lede,
.home-hero__description {
    position: relative;
    z-index: 3;

    max-width: 560px;

    margin:
        22px
        auto
        0;

    color: #53645c;

    font-size:
        clamp(
            .94rem,
            3.8vw,
            1.05rem
        );

    line-height: 1.68;

    text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   04. HERO ACTIONS
   -------------------------------------------------------------------------- */

.hero-actions,
.home-hero__actions {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 440px;

    margin:
        28px
        auto
        0;

    display: grid;
    grid-template-columns: 1fr;

    gap: 10px;
}


.home-hero .button,
.home-hero .home-button {
    min-height: 50px;

    border-radius: 999px;
}


.home-hero .button--primary,
.home-hero .home-button--primary {
    background: #17382d;

    color: #fffaf0;

    box-shadow:
        0 14px 32px
        rgba(23, 56, 45, .17);
}


.home-hero .button--secondary,
.home-hero .home-button--secondary {
    background:
        rgba(
            255,
            253,
            247,
            .80
        );

    border-color:
        rgba(
            23,
            56,
            45,
            .20
        );

    color: #17382d;

    backdrop-filter: blur(5px);
}


.hero-mood-link {
    position: relative;
    z-index: 3;

    display: inline-block;

    margin-top: 20px;

    color: #745d31;

    font:
        700
        .71rem/1.2
        var(--sans);

    letter-spacing: .035em;
}


/* ==========================================================================
   05. TABLET
   Full artwork starts here.
   ========================================================================== */

@media (min-width: 600px) {

    .hero-actions,
    .home-hero__actions {
        grid-template-columns:
            1fr
            1fr;
    }

}


/* --------------------------------------------------------------------------
   768+
   The important change:
   the desktop artwork now covers the COMPLETE hero.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

    .site-container.home-hero__inner {
        min-height:
            max(
                690px,
                calc(
                    100svh -
                    var(--v6-header-height, 84px)
                )
            );

        padding:
            60px
            clamp(42px, 6vw, 96px)
            64px;

        display: grid;

        grid-template-columns:
            minmax(0, .95fr)
            minmax(0, 1.05fr);

        align-items: center;

        gap:
            clamp(
                24px,
                4vw,
                58px
            );
    }


    /*
     * FULL BLEED ARTWORK
     *
     * No left: 34%
     * No right: -19%
     * No side mask.
     *
     * Artwork physically covers the complete hero.
     */
    .hero-castle,
    .home-hero__castle {
        inset: 0;

        width: 100%;
        height: 100%;

        transform:
            translate3d(
                0,
                var(--castle-parallax-y),
                0
            );

        background-image:
            url("../images/hero/castle-archive-desktop.jpg");

        background-size: cover;

        /*
         * Keep the castle anchored toward the right.
         * Left side becomes landscape / trees / mist.
         */
        background-position:
            center right;

        background-repeat:
            no-repeat;

        filter:
            saturate(.82)
            contrast(.96)
            brightness(1.02);

        opacity: 1;

        -webkit-mask-image: none;
        mask-image: none;
    }


    /*
     * Parchment veil.
     *
     * Important:
     * this is translucent — it does NOT remove
     * the landscape on the left.
     *
     * We can still see trees / mountains,
     * while the headline remains readable.
     */
    .site-container.home-hero__inner::before {
        content: "";

        position: absolute;

        z-index: 1;

        inset: 0;

        background:
            linear-gradient(
                90deg,

                rgba(
                    250,
                    246,
                    236,
                    .91
                ) 0%,

                rgba(
                    250,
                    246,
                    236,
                    .86
                ) 19%,

                rgba(
                    250,
                    246,
                    236,
                    .70
                ) 32%,

                rgba(
                    250,
                    246,
                    236,
                    .42
                ) 44%,

                rgba(
                    250,
                    246,
                    236,
                    .15
                ) 57%,

                rgba(
                    250,
                    246,
                    236,
                    .02
                ) 69%,

                transparent 78%
            );

        pointer-events: none;
    }


    /*
     * Very soft local glow directly behind copy.
     * Prevents text from fighting against tree detail.
     */
    .site-container.home-hero__inner::after {
        content: "";

        position: absolute;

        z-index: 2;

        left: -8%;

        top: 5%;

        width: 58%;

        height: 90%;

        background:
            radial-gradient(
                ellipse at 45% 48%,

                rgba(
                    253,
                    249,
                    240,
                    .52
                ) 0%,

                rgba(
                    253,
                    249,
                    240,
                    .30
                ) 39%,

                transparent 72%
            );

        pointer-events: none;
    }


    .home-hero__copy {
        width: 100%;

        max-width: 620px;

        margin: 0;

        text-align: left;
    }


    .home-hero h1,
    .home-hero__title {
        font-size:
            clamp(
                4.4rem,
                8.5vw,
                6.6rem
            );
    }


    .hero-lede,
    .home-hero__description,
    .hero-actions,
    .home-hero__actions {
        margin-left: 0;
        margin-right: 0;
    }


    .hero-lede,
    .home-hero__description {
        max-width: 520px;
    }


    .hero-actions,
    .home-hero__actions {
        max-width: 500px;
    }

}


/* ==========================================================================
   06. DESKTOP
   ========================================================================== */

@media (min-width: 1200px) {

    .site-container.home-hero__inner {
        min-height:
            max(
                700px,
                calc(
                    100svh -
                    var(--v6-header-height, 84px)
                )
            );

        /*
         * Text keeps a proper editorial margin,
         * but the ARTWORK itself remains viewport-wide.
         */
        padding:
            64px
            clamp(
                72px,
                10vw,
                190px
            )
            72px;

        grid-template-columns:
            minmax(500px, 650px)
            minmax(0, 1fr);

        gap:
            clamp(
                40px,
                6vw,
                110px
            );
    }


    .home-hero__copy {
        max-width: 650px;
    }


    .home-hero h1,
    .home-hero__title {
        font-size:
            clamp(
                5.15rem,
                6.55vw,
                7.05rem
            );

        max-width: 620px;
    }


    .hero-lede,
    .home-hero__description {
        max-width: 520px;

        font-size: 1.02rem;
    }


    /*
     * Move the composition a little toward the right.
     * Castle stays on the right;
     * environment occupies the left.
     */
    .hero-castle,
    .home-hero__castle {
        background-position:
            61% center;
    }


    /*
     * Desktop gradient gets slightly lighter
     * so environmental details remain visible.
     */
    .site-container.home-hero__inner::before {
        background:
            linear-gradient(
                90deg,

                rgba(
                    250,
                    246,
                    236,
                    .88
                ) 0%,

                rgba(
                    250,
                    246,
                    236,
                    .82
                ) 19%,

                rgba(
                    250,
                    246,
                    236,
                    .64
                ) 31%,

                rgba(
                    250,
                    246,
                    236,
                    .34
                ) 43%,

                rgba(
                    250,
                    246,
                    236,
                    .09
                ) 56%,

                transparent 70%
            );
    }

}


/* ==========================================================================
   07. LARGE DESKTOP / WIDE MONITOR
   Screenshot lu termasuk range ini.
   ========================================================================== */

@media (min-width: 1500px) {

    .site-container.home-hero__inner {
        min-height:
            clamp(
                720px,
                calc(
                    100svh -
                    var(--v6-header-height, 84px)
                ),
                920px
            );

        padding-left:
            clamp(
                150px,
                10vw,
                210px
            );

        padding-right:
            clamp(
                80px,
                7vw,
                150px
            );
    }


    /*
     * Slight crop adjustment for ultrawide screens.
     *
     * 64% makes the castle stay visually toward
     * the right without leaving an empty right gutter.
     */
    .hero-castle,
    .home-hero__castle {
        background-position:
            64% center;
    }


    .home-hero h1,
    .home-hero__title {
        font-size:
            clamp(
                5.8rem,
                6.2vw,
                7.4rem
            );
    }

}


/* ==========================================================================
   08. VERY WIDE / 2K+
   ========================================================================== */

@media (min-width: 1900px) {

    .site-container.home-hero__inner {
        padding-left:
            clamp(
                180px,
                10vw,
                260px
            );

        padding-right:
            clamp(
                110px,
                8vw,
                220px
            );
    }


    .hero-castle,
    .home-hero__castle {
        background-position:
            66% center;
    }

}


/* ==========================================================================
   09. SMALL PHONE SAFETY
   ========================================================================== */

@media (max-width: 359px) {

    .site-container.home-hero__inner {
        width: 100%;

        min-height: 610px;

        padding:
            42px
            16px
            292px;
    }


    .home-hero h1,
    .home-hero__title {
        font-size:
            clamp(
                2.85rem,
                14.7vw,
                3.9rem
            );
    }


    .hero-castle,
    .home-hero__castle {
        left: -18%;
        right: -18%;

        height: 320px;
    }

}


/* ==========================================================================
   10. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .hero-castle,
    .home-hero__castle {
        transform: none;
        transition: none;
        animation: none;
        will-change: auto;
    }

}
/* ==========================================================================
   V8.0 — LISTINGS, BOOK HUNT & BULK IMPORT
   ========================================================================== */

.listing-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .28rem .58rem;
    border: 1px solid rgba(21, 75, 61, .18);
    border-radius: 999px;
    background: rgba(230, 241, 235, .72);
    color: #174f40;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.listing-badge--preloved {
    border-color: rgba(126, 84, 42, .22);
    background: rgba(244, 232, 210, .82);
    color: #6a4526;
}

.listing-focus {
    display: grid;
    gap: .65rem;
    margin: 1.1rem 0 1.25rem;
    padding: 1rem;
    border: 1px solid rgba(29, 77, 62, .13);
    border-radius: 18px;
    background: rgba(255, 252, 245, .72);
}

.listing-focus__headline {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
}

.listing-focus__headline small { opacity: .64; }
.listing-focus .book-detail-price { margin: 0; }

.listing-exact-copy {
    margin: .15rem 0 0;
    color: rgba(31, 49, 43, .76);
    font-size: .92rem;
    line-height: 1.6;
}

.listing-condition-note {
    padding-top: .75rem;
    border-top: 1px solid rgba(29, 77, 62, .11);
}

.listing-condition-note p { margin: .3rem 0 0; }

.listing-selector {
    display: grid;
    gap: .65rem;
    margin: 1.25rem 0;
}

.listing-selector__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.listing-selector__option {
    display: grid;
    gap: .18rem;
    padding: .85rem;
    border: 1px solid rgba(29, 77, 62, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .62);
    color: inherit;
    text-decoration: none;
}

.listing-selector__option.is-active {
    border-color: rgba(21, 75, 61, .5);
    box-shadow: 0 0 0 2px rgba(21, 75, 61, .08);
}

.listing-selector__option span,
.listing-selector__option small { font-size: .8rem; }

.listing-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: .7rem;
}

.listing-gallery-thumbs a {
    min-height: 72px;
    overflow: hidden;
    border: 1px solid rgba(29, 77, 62, .12);
    border-radius: 10px;
    background: rgba(255, 255, 255, .72);
}

.listing-gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-gallery-video {
    display: grid;
    place-items: center;
    padding: .6rem;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}

.book-hunt-callout {
    display: grid;
    gap: .45rem;
    margin: 1.2rem 0;
    padding: 1rem;
    border: 1px solid rgba(122, 73, 35, .16);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(247, 236, 214, .82), rgba(255, 251, 241, .8));
}

.book-hunt-callout a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .55rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.book-hunt-grid {
    display: grid;
    gap: 1.25rem;
}

.book-hunt-card {
    display: grid;
    grid-template-columns: minmax(180px, 320px) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(29, 77, 62, .12);
    border-radius: 22px;
    background: rgba(255, 252, 245, .82);
}

.book-hunt-card__media {
    min-height: 220px;
    background: #123c31;
    color: #f5ead1;
    text-decoration: none;
}

.book-hunt-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-hunt-card__media > span {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 100%;
    gap: .35rem;
}

.book-hunt-card__media strong { font-size: clamp(2.4rem, 8vw, 5rem); }

.book-hunt-card__copy {
    display: grid;
    align-content: center;
    gap: .55rem;
    padding: clamp(1.2rem, 3vw, 2rem);
}

.book-hunt-card__copy h2,
.book-hunt-card__copy p { margin: 0; }

.book-hunt-card__copy h2 a { color: inherit; text-decoration: none; }

.book-hunt-hero { padding: clamp(2rem, 5vw, 4.5rem) 0; }

.book-hunt-hero__grid {
    display: grid;
    grid-template-columns: minmax(240px, 440px) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
}

.book-hunt-hero__grid img,
.book-hunt-placeholder {
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 640px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(18, 60, 49, .14);
}

.book-hunt-placeholder {
    display: grid;
    place-items: center;
    padding: 2rem;
    background: #123c31;
    color: #f5ead1;
    font-size: clamp(1.6rem, 5vw, 3.5rem);
    font-weight: 800;
    text-align: center;
}

.book-hunt-story { max-width: 800px; }
.book-hunt-item-note { font-size: .86rem; opacity: .75; }

/* Owner console — import + listing management */
.owner-import-grid,
.owner-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.owner-form-stack { display: grid; gap: .9rem; }
.owner-import-guide ul { display: grid; gap: .65rem; padding-left: 1.2rem; }
.owner-import-result { margin-top: 1rem; }
.owner-import-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.owner-alert {
    margin: 1rem 0;
    padding: .9rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(29, 77, 62, .12);
}

.owner-alert--danger { background: rgba(156, 41, 41, .08); border-color: rgba(156, 41, 41, .22); }
.owner-alert--warning { background: rgba(176, 122, 39, .08); border-color: rgba(176, 122, 39, .24); }

.owner-status {
    display: inline-flex;
    width: fit-content;
    padding: .2rem .48rem;
    border-radius: 999px;
    background: rgba(29, 77, 62, .08);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.owner-status--error { color: #8d2d2d; background: rgba(141, 45, 45, .1); }
.owner-status--insert { color: #1e644d; background: rgba(30, 100, 77, .1); }
.owner-status--update { color: #4a5576; background: rgba(74, 85, 118, .1); }
.owner-status--skip { color: #7a5a24; background: rgba(122, 90, 36, .1); }
.owner-status--primary { color: #183f35; background: rgba(24, 63, 53, .12); }
.owner-status--preloved { color: #70491f; background: rgba(112, 73, 31, .11); }
.owner-status--new { color: #1e644d; background: rgba(30, 100, 77, .1); }

.owner-listing-card {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(29, 77, 62, .1);
}

.owner-listing-card:last-child { border-bottom: 0; }
.owner-listing-card--stacked { display: grid; }
.owner-listing-card__main { display: grid; gap: .35rem; }
.owner-listing-card__titleline { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.owner-listing-card__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.owner-media-strip { display: flex; flex-wrap: wrap; gap: .55rem; }

.owner-media-chip {
    display: grid;
    grid-template-columns: 48px minmax(100px, 1fr) auto;
    gap: .5rem;
    align-items: center;
    min-width: 240px;
    padding: .45rem;
    border: 1px solid rgba(29, 77, 62, .1);
    border-radius: 10px;
}

.owner-media-chip img { width: 48px; height: 48px; object-fit: cover; border-radius: 7px; }
.owner-media-chip div { display: grid; }
.owner-hunt-links { display: flex; flex-wrap: wrap; gap: .45rem; }
.owner-long-copy { margin-top: 1rem; line-height: 1.7; }
.owner-definition-list { display: grid; gap: .6rem; }
.owner-definition-list div { display: grid; grid-template-columns: 120px 1fr; gap: .75rem; }
.owner-definition-list dt { opacity: .62; }

@media (max-width: 760px) {
    .listing-selector__options,
    .owner-import-grid,
    .owner-detail-grid,
    .book-hunt-card,
    .book-hunt-hero__grid { grid-template-columns: 1fr; }

    .listing-gallery-thumbs { grid-template-columns: repeat(3, 1fr); }
    .owner-import-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .owner-listing-card { flex-direction: column; }
    .book-hunt-card__media { min-height: 180px; }
}


/* ================================================================
   Grizelline Archive v9.0 - Product Variant Foundation
   ================================================================ */
.variant-selector {
    margin: 22px 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 250, 240, .72)
}
.variant-selector__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px
}
.variant-selector__head strong {display:block;font-family:var(--serif);font-size:1rem}
.variant-selector__head small {color:var(--ink-600);font-size:.76rem}
.variant-selector__options {display:grid;grid-template-columns:1fr;gap:9px}
.variant-selector__option {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:3px 12px;
    align-items:center;
    padding:12px 13px;
    border:1px solid rgba(119,91,42,.22);
    border-radius:12px;
    background:#fffdf8;
    transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease
}
.variant-selector__option:hover {transform:translateY(-1px);border-color:rgba(49,92,76,.6);box-shadow:var(--shadow-sm)}
.variant-selector__option.is-active {border-color:#315c4c;box-shadow:0 0 0 2px rgba(49,92,76,.10);background:#f4f8f3}
.variant-selector__option.is-unavailable {opacity:.58}
.variant-selector__option span {font-weight:750;color:var(--ink-950)}
.variant-selector__option small {font-size:.7rem;color:var(--ink-600)}
.variant-selector__option strong {grid-column:2;grid-row:1;color:#315c4c;white-space:nowrap}
.variant-selector__option em {grid-column:2;grid-row:2;font-style:normal;font-size:.7rem;color:var(--ink-600);text-align:right}
.cart-variant-label {display:block;margin:6px 0;color:#5b4a2e;font-size:.78rem}
.owner-variant-note {margin:7px 0 0;font-size:.78rem}
.owner-variant-note a {color:#315c4c;font-weight:700}
.inline-form {display:inline;margin-left:8px}
@media (min-width:700px) {
    .variant-selector__options {grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ========================================================================== 
   V11.0 — STOREFRONT UX UPGRADE
   Desktop navigation groups + richer product detail presentation.
   Mobile/tablet navigation intentionally remains the v10 flat menu.
   ========================================================================== */

.desktop-nav {
    display: none;
}

/* --- Product detail ------------------------------------------------------ */
.v11-product-page {
    padding: 24px 0 72px;
    background:
        radial-gradient(circle at 8% 8%, rgba(208,170,99,.08), transparent 30%),
        linear-gradient(180deg, #fffdf8 0%, #fbf6ea 100%);
}

.v11-product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    color: var(--ink-600);
    font-size: .78rem;
}

.v11-product-breadcrumb a:hover {
    color: var(--brass-500);
}

.v11-product-breadcrumb span[aria-current="page"] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v11-product-hero {
    display: grid;
    gap: 30px;
}

.v11-product-gallery {
    min-width: 0;
}

.v11-product-gallery__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 430px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(93, 74, 42, .16);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.84), rgba(241,230,206,.72)),
        #f7efdf;
    box-shadow: 0 22px 55px rgba(50, 37, 17, .10);
}

.v11-product-gallery__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 58%, rgba(184,139,61,.07) 58% 59%, transparent 59% 100%),
        radial-gradient(circle at 78% 12%, rgba(255,255,255,.55), transparent 28%);
}

.v11-product-gallery__main-link {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.v11-product-gallery__main {
    width: auto;
    max-width: min(100%, 390px);
    max-height: 600px;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 0 24px 45px rgba(26, 21, 13, .22);
    transition: opacity .16s ease, transform .24s ease;
}

.v11-product-gallery__main-link:hover .v11-product-gallery__main {
    transform: translateY(-2px);
}

.v11-product-gallery__fallback {
    position: relative;
    z-index: 1;
    width: min(100%, 390px);
    min-height: 520px;
}

.v11-product-gallery__hint {
    position: absolute;
    z-index: 2;
    right: 15px;
    bottom: 14px;
    padding: 6px 9px;
    border: 1px solid rgba(69,55,30,.12);
    border-radius: 999px;
    background: rgba(255,253,248,.9);
    color: var(--ink-600);
    font-size: .68rem;
    letter-spacing: .04em;
}

.v11-product-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin-top: 11px;
}

.v11-product-thumb {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    min-width: 0;
    overflow: hidden;
    padding: 4px;
    border: 1px solid rgba(93,74,42,.18);
    border-radius: 10px;
    background: #fffdf8;
    color: var(--forest-900);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

button.v11-product-thumb {
    width: 100%;
}

.v11-product-thumb:hover,
.v11-product-thumb.is-active {
    border-color: var(--forest-700);
    box-shadow: 0 0 0 2px rgba(27,85,65,.10);
    transform: translateY(-1px);
}

.v11-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}

.v11-product-thumb--video {
    grid-template-rows: 1fr auto;
    gap: 2px;
    background: var(--forest-950);
    color: #fff8e9;
}

.v11-product-thumb--video span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 50%;
    font-size: .8rem;
}

.v11-product-thumb--video small {
    font-size: .62rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.v11-product-purchase {
    min-width: 0;
}

.v11-product-back {
    display: inline-flex;
    margin-bottom: 18px;
    color: #7c5b22;
    font: 700 .78rem/1.2 var(--sans);
}

.v11-product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.v11-product-tags span {
    padding: 6px 9px;
    border: 1px solid rgba(184,139,61,.26);
    border-radius: 999px;
    background: #fff9ec;
    color: #73531f;
    font-size: .68rem;
    font-weight: 700;
}

.v11-product-heading h1 {
    max-width: 18ch;
    margin: 0;
    color: var(--forest-950);
    font: 500 clamp(2.45rem, 10vw, 4.25rem)/.94 var(--serif);
    letter-spacing: -.035em;
}

.v11-product-author {
    margin: 14px 0 0;
    color: var(--ink-600);
    font: 1.02rem/1.45 var(--serif);
}

.v11-product-author strong {
    color: #74521d;
    font-weight: 700;
}

.v11-product-price-block {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0 0;
    padding: 19px 0 21px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.v11-product-price {
    margin: 0 0 9px;
    color: var(--forest-950);
    font: 700 clamp(1.65rem, 7vw, 2.2rem)/1 var(--serif);
}

.v11-product-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.v11-product-copy-note {
    max-width: 180px;
    color: var(--ink-600);
    text-align: right;
    font-size: .72rem;
    line-height: 1.45;
}

.v11-product-option {
    margin-top: 22px;
}

.v11-product-option__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin-bottom: 10px;
}

.v11-product-option__head .eyebrow {
    margin-bottom: 4px;
}

.v11-product-option__head h2 {
    margin: 0;
    color: var(--forest-950);
    font: 700 1.05rem/1.2 var(--serif);
}

.v11-product-option__head > span {
    color: var(--ink-600);
    font-size: .7rem;
}

.v11-product-option__description {
    margin: -2px 0 11px;
    color: var(--ink-600);
    font-size: .82rem;
}

.v11-product-variants,
.v11-product-offers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

.v11-product-variant,
.v11-product-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px;
    padding: 12px 13px;
    border: 1px solid rgba(93,74,42,.18);
    border-radius: 11px;
    background: rgba(255,253,248,.88);
    transition: .15s ease;
}

.v11-product-variant:hover,
.v11-product-offer:hover,
.v11-product-variant.is-active,
.v11-product-offer.is-active {
    border-color: rgba(27,85,65,.70);
    background: #f3f7ef;
    box-shadow: 0 0 0 2px rgba(27,85,65,.08);
}

.v11-product-variant.is-unavailable {
    opacity: .52;
}

.v11-product-variant__label,
.v11-product-offer > span {
    min-width: 0;
    overflow: hidden;
    color: var(--ink-950);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v11-product-variant small,
.v11-product-offer small {
    color: var(--ink-600);
    font-size: .68rem;
}

.v11-product-variant strong,
.v11-product-offer strong {
    grid-column: 2;
    grid-row: 1;
    color: var(--forest-700);
    white-space: nowrap;
}

.v11-product-variant em {
    grid-column: 2;
    grid-row: 2;
    color: var(--ink-600);
    font-size: .68rem;
    font-style: normal;
    text-align: right;
}

.v11-product-condition {
    margin-top: 18px;
    padding: 14px 15px;
    border-left: 3px solid var(--brass-500);
    border-radius: 0 10px 10px 0;
    background: rgba(238,225,197,.45);
}

.v11-product-condition .eyebrow {
    display: block;
    margin-bottom: 5px;
}

.v11-product-condition p {
    margin: 0;
    color: var(--ink-800);
    font-size: .83rem;
}

.v11-product-actions {
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.v11-product-actions form {
    margin: 0;
}

.v11-product-primary-action {
    min-height: 52px;
}

.v11-product-service-note {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: start;
    margin-top: 17px;
    padding: 14px;
    border: 1px solid rgba(41,77,99,.16);
    border-radius: 12px;
    background: rgba(232,239,240,.52);
}

.v11-product-service-note__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--forest-900);
    color: #f6e5bc;
    font: 700 .65rem/1 var(--serif);
    letter-spacing: .08em;
}

.v11-product-service-note strong {
    display: block;
    margin-bottom: 3px;
    color: var(--forest-950);
    font-size: .82rem;
}

.v11-product-service-note p {
    margin: 0;
    color: var(--ink-600);
    font-size: .76rem;
    line-height: 1.5;
}

.v11-product-share {
    margin-top: 16px;
}

.v11-product-story-grid {
    display: grid;
    gap: 18px;
    margin-top: 34px;
}

.v11-product-panel {
    padding: 24px;
    border: 1px solid rgba(93,74,42,.16);
    border-radius: 18px;
    background: rgba(255,253,248,.84);
    box-shadow: 0 12px 32px rgba(50,37,17,.06);
}

.v11-product-panel h2,
.v11-product-hunt h2 {
    margin: 0;
    color: var(--forest-950);
    font: 600 clamp(1.6rem, 7vw, 2.2rem)/1.05 var(--serif);
    letter-spacing: -.02em;
}

.v11-product-description {
    margin-top: 17px;
    color: var(--ink-800);
    font: 1.02rem/1.8 var(--serif);
}

.v11-product-description p:first-child {
    margin-top: 0;
}

.v11-product-description p:last-child {
    margin-bottom: 0;
}

.v11-product-meta {
    margin: 18px 0 0;
}

.v11-product-meta > div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--line);
}

.v11-product-meta dt {
    color: var(--ink-600);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.v11-product-meta dd {
    margin: 0;
    color: var(--ink-950);
    font-size: .83rem;
    overflow-wrap: anywhere;
}

.v11-product-hunt {
    display: grid;
    gap: 18px;
    margin-top: 18px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(184,139,61,.28);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 0, rgba(208,170,99,.20), transparent 34%),
        var(--forest-950);
    color: #fff8e9;
}

.v11-product-hunt .eyebrow {
    color: #d9b974;
}

.v11-product-hunt h2 {
    color: #fff8e9;
}

.v11-product-hunt__links {
    display: grid;
    gap: 8px;
}

.v11-product-hunt__links a {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 12px 13px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
}

.v11-product-hunt__links span {
    color: #d9b974;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.v11-product-hunt__links strong {
    grid-column: 1;
    font-family: var(--serif);
}

.v11-product-hunt__links em {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: #f2d89e;
    font-size: .72rem;
    font-style: normal;
}

.v11-product-recommendations,
.v11-product-recent {
    border-top: 1px solid var(--line);
}

@media (min-width: 700px) {
    .v11-product-page {
        padding-top: 30px;
    }

    .v11-product-hero {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        align-items: start;
        gap: 42px;
    }

    .v11-product-gallery__stage {
        min-height: 590px;
        padding: 34px;
    }

    .v11-product-gallery__thumbs {
        grid-template-columns: repeat(6, minmax(0, 74px));
    }

    .v11-product-heading h1 {
        font-size: clamp(3rem, 5.4vw, 4.75rem);
    }

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

    .v11-product-story-grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
        align-items: start;
        gap: 22px;
        margin-top: 44px;
    }

    .v11-product-panel {
        padding: 30px;
    }

    .v11-product-hunt {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        align-items: center;
        padding: 30px;
    }
}

@media (min-width: 1100px) {
    .v11-product-hero {
        grid-template-columns: minmax(440px, .92fr) minmax(0, 1fr);
        gap: clamp(48px, 5vw, 78px);
    }

    .v11-product-gallery {
        position: sticky;
        top: calc(var(--header-h) + 22px);
    }

    .v11-product-purchase {
        padding-top: 9px;
    }
}

/* --- Compact desktop navigation ---------------------------------------- */
@media (min-width: 1200px) {
    .site-nav > a,
    .site-nav > .nav-logout,
    .site-nav > .nav-bag-link {
        display: none !important;
    }

    .desktop-nav {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(13px, 1.25vw, 22px);
        width: 100%;
    }

    .desktop-nav__link,
    .desktop-nav-menu > summary,
    .desktop-nav__logout button {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--forest-950);
        font: 700 .72rem/1 var(--sans);
        letter-spacing: .012em;
        white-space: nowrap;
        cursor: pointer;
        transition: color .15s ease;
    }

    .desktop-nav__link:hover,
    .desktop-nav-menu > summary:hover,
    .desktop-nav-menu[open] > summary,
    .desktop-nav__logout button:hover {
        color: #9b6e24;
    }

    .desktop-nav-menu {
        position: relative;
    }

    .desktop-nav-menu > summary {
        gap: 5px;
        list-style: none;
    }

    .desktop-nav-menu > summary::-webkit-details-marker {
        display: none;
    }

    .desktop-nav-menu > summary span {
        display: inline-block;
        margin-top: -3px;
        color: #8d713e;
        font-size: .9rem;
        transition: transform .15s ease;
    }

    .desktop-nav-menu[open] > summary span {
        transform: rotate(180deg);
    }

    .desktop-nav-menu__panel {
        position: absolute;
        z-index: 180;
        left: -18px;
        top: calc(100% + 8px);
        width: 270px;
        padding: 8px;
        border: 1px solid rgba(93,74,42,.15);
        border-radius: 14px;
        background: rgba(255,253,248,.985);
        box-shadow: 0 22px 52px rgba(36,28,15,.16);
    }

    .desktop-nav-menu--right .desktop-nav-menu__panel {
        left: auto;
        right: -18px;
        width: 250px;
    }

    .desktop-nav-menu__panel::before {
        content: "";
        position: absolute;
        top: -9px;
        left: 22px;
        width: 16px;
        height: 16px;
        border-top: 1px solid rgba(93,74,42,.15);
        border-left: 1px solid rgba(93,74,42,.15);
        background: #fffdf8;
        transform: rotate(45deg);
    }

    .desktop-nav-menu--right .desktop-nav-menu__panel::before {
        left: auto;
        right: 26px;
    }

    .desktop-nav-menu__panel a {
        position: relative;
        z-index: 1;
        display: block;
        padding: 10px 11px;
        border-radius: 9px;
        color: var(--ink-950);
    }

    .desktop-nav-menu__panel a:hover {
        background: #f5eedf;
    }

    .desktop-nav-menu__panel strong,
    .desktop-nav-menu__panel small {
        display: block;
    }

    .desktop-nav-menu__panel strong {
        margin-bottom: 2px;
        font: 700 .78rem/1.25 var(--sans);
    }

    .desktop-nav-menu__panel small {
        color: var(--ink-600);
        font: 400 .66rem/1.35 var(--sans);
    }

    .desktop-nav__logout {
        display: inline-flex;
        margin: 0;
    }
}

/* ==========================================================================
   V11.0.3 — MOBILE HERO REGRESSION HOTFIX
   Restore the known-good v7.0.5 full-bleed hero rules already defined above.
   Mobile keeps the portrait castle absolutely behind the copy; no stacked art.
   ========================================================================== */

/* ========================================================================== 
   V11.0.4 — MOBILE HOME HERO RESTORE (CANONICAL)
   --------------------------------------------------------------------------
   Restores the previously approved compact mobile hero behavior:
   - the portrait castle is one background layer BEHIND the hero copy;
   - no separate / stacked castle block below the buttons;
   - no oversized empty parchment tail;
   - desktop/tablet v11 navigation and product-detail work remain untouched.
   ========================================================================== */
@media (max-width: 767px) {
    .home-hero {
        position: relative;
        min-height: 590px;
        overflow: hidden;
        isolation: isolate;
        background: #f8f1df;
        border-bottom: 1px solid rgba(23, 56, 45, .10);
    }

    .home-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background:
            radial-gradient(
                circle at 50% 18%,
                rgba(255, 253, 247, .92) 0%,
                rgba(255, 253, 247, .68) 31%,
                rgba(255, 253, 247, .25) 55%,
                transparent 76%
            ),
            linear-gradient(
                180deg,
                rgba(251, 246, 233, .44) 0%,
                rgba(251, 246, 233, .20) 42%,
                rgba(239, 228, 207, .64) 100%
            );
        pointer-events: none;
    }

    .site-container.home-hero__inner {
        position: relative;
        z-index: 3;
        width: min(calc(100% - 32px), var(--container));
        max-width: var(--container);
        min-height: 590px;
        margin-inline: auto;
        padding: clamp(34px, 6vh, 48px) 0 clamp(38px, 7vh, 56px);
        display: flex;
        align-items: center;
        overflow: visible;
    }

    .hero-castle,
    .home-hero__castle {
        --castle-parallax-y: 0px;
        position: absolute;
        z-index: 1;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: translate3d(0, var(--castle-parallax-y), 0) scale(1.035);
        transform-origin: center center;
        background:
            linear-gradient(
                180deg,
                rgba(251, 246, 233, .06) 0%,
                rgba(251, 246, 233, 0) 58%,
                rgba(239, 228, 207, .52) 100%
            ),
            url('../images/hero/castle-archive-mobile.jpg') center 38% / cover no-repeat;
        filter: saturate(.78) contrast(.94);
        opacity: .88;
        -webkit-mask-image: none;
        mask-image: none;
        pointer-events: none;
        will-change: transform;
    }

    .home-hero__copy {
        position: relative;
        z-index: 4;
        width: min(100%, 650px);
        max-width: 650px;
        margin-inline: auto;
        text-align: center;
    }

    .home-hero__copy::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -32px -16px -26px;
        border-radius: 42%;
        background: radial-gradient(
            ellipse at center,
            rgba(255, 253, 247, .68) 0%,
            rgba(255, 253, 247, .40) 42%,
            rgba(255, 253, 247, 0) 76%
        );
        pointer-events: none;
    }

    .home-hero .eyebrow,
    .home-hero__eyebrow {
        margin-bottom: 14px;
        color: #86662f;
        letter-spacing: .20em;
    }

    .home-hero h1,
    .home-hero__title {
        max-width: 8.4ch;
        margin: 0 auto;
        color: #123b30;
        font-size: clamp(3rem, 14vw, 4.45rem);
        line-height: .90;
        font-weight: 600;
        letter-spacing: -.047em;
        text-wrap: balance;
        text-shadow: 0 2px 20px rgba(255, 253, 247, .58);
    }

    .hero-lede,
    .home-hero__description {
        max-width: 330px;
        margin: 20px auto 0;
        color: #465b52;
        font-size: clamp(.92rem, 3.8vw, 1rem);
        line-height: 1.62;
        text-wrap: pretty;
        text-shadow: 0 1px 12px rgba(255, 253, 247, .70);
    }

    .hero-actions,
    .home-hero__actions {
        width: 100%;
        max-width: 390px;
        margin: 24px auto 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .home-hero .button,
    .home-hero .home-button {
        min-height: 50px;
        border-radius: 999px;
    }

    .home-hero .button--primary,
    .home-hero .home-button--primary {
        background: #17382d;
        color: #fffaf0;
        box-shadow: 0 14px 32px rgba(23, 56, 45, .18);
    }

    .home-hero .button--secondary,
    .home-hero .home-button--secondary {
        background: rgba(255, 253, 247, .84);
        border-color: rgba(23, 56, 45, .19);
        color: #17382d;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }

    .hero-mood-link {
        display: inline-block;
        margin-top: 18px;
        color: #694f25;
        font: 800 .69rem/1.2 var(--sans);
        letter-spacing: .035em;
        text-shadow: 0 1px 10px rgba(255, 253, 247, .85);
    }
}

@media (max-width: 359px) {
    .home-hero,
    .site-container.home-hero__inner {
        min-height: 560px;
    }

    .site-container.home-hero__inner {
        width: min(calc(100% - 24px), var(--container));
        padding-top: 30px;
        padding-bottom: 34px;
    }

    .home-hero h1,
    .home-hero__title {
        max-width: 8.2ch;
        font-size: clamp(2.8rem, 14.4vw, 3.75rem);
    }

    .hero-lede,
    .home-hero__description {
        max-width: 292px;
        font-size: .9rem;
        line-height: 1.58;
    }

    .hero-actions,
    .home-hero__actions {
        margin-top: 21px;
        gap: 9px;
    }

    .hero-castle,
    .home-hero__castle {
        background-position: center 39%;
        transform: translate3d(0, var(--castle-parallax-y), 0) scale(1.06);
    }
}

/* ========================================================================== 
   V11.0.5 — OWNER BOOK PREVIOUS / NEXT NAVIGATION
   ========================================================================== */
.owner-book-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: -4px 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--owner-border, #ced6ce);
    border-radius: 12px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 6px 22px rgba(18, 44, 34, .035);
}

.owner-book-pager__position {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.owner-book-pager__position span {
    color: #88682f;
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.owner-book-pager__position strong {
    color: #153d32;
    font-size: .78rem;
}

.owner-book-pager__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.owner-book-pager__disabled {
    opacity: .42;
    cursor: not-allowed;
    pointer-events: none;
}

.owner-form-actions--book-nav {
    align-items: center;
}

@media (max-width: 700px) {
    .owner-book-pager {
        align-items: stretch;
        flex-direction: column;
    }

    .owner-book-pager__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .owner-book-pager__actions .button {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .owner-book-pager__actions {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== 
   V11.0.6 — OWNER BOOK BULK DELETE
   ========================================================================== */
.backoffice-body .button--danger {
    color: #fff;
    background: #8d2f2f;
    border-color: #8d2f2f;
    box-shadow: 0 8px 16px rgba(86, 24, 24, .14);
}

.backoffice-body .button--danger:hover {
    background: #742525;
    border-color: #742525;
}

.backoffice-body .button--danger:disabled {
    cursor: not-allowed;
    opacity: .5;
    box-shadow: none;
}

.owner-bulk-actions {
    position: sticky;
    z-index: 18;
    top: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 12px;
    padding: 11px 13px;
    border: 1px solid #d5c9b8;
    border-radius: 12px;
    background: rgba(255, 252, 244, .97);
    box-shadow: 0 10px 28px rgba(21, 45, 35, .10);
    backdrop-filter: blur(8px);
}

.owner-bulk-actions[hidden] {
    display: none;
}

.owner-bulk-actions__summary,
.owner-bulk-actions__buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.owner-bulk-actions__summary {
    min-width: 0;
    color: #59665e;
    font-size: .68rem;
}

.owner-bulk-actions__summary strong {
    color: #173f32;
    font-size: .74rem;
}

.owner-bulk-actions__scope {
    padding: 0;
    border: 0;
    background: transparent;
    color: #8a6428;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.owner-bulk-actions__all-note {
    color: #7b5a25;
    font-weight: 800;
}

.owner-bulk-actions .button {
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 9px;
    font-size: .68rem;
}

.owner-select-cell {
    width: 42px;
    min-width: 42px;
    text-align: center !important;
}

.owner-checkbox {
    position: relative;
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    cursor: pointer;
}

.owner-checkbox input {
    position: absolute;
    width: 1px !important;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.owner-checkbox span {
    width: 17px;
    height: 17px;
    border: 1px solid #91a49b;
    border-radius: 4px;
    background: #fff;
    box-shadow: inset 0 0 0 2px #fff;
}

.owner-checkbox input:checked + span {
    border-color: #174739;
    background: #174739;
}

.owner-checkbox input:checked + span::after {
    content: "";
    display: block;
    width: 7px;
    height: 4px;
    margin: 4px 0 0 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.owner-checkbox input:indeterminate + span {
    border-color: #174739;
    background: #174739;
}

.owner-checkbox input:indeterminate + span::after {
    content: "";
    display: block;
    width: 8px;
    height: 2px;
    margin: 6px auto 0;
    border-radius: 2px;
    background: #fff;
}

.owner-checkbox input:focus-visible + span {
    outline: 2px solid #b9904d;
    outline-offset: 2px;
}

.owner-book-table tbody tr.is-selected {
    background: #f2f7f3;
}

.owner-book-table tbody tr.is-selected:hover {
    background: #edf4ef;
}

@media (max-width: 899px) {
    .owner-bulk-actions {
        top: 70px;
        align-items: stretch;
        flex-direction: column;
    }

    .owner-bulk-actions__buttons {
        width: 100%;
    }

    .owner-bulk-actions__buttons .button {
        flex: 1 1 auto;
    }
}


/* v12 procurement source links */
.button--compact { padding: .45rem .7rem; min-height: auto; width: fit-content; }
.owner-procurement-list .owner-procurement-item { align-items: flex-start; gap: 1rem; }
.owner-procurement-item > div:first-child { display: grid; gap: .35rem; }
.owner-procurement-item > span { white-space: nowrap; font-weight: 700; }

/* ========================================================================== 
   V12.1.0 — OWNER ORDER WORKSPACE
   Clear separation between read-only order reference data and editable
   operations, with direct book + supplier-source navigation.
   ========================================================================== */
.owner-order-workspace { min-width: 0; }
.owner-order-head { align-items: flex-start; }
.owner-order-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .65rem; color: var(--owner-muted); font-size: .66rem; }
.owner-order-badge { display: inline-flex; align-items: center; min-height: 28px; padding: .32rem .65rem; border: 1px solid #c8d4cc; border-radius: 999px; background: #f5f8f5; color: #244b3d; font-size: .6rem; font-weight: 850; }
.owner-order-badge--payment { border-color: #ddd1b7; background: #fbf7ec; color: #715927; }
.owner-order-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.owner-order-summary article { min-width: 0; display: grid; align-content: start; gap: .35rem; padding: 14px; border: 1px solid var(--owner-border); border-radius: 13px; background: #fff; box-shadow: 0 5px 20px rgba(18,44,34,.035); }
.owner-order-summary span { color: var(--owner-muted); font-size: .57rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.owner-order-summary strong { color: #173f33; font: 700 1.05rem/1.15 var(--serif); overflow-wrap: anywhere; }
.owner-order-summary small { color: #758079; font-size: .58rem; line-height: 1.35; }
.owner-order-alert { display: grid; gap: 12px; margin-bottom: 14px; padding: 14px; border: 1px solid #dcc998; border-radius: 13px; background: #fffaf0; }
.owner-order-alert strong { color: #654f20; font-size: .76rem; }
.owner-order-alert p { margin: .35rem 0 0; color: #74633c; font-size: .66rem; line-height: 1.55; }
.owner-order-alert .button { align-self: start; justify-self: start; }
.owner-order-layout { display: grid; gap: 14px; align-items: start; }
.owner-order-main, .owner-order-operations { min-width: 0; }
.owner-order-section, .owner-order-form-section { overflow: hidden; }
.owner-order-section__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.owner-order-section__head h2 { margin: 0; font: 700 1.3rem var(--serif); }
.owner-order-section__head p:not(.eyebrow) { max-width: 660px; margin: .35rem 0 0; color: var(--owner-muted); font-size: .65rem; line-height: 1.5; }
.owner-order-items { display: grid; gap: 10px; }
.owner-order-item-card { overflow: hidden; border: 1px solid #d8dfd9; border-radius: 12px; background: #fff; }
.owner-order-item-card__top { display: grid; gap: 12px; padding: 13px; }
.owner-order-item-card__identity { display: flex; gap: 10px; min-width: 0; }
.owner-order-item-card__qty { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 9px; background: #edf3ef; color: #24503f; font-size: .68rem; font-weight: 900; }
.owner-order-item-card h3 { margin: 0; font: 700 .95rem/1.2 var(--serif); }
.owner-order-item-card h3 a { color: #183f33; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.owner-order-item-card h3 a:hover { text-decoration: underline; }
.owner-order-item-card__identity p { margin: .35rem 0 0; color: var(--owner-muted); font-size: .6rem; line-height: 1.4; }
.owner-order-item-card__amount { display: grid; gap: .2rem; justify-items: start; }
.owner-order-item-card__amount small, .owner-order-item-card__amount span { color: var(--owner-muted); font-size: .56rem; }
.owner-order-item-card__amount strong { color: #173f33; font-size: .78rem; }
.owner-order-item-card__source { display: grid; gap: 12px; padding: 12px 13px; border-top: 1px solid #e4e9e5; background: #f7f9f7; }
.owner-order-source-data { display: grid; gap: .2rem; }
.owner-order-source-data > span { color: #7a857e; font-size: .54rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.owner-order-source-data strong { color: #253e34; font-size: .7rem; }
.owner-order-source-data small { color: var(--owner-muted); font-size: .58rem; }
.owner-order-item-card__actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.owner-source-missing { display: inline-flex; min-height: 32px; align-items: center; padding: .4rem .65rem; border: 1px dashed #c9aeb0; border-radius: 8px; color: #824c52; background: #fff7f7; font-size: .58rem; font-weight: 800; }
.owner-order-reference-note { display: grid; gap: 8px; margin-top: 12px; padding: 12px 13px; border: 1px dashed #c9d2cb; border-radius: 10px; background: #f3f5f2; }
.owner-order-reference-note div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.owner-order-reference-note span { color: #6d7971; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.owner-order-reference-note strong { color: #24483b; font-size: .76rem; }
.owner-order-reference-note p { margin: 0; color: #727c76; font-size: .57rem; line-height: 1.45; }
.owner-readonly-badge, .owner-internal-badge { flex: 0 0 auto; display: inline-flex; min-height: 28px; align-items: center; padding: .3rem .6rem; border-radius: 999px; font-size: .55rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.owner-readonly-badge { border: 1px solid #cbd3cd; background: #eef1ee; color: #606c65; }
.owner-internal-badge { border: 1px solid #c6d1c9; background: #eaf1ed; color: #315a49; }
.owner-readonly-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.owner-readonly-grid > div { min-width: 0; padding: 11px; border: 1px solid #e0e5e1; border-radius: 9px; background: #f3f5f3; }
.owner-readonly-grid > div > span { display: block; color: #78817c; font-size: .53rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.owner-readonly-grid > div > strong { display: block; margin-top: .35rem; color: #34443c; font-size: .68rem; font-weight: 750; line-height: 1.45; overflow-wrap: anywhere; }
.owner-readonly-grid > div > small { display: block; margin-top: .25rem; color: #7a837e; font-size: .57rem; overflow-wrap: anywhere; }
.owner-readonly-grid__wide { grid-column: 1 / -1; }
.owner-order-proof { display: grid; gap: 10px; align-items: center; margin-top: 12px; padding: 12px; border: 1px solid #d7dfd9; border-radius: 10px; background: #fafcf9; }
.owner-order-proof strong, .owner-order-proof small { display: block; }
.owner-order-proof strong { color: #29463a; font-size: .7rem; }
.owner-order-proof small { margin-top: .25rem; color: var(--owner-muted); font-size: .58rem; }
.owner-order-timeline { display: grid; }
.owner-order-timeline__item { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 9px; padding: 10px 0; border-bottom: 1px solid #e6ebe7; }
.owner-order-timeline__item:last-child { border-bottom: 0; }
.owner-order-timeline__dot { width: 8px; height: 8px; margin-top: .28rem; border-radius: 50%; background: #547866; box-shadow: 0 0 0 4px #edf3ef; }
.owner-order-timeline__item strong { color: #31483e; font-size: .68rem; }
.owner-order-timeline__item p { margin: .22rem 0 0; color: var(--owner-muted); font-size: .57rem; }
.owner-order-timeline__item time { grid-column: 2; color: #8a928d; font-size: .54rem; }
.owner-order-form { display: grid; gap: 14px; }
.owner-order-form-section { margin-bottom: 0; }
.owner-order-form-section--internal { border-color: #bfcfc5; background: linear-gradient(180deg, #fff 0, #fbfdfb 100%); }
.owner-order-field-grid { display: grid; gap: 11px; }
.owner-order-field { padding: 11px; border: 1px solid #dce3de; border-radius: 10px; background: #fff; }
.owner-order-field--wide { grid-column: 1 / -1; }
.owner-order-field__label { display: flex !important; justify-content: space-between; gap: 8px; align-items: center; }
.owner-order-field__label b, .owner-confirm-field b { padding: .18rem .42rem; border: 1px solid #d2d8d4; border-radius: 999px; background: #ecefed; color: #6b756f; font-size: .5rem; letter-spacing: .03em; text-transform: none; }
.owner-order-field input, .owner-order-field select, .owner-order-field textarea { min-height: 44px; border-color: #aebdb3 !important; background: #fff !important; box-shadow: 0 1px 0 rgba(8,45,36,.03); color: #16241e; }
.owner-order-field input:focus, .owner-order-field select:focus, .owner-order-field textarea:focus { border-color: #537b69 !important; box-shadow: 0 0 0 3px rgba(83,123,105,.12); outline: 0; }
.owner-order-field--locked { border-style: dashed; border-color: #cfd6d1; background: #f1f3f1; }
.owner-order-field--locked input, .owner-order-field--locked select, .owner-order-field--locked textarea,
.owner-order-input:disabled, .owner-order-input[aria-readonly="true"] { border-color: #d5dad6 !important; background: #e9ece9 !important; color: #747c77 !important; box-shadow: none !important; cursor: not-allowed; opacity: 1; }
.owner-order-field--locked small { color: #818983 !important; }
.owner-confirm-field { display: grid; gap: 6px; margin-top: 12px; padding: 12px; border: 1px solid #c8d7ce; border-radius: 10px; background: #f4f8f5; }
.owner-confirm-field--locked { border-style: dashed; background: #eff1ef; }
.owner-confirm-field__control { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #29483b; font-size: .67rem; }
.owner-confirm-field__control input { flex: 0 0 auto; }
.owner-confirm-field > small { color: var(--owner-muted); font-size: .58rem; line-height: 1.45; }
.owner-order-live-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 12px; padding: 11px 12px; border-radius: 9px; background: #173f33; color: #fff; }
.owner-order-live-total span { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.owner-order-live-total strong { font: 700 1rem var(--serif); }
.owner-order-live-total small { flex-basis: 100%; color: rgba(255,255,255,.68); font-size: .54rem; }
.owner-order-source-shortcuts { display: grid; gap: 7px; margin-bottom: 12px; }
.owner-order-source-shortcuts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; padding: 9px 10px; border: 1px solid #dce3de; border-radius: 8px; background: #f5f8f6; }
.owner-order-source-shortcuts span { color: #768079; font-size: .55rem; }
.owner-order-source-shortcuts strong { color: #31483e; font-size: .65rem; }
.owner-order-source-shortcuts a { width: fit-content; color: #26604a; font-size: .58rem; font-weight: 850; }
.owner-supplier-math { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e0e6e1; }
.owner-supplier-math > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; color: #66716b; font-size: .61rem; }
.owner-supplier-math strong { color: #29483b; }
.owner-supplier-math__total { margin-top: 2px; padding: 10px !important; border-radius: 8px; background: #edf3ef; color: #24483b !important; font-weight: 850; }
.owner-order-savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; border: 1px solid #9eafa4; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 10px 34px rgba(18,44,34,.14); backdrop-filter: blur(10px); }
.owner-order-savebar strong, .owner-order-savebar small { display: block; }
.owner-order-savebar strong { color: #223f34; font-size: .68rem; }
.owner-order-savebar small { margin-top: .2rem; color: var(--owner-muted); font-size: .54rem; }
.owner-order-savebar .button { flex: 0 0 auto; }

@media (min-width: 700px) {
    .owner-order-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .owner-order-alert { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .owner-order-item-card__top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .owner-order-item-card__amount { justify-items: end; text-align: right; }
    .owner-order-item-card__source { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .owner-order-item-card__actions { justify-content: flex-end; }
    .owner-order-proof { grid-template-columns: minmax(0, 1fr) auto; }
    .owner-order-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .owner-order-source-shortcuts > div { grid-template-columns: minmax(0, 1fr) minmax(130px, auto) auto; align-items: center; gap: 10px; }
}

@media (min-width: 1180px) {
    .owner-order-layout { grid-template-columns: minmax(0, 1.25fr) minmax(400px, .75fr); gap: 18px; }
    .owner-order-operations { position: relative; }
}

@media (max-width: 699px) {
    .owner-order-head__actions { width: 100%; }
    .owner-order-head__actions .button { flex: 1 1 100%; }
    .owner-order-summary { grid-template-columns: 1fr 1fr; }
    .owner-readonly-grid { grid-template-columns: 1fr; }
    .owner-readonly-grid__wide { grid-column: auto; }
    .owner-order-savebar { bottom: 8px; }
    .owner-order-savebar .button { width: 100%; justify-content: center; }
}

@media (max-width: 379px) {
    .owner-order-summary { grid-template-columns: 1fr; }
}


/* ========================================================================== 
   V12.2.0 — OWNER BOOKS WORKSPACE
   Dense catalog operations view with storefront health, sourcing and commerce
   context. Readability first; bulk selection remains compatible with v11.0.6.
   ========================================================================== */
.owner-catalog-head { margin-bottom: 14px; }
.owner-catalog-head__actions { align-self: end; }

.owner-catalog-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.owner-catalog-kpis article {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 14px 15px;
    border: 1px solid var(--owner-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(18, 44, 34, .035);
}
.owner-catalog-kpis article.is-attention {
    border-color: #dfcfb0;
    background: #fffaf0;
}
.owner-catalog-kpis span,
.owner-catalog-kpis small {
    color: var(--owner-muted);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
}
.owner-catalog-kpis strong {
    color: #173f32;
    font: 750 1.55rem/1 var(--serif);
}
.owner-catalog-kpis small { letter-spacing: .035em; font-weight: 700; }

.owner-catalog-health {
    display: grid;
    grid-template-columns: minmax(210px, 1.35fr) repeat(4, minmax(135px, .75fr));
    gap: 8px;
    align-items: stretch;
    margin-bottom: 14px;
    padding: 9px;
    border: 1px solid #d8ddd8;
    border-radius: 13px;
    background: rgba(248, 250, 247, .88);
}
.owner-catalog-health__intro {
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 5px 7px;
}
.owner-catalog-health__intro span {
    color: #8a672c;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.owner-catalog-health__intro strong {
    color: #314a40;
    font-size: .66rem;
    line-height: 1.35;
}
.owner-health-chip {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #d9dfda;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.owner-health-chip:hover {
    border-color: #9eb2a7;
    transform: translateY(-1px);
}
.owner-health-chip.is-active {
    border-color: #315f50;
    background: #eef5f1;
    box-shadow: inset 0 0 0 1px rgba(49,95,80,.06);
}
.owner-health-chip > span {
    min-width: 28px;
    color: #7d5a22;
    font: 750 1.05rem/1 var(--serif);
    text-align: center;
}
.owner-health-chip small {
    min-width: 0;
    color: #59675f;
    font-size: .58rem;
    font-weight: 780;
    line-height: 1.25;
}

.owner-catalog-filters {
    grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(145px, 1fr)) auto;
    align-items: end;
    gap: 9px;
    padding: 13px;
    border-radius: 13px;
}
.owner-catalog-filter {
    min-width: 0;
    display: grid;
    gap: 5px;
}
.owner-catalog-filter > span {
    color: #647168;
    font-size: .54rem;
    font-weight: 850;
    letter-spacing: .065em;
    text-transform: uppercase;
}
.owner-catalog-filter input,
.owner-catalog-filter select {
    min-height: 42px;
}
.owner-catalog-filter-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}
.owner-catalog-filter-actions .button {
    min-height: 42px;
    width: auto;
    white-space: nowrap;
}

.owner-catalog-results-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 10px;
    padding: 0 2px;
}
.owner-catalog-results-head > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.owner-catalog-results-head strong {
    color: #26483b;
    font-size: .72rem;
}
.owner-catalog-results-head span,
.owner-catalog-results-head a {
    color: var(--owner-muted);
    font-size: .59rem;
}
.owner-catalog-results-head a { color: #8a6428; font-weight: 800; }

.owner-catalog-table-panel { padding: 0; overflow: hidden; }
.owner-catalog-table-wrap { overflow: auto; }
.owner-catalog-table {
    min-width: 1180px;
    table-layout: fixed;
}
.owner-catalog-table th,
.owner-catalog-table td { vertical-align: top; }
.owner-catalog-table thead th {
    position: sticky;
    z-index: 2;
    top: 0;
    background: #f3f6f3;
    box-shadow: 0 1px 0 #dde3de;
}
.owner-catalog-table th:nth-child(2) { width: 31%; }
.owner-catalog-table th:nth-child(3) { width: 20%; }
.owner-catalog-table th:nth-child(4) { width: 12%; }
.owner-catalog-table th:nth-child(5) { width: 13%; }
.owner-catalog-table th:nth-child(6) { width: 12%; }
.owner-catalog-table th:nth-child(7) { width: 8%; }
.owner-catalog-table th:nth-child(8) { width: 104px; }
.owner-catalog-table tbody tr { transition: background .16s ease, box-shadow .16s ease; }
.owner-catalog-table tbody tr.is-staging:not(.is-selected) { background: #fcfcfa; }
.owner-catalog-table tbody tr.is-staging:not(.is-selected):hover { background: #f7f8f5; }

.owner-catalog-book {
    min-width: 0;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}
.owner-catalog-cover {
    width: 50px;
    height: 70px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d8ded8;
    border-radius: 7px;
    background: linear-gradient(145deg, #f2ecdc, #e4eadf);
    color: #31584a;
    box-shadow: 0 3px 10px rgba(30, 49, 40, .08);
}
.owner-catalog-cover img { width: 100%; height: 100%; object-fit: cover; }
.owner-catalog-cover > span { font: 750 1.2rem/1 var(--serif); }
.owner-catalog-cover > small {
    align-self: end;
    margin-bottom: 6px;
    color: #728078;
    font-size: .45rem;
    font-weight: 800;
    text-transform: uppercase;
}
.owner-catalog-book__body { min-width: 0; display: grid; align-content: start; gap: 4px; }
.owner-catalog-book__title {
    color: #173f32 !important;
    font: 750 .76rem/1.3 var(--serif);
    overflow-wrap: anywhere;
}
.owner-catalog-book__author { color: #46564e; font-size: .62rem; font-weight: 750; }
.owner-catalog-book__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; color: #768079; font-size: .54rem; line-height: 1.35; }
.owner-catalog-book__meta span { position: relative; }
.owner-catalog-book__meta span + span::before { content: "·"; position: absolute; left: -6px; color: #bcc3bd; }
.owner-catalog-book__meta .is-warning { color: #9a6428; font-weight: 750; }
.owner-catalog-book__meta .is-muted { color: #929a94; }
.owner-catalog-issues { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.owner-catalog-issues span {
    padding: 2px 5px;
    border: 1px solid #e2d3b8;
    border-radius: 999px;
    background: #fff8ea;
    color: #815d25;
    font-size: .48rem;
    font-weight: 820;
}

.owner-catalog-source-cell,
.owner-catalog-inventory-cell,
.owner-catalog-commerce-cell,
.owner-catalog-publication-cell,
.owner-catalog-updated-cell {
    font-size: .6rem;
    line-height: 1.4;
}
.owner-catalog-source-cell > strong,
.owner-catalog-commerce-cell > strong,
.owner-catalog-updated-cell > strong { display: block; color: #26483b; font-size: .66rem; }
.owner-catalog-source-cell > span,
.owner-catalog-source-cell > small,
.owner-catalog-commerce-cell > span,
.owner-catalog-commerce-cell > small,
.owner-catalog-inventory-cell > small,
.owner-catalog-publication-cell > small,
.owner-catalog-updated-cell > small { display: block; margin-top: 3px; color: #758078; font-size: .54rem; line-height: 1.35; }
.owner-catalog-source-cell .is-warning,
.owner-catalog-commerce-cell .is-warning { color: #906226; font-weight: 750; }
.owner-catalog-inline-link {
    display: inline-flex;
    margin-top: 6px;
    color: #2c6350 !important;
    font-size: .55rem;
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.owner-catalog-source-warning,
.owner-catalog-empty-state {
    display: inline-flex !important;
    width: fit-content;
    margin-top: 5px !important;
    padding: 3px 6px;
    border-radius: 7px;
    background: #fff3df;
    color: #895b20 !important;
    font-size: .51rem !important;
    font-weight: 800;
}
.owner-catalog-empty-state { margin-top: 0 !important; background: #f1f3f1; color: #67746d !important; }

.owner-status-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 25px;
    padding: 4px 7px;
    border: 1px solid #d2dad4;
    border-radius: 999px;
    background: #f4f7f5;
    color: #4d5e55;
    font-size: .51rem;
    font-weight: 850;
    line-height: 1.15;
}
.owner-status-badge.is-good { border-color: #c4d9cd; background: #edf7f1; color: #2a6149; }
.owner-status-badge.is-warning { border-color: #e5d5b4; background: #fff8e9; color: #8b6227; }
.owner-status-badge.is-danger { border-color: #e3c3c3; background: #fff0ef; color: #8a3c3c; }
.owner-status-badge.is-neutral { border-color: #d6dbd7; background: #f3f4f2; color: #68736d; }
.owner-status-badge--availability { max-width: 100%; white-space: normal; }

.owner-catalog-row-actions { text-align: right; }
.owner-catalog-row-actions .button { margin-left: auto; }
.owner-catalog-edit-link {
    display: inline-flex;
    margin-top: 7px;
    color: #6a756e !important;
    font-size: .53rem;
    font-weight: 780;
}
.owner-catalog-actions-col { text-align: right !important; }
.owner-catalog-empty { display: grid; gap: 4px; place-items: center; padding: 30px 16px; color: #6a756e; text-align: center; }
.owner-catalog-empty strong { color: #294a3d; font: 750 .9rem var(--serif); }
.owner-catalog-empty span { font-size: .62rem; }

@media (max-width: 1320px) {
    .owner-catalog-health { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .owner-catalog-health__intro { grid-column: 1 / -1; }
    .owner-catalog-filters { grid-template-columns: minmax(240px, 2fr) repeat(2, minmax(150px, 1fr)); }
    .owner-catalog-filter-actions { align-self: end; }
}

@media (max-width: 899px) {
    .owner-catalog-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .owner-catalog-health { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .owner-catalog-filters { grid-template-columns: 1fr; }
    .owner-catalog-filter-actions { width: 100%; }
    .owner-catalog-filter-actions .button { flex: 1 1 0; justify-content: center; }
    .owner-catalog-results-head { align-items: flex-start; flex-direction: column; }

    .owner-catalog-table-wrap { overflow: visible; }
    .owner-catalog-table { min-width: 0; width: 100%; table-layout: auto; }
    .owner-catalog-table thead { display: none; }
    .owner-catalog-table tbody { display: grid; gap: 10px; padding: 10px; }
    .owner-catalog-table tbody tr,
    .owner-catalog-table tbody tr.is-staging:not(.is-selected) {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 0 10px;
        overflow: hidden;
        padding: 11px;
        border: 1px solid #d9dfda;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 4px 15px rgba(18,44,34,.035);
    }
    .owner-catalog-table tbody tr.is-staging:not(.is-selected) { background: #fbfcfa; }
    .owner-catalog-table tbody tr.is-selected { background: #f1f7f3; border-color: #aac1b4; }
    .owner-catalog-table td {
        grid-column: 2;
        display: grid;
        grid-template-columns: minmax(105px, .32fr) minmax(0, 1fr);
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px solid #e7ebe8;
        text-align: left !important;
    }
    .owner-catalog-table td::before {
        content: attr(data-label);
        color: #7d8780;
        font-size: .5rem;
        font-weight: 900;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .owner-catalog-table .owner-select-cell {
        grid-column: 1;
        grid-row: 1 / span 8;
        display: block;
        width: 32px;
        min-width: 32px;
        padding-top: 5px;
        border: 0;
    }
    .owner-catalog-table .owner-select-cell::before { content: none; }
    .owner-catalog-book-cell {
        display: block !important;
        padding-top: 2px !important;
    }
    .owner-catalog-book-cell::before { content: none !important; }
    .owner-catalog-row-actions { border-bottom: 0 !important; }
    .owner-catalog-row-actions::before { align-self: center; }
    .owner-catalog-row-actions .button { margin-left: 0; }
    .owner-catalog-edit-link { margin: 0 0 0 8px; align-self: center; }
    .owner-catalog-source-cell,
    .owner-catalog-inventory-cell,
    .owner-catalog-commerce-cell,
    .owner-catalog-publication-cell,
    .owner-catalog-updated-cell,
    .owner-catalog-row-actions { align-items: start; }
}

@media (max-width: 560px) {
    .owner-catalog-kpis,
    .owner-catalog-health { grid-template-columns: 1fr 1fr; }
    .owner-catalog-health__intro { grid-column: 1 / -1; }
    .owner-catalog-kpis article { padding: 12px; }
    .owner-catalog-book { grid-template-columns: 44px minmax(0, 1fr); }
    .owner-catalog-cover { width: 44px; height: 62px; }
    .owner-catalog-table td { grid-template-columns: 1fr; gap: 5px; }
    .owner-catalog-table td::before { margin-bottom: 1px; }
    .owner-catalog-book-cell { display: block !important; }
    .owner-catalog-row-actions > * { margin-left: 0 !important; }
}

/* ========================================================================== 
   20. V12.3.0 — OWNER CONSOLE SYSTEM REFRESH
   --------------------------------------------------------------------------
   A consistent visual language across every day-to-day owner route. No model,
   URL, permission, or workflow behavior is changed here; the refresh focuses
   on navigation hierarchy, scanability, form states, tables, filters, cards,
   mobile ergonomics, and clear read-only vs editable controls.
   ========================================================================== */

.owner-console {
    --owner-bg: #eef1ed;
    --owner-panel: #ffffff;
    --owner-panel-2: #f7f9f6;
    --owner-panel-3: #f1f4f0;
    --owner-border: #d5ddd6;
    --owner-border-strong: #becbc1;
    --owner-ink: #17251f;
    --owner-ink-2: #29473b;
    --owner-muted: #68756e;
    --owner-muted-2: #8a948e;
    --owner-forest: #082d24;
    --owner-forest-2: #10392f;
    --owner-forest-3: #1a4b3d;
    --owner-gold: #c8a45f;
    --owner-gold-soft: #f4ead3;
    --owner-danger: #87424a;
    --owner-danger-soft: #fff1f2;
    --owner-warning: #9a6c27;
    --owner-warning-soft: #fff8e9;
    --owner-success: #2f684f;
    --owner-success-soft: #edf7f1;
    --owner-shadow: 0 8px 28px rgba(18, 44, 34, .055);
    --owner-shadow-hover: 0 14px 34px rgba(18, 44, 34, .09);
}

.owner-console .backoffice-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    min-height: 70px;
    padding: 10px 18px;
    background:
        radial-gradient(circle at 28% -80%, rgba(200,164,95,.22), transparent 28%),
        linear-gradient(90deg, #082d24, #0d382d 65%, #123f33);
    border-bottom: 1px solid rgba(232,217,182,.18);
    box-shadow: 0 10px 30px rgba(4,25,19,.14);
}

.owner-console .backoffice-brand {
    display: grid;
    gap: 1px;
}

.owner-console .backoffice-brand strong {
    color: #fff8e5;
    font-size: 1.06rem;
    letter-spacing: .13em;
    line-height: 1;
}

.owner-console .backoffice-brand span {
    color: #d6c395;
    font-size: .55rem;
    font-weight: 850;
    letter-spacing: .16em;
}

.owner-console-mode {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    padding: 5px 9px;
    border: 1px solid rgba(235,223,193,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    color: rgba(244,235,214,.68);
    font-size: .56rem;
    font-weight: 750;
    letter-spacing: .025em;
}

.owner-console .backoffice-user {
    align-items: center;
}

.owner-console__owner-badge {
    padding: 7px 10px;
    border-color: rgba(241,226,189,.22);
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.owner-storefront-link {
    min-height: 38px;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 10px !important;
    border: 1px solid rgba(241,226,189,.22);
    border-radius: 9px;
    color: #f0e3c2 !important;
    font-size: .63rem;
    font-weight: 800;
}

.owner-storefront-link svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.owner-storefront-link:hover,
.owner-storefront-link:focus-visible {
    background: rgba(255,255,255,.07);
    color: #fff8e5 !important;
}

.owner-console .backoffice-layout {
    align-items: start;
}

.owner-console .backoffice-nav {
    background:
        radial-gradient(circle at -30% 8%, rgba(200,164,95,.08), transparent 32%),
        linear-gradient(180deg, #103b30, #0d352c 46%, #0a2e26);
    border-right-color: rgba(200,164,95,.12);
}

.owner-nav__group {
    gap: 4px;
    margin-bottom: 18px;
}

.owner-nav__label {
    padding: 0 11px 7px;
    color: rgba(232,217,182,.48);
    font-size: .52rem;
    letter-spacing: .16em;
}

.owner-nav__link {
    min-width: 0;
    min-height: 48px;
    display: grid !important;
    grid-template-columns: 30px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    padding: 7px 9px !important;
    border: 1px solid transparent;
    border-radius: 10px !important;
    color: rgba(239,233,215,.8) !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.owner-nav__link:hover,
.owner-nav__link:focus-visible {
    transform: translateX(1px);
    border-color: rgba(232,217,182,.08);
    background: rgba(255,255,255,.055) !important;
    color: #fff8e6 !important;
}

.owner-nav__link.is-active {
    border-color: rgba(216,192,137,.16);
    background:
        linear-gradient(90deg, rgba(200,164,95,.16), rgba(255,255,255,.07)) !important;
    color: #fff7df !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.owner-nav__link.is-active::before {
    top: 9px;
    bottom: 9px;
    width: 3px;
    background: #d2ad64;
    box-shadow: 0 0 14px rgba(210,173,100,.28);
}

.owner-nav__icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(232,217,182,.1);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    color: rgba(236,222,190,.68);
}

.owner-nav__link.is-active .owner-nav__icon {
    border-color: rgba(216,192,137,.23);
    background: rgba(216,192,137,.09);
    color: #e8cb8e;
}

.owner-nav__icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.owner-nav__copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.owner-nav__copy strong {
    overflow: hidden;
    color: inherit;
    font-size: .66rem;
    font-weight: 820;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.owner-nav__copy small {
    overflow: hidden;
    color: rgba(232,217,182,.44);
    font-size: .49rem;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.owner-nav__link.is-active .owner-nav__copy small {
    color: rgba(245,232,204,.62);
}

.owner-nav__link--technical {
    grid-template-columns: 30px minmax(0,1fr) auto;
}

.owner-nav__external {
    color: rgba(232,217,182,.42);
    font-size: .7rem;
}

.owner-nav__footer {
    display: grid;
    gap: 10px;
    padding: 15px 9px 4px;
}

.owner-nav__footer strong {
    color: rgba(244,235,214,.76);
    font-size: .58rem;
}

.owner-nav__footer p {
    margin: 2px 0 0;
    color: rgba(232,217,182,.43);
    font-size: .5rem;
}

.owner-nav__footer button {
    min-height: 39px;
    border-color: rgba(232,217,182,.16);
    background: rgba(255,255,255,.025);
}

.owner-console .backoffice-main {
    min-height: calc(100vh - 70px);
    background:
        radial-gradient(circle at 96% 0%, rgba(200,164,95,.085), transparent 28rem),
        linear-gradient(180deg, #eef1ed 0, #f3f5f2 55%, #eef1ed 100%);
}

.owner-console .backoffice-main > * {
    width: min(100%, 1680px);
    margin-left: auto;
    margin-right: auto;
}

.owner-message-stack {
    margin-bottom: 14px;
}

.owner-console .message {
    border: 1px solid var(--owner-border);
    border-radius: 11px;
    background: #fff;
    box-shadow: var(--owner-shadow);
}

/* Page headers ----------------------------------------------------------- */
.owner-console .backoffice-page-head {
    position: relative;
    isolation: isolate;
    min-width: 0;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    padding: clamp(16px, 2.1vw, 24px);
    overflow: hidden;
    border: 1px solid var(--owner-border);
    border-radius: 16px;
    background:
        radial-gradient(circle at 95% -20%, rgba(200,164,95,.16), transparent 37%),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,247,.96));
    box-shadow: var(--owner-shadow);
}

.owner-console .backoffice-page-head::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--owner-forest-3), rgba(200,164,95,.65), transparent 72%);
    opacity: .65;
}

.owner-console .backoffice-page-head > div:first-child {
    min-width: 0;
}

.owner-console .backoffice-page-head .eyebrow {
    margin-bottom: 5px;
    color: #8b6a30;
    font-size: .54rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.owner-console .backoffice-page-head h1 {
    margin: 0;
    color: #15382e;
    font-size: clamp(1.7rem, 2.65vw, 2.55rem);
    line-height: 1;
    letter-spacing: -.025em;
}

.owner-console .backoffice-page-head p:not(.eyebrow) {
    max-width: 760px;
    margin: 8px 0 0;
    color: #63716a;
    font-size: .69rem;
    line-height: 1.55;
}

.owner-console .backoffice-actions {
    margin-left: auto;
    align-items: center;
}

/* Buttons --------------------------------------------------------------- */
.owner-console .button {
    min-height: 40px;
    border-radius: 9px;
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .005em;
    box-shadow: none;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.owner-console .button:hover,
.owner-console .button:focus-visible {
    transform: translateY(-1px);
}

.owner-console .button--primary {
    border-color: #0d3a2e;
    background: linear-gradient(180deg, #174d3d, #0e3b30);
    color: #fff9e9;
    box-shadow: 0 6px 15px rgba(14,59,48,.12);
}

.owner-console .button--primary:hover,
.owner-console .button--primary:focus-visible {
    background: linear-gradient(180deg, #1d5745, #114336);
    box-shadow: 0 9px 20px rgba(14,59,48,.16);
}

.owner-console .button--secondary {
    border-color: #bfcac2;
    background: linear-gradient(180deg, #fff, #f6f8f6);
    color: #234b3d;
}

.owner-console .button--ghost {
    border-color: #d4dcd6;
    background: rgba(255,255,255,.42);
    color: #536159;
}

.owner-console .button--danger {
    border-color: #a5565f;
    background: linear-gradient(180deg, #9a4c55, #7f3f47);
    color: #fff;
}

.owner-console .button:disabled,
.owner-console .button[aria-disabled="true"] {
    transform: none;
    opacity: .48;
    cursor: not-allowed;
    box-shadow: none;
}

/* KPI / stat surfaces --------------------------------------------------- */
.owner-console .backoffice-stats {
    gap: 10px;
    margin-bottom: 16px;
}

.owner-console .backoffice-stats article {
    position: relative;
    min-width: 0;
    min-height: 100px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 15px 16px;
    overflow: hidden;
    border: 1px solid var(--owner-border);
    border-radius: 13px;
    background: linear-gradient(145deg, #fff, #f9fbf8);
    box-shadow: 0 6px 22px rgba(18,44,34,.04);
}

.owner-console .backoffice-stats article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #c3d2c8;
}

.owner-console .backoffice-stats article > span {
    color: #173f32;
    font: 760 clamp(1.25rem, 2vw, 1.8rem)/1 var(--serif);
    letter-spacing: -.02em;
}

.owner-console .backoffice-stats article > small {
    color: #738078;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .045em;
    line-height: 1.35;
    text-transform: uppercase;
}

/* Panels and lists ------------------------------------------------------ */
.owner-console .backoffice-panel {
    min-width: 0;
    border: 1px solid var(--owner-border);
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--owner-shadow);
}

.owner-console .backoffice-panel__head {
    min-height: 47px;
    align-items: center;
    margin-bottom: 11px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6ebe7;
}

.owner-console .backoffice-panel__head h2,
.owner-console .backoffice-panel > h2 {
    color: #203f34;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}

.owner-console .backoffice-panel__head a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid #d7ded8;
    border-radius: 8px;
    background: #f8faf8;
    color: #31584a;
    font-size: .57rem;
    font-weight: 850;
}

.owner-console .backoffice-list {
    display: grid;
    gap: 0;
}

.owner-console .backoffice-list > a,
.owner-console .backoffice-list > div {
    position: relative;
    min-width: 0;
    min-height: 54px;
    display: grid;
    align-items: center;
    gap: 3px;
    padding: 10px 12px;
    border-bottom: 1px solid #e8ece9;
    border-radius: 9px;
    transition: background .15s ease, transform .15s ease;
}

.owner-console .backoffice-list > a:last-child,
.owner-console .backoffice-list > div:last-child {
    border-bottom-color: transparent;
}

.owner-console .backoffice-list > a:hover,
.owner-console .backoffice-list > a:focus-visible {
    transform: translateX(2px);
    background: #f5f8f5;
}

.owner-console .backoffice-list > a::after {
    content: "→";
    position: absolute;
    right: 10px;
    color: #a1aaa4;
    font-size: .75rem;
}

.owner-console .backoffice-list strong {
    padding-right: 24px;
    color: #27483c;
    font-size: .7rem;
}

.owner-console .backoffice-list span {
    padding-right: 24px;
    color: #76817b;
    font-size: .56rem;
}

.owner-empty,
.owner-console .backoffice-panel > p:only-child {
    padding: 16px;
    border: 1px dashed #d4dcd6;
    border-radius: 10px;
    background: #fafbf9;
    color: #76817b;
    text-align: center;
}

/* Filters --------------------------------------------------------------- */
.owner-console .backoffice-filters {
    gap: 9px;
    margin-bottom: 14px;
    padding: 11px;
    border: 1px solid var(--owner-border);
    border-radius: 12px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 5px 18px rgba(18,44,34,.035);
}

.owner-console .backoffice-filters input,
.owner-console .backoffice-filters select {
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #cbd5cd;
    border-radius: 8px;
    background-color: #fff;
    color: #1f3129;
    font-size: .64rem;
    outline: none;
}

.owner-console .backoffice-filters input::placeholder {
    color: #949d97;
}

.owner-console .backoffice-filters input:focus,
.owner-console .backoffice-filters select:focus {
    border-color: #6f9281;
    box-shadow: 0 0 0 3px rgba(78,120,100,.09);
}

/* Tables ---------------------------------------------------------------- */
.owner-console .backoffice-table-wrap {
    position: relative;
    overflow-x: auto;
    border: 1px solid #e0e6e1;
    border-radius: 10px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #bdc9c0 #eef2ef;
}

.owner-console .backoffice-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.owner-console .backoffice-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 9px 10px;
    border-bottom: 1px solid #dce3dd;
    background: #f3f6f3;
    color: #6c7871;
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .07em;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: nowrap;
}

.owner-console .backoffice-table tbody td {
    padding: 10px;
    border-bottom: 1px solid #e9edea;
    color: #394a42;
    font-size: .62rem;
    line-height: 1.4;
    vertical-align: middle;
}

.owner-console .backoffice-table tbody tr:last-child td {
    border-bottom: 0;
}

.owner-console .backoffice-table tbody tr {
    transition: background .14s ease, box-shadow .14s ease;
}

.owner-console .backoffice-table tbody tr:nth-child(even) {
    background: #fcfdfc;
}

.owner-console .backoffice-table tbody tr:hover {
    background: #f5f8f5;
    box-shadow: inset 3px 0 0 rgba(65,105,85,.25);
}

.owner-console .backoffice-table td > a:not(.button) {
    color: #2f6551;
    font-weight: 820;
    text-decoration: none;
}

.owner-console .backoffice-table td:last-child > a:not(.button),
.owner-console .backoffice-table td:last-child > .inline-form {
    white-space: nowrap;
}

.owner-console .backoffice-table td:last-child > a:not(.button) {
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid #cdd7cf;
    border-radius: 7px;
    background: #f9fbf9;
}

.owner-console .backoffice-table td:last-child > a:not(.button):hover,
.owner-console .backoffice-table td:last-child > a:not(.button):focus-visible {
    border-color: #aebfb3;
    background: #eff5f1;
}

.owner-table-note {
    margin-top: 3px;
    color: #7d8982;
    font-size: .53rem;
}

/* Status language ------------------------------------------------------- */
.owner-console .owner-status,
.owner-console .owner-pill,
.owner-console .owner-order-badge,
.owner-console .owner-status-badge {
    min-height: 24px;
    align-items: center;
    padding: 3px 7px;
    border: 1px solid #d3dbd5;
    border-radius: 999px;
    background: #f4f6f4;
    color: #526159;
    font-size: .5rem;
    font-weight: 850;
    line-height: 1.2;
}

.owner-console .owner-status--success,
.owner-console .owner-status-badge.is-good {
    border-color: #c7ddcf;
    background: var(--owner-success-soft);
    color: #2d624b;
}

/* Forms and editable/read-only separation ------------------------------ */
.owner-console .owner-form,
.owner-console .backoffice-form-panel,
.owner-console .form-stack {
    border-radius: 14px;
}

.owner-console .form-field {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 6px;
}

.owner-console .form-field > span,
.owner-console .form-field > label:first-child,
.owner-console .backoffice-form label > span {
    color: #42534a;
    font-size: .53rem;
    font-weight: 900;
    letter-spacing: .045em;
    line-height: 1.3;
    text-transform: uppercase;
}

.owner-console .backoffice-panel input:not([type="checkbox"]):not([type="radio"]),
.owner-console .backoffice-panel select,
.owner-console .backoffice-panel textarea,
.owner-console .owner-form input:not([type="checkbox"]):not([type="radio"]),
.owner-console .owner-form select,
.owner-console .owner-form textarea {
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid #c8d3ca;
    border-radius: 8px;
    background: #fff;
    color: #1b2b24;
    font-size: .65rem;
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.owner-console .backoffice-panel textarea,
.owner-console .owner-form textarea {
    min-height: 112px;
    line-height: 1.5;
    resize: vertical;
}

.owner-console .backoffice-panel input:focus,
.owner-console .backoffice-panel select:focus,
.owner-console .backoffice-panel textarea:focus,
.owner-console .owner-form input:focus,
.owner-console .owner-form select:focus,
.owner-console .owner-form textarea:focus {
    border-color: #6a907e;
    box-shadow: 0 0 0 3px rgba(75,119,98,.1);
}

.owner-console input[readonly],
.owner-console input:disabled,
.owner-console select:disabled,
.owner-console textarea[readonly],
.owner-console textarea:disabled {
    border-color: #d2d8d3 !important;
    border-style: dashed !important;
    background:
        linear-gradient(135deg, rgba(91,105,97,.022) 25%, transparent 25%) 0 0/8px 8px,
        #eef1ee !important;
    color: #6e7973 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

.owner-console .form-field:has(input[readonly]) > span::after,
.owner-console .form-field:has(input:disabled) > span::after,
.owner-console .form-field:has(select:disabled) > span::after,
.owner-console .form-field:has(textarea[readonly]) > span::after,
.owner-console .form-field:has(textarea:disabled) > span::after {
    content: "Read only";
    display: inline-flex;
    margin-left: 6px;
    padding: 2px 5px;
    border: 1px solid #d3d9d4;
    border-radius: 999px;
    background: #f4f5f3;
    color: #87918b;
    font-size: .43rem;
    font-weight: 850;
    letter-spacing: .025em;
    text-transform: none;
    vertical-align: middle;
}

.owner-console .form-field > small,
.owner-console .helptext {
    color: #7a8680;
    font-size: .54rem;
    line-height: 1.45;
}

.owner-console input[type="checkbox"],
.owner-console input[type="radio"] {
    accent-color: #174c3c;
}

.owner-console .owner-form-actions,
.owner-console .backoffice-form .backoffice-actions {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid #e5eae6;
}

/* Detail/reference surfaces -------------------------------------------- */
.owner-console .backoffice-dl,
.owner-console .owner-definition-list {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid #e2e7e3;
    border-radius: 10px;
    background: #fafbf9;
}

.owner-console .backoffice-dl > div,
.owner-console .owner-definition-list > div {
    display: grid;
    grid-template-columns: minmax(110px,.35fr) minmax(0,1fr);
    gap: 12px;
    padding: 9px 10px;
    border-bottom: 1px solid #e6ebe7;
}

.owner-console .backoffice-dl > div:last-child,
.owner-console .owner-definition-list > div:last-child {
    border-bottom: 0;
}

.owner-console .backoffice-dl dt,
.owner-console .owner-definition-list dt {
    color: #7b8680;
    font-size: .51rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.owner-console .backoffice-dl dd,
.owner-console .owner-definition-list dd {
    margin: 0;
    color: #30453b;
    font-size: .62rem;
    font-weight: 700;
}

/* Subnavigation --------------------------------------------------------- */
.owner-subnav {
    gap: 7px;
    margin: -2px 0 14px;
    padding: 2px 1px 5px;
}

.owner-subnav a {
    min-height: 37px;
    padding: 7px 10px;
    border-color: #cbd5cd;
    border-radius: 9px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 3px 10px rgba(18,44,34,.025);
    color: #345a4c;
}

.owner-subnav a:hover,
.owner-subnav a:focus-visible {
    border-color: #aebfb3;
    background: #f5f9f6;
}

/* Command + settings cards --------------------------------------------- */
.owner-command-card,
.owner-settings-card {
    border-color: var(--owner-border);
    background:
        radial-gradient(circle at 100% 0%, rgba(200,164,95,.1), transparent 48%),
        linear-gradient(145deg, #fff, #fafbf9);
    box-shadow: var(--owner-shadow);
}

.owner-command-card:hover,
.owner-command-card:focus-visible,
.owner-settings-card:hover,
.owner-settings-card:focus-visible {
    transform: translateY(-2px);
    border-color: #b6c5ba;
    box-shadow: var(--owner-shadow-hover);
}

.owner-settings-card {
    min-height: 168px;
    border-radius: 14px;
}

.owner-settings-card strong {
    color: #1d4436;
}

.owner-settings-card b {
    width: fit-content;
    padding: 4px 7px;
    border-radius: 999px;
    background: #edf3ee;
}

/* Import/result surfaces ------------------------------------------------ */
.owner-import-panel,
.owner-import-guide,
.owner-import-result {
    overflow: hidden;
}

.owner-alert {
    border-radius: 9px;
}

/* Inline forms / destructive actions ----------------------------------- */
.owner-console .inline-form {
    display: inline-flex;
    align-items: center;
}

.owner-console .remove-link,
.owner-console .inline-form button.remove-link {
    color: #8a434b;
    font-size: .56rem;
    font-weight: 850;
}

/* Existing specialised workspaces get the same surrounding polish ------ */
.owner-order-workspace .owner-order-summary article,
.owner-catalog-kpis article,
.owner-catalog-health,
.owner-catalog-table-panel {
    box-shadow: var(--owner-shadow);
}

.owner-order-workspace .owner-order-section,
.owner-catalog-table-panel {
    border-color: var(--owner-border);
}

/* Responsive ------------------------------------------------------------ */
@media (min-width: 900px) {
    .owner-console .backoffice-layout {
        grid-template-columns: 258px minmax(0,1fr);
    }

    .owner-console .backoffice-nav {
        top: 70px;
        height: calc(100vh - 70px);
        padding: 19px 12px 14px;
    }

    .owner-console .backoffice-main {
        padding: 27px clamp(24px,3.1vw,48px) 74px;
    }
}

@media (max-width: 899px) {
    .owner-console-mode {
        display: none;
    }

    .owner-console .backoffice-nav {
        width: min(88vw, 330px);
        padding: 14px 12px 24px;
    }

    .owner-nav__link {
        min-height: 50px;
        padding: 8px 9px !important;
    }

    .owner-nav__copy strong {
        font-size: .7rem;
    }

    .owner-nav__copy small {
        font-size: .51rem;
    }

    .owner-console .backoffice-main {
        padding: 16px 11px 52px;
    }

    .owner-console .backoffice-page-head {
        align-items: stretch;
        padding: 15px;
        border-radius: 13px;
    }

    .owner-console .backoffice-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .owner-console .backoffice-actions .button {
        flex: 1 1 auto;
    }

    .owner-console .backoffice-table-wrap {
        border-radius: 9px;
    }
}

@media (max-width: 599px) {
    .owner-console .backoffice-topbar {
        min-height: 62px;
    }

    .owner-storefront-link > span {
        display: none;
    }

    .owner-storefront-link {
        width: 38px;
        padding: 0 !important;
        justify-content: center;
    }

    .owner-console .backoffice-page-head h1 {
        font-size: clamp(1.55rem, 8vw, 2rem);
    }

    .owner-console .backoffice-page-head p:not(.eyebrow) {
        font-size: .64rem;
    }

    .owner-console .backoffice-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .owner-console .backoffice-stats article {
        min-height: 92px;
        padding: 12px;
    }

    .owner-console .backoffice-filters {
        padding: 9px;
    }

    .owner-console .backoffice-filters .button {
        width: 100%;
    }

    .owner-console .backoffice-panel {
        border-radius: 12px;
    }

    .owner-console .backoffice-dl > div,
    .owner-console .owner-definition-list > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

@media (max-width: 380px) {
    .owner-console .backoffice-stats {
        grid-template-columns: 1fr;
    }
}

/* v12.3.0 small shared data accents */
.owner-panel-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 8px;
    border: 1px solid #d9e0da;
    border-radius: 999px;
    background: #f5f8f5;
    color: #748078;
    font-size: .5rem;
    font-weight: 850;
    white-space: nowrap;
}
.owner-code-chip {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: 25px;
    padding: 3px 7px;
    border: 1px solid #d7ded8;
    border-radius: 7px;
    background: #f5f7f5;
    color: #40554b;
    font: 800 .53rem/1.15 var(--sans);
    letter-spacing: .035em;
}
.owner-subnav a.is-active {
    border-color: #8aa797;
    background: #eaf2ed;
    color: #1f5140;
    box-shadow: inset 0 -2px 0 rgba(44,99,80,.22);
}

/* ========================================================================== 
   21. V12.3.2 — OWNER CONSOLE READABILITY PASS
   --------------------------------------------------------------------------
   Central tuning knobs for the day-to-day operations UI. Keep these values
   here if the console needs another typography/color adjustment later; no
   template or Python changes are required for simple visual tuning.
   ========================================================================== */

.owner-console {
    /* Typography scale */
    --owner-font-micro: .56rem;
    --owner-font-label: .61rem;
    --owner-font-note: .62rem;
    --owner-font-body: .71rem;
    --owner-font-control: .73rem;
    --owner-font-nav: .75rem;
    --owner-font-nav-note: .57rem;
    --owner-font-button: .72rem;

    /* Existing palette remains the single source of truth for the console. */
    --owner-readable-muted: #627068;
    --owner-readable-subtle: #77827c;
}

/* Top bar */
.owner-console .backoffice-brand strong { font-size: 1.12rem; }
.owner-console .backoffice-brand span { font-size: var(--owner-font-label); }
.owner-console-mode { font-size: .64rem; }
.owner-console__owner-badge { font-size: .66rem; }
.owner-storefront-link { font-size: .69rem; }

/* Navigation */
.owner-nav__label { font-size: .58rem; }
.owner-nav__link { min-height: 52px; }
.owner-nav__copy strong { font-size: var(--owner-font-nav); line-height: 1.25; }
.owner-nav__copy small { font-size: var(--owner-font-nav-note); line-height: 1.35; }
.owner-nav__footer strong { font-size: .64rem; }
.owner-nav__footer p { font-size: .56rem; line-height: 1.4; }

/* Page hierarchy */
.owner-console .backoffice-page-head .eyebrow { font-size: .61rem; }
.owner-console .backoffice-page-head p:not(.eyebrow) {
    color: var(--owner-readable-muted);
    font-size: .79rem;
    line-height: 1.6;
}
.owner-console .backoffice-panel__head h2,
.owner-console .backoffice-panel > h2 { font-size: 1.12rem; }
.owner-console .backoffice-panel > h3 { font-size: .94rem; }
.owner-console .backoffice-panel__head a { font-size: .66rem; }

/* Buttons, filters and controls */
.owner-console .button { font-size: var(--owner-font-button); }
.owner-console .backoffice-filters input,
.owner-console .backoffice-filters select { font-size: var(--owner-font-control); }
.owner-console .form-field > span,
.owner-console .form-field > label:first-child,
.owner-console .backoffice-form label > span { font-size: var(--owner-font-label); }
.owner-console .backoffice-panel input:not([type="checkbox"]):not([type="radio"]),
.owner-console .backoffice-panel select,
.owner-console .backoffice-panel textarea,
.owner-console .owner-form input:not([type="checkbox"]):not([type="radio"]),
.owner-console .owner-form select,
.owner-console .owner-form textarea { font-size: var(--owner-font-control); }
.owner-console .form-field > small,
.owner-console .helptext { font-size: var(--owner-font-note); }
.owner-console .form-field:has(input[readonly]) > span::after,
.owner-console .form-field:has(input:disabled) > span::after,
.owner-console .form-field:has(select:disabled) > span::after,
.owner-console .form-field:has(textarea[readonly]) > span::after,
.owner-console .form-field:has(textarea:disabled) > span::after { font-size: .5rem; }

/* Tables and dense operational data */
.owner-console .backoffice-table thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: .58rem;
}
.owner-console .backoffice-table tbody td {
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: var(--owner-font-body);
    line-height: 1.48;
}
.owner-table-note {
    color: var(--owner-readable-subtle);
    font-size: var(--owner-font-note);
    line-height: 1.4;
}
.owner-console .owner-status,
.owner-console .owner-pill,
.owner-console .owner-order-badge,
.owner-console .owner-status-badge { font-size: .58rem; }
.owner-panel-count { font-size: .58rem; }
.owner-code-chip { font-size: .61rem; }
.owner-console .remove-link,
.owner-console .inline-form button.remove-link { font-size: .64rem; }

/* Lists, reference data and helper text */
.owner-console .backoffice-list strong { font-size: .77rem; }
.owner-console .backoffice-list span { font-size: .64rem; }
.owner-console .backoffice-dl dt,
.owner-console .owner-definition-list dt { font-size: .59rem; }
.owner-console .backoffice-dl dd,
.owner-console .owner-definition-list dd { font-size: .70rem; }
.owner-empty,
.owner-console .backoffice-panel > p:only-child { font-size: .70rem; line-height: 1.5; }
.owner-subnav a { font-size: .68rem; }

/* KPI labels */
.owner-console .backoffice-stats article > small { font-size: .62rem; }

@media (min-width: 900px) {
    .owner-console .backoffice-layout { grid-template-columns: 276px minmax(0,1fr); }
}

@media (max-width: 899px) {
    .owner-nav__copy strong { font-size: .78rem; }
    .owner-nav__copy small { font-size: .59rem; }
}

@media (max-width: 599px) {
    .owner-console .backoffice-page-head p:not(.eyebrow) { font-size: .74rem; }
    .owner-console .backoffice-table tbody td { font-size: .69rem; }
}

/* ========================================================================== 
   22. V13.0.0 — PRIVACY, VISITOR ANALYTICS & ACTIVITY WORKSPACE
   ========================================================================== */

.privacy-banner {
    position: fixed;
    z-index: 1200;
    right: 18px;
    bottom: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 17px 18px;
    border: 1px solid rgba(128, 103, 46, .25);
    border-radius: 16px;
    background: rgba(255, 252, 242, .98);
    box-shadow: 0 18px 55px rgba(22, 39, 32, .18);
    color: #173a30;
    backdrop-filter: blur(10px);
}
.privacy-banner__copy { max-width: 760px; }
.privacy-banner__copy strong { display: block; margin-bottom: 4px; font: 700 1rem/1.25 var(--serif); }
.privacy-banner__copy p { margin: 0; color: #56645e; font-size: .78rem; line-height: 1.55; }
.privacy-banner__copy a { display: inline-block; margin-top: 5px; color: #8b5b12; font-size: .7rem; font-weight: 800; }
.privacy-banner__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.privacy-banner__actions form { margin: 0; }

.privacy-page { padding: clamp(46px, 7vw, 92px) 0; background: #f7f2e6; }
.privacy-shell { max-width: 1080px; }
.privacy-head { max-width: 780px; margin-bottom: 30px; }
.privacy-head h1 { margin: 4px 0 12px; font-size: clamp(2.1rem, 5vw, 4.2rem); }
.privacy-head > p:not(.eyebrow) { color: #58655f; line-height: 1.7; }
.privacy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.privacy-card,
.privacy-preferences {
    border: 1px solid #ddd2b7;
    border-radius: 16px;
    background: #fffdf7;
    padding: 22px;
}
.privacy-card h2,
.privacy-preferences h2 { margin: 0 0 9px; font-size: 1.15rem; }
.privacy-card p,
.privacy-preferences p { color: #5b665f; line-height: 1.65; }
.privacy-preferences { margin-top: 16px; }
.privacy-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.privacy-actions form { margin: 0; }
.privacy-note { margin: 12px 0 0; font-size: .75rem; }

.owner-activity-filters { grid-template-columns: 170px 220px minmax(260px,1fr) auto; }
.owner-activity-filters label { display: grid; gap: 5px; }
.owner-activity-filters label > span { font-size: var(--owner-font-label); font-weight: 850; color: #5e6f66; text-transform: uppercase; letter-spacing: .045em; }
.owner-activity-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
.owner-stat--warning { border-color: #d7a8a2 !important; background: #fff8f6 !important; }
.owner-stat--warning strong { color: #9f382e !important; }
.owner-activity-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); gap: 14px; margin-top: 14px; }
.owner-activity-grid--primary { align-items: stretch; }
.owner-activity-grid--visitor { grid-template-columns: repeat(2,minmax(0,1fr)); }
.owner-activity-breakdown { display: grid; grid-template-columns: 1fr; gap: 18px; }
.owner-activity-breakdown h3 { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #5a6b62; }
.owner-meter-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #edf0ed; font-size: var(--owner-font-body); }
.owner-meter-row:last-child { border-bottom: 0; }
.owner-meter-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #58655f; }
.owner-meter-row strong { color: #174b39; }
.owner-activity-feed { display: grid; }
.owner-activity-feed article { display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid #e7ece8; }
.owner-activity-feed article:last-child { border-bottom: 0; }
.owner-activity-feed article strong { display: block; font-size: .72rem; }
.owner-activity-feed article p { margin: 2px 0 0; font-size: .67rem; color: #45554d; }
.owner-activity-feed article small { display: block; margin-top: 3px; font-size: .59rem; color: #7a857f; line-height: 1.45; overflow-wrap: anywhere; }
.owner-event-dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #749987; box-shadow: 0 0 0 3px #e7f0eb; }
.owner-event-dot--product_view { background: #9b742f; box-shadow: 0 0 0 3px #f4ead8; }
.owner-event-dot--add_to_cart,
.owner-event-dot--order_created { background: #2f7557; box-shadow: 0 0 0 3px #e1eee7; }
.owner-event-dot--danger { background: #b6473d; box-shadow: 0 0 0 3px #f6e5e2; }
.owner-activity-privacy-note { margin-top: 14px; }
.owner-activity-privacy-note p { max-width: 980px; }
.owner-activity-timeline { display: grid; }
.owner-activity-timeline article { display: grid; grid-template-columns: 104px 14px minmax(0,1fr); gap: 13px; padding: 15px 0; border-bottom: 1px solid #e4eae6; }
.owner-activity-timeline article:last-child { border-bottom: 0; }
.owner-activity-timeline time { color: #7a857f; font-size: .61rem; line-height: 1.4; text-align: right; }
.owner-activity-timeline time strong { display: block; color: #3f5148; font-size: .66rem; }
.owner-activity-timeline h3 { margin: 0 0 3px; font-size: .78rem; }
.owner-activity-timeline p { margin: 2px 0; font-size: .68rem; }
.owner-event-metadata { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.owner-event-metadata span { padding: 4px 6px; border: 1px solid #dce3de; border-radius: 6px; background: #f6f8f6; color: #647269; font-size: .57rem; }

@media (max-width: 1100px) {
    .owner-activity-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .owner-activity-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .owner-activity-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .privacy-banner { align-items: stretch; flex-direction: column; gap: 12px; right: 10px; bottom: 10px; left: 10px; }
    .privacy-banner__actions { display: grid; grid-template-columns: 1fr 1fr; }
    .privacy-banner__actions .button { width: 100%; }
    .privacy-grid { grid-template-columns: 1fr; }
    .owner-activity-filters { grid-template-columns: 1fr; }
    .owner-activity-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .owner-activity-grid--visitor { grid-template-columns: 1fr; }
    .owner-activity-timeline article { grid-template-columns: 1fr 12px minmax(0,1fr); gap: 8px; }
    .owner-activity-timeline time { grid-column: 1 / -1; text-align: left; }
}

/* ========================================================================== 
   V13.1.0 — REUSABLE OWNER MULTI-SELECT / BULK EXPORT
   ========================================================================== */
.owner-inline-form {
    display: inline-flex;
    margin: 0;
}

.backoffice-table tbody tr.is-selected,
.owner-bulk-list-row.is-selected {
    background: #f2f7f3;
}

.backoffice-table tbody tr.is-selected:hover {
    background: #edf4ef;
}

.owner-bulk-actions--resource {
    margin-top: 0;
}

@media (max-width: 899px) {
    .owner-inline-form,
    .owner-inline-form .button {
        width: 100%;
    }
}

/* ========================================================================== 
   V13.2.0 — BULK CRUD / BULK ACTIONS WORKSPACE
   ========================================================================== */
.owner-bulk-actions {
    flex-wrap: wrap;
}

.owner-bulk-editor {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) minmax(220px, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2d8c8;
}

.owner-bulk-editor[hidden] {
    display: none;
}

.owner-bulk-editor__field {
    min-width: 0;
}

.owner-bulk-editor__field label,
.owner-bulk-editor__check {
    display: block;
    margin-bottom: 6px;
    color: #46574f;
    font-size: var(--owner-font-control, .82rem);
    font-weight: 800;
}

.owner-bulk-editor__field select,
.owner-bulk-editor__field input[type="number"] {
    width: 100%;
    min-height: 42px;
    border: 1px solid #cabdaa;
    border-radius: 9px;
    background: #fff;
    color: #183c31;
    padding: 8px 10px;
    font: inherit;
}

.owner-bulk-editor__check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    white-space: nowrap;
}

.owner-bulk-editor__check input {
    width: 17px;
    height: 17px;
}

.owner-bulk-editor__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.owner-bulk-editor--books {
    grid-template-columns: minmax(240px, 1.3fr) minmax(220px, 1fr) auto auto;
}

@media (max-width: 1000px) {
    .owner-bulk-editor,
    .owner-bulk-editor--books {
        grid-template-columns: 1fr 1fr;
    }

    .owner-bulk-editor__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .owner-bulk-editor,
    .owner-bulk-editor--books {
        grid-template-columns: 1fr;
    }

    .owner-bulk-editor__actions,
    .owner-bulk-editor__actions .button {
        width: 100%;
    }

    .owner-bulk-editor__actions .button {
        justify-content: center;
    }
}

/* ========================================================================== 
   V13.3.0 — STOREFRONT TRUST, GLOBAL SEARCH & DISCOVERY
   ========================================================================== */

/* Global search is intentionally visible in the sticky header on every
   customer-facing page. */
.header-search-row {
    padding: 0 0 .72rem;
}

.header-search {
    width: min(780px, 100%);
    margin-inline: auto;
}

.header-search > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.header-search__control {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    padding: .25rem .3rem .25rem .8rem;
    border: 1px solid rgba(91, 74, 50, .28);
    border-radius: 999px;
    background: rgba(255, 253, 247, .96);
    box-shadow: 0 8px 24px rgba(33, 42, 35, .06);
}

.header-search__control svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    color: #4c5d54;
}

.header-search__control input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #183c31;
    font: inherit;
    font-size: .92rem;
}

.header-search__control input::placeholder {
    color: #7b817c;
}

.header-search__control button {
    min-height: 34px;
    padding: 0 .95rem;
    border: 0;
    border-radius: 999px;
    background: #214f40;
    color: #fffdf7;
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}

.header-search__control:focus-within {
    border-color: rgba(33, 79, 64, .72);
    box-shadow: 0 0 0 3px rgba(33, 79, 64, .10), 0 8px 24px rgba(33, 42, 35, .06);
}

/* Homepage store trust strip. */
.store-trust-strip {
    border-top: 1px solid rgba(134, 105, 62, .16);
    border-bottom: 1px solid rgba(134, 105, 62, .20);
    background: #f7f1e5;
}

.store-trust-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.store-trust-strip__grid > a {
    min-width: 0;
    padding: 1rem 1.15rem;
    border-right: 1px solid rgba(134, 105, 62, .18);
    color: #183c31;
    text-decoration: none;
}

.store-trust-strip__grid > a:last-child {
    border-right: 0;
}

.store-trust-strip__grid span,
.store-trust-strip__grid strong {
    display: block;
}

.store-trust-strip__grid span {
    margin-bottom: .25rem;
    color: #81745f;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.store-trust-strip__grid strong {
    font-size: .82rem;
    line-height: 1.45;
}

/* Book Hunt gets a dedicated commerce-adjacent homepage spotlight. */
.book-hunt-home {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background: #173c32;
    color: #fffaf0;
}

.book-hunt-home__feature {
    display: grid;
    grid-template-columns: minmax(220px, 330px) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
}

.book-hunt-home__cover {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid rgba(235, 207, 150, .32);
    border-radius: 18px;
    background: #102d26;
    color: #e5c984;
    text-decoration: none;
}

.book-hunt-home__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-hunt-home__cover span {
    display: grid;
    gap: .4rem;
    text-align: center;
}

.book-hunt-home__cover small {
    letter-spacing: .18em;
}

.book-hunt-home__cover strong {
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(2.4rem, 6vw, 4.8rem);
}

.book-hunt-home__copy .eyebrow {
    color: #d8bc79;
}

.book-hunt-home__copy h2 {
    margin: .3rem 0 .8rem;
    color: #fffaf0;
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.book-hunt-home__copy p:not(.eyebrow) {
    max-width: 680px;
    color: #d9e0db;
    line-height: 1.7;
}

.book-hunt-home__actions {
    display: flex;
    align-items: center;
    gap: 1rem 1.35rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

.book-hunt-home .text-link {
    color: #efd490;
}

.book-hunt-home__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 2rem;
}

.book-hunt-home__item {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: .8rem;
    min-width: 0;
    padding: .75rem;
    border: 1px solid rgba(235, 207, 150, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
    color: #fffaf0;
    text-decoration: none;
}

.book-hunt-home__item img,
.book-hunt-home__fallback {
    width: 74px;
    height: 96px;
    object-fit: cover;
    border-radius: 7px;
    background: #0e2b23;
}

.book-hunt-home__fallback {
    display: grid;
    place-items: center;
    color: #d8bc79;
    font-weight: 900;
}

.book-hunt-home__item > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;
}

.book-hunt-home__item small {
    color: #c7d0ca;
    font-size: .67rem;
}

.book-hunt-home__item strong {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: .82rem;
    line-height: 1.35;
}

.book-hunt-home__item em {
    color: #efd490;
    font-style: normal;
    font-weight: 800;
    font-size: .78rem;
}

.book-hunt-home__empty {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.originals-home-section--secondary {
    background: #f4f0e7;
    border-top: 1px solid rgba(123, 105, 78, .16);
}

.originals-home-section--secondary .button--secondary {
    box-shadow: none;
}

/* Real, data-derived social proof on product detail. */
.reader-proof {
    margin: 1rem 0 1.1rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(61, 93, 77, .20);
    border-radius: 12px;
    background: #f4f7f3;
}

.reader-proof__label {
    display: block;
    margin-bottom: .5rem;
    color: #5f7168;
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.reader-proof__signals {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.reader-proof__signals span {
    padding: .35rem .55rem;
    border-radius: 999px;
    background: #e8efe9;
    color: #244b3d;
    font-size: .78rem;
}

.reader-proof > small {
    display: block;
    margin-top: .55rem;
    color: #778079;
    font-size: .68rem;
    line-height: 1.45;
}

.shipping-estimate-card a,
.summary-note a {
    color: #215342;
    font-weight: 750;
}

.summary-shipping-estimate {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .3rem .75rem;
    padding: .85rem 0;
    border-top: 1px solid rgba(98, 83, 61, .16);
}

.summary-shipping-estimate > span {
    color: #5f675f;
}

.summary-shipping-estimate > strong {
    text-align: right;
    color: #244b3d;
}

.summary-shipping-estimate > small {
    grid-column: 1 / -1;
    color: #7b817b;
    font-size: .72rem;
}

/* Trust / help pages. */
.trust-hero p:last-child {
    max-width: 760px;
}

.trust-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.trust-content {
    display: grid;
    gap: 1rem;
}

.trust-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(103, 86, 60, .16);
    border-radius: 16px;
    background: #fffdf8;
    box-shadow: 0 12px 34px rgba(39, 47, 41, .05);
}

.trust-panel h2 {
    margin: 0 0 .8rem;
    color: #193f34;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.trust-panel p,
.trust-panel li {
    color: #59645d;
    line-height: 1.75;
}

.trust-lede {
    font-size: 1.02rem;
}

.trust-note {
    margin-top: 1rem;
    padding: .75rem .9rem;
    border-left: 3px solid #b79456;
    background: #f8f3e9;
    color: #5f5a4e !important;
    font-size: .82rem;
}

.trust-steps,
.trust-list {
    margin: .4rem 0 0;
    padding-left: 1.2rem;
}

.trust-steps li {
    margin-bottom: .8rem;
}

.trust-steps strong,
.trust-steps span {
    display: block;
}

.trust-steps span {
    margin-top: .15rem;
    font-size: .88rem;
}

.shipping-method-list {
    display: grid;
    gap: .55rem;
}

.shipping-method-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(103, 86, 60, .12);
}

.shipping-method-row:last-child {
    border-bottom: 0;
}

.shipping-method-row strong,
.shipping-method-row small {
    display: block;
}

.shipping-method-row small {
    margin-top: .2rem;
    color: #7b817b;
}

.shipping-method-row > span {
    color: #244b3d;
    font-weight: 850;
    white-space: nowrap;
}

.trust-payment-grid,
.trust-value-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.trust-payment-grid > div,
.trust-value-grid > div {
    padding: 1rem;
    border: 1px solid rgba(103, 86, 60, .14);
    border-radius: 12px;
    background: #faf7f0;
}

.trust-payment-grid strong,
.trust-payment-grid span,
.trust-value-grid strong,
.trust-value-grid span {
    display: block;
}

.trust-payment-grid span,
.trust-value-grid span {
    margin-top: .3rem;
    color: #69726c;
    font-size: .82rem;
    line-height: 1.5;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.2rem;
}

.trust-sidebar {
    position: sticky;
    top: 148px;
    display: grid;
    gap: .3rem;
    padding: 1rem;
    border: 1px solid rgba(103, 86, 60, .16);
    border-radius: 14px;
    background: #f6f0e4;
}

.trust-sidebar .eyebrow {
    margin: .2rem .5rem .5rem;
}

.trust-sidebar a {
    padding: .65rem .75rem;
    border-radius: 8px;
    color: #344c42;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 700;
}

.trust-sidebar a:hover,
.trust-sidebar a.is-active {
    background: #e7dfcf;
    color: #163f33;
}

@media (max-width: 1020px) {
    .store-trust-strip__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-trust-strip__grid > a:nth-child(2) {
        border-right: 0;
    }

    .store-trust-strip__grid > a:nth-child(-n+2) {
        border-bottom: 1px solid rgba(134, 105, 62, .18);
    }

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

@media (max-width: 800px) {
    .trust-layout {
        grid-template-columns: 1fr;
    }

    .trust-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        order: -1;
    }

    .trust-sidebar .eyebrow {
        grid-column: 1 / -1;
    }

    .book-hunt-home__feature {
        grid-template-columns: 1fr;
    }

    .book-hunt-home__cover {
        max-width: 520px;
    }
}

@media (max-width: 640px) {
    .header-search-row {
        padding: 0 .15rem .58rem;
    }

    .header-search__control {
        min-height: 40px;
        grid-template-columns: 20px minmax(0, 1fr) auto;
        padding-left: .65rem;
    }

    .header-search__control button {
        min-height: 31px;
        padding-inline: .7rem;
        font-size: .7rem;
    }

    .header-search__control input {
        font-size: .82rem;
    }

    .store-trust-strip__grid,
    .book-hunt-home__items,
    .trust-payment-grid,
    .trust-value-grid,
    .trust-sidebar {
        grid-template-columns: 1fr;
    }

    .store-trust-strip__grid > a {
        border-right: 0;
        border-bottom: 1px solid rgba(134, 105, 62, .18);
    }

    .store-trust-strip__grid > a:last-child {
        border-bottom: 0;
    }

    .book-hunt-home__item {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .book-hunt-home__item img,
    .book-hunt-home__fallback {
        width: 64px;
        height: 86px;
    }

    .contact-actions,
    .contact-actions .button {
        width: 100%;
    }

    .contact-actions .button {
        justify-content: center;
    }
}

.reader-notes-home {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    background: #fbf8f1;
    border-top: 1px solid rgba(105, 89, 64, .14);
    border-bottom: 1px solid rgba(105, 89, 64, .14);
}

.reader-notes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.reader-note-card {
    margin: 0;
    padding: 1.35rem;
    border: 1px solid rgba(91, 80, 59, .16);
    border-radius: 14px;
    background: #fffdf8;
}

.reader-note-card blockquote {
    margin: 0;
    color: #2d433a;
    font-family: var(--font-display, Georgia, serif);
    font-size: 1rem;
    line-height: 1.7;
}

.reader-note-card figcaption {
    display: grid;
    gap: .2rem;
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(91, 80, 59, .12);
}

.reader-note-card figcaption strong {
    color: #173f33;
    font-size: .82rem;
}

.reader-note-card figcaption span {
    color: #7a807b;
    font-size: .72rem;
}

@media (max-width: 800px) {
    .reader-notes-grid { grid-template-columns: 1fr; }
}

/* ========================================================================== 
   V13.3.1 — NAVBAR SEARCH INTERACTION
   --------------------------------------------------------------------------
   Replaces the always-visible second search row from v13.3.0 with a compact
   icon in the primary header. Click/tap is the canonical interaction:
   - phone/tablet: search opens as a panel directly below the sticky header;
   - desktop: search expands into the navigation line without increasing the
     header height.
   ========================================================================== */

.header-inner {
    grid-template-columns: 44px minmax(0, 1fr) 44px 52px;
    gap: 8px;
}

.header-search-toggle {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    justify-self: end;
    position: relative;
    z-index: 180;
    padding: 0;
    border: 1px solid rgba(23, 56, 45, .15);
    border-radius: 999px;
    background: rgba(255, 253, 247, .76);
    color: var(--v6-forest);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease,
    transform .18s ease, box-shadow .18s ease;
}

.header-search-toggle:hover,
.header-search-toggle:focus-visible,
.site-header.search-open .header-search-toggle {
    border-color: rgba(157, 125, 67, .48);
    background: #fffdf7;
    color: #8b6427;
    box-shadow: 0 6px 18px rgba(23, 56, 45, .08);
}

.header-search-toggle:focus-visible {
    outline: 3px solid rgba(33, 79, 64, .14);
    outline-offset: 2px;
}

.header-search-toggle:active {
    transform: scale(.96);
}

.header-search-toggle__icon {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    transition: opacity .16s ease, transform .2s ease;
}

.header-search-toggle__icon--search svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.header-search-toggle__icon--close {
    opacity: 0;
    transform: rotate(-70deg) scale(.72);
    font: 400 1.55rem/1 var(--sans);
}

.site-header.search-open .header-search-toggle__icon--search {
    opacity: 0;
    transform: rotate(55deg) scale(.72);
}

.site-header.search-open .header-search-toggle__icon--close {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.global-search-panel {
    position: absolute;
    z-index: 165;
    top: 100%;
    left: 0;
    right: 0;
    padding: .72rem 0 .88rem;
    border-bottom: 1px solid rgba(23, 56, 45, .11);
    background: rgba(251, 246, 233, .985);
    box-shadow: 0 18px 34px rgba(18, 44, 34, .10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-9px);
    transition: opacity .18s ease, transform .22s var(--v6-motion-ease), visibility .18s linear;
}

.site-header.search-open .global-search-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.global-search-panel__inner {
    width: min(calc(100% - 28px), var(--container));
}

.global-search-form {
    width: 100%;
    margin: 0;
}

.global-search-form > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.global-search-form__control {
    min-height: 46px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: .58rem;
    padding: .3rem .32rem .3rem .82rem;
    border: 1px solid rgba(91, 74, 50, .27);
    border-radius: 999px;
    background: #fffdf8;
    box-shadow: 0 10px 28px rgba(33, 42, 35, .07);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.global-search-form__control:focus-within {
    border-color: rgba(33, 79, 64, .68);
    box-shadow: 0 0 0 3px rgba(33, 79, 64, .10), 0 10px 28px rgba(33, 42, 35, .07);
}

.global-search-form__control > svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #4c5d54;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.global-search-form__control input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #183c31;
    font: 500 .9rem/1.2 var(--sans);
}

.global-search-form__control input::placeholder {
    color: #7b817c;
}

.global-search-form__submit {
    min-height: 36px;
    padding: 0 .95rem;
    border: 0;
    border-radius: 999px;
    background: #214f40;
    color: #fffdf7;
    font: 800 .73rem/1 var(--sans);
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}

.global-search-form__submit:hover,
.global-search-form__submit:focus-visible {
    background: #153f33;
}

.global-search-form__submit:active {
    transform: scale(.97);
}

.nav-open .header-search-toggle {
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 900px) and (max-width: 1199px) {
    .header-inner {
        grid-template-columns: 48px minmax(0, 1fr) 44px 52px;
        gap: 10px;
    }
}

@media (min-width: 1200px) {
    .header-inner {
        grid-template-columns: 190px minmax(0, 1fr) 44px 58px;
        gap: 14px;
    }

    .site-nav {
        grid-column: 2;
        grid-row: 1;
        transition: opacity .16s ease, transform .2s var(--v6-motion-ease), visibility .16s linear;
    }

    .header-search-toggle {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    }

    .bag-button {
        grid-column: 4;
        grid-row: 1;
    }

    .global-search-panel {
        top: 0;
        bottom: 0;
        height: var(--v6-header-height);
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: none;
    }

    .global-search-panel__inner {
        width: min(calc(100% - 64px), var(--container));
        height: 100%;
        display: grid;
        grid-template-columns: 190px minmax(0, 1fr) 44px 58px;
        align-items: center;
        gap: 14px;
        pointer-events: none;
    }

    .global-search-form {
        grid-column: 2;
        width: min(520px, 100%);
        justify-self: end;
        opacity: 0;
        pointer-events: none;
        transform: translateX(18px) scaleX(.88);
        transform-origin: right center;
        transition: opacity .16s ease, transform .22s var(--v6-motion-ease);
    }

    .site-header.search-open .global-search-panel {
        pointer-events: none;
    }

    .site-header.search-open .global-search-form {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0) scaleX(1);
    }

    .site-header.search-open .site-nav {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-12px);
    }

    .global-search-form__control {
        min-height: 44px;
        box-shadow: 0 7px 22px rgba(33, 42, 35, .075);
    }
}

@media (max-width: 640px) {
    .global-search-panel {
        padding: .6rem 0 .72rem;
    }

    .global-search-panel__inner {
        width: min(calc(100% - 20px), var(--container));
    }

    .global-search-form__control {
        min-height: 43px;
        grid-template-columns: 20px minmax(0, 1fr) auto;
        gap: .42rem;
        padding-left: .68rem;
    }

    .global-search-form__control input {
        font-size: .82rem;
    }

    .global-search-form__submit {
        min-height: 33px;
        padding-inline: .72rem;
        font-size: .68rem;
    }
}

@media (max-width: 359px) {
    .header-inner {
        grid-template-columns: 40px minmax(0, 1fr) 40px 44px;
        gap: 6px;
    }

    .header-search-toggle {
        width: 38px;
        height: 38px;
    }

    .bag-button {
        width: 44px;
        height: 44px;
    }

    .brand__main {
        font-size: .98rem;
    }

    .brand__sub {
        font-size: .58rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .global-search-panel,
    .global-search-form,
    .header-search-toggle__icon,
    .site-nav {
        transition: none !important;
    }
}


/* v13.4 — storefront announcements & acquisition funnel */
.storefront-announcement{position:fixed;right:clamp(16px,3vw,44px);bottom:clamp(16px,3vw,38px);z-index:86;width:min(520px,calc(100vw - 32px));display:grid;grid-template-columns:108px 1fr;gap:18px;padding:22px 24px;border:1px solid rgba(164,119,46,.35);border-radius:24px;background:linear-gradient(135deg,rgba(255,252,243,.98),rgba(249,240,218,.98));box-shadow:0 22px 60px rgba(20,50,41,.2);color:#153e34;overflow:hidden}.storefront-announcement[hidden]{display:none}.storefront-announcement:before{content:"";position:absolute;inset:8px;border:1px solid rgba(164,119,46,.16);border-radius:18px;pointer-events:none}.storefront-announcement__close{position:absolute;right:14px;top:10px;border:0;background:transparent;color:#806331;font-size:28px;line-height:1;cursor:pointer;z-index:2}.storefront-announcement__visual{min-height:96px;border-radius:18px;display:grid;place-items:center;background:rgba(200,166,100,.12);font:48px/1 Georgia,serif;color:#a67c35;overflow:hidden}.storefront-announcement__visual img{width:100%;height:100%;object-fit:cover}.storefront-announcement__content{position:relative;z-index:1}.storefront-announcement__content .eyebrow{margin:0 34px 5px 0}.storefront-announcement__content h2{margin:0 34px 6px 0;font-size:clamp(25px,2vw,34px);line-height:1.05}.storefront-announcement__content>p:not(.eyebrow){margin:0 0 12px;color:#596d67;line-height:1.5}.storefront-announcement__code{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:14px;border-radius:10px;background:#f6ead0;color:#866224}.storefront-announcement__code span{font-size:12px;text-transform:uppercase;letter-spacing:.1em}.storefront-announcement__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.storefront-announcement__later{border:0;border-bottom:1px solid #a87e3a;background:transparent;padding:4px 0;color:#6c5735;cursor:pointer}.storefront-announcement--creator .storefront-announcement__visual{background:rgba(30,86,69,.08);color:#165542}.owner-funnel-grid{display:grid;grid-template-columns:repeat(9,auto);align-items:center;gap:12px;padding:8px 0 14px}.owner-funnel-grid article{min-width:115px;padding:16px;border:1px solid var(--owner-border,#d7ddd7);border-radius:14px;background:#fff}.owner-funnel-grid article strong{display:block;font-size:28px}.owner-funnel-grid article small{display:block;margin-top:3px;font-size:11px;letter-spacing:.08em}.owner-funnel-grid>span{opacity:.45;font-size:20px}@media(max-width:900px){.storefront-announcement{grid-template-columns:72px 1fr;padding:18px}.storefront-announcement__visual{min-height:72px;font-size:34px}.owner-funnel-grid{grid-template-columns:1fr 1fr}.owner-funnel-grid>span{display:none}}@media(max-width:560px){.storefront-announcement{left:12px;right:12px;bottom:12px;width:auto;grid-template-columns:54px 1fr;gap:12px;border-radius:18px}.storefront-announcement__visual{min-height:54px}.storefront-announcement__content h2{font-size:22px}.storefront-announcement__content>p:not(.eyebrow){font-size:14px}.storefront-announcement__actions .button{min-height:42px;padding:10px 16px}}


/* v13.4.3 — recurring daily modal announcement carousel */
html.announcement-modal-open{overflow:hidden}
.announcement-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px}
.announcement-modal[hidden]{display:none}
.announcement-modal__backdrop{position:absolute;inset:0;border:0;background:rgba(15,41,34,.24);backdrop-filter:blur(3px);cursor:default}
.announcement-carousel{position:relative;z-index:1;width:min(480px,calc(100vw - 32px));height:min(480px,calc(100vh - 48px));display:grid;grid-template-rows:auto 1fr auto auto;padding:20px;border:1px solid rgba(164,119,46,.42);border-radius:28px;background:linear-gradient(145deg,rgba(255,253,247,.995),rgba(248,238,214,.995));box-shadow:0 34px 90px rgba(16,45,37,.28);overflow:hidden;outline:none;color:#153e34}
.announcement-carousel:before{content:"";position:absolute;inset:8px;border:1px solid rgba(164,119,46,.18);border-radius:21px;pointer-events:none}
.announcement-carousel__topbar{position:relative;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:3px 4px 12px}
.announcement-carousel__topbar .eyebrow{margin:0 0 2px}
.announcement-carousel__count{margin:0;color:#677972;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.announcement-carousel__close{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(164,119,46,.25);border-radius:50%;background:rgba(255,255,255,.48);color:#785f37;font-size:25px;line-height:1;cursor:pointer;transition:transform .18s ease,background .18s ease}
.announcement-carousel__close:hover{transform:rotate(4deg);background:#fff}
.announcement-carousel__viewport{position:relative;z-index:2;min-width:0;overflow:hidden;border-radius:20px;touch-action:pan-y}
.announcement-carousel__track{height:100%;display:flex;transition:transform .48s cubic-bezier(.22,.72,.24,1);will-change:transform}
.announcement-slide{flex:0 0 100%;min-width:0;height:100%;display:grid;grid-template-rows:minmax(128px,42%) 1fr;gap:14px;padding:2px 4px 6px}
.announcement-slide__visual{position:relative;min-height:0;display:grid;place-items:center;border-radius:19px;background:linear-gradient(135deg,rgba(208,175,111,.16),rgba(255,255,255,.42));color:#aa7e34;font:64px/1 Georgia,serif;overflow:hidden}
.announcement-slide__visual:after{content:"";position:absolute;inset:0;border:1px solid rgba(164,119,46,.12);border-radius:inherit;pointer-events:none}
.announcement-slide__visual img{width:100%;height:100%;object-fit:cover}
.announcement-slide--creator .announcement-slide__visual{background:linear-gradient(135deg,rgba(34,92,72,.11),rgba(239,229,197,.58));color:#165542}
.announcement-slide--book_hunt .announcement-slide__visual{background:linear-gradient(135deg,rgba(95,74,37,.12),rgba(224,206,162,.45))}
.announcement-slide__content{display:flex;min-height:0;flex-direction:column;align-items:flex-start;padding:0 6px}
.announcement-slide__content .eyebrow{margin:0 0 4px}
.announcement-slide__content h2{margin:0 0 7px;font-size:clamp(28px,5vw,36px);line-height:1.02;color:#123c31}
.announcement-slide__content>p:not(.eyebrow){margin:0 0 10px;color:#596d67;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.announcement-slide__code{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;margin:0 0 10px;border-radius:10px;background:#f6ead0;color:#866224}
.announcement-slide__code span{font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.announcement-slide__actions{margin-top:auto;width:100%;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.announcement-slide__actions .button{min-height:44px;padding:11px 20px}
.announcement-slide__later{border:0;border-bottom:1px solid #a87e3a;background:transparent;padding:5px 0;color:#6c5735;cursor:pointer}
.announcement-carousel__nav{position:relative;z-index:3;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;padding:12px 4px 2px}
.announcement-carousel__arrow{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(21,62,52,.18);border-radius:50%;background:rgba(255,255,255,.5);color:#153e34;font-size:19px;cursor:pointer}
.announcement-carousel__dots{display:flex;justify-content:center;align-items:center;gap:8px}
.announcement-carousel__dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(21,62,52,.22);cursor:pointer;transition:width .2s ease,background .2s ease}
.announcement-carousel__dot.is-active{width:24px;background:#164d3e}.announcement-carousel__today{position:relative;z-index:3;display:flex;justify-content:center;padding:8px 4px 0}.announcement-carousel__today button{border:0;background:transparent;padding:5px 8px;color:#756243;font:600 12px/1.3 inherit;text-decoration:underline;text-decoration-color:rgba(168,126,58,.55);text-underline-offset:3px;cursor:pointer}.announcement-carousel__today button:hover{color:#164d3e}.announcement-carousel__today button:focus-visible{outline:2px solid #164d3e;outline-offset:3px;border-radius:6px}
@media(min-width:1000px) and (min-height:700px){
  .announcement-modal{padding:36px}
  .announcement-carousel{width:min(640px,calc(100vw - 96px));height:min(640px,calc(100vh - 96px));padding:26px;border-radius:32px}
  .announcement-carousel:before{inset:10px;border-radius:24px}
  .announcement-carousel__topbar{padding:4px 6px 16px}
  .announcement-carousel__count{font-size:13px}
  .announcement-carousel__close{width:44px;height:44px;font-size:28px}
  .announcement-slide{grid-template-rows:minmax(190px,44%) 1fr;gap:18px;padding:4px 6px 8px}
  .announcement-slide__visual{border-radius:22px;font-size:82px}
  .announcement-slide__content{padding:0 8px}
  .announcement-slide__content .eyebrow{margin-bottom:6px;font-size:13px}
  .announcement-slide__content h2{margin-bottom:10px;font-size:clamp(38px,2.4vw,46px);line-height:1.02}
  .announcement-slide__content>p:not(.eyebrow){margin-bottom:14px;font-size:17px;line-height:1.5;-webkit-line-clamp:4}
  .announcement-slide__code{padding:9px 13px;margin-bottom:14px}
  .announcement-slide__code span{font-size:12px}
  .announcement-slide__actions{gap:18px}
  .announcement-slide__actions .button{min-height:50px;padding:13px 24px;font-size:16px}
  .announcement-slide__later{font-size:15px}
  .announcement-carousel__nav{grid-template-columns:50px 1fr 50px;gap:14px;padding:16px 6px 4px}
  .announcement-carousel__arrow{width:46px;height:46px;font-size:21px}
  .announcement-carousel__dot{width:9px;height:9px}
  .announcement-carousel__dot.is-active{width:28px}
  .announcement-carousel__today{padding-top:10px}
  .announcement-carousel__today button{font-size:14px}
}
@media(max-width:600px){
  .announcement-modal{padding:16px}
  .announcement-carousel{width:min(100%,480px);height:min(78vh,560px);min-height:440px;padding:16px;border-radius:24px}
  .announcement-slide{grid-template-rows:minmax(120px,38%) 1fr;gap:12px}
  .announcement-slide__content h2{font-size:28px}
  .announcement-slide__content>p:not(.eyebrow){font-size:14px;-webkit-line-clamp:4}
  .announcement-slide__actions{gap:12px}
  .announcement-slide__actions .button{flex:1 1 180px;text-align:center}
  .announcement-carousel__nav{padding-top:8px}
}
@media(max-height:620px) and (min-width:601px){
  .announcement-carousel{height:calc(100vh - 32px);grid-template-rows:auto 1fr auto auto}
  .announcement-slide{grid-template-columns:38% 1fr;grid-template-rows:1fr;align-items:stretch}
  .announcement-slide__visual{height:100%}
}
@media(prefers-reduced-motion:reduce){.announcement-carousel__track,.announcement-carousel__close,.announcement-carousel__dot{transition:none}}

/* v13.5.0 recurring Promotion controls. */
.promotion-weekdays{min-width:0;margin:0;padding:0;border:0}
.promotion-weekdays legend{padding:0;margin-bottom:10px;font-weight:700}
.promotion-weekdays__options{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px}
.promotion-weekdays__option{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--parchment-50)}
.owner-form .promotion-weekdays__option input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--forest-700)}

/* v13.6.0: align import options with their labels on phone and desktop. */
.owner-console .owner-import-panel .form-field:has(> input[type="checkbox"]){display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;row-gap:5px;align-items:center}
.owner-console .owner-import-panel .form-field:has(> input[type="checkbox"])>span{grid-column:2;grid-row:1}
.owner-console .owner-import-panel .form-field>input[type="checkbox"]{grid-column:1;grid-row:1;width:18px;height:18px;min-height:0;min-width:0;margin:0;justify-self:start;accent-color:var(--forest-700)}
.owner-console .owner-import-panel .form-field:has(> input[type="checkbox"])>small{grid-column:2;grid-row:2}
.promotion-weekdays__option:has(input:checked){border-color:var(--forest-700);background:var(--parchment-200)}
.promotion-weekdays__option:focus-within{outline:2px solid var(--forest-700);outline-offset:2px}
.promotion-schedule-preview{padding:12px;border-radius:10px;background:var(--parchment-200);line-height:1.55}
.promotion-schedule-preview[hidden]{display:none}

/* Keep copy readable when a notice has a multi-line title. */
.announcement-slide__content{overflow-y:auto;overscroll-behavior:contain}
.announcement-slide__content>*{flex-shrink:0}
@media(min-width:1000px) and (min-height:700px){
  .announcement-slide{grid-template-rows:minmax(140px,34%) minmax(0,1fr);gap:14px}
  .announcement-slide__content h2{font-size:clamp(32px,2.4vw,36px);margin-bottom:8px}
  .announcement-slide__content>p:not(.eyebrow){font-size:16px;line-height:1.45;margin-bottom:10px;-webkit-line-clamp:3}
  .announcement-slide__code{padding:7px 11px;margin-bottom:10px}
}