* {
    box-sizing: border-box;
}

:root {
    --ink: #213e36;
    --paper: #f8f7f2;
    --line: #dcded5;
    --muted: #636d63;
}

body {
    font-size: 18px;
    line-height: 1.65;
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
}

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

a:focus-visible {
    outline: 3px solid #ad622e;
    outline-offset: 6px;
}

.site-header {
    max-width: 1280px;
    margin: auto;
    min-height: 100px;
    padding: 24px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--line);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 22px;
}

.brand-logo {
    display: block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
}

.brand-small {
    font-size: 12px;
    letter-spacing: 1px;
    max-width: 50px;
    line-height: 1.5;
}

.site-header nav {
    display: flex;
    gap: 28px;
    font-size: 16px;
}

.site-header nav a {
    padding: 10px 0;
}

.site-header nav a[aria-current="page"] {
    border-bottom: 2px solid var(--ink);
}

main {
    max-width: 1280px;
    margin: auto;
    padding: 0 48px;
}

.hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    align-items: center;
    min-height: 650px;
    padding: 64px 0;
    isolation: isolate;
}

.hero-copy {
    position: relative;
    z-index: 1;
    padding-right: 12px;
}

.eyebrow {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
}

h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(44px, 5.4vw, 74px);
    line-height: 1.06;
    font-weight: normal;
    letter-spacing: -2px;
    margin: 25px 0;
}

.intro {
    max-width: 440px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8;
}

.button {
    margin-top: 20px;
    display: inline-flex;
    gap: 40px;
    padding: 18px 24px;
    background: var(--ink);
    color: white;
    font-size: 16px;
}

.button:hover {
    background: #355b4e;
}

.small-note {
    font-size: 14px;
    color: var(--muted);
    margin-top: 22px;
}

/* Broad image layer under the heading; a feathered organic mask dissolves
   the perimeter into the page rather than showing a rectangular photo card. */
.hero-art {
    position: absolute;
    top: 0;
    right: -24px;
    bottom: 0;
    width: 94%;
    pointer-events: none;
    z-index: 0;
    /* Keep the original feathering stationary while the image moves inside it. */
    overflow: hidden;
    -webkit-mask-image: url('/images/voyage-reveal.svg?v=soft-2');
    mask-image: url('/images/voyage-reveal.svg?v=soft-2');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.hero-voyage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 54%;
}

.home-page {
    isolation: isolate;
}

.category-section {
    position: relative;
    padding: 30px 0 60px;
}

.category-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -180px -48px -190px;
    pointer-events: none;
    background: radial-gradient(ellipse at 16% 46%, rgba(185, 199, 162, .32), transparent 65%), radial-gradient(ellipse at 87% 53%, rgba(229, 197, 160, .29), transparent 65%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 23%, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 23%, #000 70%, transparent);
}

.section-journey {
    position: absolute;
    left: -32px;
    width: calc(100% + 64px);
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.section-journey path {
    fill: none;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
}

.section-journey-in {
    top: -150px;
    height: 220px;
}

.section-journey-out {
    bottom: -92px;
    height: 160px;
}

.category-section > .section-heading {
    position: relative;
    z-index: 1;
}

@media (max-width: 700px) {
    .category-section::before {
        inset: -100px -20px -100px;
    }
    .section-journey {
        left: 0;
        width: 100%;
        opacity: .65;
    }
    .section-journey-in {
        top: -70px;
        height: 100px;
    }
    .section-journey-out {
        bottom: -45px;
        height: 100px;
    }
}

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

h2 {
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: normal;
}

.section-heading > span {
    color: var(--muted);
    font-size: 15px;
}

.category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: linear-gradient(90deg, #c8d0b9 0%, #c8d0b9 36%, #ded5bf 50%, #efdbc5 64%, #efdbc5 100%);
}

.category-grid {
    position: relative;
    isolation: isolate;
}

.category-thread {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.category-thread path {
    fill: none;
    stroke-width: 1.35;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
}

.category-thread-mobile {
    display: none;
}

.category-card {
    position: relative;
    overflow: hidden;
    min-height: 385px;
    padding: 30px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.category-card.category-household {
    background: transparent;
}

.category-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 54%;
    height: 76%;
    top: 14%;
    right: 3%;
    background: #61715b;
    border-radius: 52% 48% 43% 57% / 48% 56% 44% 52%;
    transform: rotate(14deg);
}

.category-household::before {
    background: #c28360;
    width: 52%;
    height: auto;
    aspect-ratio: 1;
    top: 26%;
    border-radius: 50%;
}

.category-card h3 {
    position: relative;
    z-index: 2;
    font-family: Georgia, serif;
    font-weight: normal;
    font-size: clamp(30px, 3.1vw, 44px);
    line-height: 1.12;
    letter-spacing: -1px;
    margin: 38px 0 30px;
    max-width: 58%;
}

.category-card .eyebrow {
    position: relative;
    z-index: 2;
    font-size: 14px;
}

.category-object {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 10px;
    width: 55%;
    height: 90%;
    object-fit: contain;
    object-position: bottom;
    transition: transform .3s ease;
}

.category-household .category-object {
    width: 51%;
}

.category-action {
    position: relative;
    z-index: 2;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.category-arrow {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 26px;
    transition: background .2s, color .2s;
}

.category-card:hover .category-object {
    transform: translateY(-5px);
}

.category-card:hover .category-arrow, .category-card:focus-visible .category-arrow {
    background: var(--ink);
    color: var(--paper);
}

.product-card {
    scroll-margin-top: 30px;
}

@media (min-width: 601px) and (max-width: 1000px) {
    .category-card {
        min-height: 350px;
        padding: 22px;
    }
    .category-card h3 {
        font-size: 30px;
    }
    .category-object {
        width: 50%;
        height: 76%;
    }
}

@media (max-width: 600px) {
    .category-card {
        min-height: 330px;
        padding: 24px;
    }
    .category-card h3 {
        font-size: 34px;
    }
    .category-thread-desktop {
        display: none;
    }
    .category-thread-mobile {
        display: block;
    }
    .category-grid {
        background: linear-gradient(180deg, #c8d0b9 0%, #c8d0b9 38%, #ded5bf 50%, #efdbc5 62%, #efdbc5 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .category-object, .category-arrow {
        transition: none;
    }
}

h3 {
    font-size: 22px;
    font-weight: 500;
}

.category-card p, .product-copy p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.site-footer {
    max-width: 1184px;
    margin: auto;
    padding: 26px 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--muted);
}

.catalogue {
    padding-top: 55px;
    padding-bottom: 60px;
}

.catalogue h1 {
    font-size: clamp(40px, 5vw, 62px);
}

.catalogue-notice {
    background: #eee9da;
    color: #65573d;
    font-size: 15px;
    line-height: 1.6;
    padding: 16px 20px;
    margin: 30px 0;
}

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

.product-art {
    height: 190px;
    display: grid;
    place-items: center;
    background: #e3e8dc;
}

.product-art span {
    color: #58694e;
    font-family: Georgia, serif;
    font-size: 38px;
    letter-spacing: 5px;
}

.home-art {
    background: #ecdfd1;
}

.home-art span {
    color: #896d57;
}

.product-copy {
    padding-top: 20px;
}

.product-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
}

.product-heading h3 {
    margin: 0;
    font-size: 18px;
}

.price {
    font-size: 17px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .hero {
        min-height: 610px;
    }
    .hero-art {
        right: -16px;
        width: 96%;
    }
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .site-footer {
        margin: 0 32px;
    }
}

@media (max-width: 600px) {
    .site-header {
        padding: 20px;
        flex-wrap: wrap;
    }
    main {
        padding-left: 20px;
        padding-right: 20px;
    }
    .hero {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 36px 0;
    }
    .hero-art {
        position: relative;
        inset: auto;
        width: 100%;
        aspect-ratio: 1 / 1;
    }
    .hero-voyage {
        object-fit: contain;
    }
    .hero-copy {
        padding-right: 0;
    }
    .category-grid, .product-grid {
        grid-template-columns: 1fr;
    }
    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0;
    }
    .site-footer {
        margin: 0 20px;
        flex-direction: column;
    }
    .site-header nav {
        gap: 22px;
    }
    .catalogue {
        padding-top: 35px;
    }
}

/* Brand story: quiet editorial layout with comfortable reading width. */
.brand-story {
    isolation: isolate;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 80px;
    padding: 64px 0 80px;
}

.story-heading {
    position: relative;
    min-width: 0;
    min-height: 680px;
    isolation: isolate;
}

.story-heading h2 {
    font-size: clamp(32px, 3.4vw, 46px);
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 22px 0;
}

.story-caption {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

.story-art {
    position: absolute;
    top: -40px;
    bottom: -30px;
    left: -40px;
    width: 155%;
    pointer-events: none;
    z-index: -1;
}

.story-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(248, 247, 242, .45) 0%, rgba(248, 247, 242, .65) 40%, transparent 60%);
}

.story-voyage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 72%, transparent 100%), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 72%, transparent 100%), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.story-copy {
    position: relative;
    max-width: 620px;
}

.story-copy p {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.9;
    margin: 0 0 22px;
}

.story-copy p:first-child {
    color: var(--ink);
    font-family: Georgia, serif;
    font-size: 23px;
    line-height: 1.5;
}

.story-copy strong {
    color: var(--ink);
}

.story-copy .story-signoff {
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-bottom: 0;
}

@media (max-width: 700px) {
    .brand-story {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 40px 0;
    }
    .story-heading {
        min-height: 540px;
    }
    .story-art {
        top: -20px;
        bottom: 0;
        left: -10px;
        width: calc(100% + 20px);
    }
}

/* Clothing catalogue and product detail */
.product-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.product-card-link:focus-visible {
    outline: 2px solid var(--ink, #203e35);
    outline-offset: 7px;
}
.product-art {
    height: auto;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 90px 90px 8px 8px;
    background: #efede6;
}
.product-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}
.product-card-link:hover .product-art img {
    transform: scale(1.035);
}
.card-audience {
    margin: 12px 0;
    font-size: 16px;
}
/* Match the two catalogue actions; terracotta echoes the homepage artwork. */
.product-card .card-detail-link,
.product-card .cart-button {
    width: 100%;
    min-height: 56px;
    padding: 15px 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font: inherit;
    line-height: 24px;
    text-align: center;
}
.card-detail-link {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    background: #c28360;
    color: #213e36;
}
.card-detail-link > [aria-hidden] {
    position: absolute;
    right: 20px;
}
.card-detail-link:hover,
.product-card-link:focus-visible .card-detail-link {
    background: #b87552;
}

.product-detail {
    max-width: 1320px;
    margin: 0 auto;
    padding: 36px 5vw 100px;
}
.product-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 36px;
    font-size: 15px;
    color: #657168;
}
.product-breadcrumb a {
    color: #203e35;
    text-underline-offset: 5px;
}
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 6vw, 88px);
}
.gallery-stage {
    position: relative;
    aspect-ratio: 3 / 4;
    background: #eceae2;
    overflow: hidden;
    border-radius: 140px 140px 12px 12px;
    isolation: isolate;
    touch-action: pan-y;
}
.gallery-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.025);
    transition: opacity 750ms ease, transform 1000ms ease;
    pointer-events: none;
}
.gallery-slide.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}
.gallery-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-arrows {
    position: absolute;
    inset: auto 22px 22px;
    display: flex;
    justify-content: space-between;
    z-index: 2;
    pointer-events: none;
}
.gallery-arrows button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #ffffff9c;
    background: #faf9f2ed;
    color: #203e35;
    font-size: 22px;
    pointer-events: auto;
    cursor: pointer;
}
.gallery-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}
.gallery-tabs {
    display: flex;
    gap: 16px;
}
.gallery-tabs button, .gallery-play {
    border: 0;
    background: transparent;
    padding: 12px 0;
    color: #6b736c;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    border-bottom: 1px solid transparent;
}
.gallery-tabs button[aria-pressed="true"] {
    color: #203e35;
    border-bottom-color: currentColor;
}
.gallery-play {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.gallery-caption {
    color: #727a71;
    font-size: 14px;
    margin-top: 10px;
}
.gallery-image-error, .detail-no-image {
    display: grid;
    place-content: center;
    height: 100%;
    text-align: center;
    color: #657168;
}
.detail-no-image {
    aspect-ratio: 3 / 4;
    background: #e9ecdf;
}
.detail-copy {
    padding-top: 48px;
}
.detail-copy h1 {
    font-size: clamp(36px, 4vw, 62px);
    line-height: 1.08;
    margin: 24px 0;
    letter-spacing: -.035em;
}
.detail-price {
    font-size: 28px;
    margin: 20px 0 30px;
}
.detail-description {
    color: #657168;
    line-height: 1.8;
    font-size: 18px;
}
.detail-stock {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0;
    font-size: 16px;
}
.stock-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #698763;
}
.sold-out .stock-dot {
    background: #a17a61;
}
.product-facts {
    border-top: 1px solid #d9ddd1;
    margin: 30px 0;
}
.product-facts div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid #d9ddd1;
    font-size: 15px;
}
.product-facts dt {
    color: #737c70;
}
.product-facts dd {
    margin: 0;
    text-align: right;
}
.detail-note {
    font-size: 14px;
    line-height: 1.8;
    color: #727a71;
}
.detail-back {
    display: flex;
    justify-content: space-between;
    padding: 20px 24px;
    background: #203e35;
    color: #faf8f2;
    text-decoration: none;
    margin-top: 30px;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
[hidden] {
    display: none !important;
}
@media (max-width: 760px) {
    .detail-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .detail-copy {
        padding-top: 12px;
    }
    .gallery-stage {
        border-radius: 100px 100px 10px 10px;
    }
    .product-art {
        border-radius: 60px 60px 6px 6px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gallery-slide, .product-art img {
        transition: none;
        transform: none;
    }
}

/* Separate return navigation from the header navigation. */
.product-breadcrumb { display: block; margin: 0 0 28px; }
.product-breadcrumb a { display: inline-flex; align-items: center; gap: 10px; padding: 0; min-height: 36px; white-space: nowrap; text-decoration: none; }
.product-breadcrumb a:hover { text-decoration: underline; }
.site-header nav { flex-wrap: wrap; align-items: center; }
.add-to-cart { margin-top: 20px; }
.cart-button { width: 100%; border: 1px solid #203e35; padding: 15px 20px; background: #203e35; color: #faf8f2; font: inherit; cursor: pointer; border-radius: 4px; }
.cart-button:hover:not(:disabled) { background: #365449; }
.cart-button:disabled { background: #e4e5dc; color: #687369; border-color: #d9ddd1; cursor: not-allowed; }
.cart-page { max-width: 1320px; padding: 52px 5vw 100px; }
.cart-page h1 { font-size: clamp(46px, 6vw, 80px); margin: 16px 0 40px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 48px; align-items: start; }
.cart-line { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 24px; padding: 28px 0; border-top: 1px solid #d9ddd1; }
.cart-image { background: #efede6; border-radius: 40px 40px 5px 5px; overflow: hidden; align-self: start; }
.cart-image img { display: block; width: 100%; height: auto; }
.cart-line h2 { font-size: 22px; margin: 0 0 12px; }
.cart-line p { font-size: 16px; }
.cart-quantity { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0; font-size: 15px; }
.cart-quantity input { width: 68px; padding: 9px; border: 1px solid #a7b2a3; background: transparent; color: inherit; font: inherit; border-radius: 3px; }
.text-button { border: 0; background: transparent; color: #203e35; text-decoration: underline; text-underline-offset: 4px; padding: 8px 0; cursor: pointer; font: inherit; font-size: 15px; }
.cart-summary { background: #e9ecdf; padding: 30px; border-radius: 5px 48px 5px 5px; }
.cart-summary h2 { font-size: 28px; }
.cart-summary p { font-size: 16px; line-height: 1.7; }
.cart-total { display: flex; justify-content: space-between; gap: 18px; padding: 22px 0; border-top: 1px solid #c7cebd; border-bottom: 1px solid #c7cebd; }
.cart-feedback { padding: 16px 20px; background: #e9ecdf; border-radius: 4px; }
.cart-error { color: #8a422e; }
.cart-empty { max-width: 600px; padding: 32px 0 70px; }
.cart-empty p { line-height: 1.8; }
.cart-empty .detail-back { max-width: 330px; }
@media (max-width: 760px) {
    .cart-layout { grid-template-columns: 1fr; gap: 24px; }
    .cart-line { grid-template-columns: 78px minmax(0, 1fr); gap: 16px; }
    .line-total { grid-column: 2; }
    .site-header nav { gap: 12px 18px; }
}

/* Account pages share the warm, quiet palette of the catalogue. */
.auth-page { max-width: 1360px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,7vw,110px); padding: 58px 5vw 80px; align-items: stretch; }
.auth-art { padding: 64px 42px; min-height: 650px; border-radius: 160px 160px 12px 12px; background: linear-gradient(180deg,#f4efe5ee 0%,#f4efe5e6 35%,#f4efe530 70%),url('/images/odyssey-voyage.png') center/cover; }
.auth-art h1 { font-size: clamp(34px,3.5vw,54px); line-height: 1.12; letter-spacing: -.025em; max-width: 380px; }
.auth-art p:not(.eyebrow) { max-width: 340px; line-height: 1.8; font-size: 17px; }
.auth-panel { padding: 10px 0 30px; max-width: 440px; width: 100%; align-self: center; }
.auth-panel h2 { font-size: clamp(36px,4vw,54px); margin: 16px 0; line-height: 1.15; }
.auth-intro { color: #657168; font-size: 17px; line-height: 1.7; margin-bottom: 28px; }
.language-switch { display: flex; justify-content: flex-end; gap: 12px; align-items: center; font-size: 15px; margin-bottom: 36px; }
.language-switch a { color: #657168; text-decoration: none; padding: 7px 0; }
.language-switch a[aria-current] { color: #203e35; border-bottom: 1px solid; }
.auth-form { display: grid; gap: 10px; }
.auth-form label { font-size: 16px; margin-top: 8px; }
.auth-form input { min-width: 0; width: 100%; padding: 14px 16px; background: #fffdf8; border: 1px solid #c9cfc3; border-radius: 5px; font: inherit; color: #203e35; }
.auth-form input:focus { outline: 2px solid #698763; outline-offset: 2px; }
.auth-form small { line-height: 1.6; color: #657168; font-size: 14px; }
.auth-form .cart-button { margin-top: 18px; }
.auth-switch { margin-top: 26px; font-size: 16px; line-height: 1.8; }
.auth-switch a { color: #203e35; text-underline-offset: 4px; }
.auth-alert,.auth-notice { padding: 14px 18px; font-size: 16px; line-height: 1.7; border-radius: 5px; }
.auth-alert { background: #f3e6dd; color: #7a3d2b; }
.auth-alert p { margin: 0; }
.auth-notice { background: #e9ecdf; }
.account-page { max-width: 850px; padding: 50px 5vw 100px; }
.account-page h1 { font-size: clamp(36px,5vw,60px); overflow-wrap: anywhere; }
.account-details { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 28px 0; margin: 32px 0; border-block: 1px solid #d9ddd1; }
.account-details dd { margin: 0; overflow-wrap: anywhere; }
.account-logout { margin-top: 20px; }
@media(max-width:760px) {
 .auth-page { grid-template-columns: 1fr; gap: 24px; padding-top: 30px; }
 .auth-art { min-height: 240px; padding: 35px 28px; border-radius: 70px 70px 8px 8px; }
 .auth-art h1 { font-size: 32px; max-width: 300px; }
 .auth-art p:not(.eyebrow) { display: none; }
 .auth-panel { max-width: none; }
 .language-switch { margin-bottom: 22px; }
 .account-details { grid-template-columns: 1fr; gap: 12px; }
}

@font-face {
    font-family: 'Odyssey Rounded';
    src: url('/fonts/ChillRoundF.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
html[lang="zh-CN"] body { font-family: 'Odyssey Rounded', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
html[lang="zh-CN"] :is(.auth-art h1, .auth-panel h2, .account-page h1) {
    font-family: 'Odyssey Rounded', 'PingFang SC', sans-serif;
    font-weight: 400;
    letter-spacing: .025em;
    line-height: 1.4;
}
.auth-art-login {
    background-image: linear-gradient(180deg,#f4efe5ee 0%,#f4efe5df 34%,#f4efe515 70%),url('/images/odyssey-login-coast.webp');
}
.auth-switch { display: grid; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid #d9ddd1; }
.auth-switch > span { display: block; color: #657168; }
.auth-switch a.auth-switch-button {
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
    width: 100%; min-height: 52px; padding: 13px 18px;
    background: #eef0e6; border: 1px solid #a4b09d; border-radius: 8px;
    color: #203e35; font-size: 17px; text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease;
}
.auth-switch-button::after { content: '\2192'; font-family: sans-serif; font-size: 22px; }
.auth-switch a.auth-switch-button:hover { background: #dfe6d6; border-color: #61775e; }
.auth-switch-button:focus-visible { outline: 3px solid #61775e; outline-offset: 4px; }
.language-switch a { min-width: 44px; min-height: 44px; display: inline-flex; justify-content: center; align-items: center; border-radius: 6px; }
.language-switch a:hover { background: #e9ecdf; }
.language-switch a:focus-visible { outline: 2px solid #61775e; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .auth-switch a.auth-switch-button { transition: none; } }

/* Order journey: shared customer and staff layouts. */
.order-page { max-width: 1160px; margin: 4rem auto; padding: 0 24px; }
.order-page h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 1rem 0; }
.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.order-card { padding: 28px; border: 1px solid #d9ded2; border-radius: 20px; background: #f0f1e9; margin: 20px 0; }
.order-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.order-badge { display: inline-block; border-radius: 24px; background: #dfe6d7; color: #21463b; padding: 8px 16px; font-weight: 600; }
.order-form { display: flex; flex-direction: column; gap: 14px; }
.order-form select, .order-form textarea { font: inherit; width: 100%; padding: 12px; border: 1px solid #8a9b8d; border-radius: 8px; background: #fffdf7; box-sizing: border-box; }
.order-button { display: inline-block; cursor: pointer; padding: 14px 24px; margin-top: 12px; background: #21463b; color: white; border: 0; border-radius: 8px; font: inherit; text-decoration: none; text-align: center; }
.order-button:hover { background: #375c4d; }
.order-cancel { background: #76584c; }
.order-item { border-bottom: 1px solid #d9ded2; padding: 14px 0; }
.order-address { white-space: pre-wrap; overflow-wrap: anywhere; }
.order-number { overflow-wrap: anywhere; }
@media(max-width: 720px) { .order-grid { grid-template-columns: 1fr; } .order-page { margin: 2rem auto; } .order-card { margin: 8px 0; padding: 20px; } }

/* Home language preference uses the same cookie as the account pages. */
.home-language-switch { display: inline-flex; align-items: center; gap: 3px; padding-left: 12px; border-left: 1px solid #d9ddd1; }
.site-header .home-language-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; border-radius: 6px; }
.home-language-switch a[aria-current="true"] { background: #e9ecdf; }
.home-language-switch a:hover { background: #dfe6d6; }
.home-language-switch a:focus-visible { outline: 2px solid #61775e; outline-offset: 3px; }
html[lang="zh-CN"] .home-page :is(h1,h2,h3) { font-family: 'Odyssey Rounded', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-weight: 400; letter-spacing: .015em; line-height: 1.35; }
html[lang="zh-CN"] .home-page .hero h1 { font-size: clamp(40px,4.8vw,66px); }
html[lang="zh-CN"] .home-page .story-copy p { line-height: 2.1; }
html[lang="zh-CN"] .home-page .category-card h3 { font-size: clamp(26px,3vw,40px); }
html[lang="zh-CN"] .home-page .eyebrow { letter-spacing: .12em; }
@media(max-width:760px) { html[lang="zh-CN"] .home-page .section-heading h2 { font-size: 28px; } }

html[lang="zh-CN"] .home-page .story-copy > p:first-child { font-family: 'Odyssey Rounded', 'PingFang SC', sans-serif; line-height: 1.8; }

.guest-cart-button { display: block; margin-top: 20px; text-align: center; text-decoration: none; box-sizing: border-box; }

/* Order summaries show the purchased items and destination without opening details. */
.order-summary-card { background: #f4f3ed; padding: 24px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(140px, .55fr); gap: 24px; align-items: center; }
.order-summary-header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid #d9ded2; }
.order-summary-footer { display: contents; }
.order-number-link { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.order-date { margin: 10px 0 0; color: #636d63; font-size: 16px; }
.order-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.order-tags .order-badge { padding: 10px 18px; border: 1px solid transparent; font-size: 17px; font-weight: 700; }
.order-tags .status-pending { background: #f1ddbc; color: #674615; border-color: #d7b980; }
.order-tags .status-preparing { background: #eed4c6; color: #743b25; border-color: #d7aa91; }
.order-tags .status-shipped, .order-tags .status-ready { background: #dce7e8; color: #285357; border-color: #a3c1c3; }
.order-tags .status-completed { background: #dce8d7; color: #2f522d; border-color: #adc5a4; }
.order-tags .status-cancelled { background: #e5e2df; color: #655952; border-color: #c5bcb6; }
.order-tags .order-fulfillment-tag { background: #21463b; color: #fffdf7; }
.order-preview-items { margin: 0; min-width: 0; }
.order-preview-item { display: flex; align-items: center; gap: 16px; padding: 10px 0; }
.order-preview-item + .order-preview-item { border-top: 1px solid #e2e4da; }
.order-preview-image { width: 84px; min-height: 112px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: #e8e8de; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.order-preview-image img { display: block; width: 84px; height: 112px; object-fit: cover; }
.order-preview-copy { min-width: 0; overflow-wrap: anywhere; }
.order-preview-copy > a { font-size: 20px; font-weight: 600; }
.order-preview-copy p { color: #636d63; margin: 10px 0 0; font-size: 16px; }
.order-destination { min-width: 0; padding: 12px 0 12px 24px; border-left: 1px solid #d9ded2; }
.order-destination > strong { display: block; font-size: 18px; color: #636d63; }
.order-destination p { margin: 12px 0 0; font-size: 21px; font-weight: 600; line-height: 1.6; }
.order-summary-total { display: grid; gap: 10px; text-align: right; }
.order-summary-total > span { font-size: 16px; color: #636d63; }
.order-summary-total > strong { font-size: 26px; }
.order-view-link { text-decoration: underline; text-underline-offset: 4px; padding: 8px 0; }
@media(max-width:900px) {
    .order-summary-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
    .order-preview-items { grid-column: 1 / -1; }
    .order-destination { border-left: 0; padding-left: 0; }
}
@media(max-width:600px) {
    .order-summary-card { padding: 20px; grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .order-summary-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .order-destination { border-top: 1px solid #d9ded2; padding-top: 18px; }
    .order-destination p { font-size: 22px; }
    .order-summary-total { text-align: left; padding-top: 14px; border-top: 1px solid #d9ded2; }
}

/* Soft sage washes vary by card while keeping a warm ivory base. */
.order-summary-card {
    background-color: #faf7ee;
    border-color: #b9c8ad;
    box-shadow: 0 5px 18px rgba(43, 66, 42, .045);
}
.order-summary-card.order-wash-0 {
    background-image: radial-gradient(ellipse at 0% 15%, rgba(163, 190, 143, .52), transparent 64%),
                      radial-gradient(ellipse at 100% 100%, rgba(205, 216, 183, .28), transparent 50%);
}
.order-summary-card.order-wash-1 {
    background-image: radial-gradient(ellipse at 100% 85%, rgba(156, 184, 141, .48), transparent 64%),
                      radial-gradient(ellipse at 15% 0%, rgba(218, 225, 197, .28), transparent 48%);
}
.order-summary-card.order-wash-2 {
    background-image: radial-gradient(ellipse at 45% 100%, rgba(172, 194, 151, .46), transparent 68%),
                      radial-gradient(ellipse at 100% 0%, rgba(197, 214, 179, .25), transparent 48%);
}
.order-summary-card.order-wash-3 {
    background-image: radial-gradient(ellipse at 70% 0%, rgba(166, 190, 150, .48), transparent 65%),
                      radial-gradient(ellipse at 0% 100%, rgba(206, 220, 187, .3), transparent 48%);
}
.order-summary-card .order-summary-header,
.order-summary-card .order-destination,
.order-summary-card .order-preview-item + .order-preview-item {
    border-color: rgba(105, 130, 91, .24);
}

/* Customer support: private conversation and a shared staff inbox. */
.support-page { max-width: 1360px; margin: 40px auto 70px; padding: 0 32px; }
.support-page h1 { font-size: clamp(30px,4vw,48px); margin: 16px 0; }
.support-intro { max-width: 850px; line-height: 1.7; color: #58695c; }
.support-connection { font-size: 15px; color: #58695c; min-height: 20px; }
.support-workspace { display: grid; gap: 24px; margin-top: 24px; align-items: start; }
.support-staff { grid-template-columns: minmax(260px,340px) minmax(0,1fr); }
.support-customer { max-width: 920px; }
.support-inbox, .support-conversation { min-width: 0; border: 1px solid #bdcbb3; background: #f7f6ee; border-radius: 18px; overflow: hidden; }
.support-metrics { display: grid; grid-template-columns: repeat(3,1fr); padding: 20px 12px; gap: 8px; background: #e0e8d7; }
.support-metrics div { display: grid; gap: 6px; text-align: center; }
.support-metrics strong { font-size: 26px; }
.support-metrics span { font-size: 15px; }
.support-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; }
.support-filters a { padding: 9px 12px; font-size: 15px; border-radius: 20px; border: 1px solid #bdcbb3; }
.support-filters a[aria-current] { color: #fff; background: #21463b; }
.support-thread { display: block; margin: 0 12px 10px; border: 1px solid #d1dac9; border-left: 4px solid #d1dac9; border-radius: 10px; padding: 15px; background: #fffdf6; }
.support-thread.needs-reply { background: #f6e7ce; border-left-color: #af663b; }
.support-thread.is-selected { outline: 2px solid #385b49; outline-offset: 1px; }
.support-thread-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.support-thread-heading strong { overflow-wrap: anywhere; }
.support-unread { color: white; background: #994e31; border-radius: 20px; padding: 4px 9px; font-size: 14px; flex-shrink: 0; }
.support-state { display: inline-block; border-radius: 20px; padding: 5px 12px; background: #e2eadb; color: #31523c; font-size: 15px; font-weight: 600; }
.support-state.pending { background: #edd2a5; color: #6c421c; }
.support-preview { font-size: 16px; color: #526051; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 10px 0; }
.support-thread time { font-size: 14px; color: #58695c; }
.support-pagination { display: flex; gap: 12px; justify-content: space-between; padding: 16px; font-size: 15px; }
.support-pagination a, .support-history-links a { text-decoration: underline; text-underline-offset: 4px; }
.support-chat-heading { padding: 22px 26px; background: linear-gradient(110deg,#dde8d2,#faf7ee); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.support-chat-heading h2 { font-size: 22px; margin: 0; overflow-wrap: anywhere; }
.support-messages { height: 420px; overflow-y: auto; padding: 24px; overscroll-behavior: contain; }
.support-message { width: fit-content; max-width: 85%; margin: 0 auto 20px 0; }
.support-message.is-mine { margin-left: auto; margin-right: 0; }
.support-message-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; color: #58695c; margin-bottom: 8px; }
.support-message p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 14px 18px; border-radius: 4px 16px 16px; border: 1px solid #d4ddca; background: #fffef8; line-height: 1.7; }
.support-message.is-mine p { border-radius: 16px 4px 16px 16px; background: #21463b; color: #fffdf7; border-color: #21463b; }
.support-empty { padding: 24px; line-height: 1.8; color: #58695c; }
.support-history-links { display: flex; gap: 20px; padding: 10px 24px; font-size: 15px; }
.support-composer { padding: 22px 26px; border-top: 1px solid #d4ddca; }
.support-composer label { display: block; font-weight: 600; margin-bottom: 12px; }
.support-composer textarea { width: 100%; resize: vertical; min-height: 110px; max-height: 360px; padding: 14px; font: inherit; line-height: 1.6; background: #fffef8; border: 1px solid #aabb9f; border-radius: 10px; }
.support-composer > div { display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; }
.support-composer > div > span { font-size: 14px; color: #58695c; }
.support-resolve { padding: 0 24px 12px; }
@media(max-width:800px) { .support-staff { grid-template-columns: minmax(0,1fr); } .support-inbox { max-height: 440px; overflow-y: auto; } .support-page { padding: 0 16px; } .support-message { max-width: 95%; } .support-chat-heading, .support-composer { padding: 18px; } .support-messages { padding: 18px; height: 360px; } }

.support-composer .support-attachments { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: 20px; margin: 18px 0; }
.support-attachments small { display: block; color: #58695c; margin-top: 8px; font-size: 14px; }
.support-attachments input, .support-attachments select { width: 100%; min-width: 0; font: inherit; font-size: 16px; }
.support-attachments select { padding: 12px; border: 1px solid #aabb9f; border-radius: 8px; background: #fffef8; }
.support-file-control { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid #aabb9f; border-radius: 6px; background: #e3eadc; color: #21463b; }
.support-file-control input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.support-file-control:hover { background: #d6e1cd; }
.support-file-control:focus-within { outline: 2px solid #698763; outline-offset: 2px; }
[data-image-preview] { margin-top: 12px; }
[data-image-preview] img { display: block; object-fit: contain; border-radius: 8px; }
[data-upload-error] { display: block; color: #8a422e; font-size: 15px; margin-top: 8px; }
.support-image-link { display: block; margin-top: 10px; }
.support-image-link img { display: block; width: min(280px,100%); height: 210px; object-fit: contain; border-radius: 12px; background: #e5eadf; }
.support-order-link { display: grid; gap: 8px; padding: 16px; margin-top: 10px; border-radius: 12px; border: 1px solid #b9c9ad; background: #e8eedf; color: #21463b; }
.support-order-link > span { font-size: 15px; }
@media(max-width:600px) { .support-composer .support-attachments { grid-template-columns: minmax(0,1fr); } }

/* The visibility control stays inside the password field without covering typed text. */
.password-field { position: relative; }
.auth-form .password-field input { padding-right: 56px; }
.password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #526b5b; cursor: pointer; }
.password-toggle:hover { background: #e8ecdf; color: #203e35; }
.password-toggle:focus-visible { outline: 2px solid #698763; outline-offset: 1px; }
.password-toggle[hidden], .password-eye-slash[hidden] { display: none; }

.support-order-products { display: grid; gap: 10px; }
.support-order-product { display: flex; align-items: center; gap: 12px; }
.support-order-product img, .support-product-placeholder { width: 64px; height: 80px; flex: 0 0 64px; border-radius: 8px; object-fit: cover; background: #f7f5ee; }
.support-product-placeholder { display: grid; place-items: center; font-size: 14px; }
.support-order-product small { display: block; margin-top: 4px; color: #607063; }

/* Catalogue search and filters */
.catalogue-filters { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1fr 1.4fr; gap: 16px; padding: 24px; margin: 28px 0; background: #e9eddf; border: 1px solid #ccd6c2; border-radius: 16px; }
.catalogue-filters label { display: flex; flex-direction: column; gap: 8px; font-size: 16px; font-weight: 600; min-width: 0; }
.catalogue-filters input, .catalogue-filters select { width: 100%; min-width: 0; box-sizing: border-box; height: 46px; padding: 10px 12px; border: 1px solid #8b9d88; border-radius: 8px; background: #fffdf7; color: #203f36; font: inherit; }
.catalogue-filters :focus-visible { outline: 2px solid #315e50; outline-offset: 3px; }
.filter-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; }
.filter-actions button { border: 0; border-radius: 8px; background: #203f36; color: white; padding: 12px 26px; font: inherit; cursor: pointer; }
.filter-actions a { padding: 10px 0; text-decoration: underline; text-underline-offset: 4px; }
.filter-error { color: #8b3c27; }
@media (max-width: 1000px) { .catalogue-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .catalogue-search { grid-column: 1 / -1; } }
@media (max-width: 540px) { .catalogue-filters { padding: 16px; grid-template-columns: minmax(0, 1fr); } }

/* Comfortable reading sizes across storefront and staff pages. */
input, select, textarea, button { font-size: inherit; }
input, select, textarea { line-height: 1.5; }
.site-header nav { gap: 16px 24px; }
.site-header nav > a { white-space: nowrap; }
.brand { flex-shrink: 0; }
.brand-small { max-width: 64px; }
.product-heading { flex-wrap: wrap; }
.product-heading h3 { min-width: 0; overflow-wrap: anywhere; }
.price { white-space: nowrap; }
.support-message, .detail-description { line-height: 1.8; }
@media(max-width:600px) {
    body { font-size: 17px; }
    .site-header nav { gap: 10px 18px; }
    input, select, textarea { font-size: 16px; }
}

.membership-price-breakdown{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;border-top:1px solid var(--line);padding-top:20px}.membership-price-breakdown dd{margin:0;text-align:right}.membership-price-breakdown strong{font-size:24px}

.address-card { margin-bottom: 20px; }
.address-text, .order-address { white-space: pre-line; overflow-wrap: anywhere; }
.address-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.address-actions form { margin: 0; }
.address-default { display: flex; gap: 12px; align-items: center; }
.order-form .address-default input { width: auto; }
.order-form input:not([type="hidden"]):not([type="checkbox"]) {
    width: 100%; box-sizing: border-box; padding: 12px; font: inherit;
    border: 1px solid #8a9b8d; border-radius: 8px; background: #fffdf7;
}
#delivery-details:not([hidden]), #manual-address:not([hidden]), #saved-addresses {
    display: grid; gap: 14px; min-width: 0;
}
.variant-picker { margin: 16px 0; }
.variant-picker label { display: block; margin-bottom: 10px; }
.variant-picker select {
    width: 100%; box-sizing: border-box; padding: 14px; border: 1px solid #a7b69b;
    border-radius: 8px; font: inherit; background: #fffdf7;
}
.variant-picker p { font-size: 16px; line-height: 1.6; color: var(--muted); }

/* Address book: compact, readable cards and a separate editing panel. */
.address-layout { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; gap:32px; }
.address-list { min-width:0; }
.address-list-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:16px; }
.address-list-heading h2 { margin:0; font-family:inherit; font-size:22px; font-weight:600; line-height:1.4; }
.address-list-heading>span { color:#69756a; font-size:16px; }
.address-page .address-card { padding:24px; margin:0 0 18px; background:#fffdf7; border:1px solid #d9ded2; border-radius:18px; box-shadow:0 4px 18px #203e3506; }
.address-page .address-card.is-default { background:linear-gradient(120deg,#edf2e5,#fffdf7 75%); border-color:#b7c8ac; }
.address-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.address-recipient { display:flex; align-items:center; gap:14px; min-width:0; }
.address-recipient>div { min-width:0; }
.address-recipient h3 { font-family:inherit; font-size:23px; line-height:1.4; margin:0; overflow-wrap:anywhere; }
.address-page .address-phone { margin:4px 0 0; font-size:17px; color:#617064; overflow-wrap:anywhere; }
.address-icon { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border-radius:14px; background:#e5ecdd; }
.address-icon svg { width:24px; height:24px; }
.address-default-badge { padding:6px 10px; border-radius:8px; font-size:14px; font-weight:600; white-space:nowrap; color:#385b40; background:#e1ead7; }
.address-destination { margin:22px 0; }
.address-caption { font-size:14px; color:#617064; }
.address-page .address-text { margin:6px 0 0; font-size:19px; line-height:1.65; }
.address-page .address-actions { padding-top:16px; border-top:1px solid #dbe2d4; gap:10px; }
.address-action { display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; min-height:42px; box-sizing:border-box; border:1px solid #ccd7c3; border-radius:8px; background:transparent; color:#294a3e; font:inherit; font-size:16px; text-decoration:none; cursor:pointer; }
.address-action:hover { background:#e7eddf; }
.address-action:focus-visible { outline:2px solid #61775e; outline-offset:3px; }
.address-actions .address-delete { margin-left:auto; }
.address-delete .address-action { color:#865343; border-color:transparent; }
.address-delete .address-action:hover { background:#f3e7df; }
.address-page .address-editor { margin:0; background:#f0f2e9; }
.address-editor h2 { font-family:inherit; font-size:24px; margin:0 0 8px; }
.address-empty { padding:28px; border:1px dashed #bac9af; border-radius:16px; line-height:1.7; }
@media(max-width:800px) { .address-layout { grid-template-columns:1fr; } }
@media(max-width:420px) { .address-page .address-card { padding:18px; } .address-icon { display:none; } .address-recipient h3 { font-size:21px; } }

/* Address editor enters from the list side without shifting the page layout. */
.address-editor { scroll-margin-top:24px; }
.address-editor-enter { animation:address-editor-in 420ms cubic-bezier(.22,1,.36,1) both; }
.address-page .address-card { transition:border-color 200ms ease, box-shadow 200ms ease; }
.address-page .address-card.is-editing { border-color:#78966a; box-shadow:0 0 0 2px #78966a1a; }
.address-editor[aria-busy="true"] { cursor:progress; }
@keyframes address-editor-in { from { opacity:0; transform:translateX(-44px); } to { opacity:1; transform:translateX(0); } }
@media(prefers-reduced-motion:reduce) { .address-editor-enter { animation:none; } .address-page .address-card { transition:none; } }