:root {
    --bg: #FFFFFF;
    --bg-deep: #E7D8C4;
    --card: #F7F1E6;
    --ink: #2B241C;
    --muted: #6F5E4C;
    --line: #E3D4C2;
    --gold: #8F6B2E;
    --gold-soft: #E7D3B0;
    --chip: #E7D8C4;
    --dark: #2B241C;
    --danger: #8E3A44;
    --ok: #2F6A45;
    --shadow: 0 10px 28px rgba(92, 62, 32, 0.08);
    --app: 430px;
    color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); overflow-x: clip; }
body {
    font-family: Manrope, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
    min-height: 100dvh;
    overflow-x: clip;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg.garment { display: block; width: 100%; height: 100%; object-fit: cover; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::placeholder { color: #9A8874; }

.app {
    width: 100%;
    min-height: 100dvh;
    margin: 0 auto;
    background-color: var(--bg);
    background-image: none;
    position: relative;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    background: #FFFFFF;
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 24px rgba(92, 62, 32, 0.08);
    transition: transform 0.9s cubic-bezier(.22, .8, .24, 1), box-shadow 0.9s ease;
}
.topbar.is-up {
    transform: translateY(calc(-100% - 28px));
    box-shadow: none;
    transition: transform 0.22s cubic-bezier(.2, .9, .2, 1), box-shadow 0.22s ease;
}
@media (prefers-reduced-motion: reduce) {
    .topbar, .topbar.is-up { transition: none; }
}
.ribbon {
    display: flex;
    align-items: stretch;
    height: 34px;
    background: #241C16;
    color: #F6F0E6;
    text-decoration: none;
    overflow: hidden;
}
.ribbon-tag {
    flex: none;
    display: grid;
    place-items: center;
    padding: 0 14px;
    background: #C4A36A;
    color: #241C16;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ribbon-track {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.ribbon-run { display: flex; width: max-content; animation: ribbonRun 32s linear infinite; }
.ribbon:hover .ribbon-run { animation-play-state: paused; }
.ribbon-set { display: flex; align-items: center; }
.ribbon-set span {
    padding: 0 16px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.ribbon-set i {
    width: 6px;
    height: 6px;
    flex: none;
    background: #C4A36A;
    transform: rotate(45deg);
}
@keyframes ribbonRun {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ribbon-run { animation: none; }
    .ribbon-set[aria-hidden="true"] { display: none; }
    .ribbon-set span:not(:first-child), .ribbon-set i { display: none; }
}
.appbar {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    transform: none;
    background: transparent;
}
.appbar.home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 64px;
    padding: 8px 4px 4px;
}
.appbar.page {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    min-height: 56px;
    padding: 6px 10px;
}
.appbar.page h1 {
    margin: 0;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-title { display: none; margin: 0; }
.loc {
    display: flex;
    gap: 4px;
    align-items: center;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
}
.loc svg { width: 18px; height: 18px; color: var(--gold); flex: 0 0 auto; }
.loc small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
.loc { max-width: 98px; flex: 0 1 98px; }
.loc span { min-width: 0; }
.loc b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
}
.brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.brand-mark {
    width: 7px;
    height: 7px;
    margin-bottom: 2px;
    background: var(--gold);
    transform: rotate(45deg);
    border-radius: 1px;
}
.brand-name {
    font-family: "Cormorant Garamond", Georgia, serif;
    letter-spacing: 0.12em;
    font-size: 17px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}
.brand-logo { display: block; width: min(178px, calc(100vw - 210px)); height: auto; object-fit: contain; }
.bar-end { display: contents; }
.bag-pill, .seek { display: none; }
@media (max-width: 979px) {
    .appbar.home { justify-content: flex-start; gap: 6px; padding: 8px 10px 6px 14px; }
    .appbar.home .brand { position: static; transform: none; margin-right: auto; }
    .appbar.home .loc {
        flex: 0 1 auto;
        gap: 6px;
        max-width: calc(100vw - 260px);
        height: 38px;
        padding: 0 10px 0 8px;
        border: 1px solid rgba(176, 141, 69, 0.32);
        border-radius: 999px;
    }
    .appbar.home .loc svg { width: 16px; height: 16px; }
    .appbar.home .loc small { font-size: 9.5px; line-height: 1.1; }
    .appbar.home .loc b { font-size: 11.5px; line-height: 1.2; }
    .appbar.home .mob-tools { margin-left: 0; }
}
.iconbtn, .heart button, .qty button {
    position: relative;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    display: grid;
    place-items: center;
    color: var(--ink);
    padding: 0;
}
.iconbtn svg, .heart button svg, .qty button svg { width: 22px; height: 22px; }
.iconbtn.bell { position: relative; flex: 0 0 40px; }
.mob-tools { margin-left: auto; display: flex; align-items: center; }
.mob-bag { position: relative; }
.dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
}
.iconbtn.quiet { pointer-events: none; }

.searchbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 16px 8px;
    height: 48px;
    padding: 0 14px;
    background: #F8F2E8;
    border: 1px solid #E4D5C2;
    border-radius: 999px;
}
.search-icon svg { width: 18px; height: 18px; color: var(--muted); display: block; }
.searchbar input {
    width: 100%;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 16px;
}

.main { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.main.with-buy { padding-bottom: calc(168px + env(safe-area-inset-bottom)); }
.main.with-bag, .main.with-check { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

.hero-scroller, .h-scroll, .chips {
    scrollbar-width: none;
}
.hero-scroller::-webkit-scrollbar,
.h-scroll::-webkit-scrollbar,
.chips::-webkit-scrollbar { display: none; }

.hero-scroller {
    display: block;
    padding: 8px 16px 4px;
}
.hero-scroller > .hero + .hero { display: none; }
.desk-head { display: none; }
.hero {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 196px;
    border-radius: 22px;
    overflow: hidden;
    padding: 22px 18px 18px;
    box-shadow: var(--shadow);
}
.hero.festive { background: linear-gradient(115deg, #F8E7E1 0%, #F3D5CE 46%, #E8C4C2 100%); }
.hero.summer { background: linear-gradient(115deg, #F6EFE6 0%, #E7D8F0 100%); }
.hero.jewel { background: linear-gradient(115deg, #F6EFE2 0%, #EAD7B4 100%); }
.hero.has-photo {
    min-height: 292px;
    background-image: linear-gradient(100deg, rgba(32, 24, 18, 0.72) 0%, rgba(32, 24, 18, 0.28) 52%, rgba(32, 24, 18, 0.05) 100%), var(--hero);
    background-size: cover;
    background-position: center top;
    color: #F7F1E6;
}
.hero.has-photo p { color: rgba(247, 241, 230, 0.9); }
.hero.has-photo .badge { color: var(--ink); }
.hero.has-photo .hero-cta { background: #F6F0E6; color: var(--ink); }
.hero.has-photo .hero-art { display: none; }
.hero.hero-slider { padding: 0; }
.hero-track {
    display: flex;
    height: 100%;
    min-height: inherit;
}
.hero-slide {
    position: relative;
    flex: 0 0 100%;
    min-height: 292px;
    padding: 20px 18px 22px;
    color: #F7F1E6;
    background-image: linear-gradient(100deg, rgba(32, 24, 18, 0.72) 0%, rgba(32, 24, 18, 0.28) 52%, rgba(32, 24, 18, 0.05) 100%), var(--hero);
    background-size: cover;
    background-position: center 18%;
}
.hero-slide p { color: rgba(247, 241, 230, 0.9); }
.hero-slide .badge { color: var(--ink); }
.hero-slide .hero-cta { background: #F6F0E6; color: var(--ink); }
.hero-dots {
    position: absolute;
    z-index: 2;
    right: 16px;
    bottom: 14px;
    display: none;
    gap: 6px;
}
.hero-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(246, 240, 230, 0.45);
}
.hero-dots button.on { width: 18px; background: #F6F0E6; }
.hero-copy { position: relative; z-index: 1; max-width: 62%; }
.eyebrow, .hero .badge {
    display: inline-flex;
    align-items: center;
    background: rgba(247, 241, 230, 0.78);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.hero h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 34px;
    line-height: 0.95;
    font-weight: 600;
    margin: 12px 0 8px;
}
.hero p { margin: 0 0 14px; color: #5C4A40; font-size: 13px; line-height: 1.35; }
.hero-cta {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--dark);
    color: #F6F0E6;
    font-size: 13px;
    font-weight: 700;
}
.hero-art {
    position: absolute;
    right: -8px;
    top: 8px;
    width: 48%;
    height: 118%;
    pointer-events: none;
}
.hero-art svg { background: transparent; }

.chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 16px 4px;
}
.chip {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 9px 16px;
    background: var(--chip);
    color: var(--ink);
    font-size: 14px;
    font-weight: 650;
    font-weight: 600;
    text-transform: lowercase;
}
.chips .chip:first-child { text-transform: none; }
.chip.active { background: var(--dark); color: #F6F0E6; }

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 16px 10px;
}
.section-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.section-head a { color: var(--gold); font-size: 13px; font-weight: 700; }
.home-head {
    text-align: center;
    padding: 34px 20px 8px;
}
.home-head .kicker {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.home-head h2 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 0.95;
}
.home-head h2::after,
.page-head h1::after {
    content: "";
    display: block;
    width: 42px;
    height: 1px;
    margin: 14px auto 0;
    background: var(--gold);
}
.page-head { padding-top: 22px; padding-bottom: 0; }
.page-head h1 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 44px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 0.95;
    text-wrap: balance;
}
.page-head h1.long { font-size: 36px; }
.page-head .slogan {
    margin: 14px auto 0;
    max-width: 440px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}
.shop-bar { justify-content: flex-end; padding-top: 10px; }
.home-head a {
    display: inline-block;
    margin-top: 12px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.h-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 16px 6px;
}
.collection-card {
    flex: 0 0 168px;
    scroll-snap-align: start;
    background: var(--card);
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(90, 60, 30, 0.06);
    box-shadow: var(--shadow);
}
.collection-art { display: block; height: 188px; position: relative; }
.collection-art .flag, .pcard .flag, .pdp-gallery .flag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    background: rgba(247, 241, 230, 0.92);
    color: var(--ink);
    border-radius: 999px;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
}
.collection-meta { display: block; padding: 12px 14px 14px; background: #F8F2E8; }
.collection-meta strong { display: block; font-size: 15px; }
.collection-meta small { color: var(--muted); font-size: 12px; }

.cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 16px 8px;
}
.cat-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-deep);
    box-shadow: var(--shadow);
}
.cat-card img,
.cat-card svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.cat-card b {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 42px 12px 12px;
    background: linear-gradient(transparent, rgba(28, 20, 14, 0.78));
    color: #F6F0E6;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}

.pcard {
    position: relative;
    background: var(--card);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(90, 60, 30, 0.06);
    scroll-snap-align: start;
}
.h-scroll .pcard { flex: 0 0 168px; }
.home-new {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 12px;
}
.home-new .pcard { flex: none; width: auto; }
.pcard-media { display: block; height: 190px; position: relative; background: var(--bg-deep); }
.h-scroll .pcard-media { height: 200px; }
.pcard-info { display: block; padding: 10px 10px 12px; }
.pcard-info h3 {
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 650;
    font-weight: 600;
    line-height: 1.3;
    min-height: 34px;
}
.price-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.compare-add { margin: 0; padding: 0 10px 12px; }
.compare-add button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
}
.compare-add button.on { color: var(--ink); }
.buybar .iconbtn.in { color: var(--gold); border-color: var(--gold); }
.price { font-weight: 750; font-weight: 700; color: #6E4A2E; }
.mrp { color: var(--muted); text-decoration: line-through; font-size: 12px; }
.off {
    background: var(--gold-soft);
    color: #6E4E1E;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
}
.heart { position: absolute; top: 8px; right: 8px; z-index: 2; }
.heart button {
    width: 34px;
    height: 34px;
    background: rgba(247, 241, 230, 0.92);
    box-shadow: 0 4px 12px rgba(70, 40, 20, 0.08);
}
.heart button.on { color: var(--danger); }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 16px 12px;
}
.grid-2 .pcard-media { height: 210px; }

.house-piece {
    display: grid;
    gap: 14px;
    margin: 26px 16px 8px;
}
.house-photo {
    position: relative;
    display: block;
    height: 380px;
    border-radius: 26px;
    overflow: hidden;
    background: var(--bg-deep);
}
.house-stamp {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(247, 241, 230, 0.92);
    color: var(--gold);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 18px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.house-copy .kicker {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.house-copy h2 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 0.95;
}
.house-copy h2::after {
    content: "";
    display: block;
    width: 42px;
    height: 1px;
    margin: 14px 0 0;
    background: var(--gold);
}
.house-copy p { margin: 14px 0 0; max-width: 460px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.house-price { color: var(--ink) !important; font-weight: 700; font-size: 18px; }
.house-copy .hero-cta { margin-top: 16px; }
.atelier {
    margin: 32px 0 10px;
    background: var(--dark);
    color: #F6F0E6;
}
.atelier-inner { padding: 34px 20px 28px; }
.atelier .kicker {
    display: block;
    margin: 0 0 8px;
    color: var(--gold-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.atelier h2 {
    margin: 0 0 18px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 0.95;
}
.atelier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.atelier-list li { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: start; }
.atelier-list b {
    font-family: "Cormorant Garamond", Georgia, serif;
    color: var(--gold-soft);
    font-size: 22px;
    font-weight: 600;
}
.atelier-list span { color: rgba(246, 240, 230, 0.86); font-size: 14px; line-height: 1.5; }
.atelier-ticket {
    display: block;
    margin-top: 22px;
    padding: 18px 16px;
    border-radius: 18px;
    border: 1px solid rgba(231, 211, 176, 0.5);
    background: rgba(247, 241, 230, 0.06);
}
.atelier-ticket b {
    display: block;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0.08em;
}
.atelier-ticket p { margin: 8px 0 0; color: rgba(246, 240, 230, 0.8); font-size: 14px; line-height: 1.5; }
.offer {
    display: block;
    margin: 18px 16px 4px;
    padding: 22px 18px;
    border-radius: 20px;
    text-align: center;
    background: linear-gradient(120deg, #EFE2C8, #E7D0C2);
}
.offer .kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.offer b { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; font-weight: 600; }
.offer p { margin: 6px auto 0; max-width: 460px; color: #5C4A40; font-size: 13px; line-height: 1.45; }

.loved {
    width: min(760px, calc(100% - 36px));
    margin: 4px auto 28px;
    overflow: hidden;
    text-align: center;
}
.loved-track { display: flex; align-items: stretch; }
.loved-slide {
    flex: 0 0 100%;
    padding: 6px 8px 18px;
}
.loved-slide .stars { justify-content: center; }
.loved-slide blockquote {
    margin: 16px 0 18px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}
.loved-slide blockquote::before { content: "“"; color: var(--gold); }
.loved-slide blockquote::after { content: "”"; color: var(--gold); }
.loved-slide strong { display: block; font-size: 14px; }
.loved-slide a {
    display: inline-block;
    margin-top: 4px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.loved-dots { display: flex; justify-content: center; gap: 7px; }
.loved-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: #D9CBB8;
}
.loved-dots button.on { width: 20px; background: var(--gold); }
.quote {
    flex: 0 0 240px;
    scroll-snap-align: start;
    background: var(--card);
    border-radius: 18px;
    padding: 14px;
    border: 1px solid rgba(90, 60, 30, 0.06);
}
.quote p { margin: 8px 0; font-size: 13px; line-height: 1.45; }
.quote small { color: var(--muted); }

.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 14px; height: 14px; }
.stars i { display: grid; color: #D9CBB8; font-style: normal; }
.stars i.on { color: var(--gold); }

.link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 8px 16px 18px;
}
.link-row a { color: var(--muted); font-size: 12px; font-weight: 600; }
.fine {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    padding: 0 16px 8px;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 8px 16px 12px;
}
.blog-card {
    display: block;
    background: var(--card);
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(90, 60, 30, 0.06);
    box-shadow: var(--shadow);
}
.blog-photo { display: block; height: 220px; }
.blog-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.blog-copy { display: block; padding: 16px 16px 18px; }
.blog-copy small {
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.blog-copy strong {
    display: block;
    margin: 8px 0 6px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.05;
}
.blog-copy em {
    display: block;
    color: var(--muted);
    font-style: normal;
    font-size: 13px;
    line-height: 1.45;
}
.blog-read {
    width: min(720px, calc(100% - 32px));
    margin: 12px auto 28px;
}
.blog-read .kicker {
    margin: 0;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.blog-read h1 {
    margin: 8px 0 16px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 0.95;
}
.blog-read img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center top;
    border-radius: 22px;
    margin-bottom: 18px;
}
.blog-read p { line-height: 1.65; color: #4E4036; }
.blog-read .hero-cta { margin-top: 8px; }

.site-foot {
    margin-top: 40px;
    padding: 0 16px calc(96px + env(safe-area-inset-bottom));
    background: #FFFFFF;
    color: #5C4A3A;
}
.site-foot > * { width: min(1240px, 100%); margin-left: auto; margin-right: auto; }
.foot-call {
    position: relative;
    display: grid;
    gap: 22px;
    padding: 30px 22px;
    border: 1px solid rgba(176, 141, 69, 0.38);
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 12%, rgba(243, 222, 154, 0.6), rgba(243, 222, 154, 0) 42%),
        linear-gradient(135deg, #FCF6EA 0%, #F4E6C8 100%);
    isolation: isolate;
}
.foot-call::before,
.foot-call::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(176, 141, 69, 0.35);
    border-radius: 50%;
    pointer-events: none;
}
.foot-call::before { right: -90px; top: -110px; width: 280px; height: 280px; }
.foot-call::after { right: -40px; top: -60px; width: 180px; height: 180px; }
.foot-kicker { margin: 0; color: #8C6A2F; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }
.foot-call h2 {
    margin: 10px 0 0;
    color: #2A221B;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.02;
}
.foot-call-copy > p:last-child { max-width: 460px; margin: 12px 0 0; color: #5C4A3A; font-size: 14.5px; line-height: 1.6; }
.foot-call-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.foot-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 24px;
    border: 1px solid #8C6A2F;
    border-radius: 999px;
    background: #FFFFFF;
    color: #2A221B;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.foot-btn svg { width: 18px; height: 18px; transition: transform 0.25s ease; }
.foot-btn:hover { transform: translateY(-2px); }
.foot-btn.is-gold { background: #8C6A2F; color: #FFFFFF; box-shadow: 0 12px 24px rgba(140, 106, 47, 0.28); }
.foot-btn.is-gold:hover { background: #6A5224; }
.foot-btn.is-gold:hover svg { transform: translateX(4px); }
.foot-btn:not(.is-gold):hover { background: #FBF6EC; }
.foot-main { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 18px; margin-top: 40px; }
.foot-brand { grid-column: 1 / -1; }
.foot-logo { display: inline-block; }
.foot-logo img { display: block; width: 260px; max-width: 100%; height: auto; }
.foot-logo strong { color: #8C6A2F; font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; letter-spacing: 0.16em; }
.foot-brand > p { max-width: 340px; margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; }
.foot-contact { margin: 16px 0 0; padding: 0; list-style: none; }
.foot-contact a,
.foot-contact span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 5px 0;
    color: #3C3126;
    font-size: 14px;
    font-weight: 600;
}
.foot-contact svg { flex: none; width: 18px; height: 18px; color: #8C6A2F; }
.foot-contact a:hover { color: #8C6A2F; }
.foot-social { display: flex; gap: 10px; margin-top: 18px; }
.foot-social a,
.foot-social button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(176, 141, 69, 0.42);
    border-radius: 50%;
    background: #FFFFFF;
    color: #6A5224;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.foot-social svg { width: 19px; height: 19px; }
.foot-social a:hover,
.foot-social button:hover { background: #8C6A2F; border-color: #8C6A2F; color: #FFFFFF; transform: translateY(-2px); }
.foot-col b {
    display: block;
    margin-bottom: 12px;
    color: #8C6A2F;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.foot-col a {
    position: relative;
    display: block;
    width: fit-content;
    margin: 9px 0;
    color: #3C3126;
    font-size: 14.5px;
    font-weight: 500;
    transition: color 0.25s ease;
}
.foot-col a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.foot-col a:hover { color: #8C6A2F; }
.foot-col a:hover::after { transform: scaleX(1); }
.foot-col a.is-sale { color: #A23B3B; }
.foot-promise {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin-top: 36px;
    padding: 18px 0;
    border-top: 1px solid rgba(176, 141, 69, 0.28);
    border-bottom: 1px solid rgba(176, 141, 69, 0.28);
}
.foot-perks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.foot-perks li { display: inline-flex; align-items: center; gap: 8px; color: #3C3126; font-size: 13px; font-weight: 600; }
.foot-perks li::before { content: ""; width: 6px; height: 6px; background: #C6A15B; transform: rotate(45deg); }
.foot-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.foot-pay span { margin-right: 4px; color: #8C6A2F; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.foot-pay i {
    padding: 6px 12px;
    border: 1px solid rgba(176, 141, 69, 0.4);
    border-radius: 8px;
    background: #FBF6EC;
    color: #3C3126;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}
.foot-mark {
    margin-top: 22px;
    overflow: hidden;
    color: transparent;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(40px, 12.2vw, 166px);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 0.82;
    text-align: center;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(198, 161, 91, 0.32) 0%, rgba(198, 161, 91, 0.04) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 1px rgba(176, 141, 69, 0.42);
    user-select: none;
}
.foot-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(176, 141, 69, 0.28);
    color: #7A6856;
    font-size: 12.5px;
}
.foot-credit { color: #3C3126; font-weight: 700; }
.foot-credit:hover { color: #8C6A2F; }
.foot-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(176, 141, 69, 0.42);
    border-radius: 999px;
    background: #FFFFFF;
    color: #3C3126;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}
.foot-top svg { width: 14px; height: 14px; }
@media (max-width: 979px) {
    .foot-top { order: -1; }
}
.foot-top:hover { background: #8C6A2F; border-color: #8C6A2F; color: #FFFFFF; }
@media (min-width: 980px) {
    .site-foot { margin-top: 64px; padding: 0 32px 28px; }
    .foot-call { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 46px 56px; }
    .foot-call h2 { font-size: 52px; }
    .foot-call::before { right: -60px; top: -140px; width: 380px; height: 380px; }
    .foot-call::after { right: 40px; top: -60px; width: 220px; height: 220px; }
    .foot-main { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
    .foot-brand { grid-column: auto; }
    .foot-promise { margin-top: 48px; }
    .foot-bar { padding-right: 150px; }
}

.tabbar, .buybar {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    width: 100%;
    background: #FFFFFF;
    backdrop-filter: blur(16px);
}
.desk-menu, .desk-search, .desk-tools { display: none; }
.appbar.page .loc,
.appbar.page .brand,
.appbar.page .desk-menu,
.appbar.page .desk-search,
.appbar.page .desk-tools { display: none; }
.appbar.home .mob-back,
.appbar.home .mob-title { display: none; }
.appbar.page .mob-title { grid-column: 2; }
.appbar.page .mob-tools { grid-column: 3; justify-self: end; margin-left: 0; }
.mob-bag .dot,
.desk-tools .dot,
.tab-icon i {
    top: 2px;
    right: 0;
    width: auto;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    color: #F6F0E6;
    font-size: 10px;
    font-style: normal;
    display: grid;
    place-items: center;
}
.chat-dock {
    position: fixed;
    z-index: 36;
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom));
}
body:has(.with-buy) .chat-dock { bottom: calc(158px + env(safe-area-inset-bottom)); }
body:has(.with-bag) .chat-dock,
body:has(.with-check) .chat-dock { bottom: calc(148px + env(safe-area-inset-bottom)); }
.chat-launcher {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 58px;
    padding: 6px 16px 6px 6px;
    border: 1px solid rgba(143, 107, 46, 0.35);
    border-radius: 999px;
    background: linear-gradient(180deg, #FBF7F0 0%, #F3E7D6 100%);
    color: var(--ink);
    box-shadow: 0 14px 32px rgba(43, 36, 28, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.chat-mark {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--dark);
    color: #F6F0E6;
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 1px rgba(231, 211, 176, 0.35);
}
.chat-mark i {
    position: absolute;
    top: 6px;
    width: 6px;
    height: 6px;
    background: var(--gold-soft);
    transform: rotate(45deg);
    border-radius: 1px;
}
.chat-mark svg { width: 22px; height: 22px; margin-top: 4px; }
.chat-word {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--gold);
}
.chat-panel {
    position: absolute;
    right: 0;
    bottom: 70px;
    width: min(360px, calc(100vw - 32px));
    height: min(520px, calc(100dvh - 180px));
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(90, 60, 30, 0.1);
    box-shadow: 0 18px 50px rgba(43, 36, 28, 0.22);
}
.chat-panel[hidden] { display: none; }
.chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 12px 12px 16px;
    background: var(--dark);
    color: #F6F0E6;
}
.chat-head .kicker {
    margin: 0;
    color: var(--gold-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.chat-head strong {
    display: block;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
}
.chat-head .iconbtn { color: #F6F0E6; }
.chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chat-msg { max-width: 88%; }
.chat-msg p { margin: 0; font-size: 14px; line-height: 1.45; }
.chat-msg.bot {
    align-self: flex-start;
    background: var(--card);
    border-radius: 16px 16px 16px 4px;
    padding: 10px 12px;
    border: 1px solid rgba(90, 60, 30, 0.06);
}
.chat-msg.me {
    align-self: flex-end;
    background: var(--dark);
    color: #F6F0E6;
    border-radius: 16px 16px 4px 16px;
    padding: 10px 12px;
}
.chat-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-links a {
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
}
.chat-cards { display: grid; gap: 8px; margin-top: 8px; }
.chat-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 8px;
    align-items: center;
    color: inherit;
}
.chat-card img { width: 48px; height: 60px; object-fit: cover; border-radius: 8px; background: var(--bg-deep); }
.chat-card b { display: block; font-size: 13px; }
.chat-card span { color: var(--muted); font-size: 12px; }
.chat-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 12px 8px;
}
.chat-chips button {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: var(--chip);
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
}
.chat-form {
    display: flex;
    gap: 8px;
    padding: 0 12px 12px;
}
.chat-form input { height: 44px; }
.chat-form .btn { width: auto; height: 44px; margin: 0; padding: 0 16px; }
.tabbar {
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid #E6D8C6;
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
}
.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}
.tab-icon {
    width: 48px;
    height: 28px;
    display: grid;
    place-items: center;
    position: relative;
}
.tab svg { width: 22px; height: 22px; }
.tab.active { color: var(--ink); }
.tab.active .tab-icon { background: var(--gold-soft); border-radius: 999px; }
.tab-icon i {
    position: absolute;
    top: -4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--danger);
    color: #F6F0E6;
    font-style: normal;
    font-size: 10px;
    display: grid;
    place-items: center;
}

html.sheet-lock, html.sheet-lock body { overflow: hidden; }
.sheet-root {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    align-items: flex-end;
    justify-content: center;
}
.sheet-root.open { display: flex; }
.sheet-root[hidden] { display: none !important; }
.sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(36, 28, 20, 0.48);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.sheet {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    max-height: min(82dvh, calc(100dvh - 72px - env(safe-area-inset-bottom)));
    overflow: auto;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid rgba(176, 141, 69, 0.22);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -18px 48px rgba(40, 28, 14, 0.18);
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
    animation: rise 0.28s ease;
}
body:has(.tabbar) .sheet {
    margin-bottom: calc(76px + env(safe-area-inset-bottom));
    max-height: min(78dvh, calc(100dvh - 152px - env(safe-area-inset-bottom)));
    border-radius: 24px;
}
.handle {
    width: 42px;
    height: 4px;
    border-radius: 99px;
    background: #E2D4BC;
    display: block;
    margin: 4px auto 12px;
}
.sheet h2 { margin: 0 0 12px; font-size: 22px; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; }
.sheet-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}
.sheet-top h2 { margin: 0; }
.sheet-kicker {
    margin: 0 0 2px;
    color: #8C6A2F;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.sheet-x {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(176, 141, 69, 0.28);
    background: #FFFCF5;
    color: #8C6A2F;
}
.sheet-x-abs {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}
.sheet-bell .handle { display: none; }
.note-list { display: grid; gap: 8px; }
.note-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 28px 16px 24px;
    text-align: center;
    color: #9A8874;
}
.note-empty span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 16px;
    background: #FFF8EC;
    color: #B08D45;
}
.note-empty span svg { width: 22px; height: 22px; }
.note-empty p { margin: 0; color: #3C3126; font-size: 15px; font-weight: 700; }
.note-empty small { font-size: 12.5px; }
@keyframes rise { from { transform: translateY(18px); opacity: 0.55; } to { transform: translateY(0); opacity: 1; } }

.loc-lead { margin: -4px 0 14px; color: var(--muted); font-size: 13px; }
.loc-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 14px 14px 12px;
    margin-bottom: 12px;
}
.loc-pin {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--gold-soft);
    color: var(--gold);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.loc-pin svg { width: 20px; height: 20px; }
.loc-card small {
    display: block;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.loc-card strong {
    display: block;
    margin-top: 2px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.05;
}
#loc-meta { margin: 2px 0 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.loc-found { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.loc-found:empty { display: none; }
.loc-sec {
    margin: 16px 0 8px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.city-list form { display: contents; }
.loc-form { margin-top: 4px; }
.city-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.city-list button, .size, .swatch {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 999px;
    padding: 8px 12px;
}
.city-list button.on, .size.active, .swatch.active { background: var(--dark); color: #F6F0E6; border-color: var(--dark); }
.note-row, .list-row, .addr, .cart-line, .sum, .panel {
    display: block;
    background: var(--card);
    border-radius: 16px;
    padding: 12px 14px;
    margin: 0 16px 10px;
    border: 1px solid rgba(90, 60, 30, 0.05);
}
.note-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    margin: 0;
    padding: 14px 14px;
    border: 1px solid rgba(176, 141, 69, 0.2);
    border-radius: 16px;
    background: #FFFCF7;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.note-row:hover, .note-row:focus-visible {
    border-color: #B08D45;
    background: #FFF8EC;
    outline: none;
}
.note-dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #B08D45, #8C6A2F);
}
.note-copy { display: grid; gap: 4px; min-width: 0; }
.note-row strong, .list-row strong { display: block; color: #3C3126; font-size: 14.5px; font-weight: 750; line-height: 1.3; }
.note-row .note-copy span, .muted, .list-row span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.note-go { color: #B08D45; font-size: 16px; font-weight: 700; margin-top: 2px; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.stack { display: grid; gap: 10px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: #FBF6EE;
    border-radius: 14px;
    padding: 12px 12px;
    font-size: 16px;
    font-weight: 500;
}
textarea { min-height: 110px; resize: vertical; }
.pad { padding: 0 16px 12px; }
.btn, .btn.ghost, .btn.small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border-radius: 999px;
    border: 0;
    background: var(--dark);
    color: #F6F0E6;
    font-weight: 750;
    font-weight: 700;
    margin-top: 8px;
}
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid #D9CBB8; }
.btn.small, button.small {
    width: auto;
    height: 36px;
    padding: 0 14px;
    margin: 0;
    font-size: 13px;
}
.btn:disabled { opacity: 0.45; }
.flash {
    margin: 12px 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #E5F0E4;
    color: #24523A;
    font-size: 14px;
}
.flash.warn { background: #F6E7C8; color: #6A4E16; }
.flash.err { background: #F6E0DC; color: #7A2E2E; }
.empty { text-align: center; padding: 28px 20px; }
.empty h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; margin: 8px 0; }
.note {
    margin: 12px 16px;
    padding: 14px;
    border-radius: 16px;
    background: var(--card);
    line-height: 1.5;
}
.auth-wrap { width: min(460px, calc(100% - 32px)); margin: 16px auto 48px; padding: 0; }
.auth-card { margin: 0; }
.auth-card h2 { margin-bottom: 8px; }
.auth-lead { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.auth-card .btn { margin-top: 4px; }
.auth-switch { margin: 4px 0 0; text-align: center; font-size: 14px; font-weight: 600; }
.auth-switch a { color: var(--gold); }
.demo {
    margin: 12px 0 0;
    background: var(--card);
    border: 1px solid rgba(90, 60, 30, 0.06);
    border-radius: 18px;
    padding: 14px 16px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.cart-line { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: start; }
.line-art { height: 132px; border-radius: 16px; overflow: hidden; background: var(--bg-deep); }
.cart-line h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.cart-line h3 a { color: inherit; }
.line-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.line-top strong { font-size: 14px; white-space: nowrap; }
.line-meta { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.line-meta i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line); }
.line-body > .muted { margin: 2px 0 0; }
.line-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: #FBF6EE; }
.qty form { display: contents; }
.qty button { width: 32px; height: 32px; }
.qty button:disabled { opacity: 0.35; }
.qty span { min-width: 18px; text-align: center; font-weight: 700; }
.bag-count { margin: 12px 16px 8px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.coupon { margin: 6px 16px 12px; }
.coupon .kicker, .sum .kicker {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.coupon-row { display: flex; gap: 8px; align-items: center; }
.coupon-row input { text-transform: uppercase; }
.coupon-row .btn { width: auto; margin: 0; flex: 0 0 auto; }
.coupon-on { margin: 8px 0 0; color: var(--ok); font-size: 13px; font-weight: 600; }
.coupon-on button { background: none; border: 0; color: var(--gold); font-weight: 700; padding: 0; }
.sum { margin-top: 8px; }
.sum row, .sum div { display: flex; justify-content: space-between; margin: 6px 0; font-size: 14px; }
.sum .grand { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 800; }
.ship-note { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.bag .sum .ship-track { display: block; height: 6px; margin: 0 0 12px; border-radius: 99px; background: var(--bg-deep); overflow: hidden; }
.bag .sum .ship-track span { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.bag-checkout {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(62px + env(safe-area-inset-bottom));
    z-index: 28;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #FFFFFF;
    border-top: 1px solid #E6D8C6;
    backdrop-filter: blur(16px);
}
.bag-checkout span { display: grid; min-width: 92px; }
.bag-checkout small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bag-checkout b { font-size: 16px; }
.bag-checkout .btn { margin: 0; }
.empty .btn { width: min(280px, 100%); }
.checkout { display: block; }
.check-block, .order-card {
    background: var(--card);
    border: 1px solid rgba(90, 60, 30, 0.06);
    border-radius: 20px;
    padding: 16px;
    margin: 12px 16px;
}
.auth-wrap .auth-card { margin: 0; padding: 22px 20px; }
.check-block h2, .order-card h2 {
    margin: 0 0 14px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
}
.check-block .kicker, .order-card .kicker {
    margin: 0 0 6px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.field-row, .field-3 { display: grid; gap: 10px; }
.field-3 { grid-template-columns: 1fr 1fr; }
.field-3 label:last-child { grid-column: 1 / -1; }
.checkout label, .auth-card label { color: var(--muted); font-size: 12px; letter-spacing: 0.03em; }
.checkout input:not([type="radio"]):not([type="checkbox"]),
.auth-card input:not([type="radio"]):not([type="checkbox"]) {
    height: 48px;
    background: #FBF7F1;
    box-shadow: inset 0 0 0 1px var(--line);
}
.checkout input:not([type="radio"]):not([type="checkbox"]):focus,
.auth-card input:not([type="radio"]):not([type="checkbox"]):focus {
    outline: none;
    box-shadow: inset 0 0 0 1.5px var(--ink);
}
.deliver-chip {
    margin: -4px 0 12px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}
.pay-grid { display: grid; gap: 8px; }
.pay-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.addr-picks { display: grid; gap: 8px; margin-bottom: 12px; }
.addr-pick {
    display: grid;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #FBF6EE;
}
.addr-pick.on { border-color: var(--ink); background: var(--bg); }
.addr-pick b { font-size: 14px; }
.addr-pick span { color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.4; }
.pay-opt {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 8px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #FBF6EE;
    font-weight: 500;
}
.pay-opt:has(input:checked) { border-color: var(--ink); background: var(--bg); }
.pay-opt input {
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    padding: 0;
    border: 1.5px solid #C4B4A2;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    flex: 0 0 auto;
}
.pay-opt input:checked {
    border-color: var(--ink);
    background: radial-gradient(circle, var(--ink) 0 45%, transparent 48%);
    box-shadow: none;
}
.pay-opt b { display: block; font-size: 14px; }
.pay-opt small { display: block; margin-top: 2px; color: var(--muted); font-weight: 500; line-height: 1.4; }
.rzp-card {
    max-width: 440px;
    margin: 12px auto 28px;
    padding: 22px 20px 18px;
    border-radius: 24px;
    background: #241C16;
    color: #F6F0E6;
}
.rzp-card .kicker { color: #C4A36A; }
.rzp-card h2 {
    margin: 6px 0 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 46px;
    font-weight: 600;
    line-height: 1;
    color: #F6F0E6;
}
.rzp-card p { margin: 0; color: rgba(246, 240, 230, 0.78); font-size: 14px; line-height: 1.45; }
.rzp-meta { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0; padding-top: 12px; border-top: 1px solid rgba(246, 240, 230, 0.16); font-size: 13px; }
.rzp-card .btn { width: 100%; margin-top: 8px; background: #C4A36A; color: #241C16; }
.rzp-card form[hidden] { display: none; }
.check-line { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; }
.check-thumb { width: 58px; height: 74px; border-radius: 12px; overflow: hidden; background: var(--bg-deep); flex: 0 0 auto; }
.check-line div { min-width: 0; flex: 1; }
.check-line b { display: block; font-size: 14px; line-height: 1.3; }
.check-line p { margin: 2px 0 0; }
.check-line > strong { white-space: nowrap; font-size: 14px; }
.checkout .sum { margin: 8px 0 0; padding: 8px 0 0; background: transparent; border: 0; border-radius: 0; }
.check-pay {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(62px + env(safe-area-inset-bottom));
    z-index: 28;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #FFFFFF;
    border-top: 1px solid #E6D8C6;
    backdrop-filter: blur(16px);
}
.check-pay span { display: grid; min-width: 92px; }
.check-pay small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.check-pay b { font-size: 16px; }
.check-pay .btn { margin: 0; }

.gallery { margin: 8px 16px; border-radius: 24px; overflow: hidden; background: var(--bg-deep); height: 380px; position: relative; }
.gallery img, .gallery svg, .pcard-media img, .collection-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.prose { padding: 4px 16px 8px; }
.prose h1 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; line-height: 1; margin: 0 0 6px; }
.account-name { margin: 10px 0 2px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; font-weight: 600; line-height: 1; }
.house {
    width: min(1040px, calc(100% - 32px));
    margin: 4px auto 32px;
    display: grid;
    gap: 14px;
}
.house-id, .house-card, .house-latest, .folio-card, .folio-empty {
    background: #F7F1E6;
    border: 1px solid rgba(90, 60, 30, 0.08);
    border-radius: 24px;
    box-shadow: 0 10px 24px rgba(43, 36, 28, 0.04);
}
.house-id {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 14px;
    align-items: center;
    padding: 16px;
}
.house-id i {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #241C16;
    color: #E7D3B0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: normal;
    font-size: 28px;
}
.house-id strong { display: block; font-size: 16px; }
.house-id span { color: var(--muted); font-size: 13px; }
.house-id .btn { grid-column: 1 / -1; }
.house-rooms { display: grid; gap: 10px; }
.house-room {
    display: grid;
    align-content: space-between;
    min-height: 148px;
    padding: 16px;
    border-radius: 22px;
    text-decoration: none;
    color: inherit;
    background: #F7F1E6;
    border: 1px solid rgba(90, 60, 30, 0.08);
}
.house-room b { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.house-room strong {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 0.9;
}
.house-room strong.num {
    font-family: Manrope, sans-serif;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.04em;
}
.house-room span { color: var(--muted); font-size: 13px; }
.house-room.dark { background: #241C16; color: #F6F0E6; }
.house-room.dark b, .house-room.dark span { color: #E7D3B0; }
.house-room.line { background: transparent; border: 1.5px dashed rgba(143, 107, 46, 0.45); }
.house-latest {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    color: inherit;
    text-decoration: none;
}
.house-latest .thanks-thumb { height: 84px; }
.house-latest b { display: block; color: var(--gold); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.house-latest strong { display: block; margin-top: 2px; font-size: 15px; }
.house-latest em { display: block; margin-top: 3px; color: var(--muted); font-style: normal; font-size: 13px; }
.house-go { color: var(--ink) !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 14px !important; }
.house-split { display: grid; gap: 14px; }
.house-card { padding: 16px; display: grid; gap: 10px; align-content: start; }
.house-card h2 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
}
.house-card .hint { margin: 0; color: var(--muted); font-size: 14px; }
.house-addrs { display: grid; gap: 8px; }
.house-addr {
    padding: 12px;
    border-radius: 16px;
    background: #F3EBDF;
}
.house-addr strong { font-size: 14px; }
.house-addr em {
    margin-left: 8px;
    color: var(--gold);
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.house-addr p { margin: 4px 0 6px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.house-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.house-links a { color: var(--muted); font-size: 13px; font-weight: 700; }
.folio {
    width: min(920px, calc(100% - 32px));
    margin: 4px auto 32px;
    display: grid;
    gap: 12px;
}
.folio-empty { padding: 28px 18px; text-align: center; }
.folio-empty h2 { margin: 6px 0 14px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 36px; font-weight: 600; }
.folio-card {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
    padding: 10px;
    color: inherit;
    text-decoration: none;
}
.folio-shot {
    grid-row: span 2;
    height: 104px;
    border-radius: 16px;
    overflow: hidden;
    background: #E7D8C4;
}
.folio-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.folio-card b { display: block; font-size: 12px; letter-spacing: 0.08em; }
.folio-card strong { display: block; margin-top: 2px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; font-weight: 600; line-height: 1; }
.folio-card em { display: block; margin-top: 4px; color: var(--muted); font-style: normal; font-size: 13px; }
.folio-card i {
    grid-column: 2;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8F6B2E;
}
.folio-card i small { display: block; margin-top: 3px; color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.saved-lead {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 8px;
    color: var(--muted);
    font-size: 14px;
}
@media (min-width: 720px) {
    .house-id { grid-template-columns: auto minmax(0, 1fr) auto; }
    .house-id .btn { grid-column: auto; }
    .house-rooms { grid-template-columns: 1.15fr 0.9fr 0.9fr; }
    .house-split { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
    .folio { grid-template-columns: 1fr 1fr; }
    .folio-empty { grid-column: 1 / -1; }
}
@media (min-width: 980px) {
    .house, .folio { width: min(1040px, calc(100% - 64px)); }
    .saved-lead { width: min(1180px, calc(100% - 64px)); }
}
.house-hello {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    margin: 12px 16px 14px;
    padding: 16px;
    border-radius: 24px;
    background: #F7F1E6;
    border: 1px solid rgba(90, 60, 30, 0.08);
    box-shadow: 0 10px 24px rgba(43, 36, 28, 0.04);
}
.house-hello .mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #241C16;
    color: #F6E7C8;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
}
.house-hello h2 {
    margin: 2px 0 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 0.95;
}
.house-hello p { margin: 0; color: var(--muted); font-size: 13px; }
.house-hello .kicker { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.thanks {
    width: min(920px, calc(100% - 32px));
    margin: 6px auto 28px;
    display: grid;
    gap: 14px;
}
.thanks-pieces, .thanks-bill {
    background: #F7F1E6;
    border: 1px solid rgba(90, 60, 30, 0.08);
    border-radius: 24px;
    box-shadow: 0 10px 24px rgba(43, 36, 28, 0.04);
}
.thanks-pieces { padding: 8px; }
.thanks-line {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 8px;
    color: inherit;
    text-decoration: none;
}
.thanks-line + .thanks-line { border-top: 1px solid rgba(90, 60, 30, 0.08); }
.thanks-thumb {
    height: 92px;
    border-radius: 16px;
    overflow: hidden;
    background: #E7D8C4;
}
.thanks-thumb img, .thanks-thumb svg { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.thanks-line b { display: block; font-size: 15px; line-height: 1.3; }
.thanks-line em { display: block; margin-top: 4px; color: var(--muted); font-style: normal; font-size: 13px; }
.thanks-line > strong { font-size: 14px; white-space: nowrap; }
.thanks-bill { padding: 8px 8px 16px; }
.thanks-band {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #241C16;
    color: #F6F0E6;
}
.thanks-band i {
    width: 10px;
    height: 10px;
    flex: none;
    background: #C4A36A;
    transform: rotate(45deg);
    animation: thanksGem 2.4s ease-in-out infinite;
}
.thanks-band span { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.thanks-band b {
    margin-left: auto;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
}
.thanks-path {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    list-style: none;
    margin: 14px 8px 0;
    padding: 0;
}
.thanks-path li {
    position: relative;
    padding-top: 14px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.thanks-path li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 8px;
    height: 3px;
    border-radius: 999px;
    background: #E7D8C4;
}
.thanks-path li.done { color: var(--ink); }
.thanks-path li.done::before { background: #8F6B2E; }
.thanks-note, .thanks-wait, .thanks-to { margin: 12px 10px 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.thanks-wait { color: #6A4E16; }
.thanks-sum { list-style: none; margin: 12px 10px 0; padding: 0; }
.thanks-sum li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(90, 60, 30, 0.1); font-size: 14px; }
.thanks-sum li:last-child { font-weight: 700; }
.thanks-to b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 14px; }
.thanks-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 8px 0; }
.thanks-bill > .btn { margin: 14px 8px 0; }
@keyframes thanksGem {
    0%, 100% { transform: rotate(45deg) scale(1); }
    50% { transform: rotate(45deg) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
    .thanks-band i { animation: none; }
}
.track-find {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
    padding: 16px;
    border-radius: 24px;
    background: #F7F1E6;
    border: 1px solid rgba(90, 60, 30, 0.08);
    box-shadow: 0 10px 24px rgba(43, 36, 28, 0.04);
}
.thanks .track-find { grid-column: 1 / -1; }
.track-find .btn { min-width: 120px; }
.track-rail { list-style: none; margin: 14px 12px 0; padding: 0; }
.track-rail li {
    position: relative;
    padding: 0 0 16px 22px;
    color: var(--muted);
}
.track-rail li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D9CBB8;
}
.track-rail li::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: #E7D8C4;
}
.track-rail li:last-child { padding-bottom: 0; }
.track-rail li:last-child::after { display: none; }
.track-rail b { display: block; color: var(--ink); font-size: 14px; }
.track-rail em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; }
.track-rail li.done::before, .track-rail li.now::before { background: #8F6B2E; }
.track-rail li.done::after { background: #C4A36A; }
.track-rail li.now b { font-size: 15px; }
.track-courier {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin: 14px 10px 0;
    padding: 12px;
    border-radius: 16px;
    background: #F3EBDF;
}
.track-courier b { font-size: 14px; }
.track-courier a { color: var(--gold); font-size: 13px; font-weight: 700; }
@media (max-width: 700px) {
    .track-find { grid-template-columns: 1fr; }
}
@media (min-width: 800px) {
    .thanks { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
}
.house-pips { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.house-pips a {
    display: grid;
    gap: 2px;
    padding: 10px 10px 9px;
    border-radius: 16px;
    background: #F3EBDF;
    color: inherit;
    text-decoration: none;
}
.house-pips b { font-size: 16px; }
.house-pips span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.prose .sub { color: var(--muted); margin: 0 0 8px; }
.pdp-gallery .gallery {
    margin: 12px 16px 0;
    border-radius: 22px;
    height: 320px;
    aspect-ratio: auto;
    max-height: none;
}
.pdp-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 16px 0;
}
.pdp-thumb {
    flex: 0 0 58px;
    width: 58px;
    height: 72px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-deep);
}
.pdp-thumb.on { border-color: var(--ink); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.pdp-gallery .flag { top: 14px; left: 14px; }
.pdp-info { padding: 8px 16px 0; }
.pdp-info h1 {
    margin: 0 0 8px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 0.95;
}
.pdp .price { font-size: 20px; }
.pdp .facts { padding-left: 0; padding-right: 0; }
.crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}
.crumb a { color: var(--gold); }
.rate-line { margin: 8px 0; }
.pdp .lead { margin: 8px 0 14px; color: var(--muted); line-height: 1.5; }
.choice { padding: 0 0 8px; }
.choice p { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 8px; font-size: 13px; font-weight: 700; }
.choice .swatch.active { outline: 2px solid var(--ink); outline-offset: 3px; }
.qty-step {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #FBF6EE;
}
.qty-step button {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    font-size: 18px;
}
.qty-step input {
    width: 32px;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: center;
    font-weight: 700;
}
.qty-step input::-webkit-outer-spin-button,
.qty-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-copy { padding: 8px 0 0; line-height: 1.6; }
.pdp-copy .kicker, .review-form .kicker, .pdp-ship .kicker {
    margin: 0 0 6px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.pdp-ship {
    margin: 12px 0 8px;
    padding: 14px;
    border-radius: 18px;
    background: var(--card);
    line-height: 1.5;
}
.pdp-ship p { margin: 0 0 4px; }
.pdp-extra { padding-bottom: 8px; }
.pdp-reviews .quote { flex: none; width: auto; margin: 0 16px 10px; padding: 16px 16px 14px; }
.pdp-reviews .quote p {
    margin: 10px 0 8px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 24px;
    line-height: 1.2;
}
.review-empty {
    margin: 0 16px 12px;
    padding: 22px 18px;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid rgba(90, 60, 30, 0.06);
    text-align: center;
}
.review-empty strong {
    display: block;
    margin-bottom: 6px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 28px;
    font-weight: 600;
}
.review-empty p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.review-form { margin-top: 4px; }
.review-form h2 { margin-bottom: 12px; }
.rate-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rate-pick button {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #FBF6EE;
    color: #D9CBB8;
}
.rate-pick button.on { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }
.rate-pick svg { width: 18px; height: 18px; }
.rate-word { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.swatches, .sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
}
.size.off { opacity: 0.4; text-decoration: line-through; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 16px; }
.facts div { background: var(--card); border-radius: 14px; padding: 10px 12px; }
.facts small { display: block; color: var(--muted); }
.linkish { background: none; border: 0; color: var(--gold); font-weight: 700; padding: 0; }
.buybar {
    bottom: calc(62px + env(safe-area-inset-bottom));
    z-index: 28;
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #E6D8C6;
}
.buybar .btn { margin: 0; }
.buybar .iconbtn { background: var(--card); border: 1px solid var(--line); flex: 0 0 auto; }
.buybar .iconbtn.on { color: var(--danger); }
.compare-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px 16px 28px;
}
.compare-col {
    flex: 0 0 min(280px, 78%);
    scroll-snap-align: start;
    background: var(--card);
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(90, 60, 30, 0.06);
}
.compare-photo { display: block; height: 280px; background: var(--bg-deep); }
.compare-photo img, .compare-photo svg { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.compare-body { padding: 14px 14px 16px; }
.compare-body h2 { margin: 0 0 6px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; font-weight: 600; line-height: 1; }
.compare-body dl { margin: 12px 0; }
.compare-body dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.compare-body dt { color: var(--muted); font-weight: 600; }
.compare-body dd { margin: 0; text-align: right; }
.compare-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.compare-actions .btn { margin: 0; width: auto; height: 40px; padding: 0 14px; }
.compare-body .kicker {
    margin: 0 0 6px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.size-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.size-table th, .size-table td { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--line); }

.timeline { list-style: none; margin: 0 16px; padding: 0; }
.timeline li {
    position: relative;
    padding: 0 0 16px 22px;
    color: var(--muted);
}
.timeline li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D9CBB8;
}
.timeline li.done { color: var(--ink); font-weight: 700; }
.timeline li.done::before { background: var(--gold); }

.pager { display: flex; justify-content: space-between; padding: 4px 16px 12px; }
.pager a { font-weight: 700; color: var(--gold); }
details {
    background: var(--card);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
details summary { font-weight: 700; cursor: pointer; }
details p { color: var(--muted); line-height: 1.5; }
.prose-page { padding: 8px 16px 20px; line-height: 1.6; }
.prose-page h1 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 36px; margin: 8px 0; }

.check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.check input { width: auto; }

html.has-js .fallback-select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.choice-ui { display: none; }
html.has-js .choice-ui { display: block; }

@media (min-width: 700px) and (max-width: 979px) {
    .grid-2 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .cat-grid { grid-template-columns: repeat(4, 1fr); }
    .hero { min-height: 260px; }
    .hero h2 { font-size: 48px; }
    .pcard-media, .grid-2 .pcard-media { height: 260px; }
}

@media (min-width: 980px) {
    .appbar,
    .appbar.page,
    .appbar.home {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 20px;
        position: relative;
        left: 0;
        right: auto;
        transform: none;
        width: min(1320px, 100%);
        min-height: 80px;
        margin: 0 auto;
        padding: 0 32px;
        border: 1px solid transparent;
        border-radius: 0;
        transition: margin 0.4s ease, width 0.4s ease, min-height 0.4s ease, padding 0.4s ease, border-radius 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    }
    .appbar.page .mob-title,
    .appbar.page.product .mob-title { display: none; }
    .page-title {
        display: block;
        width: min(1180px, calc(100% - 64px));
        margin: 6px auto 8px;
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 48px;
        font-weight: 600;
        line-height: 1.05;
    }
    .iconbtn.bell { margin-left: 0; }
    .appbar.page .loc,
    .appbar.page .brand,
    .appbar.page .desk-menu,
    .appbar.page .desk-search,
    .appbar.page .desk-tools,
    .desk-menu,
    .desk-search,
    .desk-tools { display: flex; }
    .mob-back,
    .mob-tools,
    .mob-bell,
    .mob-search,
    .mob-only,
    .tabbar { display: none !important; }
    .chat-dock,
    body:has(.with-buy) .chat-dock,
    body:has(.with-bag) .chat-dock,
    body:has(.with-check) .chat-dock { bottom: 24px; }
    .topbar { box-shadow: none; border-bottom: 1px solid rgba(176, 141, 69, 0.18); transition: transform 0.9s cubic-bezier(.22, .8, .24, 1), background 0.4s ease, border-color 0.4s ease; }
    .topbar.is-float { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .topbar.is-float .appbar {
        width: min(1320px, calc(100% - 32px));
        min-height: 66px;
        margin-top: 10px;
        padding: 0 14px 0 22px;
        border-color: rgba(176, 141, 69, 0.24);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.9);
        -webkit-backdrop-filter: blur(18px) saturate(1.2);
        backdrop-filter: blur(18px) saturate(1.2);
        box-shadow: 0 18px 40px rgba(60, 40, 16, 0.12);
    }
    .topbar.is-float .brand-logo { width: 188px; }
    .brand { justify-self: start; position: static; transform: none; }
    .brand-logo { width: 228px; transition: width 0.4s ease; }
    .desk-menu {
        position: relative;
        justify-self: center;
        align-items: center;
        gap: 2px;
        padding: 5px;
        border: 1px solid rgba(176, 141, 69, 0.24);
        border-radius: 999px;
        background: #FBF7EF;
    }
    .menu-glide {
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 0;
        width: var(--glide-w, 0);
        border-radius: 999px;
        background: #FFFFFF;
        box-shadow: 0 6px 18px rgba(60, 40, 16, 0.12), inset 0 0 0 1px rgba(176, 141, 69, 0.22);
        opacity: 0;
        transform: translateX(var(--glide-x, 0));
        pointer-events: none;
    }
    .desk-menu.has-glide .menu-glide { opacity: 1; }
    .desk-menu.is-ready .menu-glide { transition: transform 0.42s cubic-bezier(.22, .8, .24, 1), width 0.42s cubic-bezier(.22, .8, .24, 1), opacity 0.25s ease; }
    .desk-menu > a,
    .menu-drop > a {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 40px;
        padding: 0 18px;
        border-radius: 999px;
        color: #3C3126;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        transition: color 0.25s ease;
    }
    .desk-menu:not(.has-glide) a.is-on { background: #FFFFFF; }
    .desk-menu > a:hover,
    .desk-menu a.is-on,
    .menu-drop:hover > a,
    .menu-drop:focus-within > a { color: #8C6A2F; }
    .desk-menu > a.is-sale { color: #A23B3B; }
    .desk-menu > a.is-new i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #C6A15B;
        animation: newPulse 2.2s ease-out infinite;
    }
    @keyframes newPulse {
        0% { box-shadow: 0 0 0 0 rgba(198, 161, 91, 0.6); }
        70%, 100% { box-shadow: 0 0 0 7px rgba(198, 161, 91, 0); }
    }
    .menu-drop > a svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
    .menu-drop:hover > a svg,
    .menu-drop:focus-within > a svg { transform: rotate(180deg); }
    .menu-panel {
        position: absolute;
        top: calc(100% + 14px);
        left: 50%;
        z-index: 30;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 250px;
        gap: 22px;
        width: 780px;
        padding: 22px;
        border: 1px solid rgba(176, 141, 69, 0.28);
        border-radius: 26px;
        background: #FFFFFF;
        box-shadow: 0 30px 60px rgba(60, 40, 16, 0.16);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 10px);
        transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    }
    .menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
    .menu-drop:hover .menu-panel,
    .menu-drop:focus-within .menu-panel {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s;
    }
    .mega-title { margin: 2px 0 14px 6px; color: #8C6A2F; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
    .mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .mega-cat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 12px 6px;
        border-radius: 18px;
        color: #2A221B;
        text-align: center;
        transition: background 0.25s ease;
    }
    .mega-cat:hover { background: #FBF6EC; }
    .mega-cat span {
        display: block;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        overflow: hidden;
        background: #F3EBD9;
        box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px rgba(176, 141, 69, 0.55);
        transition: transform 0.3s ease;
    }
    .mega-cat:hover span { transform: translateY(-3px); }
    .mega-cat img,
    .mega-cat svg { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    .mega-cat b { font-size: 13px; font-weight: 600; line-height: 1.2; }
    .mega-feature {
        position: relative;
        display: block;
        min-height: 300px;
        border-radius: 20px;
        overflow: hidden;
        background: #F3EBD9;
        color: #FFFFFF;
    }
    .mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.6s ease; }
    .mega-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(34, 24, 14, 0.78) 0%, rgba(34, 24, 14, 0) 58%); }
    .mega-feature span { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; }
    .mega-feature small { color: #F3DE9A; font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
    .mega-feature strong { display: block; margin-top: 4px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1; }
    .mega-feature em {
        display: inline-flex;
        align-items: center;
        height: 34px;
        margin-top: 12px;
        padding: 0 14px;
        border-radius: 999px;
        background: #FFFFFF;
        color: #2A221B;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
    }
    .mega-feature:hover img { transform: scale(1.05); }
    .bar-end { justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; }
    .loc {
        flex: 0 1 auto;
        gap: 8px;
        max-width: none;
        min-width: 0;
        height: 44px;
        padding: 0 14px 0 10px;
        border: 1px solid rgba(176, 141, 69, 0.3);
        border-radius: 999px;
        transition: border-color 0.25s ease, background 0.25s ease;
    }
    .loc:hover { border-color: #8C6A2F; background: #FBF6EC; }
    .loc small { font-size: 10.5px; }
    .loc b { max-width: 110px; font-size: 12.5px; }
    .desk-tools { align-items: center; gap: 2px; margin-left: 0; }
    .desk-tools .iconbtn { width: 42px; height: 42px; transition: background 0.25s ease, color 0.25s ease; }
    .desk-tools .iconbtn:hover { background: #FBF6EC; color: #8C6A2F; }
    .bag-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        margin-left: 6px;
        padding: 0 8px 0 16px;
        border-radius: 999px;
        background: #8C6A2F;
        color: #FFFFFF;
        font-size: 13.5px;
        font-weight: 700;
        box-shadow: 0 10px 22px rgba(140, 106, 47, 0.25);
        transition: background 0.25s ease, transform 0.25s ease;
    }
    .bag-pill svg { width: 18px; height: 18px; }
    .bag-pill b { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: #FFFFFF; color: #6A5224; font-size: 12px; }
    .bag-pill:hover { background: #6A5224; transform: translateY(-1px); }
    .seek {
        display: block;
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        z-index: 40;
        width: min(760px, calc(100% - 32px));
        padding: 18px;
        border: 1px solid rgba(176, 141, 69, 0.3);
        border-radius: 26px;
        background: #FFFFFF;
        box-shadow: 0 30px 60px rgba(60, 40, 16, 0.16);
        transform: translateX(-50%);
        animation: seekIn 0.3s cubic-bezier(.22, .8, .24, 1);
    }
    .seek[hidden] { display: none; }
    @keyframes seekIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
    .seek-form {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 58px;
        padding: 0 8px 0 18px;
        border: 1px solid rgba(176, 141, 69, 0.35);
        border-radius: 18px;
        background: #FBF6EC;
    }
    .seek-form > svg { flex: none; width: 22px; height: 22px; color: #8C6A2F; }
    .seek-form input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: #2A221B; font-size: 17px; }
    .seek-form kbd { padding: 4px 8px; border: 1px solid rgba(176, 141, 69, 0.35); border-radius: 8px; background: #FFFFFF; color: #7A6856; font: 600 11px Manrope, sans-serif; }
    .seek-close { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #FFFFFF; color: #3C3126; cursor: pointer; }
    .seek-close svg { width: 18px; height: 18px; }
    .seek-close:hover { color: #8C6A2F; }
    .seek-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
    .seek-tags span { margin-right: 4px; color: #8C6A2F; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
    .seek-tags a {
        display: inline-flex;
        align-items: center;
        height: 34px;
        padding: 0 14px;
        border: 1px solid rgba(176, 141, 69, 0.35);
        border-radius: 999px;
        color: #3C3126;
        font-size: 13px;
        font-weight: 600;
        transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }
    .seek-tags a:hover { border-color: #8C6A2F; background: #8C6A2F; color: #FFFFFF; }
}
@media (min-width: 980px) and (max-width: 1240px) {
    .appbar,
    .appbar.page,
    .appbar.home { column-gap: 14px; padding: 0 20px; }
    .brand-logo { width: 188px; }
    .topbar.is-float .brand-logo { width: 168px; }
    .desk-menu > a,
    .menu-drop > a { padding: 0 13px; font-size: 13.5px; }
    .loc { width: 44px; padding: 0; justify-content: center; }
    .loc span { display: none; }
    .bag-pill { padding-left: 12px; }
    .bag-pill span { display: none; }
}
@media (min-width: 980px) and (prefers-reduced-motion: reduce) {
    .appbar, .brand-logo, .desk-menu.is-ready .menu-glide { transition: none; }
    .desk-menu > a.is-new i { animation: none; }
    .seek { animation: none; }
}
@media (min-width: 980px) {
    .main, .main.with-buy, .main.with-bag, .main.with-check { padding-bottom: 36px; }
    .field-row { grid-template-columns: 1fr 1fr; }
    .field-3 { grid-template-columns: 1.2fr 1fr .8fr; }
    .field-3 label:last-child { grid-column: auto; }
    .pay-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
    .hero-scroller,
    .chips,
    .section-head,
    .home-head,
    .h-scroll,
    .cat-grid,
    .grid-2,
    .offer,
    .house-piece,
    .link-row,
    .fine,
    .pager,
    .blog-grid,
    .blog-read,
    .compare-board {
        width: min(1180px, calc(100% - 64px));
        margin-left: auto;
        margin-right: auto;
    }
    .section-head,
    .chips,
    .h-scroll,
    .cat-grid,
    .grid-2,
    .hero-scroller { padding-left: 0; padding-right: 0; }
    .hero-scroller:has(.hero + .hero) {
        display: grid;
        grid-template-columns: 1.45fr .9fr;
        gap: 16px;
        overflow: visible;
    }
    .hero-scroller > .hero,
    .hero-scroller > .hero + .hero { display: block; }
    .hero-dots { display: flex; }
    .desk-head { display: block; }
    .hero { min-height: 420px; padding: 36px 32px; flex: none; width: auto; }
    .hero.hero-slider { padding: 0; }
    .hero-slide { min-height: 420px; padding: 36px 32px 48px; }
    .hero-dots { right: 28px; bottom: 22px; }
    .hero h2 { font-size: 58px; }
    .hero p { font-size: 16px; max-width: 360px; }
    .h-scroll {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
        gap: 16px;
    }
    .h-scroll:has(.collection-card) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .h-scroll .pcard,
    .h-scroll .collection-card,
    .h-scroll .quote { flex: none; width: auto; }
    .collection-art, .h-scroll .pcard-media, .grid-2 .pcard-media { height: 300px; }
    .grid-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
    .cat-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
    .cat-card b { font-size: 16px; }
    .section-head h2 { font-size: 26px; }
    .home-head { padding-top: 52px; }
    .house-piece {
        margin-top: 56px;
        margin-bottom: 12px;
        grid-template-columns: 1.05fr .95fr;
        gap: 48px;
        align-items: center;
    }
    .house-photo { height: 560px; border-radius: 32px; }
    .house-copy h2 { font-size: 64px; }
    .atelier { margin-top: 64px; }
    .atelier-inner {
        width: min(1180px, calc(100% - 64px));
        margin: 0 auto;
        padding: 64px 0;
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 56px;
        align-items: center;
    }
    .atelier h2 { font-size: 58px; }
    .atelier-ticket { margin-top: 0; padding: 28px 24px; }
    .home-head h2 { font-size: 52px; }
    .page-head h1 { font-size: 64px; }
    .page-head h1.long { font-size: 48px; }
    .loved-slide blockquote { font-size: 38px; }
    .offer b { font-size: 40px; }
    .section-head .linkish { margin-left: auto; }
    .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .compare-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); overflow: visible; }
    .compare-col { flex: none; }
    .blog-photo { height: 280px; }
    .pdp {
        width: min(1180px, calc(100% - 64px));
        margin: 18px auto 8px;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        column-gap: 48px;
        align-items: start;
    }
    .pdp-gallery { position: sticky; top: 96px; }
    .pdp-gallery .gallery {
        margin: 0;
        border-radius: 28px;
        aspect-ratio: auto;
        max-height: none;
        height: 460px;
    }
    .pdp-thumbs { padding-left: 0; padding-right: 0; }
    .pdp-info { padding: 6px 0 0; }
    .pdp-info h1 { font-size: 56px; }
    .pdp .buybar {
        position: static;
        width: auto;
        background: transparent;
        border: 0;
        padding: 8px 0 4px;
        backdrop-filter: none;
    }
    .pdp-extra {
        width: min(1180px, calc(100% - 64px));
        margin: 20px auto 36px;
    }
    .pdp-extra .home-head,
    .pdp-extra .h-scroll { width: auto; margin-left: 0; margin-right: 0; }
    .pdp-reviews {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 28px 36px;
        align-items: start;
        margin-top: 8px;
    }
    .pdp-reviews > .home-head { grid-column: 1 / -1; }
    .pdp-reviews .quote,
    .review-empty { margin-left: 0; margin-right: 0; }
    .review-form { max-width: none; margin: 0; }
    .auth-wrap { width: min(460px, calc(100% - 64px)); margin: 8px auto 48px; }
    .main:has(.auth-wrap) > .flash {
        width: min(460px, calc(100% - 64px));
        margin-left: auto;
        margin-right: auto;
    }
    form.pad.stack,
    .sum,
    .cart-line,
    .list-row,
    .addr,
    .note,
    .timeline,
    .prose-page {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }
    .main > .flash {
        width: min(1180px, calc(100% - 64px));
        margin-left: auto;
        margin-right: auto;
    }
    .bag {
        width: min(1180px, calc(100% - 64px));
        margin: 8px auto 40px;
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(280px, .75fr);
        gap: 28px;
        align-items: start;
    }
    .bag-count { margin: 0 0 12px; }
    .bag .cart-line,
    .bag .sum,
    .bag .coupon {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    .bag-side { position: sticky; top: 96px; }
    .bag-checkout {
        position: static;
        margin-top: 12px;
        padding: 0;
        background: transparent;
        border: 0;
        backdrop-filter: none;
    }
    .bag-checkout span { display: none; }
    .bag-checkout .btn { width: 100%; }
    .checkout {
        width: min(1180px, calc(100% - 64px));
        margin: 8px auto 40px;
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(300px, .8fr);
        gap: 22px;
        align-items: start;
    }
    .check-block, .order-card { margin: 0 0 14px; }
    .check-side { position: sticky; top: 96px; }
    .checkout .sum { max-width: none; }
    .check-pay {
        position: static;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        backdrop-filter: none;
    }
    .check-pay span { display: none; }
    .check-pay .btn { width: 100%; }
    body:has(.tabbar) .sheet { margin-bottom: 0; }
    .sheet-root.open {
        align-items: center;
        padding: 24px;
    }
    .sheet,
    body:has(.tabbar) .sheet {
        width: min(480px, calc(100vw - 48px));
        max-height: calc(100dvh - 48px);
        margin: 0;
        border-radius: 28px;
        padding: 18px 20px 22px;
        box-shadow: 0 28px 70px rgba(40, 28, 14, 0.22);
        animation: sheetPop 0.28s ease;
    }
    .handle { display: none; }
    @keyframes sheetPop { from { transform: translateY(12px) scale(0.98); opacity: 0.6; } to { transform: none; opacity: 1; } }
}

.celebrate {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    overflow: hidden;
    animation: celebrateGone 0.45s ease 3.1s forwards;
}
.celebrate-card {
    position: absolute;
    left: 50%;
    top: 18%;
    width: min(320px, calc(100% - 40px));
    padding: 22px 22px 20px;
    border-radius: 28px;
    background: #F7F1E6;
    color: #241C16;
    text-align: center;
    box-shadow: 0 24px 60px rgba(26, 20, 16, 0.28);
    transform: translateX(-50%);
    z-index: 2;
    animation: celebrateIn 0.55s cubic-bezier(.22, .8, .24, 1) both;
}
.celebrate-card p {
    margin: 0;
    color: #8F6B2E;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.celebrate-card strong {
    display: block;
    margin-top: 6px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 0.95;
}
.celebrate-card em {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 15px;
    font-weight: 700;
}
.celebrate .bit {
    position: absolute;
    top: -16px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    animation: confettiFall linear forwards;
}
@keyframes celebrateIn {
    from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.92); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes confettiFall {
    to { transform: translateY(105vh) rotate(520deg); opacity: 0.15; }
}
@keyframes celebrateGone {
    to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .celebrate, .celebrate-card, .celebrate .bit { animation: none; }
}

body {
    --bg: #FFFFFF;
    --bg-deep: #F3EBD9;
    --card: #FFFFFF;
    --ink: #3C3126;
    --muted: #7A6856;
    --line: #E7DCC8;
    --gold: #B08D45;
    --gold-soft: #F4E7C6;
    --chip: #F3EBD9;
    --dark: #8C6A2F;
    background: #FFFFFF;
}
body .app {
    background-color: #FFFFFF;
    background-image: none;
}
body .topbar {
    background: #FFFFFF;
    box-shadow: 0 1px 0 rgba(176, 141, 69, 0.35);
}
body.home .brand-name { color: #8C6A2F; }
body.home .ribbon {
    background: linear-gradient(90deg, #F8F1E0, #E7D3A2 48%, #F8F1E0);
    color: #6A5224;
}
body.home .ribbon-tag { background: #C6A15B; color: #FFFCF7; }
body.home .ribbon-set i { background: #A6843C; }
body.home .hero,
body.home .hero.has-photo,
body.home .hero-slide {
    color: #3C3126;
    background-image: linear-gradient(105deg, rgba(247, 243, 235, 0.94) 0%, rgba(247, 243, 235, 0.72) 38%, rgba(247, 243, 235, 0.12) 72%), var(--hero);
}
body.home .hero-slide p,
body.home .hero.has-photo p { color: #6E5C48; }
body.home .hero-slide .badge,
body.home .hero.has-photo .badge { background: rgba(255, 252, 247, 0.9); color: #8C6A2F; }
body.home .hero-cta,
body.home .hero-slide .hero-cta,
body.home .hero.has-photo .hero-cta {
    background: #B08D45;
    color: #FFFCF7;
}
body.home .hero-dots button { background: rgba(176, 141, 69, 0.35); }
body.home .hero-dots button.on { background: #B08D45; }
body .pcard,
body .blog-card,
body .collection-card {
    background: #FFFCF7;
    border-color: rgba(176, 141, 69, 0.28);
    box-shadow: 0 14px 32px rgba(140, 106, 47, 0.06);
}
body.home .cat-card b {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 252, 247, 0.94);
    color: #3C3126;
    border: 1px solid rgba(176, 141, 69, 0.35);
}
body.home .atelier {
    background: transparent;
    color: #3C3126;
}
body.home .atelier-inner {
    background: linear-gradient(180deg, #FFFCF7, #F8F1E2);
    border: 1px solid rgba(176, 141, 69, 0.32);
    border-radius: 28px;
}
body.home .atelier .kicker,
body.home .atelier-list b { color: #B08D45; }
body.home .atelier-list span,
body.home .atelier-ticket p { color: #6E5C48; }
body.home .atelier-ticket {
    background: #FFFCF7;
    border-color: #C6A15B;
    color: #3C3126;
}
body .tabbar,
body .buybar {
    background: #FFFFFF;
    border-top: 1px solid rgba(176, 141, 69, 0.28);
}
body .tab.active { color: #8C6A2F; }

@media (min-width: 980px) and (max-width: 1180px) {
    .grid-2,
    .h-scroll { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-new { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .h-scroll:has(.collection-card) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.stage, .edit, .floor, .styles, .pledge, .press {
    width: min(1180px, calc(100% - 32px));
    margin: 18px auto;
}
.stage {
    display: grid;
    min-height: 0;
    background: #FFFCF7;
    border: 0;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(90, 60, 20, 0.08);
}
.stage-copy { padding: 28px 22px 24px; }
.stage-copy h1 {
    margin: 8px 0 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 46px;
    font-weight: 600;
    line-height: 0.92;
    color: #3C3126;
}
.stage-copy h1::after {
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    margin: 16px 0 0;
    background: #B08D45;
}
.stage-copy > p { margin: 14px 0 0; max-width: 420px; color: #7A6856; font-size: 15px; line-height: 1.5; }
.stage-copy .hero-cta { margin-top: 18px; }
.stage-facts { list-style: none; display: grid; gap: 8px; margin: 22px 0 0; padding: 0; }
.stage-facts li {
    color: #6A5224;
    font-size: 13px;
    font-weight: 700;
}
.stage-facts li::before { content: "◆ "; color: #B08D45; font-size: 9px; }
.stage-frame { position: relative; min-height: 320px; overflow: hidden; background: #F3EBD9; }
.stage-frame .hero-track { display: flex; height: 100%; min-height: 320px; }
body.home .stage-frame .hero-slide {
    flex: 0 0 100%;
    min-height: 320px;
    padding: 0;
    background-image: var(--hero);
    background-size: cover;
    background-position: center top;
}
.stage-frame .hero-dots { display: flex; }
.edit-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-bottom: 14px; }
.edit-head h2 {
    margin: 4px 0 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 0.95;
}
.edit-head a { color: #B08D45; font-size: 13px; font-weight: 700; }
.edit-board { display: grid; gap: 12px; }
.edit-board .collection-card { flex: none; width: auto; border-color: rgba(176, 141, 69, 0.28); background: #FFFCF7; }
.edit-board .collection-art { height: 220px; }
.floor { display: grid; gap: 16px; }
.floor-hero {
    position: relative;
    display: block;
    min-height: 420px;
    border-radius: 28px;
    overflow: hidden;
    background: #F3EBD9;
    color: #FFFCF7;
}
.floor-hero img, .floor-hero svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.floor-hero span {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 252, 247, 0.94);
    color: #3C3126;
    border: 1px solid rgba(176, 141, 69, 0.3);
}
.floor-hero em { display: block; color: #B08D45; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.floor-hero strong { display: block; margin-top: 4px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; font-weight: 600; line-height: 1; }
.floor-hero b { display: block; margin-top: 6px; font-size: 14px; }
.floor-line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-top: 10px;
    padding: 8px;
    border-radius: 18px;
    background: #FFFCF7;
    border: 1px solid rgba(176, 141, 69, 0.22);
    color: inherit;
}
.floor-thumb { height: 88px; border-radius: 14px; overflow: hidden; background: #F3EBD9; }
.floor-thumb img, .floor-thumb svg { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.floor-line strong { display: block; font-size: 15px; }
.floor-line em { display: block; margin-top: 4px; color: #8C6A2F; font-style: normal; font-weight: 700; font-size: 13px; }
.style-row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.style-row::-webkit-scrollbar { display: none; }
.style-card { flex: 0 0 132px; color: inherit; text-align: center; }
.style-card span { display: block; height: 168px; border-radius: 20px; overflow: hidden; background: #F3EBD9; border: 1px solid rgba(176, 141, 69, 0.22); }
.style-card img, .style-card svg { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.style-card b { display: block; margin-top: 8px; font-size: 13px; }
.pledge {
    display: grid;
    gap: 18px;
    padding: 22px 18px;
    border-radius: 28px;
    background: linear-gradient(180deg, #FFFCF7, #F8F1E2);
    border: 1px solid rgba(176, 141, 69, 0.32);
}
.pledge ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pledge li { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: start; }
.pledge b { font-family: "Cormorant Garamond", Georgia, serif; color: #B08D45; font-size: 24px; }
.pledge span { color: #6E5C48; font-size: 14px; line-height: 1.45; }
.pledge-quote { overflow: hidden; }
.pledge .loved-slide { padding: 0; text-align: left; }
.pledge .loved-slide blockquote { margin: 8px 0 12px; font-size: 26px; }
.press-board { display: grid; gap: 12px; }
.press-card {
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: 22px;
    background: #FFFCF7;
    border: 1px solid rgba(176, 141, 69, 0.22);
    color: inherit;
}
.press-photo { display: block; height: 180px; border-radius: 16px; overflow: hidden; background: #F3EBD9; }
.press-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.press-copy small { color: #B08D45; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.press-copy strong { display: block; margin-top: 4px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; font-weight: 600; line-height: 1.05; }
.press-copy em { display: block; margin-top: 6px; color: #7A6856; font-style: normal; font-size: 14px; line-height: 1.45; }
.orbits, .look, .whisper {
    width: min(1180px, calc(100% - 32px));
    margin: 8px auto 22px;
}
.orbit-row {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px 2px 4px;
}
.orbit-row::-webkit-scrollbar { display: none; }
.orbit {
    flex: 0 0 92px;
    color: inherit;
    text-align: center;
    text-decoration: none;
}
.orbit-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto;
    border-radius: 50%;
}
.orbit-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #B08D45, #E4C57A, #8C6A2F, #C6A15B, #F3DE9A, #7A5C28, #C6A15B, #B08D45);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: orbitSpin 2.8s linear infinite;
    animation-delay: var(--spin, 0s);
}
.orbit-face {
    position: relative;
    z-index: 1;
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: #F3EBD9;
    box-shadow: 0 0 0 3px #FFFFFF;
}
.orbit img, .orbit svg { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.orbit b {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: #3C3126;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .orbit-ring::before { animation: none; }
}
.look-head { text-align: center; margin: 28px 0 18px; }
.look-head h2 {
    margin: 6px 0 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
}
.look-head h2::after {
    content: "";
    display: block;
    width: 42px;
    height: 1px;
    margin: 12px auto 0;
    background: #B08D45;
}
.look-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
}
.look-grid .pcard {
    background: #FFFCF7;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 14px 32px rgba(90, 60, 20, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.look-grid .pcard-media { height: 248px; overflow: hidden; }
.look-grid .pcard-media img { transition: transform 0.6s ease; }
.look-grid .pcard:hover { transform: translateY(-4px); box-shadow: 0 20px 36px rgba(90, 60, 20, 0.1); }
.look-grid .pcard:hover .pcard-media img { transform: scale(1.04); }
.look-grid .pcard-info { padding: 12px 12px 14px; }
.look-grid .pcard-info h3 { min-height: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.look-grid .compare-add { display: none; }
.look-grid .price { color: #8C6A2F; font-size: 14px; }
.look-more {
    display: block;
    width: fit-content;
    margin: 26px auto 8px;
    padding: 11px 32px;
    border-radius: 999px;
    border: 1px solid #C6A15B;
    background: transparent;
    color: #6A5224;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.25s ease, color 0.25s ease;
}
.look-more:hover { background: #C6A15B; color: #FFFCF7; }
.whisper {
    margin-top: 28px;
    margin-bottom: 36px;
    padding: 28px 22px;
    border-radius: 24px;
    text-align: center;
    background: linear-gradient(180deg, #FFFCF7, #F8F1E2);
    border: 1px solid rgba(176, 141, 69, 0.28);
    overflow: hidden;
}
.whisper .loved-slide blockquote {
    margin: 10px auto 12px;
    max-width: 640px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 28px;
    line-height: 1.2;
}
@media (min-width: 900px) {
    .stage, .edit, .floor, .styles, .pledge, .press, .orbits, .look, .whisper { width: min(1180px, calc(100% - 64px)); margin-top: 22px; }
    .stage { grid-template-columns: 0.86fr 1.14fr; min-height: 420px; }
    .stage-copy { display: flex; flex-direction: column; justify-content: center; padding: 36px 40px; }
    .stage-copy h1 { font-size: 58px; }
    .stage-frame, .stage-frame .hero-track, body.home .stage-frame .hero-slide { min-height: 420px; }
    .orbit-row { justify-content: space-between; gap: 12px; overflow: visible; }
    .orbit { flex: 1 1 0; }
    .orbit-ring { width: 98px; height: 98px; }
    .orbit-face { width: 84px; height: 84px; }
    .look-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
    .look-grid .pcard-media { height: 320px; }
    .edit-board { grid-template-columns: 1.35fr 1fr; }
    .edit-board .collection-card:first-child { grid-row: span 2; }
    .edit-board .collection-card:first-child .collection-art { height: 100%; min-height: 460px; }
    .edit-board .collection-art { height: 210px; }
    .floor { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
    .floor-hero { min-height: 640px; }
    .style-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
    .style-card { flex: none; }
    .style-card span { height: 220px; }
    .pledge { grid-template-columns: 1fr 1fr; align-items: center; padding: 36px 32px; }
    .press-board { grid-template-columns: 1.3fr 0.85fr 0.85fr; }
    .press-card.is-lead { grid-row: span 1; }
    .press-card.is-lead .press-photo { height: 320px; }
}

.stage-copy .kicker,
.look-head .kicker {
    margin: 0;
    color: #8C6A2F;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.stage-copy h1,
.look-head h2 { color: #2A221B; }
.stage-copy .hero-cta {
    height: 44px;
    padding: 0 22px;
    background: #8C6A2F;
    box-shadow: 0 8px 18px rgba(140, 106, 47, 0.22);
}
.orbits { margin-top: 22px; }
.orbit b {
    color: #2A221B;
    font-size: 12.5px;
    font-weight: 700;
    min-height: 2.4em;
}
.look { margin-top: 34px; margin-bottom: 8px; }
.look + .look {
    margin-top: 12px;
    padding-top: 28px;
    border-top: 1px solid rgba(176, 141, 69, 0.45);
}
.look-head { margin: 6px 0 22px; }
.look-head h2 { font-size: 44px; }
.look-head h2::after { width: 64px; height: 2px; background: #C6A15B; }
.look-grid .pcard {
    border: 1px solid rgba(176, 141, 69, 0.34);
    box-shadow: 0 10px 24px rgba(60, 40, 16, 0.06);
}
.look-grid .pcard-info h3 { color: #2A221B; font-size: 14px; line-height: 1.35; }
.look-grid .price { color: #6A5224; font-size: 15px; font-weight: 800; }
.look-grid .mrp { color: #8A7764; font-size: 12.5px; }
.look-grid .off {
    background: #F4E7C6;
    color: #6A5224;
    font-weight: 800;
}
.look-more {
    border-width: 1.5px;
    border-color: #8C6A2F;
    color: #3C3126;
    background: #FFFCF7;
}
.whisper {
    border-color: rgba(176, 141, 69, 0.45);
    box-shadow: 0 12px 28px rgba(90, 60, 20, 0.05);
}
.whisper::before {
    content: "◆";
    display: block;
    margin-bottom: 6px;
    color: #B08D45;
    font-size: 11px;
}
.whisper .loved-slide strong { color: #6A5224; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
@media (min-width: 900px) {
    .look-head h2 { font-size: 52px; }
    .orbit b { min-height: 0; }
    .stage-copy h1 { font-size: 62px; }
}

.moods, .rank, .reel { width: min(1180px, calc(100% - 32px)); margin-left: auto; margin-right: auto; }
.num { font-family: Manrope, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; }
.mood-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mood {
    position: relative;
    display: block;
    height: 230px;
    border-radius: 22px;
    overflow: hidden;
    background: #F3EBD9;
    color: #2A221B;
}
.mood img, .mood svg { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.mood span {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 252, 247, 0.94);
    border: 1px solid rgba(176, 141, 69, 0.35);
}
.mood small { color: #B08D45; font-size: 12px; font-weight: 800; }
.mood b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; font-weight: 600; line-height: 1; }
.rank-board { display: grid; gap: 14px; }
.rank-lead {
    position: relative;
    display: block;
    min-height: 420px;
    border-radius: 28px;
    overflow: hidden;
    background: #F3EBD9;
    color: #2A221B;
}
.rank-lead img, .rank-lead svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.rank-lead span {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 252, 247, 0.94);
    border: 1px solid rgba(176, 141, 69, 0.35);
}
.rank-lead small { color: #B08D45; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; }
.rank-lead strong { display: block; margin-top: 4px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; font-weight: 600; line-height: 1; }
.rank-lead b { display: block; margin-top: 6px; font-size: 14px; }
.rank-list { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.rank-line {
    display: grid;
    grid-template-columns: 36px 92px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    flex: 1;
    min-height: 0;
    padding: 10px 14px;
    border-radius: 18px;
    background: #FFFCF7;
    border: 1px solid rgba(176, 141, 69, 0.28);
    color: inherit;
}
.rank-line em { color: #B08D45; font-size: 14px; font-weight: 800; text-align: center; }
.rank-thumb { height: 100%; min-height: 92px; border-radius: 14px; overflow: hidden; background: #F3EBD9; }
.rank-thumb img, .rank-thumb svg { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.rank-line strong {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #2A221B;
    font-size: 15px;
}
.rank-line strong::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(176, 141, 69, 0.55);
}
.rank-line b { color: #6A5224; font-size: 14px; font-weight: 800; white-space: nowrap; }
.reel-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.reel-row .pcard {
    width: auto;
    background: #FFFCF7;
    border: 1px solid rgba(176, 141, 69, 0.34);
    border-radius: 22px;
}
.reel-row .pcard-media { height: 260px; }
.reel-row .compare-add { display: none; }
.reel-row .pcard-info h3 { min-height: 0; color: #2A221B; }
@media (min-width: 900px) {
    .moods, .rank, .reel { width: min(1180px, calc(100% - 64px)); }
    .mood-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .mood { height: 340px; }
    .mood:hover img { transform: scale(1.04); }
    .mood img { transition: transform 0.5s ease; }
    .rank-board { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
    .rank-lead, .rank-list { min-height: 540px; height: 540px; }
    .reel-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .reel-row .pcard-media { height: 300px; }
}

.runway {
    --runway-edge: 20px;
    position: relative;
    width: 100%;
    height: min(78vh, 580px);
    min-height: 480px;
    overflow: hidden;
    background: #F3EBD9;
    isolation: isolate;
}
.runway-track { position: absolute; inset: 0; }
.runway-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.runway-slide.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.9s ease, visibility 0s;
    z-index: 1;
}
.runway-slide::before {
    content: "";
    position: absolute;
    inset: -40px;
    background-image: var(--img);
    background-size: cover;
    background-position: center 30%;
    filter: blur(36px) saturate(1.15);
    transform: scale(1.1);
}
.runway-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0) 64%);
    pointer-events: none;
}
.runway-frame { position: absolute; inset: 0; display: block; overflow: hidden; }
.runway-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    transform: scale(1.06);
    transition: transform 7s ease-out;
}
.runway-slide.is-on .runway-photo { transform: scale(1); }
.runway-copy {
    position: absolute;
    z-index: 2;
    left: var(--runway-edge);
    right: var(--runway-edge);
    bottom: 76px;
    color: #2A221B;
}
.runway-copy > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.22, .8, .24, 1);
}
.runway-slide.is-on .runway-copy > * { opacity: 1; transform: none; }
.runway-slide.is-on .runway-copy > :nth-child(2) { transition-delay: 0.12s; }
.runway-slide.is-on .runway-copy > :nth-child(3) { transition-delay: 0.22s; }
.runway-slide.is-on .runway-copy > :nth-child(4) { transition-delay: 0.32s; }
.runway-badge {
    display: inline-flex;
    margin: 0 0 12px;
    padding: 6px 12px;
    border: 1px solid rgba(140, 106, 47, 0.5);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #8C6A2F;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.runway-copy h1,
.runway-copy h2 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 44px;
    font-weight: 600;
    line-height: 0.95;
    color: #2A221B;
}
.runway-sub { margin: 10px 0 0; max-width: 420px; color: #5C4A3A; font-size: 15px; line-height: 1.5; }
.runway-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    margin-top: 18px;
    padding: 0 22px;
    border-radius: 999px;
    background: #8C6A2F;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 24px rgba(140, 106, 47, 0.28);
    transition: background 0.25s ease, transform 0.25s ease;
}
.runway-cta svg { width: 18px; height: 18px; transition: transform 0.25s ease; }
.runway-cta:hover { background: #6A5224; }
.runway-cta:hover svg { transform: translateX(4px); }
.runway-foot {
    position: absolute;
    z-index: 3;
    left: var(--runway-edge);
    right: var(--runway-edge);
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.runway-count { color: #3C3126; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.runway-count b { color: #8C6A2F; font-size: 15px; }
.runway-dots { display: flex; flex: 1; gap: 6px; max-width: 280px; }
.runway-dots button {
    position: relative;
    flex: 1;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(140, 106, 47, 0.22);
    overflow: hidden;
}
.runway-dots button::before { content: ""; position: absolute; inset: -10px 0; }
.runway-dots i {
    position: absolute;
    inset: 0;
    background: #8C6A2F;
    transform: scaleX(0);
    transform-origin: left;
}
.runway-dots button.on i { animation: runwayFill var(--runway-wait, 6000ms) linear forwards; }
.runway.is-held .runway-dots button.on i { animation-play-state: paused; }
.runway-arrows { display: none; gap: 10px; margin-left: auto; }
.runway-arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(140, 106, 47, 0.45);
    border-radius: 50%;
    background: #FFFFFF;
    color: #3C3126;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.runway-arrow svg { width: 20px; height: 20px; }
.runway-arrow:hover { background: #8C6A2F; border-color: #8C6A2F; color: #FFFFFF; }
@keyframes runwayFill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    .runway-slide, .runway-photo, .runway-copy > * { transition: none; }
    .runway-dots button.on i { animation: none; transform: scaleX(1); }
}
@media (min-width: 900px) {
    .runway {
        --runway-edge: max(32px, calc((100% - 1180px) / 2));
        height: clamp(500px, 76vh, 660px);
    }
    .runway-slide::after {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 38%, rgba(255, 255, 255, 0.18) 72%, rgba(255, 255, 255, 0) 100%);
    }
    .runway-frame {
        inset: 36px var(--runway-edge) 36px auto;
        z-index: 2;
        width: auto;
        aspect-ratio: 2 / 3;
        border-radius: 28px;
        box-shadow: 0 30px 60px rgba(60, 40, 16, 0.22);
    }
    .runway-frame::after {
        content: "";
        position: absolute;
        inset: 12px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 20px;
        pointer-events: none;
    }
    .runway-copy {
        top: 50%;
        right: auto;
        bottom: auto;
        width: min(560px, 46%);
        transform: translateY(-56%);
    }
    .runway-copy h1,
    .runway-copy h2 { font-size: clamp(56px, 6vw, 84px); }
    .runway-sub { margin-top: 16px; font-size: 17px; }
    .runway-cta { height: 52px; margin-top: 26px; padding: 0 28px; }
    .runway-foot { right: auto; bottom: 40px; width: min(560px, 46%); }
    .runway-arrows { display: flex; }
    .orbits { margin-top: 30px; }
}

.runway.vista { height: min(84vh, 640px); min-height: 540px; background: #EFE4D0; }
.vista .runway-slide::before { content: none; }
.vista .runway-slide::after {
    background: linear-gradient(0deg, rgba(34, 24, 14, 0.84) 0%, rgba(34, 24, 14, 0.5) 30%, rgba(34, 24, 14, 0) 62%);
}
.vista-panels { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; gap: 4px; }
.vista-panel { position: relative; display: block; overflow: hidden; background: #F3EBD9; }
.vista-panel:nth-child(n+2) { display: none; }
.vista-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    transform: scale(1.08);
    transition: transform 7s ease-out;
}
.vista .runway-slide.is-on .vista-panel img { transform: scale(1); }
.vista .runway-slide.is-on .vista-panel { animation: vistaRise 1.1s cubic-bezier(.22, .8, .24, 1) both; }
.vista .runway-slide.is-on .vista-panel:nth-child(2) { animation-delay: 0.12s; }
.vista .runway-slide.is-on .vista-panel:nth-child(3) { animation-delay: 0.24s; }
@keyframes vistaRise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.vista-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #6A5224;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.vista .runway-copy { bottom: 84px; text-align: center; pointer-events: none; }
.vista .runway-copy a { pointer-events: auto; }
.vista .runway-copy h1,
.vista .runway-copy h2 {
    color: #FFFFFF;
    font-size: 46px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-shadow: 0 6px 30px rgba(20, 12, 4, 0.3);
}
.vista .runway-sub { margin: 12px auto 0; color: rgba(255, 255, 255, 0.9); }
.vista .runway-badge {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.vista .runway-cta { background: #FFFFFF; color: #2A221B; box-shadow: 0 14px 30px rgba(20, 12, 4, 0.22); }
.vista .runway-cta:hover { background: #C6A15B; color: #FFFFFF; }
.vista .runway-foot { justify-content: center; }
.vista .runway-count { color: rgba(255, 255, 255, 0.85); }
.vista .runway-count b { color: #F3DE9A; }
.vista .runway-dots { flex: 0 1 160px; }
.vista .runway-dots button { background: rgba(255, 255, 255, 0.3); }
.vista .runway-dots i { background: #FFFFFF; }
.vista .runway-arrow { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.vista .runway-arrow:hover { border-color: #FFFFFF; background: #FFFFFF; color: #2A221B; }
@media (prefers-reduced-motion: reduce) {
    .vista .runway-slide.is-on .vista-panel { animation: none; }
    .vista-panel img { transition: none; }
}
@media (min-width: 600px) {
    .vista-panels { grid-template-columns: 1.2fr 1fr; }
    .vista-panel:nth-child(2) { display: block; }
}
@media (min-width: 900px) {
    .runway.vista { height: clamp(580px, 88vh, 780px); }
    .vista-panels { grid-template-columns: 1fr 1.25fr 1fr; gap: 6px; }
    .vista-panel:nth-child(n) { display: block; }
    .vista-panel:first-child { order: 2; }
    .vista-panel:nth-child(2) { order: 1; }
    .vista-panel:nth-child(3) { order: 3; }
    .vista-tag { top: 24px; left: 24px; }
    .vista .runway-slide::after {
        background: linear-gradient(0deg, rgba(34, 24, 14, 0.8) 0%, rgba(34, 24, 14, 0.38) 34%, rgba(34, 24, 14, 0) 62%);
    }
    .vista .runway-copy {
        top: auto;
        right: auto;
        bottom: 104px;
        left: 50%;
        width: min(1040px, 86%);
        transform: translateX(-50%);
    }
    .vista .runway-copy h1,
    .vista .runway-copy h2 { font-size: clamp(64px, 7.2vw, 120px); line-height: 0.92; }
    .vista .runway-sub { max-width: 560px; }
    .vista .runway-foot {
        left: var(--runway-edge);
        right: var(--runway-edge);
        bottom: 32px;
        width: auto;
        justify-content: space-between;
    }
    .vista .runway-dots { flex: 0 1 220px; }
    .vista .runway-arrows { margin-left: 0; }
}

.lux {
    width: min(1180px, calc(100% - 32px));
    margin: 52px auto 0;
}
.lux.orbits { margin-top: 36px; }
.lux.assure { margin-top: 24px; }
.rank .rank-thumb { height: 104px; min-height: 0; }
.lux-head { margin: 0 0 24px; text-align: center; }
.lux-head h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    color: #2A221B;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 31px;
    font-weight: 600;
    line-height: 1.05;
}
.lux-head h2::before,
.lux-head h2::after {
    content: "";
    flex: 1 1 0;
    max-width: 90px;
    min-width: 16px;
    height: 1px;
    background: linear-gradient(90deg, rgba(176, 141, 69, 0), #B08D45);
}
.lux-head h2::after { background: linear-gradient(270deg, rgba(176, 141, 69, 0), #B08D45); }
.lux-sub { max-width: 520px; margin: 10px auto 0; color: #7A6856; font-size: 14px; line-height: 1.55; }

.assure-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.assure-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(176, 141, 69, 0.3);
    border-radius: 20px;
    background: linear-gradient(180deg, #FFFFFF, #FBF6EC);
}
.assure-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F6EEDC;
    color: #8C6A2F;
}
.assure-icon svg { width: 22px; height: 22px; }
.assure-tile b { display: block; color: #2A221B; font-size: 14px; line-height: 1.3; }
.assure-tile small { display: block; margin-top: 3px; color: #7A6856; font-size: 12px; line-height: 1.4; }

.fresh-tabs {
    display: flex;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 24px;
    padding: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.fresh-tabs::-webkit-scrollbar { display: none; }
.fresh-tabs button {
    flex: none;
    height: 42px;
    padding: 0 20px;
    border: 1px solid rgba(176, 141, 69, 0.45);
    border-radius: 999px;
    background: #FFFFFF;
    color: #3C3126;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.fresh-tabs button:hover { border-color: #8C6A2F; }
.fresh-tabs button[aria-selected="true"] { border-color: #8C6A2F; background: #8C6A2F; color: #FFFFFF; }
.fresh-panel:not([hidden]) { animation: freshIn 0.5s ease both; }
@keyframes freshIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.suite-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.suite-row::-webkit-scrollbar { display: none; }
.suite-card {
    position: relative;
    display: block;
    height: 440px;
    border-radius: 28px;
    overflow: hidden;
    background: #F3EBD9;
    color: #FFFFFF;
    scroll-snap-align: start;
}
.suite-card img,
.suite-card svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.7s ease;
}
.suite-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(34, 24, 14, 0.78) 0%, rgba(34, 24, 14, 0.2) 42%, rgba(34, 24, 14, 0) 60%);
}
.suite-copy { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 1; }
.suite-copy small { color: #F3DE9A; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.suite-copy strong {
    display: block;
    margin-top: 6px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
}
.suite-copy em {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin-top: 16px;
    padding: 0 18px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #2A221B;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    transition: background 0.25s ease, color 0.25s ease;
}
.suite-copy em svg { width: 16px; height: 16px; }
.suite-card:hover img { transform: scale(1.05); }
.suite-card:hover em { background: #C6A15B; color: #FFFFFF; }

.ticker {
    margin-top: 56px;
    padding: 16px 0;
    border-top: 1px solid rgba(176, 141, 69, 0.4);
    border-bottom: 1px solid rgba(176, 141, 69, 0.4);
    background: #FBF6EC;
    overflow: hidden;
}
.ticker-run { display: flex; width: max-content; animation: tickerMove 40s linear infinite; }
.ticker:hover .ticker-run { animation-play-state: paused; }
.ticker-set { display: flex; align-items: center; }
.ticker-set span { color: #6A5224; font-size: 12.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }
.ticker-set i { width: 6px; height: 6px; margin: 0 26px; background: #C6A15B; transform: rotate(45deg); }
@keyframes tickerMove { to { transform: translateX(-50%); } }

.duo { display: grid; gap: 16px; }
.duo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
    padding: 30px 24px;
    border: 1px solid rgba(176, 141, 69, 0.4);
    border-radius: 28px;
    overflow: hidden;
    background: #FBF6EC;
    isolation: isolate;
}
.duo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--img);
    background-size: cover;
    background-position: right 20%;
}
.duo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.94) 55%, rgba(255, 255, 255, 0.55) 100%);
}
.duo-card.is-help::after { background: linear-gradient(90deg, #FBF6EC 0%, rgba(251, 246, 236, 0.95) 55%, rgba(251, 246, 236, 0.55) 100%); }
.duo-card .runway-badge { align-self: flex-start; background: #FFFFFF; }
.duo-card h3 {
    max-width: 420px;
    margin: 0;
    color: #2A221B;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
}
.duo-card p:not(.runway-badge) { max-width: 360px; margin: 10px 0 0; color: #5C4A3A; font-size: 14.5px; line-height: 1.55; }
.duo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.duo-actions .runway-cta,
.ask-actions .runway-cta { margin-top: 0; }
button.runway-cta { border: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.duo-code {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 7px 0 18px;
    border: 1.5px dashed #8C6A2F;
    border-radius: 999px;
    background: #FFFFFF;
    color: #2A221B;
    font: inherit;
    cursor: pointer;
}
.duo-code span { font-size: 15px; font-weight: 800; letter-spacing: 0.16em; }
.duo-code em {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #F4E7C6;
    color: #6A5224;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background 0.25s ease, color 0.25s ease;
}
.duo-code.is-done em { background: #8C6A2F; color: #FFFFFF; }

.praise .lux-head { margin-bottom: 22px; }
.praise-score {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 0;
    padding: 8px 18px;
    border: 1px solid rgba(176, 141, 69, 0.35);
    border-radius: 999px;
    background: #FBF6EC;
}
.praise-score b { color: #2A221B; font-size: 22px; line-height: 1; }
.praise-score span:last-child { color: #7A6856; font-size: 13px; }
.praise-belts {
    display: grid;
    gap: 14px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.praise-belt { overflow: hidden; }
.praise-run { display: flex; width: max-content; animation: tickerMove 56s linear infinite; }
.praise-belt.is-back .praise-run { animation-direction: reverse; }
.praise-belts:hover .praise-run { animation-play-state: paused; }
.praise-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 300px;
    margin-right: 14px;
    padding: 10px 18px 10px 10px;
    border: 1px solid rgba(176, 141, 69, 0.32);
    border-radius: 22px;
    background: #FFFFFF;
    color: inherit;
}
.praise-thumb { flex: none; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: #F3EBD9; }
.praise-thumb img, .praise-thumb svg { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.praise-copy { min-width: 0; }
.praise-top { display: flex; align-items: center; gap: 8px; }
.praise-top strong { color: #2A221B; font-size: 13.5px; white-space: nowrap; }
.praise-top .stars svg { width: 12px; height: 12px; }
.praise .stars i.on svg { fill: currentColor; }
.praise-copy em {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    color: #5C4A3A;
    font-size: 13px;
    font-style: normal;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notes-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.notes-row::-webkit-scrollbar { display: none; }
.note-card { display: flex; flex-direction: column; color: inherit; scroll-snap-align: start; }
.note-photo { position: relative; display: block; height: 240px; border-radius: 22px; overflow: hidden; background: #F3EBD9; }
.note-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 0.6s ease; }
.note-photo small {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #6A5224;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.note-card strong {
    margin-top: 16px;
    color: #2A221B;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.08;
}
.note-card em {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    color: #7A6856;
    font-size: 14px;
    font-style: normal;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.note-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: #8C6A2F;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.note-more svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.note-card:hover .note-photo img { transform: scale(1.05); }
.note-card:hover .note-more svg { transform: translateX(4px); }

.lux.ask { display: grid; gap: 24px; margin-bottom: 28px; }
.ask-lead {
    padding: 28px 24px;
    border: 1px solid rgba(176, 141, 69, 0.35);
    border-radius: 28px;
    background: linear-gradient(160deg, #FBF6EC, #FFFFFF);
}
.ask .kicker { margin: 0; color: #8C6A2F; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }
.ask-lead h2 {
    margin: 8px 0 0;
    color: #2A221B;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
}
.ask-lead .lux-sub { margin: 12px 0 0; }
.ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.ask-actions .look-more { margin: 0; }
.ask-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(176, 141, 69, 0.35);
    border-radius: 0;
    background: transparent;
}
.ask-item:first-child { border-top: 1px solid rgba(176, 141, 69, 0.35); }
.ask-item summary {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    gap: 12px;
    align-items: center;
    padding: 18px 2px;
    color: #2A221B;
    font-size: 15.5px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}
.ask-item summary::-webkit-details-marker { display: none; }
.ask-item summary .num { color: #B08D45; font-size: 13px; font-weight: 800; }
.ask-item summary i { position: relative; width: 18px; height: 18px; }
.ask-item summary i::before,
.ask-item summary i::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 2px;
    width: 14px;
    height: 1.5px;
    border-radius: 2px;
    background: #8C6A2F;
    transition: transform 0.3s ease;
}
.ask-item summary i::after { transform: rotate(90deg); }
.ask-item[open] summary i::after { transform: rotate(0deg); }
.ask-item p { margin: 0 0 20px 44px; color: #5C4A3A; font-size: 14.5px; line-height: 1.65; }

@media (prefers-reduced-motion: reduce) {
    .ticker-run, .praise-run { animation: none; }
    .fresh-panel:not([hidden]) { animation: none; }
}
@media (min-width: 900px) {
    .lux { width: min(1180px, calc(100% - 64px)); margin-top: 84px; }
    .lux.orbits { margin-top: 48px; }
    .lux-head { margin-bottom: 34px; }
    .lux-head h2 { gap: 22px; font-size: 52px; }
    .lux-head h2::before,
    .lux-head h2::after { max-width: 140px; }
    .lux-sub { font-size: 15px; }
    .lux.assure { margin-top: 44px; }
    .rank .rank-thumb { height: 100%; }
    .assure-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .assure-tile { flex-direction: row; align-items: center; gap: 14px; padding: 20px 22px; }
    .assure-icon { width: 52px; height: 52px; }
    .assure-icon svg { width: 24px; height: 24px; }
    .assure-tile b { font-size: 15px; }
    .assure-tile small { font-size: 12.5px; }
    .fresh-tabs { margin-bottom: 34px; }
    .fresh-tabs button { height: 46px; padding: 0 26px; font-size: 14px; }
    .suite-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; }
    .suite-card { height: 560px; }
    .suite-card:nth-child(2) { transform: translateY(28px); }
    .lux.suite { padding-bottom: 28px; }
    .suite-copy { left: 28px; right: 28px; bottom: 28px; }
    .suite-copy strong { font-size: 42px; }
    .ticker { margin-top: 84px; padding: 20px 0; }
    .ticker-set span { font-size: 13.5px; }
    .ticker-set i { margin: 0 34px; }
    .duo { grid-template-columns: 1fr 1fr; gap: 20px; }
    .duo-card { min-height: 380px; padding: 44px 40px; }
    .duo-card h3 { font-size: 48px; }
    .praise-card { width: 380px; margin-right: 18px; }
    .praise-belts { gap: 18px; }
    .notes-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; }
    .note-photo { height: 300px; }
    .lux.ask { grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; margin-bottom: 64px; }
    .ask-lead { position: sticky; top: 110px; padding: 40px 36px; }
    .ask-lead h2 { font-size: 52px; }
    .ask-item summary { padding: 22px 4px; font-size: 17px; }
}

/* Product page */
.stars i.on svg { fill: currentColor; }
.pd-crumb { display: none; }
.pd-gallery { position: relative; padding: 6px 16px 0; }
.pd-stage {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    background: #F6EFE2;
}
.pd-stage img,
.pd-stage svg { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.pd-flag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #8C6A2F;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(60, 49, 38, 0.1);
}
.pd-flag.is-off { left: auto; right: 14px; background: #B08D45; color: #FFFFFF; }
.pd-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #3C3126;
    box-shadow: 0 8px 20px rgba(60, 49, 38, 0.14);
    transition: transform 0.2s ease, background 0.2s ease;
}
.pd-nav svg { width: 18px; height: 18px; }
.pd-nav.is-prev { left: 12px; }
.pd-nav.is-next { right: 12px; }
.pd-nav:hover { background: #FFFFFF; transform: scale(1.06); }
.pd-count {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(60, 49, 38, 0.72);
    color: #FFFFFF;
    font-size: 12px;
    letter-spacing: 0.04em;
}
.pd-thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 12px 0 2px; scrollbar-width: none; }
.pd-thumbs::-webkit-scrollbar { display: none; }
.pd-thumbs .pdp-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 80px;
    padding: 0;
    border: 1px solid #E7DCC8;
    border-radius: 14px;
    overflow: hidden;
    background: #F6EFE2;
    opacity: 0.62;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.pd-thumbs .pdp-thumb.on { opacity: 1; border: 2px solid #B08D45; }
.pd-thumbs .pdp-thumb:hover { opacity: 1; }

.pd-info { padding: 20px 16px 8px; }
.pd-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #B08D45;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.pd-eyebrow i { width: 4px; height: 4px; border-radius: 50%; background: #D8C49A; }
.pd-eyebrow a:hover { color: #8C6A2F; }
.pd-info h1 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    color: #3C3126;
    text-wrap: balance;
}
.pd-rate { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: #7A6856; font-size: 13px; }
.pd-rate b { color: #3C3126; }
.pd-rate:hover span { color: #8C6A2F; text-decoration: underline; text-underline-offset: 3px; }
.pd-price { margin: 18px 0 0; padding: 16px 0; border-top: 1px solid #EFE6D6; border-bottom: 1px solid #EFE6D6; }
.pd-price .price-row { gap: 10px; }
.pd-price .price { color: #3C3126; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.pd-price .mrp { font-size: 16px; color: #9A8874; }
.pd-price .off { padding: 4px 10px; background: #F4E7C6; color: #7A5A1E; font-size: 12px; }
.pd-price small { display: block; margin-top: 6px; color: #7A6856; font-size: 12px; }
.pd-lead { margin: 16px 0 0; color: #5C4A3A; font-size: 15px; line-height: 1.6; }

.pd-form { margin-top: 6px; }
.pd-opt { margin-top: 18px; }
.pd-opt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    color: #3C3126;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.pd-opt-head b { margin-left: 6px; color: #7A6856; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 14px; }
.pd-guide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #8C6A2F;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pd-guide svg { width: 18px; height: 18px; }
.pd #colorChoices,
.pd #sizeChoices { display: none; }
html.has-js .pd #colorChoices,
html.has-js .pd #sizeChoices { display: flex; flex-wrap: wrap; gap: 10px; }
.pd .swatch {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(60, 49, 38, 0.18);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px #FFFFFF;
    outline: 0;
}
.pd .swatch.active { outline: 1.5px solid #B08D45; outline-offset: 3px; background-clip: padding-box; }
.pd .size {
    min-width: 54px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #E2D5BF;
    border-radius: 12px;
    background: #FFFFFF;
    color: #3C3126;
    font-size: 14px;
    font-weight: 700;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.pd .size:hover { border-color: #B08D45; }
.pd .size.active { border-color: #3C3126; background: #3C3126; color: #FFFFFF; }
.pd .size.off { opacity: 0.4; text-decoration: line-through; }
.pd-stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    color: #2F6A45;
    font-size: 13px;
    font-weight: 700;
}
.pd-stock:empty { display: none; }
.pd-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(47, 106, 69, 0.14); }
.pd-stock.is-low { color: #A6662A; }
.pd-stock.is-low::before { box-shadow: 0 0 0 4px rgba(166, 102, 42, 0.14); }
.pd-stock.is-out { color: #8E3A44; }
.pd-stock.is-out::before { box-shadow: 0 0 0 4px rgba(142, 58, 68, 0.14); }

.pd-buy { align-items: center; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.pd-buy .qty-step { flex: 0 0 auto; height: 50px; border: 1px solid #E2D5BF; border-radius: 999px; background: #FFFFFF; }
.pd-buy .qty-step button { width: 36px; height: 48px; color: #3C3126; }
.pd-buy .qty-step input { width: 26px; font-size: 15px; }
.pd-add.btn {
    flex: 1 1 auto;
    gap: 10px;
    height: 50px;
    margin: 0;
    background: linear-gradient(135deg, #B08D45, #8C6A2F);
    color: #FFFFFF;
    font-size: 15px;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 24px rgba(140, 106, 47, 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pd-add.btn svg { width: 20px; height: 20px; }
.pd-add.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(140, 106, 47, 0.3); }
.pd-save { flex: 0 0 auto; margin: 0; }
.pd-save .iconbtn {
    width: 50px;
    height: 50px;
    border: 1px solid #E2D5BF;
    background: #FFFFFF;
    color: #3C3126;
}
.pd-save .iconbtn.on { color: #8E3A44; border-color: #E8C9CD; background: #FBF1F2; }

.pd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pd-actions form { margin: 0; }
.pd-act {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #EBE1CF;
    border-radius: 999px;
    background: #FFFFFF;
    color: #5C4A3A;
    font-size: 12.5px;
    font-weight: 700;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.pd-act em { font-style: normal; }
.pd-act svg { width: 16px; height: 16px; }
.pd-act:hover, .pd-act.is-on, .pd-act.is-done { border-color: #B08D45; color: #8C6A2F; }

.pd-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.pd-perks li {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: 1px solid #EFE6D6;
    border-radius: 16px;
    background: #FFFCF7;
    text-align: center;
}
.pd-perks svg { width: 24px; height: 24px; color: #B08D45; }
.pd-perks b { display: block; color: #3C3126; font-size: 12px; line-height: 1.3; }
.pd-perks small { display: block; margin-top: 2px; color: #7A6856; font-size: 11px; line-height: 1.35; }

.pd-deliver {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px dashed #D8C49A;
    border-radius: 16px;
    background: #FFFFFF;
}
.pd-deliver > svg { flex: 0 0 auto; width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: #F4E7C6; color: #8C6A2F; }
.pd-deliver p { flex: 1 1 auto; margin: 0; color: #5C4A3A; font-size: 13px; }
.pd-deliver p b { color: #3C3126; }
.pd-deliver small { display: block; margin-top: 2px; color: #7A6856; font-size: 12px; }
.pd-deliver button {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #B08D45;
    border-radius: 999px;
    background: #FFFFFF;
    color: #8C6A2F;
    font-size: 12px;
    font-weight: 800;
}
.pd-deliver button:hover { background: #B08D45; color: #FFFFFF; }

.pd-acc { margin-top: 22px; border-top: 1px solid #EFE6D6; }
.pd-acc details { margin: 0; padding: 0; border-radius: 0; background: transparent; border-bottom: 1px solid #EFE6D6; }
.pd-acc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 2px;
    color: #3C3126;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    list-style: none;
}
.pd-acc summary::-webkit-details-marker { display: none; }
.pd-acc summary svg { width: 18px; height: 18px; color: #B08D45; transition: transform 0.25s ease; }
.pd-acc details[open] summary svg { transform: rotate(45deg); }
.pd-acc-body { padding: 0 2px 20px; color: #5C4A3A; font-size: 14px; line-height: 1.7; }
.pd-acc-body p { margin: 0 0 10px; color: #5C4A3A; }
.pd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.pd-facts div { padding: 12px 14px; border-radius: 14px; background: #FFFCF7; border: 1px solid #EFE6D6; }
.pd-facts dt { color: #9A8874; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.pd-facts dd { margin: 4px 0 0; color: #3C3126; font-size: 14px; font-weight: 700; }
.pd-link { display: inline-flex; align-items: center; gap: 4px; color: #8C6A2F; font-weight: 700; }
.pd-link svg { width: 16px; height: 16px; }

.pd-more, .pd-reviews { padding: 44px 16px 0; }
.pd-head { position: relative; margin-bottom: 20px; text-align: center; }
.pd-kicker { margin: 0 0 8px; color: #B08D45; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.pd-head h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-weight: 600; line-height: 1.05; color: #3C3126; }
.pd-head h2::after { content: ""; display: block; width: 44px; height: 1px; margin: 14px auto 0; background: #B08D45; }
.pd-head a { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; color: #8C6A2F; font-size: 13px; font-weight: 700; }
.pd-head a svg { width: 15px; height: 15px; }
.pd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pd-grid .pcard { width: auto; flex: none; }

.pd-review-wrap { display: grid; gap: 14px; }
.pd-score {
    padding: 24px 20px;
    border: 1px solid #EFE6D6;
    border-radius: 22px;
    background: linear-gradient(180deg, #FFFCF7, #FBF5E8);
    text-align: center;
}
.pd-score strong { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 64px; font-weight: 600; line-height: 1; color: #3C3126; }
.pd-score .stars { margin-top: 8px; }
.pd-score .stars svg { width: 18px; height: 18px; }
.pd-score > p { margin: 8px 0 16px; color: #7A6856; font-size: 13px; }
.pd-spread { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pd-spread li { display: grid; grid-template-columns: 30px 1fr 22px; align-items: center; gap: 10px; color: #7A6856; font-size: 12px; font-weight: 700; }
.pd-spread i { height: 6px; overflow: hidden; border-radius: 999px; background: #EFE6D6; }
.pd-spread i b { display: block; height: 100%; border-radius: inherit; background: #B08D45; }
.pd-spread em { font-style: normal; text-align: right; }
.pd-review-list { display: grid; gap: 12px; align-content: start; }
.pd-review-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 36px 20px;
    border: 1px dashed #D8C49A;
    border-radius: 22px;
    text-align: center;
}
.pd-review-empty svg { width: 30px; height: 30px; color: #B08D45; }
.pd-review-empty strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; font-weight: 600; color: #3C3126; }
.pd-review-empty p { margin: 0; color: #7A6856; font-size: 14px; }
.pd-review { padding: 18px; border: 1px solid #EFE6D6; border-radius: 20px; background: #FFFFFF; }
.pd-review header { display: flex; align-items: center; gap: 12px; }
.pd-review header > span:nth-child(2) { flex: 1 1 auto; }
.pd-review header b { display: block; color: #3C3126; font-size: 14px; }
.pd-review header small { color: #2F6A45; font-size: 11px; font-weight: 700; }
.pd-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #F4E7C6; color: #8C6A2F; font-weight: 800; }
.pd-review p { margin: 12px 0 0; color: #5C4A3A; font-family: "Cormorant Garamond", Georgia, serif; font-size: 21px; line-height: 1.3; }
.pd-review-form {
    display: grid;
    gap: 14px;
    padding: 24px 20px;
    border: 1px solid #EFE6D6;
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 18px 40px rgba(140, 106, 47, 0.07);
}
.pd-review-form .pd-kicker { margin: 0; }
.pd-review-form h3 { margin: -6px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; font-weight: 600; color: #3C3126; }
.pd-review-form label { color: #3C3126; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.pd-review-form textarea { background: #FFFFFF; border-color: #E2D5BF; text-transform: none; letter-spacing: 0; }
.pd-review-form .btn { margin: 0; background: #3C3126; }
.pd-review-form .rate-pick button { background: #FFFFFF; border-color: #E2D5BF; }
.pd-review-form .rate-pick button.on { background: #F4E7C6; border-color: #B08D45; color: #B08D45; }
.pd-review-form .rate-pick button.on svg { fill: currentColor; }

@media (max-width: 979px) {
    .pd-buy { box-shadow: 0 -10px 28px rgba(60, 49, 38, 0.08); }
    .pd-actions { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
    .pd-actions::-webkit-scrollbar { display: none; }
    .pd-act { flex: 0 0 auto; }
    .pd-nav { width: 34px; height: 34px; margin-top: -17px; }
    .pd-perks li { padding: 12px 6px; }
}

@media (min-width: 980px) {
    .pd-crumb {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: min(1240px, calc(100% - 64px));
        margin: 22px auto 0;
        color: #9A8874;
        font-size: 12.5px;
        font-weight: 600;
    }
    .pd-crumb svg { width: 14px; height: 14px; color: #C9B48A; }
    .pd-crumb a { color: #7A6856; }
    .pd-crumb a:hover { color: #8C6A2F; }
    .pd-crumb span { color: #3C3126; }
    .pdp.pd {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        column-gap: 64px;
        align-items: start;
        width: min(1240px, calc(100% - 64px));
        margin: 22px auto 0;
    }
    .pd-gallery { position: sticky; top: 108px; padding: 0; }
    .pd-gallery.has-rail { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: start; }
    .pd-gallery.has-rail .pd-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; padding: 0; max-height: min(720px, calc(100vh - 140px)); overflow-y: auto; }
    .pd-gallery.has-rail .pd-stage { grid-column: 2; grid-row: 1; }
    .pd-thumbs .pdp-thumb { flex: 0 0 104px; width: 84px; height: 104px; }
    .pd-stage { aspect-ratio: auto; height: min(720px, calc(100vh - 140px)); min-height: 520px; border-radius: 28px; }
    .pd-stage img { transition: transform 0.6s ease; }
    .pd-stage:hover img { transform: scale(1.03); }
    .pd-nav { opacity: 0; }
    .pd-stage:hover .pd-nav, .pd-nav:focus-visible { opacity: 1; }
    .pd-info { padding: 8px 0 0; }
    .pd-info h1 { font-size: 58px; }
    .pd-price .price { font-size: 32px; }
    .pdp .pd-buy {
        position: static;
        display: flex;
        width: auto;
        margin-top: 24px;
        padding: 0;
        border: 0;
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
    }
    .pd-buy .qty-step { height: 56px; }
    .pd-buy .qty-step button { width: 42px; height: 54px; }
    .pd-buy .qty-step input { width: 30px; }
    .pd-add.btn { height: 56px; font-size: 16px; }
    .pd-save .iconbtn { width: 56px; height: 56px; }
    .pd-perks li { justify-items: start; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 14px; text-align: left; }
    .pd-more, .pd-reviews { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: 88px 0 0; }
    .pd-reviews { padding-bottom: 72px; }
    .pd-head { margin-bottom: 32px; }
    .pd-head h2 { font-size: 52px; }
    .pd-more .pd-head a { position: absolute; right: 0; bottom: 10px; margin: 0; }
    .pd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .pd-grid .pcard-media { height: 340px; }
    .pd-review-wrap { grid-template-columns: 280px minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
    .pd-score { position: sticky; top: 108px; padding: 32px 24px; }
    .pd-review-form { position: sticky; top: 108px; padding: 28px 26px; }
}
@media (min-width: 980px) and (max-width: 1180px) {
    .pdp.pd { column-gap: 40px; }
    .pd-info h1 { font-size: 46px; }
    .pd-gallery.has-rail { grid-template-columns: 70px minmax(0, 1fr); }
    .pd-thumbs .pdp-thumb { width: 70px; height: 88px; flex-basis: 88px; }
    .pd-perks { grid-template-columns: 1fr; }
    .pd-review-wrap { grid-template-columns: 240px minmax(0, 1fr); }
    .pd-review-form { grid-column: 1 / -1; position: static; }
    .pd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pd-grid .pcard:nth-child(4) { display: none; }
}

/* Inner pages */
.chip { text-transform: none; border: 1px solid transparent; transition: background 0.2s ease, border-color 0.2s ease; }
.chip:not(.active) { background: #FFFFFF; border-color: #E7DCC8; color: #5C4A3A; }
.chip:not(.active):hover { border-color: #B08D45; color: #8C6A2F; }
.chip.active { background: #3C3126; color: #FFFFFF; }
input, select, textarea { background: #FFFFFF; border-color: #E2D5BF; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: #B08D45; box-shadow: 0 0 0 4px rgba(176, 141, 69, 0.14); }
.check input:focus { box-shadow: none; }
.checkout input:not([type="radio"]):not([type="checkbox"]),
.auth-card input:not([type="radio"]):not([type="checkbox"]) { background: #FFFFFF; box-shadow: none; border: 1px solid #E2D5BF; }
.checkout input:not([type="radio"]):not([type="checkbox"]):focus,
.auth-card input:not([type="radio"]):not([type="checkbox"]):focus { border-color: #B08D45; box-shadow: 0 0 0 4px rgba(176, 141, 69, 0.14); }
.qty, .addr-pick, .pay-opt { background: #FFFFFF; border-color: #E7DCC8; }
.addr-pick.on, .pay-opt:has(input:checked) { border-color: #B08D45; background: #FFFCF5; box-shadow: 0 0 0 3px rgba(176, 141, 69, 0.12); }
.btn.ghost { border-color: #D8C49A; color: #8C6A2F; background: #FFFFFF; }
.flash { border: 1px solid rgba(47, 106, 69, 0.14); }
.flash.warn { border-color: rgba(176, 141, 69, 0.3); background: #FBF3E0; }
.flash.err { border-color: rgba(142, 58, 68, 0.18); }
.page-head .kicker, .page-head p:first-child { letter-spacing: 0.22em; }
.pcard { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pcard-media img { transition: transform 0.6s ease; }
.pcard-media { overflow: hidden; }
@media (hover: hover) {
    .pcard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(140, 106, 47, 0.12); }
    .pcard:hover .pcard-media img { transform: scale(1.05); }
}

.house-id, .house-card, .house-latest, .folio-card, .folio-empty,
.thanks-pieces, .thanks-bill, .house-room, .cart-line, .sum, .coupon, .check-block, .order-card {
    background: #FFFFFF;
    border: 1px solid #EFE6D6;
    box-shadow: 0 14px 34px rgba(140, 106, 47, 0.06);
}
.house-addr { background: #FFFCF7; border: 1px solid #EFE6D6; }
.house-id i { background: linear-gradient(135deg, #B08D45, #8C6A2F); color: #FFFFFF; }
.house-room.dark { background: linear-gradient(140deg, #B08D45, #8C6A2F); border-color: transparent; color: #FFFFFF; box-shadow: 0 18px 38px rgba(140, 106, 47, 0.24); }
.house-room.dark b, .house-room.dark span { color: rgba(255, 255, 255, 0.86); }
.house-room.line { background: #FFFFFF; border: 1.5px dashed #D8C49A; box-shadow: none; }
a.house-room, a.house-latest, a.folio-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
a.house-room:hover, a.house-latest:hover, a.folio-card:hover { transform: translateY(-3px); border-color: #D8C49A; box-shadow: 0 20px 40px rgba(140, 106, 47, 0.1); }
.house-card .kicker, .house-id p.kicker { color: #B08D45; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.house-id .btn.ghost { height: 42px; width: auto; padding: 0 22px; margin: 0; }
@media (max-width: 599px) {
    .house-id .btn.ghost { width: 100%; }
    .house-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .house-room { min-height: 112px; padding: 14px 12px; border-radius: 18px; }
    .house-room b { font-size: 10px; letter-spacing: 0.12em; }
    .house-room strong { font-size: 32px; }
    .house-room strong.num { font-size: 30px; }
    .house-room span { font-size: 11px; line-height: 1.3; }
}
.house-links a:hover { color: #8C6A2F; }
.cart-line { padding: 12px; border-radius: 20px; }
.line-art { border-radius: 14px; }
.bag-count { color: #B08D45; font-weight: 800; letter-spacing: 0.16em; }
.coupon { padding: 16px; border-radius: 20px; }
.coupon-row input { text-transform: uppercase; }
.sum { padding: 16px 18px; border-radius: 20px; }
.ship-track { background: #F3EBD9; }
.ship-track span { background: linear-gradient(90deg, #D8C49A, #B08D45); }
.track-find { padding: 16px; border: 1px solid #EFE6D6; border-radius: 22px; background: #FFFFFF; box-shadow: 0 14px 34px rgba(140, 106, 47, 0.06); }

.story { padding: 14px 16px 0; }
.story-hero { margin: 0; overflow: hidden; height: 320px; border-radius: 26px; background: #F6EFE2; }
.story-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.story-body { max-width: 700px; margin: 0 auto; padding: 30px 4px 0; }
.story-body p { margin: 0 0 20px; color: #5C4A3A; font-size: 16.5px; line-height: 1.85; }
.story-body .story-lead { color: #3C3126; font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; line-height: 1.4; }
.story-body .story-lead::first-letter { float: left; margin: 6px 12px 0 0; color: #B08D45; font-size: 74px; line-height: 0.8; font-weight: 600; }
.story-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 30px; padding-top: 22px; border-top: 1px solid #EFE6D6; }
.story-foot span { display: flex; gap: 8px; }
.story-more { padding-left: 0; padding-right: 0; }
.blog-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.blog-photo { overflow: hidden; }
.blog-photo img { transition: transform 0.6s ease; }
@media (hover: hover) {
    .blog-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(140, 106, 47, 0.12); }
    .blog-card:hover .blog-photo img { transform: scale(1.05); }
}
@media (min-width: 980px) {
    .story { width: min(1180px, calc(100% - 64px)); margin: 18px auto 0; padding: 0; }
    .story-hero { height: 540px; border-radius: 32px; }
    .story-body { padding-top: 48px; }
    .story-body .story-lead { font-size: 32px; }
    .story-more { width: min(860px, 100%); margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.blank {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: 18px 16px 0;
    padding: 40px 22px;
    border: 1px solid #EFE6D6;
    border-radius: 28px;
    background: radial-gradient(circle at 50% 0%, #FBF3E0 0%, #FFFFFF 70%);
    text-align: center;
}
.blank-icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 8px;
    border: 1px solid #E7D3A8;
    border-radius: 50%;
    background: #FFFFFF;
    color: #B08D45;
    box-shadow: 0 14px 30px rgba(140, 106, 47, 0.12), inset 0 0 0 6px #FBF3E0;
}
.blank-icon svg { width: 30px; height: 30px; }
.blank h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-weight: 600; color: #3C3126; }
.blank p { max-width: 360px; margin: 0 0 10px; color: #7A6856; font-size: 14px; line-height: 1.6; }
.blank .btn { width: auto; min-width: 220px; padding: 0 28px; margin: 0; }

.info { display: grid; gap: 16px; padding: 18px 16px 8px; }
.info-side { display: grid; gap: 14px; align-content: start; order: 2; }
.info-body { order: 1; }
.info-nav {
    display: grid;
    padding: 18px 8px 8px;
    border: 1px solid #EFE6D6;
    border-radius: 22px;
    background: #FFFFFF;
}
.info-nav .pd-kicker { margin: 0 12px 8px; }
.info-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    border-radius: 12px;
    color: #5C4A3A;
    font-size: 14px;
    font-weight: 600;
}
.info-nav a svg { width: 16px; height: 16px; color: #C9B48A; }
.info-nav a:hover { background: #FBF6EC; color: #3C3126; }
.info-nav a.is-on { background: #3C3126; color: #FFFFFF; }
.info-nav a.is-on svg { color: #E7D3A8; }
.info-help {
    padding: 22px 20px;
    border-radius: 22px;
    background: linear-gradient(150deg, #FBF3E0, #F4E7C6);
    border: 1px solid #E7D3A8;
}
.info-help .pd-kicker { margin-bottom: 6px; }
.info-help h3 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; font-weight: 600; color: #3C3126; }
.info-help p { margin: 6px 0 14px; color: #6E5C48; font-size: 13.5px; line-height: 1.55; }
.info-help-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.info-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid #D8C49A;
    border-radius: 999px;
    background: #FFFFFF;
    color: #5C4A3A;
    font-size: 13px;
    font-weight: 700;
}
.info-btn svg { width: 18px; height: 18px; }
.info-btn.is-gold { border-color: transparent; background: #8C6A2F; color: #FFFFFF; }
.info-body {
    padding: 26px 22px;
    border: 1px solid #EFE6D6;
    border-radius: 24px;
    background: #FFFFFF;
    color: #5C4A3A;
    font-size: 15.5px;
    line-height: 1.8;
}
.info-body > p { margin: 0 0 16px; }
.info-body > p:last-child { margin-bottom: 0; }
.info-body .info-lead { color: #3C3126; font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; line-height: 1.35; }
.info-body.is-faq { padding: 6px 20px; }
.info-q { margin: 0; padding: 0; border-radius: 0; background: transparent; border-bottom: 1px solid #EFE6D6; }
.info-q:last-child { border-bottom: 0; }
.info-q summary {
    display: grid;
    grid-template-columns: 34px 1fr 18px;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    color: #3C3126;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
}
.info-q summary::-webkit-details-marker { display: none; }
.info-q .num { color: #B08D45; font-size: 13px; font-weight: 800; }
.info-q summary i { position: relative; width: 18px; height: 18px; }
.info-q summary i::before,
.info-q summary i::after { content: ""; position: absolute; top: 8px; left: 2px; width: 14px; height: 1.6px; border-radius: 2px; background: #B08D45; transition: transform 0.25s ease; }
.info-q summary i::after { transform: rotate(90deg); }
.info-q[open] summary i::after { transform: rotate(0deg); }
.info-q p { margin: -6px 0 0; padding: 0 28px 22px 44px; color: #6E5C48; font-size: 15px; line-height: 1.7; }

.reach { display: grid; gap: 10px; }
.reach-card {
    display: grid;
    grid-template-columns: 44px 1fr 18px;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #EFE6D6;
    border-radius: 20px;
    background: #FFFFFF;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.reach-card > svg:first-child { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: #F4E7C6; color: #8C6A2F; }
.reach-card > svg:last-child { width: 18px; height: 18px; color: #C9B48A; }
.reach-card small { display: block; color: #9A8874; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.reach-card b { display: block; margin-top: 2px; color: #3C3126; font-size: 15px; word-break: break-word; }
a.reach-card:hover { border-color: #B08D45; transform: translateY(-2px); }
.reach-card.is-gold { border-color: transparent; background: linear-gradient(135deg, #B08D45, #8C6A2F); }
.reach-card.is-gold > svg:first-child { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.reach-card.is-gold small { color: rgba(255, 255, 255, 0.75); }
.reach-card.is-gold b, .reach-card.is-gold > svg:last-child { color: #FFFFFF; }
.reach-card.is-plain { grid-template-columns: 44px 1fr; }
.reach-note { margin: 4px 4px 0; color: #7A6856; font-size: 13px; line-height: 1.6; }
.reach-note a { color: #8C6A2F; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.form-card { display: grid; gap: 14px; box-shadow: 0 22px 50px rgba(140, 106, 47, 0.08); }
.form-card .pd-kicker { margin: 0; }
.form-card h2 { margin: -8px 0 4px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-weight: 600; color: #3C3126; line-height: 1.1; }
.form-card label { color: #5C4A3A; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.form-card input, .form-card textarea { text-transform: none; letter-spacing: 0; }
.form-card .btn { margin-top: 4px; }

.shop { padding: 0 16px; }
.shop-side { display: none; }
.shop-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 0 16px; }
.shop-count { margin: 0 auto 0 0; color: #7A6856; font-size: 13px; }
.shop-count b { color: #3C3126; font-size: 15px; }
.shop-tags { display: flex; flex-wrap: wrap; gap: 6px; order: 5; width: 100%; }
.shop-tags a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px 0 14px;
    border-radius: 999px;
    background: #FBF3E0;
    color: #6A5224;
    font-size: 12.5px;
    font-weight: 700;
}
.shop-tags svg { width: 14px; height: 14px; }
.shop-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #E2D5BF;
    border-radius: 999px;
    background: #FFFFFF;
    color: #3C3126;
    font-size: 13px;
    font-weight: 700;
}
.shop-filter-btn svg { width: 18px; height: 18px; }
.shop-filter-btn.is-link { color: #8C6A2F; }
.shop-sort { margin: 0; }
.shop-sort label { display: flex; align-items: center; gap: 0; position: relative; }
.shop-sort label span { position: absolute; left: 16px; color: #9A8874; font-size: 12px; font-weight: 700; pointer-events: none; }
.shop-sort select {
    height: 40px;
    padding: 0 34px 0 52px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #3C3126;
    appearance: none;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08D45' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
}
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 979px) {
    .shop-tools { gap: 8px; }
    .shop-sort select { max-width: 150px; }
    .info.is-contact .info-side { order: 0; }
    .info.is-contact .reach { grid-template-columns: 1fr 1fr; }
    .info.is-contact .reach-card { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
    .info.is-contact .reach-card > svg:last-child { display: none; }
    .info.is-contact .reach-card b { font-size: 13px; }
}
.shop-grid .pcard { width: auto; flex: none; }
.shop-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 36px 0 8px; }
.shop-pager a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #E7DCC8;
    border-radius: 999px;
    color: #5C4A3A;
    font-weight: 700;
}
.shop-pager a svg { width: 16px; height: 16px; }
.shop-pager a:hover { border-color: #B08D45; color: #8C6A2F; }
.shop-pager a.is-on { border-color: #3C3126; background: #3C3126; color: #FFFFFF; }
.shop .blank { margin: 0; }

.auth-split .auth-art { display: none; }
.auth-card h2 { margin: -6px 0 6px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; font-weight: 600; color: #3C3126; }
.auth-card .pd-kicker { margin: 0; }
.auth-wrap .auth-card { border: 1px solid #EFE6D6; background: #FFFFFF; box-shadow: 0 22px 50px rgba(140, 106, 47, 0.08); }

.edits { display: grid; gap: 14px; padding: 16px 16px 0; }
.edit-card {
    position: relative;
    display: block;
    overflow: hidden;
    height: 420px;
    border-radius: 26px;
    background: #F6EFE2;
    color: #FFFFFF;
    isolation: isolate;
}
.edit-card > img, .edit-card > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.8s ease; }
.edit-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(30, 22, 14, 0) 38%, rgba(30, 22, 14, 0.72) 100%); }
.edit-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #8C6A2F;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.edit-copy { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; display: grid; gap: 6px; }
.edit-copy small { color: #F4E7C6; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.edit-copy strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 40px; font-weight: 600; line-height: 1; }
.edit-copy > span { color: rgba(255, 255, 255, 0.86); font-size: 14px; }
.edit-copy b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    margin-top: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #3C3126;
    font-size: 13px;
}
.edit-copy b svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.edit-card:hover > img { transform: scale(1.05); }
.edit-card:hover .edit-copy b svg { transform: translateX(3px); }
.edit-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
.edit-cat { display: grid; justify-items: center; gap: 10px; text-align: center; }
.edit-cat span {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: #F6EFE2;
    box-shadow: 0 0 0 1px #E7D3A8, 0 0 0 5px #FFFFFF, 0 0 0 6px #F0E4CC;
}
.edit-cat img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.6s ease; }
.edit-cat b { color: #3C3126; font-size: 13.5px; }
.edit-cat:hover img { transform: scale(1.08); }

@media (min-width: 980px) {
    .main:has(.shop) > .chips { display: none; }
    .shop {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 44px;
        align-items: start;
        width: min(1240px, calc(100% - 64px));
        margin: 18px auto 0;
        padding: 0;
    }
    .shop.is-saved { grid-template-columns: minmax(0, 1fr); }
    .shop-side { display: block; position: sticky; top: 108px; }
    .shop-filter { display: grid; gap: 4px; padding: 6px 0; }
    .sf-group { padding: 18px 0; border-bottom: 1px solid #EFE6D6; }
    .sf-group:first-child { padding-top: 4px; }
    .sf-title { margin: 0 0 12px; color: #3C3126; font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
    .sf-link { display: block; padding: 7px 0; color: #6E5C48; font-size: 14px; transition: color 0.2s ease, padding 0.2s ease; }
    .sf-link:hover { color: #8C6A2F; padding-left: 4px; }
    .sf-link.is-on { color: #3C3126; font-weight: 800; }
    .sf-link.is-on::before { content: ""; display: inline-block; width: 14px; height: 1.6px; margin: 0 8px 4px 0; background: #B08D45; vertical-align: middle; }
    .sf-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
    .sf-size, .sf-radio { cursor: pointer; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
    .sf-size input, .sf-radio input { position: absolute; opacity: 0; pointer-events: none; }
    .sf-size span {
        display: grid;
        place-items: center;
        min-width: 46px;
        height: 40px;
        padding: 0 10px;
        border: 1px solid #E2D5BF;
        border-radius: 10px;
        color: #3C3126;
        font-size: 13px;
        font-weight: 700;
    }
    .sf-size:hover span { border-color: #B08D45; }
    .sf-size input:checked + span { border-color: #3C3126; background: #3C3126; color: #FFFFFF; }
    .sf-size input:focus-visible + span, .sf-radio input:focus-visible + span { outline: 2px solid #B08D45; outline-offset: 2px; }
    .sf-radio { display: flex; align-items: center; padding: 6px 0; color: #6E5C48; }
    .sf-radio span { display: inline-flex; align-items: center; gap: 10px; }
    .sf-radio span::before { content: ""; width: 16px; height: 16px; border: 1.5px solid #D8C49A; border-radius: 50%; background: #FFFFFF; transition: box-shadow 0.2s ease, border-color 0.2s ease; }
    .sf-radio:hover span { color: #3C3126; }
    .sf-radio input:checked + span { color: #3C3126; font-weight: 800; }
    .sf-radio input:checked + span::before { border-color: #B08D45; box-shadow: inset 0 0 0 3.5px #FFFFFF; background: #B08D45; }
    .sf-clear { display: inline-block; margin-top: 18px; color: #8C6A2F; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
    .shop-tools { padding: 0 0 22px; border-bottom: 1px solid #EFE6D6; margin-bottom: 26px; }
    .shop-tags { order: 0; width: auto; }
    .shop-filter-btn:not(.is-link) { display: none; }
    .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 20px; }
    .shop.is-saved .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .shop-grid .pcard-media { height: 380px; }

    .info {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 40px;
        align-items: start;
        width: min(1120px, calc(100% - 64px));
        margin: 28px auto 0;
        padding: 0;
    }
    .info-side { order: 0; position: sticky; top: 108px; }
    .info-body { order: 0; padding: 44px 52px; border-radius: 28px; }
    .info-body.is-faq { padding: 10px 40px; }
    .info-body .info-lead { font-size: 30px; }
    .info-q summary { padding: 26px 0; font-size: 18px; grid-template-columns: 44px 1fr 18px; }
    .info-q p { padding-left: 54px; font-size: 15.5px; }
    .info.is-contact { grid-template-columns: 380px minmax(0, 1fr); }
    .form-card { padding: 40px 44px; }
    .form-card h2 { font-size: 42px; }

    .auth-wrap.auth-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: min(1040px, calc(100% - 64px));
        margin: 28px auto 24px;
        overflow: hidden;
        border: 1px solid #EFE6D6;
        border-radius: 32px;
        background: #FFFFFF;
        box-shadow: 0 30px 70px rgba(140, 106, 47, 0.1);
    }
    .main:has(.auth-split) > .flash { width: min(1040px, calc(100% - 64px)); }
    .auth-split .auth-art { position: relative; display: block; min-height: 560px; overflow: hidden; background: #F6EFE2; }
    .auth-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    .auth-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 22, 14, 0) 30%, rgba(30, 22, 14, 0.78) 100%); }
    .auth-art-copy { position: absolute; left: 36px; right: 36px; bottom: 36px; z-index: 1; color: #FFFFFF; }
    .auth-art-copy .pd-kicker { color: #F4E7C6; }
    .auth-art-copy h2 { margin: 0 0 18px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 44px; font-weight: 600; line-height: 1.02; }
    .auth-art-copy ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
    .auth-art-copy li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.9); font-size: 14px; }
    .auth-art-copy li svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
    .auth-split .auth-card { align-self: center; margin: 0; padding: 48px 52px; border: 0; box-shadow: none; }
    .auth-split .auth-card h2 { font-size: 40px; }

    .edits { grid-template-columns: 1.3fr 1fr; grid-auto-rows: 330px; gap: 20px; width: min(1240px, calc(100% - 64px)); margin: 18px auto 0; padding: 0; }
    .edit-card { height: auto; border-radius: 30px; }
    .edit-card.is-lead { grid-row: span 2; }
    .edit-card.is-lead .edit-copy strong { font-size: 60px; }
    .edit-copy { left: 32px; right: 32px; bottom: 30px; }
    .edit-cats-wrap { padding-bottom: 24px; }
    .edit-cats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; }
    .edit-cat b { font-size: 15px; }

    .blank { width: min(820px, calc(100% - 64px)); margin: 24px auto 0; padding: 56px 40px; }
    .shop .blank { width: auto; }
    .blank h2 { font-size: 44px; }
}
@media (min-width: 980px) and (max-width: 1180px) {
    .shop { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; }
    .shop-grid .pcard-media { height: 300px; }
    .shop.is-saved .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .info { grid-template-columns: 260px minmax(0, 1fr); gap: 28px; }
    .info.is-contact { grid-template-columns: 320px minmax(0, 1fr); }
    .edit-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Virtual try-on */
.pd-stage .pd-try {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px 0 13px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #8C6A2F;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 10px 22px rgba(60, 49, 38, 0.16);
    transition: transform 0.2s ease, background 0.2s ease;
}
.pd-stage .pd-try svg { width: 16px; height: 16px; object-fit: initial; fill: none; stroke: currentColor; }
.pd-stage .pd-try:hover { transform: translateY(-1px); background: #FFFFFF; }

.pd-vto {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid #E2CFA5;
    border-radius: 18px;
    background: linear-gradient(135deg, #FFFCF5, #FBF3E0);
    color: #3C3126;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pd-vto:hover { border-color: #B08D45; box-shadow: 0 12px 26px rgba(140, 106, 47, 0.14); transform: translateY(-1px); }
.pd-vto-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #B08D45, #8C6A2F);
    color: #FFFFFF;
}
.pd-vto-icon svg { width: 22px; height: 22px; }
.pd-vto > span:nth-child(2) { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pd-vto b { font-size: 15px; font-weight: 800; }
.pd-vto small { color: #7A6650; font-size: 12.5px; }
.pd-vto em {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid #E2CFA5;
    color: #8C6A2F;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.12em;
}

html.vto-lock, html.vto-lock body { overflow: hidden; }
.vto { position: fixed; inset: 0; z-index: 80; display: grid; place-items: stretch; }
.vto[hidden],
.vto [hidden] { display: none !important; }
.vto:not(.is-open) { pointer-events: none; }
.vto-backdrop { position: absolute; inset: 0; background: rgba(42, 34, 27, 0.5); opacity: 0; transition: opacity 0.22s ease; }
.vto-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    color: #3C3126;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.vto.is-open .vto-backdrop { opacity: 1; }
.vto.is-open .vto-panel { opacity: 1; transform: none; }
.vto-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid #EFE6D6;
}
.vto-head .pd-kicker { margin: 0 0 3px; font-size: 10px; }
.vto-head h2 {
    margin: 0;
    overflow: hidden;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.vto-head > div { min-width: 0; }
.vto-x {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #EBE1CF;
    border-radius: 50%;
    background: #FFFFFF;
    color: #3C3126;
}
.vto-x svg { width: 18px; height: 18px; }
.vto-x:hover { border-color: #B08D45; color: #8C6A2F; }
.vto-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }

.vto-main { display: flex; flex: 0 0 auto; flex-direction: column; }
.vto-rail { order: 2; margin: 10px 0 0; }
.vto-rail > .vto-rail-head { display: none; }
.vto-rail-head { margin: 0 0 8px; color: #8C6A2F; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.vto-rail-head.is-more { flex: 0 0 auto; align-self: center; margin: 0; padding: 0 2px; color: #9A8874; writing-mode: vertical-rl; transform: rotate(180deg); }
.vto-rail-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px; scrollbar-width: thin; overscroll-behavior: contain; }
.vto-piece {
    display: grid;
    flex: 0 0 72px;
    gap: 0;
    overflow: hidden;
    padding: 0;
    border: 2px solid #EFE6D6;
    border-radius: 14px;
    background: #FFFFFF;
    color: #5C4A3A;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.vto-piece img { height: auto; aspect-ratio: 3 / 4; object-position: center top; }
.vto-piece span { overflow: hidden; padding: 4px 5px 5px; font-size: 10.5px; font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.vto-piece:hover { border-color: #D8C49A; }
.vto-piece.is-on { border-color: #B08D45; box-shadow: 0 8px 18px rgba(140, 106, 47, 0.2); }
.vto-piece.is-on span { background: #B08D45; color: #FFFFFF; }
.vto-picked { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid #EFE6D6; border-radius: 16px; background: #FFFCF7; }
.vto-picked img { flex: 0 0 auto; width: 46px; height: 58px; border-radius: 10px; object-position: center top; }
.vto-picked span { display: grid; gap: 1px; min-width: 0; }
.vto-picked small { color: #9A8874; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.vto-picked b { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.vto-picked em { color: #8C6A2F; font-size: 13px; font-style: normal; font-weight: 800; }
.vto-stage {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    height: 42vh;
    height: 42dvh;
    min-height: 260px;
    margin: 12px 16px 0;
    overflow: hidden;
    border: 1px solid #EFE6D6;
    border-radius: 22px;
    background: #FBF7F0;
}
.vto-stage canvas,
.vto-stage .vto-ai-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.vto-stage canvas { touch-action: none; cursor: grab; }
.vto-stage canvas:active { cursor: grabbing; }
.vto-stage canvas { background: #F7F3EC; }

.vto-busy {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(3px);
    text-align: center;
}
.vto-busy b { font-size: 16px; }
.vto-busy small { max-width: 280px; color: #7A6650; font-size: 13px; line-height: 1.45; }
.vto-busy .pd-act { margin-top: 6px; }
.vto-busy.is-error .vto-spin { display: none; }
.vto-spin {
    width: 42px;
    height: 42px;
    margin-bottom: 6px;
    border: 3px solid #EFE3CC;
    border-top-color: #B08D45;
    border-radius: 50%;
    animation: vto-spin 0.9s linear infinite;
}
@keyframes vto-spin { to { transform: rotate(360deg); } }

.vto-views {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 2;
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 20px rgba(60, 49, 38, 0.14);
    transform: translateX(-50%);
}
.vto-views button {
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #5C4A3A;
    font-size: 12.5px;
    font-weight: 700;
}
.vto-views button.is-on { background: #B08D45; color: #FFFFFF; }
.vto-compare {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #3C3126;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(60, 49, 38, 0.14);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.vto-compare.is-on { background: #3C3126; color: #FFFFFF; }
.vto-note {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 2;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #E8D6AE;
    border-radius: 14px;
    background: #FFFBF1;
    color: #6A5224;
    font-size: 12.5px;
    line-height: 1.45;
    box-shadow: 0 8px 20px rgba(60, 49, 38, 0.1);
}
.vto-views:not([hidden]) ~ .vto-note { top: 60px; }

.vto-side {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: 14px;
    min-height: 0;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.vto-step { display: grid; gap: 12px; }
.vto-step > p { margin: 0; color: #7A6650; font-size: 13.5px; line-height: 1.5; }
.vto-step > small { color: #9A8874; font-size: 12px; }
.vto-step > p.vto-num {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #3C3126;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.vto-num b {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #FBF3E0;
    color: #8C6A2F;
    font-size: 11px;
    letter-spacing: 0;
}
.vto-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vto-models button {
    position: relative;
    display: grid;
    gap: 0;
    overflow: hidden;
    padding: 0;
    border: 2px solid #EFE6D6;
    border-radius: 16px;
    background: #F7F3EC;
    color: #5C4A3A;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.vto-models img { height: auto; aspect-ratio: 3 / 4; object-position: center top; }
.vto-models span { padding: 7px 4px 8px; background: #FFFFFF; font-size: 12.5px; font-weight: 700; text-align: center; }
.vto-models button:hover { border-color: #D8C49A; transform: translateY(-2px); }
.vto-models button.is-on { border-color: #B08D45; box-shadow: 0 10px 22px rgba(140, 106, 47, 0.18); }
.vto-models button.is-on span { background: #B08D45; color: #FFFFFF; }

.vto-range {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 10px;
    color: #5C4A3A;
    font-size: 13px;
}
.vto-range input[type="range"] {
    width: 100%;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    accent-color: #B08D45;
}
.vto-range output { color: #8C6A2F; font-size: 12.5px; font-weight: 800; text-align: right; }
.vto-nudge { display: flex; flex-wrap: wrap; gap: 8px; }
.vto-nudge button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #EBE1CF;
    border-radius: 12px;
    background: #FFFFFF;
    color: #5C4A3A;
    font-size: 16px;
    font-weight: 700;
}
.vto-nudge .vto-reset { width: auto; padding: 0 14px; margin-left: auto; font-size: 12.5px; color: #8C6A2F; }
.vto-nudge button:hover { border-color: #B08D45; color: #8C6A2F; }
.vto-hint { margin: 0; color: #9A8874; font-size: 12px; line-height: 1.45; }
.vto-match {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #EFE3CC;
    border-radius: 14px;
    background: #FFFCF5;
    cursor: pointer;
}
.vto-match input { position: absolute; opacity: 0; pointer-events: none; }
.vto-match-dot {
    position: relative;
    flex: 0 0 38px;
    height: 22px;
    border-radius: 999px;
    background: #E6DCCB;
    transition: background 0.2s ease;
}
.vto-match-dot::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(60, 40, 10, 0.25);
    transition: transform 0.2s ease;
}
.vto-match input:checked + .vto-match-dot { background: linear-gradient(135deg, #B08D45, #8C6A2F); }
.vto-match input:checked + .vto-match-dot::after { transform: translateX(16px); }
.vto-match input:focus-visible + .vto-match-dot { outline: 2px solid #B08D45; outline-offset: 2px; }
.vto-match b { display: block; color: #3A2A16; font-size: 13px; font-weight: 700; }
.vto-match small { display: block; margin-top: 2px; color: #9A8874; font-size: 11.5px; }
.vto-ai { padding: 16px; border: 1px solid #E8D6AE; border-radius: 18px; background: linear-gradient(135deg, #FFFCF5, #FBF3E0); }
.vto-ai .btn { gap: 8px; width: 100%; margin: 0; background: linear-gradient(135deg, #B08D45, #8C6A2F); color: #FFFFFF; }
.vto-ai .btn svg { width: 18px; height: 18px; }
.vto-ai .btn:disabled { opacity: 0.6; }

.vto-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 14px; border-top: 1px solid #EFE6D6; }
.vto-actions .pd-act { justify-content: center; height: 42px; }
.vto-actions .pd-add.btn { grid-column: 1 / -1; height: 50px; }
.vto-actions:has(#vtoSizeLink[hidden]) #vtoSave { grid-column: 1 / -1; }
.vto-privacy { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: #9A8874; font-size: 11.5px; line-height: 1.5; }
.vto-privacy svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; color: #B08D45; }

@media (min-width: 980px) {
    .vto { place-items: center; padding: 28px; }
    .vto-panel {
        position: relative;
        inset: auto;
        width: min(1120px, 100%);
        height: min(780px, calc(100dvh - 56px));
        overflow: hidden;
        border-radius: 28px;
        box-shadow: 0 40px 90px rgba(42, 34, 27, 0.3);
    }
    .vto-head { padding: 18px 26px; }
    .vto-head h2 { font-size: 30px; }
    .vto-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; overflow: hidden; }
    .vto-main { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; min-height: 0; padding: 20px 0 20px 20px; }
    .vto-stage { height: auto; min-height: 0; margin: 0; }
    .vto-rail { order: 0; display: flex; flex-direction: column; min-height: 0; margin: 0; }
    .vto-rail-list { flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 2px 4px 2px 2px; }
    .vto-piece { flex: 0 0 auto; width: 100%; }
    .vto-rail > .vto-rail-head { display: block; }
    .vto-rail-head.is-more { align-self: stretch; width: 100%; padding: 8px 0 0; writing-mode: horizontal-tb; transform: none; }
    .vto-side { align-content: start; overflow-y: auto; padding: 20px 26px 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .vto-panel, .vto-backdrop { transition: none; }
    .vto-spin { animation-duration: 2.4s; }
}