/* Ocean Child — shared styles */
:root {
    --bone: #f3efe7;
    --bone-2: #ebe6dc;
    --ink: #14161a;
    --ink-soft: #2b2e35;
    --mute: #8b897f;
    /* Muted text that still has to be READ, on a light field. --mute is 3.06:1
       on --bone, which is fine for a decorative label on a card and not fine
       for 11px navigation. The sidebar's inactive items were ~8:1 as
       light-on-ink; inverting the rail to bone is what created the need for
       this. 5.16:1 on --bone, 5.73:1 on --card. */
    --mute-strong: #66645d;
    --line: #d9d3c6;
    --tide: #0C556E;
    --tide-2: #5291AA;
    --sand: #c9bfa8;
    /* Attention / draft / low stock. Was hardcoded in eight places across
       three files before Part 2. */
    --warn: #c47a3a;
    /* Card surface. Warm white rather than #fff: on a bone field pure white
       reads blue-ish and fights the palette. */
    --card: #fdfbf7;
    /* The brightest surface. --card is a warm off-white that sits ON bone;
       --paper is the plain white used where a card has to lift clear of a
       tinted column, as the order cards do on the board. */
    --paper: #ffffff;
    /* Shadows are ink-tinted, not black, for the same reason. */
    --shadow-sm: 0 1px 2px rgba(20, 22, 26, .04), 0 2px 8px rgba(20, 22, 26, .04);
    --shadow-md: 0 2px 4px rgba(20, 22, 26, .04), 0 8px 24px rgba(20, 22, 26, .06);
    --radius: 18px;
    --radius-lg: 28px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-swift: cubic-bezier(.8, 0, .2, 1);
    --f-display: "Fraunces", "Times New Roman", serif;
    --f-body: "DM Sans", system-ui, sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html,
body {
    background: var(--bone);
    color: var(--ink);
    font-family: var(--f-body);
    -webkit-font-smoothing: antialiased;

}

html {
    scroll-behavior: smooth
}

body {
    overflow-x: hidden;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    position: relative;
    isolation: isolate;
    /* cursor: none */
}

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

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: none
}

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

input,
textarea,
select {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: none
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .5;
    background-image:
        radial-gradient(rgba(20, 22, 26, .05) 1px, transparent 1px),
        radial-gradient(rgba(20, 22, 26, .03) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
}

/* cursor */
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    z-index: 1000;
    transform: translate(-50%, -50%);
    transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease);
    mix-blend-mode: difference
}

.cursor.ring {
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid #f3efe7
}

.cursor-label {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1000;
    transform: translate(-50%, -50%);
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bone);
    background: var(--ink);
    padding: 8px 12px;
    border-radius: 100px;
    opacity: 0;
    transition: opacity .2s var(--ease)
}

.cursor-label.on {
    opacity: 50
}

/* nav */
.nav {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 32px;
    transition: background .4s var(--ease);
}

.nav.scrolled {
    background: rgba(243, 239, 231, .7);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line)
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 18px
}

.menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 10px 14px;
    border: 1px solid var(--ink);
    border-radius: 100px;
    transition: background .3s var(--ease), color .3s
}

.menu-btn:hover {
    background: var(--ink);
    color: var(--bone)
}

.menu-btn .bars {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.menu-btn .bars i {
    display: block;
    width: 14px;
    height: 1.2px;
    background: currentColor
}

.brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--f-display);
    font-weight: 400;
    font-style: italic;
    font-size: 22px;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 10px
}

.brand .mark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ink);
    position: relative;
    overflow: hidden
}

.brand .mark::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--bone);
    transform: translateY(60%);
    animation: tide 4s ease-in-out infinite
}

@keyframes tide {

    0%,
    100% {
        transform: translateY(60%)
    }

    50% {
        transform: translateY(40%)
    }
}

.cart-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid var(--ink);
    border-radius: 100px;
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background .3s var(--ease), color .3s
}

.cart-btn:hover {
    background: var(--ink);
    color: var(--bone)
}

.cart-count {
    background: var(--tide);
    color: var(--bone);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 600
}

/* subnav breadcrumb */
.subnav {
    padding: 110px 32px 24px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    border-bottom: 1px solid var(--line)
}

.crumbs {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
    display: flex;
    gap: 10px;
    align-items: center
}

.crumbs a:hover {
    color: var(--ink)
}

.crumbs .sep {
    color: var(--line)
}

.crumbs .cur {
    color: var(--ink)
}

.page-meta {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute)
}

/* page title */
.ptitle {
    padding: 40px 32px 30px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end
}

.ptitle h1 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(56px, 8vw, 128px);
    line-height: .92;
    letter-spacing: -.025em;
    max-width: 16ch
}

.ptitle h1 em {
    font-style: italic;
    color: var(--tide)
}

.ptitle .lede {
    max-width: 38ch;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft)
}

/* placeholders */
.ph-military {
    background: linear-gradient(135deg, #3c4a3a, #6b7a60 60%, #9ea58e)
}

.ph-fish {
    background: linear-gradient(160deg, #1d3a4a, #4a7d8a 55%, #bfdce0)
}

.ph-coral {
    background: linear-gradient(145deg, #a84a3a, #d88a6b 50%, #f3d5a8)
}

.ph-shark {
    background: linear-gradient(180deg, #0f1a22, #213948 60%, #506e7a)
}

.ph-stripes {
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 14px), linear-gradient(180deg, #223d3a, #395553)
}

.ph-resort {
    background: linear-gradient(165deg, #d5c9a8, #e8d9b8 40%, #7a8b66)
}

.ph-underwater {
    background: linear-gradient(180deg, #7ac1cf, #2e5b6e 60%, #0f2030)
}

.ph-wedding {
    background: linear-gradient(200deg, #e9dfcd, #b0a089 55%, #6c6050)
}

.ph-video {
    background: linear-gradient(145deg, #0f1a22, #2e4858 55%, #7aa6a6)
}

.ph-proposal {
    background: linear-gradient(170deg, #d8a48f, #a7645a 55%, #3c2a2a)
}

.ph-sand {
    background: linear-gradient(180deg, #e8dcbc, #c9bfa8 50%, #948869)
}

.ph-kelp {
    background: linear-gradient(180deg, #2d3e2b, #4a6b45 60%, #9ab08a)
}

.ph-storm {
    background: linear-gradient(180deg, #3a4450, #6b7580 60%, #cfd4dc)
}

/* buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-radius: 100px;
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: all .35s var(--ease);
    border: 1px solid transparent
}

.btn-solid {
    background: var(--ink);
    color: var(--bone)
}

.btn-solid:hover {
    background: var(--tide)
}

.btn-line {
    border-color: var(--ink)
}

.btn-line:hover {
    background: var(--ink);
    color: var(--bone)
}

.btn-tide {
    background: var(--tide);
    color: var(--bone)
}

.btn-tide:hover {
    background: var(--ink)
}

.btn .arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bone);
    color: var(--ink);
    display: grid;
    place-items: center;
    transition: transform .3s var(--ease)
}

.btn:hover .arrow {
    transform: rotate(-45deg)
}

.btn-line .arrow {
    background: var(--ink);
    color: var(--bone)
}

/* footer */
.foot {
    padding: 80px 32px 30px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    border-top: 1px solid var(--line);
    margin-top: 60px
}

.foot h4 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 56px;
    line-height: .9;
    letter-spacing: -.02em
}

.foot h4 em {
    font-style: italic
}

.foot .col h5 {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .16em;
    color: var(--mute);
    text-transform: uppercase;
    margin-bottom: 16px
}

.foot .col a {
    display: block;
    padding: 6px 0;
    font-size: 14px
}

.foot-bar {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    padding-top: 24px;
    margin-top: 10px;
    border-top: 1px solid var(--line)
}

/* reveals */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s var(--ease), transform 1s var(--ease)
}

.reveal.in {
    opacity: 1;
    transform: none
}

/* ============= RESPONSIVE ============= */
@media (max-width: 1024px) {
    .ptitle h1 {
        font-size: clamp(48px, 8vw, 96px)
    }

    .subnav {
        padding: 100px 24px 20px
    }

    .ptitle {
        padding: 32px 24px 24px;
        gap: 24px
    }
}

@media (max-width: 860px) {
    body {
        cursor: auto;
        padding: 0 20px
    }

    .cursor,
    .cursor-label {
        display: none
    }

    button,
    a,
    input,
    textarea {
        cursor: auto
    }

    .nav {
        padding: 16px 18px;
        gap: 12px
    }

    .nav-left {
        gap: 10px
    }

    .menu-btn {
        padding: 9px 12px;
        font-size: 11px
    }

    .menu-btn span:last-child {
        display: none
    }

    .contact-pills {
        display: none
    }

    .brand {
        font-size: 16px;
        position: static;
        transform: none
    }

    .brand .mark {
        width: 18px;
        height: 18px
    }

    .cart-btn {
        padding: 9px 12px;
        font-size: 11px
    }

    .subnav {
        padding: 86px 18px 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .ptitle {
        padding: 24px 18px 20px;
        grid-template-columns: 1fr;
        gap: 18px
    }

    .ptitle h1 {
        font-size: clamp(42px, 11vw, 72px)
    }

    .ptitle .lede {
        font-size: 14px
    }

    .foot {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 40px 18px 28px
    }

    .foot h4 {
        font-size: 36px;
        grid-column: 1/-1
    }

    .foot-bar {
        grid-column: 1/-1;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        font-size: 10px
    }

    .crumbs {
        font-size: 10px;
        flex-wrap: wrap
    }

    .page-meta {
        font-size: 10px
    }
}

@media (max-width: 520px) {
    body {
        padding: 0 12px
    }

    .nav {
        padding: 14px 14px
    }

    .menu-btn {
        padding: 8px 10px
    }

    .cart-btn {
        padding: 8px 10px
    }

    .cart-btn span:first-of-type {
        display: none
    }

    .ptitle {
        padding: 20px 14px 16px
    }

    .ptitle h1 {
        font-size: clamp(36px, 12vw, 56px)
    }

    .subnav {
        padding: 78px 14px 14px
    }

    .foot {
        padding: 32px 14px 20px
    }

    .foot h4 {
        font-size: 30px
    }
}

/* Touch/no-hover devices: kill custom cursor regardless of width */
@media (hover: none) {
    body {
        cursor: auto
    }

    .cursor,
    .cursor-label {
        display: none !important
    }

    button,
    a,
    input,
    textarea {
        cursor: auto
    }
}

/* Reusable image upload — deliberately compact enough for CMS drawers and
   quiet enough to sit inside the public checkout form. */
.oc-upload {
    width: 100%;
    margin: 8px 0 16px;
}

.oc-upload-drop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    align-items: center;
    min-height: 112px;
    gap: 16px;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: rgba(253, 251, 247, .64);
    cursor: pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}

.oc-upload.is-dragging .oc-upload-drop,
.oc-upload-drop:focus-within {
    border-color: var(--tide);
    background: rgba(82, 145, 170, .08);
}

.oc-upload-copy,
.oc-upload-copy span {
    display: block;
}

.oc-upload-copy strong {
    display: block;
    margin-bottom: 5px;
    font-family: var(--f-body);
    font-size: 13px;
    font-weight: 600;
}

.oc-upload-copy span,
.oc-upload-detail {
    color: var(--mute-strong);
    font-family: var(--f-mono);
    font-size: 10px;
    line-height: 1.5;
}

.oc-upload-preview-wrap {
    width: 92px;
    height: 86px;
    overflow: hidden;
    border-radius: 9px;
    background: var(--bone-2);
}

.oc-upload-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oc-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.oc-upload-detail {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-top: 7px;
}

.oc-upload-status {
    text-align: right;
}

.oc-upload.has-error .oc-upload-status {
    color: #9f3f35;
}

.oc-upload-track {
    height: 3px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--line);
}

.oc-upload-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--tide-2);
    transition: width .12s linear;
}

.oc-upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    padding-top: 7px;
}

.oc-upload-actions[hidden] {
    display: none;
}

@media (max-width: 540px) {
    .oc-upload-drop {
        grid-template-columns: minmax(0, 1fr) 72px;
    }

    .oc-upload-preview-wrap {
        width: 72px;
        height: 68px;
    }

    .oc-upload-detail {
        display: block;
    }

    .oc-upload-status {
        display: block;
        padding-top: 3px;
        text-align: left;
    }
}

/* =============================================================
   PRODUCT PAGE (product.html)
   ============================================================= */
.pd {
    padding: 110px 32px 40px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 40px
}

/* gallery */
.pd-gal {
    position: relative
}

.pd-main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/5;
    position: relative;
    background: var(--bone-2)
}

.pd-main .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s var(--ease)
}

.pd-main .slide.on {
    opacity: 1
}

.pd-main .zoom {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    padding: 10px 14px;
    background: rgba(243, 239, 231, .9);
    backdrop-filter: blur(8px);
    border-radius: 100px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    display: inline-flex;
    gap: 8px;
    align-items: center
}

.pd-main .badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    padding: 10px 14px;
    border-radius: 100px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--bone)
}

.pd-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 12px
}

.pd-thumb {
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: none;
    transition: outline-offset .3s
}

.pd-thumb .p {
    position: absolute;
    inset: 0
}

.pd-thumb.on {
    outline: 2px solid var(--ink);
    outline-offset: 2px
}

/* sticky info */
.pd-info {
    position: sticky;
    top: 110px;
    align-self: start;
    padding-left: 20px
}

.pd-crumbs {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    margin-bottom: 24px;
    display: flex;
    gap: 10px;
    align-items: center
}

.pd-crumbs .cur {
    color: var(--ink)
}

.pd-info h1 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(44px, 5vw, 72px);
    line-height: .95;
    letter-spacing: -.02em
}

.pd-info h1 em {
    font-style: italic;
    color: var(--tide)
}

.pd-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 14px
}

.pd-meta .price {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 36px
}

.pd-meta .sku {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase
}

.pd-info p.desc {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 52ch;
    text-wrap: pretty
}

/* swatches / sizes */
.pd-section {
    margin-top: 28px;
    border-top: 1px solid var(--line);
    padding-top: 20px
}

.pd-section h4 {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between
}

.pd-colors {
    display: flex;
    gap: 10px
}

.cs {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    position: relative;
    transition: transform .3s var(--ease)
}

.cs::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid transparent;
    border-radius: 50%;
    transition: border-color .3s
}

.cs.on::after {
    border-color: var(--ink)
}

.cs:hover {
    transform: scale(1.05)
}

.pd-sizes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px
}

.sz {
    padding: 13px 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    transition: all .3s
}

.sz:hover {
    border-color: var(--ink)
}

.sz.on {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink)
}

.sz.oos {
    color: var(--mute);
    text-decoration: line-through
}

.size-guide-wrap {
    position: relative
}

.size-guide-trigger {
    background: none;
    border: none;
    color: var(--ink);
    font-family: var(--f-display);
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    font-size: 14px;
    cursor: pointer;
    padding: 0
}

.size-guide-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    background: var(--bone);
    border: 1px solid var(--ink);
    border-radius: 12px;
    padding: 12px 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    z-index: 30;
    pointer-events: none;
    box-shadow: 0 12px 32px rgba(20, 22, 26, .08)
}

.size-guide-pop .sg-head {
    font: 500 9px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line)
}

.size-guide-pop .sg-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: baseline;
    gap: 12px;
    font: 500 11px/1.6 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase
}

.size-guide-pop .sg-row + .sg-row {
    margin-top: 6px
}

.size-guide-pop .sg-row em {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink)
}

.size-guide-pop .sg-row span {
    color: var(--ink-soft);
    white-space: nowrap
}

.size-guide-pop .sg-row .sg-price {
    color: var(--ink);
    font-family: var(--f-display);
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    font-size: 14px
}

@media (hover: hover) {
    .size-guide-wrap:hover .size-guide-pop {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto
    }
}

.size-guide-wrap.open .size-guide-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto
}

.sz {
    position: relative
}

.sz .sz-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--ink);
    color: var(--bone);
    font: 500 9px/1 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
    pointer-events: none;
    z-index: 5
}

.sz .sz-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--ink)
}

@media (hover: hover) {
    .sz:hover .sz-tip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0)
    }
}

/* The CMS types small on purpose -- nav 11px, table heads 10px, prices 13px.
   Anything without an explicit size inherited the 16px browser default and
   stood out against that language, which is what made these screens read as
   oversized. Scoped to .cms-page so the storefront is untouched, and stated in
   px because every size in this file is px: a rem base would rescale the
   deliberate 56px and 44px display figures too. */
.cms-page {
    font-size: 14px;
}

.cms-page .size-guide-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px
}

.cms-page .sg-edit-row {
    display: grid;
    grid-template-columns: 56px 1fr 1fr 72px 28px;
    gap: 8px;
    align-items: center
}

.cms-page .sg-edit-row input {
    margin: 0
}

.cms-page .sg-edit-row button {
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    color: var(--mute)
}

.qty-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 24px
}

.qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--ink);
    border-radius: 100px;
    padding: 0 6px
}

.qty button {
    width: 36px;
    height: 44px;
    font-size: 16px
}

.qty .val {
    min-width: 30px;
    text-align: center;
    font: 500 13px/1 var(--f-mono)
}

.add-cart {
    flex: 1;
    background: var(--ink);
    color: var(--bone);
    border-radius: 100px;
    padding: 16px 24px;
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: background .3s;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.add-cart:hover {
    background: var(--tide)
}

/* accordion */
.acc {
    margin-top: 10px
}

.acc-row {
    border-top: 1px solid var(--line);
    padding: 18px 0;
    cursor: none
}

.acc-row:last-child {
    border-bottom: 1px solid var(--line)
}

.acc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase
}

.acc-head .plus {
    font-family: var(--f-display);
    font-size: 24px;
    font-weight: 300;
    transition: transform .4s var(--ease)
}

.acc-row.on .acc-head .plus {
    transform: rotate(45deg)
}

.acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s var(--ease);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft)
}

.acc-row.on .acc-body {
    max-height: 260px;
    padding-top: 14px
}

/* certifications */
.pd-certs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* 26px, not 6: the badges are a separate band from the buy controls and
       were sitting almost against the button. The 6px only looked passable
       while .qty-row's stray 24px margin was inflating the row above it. */
    margin-top: 26px
}

.pd-certs .cert {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 6px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff
}

.pd-certs .cert img {
    height: 100%;
    width: auto;
    max-width: 96px;
    object-fit: contain
}

/* trust */
.trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
    font: 500 10px/1.3 var(--f-mono);
    letter-spacing: .12em;
    color: var(--mute);
    text-transform: uppercase
}

.trust .t {
    border-top: 1px solid var(--line);
    padding-top: 12px
}

.trust .t strong {
    color: var(--ink);
    font-weight: 500;
    font-size: 14px;
    display: block;
    margin-bottom: 6px;
    font-family: var(--f-display);
    letter-spacing: -.01em;
    font-style: italic
}

/* details band */
.details-band {
    margin: 80px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center
}

.db-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 5/6
}

.db-txt .eyebrow {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .16em;
    color: var(--tide);
    text-transform: uppercase;
    margin-bottom: 18px
}

.db-txt h2 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -.02em
}

.db-txt h2 em {
    font-style: italic
}

.db-txt p {
    margin-top: 20px;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 48ch
}

/* related */
.related {
    padding: 40px 32px 0
}

.related h3 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 44px;
    letter-spacing: -.02em;
    margin-bottom: 24px
}

.related h3 em {
    font-style: italic;
    color: var(--tide)
}

.rel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.rel {
    cursor: none
}

.rel .fr {
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative
}

.rel .fr .p {
    position: absolute;
    inset: 0;
    transition: transform .8s var(--ease)
}

.rel:hover .fr .p {
    transform: scale(1.05)
}

.rel .m {
    display: flex;
    justify-content: space-between;
    padding: 12px 2px 0;
    font-family: var(--f-display);
    font-size: 18px
}

.rel .m .pr {
    font: 500 11px/1 var(--f-mono)
}

/* toast */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 200%);
    background: var(--ink);
    color: var(--bone);
    padding: 14px 22px;
    border-radius: 100px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    display: inline-flex;
    gap: 12px;
    align-items: center;
    z-index: 80;
    transition: transform .6s var(--ease-swift)
}

.toast.on {
    transform: translate(-50%, 0)
}

.toast .dot {
    width: 8px;
    height: 8px;
    background: var(--tide-2);
    border-radius: 50%
}

@media (max-width:860px) {
    .pd {
        grid-template-columns: 1fr;
        padding: 90px 18px 30px;
        gap: 24px
    }

    .pd-info {
        position: static;
        padding-left: 0;
        margin-top: 6px
    }

    .pd-info h1 {
        font-size: clamp(36px, 9vw, 60px)
    }

    .pd-thumbs {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px
    }

    .details-band {
        grid-template-columns: 1fr;
        padding: 28px 18px;
        gap: 20px
    }

    .details-band h3 {
        font-size: 28px !important
    }

    .rel-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 18px 40px;
        gap: 16px
    }

    .size-row {
        flex-wrap: wrap
    }

    .buyrow {
        flex-direction: column;
        align-items: stretch
    }

    .buyrow .add-big {
        width: 100%
    }
}

@media (max-width:520px) {
    .pd {
        padding: 80px 14px 24px
    }

    .pd-meta .price {
        font-size: 28px
    }

    .rel-grid {
        grid-template-columns: 1fr;
        padding: 0 14px 32px
    }
}

/* =============================================================
   CATEGORY PAGE (category.html)
   ============================================================= */
.ch {
    padding: 130px 32px 20px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: end
}

.ch h1 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(72px, 11vw, 200px);
    line-height: .86;
    letter-spacing: -.03em
}

.ch h1 em {
    font-style: italic;
    color: var(--tide)
}

.ch .lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 44ch
}

.ch .lede .tag {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .16em;
    color: var(--tide);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block
}

.ch .stat {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 24px
}

.ch .stat .s {
    border-top: 1px solid var(--line);
    padding-top: 10px
}

.ch .stat .k {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 28px
}

.ch .stat .k em {
    font-style: italic;
    color: var(--tide)
}

.ch .stat .l {
    font: 500 10px/1.4 var(--f-mono);
    letter-spacing: .12em;
    color: var(--mute);
    text-transform: uppercase;
    margin-top: 4px
}

/* category nav */
.cnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap
}

.cnav .pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.cnav .pill {
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 100px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: all .3s
}

.cnav .pill:hover {
    border-color: var(--ink)
}

.cnav .pill.on {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink)
}

.cnav .views {
    display: flex;
    gap: 4px
}

.cnav .vbtn {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 100px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: all .3s
}

.cnav .vbtn.on {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink)
}

/* masonry-ish grid */
.mason {
    padding: 32px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.tile {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: none;
    animation: fin .8s var(--ease) both;
}

@keyframes fin {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.tile .img {
    position: absolute;
    inset: 0;
    transition: transform 1s var(--ease-swift)
}

.tile:hover .img {
    transform: scale(1.05)
}

.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55));
    opacity: 0;
    transition: opacity .4s;
    z-index: 1
}

.tile:hover::after {
    opacity: 1
}

.tile .cap {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 2;
    color: var(--bone);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.tile:hover .cap {
    opacity: 1;
    transform: none
}

.tile .cap h4 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 20px;
    font-style: italic
}

.tile .cap .n {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .7
}

.tile .num {
    position: absolute;
    top: 12px;
    left: 12px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    color: rgba(243, 239, 231, .9);
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4)
}

.t-a {
    grid-column: span 8;
    aspect-ratio: 3/2
}

.t-b {
    grid-column: span 4;
    aspect-ratio: 4/5
}

.t-c {
    grid-column: span 4;
    aspect-ratio: 4/5
}

.t-d {
    grid-column: span 4;
    aspect-ratio: 4/5
}

.t-e {
    grid-column: span 4;
    aspect-ratio: 4/5
}

.t-f {
    grid-column: span 6;
    aspect-ratio: 3/2
}

.t-g {
    grid-column: span 6;
    aspect-ratio: 3/2
}

.t-h {
    grid-column: span 3;
    aspect-ratio: 1/1
}

.t-i {
    grid-column: span 3;
    aspect-ratio: 1/1
}

.t-j {
    grid-column: span 3;
    aspect-ratio: 1/1
}

.t-k {
    grid-column: span 3;
    aspect-ratio: 1/1
}

.t-l {
    grid-column: span 8;
    aspect-ratio: 3/2
}

.t-m {
    grid-column: span 4;
    aspect-ratio: 4/5
}

.mason.dense .tile {
    grid-column: span 3;
    aspect-ratio: 1/1
}

.mason.wide .tile {
    grid-column: span 6;
    aspect-ratio: 3/2
}

/* lightbox */
.lbx {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 26, .92);
    backdrop-filter: blur(20px);
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .4s
}

.lbx.on {
    display: flex;
    opacity: 1
}

.lbx-inner {
    position: relative;
    width: 90vw;
    height: 85vh;
    border-radius: 18px;
    overflow: hidden
}

.lbx-img {
    position: absolute;
    inset: 0
}

.lbx .close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(243, 239, 231, .3);
    border-radius: 50%;
    color: var(--bone);
    display: grid;
    place-items: center;
    z-index: 3
}

.lbx .nav-arr {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border: 1px solid rgba(243, 239, 231, .3);
    border-radius: 50%;
    color: var(--bone);
    display: grid;
    place-items: center;
    z-index: 3
}

.lbx .prev {
    left: 30px
}

.lbx .next {
    right: 30px
}

.lbx .caption {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    z-index: 3;
    color: var(--bone);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px
}

.lbx .caption h3 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 40px;
    letter-spacing: -.02em
}

.lbx .caption h3 em {
    font-style: italic
}

.lbx .caption .info {
    text-align: right;
    font: 500 11px/1.5 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .7
}

.lbx .counter {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 3;
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: 28px;
    color: var(--bone)
}

/* story band */
.story {
    padding: 80px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center
}

.story .img {
    border-radius: var(--radius-lg);
    aspect-ratio: 4/5;
    overflow: hidden
}

.story .eyebrow {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .16em;
    color: var(--tide);
    text-transform: uppercase;
    margin-bottom: 18px
}

.story h2 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1;
    letter-spacing: -.02em
}

.story h2 em {
    font-style: italic
}

.story p {
    margin-top: 22px;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 48ch
}

/* next category */
.next-cat {
    margin: 40px 32px;
    padding: 60px 40px;
    border-radius: var(--radius-lg);
    background: var(--ink);
    color: var(--bone);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    position: relative;
    overflow: hidden
}

.next-cat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 90% 50%, rgba(122, 153, 150, .25), transparent 60%)
}

.next-cat .lbl {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .16em;
    color: var(--tide-2);
    text-transform: uppercase;
    position: relative
}

.next-cat h3 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(40px, 5vw, 72px);
    line-height: .95;
    letter-spacing: -.02em;
    margin-top: 12px;
    position: relative
}

.next-cat h3 em {
    font-style: italic
}

@media (max-width:860px) {
    .ch {
        grid-template-columns: 1fr;
        padding: 90px 18px 24px;
        gap: 16px
    }

    .ch h1 {
        font-size: clamp(44px, 11vw, 84px) !important
    }

    .mason {
        grid-template-columns: repeat(6, 1fr);
        padding: 20px 18px;
        gap: 10px
    }

    .t-a,
    .t-l {
        grid-column: span 6;
        aspect-ratio: 3/2
    }

    .t-b,
    .t-c,
    .t-d,
    .t-e,
    .t-m {
        grid-column: span 3;
        aspect-ratio: 4/5
    }

    .t-f,
    .t-g {
        grid-column: span 6
    }

    .t-h,
    .t-i,
    .t-j,
    .t-k {
        grid-column: span 3
    }

    .story,
    .next-cat {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 28px 18px
    }

    .next-cat h3 {
        font-size: 32px !important
    }
}

@media (max-width:520px) {
    .ch {
        padding: 80px 14px 20px
    }

    .mason {
        grid-template-columns: repeat(2, 1fr);
        padding: 18px 14px
    }

    .t-a,
    .t-b,
    .t-c,
    .t-d,
    .t-e,
    .t-f,
    .t-g,
    .t-h,
    .t-i,
    .t-j,
    .t-k,
    .t-l,
    .t-m {
        grid-column: span 1;
        aspect-ratio: 4/5
    }
}

/* transitions */
.ch-fx {
    transition: opacity .5s var(--ease), transform .5s var(--ease)
}

.ch-fx.leaving {
    opacity: 0;
    transform: translateY(-14px)
}

.mason.leaving .tile {
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .35s var(--ease), transform .35s var(--ease)
}

.pill {
    position: relative;
    overflow: hidden
}

.pill::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: translateY(101%);
    transition: transform .45s var(--ease-swift);
    z-index: -1
}

.pill.on::before {
    transform: translateY(0)
}

.pill span.lbl {
    position: relative;
    z-index: 1
}

/* =============================================================
   SHOP PAGE (shop.html)
   ============================================================= */
.shop-head {
    padding: 130px 32px 32px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: end
}

.shop-head h1 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(64px, 9vw, 160px);
    line-height: .88;
    letter-spacing: -.03em
}

.shop-head h1 em {
    font-style: italic;
    color: var(--tide)
}

.shop-head .lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 44ch
}

.shop-head .lede .note {
    font: 500 10px/1.4 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    margin-bottom: 12px
}

/* filter bar */
.fbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 24px 32px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap
}

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

.pill {
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 100px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: all .3s var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.pill .n {
    color: var(--mute);
    font-size: 9px
}

.pill:hover {
    border-color: var(--ink)
}

.pill.on {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink)
}

.pill.on .n {
    color: var(--tide-2)
}

.view-ctrls {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute)
}

.view-ctrls .vbtn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: all .3s
}

.view-ctrls .vbtn.on {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink)
}

/* grid */
.shop-grid {
    padding: 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 24px;
    transition: all .5s var(--ease)
}

.shop-grid.g2 {
    grid-template-columns: repeat(2, 1fr)
}

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

.card {
    display: block;
    position: relative;
    cursor: none;
    animation: fin-shop .7s var(--ease) both
}

@keyframes fin-shop {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.card .frame {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bone-2)
}

.card .ph {
    position: absolute;
    inset: 0;
    transition: transform 1s var(--ease-swift)
}

.card:hover .ph {
    transform: scale(1.04)
}

.card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .35));
    z-index: 1
}

.card .tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 7px 11px;
    background: rgba(243, 239, 231, .92);
    backdrop-filter: blur(6px);
    border-radius: 100px;
    color: var(--ink)
}

.card .num {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    color: rgba(243, 239, 231, .95)
}

.card .qv {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translate(-50%, 10px);
    z-index: 3;
    padding: 10px 16px;
    background: rgba(243, 239, 231, .95);
    backdrop-filter: blur(8px);
    border-radius: 100px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0;
    transition: all .45s var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.card:hover .qv {
    opacity: 1;
    transform: translate(-50%, 0)
}

.card .meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 14px 2px 0
}

.card .meta h3 {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -.01em
}

.card .meta h3 em {
    font-style: italic;
    color: var(--tide)
}

.card .meta .p {
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .06em
}

.card .sub {
    font: 500 10px/1.3 var(--f-mono);
    letter-spacing: .12em;
    color: var(--mute);
    text-transform: uppercase;
    margin-top: 4px
}

.card .swatches {
    display: flex;
    gap: 4px;
    margin-top: 10px
}

.card .sw {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--line)
}

/* capsule band */
.band {
    margin: 60px 32px;
    padding: 40px;
    background: var(--ink);
    color: var(--bone);
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 30px;
    align-items: center;
    position: relative;
    overflow: hidden
}

.band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(122, 153, 150, .25), transparent 60%)
}

.band .lbl {
    font: 500 10px/1.4 var(--f-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tide-2);
    position: relative
}

.band h3 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -.02em;
    position: relative
}

.band h3 em {
    font-style: italic
}

.band .cta {
    position: relative
}

/* upsells */
.upsell-title {
    padding: 80px 32px 24px;
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.upsell-title h2 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 44px;
    letter-spacing: -.02em
}

.upsell-title h2 em {
    font-style: italic;
    color: var(--tide)
}

.upsell-title .meta {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute)
}

@media (max-width:860px) {
    .shop-head {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 100px 18px 24px
    }

    .shop-head h1 {
        font-size: clamp(48px, 12vw, 84px)
    }

    .fbar {
        padding: 18px;
        gap: 12px;
        flex-direction: column;
        align-items: flex-start
    }

    .pills {
        gap: 6px
    }

    .pill {
        padding: 8px 12px;
        font-size: 10px
    }

    .view-ctrls {
        font-size: 10px
    }

    .shop-grid,
    .shop-grid.g4,
    .shop-grid.g2 {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px 18px;
        gap: 20px 14px
    }

    .card .meta h3 {
        font-size: 18px
    }

    .band {
        grid-template-columns: 1fr;
        padding: 28px 18px;
        gap: 18px
    }

    .band h3 {
        font-size: 32px !important
    }

    .upsell {
        padding: 28px 18px
    }

    .upsell-title h2 {
        font-size: 32px !important
    }
}

@media (max-width:520px) {
    .shop-head {
        padding: 88px 14px 20px
    }

    .shop-head h1 {
        font-size: clamp(40px, 13vw, 64px)
    }

    .fbar {
        padding: 14px
    }

    .shop-grid,
    .shop-grid.g4,
    .shop-grid.g2 {
        grid-template-columns: 1fr;
        padding: 18px 14px;
        gap: 22px
    }

    .card .frame {
        aspect-ratio: 5/6
    }
}

/* =============================================================
   BOOK PAGE (book.html)
   ============================================================= */
.bh {
    padding: 130px 32px 40px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: end
}

.bh h1 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(64px, 9vw, 156px);
    line-height: .88;
    letter-spacing: -.03em
}

.bh h1 em {
    font-style: italic;
    color: var(--tide)
}

.bh .lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 46ch
}

.bh .lede .tag {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .16em;
    color: var(--tide);
    text-transform: uppercase;
    margin-bottom: 14px;
    display: block
}

/* types */
.types {
    padding: 40px 32px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.type {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/5;
    cursor: none;
    transition: transform .5s var(--ease);
}

.type:hover {
    transform: translateY(-4px)
}

.type .img {
    position: absolute;
    inset: 0;
    transition: transform 1s var(--ease-swift)
}

.type:hover .img {
    transform: scale(1.06)
}

.type::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .65));
    z-index: 1
}

.type .body {
    position: absolute;
    inset: 20px;
    z-index: 2;
    color: var(--bone);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.type .k {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    background: rgba(243, 239, 231, .2);
    backdrop-filter: blur(6px);
    padding: 8px 12px;
    border-radius: 100px;
    align-self: flex-start
}

.type h3 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 34px;
    line-height: .95;
    letter-spacing: -.02em
}

.type h3 em {
    font-style: italic
}

.type .from {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    margin-top: 8px;
    opacity: .8;
    text-transform: uppercase
}

.type.on {
    outline: 3px solid var(--ink);
    outline-offset: 2px
}

/* form */
/*
    One column, because there is only one thing in here.

    This was `grid-template-columns: 1fr 1fr` for a form-intro column that no
    longer exists — .form-wrap has a single child. The card was taking the
    first 383px track of a 1160px section and the other half was empty, which
    is why the fields felt cramped. It also had no responsive variant, so that
    held at every width.
*/
.form-wrap {
    padding: 60px 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px
}

.form {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

/* Inside the card: who and what on one side, when on the other. */
.form-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 900px) {
    .form-wrap {
        padding: 60px 32px;
    }

    .form-cols {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        align-items: start;
    }
}

.form-intro h2 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(44px, 5vw, 72px);
    line-height: .95;
    letter-spacing: -.02em
}

.form-intro h2 em {
    font-style: italic;
    color: var(--tide)
}

.form-intro p {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 44ch
}

.form-intro .quote {
    margin-top: 40px;
    padding: 24px;
    border-left: 2px solid var(--tide);
    font-family: var(--f-display);
    font-weight: 300;
    font-style: italic;
    font-size: 24px;
    line-height: 1.3;
    color: var(--ink)
}

.form-intro .quote cite {
    display: block;
    margin-top: 12px;
    font: 500 11px/1 var(--f-mono);
    font-style: normal;
    letter-spacing: .12em;
    color: var(--mute);
    text-transform: uppercase
}

.form {
    position: sticky;
    top: 110px;
    align-self: start;
    padding: 32px;
    border: 1px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--bone-2)
}

.form h3 {
    font-family: var(--f-display);
    font-weight: 300;
    font-style: italic;
    font-size: 28px;
    margin-bottom: 6px
}

.form .stepn {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    margin-bottom: 24px
}

.fld {
    padding: 14px 0;
    border-bottom: 1px solid var(--line)
}

.fld label {
    display: block;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    margin-bottom: 6px
}

.fld input,
.fld textarea,
.fld select {
    width: 100%;
    font-size: 15px;
    background: transparent;
    padding: 4px 0
}

.fld textarea {
    resize: vertical;
    min-height: 40px;
    font-family: var(--f-body)
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

/* date grid */
.cal {
    margin-top: 14px
}

.cal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase
}

.cal-head .m {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 20px;
    text-transform: none;
    letter-spacing: 0
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px
}

.cal-grid .dn {
    text-align: center;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .1em;
    color: var(--mute);
    padding: 6px 0
}

.cal-grid .d {
    aspect-ratio: 1/1;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 12px;
    transition: all .25s;
    cursor: none;
    position: relative
}

.cal-grid .d:hover {
    background: var(--bone)
}

.cal-grid .d.muted {
    color: var(--line)
}

/* Booking confirmation. Was an inline style on a JS-toggled div; it is a
   server-side flash now, so it survives a reload and works without
   JavaScript. */
/* Honeypot field. Positioned off-canvas rather than display:none — some
   bots skip fields that are display:none, which defeats the point. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.booking-sent {
    margin-top: 14px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--tide);
    text-transform: uppercase;
}

/* Spacing the "tell us about the shoot" field used to carry inline. */
.form .cal-note {
    margin-top: 8px;
}

.cal-grid .d.on {
    background: var(--ink);
    color: var(--bone)
}

.cal-grid .d.today::after {
    content: "";
    position: absolute;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tide)
}

.submit {
    width: 100%;
    margin-top: 24px;
    padding: 18px;
    background: var(--ink);
    color: var(--bone);
    border-radius: 100px;
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background .3s
}

.submit:hover {
    background: var(--tide)
}

.est {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px;
    background: var(--ink);
    color: var(--bone);
    border-radius: 12px
}

.est .k {
    font: 500 10px/1.4 var(--f-mono);
    letter-spacing: .14em;
    color: var(--tide-2);
    text-transform: uppercase
}

.est .v {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 28px;
    font-weight: 300
}

/* process */
.process {
    padding: 80px 32px;
    background: var(--ink);
    color: var(--bone);
    margin: 40px 32px;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden
}

.process::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(122, 153, 150, .25), transparent 60%)
}

.process h2 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(40px, 5vw, 72px);
    line-height: .95;
    letter-spacing: -.02em;
    position: relative;
    max-width: 20ch
}

.process h2 em {
    font-style: italic
}

.proc-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
    position: relative
}

.ps {
    padding: 24px;
    border: 1px solid rgba(243, 239, 231, .15);
    border-radius: 18px;
    position: relative;
    transition: background .4s
}

.ps:hover {
    background: rgba(243, 239, 231, .05)
}

.ps .n {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--tide-2);
    text-transform: uppercase;
    margin-bottom: 30px
}

.ps h4 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.01em
}

.ps h4 em {
    font-style: italic
}

.ps p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(243, 239, 231, .7);
    margin-top: 12px
}

/* faq */
.faq {
    padding: 80px 32px;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px
}

.faq h2 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(44px, 5vw, 72px);
    line-height: .95;
    letter-spacing: -.02em
}

.faq h2 em {
    font-style: italic;
    color: var(--tide)
}

.q {
    border-top: 1px solid var(--line);
    padding: 20px 0;
    cursor: none
}

.q:last-child {
    border-bottom: 1px solid var(--line)
}

.q-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--f-display);
    font-weight: 400;
    font-size: 22px
}

.q-head .plus {
    font-weight: 300;
    font-size: 28px;
    transition: transform .4s var(--ease)
}

.q.on .q-head .plus {
    transform: rotate(45deg)
}

.q-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s var(--ease);
    color: var(--ink-soft);
    line-height: 1.6
}

.q.on .q-body {
    max-height: 260px;
    padding-top: 12px
}

@media (max-width:860px) {
    .bh {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 90px 18px 24px
    }

    .bh h1 {
        font-size: clamp(48px, 11vw, 88px)
    }

    .types {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px 18px;
        gap: 14px
    }

    .form-wrap,
    .faq {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 18px
    }

    .form {
        position: static;
        padding: 22px
    }

    .proc-steps {
        grid-template-columns: 1fr 1fr;
        padding: 20px 18px;
        gap: 14px
    }

    .proc {
        padding: 28px 18px
    }
}

@media (max-width:520px) {
    .bh {
        padding: 80px 14px 20px
    }

    .bh h1 {
        font-size: clamp(40px, 12vw, 68px)
    }

    .types {
        grid-template-columns: 1fr;
        padding: 18px 14px
    }

    .proc-steps {
        grid-template-columns: 1fr;
        padding: 18px 14px
    }

    .form {
        padding: 18px
    }
}

/* =============================================================
   CHECKOUT PAGE (checkout.html)
   ============================================================= */
.co {
    padding: 110px 32px 40px;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 40px
}

.co-main h1 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(48px, 6vw, 88px);
    line-height: .95;
    letter-spacing: -.02em
}

.co-main h1 em {
    font-style: italic;
    color: var(--tide)
}

.co-main .lede {
    font-size: 14px;
    line-height: 1.5;
    color: var(--mute);
    margin-top: 10px;
    max-width: 50ch
}

/* stepper */
.steps {
    display: flex;
    gap: 24px;
    margin-top: 40px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line)
}

.step {
    display: flex;
    gap: 10px;
    align-items: center;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
    transition: color .3s
}

.step .n {
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px
}

.step.on {
    color: var(--ink)
}

.step.on .n {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink)
}

.step.done .n {
    background: var(--tide);
    color: var(--bone);
    border-color: var(--tide)
}

/* form */
.panel {
    margin-top: 28px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .3)
}

.panel h3 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 24px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.panel h3 em {
    font-style: italic;
    color: var(--tide)
}

.panel h3 .n {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute)
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    position: relative
}

.field label {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase
}

.field input,
.field select,
.field textarea {
    font-size: 15px;
    color: var(--ink);
    padding: 4px 0;
    background: transparent
}

.field input::placeholder {
    color: var(--mute)
}

.field textarea {
    resize: vertical;
    min-height: 40px;
    font-family: var(--f-body)
}

/* shipping options */
.ship-opts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px
}

.ship {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: none;
    transition: all .3s
}

.ship:hover {
    border-color: var(--ink)
}

.ship.on {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bone)
}

.ship .radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid currentColor;
    position: relative
}

.ship.on .radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: currentColor
}

.ship .name {
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 400
}

.ship .name em {
    font-style: italic
}

.ship .d {
    font: 500 10px/1.4 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
    margin-top: 4px
}

.ship .p {
    font: 500 13px/1 var(--f-mono);
    letter-spacing: .1em
}

/* payment tabs */
.tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px
}

.tab {
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 100px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: all .3s;
    flex: 1;
    text-align: center
}

.tab.on {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink)
}

/* summary */
.summary {
    position: sticky;
    top: 100px;
    align-self: start;
    border: 1px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: 26px;
    background: var(--ink);
    color: var(--bone)
}

.summary h3 {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: 26px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.summary h3 .lbl {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--tide-2);
    font-style: normal
}

.line-item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(243, 239, 231, .15);
    align-items: center
}

.line-item .th {
    width: 60px;
    aspect-ratio: 1/1;
    border-radius: 10px;
    overflow: hidden
}

.line-item .n {
    font-family: var(--f-display);
    font-size: 16px
}

.line-item .v {
    font: 500 10px/1.4 var(--f-mono);
    letter-spacing: .1em;
    color: rgba(243, 239, 231, .6);
    text-transform: uppercase;
    margin-top: 3px
}

.line-item .p {
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .08em
}

.promo {
    display: flex;
    gap: 8px;
    margin-top: 18px
}

.promo input {
    flex: 1;
    padding: 12px 14px;
    background: rgba(243, 239, 231, .08);
    color: var(--bone);
    border-radius: 100px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .12em
}

.promo input::placeholder {
    color: rgba(243, 239, 231, .4)
}

.promo button {
    padding: 0 18px;
    background: var(--bone);
    color: var(--ink);
    border-radius: 100px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase
}

.totals {
    margin-top: 18px
}

.totals .row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font: 500 12px/1.4 var(--f-mono);
    letter-spacing: .1em;
    color: rgba(243, 239, 231, .85)
}

.totals .row.grand {
    border-top: 1px solid rgba(243, 239, 231, .2);
    padding-top: 14px;
    margin-top: 10px;
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: 28px;
    letter-spacing: 0;
    color: var(--bone);
    text-transform: none
}

.totals .row.grand .v {
    font-family: var(--f-display)
}

.place-order {
    width: 100%;
    margin-top: 22px;
    padding: 18px;
    background: var(--tide);
    color: var(--bone);
    border-radius: 100px;
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background .3s
}

.place-order:hover {
    background: var(--bone);
    color: var(--ink)
}

.assurance {
    margin-top: 14px;
    font: 500 10px/1.5 var(--f-mono);
    letter-spacing: .1em;
    color: rgba(243, 239, 231, .5);
    text-transform: uppercase;
    text-align: center
}

/* empty state */
.empty {
    padding: 120px 32px;
    text-align: center
}

.empty h2 {
    font-family: var(--f-display);
    font-weight: 300;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    letter-spacing: -.02em
}

.empty p {
    color: var(--mute);
    margin-top: 16px;
    font-size: 15px
}

.empty a {
    margin-top: 30px;
    display: inline-flex
}

@media (max-width:860px) {
    .co {
        grid-template-columns: 1fr;
        padding: 90px 18px 30px;
        gap: 24px
    }

    .summary {
        position: static
    }

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

    .co-main h1 {
        font-size: clamp(40px, 10vw, 68px)
    }

    .steps {
        gap: 14px;
        flex-wrap: wrap;
        font-size: 10px
    }

    .step {
        font-size: 10px
    }

    .panel {
        padding: 22px 18px
    }

    .summary {
        padding: 22px 18px
    }

    .cta-pay {
        width: 100%
    }
}

@media (max-width:520px) {
    .co {
        padding: 80px 14px 24px
    }

    .steps {
        gap: 10px
    }

    .step .n {
        width: 22px;
        height: 22px
    }
}

/* =============================================================
   CMS / ADMIN PAGE (cms.html) — scoped under body.cms-page
   ============================================================= */
body.cms-page {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: var(--bone);
    cursor: auto;
    padding: 0;
    max-width: none;
    margin: 0;
    font-family: var(--f-mono)
}

.cms-page button,
.cms-page a,
.cms-page input,
.cms-page textarea,
.cms-page select {
    cursor: auto
}

/* sidebar — a bone field, per the Part 2 spec. Was ink. Everything in here
   was light-on-dark and had to invert together; a partial inversion leaves
   bone text on a bone field. */
.cms-page .side {
    background: var(--bone);
    color: var(--ink);
    border-right: 1px solid var(--line);
    padding: 26px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 0;
    height: 100vh
}

.cms-page .side .brand-s {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-mono);
    font-style: italic;
    font-size: 18px
}

.cms-page .side .brand-s .mk {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tide)
}

.cms-page .side .tag {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .16em;
    color: var(--mute-strong);
    text-transform: uppercase;
    padding-top: 4px;
    border-top: 1px dashed var(--line);
    margin-top: 4px
}

.cms-page .side nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px
}

.cms-page .side nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: 12px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute-strong);
    transition: all .3s
}

.cms-page .side nav a:hover {
    background: rgba(20, 22, 26, .04);
    color: var(--ink)
}

.cms-page .side nav a.on {
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow-sm)
}

/* Count badge. The rule existed for the dark rail and was never rendered;
   opacity .6 on bone is washed out, so it becomes a tinted pill instead. */
.cms-page .side nav a .c {
    font: 500 10px/1 var(--f-mono);
    padding: 3px 7px;
    border-radius: 20px;
    background: rgba(20, 22, 26, .06);
    color: var(--mute-strong)
}

.cms-page .side nav a.on .c {
    background: rgba(12, 85, 110, .10);
    color: var(--tide)
}

.cms-page .side .divider {
    height: 1px;
    background: var(--line);
    margin: 8px 0
}

.cms-page .side .user {
    margin-top: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    border-radius: 14px
}

.cms-page .cms-site-link {
    margin-top: auto;
    margin-bottom: 10px;
    padding: 8px 12px;
    color: var(--tide);
    font: 500 10px/1.3 var(--f-mono);
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
}

.cms-page .cms-site-link + .user {
    margin-top: 0;
}

.cms-page .side .user .av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7a9996, #4a6d6a)
}

.cms-page .side .user .nm {
    font-family: var(--f-mono);
    font-style: italic;
    font-size: 16px;
    font-weight: 400
}

/* --tide-2 (#5291AA) was legible on ink and is not on bone. */
.cms-page .side .user .rl {
    font: 500 9px/1.3 var(--f-mono);
    letter-spacing: .12em;
    color: var(--tide);
    text-transform: uppercase;
    margin-top: 2px
}

/* main */
.cms-page .main {
    padding: 26px 36px 40px;
    min-width: 0
}

.cms-page .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
    gap: 20px
}

.cms-page .topbar .crumbs {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    display: flex;
    gap: 10px;
    align-items: center
}

.cms-page .topbar .crumbs .cur {
    color: var(--ink)
}

.cms-page .topbar .search {
    flex: 1;
    max-width: 420px;
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: var(--bone-2);
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 11px/1 var(--f-mono);
    color: var(--mute);
    letter-spacing: .1em;
    text-transform: uppercase
}

.cms-page .topbar .search input {
    background: transparent;
    flex: 1;
    font: inherit;
    color: var(--ink)
}

.cms-page .topbar .tools {
    display: flex;
    gap: 8px;
    align-items: center
}

.cms-page .bell {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    position: relative
}

.cms-page .bell::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tide)
}

/* page head */
.cms-page .ph-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px
}

.cms-page .ph-head h1 {
    font-family: var(--f-mono);
    font-weight: 300;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -.02em
}

.cms-page .ph-head h1 em {
    font-style: italic;
    color: var(--tide)
}

.cms-page .ph-head .sub {
    font: 500 11px/1.5 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    margin-top: 6px
}

.cms-page .ph-head .actions {
    display: flex;
    gap: 8px
}

/* stat cards */
.cms-page .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 32px
}

.cms-page .stat-card {
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--card);
    border: 0;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease)
}

.cms-page .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md)
}

.cms-page .stat-card.hero {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink);
    grid-column: span 1
}

.cms-page .stat-card .lbl {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute)
}

.cms-page .stat-card.hero .lbl {
    color: var(--tide-2)
}

.cms-page .stat-card .v {
    font-family: var(--f-mono);
    font-weight: 300;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -.02em;
    margin-top: 16px
}

.cms-page .stat-card .v em {
    font-style: italic
}

/* The line under a stat's numeral. Replaces .delta, which is not rendered
   anywhere: a delta needs a prior period to compare against and there is no
   order history yet. .delta and .spark are left in place, unused, because the
   spec says the layout accommodates Earnings when slice B lands. */
.cms-page .stat-card .stat-foot {
    margin-top: 10px;
    font: 500 10px/1.4 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute-strong)
}

.cms-page .stat-card .stat-foot a {
    color: var(--warn);
    border-bottom: 1px solid currentColor
}

.cms-page .stat-card .delta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute)
}

.cms-page .stat-card.hero .delta {
    color: rgba(243, 239, 231, .5)
}

.cms-page .stat-card .delta .up {
    color: var(--tide)
}

.cms-page .stat-card.hero .delta .up {
    color: var(--tide-2)
}

.cms-page .stat-card .spark {
    height: 36px;
    margin-top: 10px;
    display: flex;
    gap: 3px;
    align-items: end
}

.cms-page .stat-card .spark i {
    flex: 1;
    background: currentColor;
    opacity: .3;
    border-radius: 2px
}

/* tabs */
.cms-page .tabs-row {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto
}

.cms-page .tab {
    padding: 14px 18px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: all .3s
}

.cms-page .tab.on {
    color: var(--ink);
    border-color: var(--ink)
}

.cms-page .tab:hover {
    color: var(--ink)
}

/* table */
.cms-page .table-wrap {
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--card);
    box-shadow: var(--shadow-sm)
}

.cms-page .table-head {
    display: grid;
    grid-template-columns: 30px 60px 2fr 1fr 1fr .8fr .8fr .8fr 1fr;
    gap: 16px;
    padding: 14px 20px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
    background: var(--bone);
    border-bottom: 1px solid var(--line)
}

.cms-page .trow {
    display: grid;
    grid-template-columns: 30px 60px 2fr 1fr 1fr .8fr .8fr .8fr 1fr;
    gap: 16px;
    padding: 14px 20px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    transition: background .25s
}

.cms-page .trow:last-child {
    border-bottom: 0
}

/* Was var(--bone), which read as a lift against a --bone-2 row. Now that rows
   sit on --card, --bone is DARKER than the row and the hover read as a smudge.
   A translucent ink wash works against any surface. */
.cms-page .trow:hover {
    background: rgba(20, 22, 26, .025)
}

.cms-page .trow input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--tide)
}

/* Board cards are not table rows: without them here the thumbnail collapsed
   to zero and the status pill rendered as bare text. */
.cms-page .trow .th,
.cms-page .board-card .th {
    width: 44px;
    aspect-ratio: 1/1;
    border-radius: 8px;
    overflow: hidden;
    position: relative
}

.cms-page .trow .th .im,
.cms-page .board-card .th .im {
    position: absolute;
    inset: 0
}

.cms-page .trow .nm {
    font-family: var(--f-mono);
    font-size: 18px
}

.cms-page .trow .nm em {
    font-style: italic;
    color: var(--tide)
}

.cms-page .trow .nm .sku {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .1em;
    color: var(--mute);
    text-transform: uppercase;
    margin-top: 4px;
    font-family: var(--f-mono)
}

.cms-page .trow .cat {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 100px;
    justify-self: start
}

.cms-page .trow .cat.tees {
    border-color: var(--tide);
    color: var(--tide)
}

.cms-page .trow .price {
    font: 500 13px/1 var(--f-mono);
    letter-spacing: .05em
}

.cms-page .trow .stock {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 500 11px/1 var(--f-mono)
}

.cms-page .trow .stock .bar {
    width: 60px;
    height: 4px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden
}

.cms-page .trow .stock .bar i {
    display: block;
    height: 100%;
    background: var(--tide)
}

.cms-page .trow .stock.low .bar i {
    background: var(--warn)
}

.cms-page .trow .stock.oos {
    color: var(--mute)
}

.cms-page .trow .status,
.cms-page .board-card .status,
.cms-page .recent-row .status,
.cms-page .fin-table .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase
}

.cms-page .trow .status .dot,
.cms-page .board-card .status .dot,
.cms-page .recent-row .status .dot,
.cms-page .fin-table .status .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tide)
}

.cms-page .status.draft .dot {
    background: var(--warn)
}

.cms-page .status.archived {
    color: var(--mute)
}

.cms-page .status.archived .dot {
    background: var(--mute)
}

/* Invoice states. draft already reads amber above; sent is in motion and void
   is closed, matching how shipped and cancelled read on an order. */
.cms-page .status.sent .dot {
    background: var(--tide-2)
}

.cms-page .status.void {
    color: var(--mute-strong)
}

.cms-page .status.void .dot {
    background: var(--mute)
}

.cms-page .trow .views {
    font: 500 11px/1 var(--f-mono);
    color: var(--mute)
}

.cms-page .trow .actions {
    display: flex;
    gap: 4px;
    justify-self: end
}

.cms-page .trow .actions button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    transition: all .3s
}

.cms-page .trow .actions button:hover {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink)
}

/* split */
.cms-page .split {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    margin-top: 28px
}

/* Small muted note inside a drawer — "No images yet", "Save the post first",
   "Leave blank to use the product price". .stock-grid-hint was a byte-identical
   copy living in the products drawer's scoped block; Part 2 brought that block
   into this file and merged the two, as its comment promised. */
.cms-page .drawer-hint,
/* A second .drawer-body butted against the one above it — the image section
   under the post form — should not double the vertical padding. */
.cms-page .drawer-body-tight {
    padding-top: 0;
}

/* -------------------------------------------------------------
   Per-screen table grids.

   The shared .table-head/.trow template is cut for the nine-column products
   table. Every other screen has fewer columns, and a grid does not adapt —
   the cells simply land in the first N tracks, which are sized for something
   else entirely. On portfolio that put the thumbnail in the 30px checkbox
   track and the title in the 60px image track. Products keeps the shared
   default; everyone else names their own.

   A test asserts track count equals rendered column count for every table on
   every admin screen, so adding a column without widening the template fails
   the suite rather than quietly shifting a row.
   ------------------------------------------------------------- */

/* Chapter · photos · posts · order · actions */
.cms-page .table-wrap.chapters .table-head,
.cms-page .table-wrap.chapters .trow {
    grid-template-columns: 2fr .6fr .6fr .8fr .8fr;
}

/* Cart drawer line items, rendered server-side. */
.cart-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.cart-item .ci-name {
    font: 400 15px/1.3 var(--f-body);
}

.cart-item .ci-variant {
    font: 500 10px/1.4 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 4px;
}

.cart-item .ci-low {
    font: 500 10px/1.4 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--warn);
    margin-top: 4px;
}

.cart-item .ci-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.cart-item .ci-price {
    font: 500 14px/1 var(--f-mono);
}

.cart-item .ci-qty {
    display: flex;
    gap: 4px;
}

.cart-item .ci-qty input {
    width: 46px;
    padding: 4px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: 500 12px/1 var(--f-mono);
}

.cart-item .ci-qty button,
.cart-item .ci-remove {
    font: 500 9px/1 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
    text-decoration: underline;
}

/* Checkout: bank transfer details and the payment slip. */
.page-checkout .co-banks {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.page-checkout .co-bank {
    flex: 1;
    min-width: 200px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font: 500 12px/1.7 var(--f-mono);
}

.page-checkout .co-bank-cur {
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
}

.page-checkout .co-bank-no {
    font-size: 14px;
    color: var(--ink);
}

.page-checkout .co-pay-intro,
.page-checkout .co-terms {
    font: 400 13px/1.6 var(--f-body);
    color: var(--ink-soft);
    margin: 8px 0;
}

.page-checkout .co-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.page-checkout .co-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font: 500 12px/1.5 var(--f-mono);
}



.cms-page .sales {
    margin-top: 12px;
}

.cms-page .sales-head,
.cms-page .sales-row {
    display: grid;
    grid-template-columns: 2fr .6fr .9fr .9fr;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
}

.cms-page .sales-head {
    border-bottom: 1px solid var(--line);
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute-strong);
}

.cms-page .sales-row + .sales-row {
    border-top: 1px solid var(--line);
}

.cms-page .sales-name {
    font: 400 14px/1.3 var(--f-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-page .sales-flag {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--warn);
    color: var(--paper);
    font: 500 9px/1.6 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cms-page .recent {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
}

.cms-page .recent-row {
    display: grid;
    grid-template-columns: 1.4fr .9fr .6fr;
    grid-template-areas: "who num total" "status status status";
    gap: 4px 10px;
    padding: 10px;
    border-radius: 10px;
    transition: background .2s var(--ease);
}

.cms-page .recent-row:hover {
    background: var(--bone-2);
}

.cms-page .recent-who {
    grid-area: who;
    font: 400 13px/1.3 var(--f-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-page .recent-num {
    grid-area: num;
    font: 500 10px/1.5 var(--f-mono);
    color: var(--mute-strong);
}

.cms-page .recent-total {
    grid-area: total;
    text-align: right;
    font: 500 12px/1.3 var(--f-mono);
}

.cms-page .recent-row .status {
    grid-area: status;
}

.cms-page .recent-empty,
.cms-page .dash-note {
    font: 400 13px/1.6 var(--f-body);
    color: var(--mute-strong);
    margin-top: 12px;
}

.cms-page .dash-note a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cms-page .chart-sizes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.cms-page .chart-size {
    display: grid;
    grid-template-columns: auto 60px 1fr 100px;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.cms-page .chart-size:hover {
    background: var(--bone-2);
}

.cms-page .chart-size-label {
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .1em;
}

.cms-page .chart-size-dims {
    font: 400 11px/1.4 var(--f-body);
    color: var(--mute-strong);
}

/* The product wizard's step rail. */
.cms-page .wiz-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.cms-page .wiz-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute-strong);
}

.cms-page .wiz-step.on {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.cms-page .wiz-step-off {
    opacity: .45;
}

.cms-page .wiz-num {
    font: 500 10px/1 var(--f-mono);
    opacity: .7;
}

.cms-page .wiz-panel {
    margin-bottom: 18px;
}

.cms-page .wiz-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.cms-page .wiz-summary {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 14px;
    margin: 14px 0 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bone-2);
}

.cms-page .wiz-summary-shots {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cms-page .wiz-shot {
    width: 56px;
    aspect-ratio: 1/1;
    border-radius: 8px;
    border: 1px solid var(--line);
    background-color: var(--card);
    background-size: cover;
    background-position: center;
}

.cms-page .wiz-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    flex: 1;
    min-width: 0;
}

.cms-page .wiz-facts dt {
    font: 500 10px/1.4 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute-strong);
    margin-bottom: 2px;
}

.cms-page .wiz-facts dd {
    font: 400 14px/1.4 var(--f-body);
}

.cms-page .size-stock {
    width: 100%;
    border-collapse: collapse;
}

.cms-page .size-stock th {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute-strong);
}

.cms-page .size-stock td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.cms-page .size-stock tr:last-child td {
    border-bottom: 0;
}

.cms-page .size-stock .col-tick {
    width: 40px;
}

.cms-page .size-stock .col-right {
    text-align: right;
}

.cms-page .size-label {
    display: block;
    font: 500 12px/1.3 var(--f-mono);
    letter-spacing: .08em;
}

.cms-page .size-dims {
    display: block;
    font: 400 11px/1.4 var(--f-body);
    color: var(--mute-strong);
}

.cms-page .size-stock .sg-price,
.cms-page .qty-cell {
    width: 92px;
}

.cms-page .qty-cell {
    width: 72px;
    text-align: right;
}

.cms-page .qty-pending {
    font: 400 13px/1 var(--f-body);
    color: var(--mute-strong);
}

.cms-page .wiz-stock {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.cms-page .colour-photo {
    flex: 0 0 34px;
    width: 34px;
    aspect-ratio: 1/1;
    border-radius: 6px;
    border: 1px solid var(--line);
    background-color: var(--bone-2);
    background-size: cover;
    background-position: center;
}

.cms-page .wiz-danger {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.cms-page .wiz-saved {
    margin-left: auto;
    font: 400 12px/1.5 var(--f-body);
    color: var(--mute-strong);
}

/* Settings → Product setup: list rows, delete links, add row. */
.cms-page .setup-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.cms-page .setup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cms-page .setup-row input {
    flex: 1 1 120px;
    min-width: 0;
}

.cms-page .setup-order {
    flex: 0 0 74px;
}

.cms-page .setup-slug {
    font: 500 11px/1 var(--f-mono);
    color: var(--mute-strong);
}

.cms-page .setup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.cms-page .setup-add {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.cms-page .setup-add input {
    flex: 1 1 120px;
    min-width: 0;
}

.cms-page .settings-stack h4 {
    font: 400 15px/1.3 var(--f-display);
    margin: 18px 0 8px;
}

/* Dashboard: chart and products on the left, recent activity on the right. */
.cms-page .dash-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

@media (min-width: 1100px) {
    .cms-page .dash-cols {
        grid-template-columns: 1.9fr 1fr;
    }
}

.cms-page .dash-main,
.cms-page .dash-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.cms-page .chart {
    width: 100%;
    height: 120px;
    margin-top: 14px;
    display: block;
}

.cms-page .chart-bar {
    fill: var(--tide);
}

.cms-page .chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute-strong);
}

.cms-page .chart-empty {
    margin-top: 14px;
    font: 400 14px/1.6 var(--f-body);
    color: var(--mute-strong);
}

/* Orders board: one column per stage, cards dragged between them. */
.cms-page .board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 16px;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 8px;
}

.cms-page .board-col {
    background: var(--bone-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    min-width: 0;
}

.cms-page .board-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 2px;
}

.cms-page .board-title {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
}

.cms-page .board-count {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line);
    font: 500 10px/1.6 var(--f-mono);
}

/* Min-height so an empty column is still a target you can hit. */
.cms-page .board-drop {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
    border-radius: 10px;
    transition: background .2s var(--ease);
}

.cms-page .board-drop.is-over {
    background: var(--bone);
    outline: 1px dashed var(--line);
    outline-offset: 2px;
}

.cms-page .board-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    cursor: grab;
    transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}

.cms-page .board-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.cms-page .board-card.is-dragging {
    opacity: .5;
    cursor: grabbing;
}

.cms-page .board-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cms-page .board-card-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cms-page .board-card-name {
    font: 500 13px/1.3 var(--f-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-page .board-card-item {
    font: 400 11px/1.3 var(--f-body);
    color: var(--mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-page .board-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cms-page .board-card-num,
.cms-page .board-card-total {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .08em;
    color: var(--mute);
}

.cms-page .board-card-total {
    margin-left: auto;
    color: var(--ink);
}

/* Covers the card so clicking anywhere opens the drawer; the drag handler
   sits on the card itself and is unaffected. */
.cms-page .board-card-open {
    position: absolute;
    inset: 0;
    border: 0;
    background: none;
    border-radius: inherit;
    cursor: pointer;
}

.cms-page .board-empty {
    font: 400 12px/1.5 var(--f-body);
    color: var(--mute);
    padding: 10px 2px;
}

.cms-page .board-error {
    margin-top: 14px;
    font: 400 13px/1.5 var(--f-body);
    color: var(--warn);
}

/* Stage divider inside the orders table. */
.cms-page .group-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 8px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
}

.cms-page .group-row .k {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bone-2);
    color: var(--ink);
}

/* The stage label spans the table, so it needs its own rule line. */
.cms-page .group-row::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* Inside .th, which is overflow:hidden — negative offsets would clip. */
.cms-page .thumb-more {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 1;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bone);
    font: 500 9px/1.4 var(--f-mono);
}

.cms-page .orders-search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cms-page .orders-search input {
    width: 260px;
    max-width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    font: 400 13px/1.2 var(--f-body);
}

.cms-page .orders-search input:focus {
    outline: none;
    border-color: var(--ink);
}

.cms-page .orders-section {
    margin-bottom: 28px;
}

.cms-page .orders-section h2 {
    font: 400 17px/1.3 var(--f-display);
    margin-bottom: 10px;
}

.cms-page .orders-section h2 .k {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .12em;
    color: var(--mute);
}

.cms-page .orders-none {
    font: 400 14px/1.6 var(--f-body);
    color: var(--mute);
    margin-bottom: 20px;
}

/* "Already booked?" panel on /book. */
.page-book .track-wrap {
    padding: 0 32px 60px;
}

.page-book .track {
    max-width: 680px;
    margin: 0 auto;
    padding: 28px 28px 32px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
}

.page-book .track h3 {
    font: 400 22px/1.2 var(--f-display);
    margin-bottom: 6px;
}

.page-book .track-lede {
    font: 400 14px/1.6 var(--f-body);
    color: var(--ink-soft);
    margin-bottom: 18px;
}

.page-book .track-miss {
    margin-top: 16px;
    font: 400 14px/1.6 var(--f-body);
    color: var(--warn);
}

.page-book .track-card {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bone);
}

.page-book .track-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.page-book .track-ref {
    font: 500 13px/1 var(--f-mono);
    letter-spacing: .12em;
}

.page-book .track-status {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bone-2);
    color: var(--ink);
}

.page-book .track-msg {
    font: 400 15px/1.6 var(--f-body);
    margin-bottom: 14px;
}

.page-book .track-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
}

.page-book .track-facts dt {
    font: 500 10px/1.4 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 2px;
}

.page-book .track-facts dd {
    font: 400 14px/1.4 var(--f-body);
}

/* Payment and terms disclosure on the product page. */
.page-product .pd-legal {
    margin-top: 24px;
    border-top: 1px solid var(--line);
}

.page-product .pd-fold {
    border-bottom: 1px solid var(--line);
}

.page-product .pd-fold summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 0;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-product .pd-fold summary::-webkit-details-marker {
    display: none;
}

.page-product .pd-fold summary::after {
    content: '+';
    font: 400 15px/1 var(--f-mono);
    color: var(--mute-strong);
}

.page-product .pd-fold[open] summary::after {
    content: '–';
}

.page-product .pd-fold-body {
    padding-bottom: 16px;
    font: 400 14px/1.7 var(--f-body);
    color: var(--ink-soft);
}

.page-product .pd-fold-body p {
    margin-bottom: 10px;
}

.page-product .pd-fold-body h2,
.page-product .pd-fold-body h3 {
    font: 400 16px/1.3 var(--f-display);
    margin: 14px 0 6px;
    color: var(--ink);
}

.page-product .pd-fold-body ul,
.page-product .pd-fold-body ol {
    margin: 0 0 10px 18px;
}

.page-product .pd-fold-link {
    display: inline-block;
    margin-top: 6px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    padding-bottom: 3px;
}

/* Confirmation block at the top of the tracking page. */
.page-order .ot-placed {
    margin-bottom: 32px;
    padding: 24px;
    border: 1px solid var(--ink);
    border-radius: 16px;
    background: var(--card);
}

.page-order .ot-placed h2 {
    font: 400 24px/1.2 var(--f-display);
    margin-bottom: 8px;
}

.page-order .ot-placed p {
    font: 400 14px/1.7 var(--f-body);
    color: var(--ink-soft);
}

.page-order .ot-keep {
    margin-top: 18px;
}

.page-order .ot-keep-label {
    display: block;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute-strong);
    margin-bottom: 8px;
}

.page-order .ot-keep-url {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    font: 400 12px/1.4 var(--f-mono);
}

.page-order .ot-keep-note {
    margin-top: 10px;
    font: 400 12px/1.5 var(--f-body);
    color: var(--mute-strong);
}

/* Item rows carry their photo. */
.page-order .ot-item-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-order .ot-thumb {
    flex: 0 0 44px;
    width: 44px;
    aspect-ratio: 1/1;
    border-radius: 8px;
    background-image: var(--tile);
    background-size: cover;
    background-position: center;
}

/* The refusal page. */
.page-order .ot-status.ot-failed {
    background: var(--warn);
    color: var(--bone);
}

.page-order .ot-lede {
    font: 400 15px/1.7 var(--f-body);
    margin-bottom: 28px;
}

.page-order .ot-sub {
    font: 400 18px/1.3 var(--f-display);
    margin: 24px 0 8px;
}

.page-order .ot-quote ul {
    margin: 0 0 16px 18px;
    font: 400 14px/1.8 var(--f-body);
    color: var(--ink-soft);
}

.page-order .ot-mail {
    display: inline-block;
    font: 500 13px/1 var(--f-mono);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 3px;
}

.page-order .ot-phone,
.page-order .ot-again {
    margin-top: 14px;
    font: 400 14px/1.7 var(--f-body);
    color: var(--ink-soft);
}

.page-order .ot-again a {
    border-bottom: 1px solid var(--line);
}

/* Long-form order tracking page. */
.page-order .order-track {
    /* .nav is position:fixed, so a top margin puts the heading underneath it
       and the centred brand mark lands on top of the order number. Every
       other page clears it with padding in the 110-130px band; this matches. */
    max-width: 744px;
    margin: 0 auto;
    padding: 130px 32px 80px;
}

.page-order .ot-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.page-order .ot-head h1 {
    font: 300 clamp(30px, 4vw, 44px)/1.1 var(--f-display);
}

.page-order .ot-status {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bone-2);
    color: var(--ink);
}

.page-order .ot-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.page-order .ot-variant {
    font: 500 10px/1.4 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 4px;
}

.page-order .ot-total {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    font: 500 15px/1 var(--f-mono);
}

.page-order .ot-ship h2 {
    font: 400 18px/1.3 var(--f-display);
    margin: 24px 0 8px;
}

.page-order .ot-ship p {
    font: 400 14px/1.7 var(--f-body);
    color: var(--ink-soft);
}

/* Add-to-cart row on the product page. */
.page-product .pd-stock {
    margin-top: 18px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--warn);
}

.page-product .pd-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    margin-top: 22px;
}

.page-product .pd-total-sum {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute-strong);
}

.page-product .pd-total-value {
    font: 400 clamp(22px, 3vw, 28px)/1 var(--f-display);
    color: var(--ink);
}

.page-product .pd-add {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    /* 14px, not 22: the total sits directly above and belongs with these
       controls rather than reading as a separate block. */
    margin-top: 14px;
}

.page-product .qty-row {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    /* The base .qty-row carries margin-top: 24px from when it sat on its own
       line. Inside .pd-add — a centred flex row — the MARGIN BOX is what gets
       centred, so that 24px pushed the stepper 12px below the Add to cart
       button and stretched the row to 70px for two 46px controls. */
    margin-top: 0;
}

.page-product .qty-step {
    width: 38px;
    height: 44px;
    font-size: 16px;
    color: var(--ink);
    background: none;
}

.page-product .qty-row input {
    width: 46px;
    height: 44px;
    text-align: center;
    border: 0;
    background: none;
    font: 500 14px/1 var(--f-mono);
    color: var(--ink);
    -moz-appearance: textfield;
}

.page-product .qty-row input::-webkit-outer-spin-button,
.page-product .qty-row input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-product .add-cart {
    flex: 1;
    min-width: 200px;
    height: 46px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bone);
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.page-product .add-cart:disabled {
    opacity: .4;
}

.page-product .pd-add-error {
    flex-basis: 100%;
    font: 500 11px/1.5 var(--f-mono);
    color: var(--warn);
    margin: 0;
}

/* Long-form legal documents. Wider measure than a blog post, comfortable
   line height, because people scan these rather than read them. */
.page-legal .legal {
    max-width: 760px;
    margin: 40px auto 80px;
}

.page-legal .legal h1 {
    font: 300 clamp(34px, 5vw, 54px)/1.05 var(--f-display);
    margin-bottom: 28px;
}

.page-legal .legal-body {
    font: 400 15px/1.8 var(--f-body);
    color: var(--ink-soft);
}

.page-legal .legal-body h2 {
    font: 400 22px/1.3 var(--f-display);
    color: var(--ink);
    margin: 32px 0 10px;
}

.page-legal .legal-body p,
.page-legal .legal-body ul,
.page-legal .legal-body ol {
    margin-bottom: 14px;
}

.page-legal .legal-body li {
    margin-left: 20px;
    margin-bottom: 6px;
}

/* Intentionally unscoped: the footer is shared by every storefront page and
   there is no .page-* class common to them all. A new selector, not an
   override — verified no .foot-bar a rule existed before. */
.foot-bar a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cms-page .settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.cms-page .settings-wide {
    grid-column: 1 / -1;
}

/* Separates the heading groups stacked inside one settings form. */
.cms-page .settings-subhead {
    margin: 28px 0 12px;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
}

.cms-page .settings-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cms-page .settings-panel label {
    display: block;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute-strong);
    margin-bottom: 6px;
}

.cms-page .settings-panel input,
.cms-page .settings-panel select,
.cms-page .settings-panel textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bone-2);
    font-size: 14px;
    color: var(--ink);
}

.cms-page .settings-panel textarea {
    font: 400 13px/1.6 var(--f-mono);
    resize: vertical;
}

.cms-page .settings-test {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.cms-page .settings-test-ok {
    font: 500 12px/1.5 var(--f-mono);
    color: var(--tide);
}

.cms-page .settings-test-error {
    font: 500 12px/1.5 var(--f-mono);
    color: var(--warn);
}

.cms-page .settings-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 40px;
}

.cms-page .content-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--mute-strong);
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.cms-page .content-form input,
.cms-page .content-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bone-2);
    color: var(--ink);
    font-size: 14px;
}

.cms-page .content-form textarea {
    resize: vertical;
}

.cms-page .content-form > .settings-actions {
    margin: 18px 0 0;
}

.cms-page .content-collection {
    margin-bottom: 22px;
    padding: 0;
    overflow: hidden;
}

.cms-page .collection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
}

.cms-page .collection-head h3 {
    margin-bottom: 4px;
}

.cms-page .collection-head p,
.cms-page .content-row span {
    color: var(--mute-strong);
    font: 400 10px/1.5 var(--f-mono);
}

.cms-page .content-row {
    display: grid;
    grid-template-columns: 56px minmax(180px, 1fr) 74px 62px 44px;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--line);
}

.cms-page .content-row.no-thumb {
    grid-template-columns: minmax(180px, 1fr) 74px 62px 44px;
}

.cms-page .content-row strong,
.cms-page .content-row > div > span {
    display: block;
}

.cms-page .content-row strong {
    margin-bottom: 3px;
    font: 600 13px/1.3 var(--f-body);
}

.cms-page .content-thumb {
    width: 56px;
    height: 56px;
    border-radius: 9px;
    object-fit: cover;
    background: var(--bone-2);
}

.cms-page .content-state {
    color: var(--tide);
}

.cms-page .content-state.off {
    color: var(--mute-strong);
}

.cms-page .content-order {
    width: 58px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bone-2);
}

.cms-page .collection-save {
    display: flex;
    justify-content: flex-end;
    padding: 14px 24px;
}

.cms-page .check-row {
    display: flex !important;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    margin: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.cms-page .check-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0;
}

@media (max-width: 720px) {
    .cms-page .settings-grid {
        grid-template-columns: 1fr;
    }

    .cms-page .settings-wide {
        grid-column: auto;
    }

    .cms-page .content-row,
    .cms-page .content-row.no-thumb {
        grid-template-columns: 48px minmax(0, 1fr) 44px;
    }

    .cms-page .content-row.no-thumb {
        grid-template-columns: minmax(0, 1fr) 44px;
    }

    .cms-page .content-thumb {
        width: 48px;
        height: 48px;
    }

}

/* -------------------------------------------------------------
   Settings workspace — a tide-ledger treatment built from the existing
   Ocean Child type and colour tokens. Sections are grouped by thin rules;
   destinations are choices, never falsely numbered as a sequence.
   ------------------------------------------------------------- */
.cms-page .settings-hub-head h1,
.cms-page .settings-page-head h1 {
    font: 350 clamp(38px, 5vw, 58px)/.98 var(--f-display);
    letter-spacing: -.035em;
}

.cms-page .settings-hub-head h1 em,
.cms-page .settings-page-head h1 em {
    font-weight: 350;
}

.cms-page .settings-page-head {
    align-items: flex-end;
}

.cms-page .settings-page-head .btn-link {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--tide);
}

.cms-page .settings-page-head > .btn {
    flex: 0 0 auto;
}

.cms-page .settings-hub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
}

.cms-page .settings-group {
    min-width: 0;
    padding-top: 14px;
    border-top: 1px solid var(--ink);
}

.cms-page .settings-hub-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.cms-page .settings-hub-group-head h2 {
    font: 400 24px/1.1 var(--f-display);
}

.cms-page .settings-hub-group-head span {
    color: var(--mute-strong);
    font: 500 9px/1 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cms-page .settings-hub-grid {
    display: grid;
    gap: 10px;
}

.cms-page .settings-card.panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 132px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: none;
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.cms-page .settings-card:hover {
    border-color: var(--tide-2);
    background: var(--paper);
}

.cms-page .settings-card:focus-visible,
.cms-page .settings-card:focus-within {
    outline: 3px solid rgba(12, 85, 110, .22);
    outline-offset: 2px;
    border-color: var(--tide);
}

.cms-page .settings-card-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.cms-page .settings-card-copy strong {
    font: 450 21px/1.15 var(--f-display);
}

.cms-page .settings-card-copy > span {
    max-width: 42ch;
    color: var(--ink-soft);
    font: 400 13px/1.55 var(--f-body);
}

.cms-page .settings-card-status {
    margin-top: 7px;
    color: var(--tide);
    font: 500 9px/1.35 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cms-page .settings-card-action {
    color: var(--mute-strong);
    font: 500 9px/1 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cms-page .settings-form-card {
    display: flex;
    width: min(100%, 920px);
    flex-direction: column;
    gap: 22px;
}

.cms-page .settings-form-stack {
    display: flex;
    width: min(100%, 960px);
    flex-direction: column;
    gap: 18px;
}

.cms-page .settings-field-card.panel,
.cms-page .settings-add-card.panel,
.cms-page .settings-diagnostic.panel,
.cms-page .settings-collection-page.panel {
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: none;
}

.cms-page .settings-field-card h2,
.cms-page .settings-add-card h2,
.cms-page .settings-diagnostic h2,
.cms-page .settings-inline-section h2 {
    margin-bottom: 16px;
    font: 430 22px/1.15 var(--f-display);
}

.cms-page .settings-inline-section {
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.cms-page .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 18px;
}

.cms-page .content-form label,
.cms-page .settings-field-card > label {
    display: block;
    margin-bottom: 7px;
    color: var(--mute-strong);
    font: 500 9px/1.25 var(--f-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.cms-page .content-form input,
.cms-page .content-form select,
.cms-page .content-form textarea,
.cms-page .settings-field-card > textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: none;
    background: var(--bone);
    color: var(--ink);
    font: 400 14px/1.45 var(--f-body);
}

.cms-page .content-form textarea,
.cms-page .settings-field-card > textarea {
    resize: vertical;
}

.cms-page .content-form input:focus,
.cms-page .content-form select:focus,
.cms-page .content-form textarea:focus,
.cms-page .settings-field-card > textarea:focus {
    border-color: var(--tide);
    box-shadow: 0 0 0 3px rgba(12, 85, 110, .12);
}

.cms-page .field-help,
.cms-page .field-note,
.cms-page .drawer-hint,
.cms-page .settings-add-card p,
.cms-page .settings-diagnostic p,
.cms-page .settings-document-head p {
    margin-top: 7px;
    color: var(--mute-strong);
    font: 400 11px/1.55 var(--f-mono);
}

.cms-page .field-error {
    margin-top: 6px;
    color: var(--warn);
    font: 500 10px/1.45 var(--f-mono);
}

.cms-page .settings-local-nav {
    display: flex;
    gap: 26px;
    margin: -8px 0 24px;
    border-bottom: 1px solid var(--line);
}

.cms-page .settings-local-nav a {
    position: relative;
    padding: 0 0 12px;
    color: var(--mute-strong);
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cms-page .settings-local-nav a::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: transparent;
}

.cms-page .settings-local-nav a:hover,
.cms-page .settings-local-nav a.is-active {
    color: var(--ink);
}

.cms-page .settings-local-nav a.is-active::after {
    background: var(--tide);
}

.cms-page .settings-local-nav a:focus-visible,
.cms-page .template-token:focus-visible,
.cms-page .preview-sizes button:focus-visible,
.cms-page .content-row-actions button:focus-visible {
    outline: 3px solid rgba(12, 85, 110, .22);
    outline-offset: 3px;
}

.cms-page .settings-actions.settings-savebar,
.cms-page .settings-inline-save.settings-savebar {
    position: sticky;
    bottom: 12px;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 6px 0 0;
    padding: 12px max(14px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    border: 1px solid rgba(217, 211, 198, .92);
    border-radius: 14px;
    background: rgba(243, 239, 231, .94);
    box-shadow: 0 8px 28px rgba(20, 22, 26, .10);
    backdrop-filter: blur(12px);
}

.cms-page .settings-savebar[hidden] {
    display: none;
}

.cms-page .settings-save-state {
    margin-right: auto;
    color: var(--tide);
    font: 500 9px/1.4 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cms-page .settings-diagnostic,
.cms-page .settings-add-card {
    display: flex;
    width: min(100%, 920px);
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 18px;
}

.cms-page .settings-diagnostic h2,
.cms-page .settings-add-card h2 {
    margin-bottom: 3px;
}

.cms-page .settings-document-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.cms-page .mail-template-catalogue {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cms-page .mail-template-card.panel {
    display: flex;
    min-height: 220px;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: none;
}

.cms-page .mail-template-card-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cms-page .mail-template-card-copy strong {
    font: 450 25px/1.08 var(--f-display);
}

.cms-page .mail-template-card-copy > span:not(.mail-template-audience) {
    color: var(--ink-soft);
    font: 400 13px/1.55 var(--f-body);
}

.cms-page .mail-template-card-copy small {
    margin-top: 8px;
    color: var(--mute-strong);
    font: 400 10px/1.5 var(--f-mono);
}

.cms-page .mail-template-audience {
    color: var(--tide);
    font: 500 9px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.cms-page .mail-template-card-actions,
.cms-page .mail-template-layout .actions,
.cms-page .settings-inline-save {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cms-page .mail-template-card-actions .btn {
    margin-left: auto;
}

.cms-page .mail-template-layout {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr);
    align-items: start;
    gap: 20px;
}

.cms-page .mail-template-layout > .panel {
    min-width: 0;
}

.cms-page .mail-template-layout .field + .field {
    margin-top: 17px;
}

.cms-page .mail-template-layout .field > label,
.cms-page .mail-template-layout .field-label {
    display: block;
    margin-bottom: 7px;
    color: var(--mute-strong);
    font: 500 9px/1.2 var(--f-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.cms-page .mail-template-layout .field input,
.cms-page .mail-template-layout .field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: none;
    background: var(--bone);
    color: var(--ink);
    font: 400 14px/1.5 var(--f-body);
}

.cms-page .mail-template-layout .field input:focus,
.cms-page .mail-template-layout .field textarea:focus {
    border-color: var(--tide);
    box-shadow: 0 0 0 3px rgba(12, 85, 110, .12);
}

.cms-page .template-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.cms-page .template-token {
    padding: 7px 9px;
    border: 1px solid rgba(12, 85, 110, .28);
    border-radius: 8px;
    background: rgba(12, 85, 110, .06);
    color: var(--tide);
    font: 500 9px/1 var(--f-mono);
}

.cms-page .mail-preview-panel {
    position: sticky;
    top: 20px;
}

.cms-page .mail-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.cms-page .mail-preview-head strong,
.cms-page .mail-preview-head span {
    display: block;
}

.cms-page .mail-preview-head strong {
    font: 450 22px/1.1 var(--f-display);
}

.cms-page .mail-preview-head span {
    margin-top: 4px;
    color: var(--mute-strong);
    font: 400 9px/1.4 var(--f-mono);
    text-transform: uppercase;
}

.cms-page .preview-sizes {
    display: flex;
    gap: 4px;
}

.cms-page .preview-sizes button {
    padding: 7px 9px;
    border-bottom: 1px solid transparent;
    color: var(--mute-strong);
    font: 500 9px/1 var(--f-mono);
    text-transform: uppercase;
}

.cms-page .preview-sizes button.is-active {
    border-color: var(--tide);
    color: var(--tide);
}

.cms-page .mail-preview-frame {
    width: 100%;
    min-height: 640px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    transition: max-width .2s var(--ease);
}

.cms-page .mail-preview-frame[data-preview-width="mobile"] {
    max-width: 390px;
    margin-inline: auto;
}

.cms-page .mail-preview-frame iframe {
    width: 100%;
    min-height: 640px;
    border: 0;
    background: var(--paper);
}

.cms-page .danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    padding: 18px 20px;
    border: 1px solid rgba(196, 122, 58, .36);
    border-radius: 14px;
}

.cms-page .danger-zone strong,
.cms-page .danger-zone span {
    display: block;
}

.cms-page .danger-zone span {
    margin-top: 4px;
    color: var(--mute-strong);
    font: 400 11px/1.5 var(--f-mono);
}

.cms-page .collection-head h2 {
    margin-bottom: 4px;
    font: 440 24px/1.1 var(--f-display);
}

.cms-page .content-row {
    grid-template-columns: 56px minmax(180px, 1fr) auto 64px minmax(210px, auto);
    gap: 14px;
}

.cms-page .content-row.no-thumb {
    grid-template-columns: minmax(180px, 1fr) auto 64px minmax(210px, auto);
}

.cms-page .content-row-actions,
.cms-page .content-row-moves {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.cms-page .content-row-moves {
    padding-right: 9px;
    border-right: 1px solid var(--line);
}

.cms-page .content-row-moves button {
    min-width: 20px;
    text-decoration: none;
}

.cms-page .content-row-moves button:disabled {
    opacity: .28;
}

.cms-page .content-order {
    display: block;
    width: 60px;
    color: var(--ink);
    text-align: center;
}

.cms-page .collection-save {
    align-items: center;
    gap: 12px;
}

.cms-page .setup-list {
    display: grid;
    gap: 10px;
}

.cms-page .setup-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 74px minmax(100px, auto);
    align-items: center;
    gap: 10px;
}

.cms-page .setup-row-size {
    grid-template-columns: minmax(90px, .7fr) repeat(2, minmax(110px, 1fr)) 74px;
}

.cms-page .setup-row input,
.cms-page .setup-add input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: none;
    background: var(--bone);
}

.cms-page .setup-row input:focus,
.cms-page .setup-add input:focus {
    border-color: var(--tide);
    box-shadow: 0 0 0 3px rgba(12, 85, 110, .12);
}

.cms-page .setup-slug {
    overflow: hidden;
    color: var(--mute-strong);
    font: 400 10px/1.4 var(--f-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-page .setup-actions,
.cms-page .setup-add {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cms-page .setup-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.cms-page .setup-add {
    min-width: min(100%, 430px);
}

.cms-page .alert,
.cms-page .form-errors.form-errors,
.cms-page .panel.status-banner {
    margin: 0 0 18px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    font: 500 11px/1.55 var(--f-mono);
}

.cms-page .panel.status-banner,
.cms-page .alert-ok {
    border-color: rgba(12, 85, 110, .30);
    color: var(--tide);
}

.cms-page .alert-error,
.cms-page .form-errors.form-errors {
    border-color: rgba(196, 122, 58, .42);
    color: var(--warn);
}

.cms-page .form-errors strong {
    display: block;
    margin-bottom: 5px;
}

.cms-page .form-errors ul {
    padding-left: 17px;
}

.cms-page .form-errors a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

@media (max-width: 980px) {
    .cms-page .mail-template-layout {
        grid-template-columns: 1fr;
    }

    .cms-page .mail-preview-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .cms-page .settings-hub {
        grid-template-columns: 1fr;
    }

    .cms-page .settings-page-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .cms-page .settings-page-head > .btn {
        width: 100%;
        text-align: center;
    }

    .cms-page .settings-card.panel {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .cms-page .settings-card-action {
        color: var(--tide);
    }

    .cms-page .settings-local-nav {
        gap: 20px;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .cms-page .settings-grid,
    .cms-page .mail-template-catalogue {
        grid-template-columns: 1fr;
    }

    .cms-page .settings-document-head,
    .cms-page .settings-diagnostic,
    .cms-page .settings-add-card {
        align-items: stretch;
        flex-direction: column;
    }

    .cms-page .settings-actions.settings-savebar,
    .cms-page .settings-inline-save.settings-savebar {
        bottom: 8px;
        flex-wrap: wrap;
    }

    .cms-page .settings-save-state {
        flex-basis: 100%;
        order: -1;
    }

    .cms-page .collection-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .cms-page .content-row,
    .cms-page .content-row.no-thumb {
        align-items: start;
        gap: 10px 12px;
        padding: 14px 18px;
    }

    .cms-page .content-row {
        grid-template-columns: 48px minmax(0, 1fr) auto;
    }

    .cms-page .content-row.no-thumb {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cms-page .content-row:not(.no-thumb) .content-order {
        grid-column: 2;
    }

    .cms-page .content-row:not(.no-thumb) .content-row-actions {
        grid-column: 2 / -1;
    }

    .cms-page .content-row.no-thumb .content-order {
        grid-column: 1;
    }

    .cms-page .content-row.no-thumb .content-row-actions {
        grid-column: 1 / -1;
    }

    .cms-page .content-row-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .cms-page .collection-save {
        justify-content: flex-start;
        padding: 14px 18px;
    }

    .cms-page .setup-row,
    .cms-page .setup-row-size {
        grid-template-columns: 1fr;
    }

    .cms-page .setup-add {
        align-items: stretch;
        flex-direction: column;
    }

    .cms-page .mail-preview-frame,
    .cms-page .mail-preview-frame iframe {
        min-height: 540px;
    }

    .cms-page .mail-template-layout > .panel {
        padding: 20px;
    }

    .cms-page .danger-zone {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Order · customer · total · status · actions */
.cms-page .table-wrap.sales .table-head,
.cms-page .table-wrap.sales .trow {
    grid-template-columns: 60px 1.2fr 2fr 1fr .9fr .8fr;
}

.cms-page .order-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font: 500 12px/1.5 var(--f-mono);
    margin-bottom: 8px;
}

.cms-page .order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* The line's own photo. .th is sized by the table rule; inside a drawer it
   needs its own box, and the name takes the slack so the price stays right. */
.cms-page .order-item .th {
    flex: 0 0 34px;
    width: 34px;
    aspect-ratio: 1/1;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: var(--bone-2);
}

.cms-page .order-item .th .im {
    position: absolute;
    inset: 0;
}

.cms-page .order-item span:nth-child(2) {
    flex: 1;
}

.cms-page .order-slip {
    display: block;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.cms-page .order-slip img {
    width: 100%;
    display: block;
}

/* The five order states, on the shared .status dot pattern. */
.cms-page .status.awaiting_verification .dot {
    background: var(--warn);
}

.cms-page .status.verified .dot,
.cms-page .status.shipped .dot {
    background: var(--tide-2);
}

.cms-page .status.delivered .dot {
    background: var(--tide);
}

.cms-page .status.cancelled {
    color: var(--mute-strong);
}

.cms-page .status.cancelled .dot {
    background: var(--mute);
}

/* Name · shoot · date · status · actions */
.cms-page .table-wrap.enquiries .table-head,
.cms-page .table-wrap.enquiries .trow {
    grid-template-columns: .9fr 2fr 1fr 1fr .9fr .8fr;
}

/* Read-only facts in a booking drawer. A booking is a record of what someone
   sent, so it is displayed rather than offered as editable fields. */
.cms-page .booking-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    margin: 0 0 8px;
    font: 500 12px/1.5 var(--f-mono);
}

.cms-page .booking-facts dt {
    color: var(--mute-strong);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 10px;
    align-self: center;
}

.cms-page .booking-facts dd {
    margin: 0;
    color: var(--ink);
}

.cms-page .booking-message {
    font: 400 14px/1.7 var(--f-body);
    color: var(--ink);
    margin: 0;
    /* Their words, wrapped as they typed them. */
    white-space: pre-wrap;
}

/* The five booking states reuse the .status dot pattern. */
.cms-page .status.new .dot {
    background: var(--warn);
}

.cms-page .status.replied .dot {
    background: var(--tide-2);
}

.cms-page .status.confirmed .dot,
.cms-page .status.done .dot {
    background: var(--tide);
}

.cms-page .status.declined {
    color: var(--mute-strong);
}

.cms-page .status.declined .dot {
    background: var(--mute);
}

/* Image · title · chapter · photos · status · actions */
.cms-page .table-wrap.posts .table-head,
.cms-page .table-wrap.posts .trow {
    grid-template-columns: 60px 2fr 1fr .6fr .9fr .8fr;
}

/* Title · status · published · actions */
.cms-page .table-wrap.entries .table-head,
.cms-page .table-wrap.entries .trow {
    grid-template-columns: 2.4fr .9fr 1fr .8fr;
}

/* Name · email · phone · resort · actions */
.cms-page .table-wrap.people .table-head,
.cms-page .table-wrap.people .trow {
    grid-template-columns: 1.4fr 1.6fr 1fr 1.2fr .8fr;
}

/* The one field on the whole CMS that stays permanently editable: reordering
   means comparing rows against each other, so it has to be visible on all of
   them at once. Kept narrow so it reads as a cell, not a form.

   Input styling elsewhere is scoped to .drawer-body, so these two — the only
   inputs on any admin screen living outside a drawer — inherit the global
   reset and render as borderless transparent text. An editable field that
   looks exactly like static text is worse than no affordance at all, so the
   box is drawn here explicitly. --bone against the --bone-2 row reads as a
   well rather than a panel. */
.cms-page .chapter-order,
.cms-page .chapters-add input {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bone-2);
    color: var(--ink);
    font-size: 14px;
}

.cms-page .chapter-order:focus,
.cms-page .chapters-add input:focus {
    outline: none;
    border-color: var(--ink-soft);
}

.cms-page .chapter-order {
    width: 72px;
    padding: 7px 8px;
    text-align: center;
}

.cms-page .chapters-add input {
    padding: 11px 14px;
}

.cms-page .chapters-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.cms-page .chapters-add {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.cms-page .chapters-add input {
    flex: 1;
}

.cms-page .chapter-cover-preview {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
}

/* Cards lift, they do not recede. Before Part 2 these were --bone-2 (#ebe6dc)
   on a --bone (#f3efe7) page, i.e. DARKER than the field they sat on, which is
   the opposite of the reference. The surface inversion plus a soft shadow in
   place of the 1px border is the single change that most makes the CMS read
   like the reference design; the rest is spacing and scale. */
.cms-page .panel {
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    padding: 28px
}

/* Only the chapters panel needs to clear the posts heading below it. Panels
   elsewhere are laid out by their own container, so the gap is not global. */
.cms-page .panel.chapters-panel {
    margin-bottom: 22px;
}

.cms-page .panel h3 {
    font-family: var(--f-mono);
    font-weight: 300;
    font-style: italic;
    font-size: 24px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.cms-page .panel h3 .k {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    font-style: normal
}

/* bookings list */
.cms-page .bk {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    align-items: center
}

.cms-page .bk:last-child {
    border-bottom: 0
}

.cms-page .bk .when {
    text-align: center;
    font: 500 10px/1.3 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
    padding-right: 14px;
    border-right: 1px solid var(--line)
}

.cms-page .bk .when .day {
    font-family: var(--f-mono);
    font-size: 28px;
    font-style: italic;
    color: var(--ink);
    letter-spacing: 0
}

.cms-page .bk .t {
    font-family: var(--f-mono);
    font-size: 20px
}

.cms-page .bk .t em {
    font-style: italic;
    color: var(--tide)
}

.cms-page .bk .m {
    font: 500 10px/1.3 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 4px
}

.cms-page .bk .price {
    font: 500 12px/1 var(--f-mono)
}

.cms-page .bk .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 100px;
    background: var(--bone)
}

.cms-page .bk .status.conf {
    color: var(--tide);
    border: 1px solid var(--tide)
}

.cms-page .bk .status.pend {
    color: var(--warn);
    border: 1px solid var(--warn)
}

/* activity */
.cms-page .activity {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.cms-page .act {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--line)
}

.cms-page .act:last-child {
    border-bottom: 0
}

.cms-page .act .i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--bone);
    display: grid;
    place-items: center;
    font-size: 14px
}

.cms-page .act .i.ti {
    background: var(--tide)
}

.cms-page .act .i.or {
    background: var(--warn)
}

.cms-page .act .i.in {
    background: var(--sand);
    color: var(--ink)
}

.cms-page .act .msg {
    font-size: 13px;
    line-height: 1.4
}

.cms-page .act .msg strong {
    font-family: var(--f-mono);
    font-style: italic;
    font-weight: 400
}

.cms-page .act .when {
    font: 500 10px/1 var(--f-mono);
    color: var(--mute);
    letter-spacing: .1em;
    text-transform: uppercase
}

/* chart */
.cms-page .chart {
    height: 180px;
    position: relative;
    margin-top: 6px
}

.cms-page .chart svg {
    width: 100%;
    height: 100%;
    overflow: visible
}

.cms-page .chart .line {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.5
}

.cms-page .chart .area {
    fill: url(#grad);
    opacity: .3
}

.cms-page .chart .dot {
    fill: var(--tide)
}

.cms-page .chart .ax {
    stroke: var(--line);
    stroke-width: 1;
    stroke-dasharray: 2 3
}

.cms-page .chart-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .12em;
    color: var(--mute);
    text-transform: uppercase
}

/* edit drawer */
.cms-page .drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(640px, 92vw);
    background: var(--bone);
    border-left: 1px solid var(--ink);
    z-index: 60;
    transform: translateX(100%);
    transition: transform .6s var(--ease-swift);
    display: flex;
    flex-direction: column
}

/* The shadow paints only while the drawer is open.

   A closed drawer is parked off-screen right, but it is still rendered, and
   this shadow has a NEGATIVE x-offset — it is thrown back LEFT onto the
   visible page. One drawer's shadow is faint enough to miss. The portfolio
   screen pre-renders thirteen of them (seven posts, five chapters, one
   "new"), and thirteen stacked 15% shadows are a solid black band down the
   right edge of the CMS. */
.cms-page .drawer.on {
    box-shadow: -20px 0 60px rgba(0, 0, 0, .15)
}

.cms-page .drawer.on {
    transform: translateX(0)
}

.cms-page .drawer-head {
    padding: 24px 30px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.cms-page .drawer-head h3 {
    font-family: var(--f-mono);
    font-weight: 300;
    font-style: italic;
    font-size: 28px
}

.cms-page .drawer-body {
    flex: 1;
    overflow: auto;
    padding: 24px 30px
}

.cms-page .drawer-body label {
    display: block;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 18px 0 8px
}

.cms-page .drawer-body input,
.cms-page .drawer-body textarea,
.cms-page .drawer-body select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bone-2);
    font-size: 14px;
    color: var(--ink)
}

.cms-page .drawer-body textarea {
    min-height: 80px;
    resize: vertical;
    font-family: var(--f-mono)
}

.cms-page .drawer-body .grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.cms-page .drawer-body .drop {
    border: 1.5px dashed var(--line);
    border-radius: 14px;
    padding: 30px;
    text-align: center;
    background: var(--bone-2);
    font: 500 11px/1.5 var(--f-mono);
    letter-spacing: .12em;
    color: var(--mute);
    text-transform: uppercase
}

.cms-page .drawer-body .drop strong {
    display: block;
    font-family: var(--f-mono);
    font-style: italic;
    color: var(--ink);
    letter-spacing: 0;
    text-transform: none;
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 6px
}

.cms-page .drawer-body .gal {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 12px
}

.cms-page .drawer-body .gal .g {
    aspect-ratio: 1/1;
    border-radius: 8px;
    overflow: hidden;
    position: relative
}

.cms-page .drawer-body .gal .g .x {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--bone);
    display: grid;
    place-items: center;
    font-size: 10px
}

.cms-page .drawer-foot {
    padding: 20px 30px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: var(--bone-2)
}

.cms-page .drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 26, .35);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
    backdrop-filter: blur(4px)
}

.cms-page .drawer-scrim.on {
    opacity: 1;
    pointer-events: auto
}

/* pagination */
.cms-page .pgn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase
}

.cms-page .pgn .pgs {
    display: flex;
    gap: 4px
}

.cms-page .pgn .pgs button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 10px
}

.cms-page .pgn .pgs button.on {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink)
}

/* Shared inline "delete/remove" trigger styled as a text link — was
   previously duplicated identically in journal/index.blade.php,
   clients/index.blade.php and portfolio/index.blade.php. */
.cms-page .btn-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--mute);
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
}

.cms-page .btn-link:hover {
    color: var(--ink)
}

/* -------------------------------------------------------------
   Utilities replacing the inline style attributes that were
   scattered through the admin views until Part 2.
   ------------------------------------------------------------- */

/* Every table's Actions column header. Was style="text-align:right"
   repeated in five views. */
.cms-page .col-right {
    text-align: right;
}

/* Two button sizes. Nine views set padding inline, in two clusters of
   values; these are those two clusters named. */
.cms-page .btn-sm {
    padding: 8px 14px;
}

.cms-page .btn-md {
    padding: 12px 18px;
}

.cms-page .btn-block-top {
    margin-top: 8px;
}

/* A record's thumbnail. The image URL itself stays inline as --tile,
   because it is per-record data; the rule is here.

   Named .cms-thumb and not .tile: the storefront already has an unscoped
   .tile that sets cursor:none and a fade-in animation, and those leaked
   into every CMS thumbnail. See the class-collision guard test. */
.cms-page .cms-thumb {
    background-image: var(--tile);
    background-size: cover;
    background-position: center;
}

/* Colour swatch in the stock grid header, same reasoning as .tile. */
.cms-page .stock-grid-sw {
    background: var(--sw);
}

/* "No products yet." — spans the full grid rather than sitting in
   column one. */
.cms-page .table-empty {
    grid-column: 1 / -1;
    padding: 20px;
    color: var(--mute);
}

/* Small muted note under a field. */
.cms-page .field-note {
    font: 500 11px/1.5 var(--f-mono);
    letter-spacing: .05em;
    color: var(--mute);
    margin-top: 8px;
}

/* The unemphasised half of a label: "Sizes & guide — length / width (cm)". */
.cms-page .label-note {
    font-weight: 400;
    color: var(--mute);
    text-transform: none;
    letter-spacing: 0;
}

.cms-page .drop {
    cursor: pointer;
}

.cms-page .drop-input {
    display: block;
    margin: 10px auto 0;
}

.cms-page .upload-form {
    margin-top: 14px;
}

.cms-page .upload-form .grid2 {
    margin-top: 12px;
}

/* Pushes a drawer footer's delete button to the far left, away from
   Cancel and Save.

   THIS FIXES A LIVE DEFECT, not just an inline style. Part 1 applied
   .drawer-foot-left in the journal, clients and portfolio drawer footers
   but never wrote the rule, so it was a no-op class. .drawer-foot is
   justify-content: space-between over three children, which stranded
   Cancel in the middle of the footer instead of grouping it with Save. */
.cms-page .drawer-foot-left {
    margin-right: auto;
}

/* Flash message above the page content. */
.cms-page .status-banner {
    margin-bottom: 20px;
}

/* Sign-out is a form submit that must look like the text link beside it. */
.cms-page .side .user .rl {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}


/* -------------------------------------------------------------
   Product drawer internals — colours editor, stock grid, form
   errors, drawer chrome. Lived in a scoped <style> block inside
   products/_drawer.blade.php until Part 2.
   ------------------------------------------------------------- */
/* Colours editor: genuinely new — no equivalent component existed in
   shared.css when it was written, so it followed the scoped-<style>
   precedent rather than inventing global class names (see Task 8's
   postmortem). Part 2 moved it here. Sized to match .sg-edit-row. */
.cms-page .colors-editor {
    border: 0;
    margin: 18px 0 0;
    padding: 0;
}

.cms-page .colors-editor legend {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 8px;
    padding: 0;
}

.cms-page .color-edit-row {
    display: grid;
    /* preview, name, hex, photo, remove. Was 1fr 56px 28px for three
       children; adding the preview and the photo picker without widening it
       wrapped them onto an implicit row and squeezed the name field to a
       sliver. */
    grid-template-columns: 34px minmax(0, 1fr) 56px minmax(0, 180px) 28px;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

/* A colourway can carry several photos -- a front and a back shot -- so the
   picker is a row of tick-tiles rather than a single-choice dropdown. It has
   to live inside the 180px photo column above, so it scrolls sideways instead
   of growing the row when a product has many photos. */
.cms-page .colour-photo-picks {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px;
}

.cms-page .colour-photo-pick {
    position: relative;
    flex: 0 0 auto;
    line-height: 0;
    cursor: pointer;
}

/* The box sits on top of its thumbnail rather than beside it, so the picker
   stays within its column instead of doubling in width. */
.cms-page .colour-photo-pick input {
    position: absolute;
    top: 2px;
    left: 2px;
    margin: 0;
    z-index: 1;
}

.cms-page .colour-photo-pick-tile {
    display: block;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background-image: var(--tile);
    background-size: cover;
    background-position: center;
    opacity: .45;
}

.cms-page .colour-photo-pick input:checked+.colour-photo-pick-tile {
    opacity: 1;
    border-color: var(--ink);
}

.cms-page .color-edit-row input[type="hidden"] {
    /* A hidden input renders nothing but is still a grid item. Left in flow
       it takes the first column and shifts every visible field one place
       left — which is how the colour name field ended up 34px wide. */
    display: none;
}

.cms-page .color-edit-row input[type="color"] {
    padding: 4px;
    height: 40px;
}

.cms-page .color-remove {
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    color: var(--mute);
    background: none;
}

.cms-page .form-errors {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--warn);
    border-radius: 10px;
    background: var(--bone-2);
    color: var(--warn);
    font: 500 12px/1.6 var(--f-mono);
    list-style: none;
}

/* .drawer-head and .drawer-foot are now direct children of .drawer
   (a flex column, from shared.css) instead of children of a single
   <form> — a product's drawer holds two independent forms (product +
   stock grid, Task 16) so there's no one <form> left to flex/scroll
   against. .drawer-scroll is the flex:1 middle child that actually
   scrolls; min-height:0 is required so a flex child can shrink below
   its content size and hand overflow to its own scrollbar instead of
   stretching the drawer past the viewport. */
/* The drawer component's eyebrow label. Was an inline style on each
   drawer head; extracting the component gave it one home, and Part 2
   moved it here. */
.cms-page .drawer-eyebrow {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.cms-page .drawer-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Stock grid: no equivalent component in cms.html — the prototype only
   ever had a single flat "Stock" number field, never a colour x size
   table — so it was written scoped alongside .colors-editor above, and
   moved here with it in Part 2. */
.cms-page .drawer .stock-grid {
    padding: 0 30px 24px;
}

.cms-page .stock-grid > label {
    display: block;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 4px 0 8px;
}

.cms-page .stock-grid-hint {
    font: 500 12px/1.6 var(--f-mono);
    color: var(--mute);
    margin: 0;
}

.cms-page .stock-grid-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow-x: auto;
    background: var(--bone-2);
}

.cms-page .stock-grid-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.cms-page .stock-grid-wrap th,
.cms-page .stock-grid-wrap td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink);
}

.cms-page .stock-grid-wrap thead th {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
    background: var(--bone);
    white-space: nowrap;
}

.cms-page .stock-grid-wrap tbody tr:last-child th,
.cms-page .stock-grid-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.cms-page .stock-grid-sw {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--line);
    margin-right: 6px;
    vertical-align: middle;
}

.cms-page .stock-grid-wrap input[type="number"] {
    width: 64px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bone);
    font-size: 13px;
    color: var(--ink);
}

/* -------------------------------------------------------------
   Needs-attention list on the dashboard. Lived in a scoped
   <style> block inside admin/dashboard.blade.php until Part 2.
   ------------------------------------------------------------- */
/* .trow (products table) is a 9-column grid built for a product listing and
   has no equivalent for a simple "name — status" alert row, so this scoped
   block styles the needs-attention list without repurposing it. Same pattern
   as resources/views/auth/login.blade.php. */
.cms-page .cms-alerts {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.cms-page .cms-alert {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: var(--card);
    font: 500 13px/1 var(--f-mono);
    transition: background .25s;
}

.cms-page .cms-alert:hover {
    background: rgba(20, 22, 26, .025);
}

.cms-page .cms-alert .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
}

.cms-page .cms-alert .status .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warn);
}

.cms-page .cms-alert .status.out .dot {
    background: var(--mute);
}

.cms-page .cms-alerts-empty {
    font: 500 12px/1.5 var(--f-mono);
    color: var(--mute);
}

/* -------------------------------------------------------------
   Sign-in screen. Lived in a scoped <style> block inside
   auth/login.blade.php until Part 2.
   ------------------------------------------------------------- */
/* No shared "single card, centered" layout exists (.co is a two-column checkout
   grid); this scoped rule centers the login panel without repurposing .co or
   inventing a new shared class. Same for the field-level error text, which has
   no equivalent in shared.css. */
.page-login .login-wrap {
    padding: 140px 32px 80px;
    display: flex;
    justify-content: center;
}

.page-login .login-wrap .panel {
    width: 100%;
    max-width: 420px;
    margin-top: 0;
}

.page-login .login-wrap .btn {
    width: 100%;
    justify-content: center;
    margin-top: 22px;
    cursor: pointer;
}

.page-login .login-wrap .remember {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .08em;
    color: var(--mute);
    text-transform: uppercase;
}

.page-login .login-wrap .form-error {
    margin-top: 10px;
    font: 500 12px/1.5 var(--f-mono);
    color: #b3452c;
}
@media(max-width:1024px) {
    body.cms-page {
        grid-template-columns: 200px 1fr
    }

    .cms-page .main {
        padding: 20px 24px 40px
    }

    .cms-page .stats {
        grid-template-columns: repeat(2, 1fr)
    }

    .cms-page .split {
        grid-template-columns: 1fr
    }

    .cms-page .ph-head h1 {
        font-size: 42px
    }

}

@media(max-width:860px) {
    body.cms-page {
        grid-template-columns: 1fr;
        display: block
    }

    .cms-page .side {
        position: sticky;
        top: 0;
        z-index: 40;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        overflow-x: auto
    }

    .cms-page .side .brand-s {
        font-size: 15px;
        white-space: nowrap
    }

    .cms-page .side .tag,
    .cms-page .side .divider,
    .cms-page .side .user {
        display: none
    }

    .cms-page .side nav {
        flex-direction: row;
        margin-top: 0;
        gap: 4px;
        flex: 1;
        overflow-x: auto
    }

    .cms-page .side nav a {
        padding: 8px 12px;
        white-space: nowrap;
        font-size: 10px;
        flex-shrink: 0
    }

    .cms-page .side nav a .c {
        display: none
    }

    .cms-page .main {
        padding: 20px 16px 40px
    }

    .cms-page .topbar {
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 18px
    }

    .cms-page .topbar .search {
        order: 3;
        max-width: 100%;
        flex-basis: 100%
    }

    .cms-page .ph-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 14px
    }

    .cms-page .ph-head h1 {
        font-size: 34px
    }

    .cms-page .stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 20px
    }

    .cms-page .stat-card {
        padding: 14px
    }

    .cms-page .stat-card .v {
        font-size: 28px !important
    }

    .cms-page .table-head,
    .cms-page .trow {
        grid-template-columns: 24px 44px 1.8fr 1fr;
        gap: 8px;
        padding: 10px 14px
    }

    .cms-page .trow .price,
    .cms-page .trow .status,
    .cms-page .trow .views,
    .cms-page .trow .actions {
        display: none
    }

    .cms-page .table-head>*:nth-child(n+5) {
        display: none
    }

    .cms-page .drawer {
        width: 100%
    }

    .cms-page .drawer-body {
        padding: 22px
    }

}

@media(max-width:520px) {
    .cms-page .side {
        padding: 12px
    }

    .cms-page .main {
        padding: 16px 12px 32px
    }

    .cms-page .stats {
        grid-template-columns: 1fr
    }

    .cms-page .ph-head h1 {
        font-size: 28px
    }

    .cms-page .topbar .tools {
        gap: 6px
    }

    .cms-page .bell {
        width: 34px;
        height: 34px
    }

}


/* =============================================================
   HOME PAGE (index.html) — scoped under body.page-home
   ============================================================= */
body.page-home {
    background: var(--bone);
    color: var(--ink);
    font-family: var(--f-body);
    -webkit-font-smoothing: antialiased
}

body.page-home {
    overflow-x: hidden;
    cursor: none;
    max-width: 1400px;
    margin: 0 auto
}

.page-home .cursor-label.on {
    opacity: 1
}

/* =========================================================
   NAV
   ========================================================= */
.page-home .nav {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 60px;
    transition: background .4s var(--ease), backdrop-filter .4s;
}

.menu-btn .bars i {
    display: block;
    width: 14px;
    height: 1.2px;
    background: currentColor;
    transition: transform .3s var(--ease)
}

.nav.open .menu-btn .bars i:nth-child(1) {
    transform: translateY(4.2px) rotate(45deg)
}

.nav.open .menu-btn .bars i:nth-child(2) {
    opacity: 0
}

.nav.open .menu-btn .bars i:nth-child(3) {
    transform: translateY(-4.2px) rotate(-45deg)
}

.page-home .contact-pills {
    display: flex;
    gap: 8px
}

.page-home .pill {
    width: 40px;
    height: 40px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background .3s var(--ease), color .3s
}

.page-home .pill:hover {
    background: var(--ink);
    color: var(--bone)
}

.page-home .pill svg {
    width: 16px;
    height: 16px
}

.page-home .brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--f-display);
    font-weight: 400;
    font-style: italic;
    font-size: 26px;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-home .brand .mark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink);
    position: relative;
    overflow: hidden
}

.page-home .brand .mark::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--bone);
    transform: translateY(60%);
    animation: tide 4s ease-in-out infinite
}

/* =========================================================
   SIDE MENU
   ========================================================= */
.sidemenu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(420px, 90vw);
    background: var(--ink);
    color: var(--bone);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .7s var(--ease-swift);
    padding: 110px 40px 40px;
    display: flex;
    flex-direction: column;
}

.sidemenu.open {
    transform: translateX(0)
}

.sidemenu ol {
    list-style: none;
    counter-reset: m
}

.sidemenu li {
    counter-increment: m;
    overflow: hidden;
    border-top: 1px solid rgba(243, 239, 231, .15)
}

.sidemenu li:last-child {
    border-bottom: 1px solid rgba(243, 239, 231, .15)
}

.sidemenu li a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 0;
    font-family: var(--f-display);
    font-size: 36px;
    font-weight: 300;
    position: relative;
    transition: padding-left .5s var(--ease), color .3s
}

/* The item number, revealed on hover as the label slides right.

   It is absolutely positioned at left:0 — directly under the label, which at
   rest has no left padding — so it must start hidden. The base rule declared
   neither opacity nor transform, leaving the number fully opaque on top of
   the first letter of every menu item ("01" over "Shop", "02" over
   "Portfolio"). The hover rule below is the proof of intent: setting
   opacity:1 there is a no-op unless the resting state is 0. */
.sidemenu li a::before {
    content: "0"counter(m);
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .12em;
    color: var(--mute);
    position: absolute;
    top: 28px;
    left: 0;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .4s, transform .4s
}

.sidemenu li a:hover {
    padding-left: 50px;
    color: var(--tide-2);
    font-style: italic
}

.sidemenu li a:hover::before {
    opacity: 1;
    transform: translateX(0)
}

.sidemenu-foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    font: 400 11px/1.6 var(--f-mono);
    color: var(--mute);
    letter-spacing: .1em;
    text-transform: uppercase
}

.scrim {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 26, .5);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s var(--ease);
    backdrop-filter: blur(4px)
}

.scrim.on {
    opacity: 1;
    pointer-events: auto
}

/* =========================================================
   HERO / COVER
   ========================================================= */
.page-home .hero {
    position: relative;
    min-height: 65vh;
    padding: 120px 60px 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

.page-home .hero-meta {
    display: flex;
    justify-content: space-between;
    font: 500 11px/1.4 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.page-home .hero-meta span {
    display: flex;
    align-items: center;
    gap: 8px
}

.page-home .hero-meta .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tide);
    animation: blink 2.2s infinite
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

.page-home .cover {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: min(72vh, 640px);
    background: linear-gradient(180deg, rgba(10, 14, 18, .0) 0%, rgba(10, 14, 18, .2) 42%, rgba(10, 14, 18, .6) 100%), url('../images/cover1.jpg') center/cover no-repeat;
}

.page-home .cover-inner {
    position: absolute;
    inset: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #f3efe7
}

.page-home .cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.25), transparent 60%), */
        radial-gradient(ellipse at 80% 80%, rgba(0, 0, 0, 0.25), transparent 50%);
}

.page-home .cover::after {
    /* caustic shimmer */
    content: "";
    position: absolute;
    inset: -20%;
    background:
        /* repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .08) 0 2px, transparent 2px 8px), */
        repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .06) 0 1px, transparent 1px 20px);
    mix-blend-mode: screen;
    animation: drift 30s linear infinite;
    opacity: .6;
}

@keyframes drift {
    0% {
        transform: translate(0, 0) rotate(0)
    }

    100% {
        transform: translate(-4%, -2%) rotate(3deg)
    }
}

.page-home .cover h1 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(56px, 10vw, 156px);
    line-height: .9;
    letter-spacing: -.03em;
    max-width: 14ch;
    position: relative;
    z-index: 2;
}

.page-home .cover h1 em {
    font-style: italic;
    font-weight: 300;
    color: #d9e2df
}

.page-home .cover-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    position: relative;
    z-index: 2
}

.page-home .cover-caption {
    max-width: 36ch;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(243, 239, 231, .85)
}

.page-home .cover-caption strong {
    font-weight: 500
}

.page-home .cover-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-radius: 100px;
    background: var(--bone);
    color: var(--ink);
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: transform .4s var(--ease), background .4s;
}

.page-home .cover-cta:hover {
    transform: translateY(-2px);
    background: #fff
}

.page-home .cover-cta .arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--bone);
    display: grid;
    place-items: center;
    transition: transform .4s var(--ease)
}

.page-home .cover-cta:hover .arrow {
    transform: rotate(-45deg)
}

/* floating creature (replaces sketch's manta) */
.page-home .creature {
    position: absolute;
    top: 10%;
    right: 6%;
    width: min(220px, 24vw);
    aspect-ratio: 1.4/1;
    opacity: .85;
    z-index: 1;
    animation: float 8s ease-in-out infinite;
}

.page-home .creature svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .25))
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(-4deg)
    }

    50% {
        transform: translateY(-14px) rotate(2deg)
    }
}

/* =========================================================
   MARQUEE
   ========================================================= */
.page-home .marquee {
    overflow: hidden;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: 56px
}

.page-home .marquee-track {
    display: flex;
    gap: 48px;
    white-space: nowrap;
    animation: mq 40s linear infinite;
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 34px;
    font-style: italic
}

.page-home .marquee-track span {
    display: inline-flex;
    align-items: center;
    gap: 48px;
    color: var(--ink)
}

.page-home .marquee-track span::after {
    content: "✺";
    font-family: var(--f-body);
    color: var(--tide);
    font-style: normal
}

@keyframes mq {
    to {
        transform: translateX(-50%)
    }
}

/* =========================================================
   SECTION LABELS
   ========================================================= */
.page-home .section-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 80px 85px 24px;
    gap: 40px;
}

.page-home .section-label .num {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .18em;
    color: var(--mute);
    text-transform: uppercase
}

.page-home .section-label h2 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(44px, 6vw, 88px);
    line-height: .95;
    letter-spacing: -.02em;
    max-width: 20ch
}

.page-home .section-label h2 em {
    font-style: italic;
    color: var(--tide)
}

.page-home .section-label .kicker {
    font: 500 11px/1.4 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    min-width: 160px;
    text-align: right
}

/* =========================================================
   SHOP
   ========================================================= */
.page-home .shop {
    padding: 0 60px 40px
}

.page-home .shop-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px
}

.page-home .product {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/5;
    cursor: none;
    transition: transform .6s var(--ease);
}

.page-home .product.large {
    grid-column: span 6;
    aspect-ratio: 6/5
}

.page-home .product.small {
    grid-column: span 3
}

.page-home .product .ph {
    position: absolute;
    inset: 0;
    transition: transform 1s var(--ease-swift)
}

.page-home .product:hover .ph {
    transform: scale(1.05)
}

.page-home .product .tag {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 8px 12px;
    background: rgba(243, 239, 231, .9);
    backdrop-filter: blur(6px);
    border-radius: 100px;
    color: var(--ink);
}

.page-home .product .info {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    color: var(--bone);
}

.page-home .product .info h3 {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.01em
}

.page-home .product .info .price {
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .08em
}

.page-home .product .info .meta {
    font: 400 11px/1.4 var(--f-mono);
    letter-spacing: .06em;
    color: rgba(243, 239, 231, .75);
    margin-top: 6px
}

/*
    The anchor covers the whole tile; the badge is a span inside it.

    It used to be the other way round — a 40px anchor in the corner at
    opacity:0 until hover — so the only way into a product was to find an
    invisible circle. The usual fix, stretching the anchor with an inset:0
    ::after, does NOT work here: the anchor was itself absolutely positioned,
    which makes it the containing block for its own pseudo-element, so the
    overlay came out 40px square and clicks still landed on .overlay.

    z-index 3, not 2: .info and .tag are both 2 and come later in the markup,
    so at 2 the title and price strip along the bottom ate its own clicks.
*/
.page-home .product .add {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    border-radius: inherit;
}

.page-home .product .add-badge {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bone);
    color: var(--ink);
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .4s var(--ease), transform .4s, background .3s;
}

.page-home .product:hover .add-badge {
    opacity: 1;
    transform: translateY(0)
}

.page-home .product .add:hover .add-badge {
    background: var(--tide);
    color: var(--bone)
}

.page-home .product .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .55) 100%);
    z-index: 1
}

/* =========================================================
   PORTFOLIO
   ========================================================= */
.page-home .portfolio {
    padding: 0 60px 80px
}

.page-home .pf-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--ink);
}

.page-home .pf-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .9s var(--ease);
    overflow: hidden
}

.page-home .pf-slide.active {
    opacity: 1
}

.page-home .pf-slide .img {
    position: absolute;
    inset: 0;
    transform: scale(1.06);
    transition: transform 7s linear
}

.page-home .pf-slide.active .img {
    transform: scale(1)
}

.page-home .pf-slide .cap {
    position: absolute;
    left: 28px;
    bottom: 24px;
    right: 28px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    color: var(--bone);
    z-index: 2;
}

.page-home .pf-slide .cap h3 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(32px, 4.5vw, 64px);
    line-height: .95;
    letter-spacing: -.02em
}

.page-home .pf-slide .cap h3 em {
    font-style: italic
}

.page-home .pf-slide .cap .loc {
    font: 500 11px/1.4 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: right
}

.page-home .pf-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .55));
    z-index: 1
}

.page-home .pf-controls {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 16px;
    margin-top: 20px;
}

.page-home .pf-cats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.page-home .pf-cat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 100px;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: all .35s var(--ease);
    position: relative;
}

.page-home .pf-cat .n {
    color: var(--mute);
    font-size: 9px
}

.page-home .pf-cat:hover {
    border-color: var(--ink)
}

.page-home .pf-cat.active {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink)
}

.page-home .pf-cat.active .n {
    color: var(--tide-2)
}

.page-home .pf-nums {
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .12em;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 4px
}

.page-home .pf-nums .cur {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 28px;
    color: var(--ink);
    font-weight: 300
}

.page-home .pf-nums .bar {
    width: 80px;
    height: 1px;
    background: var(--line);
    position: relative;
    overflow: hidden
}

.page-home .pf-nums .bar i {
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform .9s var(--ease)
}

.page-home .pf-viewall {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 100px;
    background: var(--tide);
    color: var(--bone);
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: all .3s var(--ease);
    white-space: nowrap;
    align-self: center;
}

.page-home .pf-viewall:hover {
    background: var(--ink);
    transform: translateX(4px)
}

.page-home .pf-viewall span {
    transition: transform .3s
}

.page-home .pf-viewall:hover span {
    transform: translate(3px, -3px)
}

.page-home .pf-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 18px;
}

.page-home .pf-thumb {
    position: relative;
    aspect-ratio: 3/2;
    border-radius: 12px;
    overflow: hidden;
    cursor: none;
    transition: transform .4s var(--ease);
}

.page-home .pf-thumb .img {
    position: absolute;
    inset: 0;
    transition: transform .6s var(--ease)
}

.page-home .pf-thumb:hover .img {
    transform: scale(1.08)
}

.page-home .pf-thumb .num {
    position: absolute;
    top: 8px;
    left: 10px;
    color: var(--bone);
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4)
}

.page-home .pf-thumb .lbl {
    position: absolute;
    left: 10px;
    bottom: 8px;
    color: var(--bone);
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4)
}

.page-home .pf-thumb.active {
    outline: 2px solid var(--ink);
    outline-offset: 2px
}

.page-home .pf-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .45));
    z-index: 1
}

/* =========================================================
   ABOUT + CONTACT
   ========================================================= */
.page-home .about {
    padding: 80px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.page-home .about-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/5;
    position: relative
}

.page-home .about-img::after {
    content: "OFF THE COAST OF MALDIVES, 2026";
    position: absolute;
    left: 20px;
    bottom: 16px;
    color: rgba(243, 239, 231, .7);
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em
}

.page-home .about-txt .eyebrow {
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .16em;
    color: var(--tide);
    text-transform: uppercase;
    margin-bottom: 18px
}

.page-home .about-txt h2 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(40px, 5.4vw, 72px);
    line-height: 1;
    letter-spacing: -.02em
}

.page-home .about-txt h2 em {
    font-style: italic;
    color: var(--tide)
}

.page-home .about-txt p {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 24px;
    color: var(--ink-soft);
    max-width: 48ch;
    text-wrap: pretty
}

.page-home .about-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px
}

.page-home .fact {
    border-top: 1px solid var(--line);
    padding-top: 14px
}

.page-home .fact .k {
    font-family: var(--f-display);
    font-size: 36px;
    font-weight: 300;
    line-height: 1
}

.page-home .fact .k em {
    font-style: italic;
    color: var(--tide)
}

.page-home .fact .l {
    font: 500 10px/1.4 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    margin-top: 6px
}

/* CTA BAND */
.page-home .cta-band {
    margin: 40px 60px 0;
    border-radius: var(--radius-lg);
    padding: 72px 44px;
    background: var(--ink);
    color: var(--bone);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: end;
    position: relative;
    overflow: hidden;
}

.page-home .cta-band::before {
    content: "";
    position: absolute;
    right: -20%;
    top: -50%;
    width: 80%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(122, 153, 150, .35), transparent 60%);
    filter: blur(20px);
}

.page-home .cta-band h3 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(40px, 5vw, 80px);
    line-height: .95;
    letter-spacing: -.02em;
    position: relative
}

.page-home .cta-band h3 em {
    font-style: italic
}

.page-home .cta-band .rhs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px
}

.page-home .cta-band p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(243, 239, 231, .75);
    max-width: 40ch
}

.page-home .cta-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.page-home .btn-ghost,
.page-home .btn-solid {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 100px;
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: all .35s var(--ease)
}

.page-home .btn-ghost {
    border: 1px solid rgba(243, 239, 231, .35);
    color: var(--bone)
}

.page-home .btn-ghost:hover {
    background: var(--bone);
    color: var(--ink);
    border-color: var(--bone)
}

.page-home .btn-solid {
    background: var(--tide);
    color: var(--bone)
}

.page-home .btn-solid:hover {
    background: var(--bone);
    color: var(--ink)
}

/* FOOTER */
.page-home .foot {
    padding: 80px 60px 40px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}

.page-home .foot h4 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 64px;
    line-height: .9;
    letter-spacing: -.02em
}

.page-home .foot .col a {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    border-bottom: 1px dashed transparent;
    width: max-content;
    transition: border-color .3s
}

.page-home .foot .col a:hover {
    border-color: var(--ink)
}

.page-home .foot-bar {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    font: 500 11px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    padding-top: 30px;
    margin-top: 10px;
    border-top: 1px solid var(--line)
}

/* =========================================================
   CART DRAWER
   ========================================================= */
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 92vw);
    background: var(--bone);
    z-index: 70;
    transform: translateX(100%);
    transition: transform .7s var(--ease-swift);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--line);
}

.cart-drawer.open {
    transform: translateX(0)
}

.cart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid var(--line)
}

.cart-head h3 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 28px;
    font-style: italic
}

.close-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background .3s, color .3s
}

.close-btn:hover {
    background: var(--ink);
    color: var(--bone)
}

.cart-items {
    flex: 1;
    overflow: auto;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.cart-empty {
    color: var(--mute);
    font-size: 14px;
    padding: 40px 0;
    text-align: center;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 20px;
    font-weight: 300
}

.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 14px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line)
}

.cart-item .th {
    width: 80px;
    aspect-ratio: 1/1;
    border-radius: 10px;
    overflow: hidden;
    object-fit: cover;
    background: var(--bone-2)
}

.cart-item .cart-thumb-placeholder {
    display: grid;
    place-items: center;
    background:
        linear-gradient(145deg, rgba(82, 145, 170, .2), transparent 65%),
        var(--bone-2);
    color: var(--tide);
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
}

.cart-item .ttl {
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 400
}

.cart-item .sub {
    font: 400 11px/1.4 var(--f-mono);
    color: var(--mute);
    letter-spacing: .08em;
    margin-top: 3px
}

.cart-item .price {
    font: 500 13px/1 var(--f-mono);
    margin-top: 6px
}

.cart-item .rm {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
    margin-top: 8px;
    padding: 4px 0
}

.cart-item .rm:hover {
    color: var(--ink)
}

.cart-foot {
    padding: 24px 28px;
    border-top: 1px solid var(--line)
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 16px
}

.cart-total .amt {
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none
}

.checkout {
    width: 100%;
    padding: 18px;
    background: var(--ink);
    color: var(--bone);
    border-radius: 100px;
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    transition: background .3s;
}

.checkout:hover {
    background: var(--tide)
}

/* =========================================================
   REVEALS
   ========================================================= */
.page-home .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--ease), transform 1s var(--ease)
}

.page-home .reveal.in {
    opacity: 1;
    transform: none
}

.page-home .reveal-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(60%);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: var(--d, 0s)
}

.page-home .reveal-word.in {
    opacity: 1;
    transform: none
}

@media (max-width: 1024px) {
    .page-home .hero {
        padding: 110px 40px 40px
    }

    .page-home .nav {
        padding: 22px 40px
    }

    .page-home .cover {
        padding: 28px
    }

    .page-home .cover-inner h1 {
        font-size: clamp(64px, 10vw, 120px)
    }

    .page-home .shop,
    .page-home .about,
    .page-home .foot {
        padding-left: 40px;
        padding-right: 40px
    }

    .page-home .cta-band {
        margin-left: 40px;
        margin-right: 40px
    }

    .page-home .section-label {
        padding: 40px 40px 24px
    }

    .page-home .portfolio {
        padding: 0 40px 60px
    }

}

@media (max-width: 860px) {
    .page-home .nav {
        padding: 14px 16px;
        gap: 8px
    }

    .page-home .contact-pills {
        display: none
    }

    .page-home .menu-btn span:last-child {
        display: none
    }

    .page-home .brand {
        position: static;
        transform: none;
        font-size: 15px
    }

    .page-home .brand span:last-child {
        display: none
    }

    .page-home .brand .mark {
        width: 18px;
        height: 18px
    }

    .page-home .hero {
        padding: 96px 20px 30px
    }

    .page-home .hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        font-size: 10px
    }

    .page-home .cover {
        padding: 22px;
        border-radius: 20px;
        min-height: auto
    }

    .page-home .cover-inner {
        gap: 20px
    }

    .page-home .cover-inner h1 {
        font-size: clamp(48px, 12vw, 84px)
    }

    .page-home .cover-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px
    }

    .page-home .cover-caption {
        font-size: 13px
    }

    .page-home .creature {
        width: 120px;
        right: 14px;
        top: 14px
    }

    .page-home .marquee {
        font-size: 32px;
        padding: 20px 0
    }

    .page-home .section-label {
        padding: 40px 20px 24px;
        grid-template-columns: 1fr;
        gap: 14px
    }

    .page-home .section-label h2 {
        font-size: clamp(38px, 9vw, 64px)
    }

    .page-home .section-label .num,
    .page-home .section-label .kicker {
        font-size: 11px
    }

    .page-home .shop {
        padding: 0 20px 40px
    }

    .page-home .shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px
    }

    .page-home .product.large,
    .page-home .product.small {
        grid-column: span 1;
        aspect-ratio: 4/5
    }

    .page-home .product .info h3 {
        font-size: 20px
    }

    .page-home .product .tag {
        font-size: 9px;
        padding: 6px 9px
    }

    .page-home .portfolio {
        padding: 0 20px 60px
    }

    .page-home .pf-main {
        aspect-ratio: 4/3
    }

    .page-home .pf-slide .cap {
        left: 16px;
        right: 16px;
        bottom: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .page-home .pf-slide .cap h3 {
        font-size: clamp(28px, 7vw, 48px)
    }

    .page-home .pf-slide .cap .loc {
        text-align: left;
        font-size: 10px
    }

    .page-home .pf-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }

    .page-home .pf-cats {
        gap: 6px
    }

    .page-home .pf-cat {
        padding: 9px 12px;
        font-size: 10px
    }

    .page-home .pf-thumbs {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px
    }

    .page-home .pf-thumb {
        aspect-ratio: 1/1
    }

    .page-home .pf-thumb .lbl {
        font-size: 9px
    }

    .page-home .pf-viewall {
        width: 100%;
        justify-content: center;
        padding: 14px 18px
    }

    .page-home .about {
        padding: 40px 16px;
        grid-template-columns: 1fr;
        gap: 30px
    }

    .page-home .about-txt h2 {
        font-size: clamp(36px, 8vw, 56px)
    }

    .page-home .about-img {
        aspect-ratio: 4/5;
        min-height: 280px
    }

    .page-home .about-facts {
        gap: 20px
    }

    .page-home .fact .k {
        font-size: 28px
    }

    .page-home .cta-band {
        grid-template-columns: 1fr;
        padding: 40px 16px;
        gap: 24px
    }

    .page-home .cta-band h3 {
        font-size: clamp(34px, 8vw, 56px)
    }

    .page-home .cta-buttons {
        flex-wrap: wrap
    }

    .page-home .foot {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 40px 16px 28px
    }

    .page-home .foot h4 {
        grid-column: 1/-1;
        font-size: 36px
    }

    .page-home .foot-bar {
        grid-column: 1/-1;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: 10px
    }

    .cart-drawer {
        width: min(420px, 100vw)
    }

    .sidemenu {
        width: min(420px, 100vw);
        padding: 90px 24px 24px
    }

    .sidemenu ol li a {
        font-size: clamp(28px, 7vw, 40px)
    }

    body.page-home {
        cursor: auto
    }

}

@media (max-width: 520px) {
    .page-home .nav {
        padding: 12px 12px
    }

    .page-home .hero {
        padding: 80px 12px 24px
    }

    .page-home .cover {
        padding: 18px
    }

    .page-home .cover-inner h1 {
        font-size: clamp(40px, 13vw, 64px)
    }

    .page-home .marquee {
        font-size: 24px;
        padding: 14px 0
    }

    .page-home .section-label {
        padding: 30px 12px 18px
    }

    .page-home .shop {
        padding: 0 12px 32px
    }

    .page-home .shop-grid {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .page-home .product.large,
    .page-home .product.small {
        aspect-ratio: 5/6
    }

    .page-home .portfolio {
        padding: 0 12px 40px
    }

    .page-home .pf-thumbs {
        grid-template-columns: repeat(2, 1fr)
    }

    .page-home .about {
        padding: 32px 12px
    }

    .page-home .about-facts {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 14px
    }

    .page-home .fact .k {
        font-size: 22px
    }

    .page-home .cta-band {
        padding: 32px 12px
    }

    .page-home .foot {
        padding: 32px 12px 20px
    }

    .page-home .foot h4 {
        font-size: 28px
    }

    .page-home .cover-cta {
        font-size: 11px;
        padding: 12px 18px
    }

}

@media (hover: none) {
    body.page-home {
        cursor: auto
    }

}

/* Finance screen. Wide table, so the wrapper scrolls rather than the page. */
.cms-page .fin-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.cms-page .fin-tile {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bone);
}

.cms-page .fin-tile-label {
    display: block;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.cms-page .fin-tile strong {
    font-size: 22px;
}

.cms-page .fin-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.cms-page .fin-filter {
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink);
}

.cms-page .fin-filter.on {
    border-color: var(--tide);
    color: var(--tide);
}

.cms-page .fin-table-wrap {
    overflow-x: auto;
}

.cms-page .fin-table {
    width: 100%;
    border-collapse: collapse;
}

.cms-page .fin-table th,
.cms-page .fin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

/* Same treatment as .table-head on the other CMS tables. */
.cms-page .fin-table th {
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
}

.cms-page .fin-table td {
    font-size: 13px;
}

.cms-page .fin-muted {
    opacity: .55;
}

/* Finance drawer: the facts about a row, then the form that changes them. */
.cms-page .fin-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

.cms-page .fin-facts dt {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 2px;
}

.cms-page .fin-facts dd {
    margin: 0;
    font-size: 16px;
}

.cms-page .fin-slip {
    display: block;
    max-width: 260px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.cms-page .fin-slip img {
    display: block;
    width: 100%;
    height: auto;
}

.cms-page .fin-payment-list {
    margin: 0 0 18px;
    padding-left: 18px;
}

.cms-page .fin-payment-list li {
    margin-bottom: 4px;
}

/* One line of an invoice: description, quantity, unit price, remove. */
.cms-page .invoice-line-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 130px 28px;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}