/* =========================================================
LOCARTA - Mobile app styles
Used by: mobile.html
========================================================= */
:root {
--bg: #FBF7F0;
--card: #FFFFFF;
--ink: #2A1A12;
--ink-2: #4A372B;
--muted: #8A7B6E;
--line: #EDE3D6;
--chip: #F3EBE0;
--maroon: var(--maroon);
--maroon-2: var(--maroon-2);
--gold: #C89547;
--gold-dark: #A0702B;
--green: #2F7D4F;
--green-bg: #E3F2E8;
--star: #E0A13A;
--cat-places: #8E2F23;
--cat-exp: #E07A2E;
--cat-art: #5B3A8C;
--cat-prod: #2F7D4F;
/* One type family for the whole app, so every screen matches the LOCARTA wordmark.
To use a different font, change it here (and in the Google Fonts link in mobile.html). */
--sans: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;
--display: var(--sans);
--r: 16px;
--r-lg: 20px;
--shadow: 0 6px 20px rgba(42, 26, 18, .08);
--tabbar: 64px;
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
font-family: var(--sans); color: var(--ink); background: #E9E1D5;
-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Icons */
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic-sm { width: 16px; height: 16px; }
.ic-xs { width: 13px; height: 13px; }
.ic-fill { fill: currentColor; stroke: none; }
/* ---------- App frame (phone width, centred on bigger screens) ---------- */
.app {
position: relative; width: 100%; max-width: 440px; height: 100dvh; margin: 0 auto;
display: flex; flex-direction: column; overflow: hidden; background: var(--bg);
}
@media (min-width: 480px) {
body { padding: 24px 0; }
.app { height: min(900px, calc(100dvh - 48px)); border-radius: 36px; box-shadow: 0 30px 80px -30px rgba(42, 26, 18, .45); }
}
.screen { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.pad { padding: calc(var(--safe-top) + 14px) 18px 24px; }
/* ---------- Top bars ---------- */
.topbar { display: flex; align-items: center; gap: 12px; padding: calc(var(--safe-top) + 14px) 18px 10px; }
.topbar h1 { font-size: 1.15rem; font-weight: 700; }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); }
.icon-btn:active { background: var(--chip); }
.dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #D9472B; border: 2px solid var(--bg); }
.brand { display: flex; align-items: center; gap: 8px; }
.brand img.mark { height: 30px; width: auto; }
.brand img.word { height: 17px; width: auto; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--maroon); color: #FFF8EE; font-size: .78rem; font-weight: 700; border: 0; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.4rem; }
/* ---------- Search ---------- */
.search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; background: none; font-size: .88rem; color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--gold); }
.search-row { display: flex; gap: 10px; align-items: center; }
.search-row .search { flex: 1; }
.filter-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 0; background: var(--maroon); color: #fff; }
/* ---------- Chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 18px 4px; margin: 0 -18px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips::after { content: ""; flex: 0 0 10px; }
.chip { flex-shrink: 0; padding: 8px 16px; border-radius: 999px; border: 0; background: var(--chip); color: var(--ink-2); font-size: .8rem; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--maroon); color: #fff; }
.tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--chip); font-size: .78rem; font-weight: 600; color: var(--ink-2); }
/* ---------- Text ---------- */
.hello { margin-top: 14px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.sub { margin-top: 4px; font-size: .85rem; line-height: 1.45; color: var(--muted); }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 12px; }
.sec-head h2 { font-size: 1.02rem; font-weight: 800; }
.see-all { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 4px 0; font-size: .78rem; font-weight: 700; color: var(--maroon); }
.meta { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--muted); }
.rating { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.rating .ic { color: var(--star); }
.rating small { font-weight: 500; color: var(--muted); }
.price { font-weight: 800; color: var(--maroon); }
/* ---------- Pictures with a warm placeholder if the photo can't load ---------- */
.pic { position: relative; overflow: hidden; background: linear-gradient(135deg, #E8D7BF, #C89547 60%, #8E5A2E); }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ---------- Home ---------- */
.hero-card { position: relative; display: block; height: 170px; margin-top: 16px; border-radius: var(--r-lg); overflow: hidden; color: #fff; box-shadow: var(--shadow); }
.hero-card .pic { position: absolute; inset: 0; }
.hero-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 10, 5, .65), transparent 60%); }
.hero-card .hc-text { position: absolute; left: 16px; bottom: 14px; z-index: 1; }
.hero-card h3 { font-size: 1.3rem; font-weight: 800; }
.hero-card .meta { color: #F3E9DC; }
.hero-card .go { position: absolute; right: 14px; bottom: 16px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--maroon); }
.dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.dots span.on { width: 16px; border-radius: 3px; background: var(--maroon); }
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: none; padding: 0; font-size: .74rem; font-weight: 600; color: var(--ink-2); }
.cat span.ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #fff; box-shadow: 0 6px 14px -6px currentColor; }
.cat span.ico .ic { color: #fff; width: 25px; height: 25px; }
.rail { display: flex; gap: 12px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 6px; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail::after { content: ""; flex: 0 0 6px; }
.mini { flex: 0 0 132px; scroll-snap-align: start; border: 0; padding: 0; background: var(--card); border-radius: var(--r); overflow: hidden; text-align: left; box-shadow: var(--shadow); }
.mini .pic { height: 92px; }
.mini .mb { display: block; padding: 9px 10px 10px; }
.mini strong { display: block; font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .meta { font-size: .7rem; margin: 2px 0 4px; }
.wide { flex: 0 0 220px; }
.wide .pic { height: 120px; }
/* ---------- List rows (Explore, Favorites) ---------- */
.list { display: grid; gap: 12px; margin-top: 14px; }
.row { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
.row .pic { flex: 0 0 84px; height: 84px; border-radius: 12px; }
.row-main { flex: 1; min-width: 0; display: grid; gap: 3px; text-align: left; border: 0; background: none; padding: 0; }
.row-main strong { font-size: .9rem; font-weight: 700; line-height: 1.25; }
.row-main .kind { font-size: .66rem; font-weight: 700; color: var(--gold-dark); letter-spacing: .02em; }
.heart { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); flex-shrink: 0; align-self: flex-start; }
.heart.on { color: var(--maroon); }
.heart.on .ic { fill: currentColor; }
/* ---------- Product grid ---------- */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.pcard { position: relative; border-radius: var(--r); background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.pcard > button.pc-open { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.pcard .pic { aspect-ratio: 1 / .82; }
.pcard .pb { padding: 9px 11px 12px; }
.pcard strong { display: block; font-size: .82rem; font-weight: 700; line-height: 1.25; padding-right: 26px; }
.pcard .meta { font-size: .7rem; margin: 3px 0 5px; }
.pcard .heart { position: absolute; right: 4px; bottom: 6px; }
/* ---------- Detail ---------- */
.d-hero { position: relative; height: 300px; flex-shrink: 0; }
.d-hero .pic { position: absolute; inset: 0; }
.d-hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 110px; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent); pointer-events: none; }
.float-btn { position: absolute; top: calc(var(--safe-top) + 12px); z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.float-btn.left { left: 16px; }
.float-btn.right { right: 16px; }
.float-btn.on { color: var(--maroon); }
.float-btn.on .ic { fill: currentColor; }
.d-body { position: relative; margin-top: -22px; padding: 22px 18px 28px; border-radius: 24px 24px 0 0; background: var(--bg); }
.d-body h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.d-body .meta { margin-top: 6px; font-size: .82rem; }
.d-line { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.d-line .price { font-size: 1rem; }
.d-line .price small { font-weight: 500; color: var(--muted); font-size: .78rem; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.facts { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; padding: 12px 0; border-block: 1px solid var(--line); }
.fact { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.fact .ic { color: var(--maroon); }
.desc { margin-top: 14px; font-size: .88rem; line-height: 1.6; color: var(--ink-2); }
.d-h2 { margin: 20px 0 10px; font-size: 1rem; font-weight: 800; display: flex; justify-content: space-between; align-items: center; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.checks li { display: flex; align-items: center; gap: 9px; font-size: .86rem; color: var(--ink-2); }
.checks .ic { color: var(--green); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gallery .pic { aspect-ratio: 1; border-radius: 12px; border: 0; padding: 0; }
.actions3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; font-size: .74rem; font-weight: 600; color: var(--ink-2); padding: 6px 0; }
.act.on { color: var(--maroon); }
.act.on .ic { fill: currentColor; }
.tabs { display: flex; margin-top: 16px; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; padding: 11px 0; border: 0; background: none; font-size: .84rem; font-weight: 600; color: var(--muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--maroon); border-bottom-color: var(--maroon); font-weight: 700; }
.tab-body { padding-top: 14px; }
.review { padding: 12px 0; border-bottom: 1px solid var(--line); }
.review:last-child { border-bottom: 0; }
.review-head { display: flex; align-items: center; gap: 10px; }
.review-head .avatar { width: 30px; height: 30px; font-size: .7rem; background: var(--gold); }
.review-head strong { font-size: .84rem; }
.review p { margin-top: 6px; font-size: .84rem; line-height: 1.5; color: var(--ink-2); }
.stars { display: inline-flex; gap: 1px; color: var(--star); }
/* ---------- Buttons ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; border-radius: 14px; border: 0; background: var(--maroon); color: #fff; font-weight: 700; font-size: .92rem; box-shadow: 0 8px 18px -10px var(--maroon); transition: background-color .15s, transform .1s; }
.btn:active { background: var(--maroon-2); transform: scale(.99); }
.btn-ghost { background: transparent; color: var(--maroon); border: 1.5px solid var(--maroon); box-shadow: none; }
.btn-ghost:active { background: var(--chip); }
.btn-sm { height: 34px; width: auto; padding: 0 16px; border-radius: 999px; font-size: .8rem; }
.mt { margin-top: 18px; }
.link { border: 0; background: none; padding: 0; color: var(--maroon); font-weight: 700; font-size: .84rem; }
/* ---------- Map ---------- */
.map-wrap { position: relative; flex: 1; min-height: 0; margin: 4px 14px 0; border-radius: var(--r-lg); overflow: hidden; background: #CFE4EC; }
.map-wrap > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-wrap .lbl { font-family: var(--sans); font-size: 11px; font-weight: 600; fill: #7D8F7A; }
.map-wrap .lbl-sea { fill: #6F98AA; font-style: italic; }
.pin { cursor: pointer; }
.pin path { fill: var(--maroon); stroke: #fff; stroke-width: 2; transition: transform .15s; }
.pin.on path { fill: var(--gold); }
.pin circle { fill: #fff; }
.me-dot { fill: #2D7FF9; stroke: #fff; stroke-width: 3; }
.me-halo { fill: rgba(45, 127, 249, .18); }
@media (prefers-reduced-motion: no-preference) {
.me-halo { animation: halo 2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
}
@keyframes halo { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.locate { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: var(--maroon); box-shadow: var(--shadow); }
.map-card { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r); background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); border: 0; text-align: left; }
.map-card .pic { flex: 0 0 72px; height: 72px; border-radius: 12px; }
.map-card .grow { flex: 1; min-width: 0; display: grid; gap: 3px; }
.map-card strong { font-size: .92rem; }
.map-card .dist { align-self: flex-end; font-size: .74rem; color: var(--muted); white-space: nowrap; }
/* ---------- Bookings ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; margin-top: 4px; border-bottom: 1px solid var(--line); }
.seg button { padding: 11px 0; border: 0; background: none; font-size: .86rem; font-weight: 600; color: var(--muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.seg button[aria-selected="true"] { color: var(--maroon); border-bottom-color: var(--maroon); font-weight: 700; }
.bk { display: flex; gap: 12px; padding: 12px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); border: 0; width: 100%; text-align: left; }
.bk .pic { flex: 0 0 82px; height: 82px; border-radius: 12px; }
.bk .grow { flex: 1; min-width: 0; display: grid; gap: 3px; align-content: start; }
.bk strong { font-size: .9rem; line-height: 1.25; }
.status { justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: .7rem; font-weight: 700; }
.status.past { background: var(--chip); color: var(--muted); }
.status.res { background: #FBEBD3; color: var(--gold-dark); }
/* ---------- Profile ---------- */
.prof { display: flex; gap: 16px; align-items: center; margin-top: 18px; }
.prof strong { display: block; font-size: 1.05rem; }
.prof small { display: block; color: var(--muted); font-size: .8rem; margin: 2px 0 8px; }
.menu { margin-top: 22px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.menu button, .menu a { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; border: 0; background: none; font-size: .9rem; font-weight: 600; color: var(--ink); text-align: left; }
.menu > * + * { border-top: 1px solid var(--line); }
.menu .ic:first-child { color: var(--maroon); }
.menu .chev { margin-left: auto; color: var(--muted); }
.menu .count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--chip); font-size: .74rem; font-weight: 700; text-align: center; }
.menu .count + .chev { margin-left: 6px; }
/* ---------- Notifications ---------- */
.notif { display: flex; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.notif .n-ico { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--maroon); color: #fff; }
.notif .n-ico.gold { background: var(--gold); }
.notif .n-ico.dark { background: #3A2A5C; }
.notif p { font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.notif p b { color: var(--ink); }
.notif small { display: block; margin-top: 4px; font-size: .72rem; color: var(--muted); }
.notif.unread p { font-weight: 600; }
/* ---------- Empty state ---------- */
.empty { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--muted); }
.empty .ic { width: 34px; height: 34px; color: var(--gold); }
.empty strong { color: var(--ink); font-size: 1rem; }
.empty p { font-size: .85rem; }
/* ---------- Tab bar ---------- */
.tabbar {
flex-shrink: 0; display: grid; grid-template-columns: repeat(5, 1fr);
height: calc(var(--tabbar) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
background: #fff; border-top: 1px solid var(--line);
}
.tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: none; font-size: .66rem; font-weight: 600; color: #9A8C80; }
.tabbar button[aria-current="page"] { color: var(--maroon); font-weight: 700; }
.tabbar button[aria-current="page"] .ic { fill: currentColor; fill-opacity: .14; stroke-width: 2.1; }
/* ---------- Splash and welcome ---------- */
.splash { position: relative; flex: 1; display: flex; flex-direction: column; color: #FFF8EE; overflow: hidden; background: #2B1A10; }
.splash .pic { position: absolute; inset: 0; background: linear-gradient(180deg, #4C6B8A, #2B1A10); }
.splash::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(35, 20, 12, .25) 0%, rgba(35, 20, 12, .35) 40%, rgba(35, 20, 12, .9) 82%); }
.splash-in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; padding: calc(var(--safe-top) + 64px) 26px calc(var(--safe-bottom) + 44px); text-align: center; }
.badge-mark { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 28px; background: #FFF8EE; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .6); }
.badge-mark img { height: 76px; width: auto; }
.splash .word { height: 40px; width: auto; margin-top: 22px; }
.splash .tagline { margin-top: 10px; font-size: .9rem; font-weight: 500; line-height: 1.45; color: #F0E3D2; }
.script { margin-top: auto; font-family: var(--display); font-weight: 700; font-size: 2.1rem; line-height: 1.05; transform: rotate(-6deg); color: #FFF8EE; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.script span { display: block; }
.script span:nth-child(2) { margin-left: 2.2rem; }
.script span:nth-child(3) { margin-left: 4rem; }
.splash-actions { width: 100%; display: grid; gap: 10px; margin-top: 40px; }
.splash .btn-ghost { color: #FFF8EE; border-color: rgba(255, 248, 238, .6); }
.splash .btn-ghost:active { background: rgba(255, 255, 255, .1); }
.weave {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: calc(16px + var(--safe-bottom));
background:
repeating-linear-gradient(45deg, transparent 0 7px, var(--gold) 7px 9px, transparent 9px 16px),
repeating-linear-gradient(-45deg, transparent 0 7px, var(--gold) 7px 9px, transparent 9px 16px),
var(--maroon-2);
}
.skip { position: absolute; top: calc(var(--safe-top) + 14px); right: 16px; z-index: 3; border: 0; background: rgba(255, 255, 255, .16); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: .78rem; font-weight: 700; backdrop-filter: blur(6px); }
/* ---------- Bottom sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(20, 10, 5, .45); }
.sheet {
position: relative; width: 100%; max-width: 440px; max-height: 88dvh; overflow-y: auto;
padding: 10px 20px calc(22px + var(--safe-bottom)); border-radius: 24px 24px 0 0; background: var(--bg);
}
.sheet::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: var(--line); }
.sheet h2 { font-size: 1.15rem; font-weight: 800; }
.sheet .sub { margin-bottom: 4px; }
.sheet-close { position: absolute; top: 12px; right: 12px; }
.field { display: grid; gap: 6px; margin-top: 14px; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.field input, .field select, .field textarea { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: .92rem; font-weight: 500; }
.field textarea { height: auto; padding: 12px 14px; resize: none; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 149, 71, .2); }
.pick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pick::-webkit-scrollbar { display: none; }
.pick button { flex-shrink: 0; display: grid; justify-items: center; gap: 2px; min-width: 58px; padding: 9px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-size: .72rem; font-weight: 600; color: var(--muted); }
.pick button b { font-size: 1.05rem; color: var(--ink); }
.pick button[aria-pressed="true"] { border-color: var(--maroon); background: var(--maroon); color: #F3D9CF; }
.pick button[aria-pressed="true"] b { color: #fff; }
.pick.times button { min-width: 0; padding: 10px 14px; font-size: .82rem; color: var(--ink-2); }
.pick.times button[aria-pressed="true"] { color: #fff; }
.stepper { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: .9rem; font-weight: 600; }
.stepper div { display: flex; align-items: center; gap: 14px; }
.stepper button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--chip); color: var(--maroon); }
.stepper button:disabled { opacity: .4; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); font-weight: 700; }
.total .price { font-size: 1.25rem; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .9rem; font-weight: 600; }
.opt small { display: block; font-weight: 500; color: var(--muted); font-size: .78rem; }
.switch { appearance: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--line); margin: 0; flex-shrink: 0; cursor: pointer; transition: background-color .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.switch:checked { background: var(--maroon); }
.switch:checked::after { transform: translateX(18px); }
.radio-row { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: .9rem; }
.radio-row input { accent-color: var(--maroon); width: 18px; height: 18px; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { padding: 14px 0; font-weight: 700; font-size: .88rem; cursor: pointer; }
.faq p { padding-bottom: 14px; font-size: .85rem; line-height: 1.5; color: var(--ink-2); }
.err { margin-top: 10px; font-size: .82rem; font-weight: 600; color: #B23A1F; }
.center-note { margin-top: 14px; text-align: center; font-size: .82rem; color: var(--muted); }
/* ---------- Toast ---------- */
.toast {
position: fixed; left: 50%; bottom: calc(var(--tabbar) + var(--safe-bottom) + 34px); z-index: 60; transform: translateX(-50%);
width: max-content; max-width: min(400px, calc(100% - 32px)); padding: 11px 16px; border-radius: 14px;
background: var(--ink); color: #fff; font-size: .84rem; font-weight: 600; box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
@media (prefers-reduced-motion: no-preference) {
.screen-enter { animation: enter .22s ease-out; }
.sheet { animation: up .24s cubic-bezier(.2, .8, .2, 1); }
.toast { animation: fade .2s ease-out; }
}
@keyframes enter { from { opacity: 0; transform: translateX(10px); } }
@keyframes up { from { transform: translateY(40px); opacity: .6; } }
@keyframes fade { from { opacity: 0; } }
/* =========================================================
Opening animation
========================================================= */
.launch {
position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
background: radial-gradient(circle at 50% 42%, #FFFDF7 0%, var(--bg) 55%, #F1E6D6 100%);
transition: opacity .5s ease, transform .5s ease;
}
.launch.out { opacity: 0; transform: scale(1.05); pointer-events: none; }
.launch-in { display: grid; justify-items: center; text-align: center; margin-top: -40px; }
.l-stage { position: relative; display: grid; place-items: center; width: 170px; height: 170px; }
.l-ring { position: absolute; inset: 18px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; }
.l-swing { display: block; transform-origin: 50% 8%; }
.l-mark { height: 118px; width: auto; }
.l-word { height: 36px; width: auto; margin-top: 14px; }
.l-bar { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 64px); width: 132px; height: 4px; margin-left: -66px; border-radius: 2px; background: var(--line); overflow: hidden; }
.l-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--maroon)); transform-origin: left; }
.l-weave { position: absolute; left: 0; right: 0; box-sizing: content-box; }
.l-weave-top { top: 0; padding-top: var(--safe-top); }
.l-weave-bottom { bottom: 0; padding-bottom: var(--safe-bottom); }
.l-tag { margin-top: 12px; font-family: var(--sans); font-style: normal; font-size: .9rem; font-weight: 600; line-height: 1.45; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
.l-mark { animation: l-drop .9s cubic-bezier(.3, 1.45, .5, 1) .15s both; }
.l-swing { animation: l-swing 1.3s ease-in-out 1s forwards; }
.l-ring { animation: l-ring 1.2s ease-out .8s both; }
.l-ring-2 { animation-delay: 1.15s; }
.l-word { animation: l-wipe .8s cubic-bezier(.6, 0, .2, 1) .85s both; }
.l-tag { animation: l-up .6s ease-out 1.45s both; }
.l-bar span { animation: l-load 2.3s cubic-bezier(.4, 0, .2, 1) .1s both; }
.l-weave { animation: l-grow .9s cubic-bezier(.6, 0, .2, 1) 1.1s both; }
}
@keyframes l-drop { 0% { opacity: 0; transform: translateY(-80px) scale(.7); } 50% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes l-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-1.5deg); } }
@keyframes l-ring { 0% { opacity: .9; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes l-wipe { from { clip-path: inset(0 100% 0 0); opacity: .3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes l-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes l-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes l-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* =========================================================
Log in / sign up roles
========================================================= */
.roles { border: 0; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.roles legend { padding: 0; margin-bottom: 6px; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.role { position: relative; cursor: pointer; }
.role input { position: absolute; opacity: 0; }
.role span { display: grid; gap: 2px; height: 100%; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; }
.role span .ic { color: var(--maroon); margin-bottom: 4px; }
.role strong { font-size: .84rem; }
.role small { font-size: .72rem; color: var(--muted); }
.role input:checked + span { border-color: var(--maroon); background: #FBF1EC; }
.role input:focus-visible + span { outline: 2.5px solid var(--gold); outline-offset: 2px; }
/* =========================================================
Artist studio
========================================================= */
.studio-hero { position: relative; margin-top: 16px; border-radius: var(--r-lg); overflow: hidden; color: #FFF8EE; background: #2B1A10; box-shadow: var(--shadow); }
.studio-hero .pic { position: absolute; inset: 0; }
.studio-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(35, 20, 12, .95) 25%, rgba(56, 32, 19, .78) 60%, rgba(56, 32, 19, .4)); }
.sh-in { position: relative; z-index: 1; padding: 18px; }
.sh-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(232, 202, 148, .5); background: rgba(200, 149, 71, .25); color: #E8CA94; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.studio-hero h2 { margin-top: 10px; font-family: var(--display); font-size: 1.45rem; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; }
.studio-hero p { margin-top: 6px; font-size: .82rem; line-height: 1.45; color: #EADFD2; }
.sh-actions { display: flex; gap: 8px; margin-top: 14px; }
.btn-gold { background: linear-gradient(135deg, #C89547, #BA5231); box-shadow: 0 8px 18px -10px #BA5231; }
.btn-glass { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .35); box-shadow: none; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.stat { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); text-align: left; }
.stat span { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stat b { font-family: var(--display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.stat small { font-size: .74rem; font-weight: 600; color: var(--muted); }
.stat.wide2 { grid-column: 1 / -1; }
.t-terra { color: #BA5231 !important; }
.t-green { color: var(--green) !important; }
.box { padding: 14px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 150px; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.bar i { display: block; width: 100%; max-width: 30px; border-radius: 7px 7px 3px 3px; background: #E8CA94; }
.bar.now i { background: var(--maroon); }
.bar .bv { font-size: .6rem; font-weight: 700; color: var(--muted); }
.bar small { font-size: .68rem; font-weight: 600; color: var(--muted); }
.thread { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); text-align: left; }
.thread .avatar { flex: 0 0 40px; height: 40px; background: var(--gold); }
.thread .grow { flex: 1; min-width: 0; display: grid; gap: 1px; }
.thread strong { display: flex; align-items: center; gap: 6px; font-size: .88rem; }
.thread small { font-size: .7rem; font-weight: 700; color: var(--gold-dark); }
.thread .snip { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread.unread .snip { color: var(--ink); font-weight: 600; }
.udot { width: 8px; height: 8px; border-radius: 50%; background: #D9472B; }
.status.info { background: #E3ECF7; color: #2F5D8F; }
.ws { padding: 14px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); }
.ws-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ws-top strong { font-size: .95rem; }
.seatbar { height: 8px; margin: 10px 0 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.seatbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--maroon)); }
.ws-foot { display: flex; justify-content: space-between; align-items: center; font-size: .76rem; color: var(--muted); }
.chat-role { margin-top: -8px; padding: 0 18px 8px 70px; font-size: .74rem; color: var(--muted); }
.msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 12px; }
.msg { max-width: 78%; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: var(--shadow); font-size: .86rem; line-height: 1.45; }
.msg.me { align-self: flex-end; background: var(--maroon); color: #fff; border-radius: 16px 16px 4px 16px; }
.msg small { display: block; margin-top: 3px; font-size: .66rem; opacity: .65; }
.reply { display: flex; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--line); background: var(--bg); }
.reply input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .9rem; }
.reply input:focus { outline: none; border-color: var(--gold); }
.upload { position: relative; display: grid; place-items: center; height: 150px; margin-top: 14px; border-radius: 14px; border: 1.5px dashed #D9C6AD; background: #fff; overflow: hidden; color: var(--muted); font-size: .82rem; font-weight: 600; cursor: pointer; }
.upload span { display: grid; justify-items: center; gap: 6px; }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.icon-btn.add { background: var(--maroon); color: #fff; width: 36px; height: 36px; }
.tabbar button { position: relative; }
.tb-badge { position: absolute; top: 7px; left: calc(50% + 5px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #D9472B; color: #fff; font-size: .6rem; font-weight: 800; line-height: 16px; text-align: center; }
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.statrow div { padding: 10px 6px; border-radius: 12px; background: #fff; border: 1px solid var(--line); text-align: center; }
.statrow b { display: block; font-size: 1.1rem; }
.statrow small { font-size: .68rem; color: var(--muted); }
.role-chip { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: var(--chip); color: var(--maroon); font-size: .68rem; font-weight: 800; }
/* =========================================================
Intro slides (after the opening animation)
========================================================= */
.onb { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: #FAF6EF; overflow: hidden; isolation: isolate; }
.onb-deco { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: 28%; opacity: .85; pointer-events: none; }
.onb-track { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.onb-track::-webkit-scrollbar { display: none; }
.onb-slide { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start; scroll-snap-stop: always; background: transparent; }
.onb-media {
position: relative; flex: 1 1 52%; min-height: 220px; overflow: hidden;
border-radius: 0 0 46% 46% / 0 0 44px 44px;
box-shadow: 0 10px 30px -18px rgba(42, 26, 18, .45);
}
.onb-media .pic { position: absolute; inset: 0; }
.onb-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35, 20, 12, .25) 0%, transparent 28%); }
.onb-text { position: relative; flex: 0 0 auto; padding: 0 26px 4px; text-align: center; }
.onb-badge-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; margin: -42px 0 18px; }
.onb-badge-row::before, .onb-badge-row::after { content: ""; flex: 0 1 78px; height: 1.5px; margin-top: 42px; background: linear-gradient(90deg, transparent, var(--gold)); }
.onb-badge-row::after { background: linear-gradient(90deg, var(--gold), transparent); }
.onb-badge {
position: relative; z-index: 1; display: grid; place-items: center; width: 84px; height: 84px; margin: 0; flex-shrink: 0;
border-radius: 26px; border: 0; background: #FFFCF6; color: var(--maroon);
box-shadow: 0 14px 30px -14px rgba(42, 26, 18, .45), 0 0 0 1px rgba(200, 149, 71, .15);
}
.onb-badge img { height: 54px; width: auto; }
.onb-badge .ic { width: 34px; height: 34px; stroke-width: 1.7; }
.onb-kicker { font-family: var(--sans); font-style: normal; font-size: .76rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #8A5A2B; }
.onb-text h2 { margin-top: 10px; font-size: clamp(1.45rem, 6.4vw, 1.8rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #4A2414; text-wrap: balance; }
.onb-text h2 span { display: block; }
.onb-text h2 .accent {
background: linear-gradient(90deg, #8A4A1C 0%, #B9772E 55%, #C8923F 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.onb-copy { margin: 14px auto 0; max-width: 34ch; font-size: .95rem; line-height: 1.6; color: #5A4A3F; }
.onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px calc(24px + var(--safe-bottom)); }
.onb-next {
width: auto; height: 54px; min-width: 168px; padding: 0 28px; border-radius: 999px;
background: var(--brown-700); font-size: 1rem; gap: 12px;
box-shadow: 0 12px 24px -12px rgba(107, 45, 27, .7);
}
.onb-next .ic { width: 20px; height: 20px; }
.onb .skip {
top: calc(var(--safe-top) + 16px); right: 16px; padding: 9px 20px;
background: rgba(35, 28, 26, .82); color: #fff; font-size: .85rem; backdrop-filter: blur(6px);
}
.guest-link { border: 0; background: none; padding: 6px; margin-top: 2px; color: #F0E3D2; font-size: .85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-height: 740px) {
.onb-badge { width: 70px; height: 70px; border-radius: 22px; }
.onb-badge img { height: 44px; }
.onb-badge-row { margin: -35px 0 12px; }
.onb-badge-row::before, .onb-badge-row::after { margin-top: 35px; }
.onb-copy { margin-top: 10px; font-size: .88rem; }
}
/* First slide entrance: plays once when the opening animation ends */
@media (prefers-reduced-motion: no-preference) {
.onb-slide .onb-text > * { opacity: 0; }
.launched .onb-slide.on .onb-text > * { animation: onb-in .55s cubic-bezier(.2, .8, .2, 1) both; }
.launched .onb-slide.on .onb-text > :nth-child(2) { animation-delay: .08s; }
.launched .onb-slide.on .onb-text > :nth-child(3) { animation-delay: .16s; }
.launched .onb-slide.on .onb-text > :nth-child(4) { animation-delay: .24s; }
.launched .onb-slide.on .onb-badge { animation-name: onb-pop; }
}
@keyframes onb-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes onb-pop { 0% { opacity: 0; transform: scale(.5) rotate(-12deg); } 70% { opacity: 1; transform: scale(1.08) rotate(3deg); } 100% { opacity: 1; transform: none; } }
/* =========================================================
Log in / sign up screen (illustrated)
========================================================= */
.splash-art { position: relative; color: var(--ink); isolation: isolate; }
.splash-art::before { display: none; }
.splash-art .splash-in {
flex: 1 1 auto; min-height: 0; justify-content: center; overflow-y: auto; scrollbar-width: none;
position: relative; z-index: 2;
}
.splash-art .splash-in::-webkit-scrollbar { display: none; }
.splash-mark { width: auto; }
.splash-art .word { height: 46px; width: auto; }
.sp-land { flex: 0 0 auto; display: block; width: 100%; height: auto; min-height: 0; }
.splash-art .splash-actions { width: 100%; max-width: 330px; gap: 12px; }
.sp-btn { height: 54px; border-radius: 999px; gap: 12px; font-size: 1rem; }
.sp-btn span { min-width: 72px; text-align: center; }
.sp-btn .ic { width: 21px; height: 21px; }
.splash-art .btn:not(.btn-ghost) { background: var(--brown-700); box-shadow: 0 8px 18px -12px rgba(107, 45, 27, .6); }
.splash-art .btn-ghost { background: transparent; color: #4A2414; border: 1.5px solid var(--brown-700); }
.splash-art .btn-ghost:active { background: rgba(107, 45, 27, .06); }
.splash-art .guest-link { margin-top: 10px; color: var(--ink-2); font-weight: 500; text-decoration-color: var(--ink-2); }
.textile { position: relative; z-index: 2; box-sizing: content-box; }
.textile-top { padding-top: var(--safe-top); }
.textile-bottom { padding-bottom: var(--safe-bottom); }
/* Log in / sign up: centred card in the middle of the screen */
.sheet-wrap.center { align-items: center; padding: 16px; }
.sheet-wrap.center .sheet { max-width: 408px; max-height: calc(100dvh - 32px); padding: 22px 20px 20px; border-radius: 24px; box-shadow: 0 30px 60px -20px rgba(20, 10, 5, .5); }
.sheet-wrap.center .sheet::before { display: none; }
.auth-head { display: grid; justify-items: center; gap: 2px; text-align: center; }
.auth-head img { width: auto; margin-bottom: 8px; }
.auth-head .sub { margin-top: 2px; }
.sheet-wrap.center .roles legend { width: 100%; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
.sheet-wrap.center .sheet { animation: pop-in .22s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
/* =========================================================
Design refresh
Woven textile band, tagline without dots, intro slide
transition, log in / sign up screen, log in and log out cards
========================================================= */
/* ---------- 0. Woven textile band ----------
One 32×28 tile in the same browns as the intro slides: caramel ground,
deep brown centre band, light gold rules, cream diamonds, gold half-diamonds. */
:root {
--weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='28' viewBox='0 0 32 28'%3E%3Crect width='32' height='28' fill='%23B9772E'/%3E%3Crect y='7' width='32' height='14' fill='%238A4A1C'/%3E%3Crect y='2' width='32' height='2' fill='%23F0D2A0'/%3E%3Crect y='24' width='32' height='2' fill='%23F0D2A0'/%3E%3Crect y='5' width='32' height='1' fill='%23FAF0DD' opacity='.7'/%3E%3Crect y='22' width='32' height='1' fill='%23FAF0DD' opacity='.7'/%3E%3Cpath d='M16 7.5 22.5 14 16 20.5 9.5 14Z' fill='none' stroke='%23F4D59A' stroke-width='1.6'/%3E%3Cpath d='M16 11 19 14 16 17 13 14Z' fill='%23FFF8EC'/%3E%3Cpath d='M0 9.5 4.5 14 0 18.5ZM32 9.5 27.5 14 32 18.5Z' fill='%23C8923F'/%3E%3C/svg%3E");
--weave-bg: #B9772E;
--weave-h: 34px;
}
/* Opening animation bands use the same weave */
.l-weave {
height: var(--weave-h); border-block: 0;
background: var(--weave) center / auto 100% repeat-x;
background-origin: content-box; background-clip: content-box; background-color: var(--weave-bg);
}
/* ---------- 1. Tagline lockup: two lines, no dots ----------
—— Local Culture, Arts & ——
Artisan Tourism Access
A gold rule on each side, centred on the two lines. */
.sp-tag, .l-tag {
display: grid; justify-content: center; align-items: center;
grid-template-columns: minmax(18px, 44px) auto minmax(18px, 44px);
grid-template-areas: "l t r" "l b r";
column-gap: 14px; row-gap: 1px;
width: 100%; text-align: center; white-space: normal;
}
.sp-tag::before, .sp-tag::after, .l-tag::before, .l-tag::after {
content: ""; height: 1.5px; background: var(--gold); align-self: center;
}
.sp-tag::before, .l-tag::before { grid-area: l; }
.sp-tag::after, .l-tag::after { grid-area: r; }
.sp-tag span, .l-tag span {
display: block; font-family: var(--sans); font-style: normal; font-size: 1rem; font-weight: 400;
letter-spacing: 0; line-height: 1.4; color: var(--ink-2);
}
.sp-tag span:first-child, .l-tag span:first-child { grid-area: t; }
.sp-tag span:last-child, .l-tag span:last-child { grid-area: b; }
.sp-tag { margin-top: 18px; }
.l-tag { margin-top: 16px; }
/* ---------- 2. Intro slides ---------- */
/* Progress bar replaces the dots: each segment fills as you swipe */
.onb-progress { display: flex; gap: 2px; }
.onb-progress button {
display: grid; align-items: center; width: 30px; height: 28px; padding: 0 2px;
border: 0; background: none; transition: width .35s cubic-bezier(.2, .8, .2, 1);
}
.onb-progress button[aria-selected="true"] { width: 46px; }
.onb-progress i {
position: relative; display: block; height: 4px; border-radius: 2px;
background: #E3D5C1; overflow: hidden;
}
.onb-progress i::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
background: #8A4A1C; transform: scaleX(var(--f, 0)); transform-origin: left;
}
.onb-next { transition: background-color .3s ease, min-width .35s cubic-bezier(.2, .8, .2, 1), transform .1s; }
.onb-next span { display: inline-block; }
.onb-next.last { min-width: 188px; background: var(--maroon); }
/* Photo is wider than its frame so it can drift behind the swipe */
.onb-media .pic img { left: -25%; right: auto; width: 150%; max-width: none; }
@media (prefers-reduced-motion: no-preference) {
/* The slide follows your finger. --p is the slide's offset (-1..1), --a is |p|.
Photo moves slower than the slide (depth), each line of text trails a little
more than the one above it, the text fades, and the badge turns as it leaves. */
.onb-media {
transform: scale(calc(1 - var(--a, 0) * .06)); transform-origin: 50% 0;
}
.onb-media .pic img {
transform: translate3d(calc(var(--p, 0) * -16%), 0, 0) scale(calc(1 + var(--a, 0) * .08));
will-change: transform;
}
.onb-text {
opacity: calc(1 - var(--a, 0) * 1.4);
will-change: opacity;
}
.onb-text > * { translate: calc(var(--p, 0) * 44px) 0; }
.onb-text > :nth-child(2) { translate: calc(var(--p, 0) * 70px) 0; }
.onb-text > :nth-child(3) { translate: calc(var(--p, 0) * 98px) 0; }
.onb-text > :nth-child(4) { translate: calc(var(--p, 0) * 128px) 0; }
.onb-badge { rotate: calc(var(--p, 0) * 36deg); scale: calc(1 - var(--a, 0) * .3); }
/* The first slide keeps its entrance; after the first swipe the swipe itself is the transition */
.launched .onb-slide.on .onb-media img { animation: none; }
.launched .onb-slide.on .onb-media .pic { animation: onb-reveal 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.onb.moved .onb-slide .onb-text > *,
.onb.moved .onb-slide .onb-badge,
.onb.moved .onb-slide .onb-media .pic { opacity: 1; animation: none; }
.onb-next span { animation: label-in .3s ease-out; }
}
@keyframes label-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes onb-reveal { from { opacity: 0; transform: scale(1.06); } }
/* ---------- 3. Log in / sign up screen ---------- */
.splash-art { background: #FAF3E6; }
.splash-art > .textile {
flex-shrink: 0; height: var(--weave-h); border-block: 0;
background: var(--weave) center / auto 100% repeat-x;
background-origin: content-box; background-clip: content-box; background-color: var(--weave-bg);
}
.splash-art > .textile-top { box-shadow: 0 2px 8px -3px rgba(138, 74, 28, .35); }
.splash-art > .textile-bottom { box-shadow: 0 -2px 8px -3px rgba(138, 74, 28, .35); }
.splash.splash-art .splash-in { padding: 30px 26px 10px; }
.splash-art .splash-mark { height: 104px; }
.splash-art .word { height: 54px; margin-top: 10px; }
.splash-art .splash-actions { max-width: 252px; margin-top: 38px; gap: 14px; }
.splash-art .sp-btn { height: 50px; font-size: 1.05rem; font-weight: 600; }
.splash-art .btn-ghost { color: #4A2414; }
.splash-art .guest-link { margin-top: 14px; font-size: .95rem; font-weight: 400; color: #4A2414; text-decoration-color: #4A2414; text-underline-offset: 4px; }
.splash-art .sp-land { margin-top: 0; }
@media (max-height: 760px) {
.splash.splash-art .splash-in { padding-top: 16px; }
.splash-art .splash-mark { height: 82px; }
.splash-art .word { height: 42px; }
.splash-art .splash-actions { margin-top: 22px; }
}
@media (max-height: 640px) {
.splash-art .sp-land { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
/* The two bands weave open from the centre when the screen appears */
.splash-art > .textile { animation: weave-in .9s cubic-bezier(.6, 0, .2, 1) both; }
.splash-art > .textile-bottom { animation-delay: .12s; }
}
@keyframes weave-in { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
/* ---------- 4. Log in, sign up and log out cards ---------- */
/* Woven band along the top and bottom edge of the card */
.auth-band {
height: 16px; margin: -22px -20px 18px;
background: var(--weave) center / auto 100% repeat-x; background-color: var(--weave-bg);
}
.auth-band.bottom { margin: 22px -20px -20px; }
.sheet-wrap.center .sheet { overflow-x: hidden; }
.sheet-wrap.center .sheet-close { top: 24px; right: 10px; }
.auth-head h2 { font-family: var(--display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; }
.auth-head img { height: 50px; }
.auth-head .avatar-lg { margin: 4px 0 10px; }
.auth-head .sub { max-width: 30ch; }
/* Chosen role gets a check mark */
.role span { position: relative; transition: border-color .15s, background-color .15s; }
.role input:checked + span::after {
content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%;
background: var(--maroon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
/* Show / hide password */
.pw { position: relative; display: block; }
.pw input { display: block; width: 100%; padding-right: 52px; }
.pw-eye {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
display: grid; place-items: center; width: 40px; height: 40px;
border: 0; border-radius: 10px; background: none; color: var(--muted);
}
.pw-eye[aria-pressed="true"] { color: var(--maroon); }
/* Log out confirmation */
.logout-actions { display: grid; gap: 10px; margin-top: 22px; }
.menu button[data-act="logout"],
.menu button[data-act="logout"] .ic:first-child { color: #A3321C; }
/* =========================================================
Fixes
========================================================= */
/* Every intro slide has the same photo height, so the badge and title
stay on the same line while you swipe instead of jumping up and down */
.onb-media { flex: 0 0 50%; min-height: 0; }
.onb-text { flex: 1 1 auto; min-height: 0; }
@media (max-height: 740px) { .onb-media { flex-basis: 46%; } }
/* "Get Started" stays on one line on small phones */
.onb-next { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 370px) {
.onb-next { min-width: 0; padding: 0 22px; }
.onb-next.last { min-width: 0; }
}
/* Password hint sits under the box instead of on its own line above it */
.field:has(.pw) > small.meta { order: 3; margin-top: -2px; font-weight: 500; }
/* The woven bands stay at the top and bottom edge of the log in card,
even when the sign up form is long enough to scroll */
.auth-band.top { position: sticky; top: -22px; z-index: 3; }
.auth-band.bottom { position: sticky; bottom: -20px; z-index: 3; }
/* =========================================================
Log in / sign up page (full screen, opened from Sign Up / Log In)
========================================================= */
.auth-page { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: #FAF3E6; color: var(--ink); isolation: isolate; }
.auth-page > .textile {
position: relative; z-index: 3; flex-shrink: 0; height: var(--weave-h); border-block: 0;
background: var(--weave) center / auto 100% repeat-x;
background-origin: content-box; background-clip: content-box; background-color: var(--weave-bg);
}
.auth-page > .textile-top { box-shadow: 0 2px 8px -3px rgba(138, 74, 28, .35); }
.auth-page > .textile-bottom { box-shadow: 0 -2px 8px -3px rgba(138, 74, 28, .35); }
.auth-page > .sp-land {
position: absolute; left: 0; right: 0; z-index: 0; width: 100%; height: auto;
bottom: calc(var(--weave-h) + var(--safe-bottom)); opacity: .7; pointer-events: none;
}
.auth-scroll {
position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding: 20px 24px 30px; scrollbar-width: none;
}
.auth-scroll::-webkit-scrollbar { display: none; }
.auth-x { position: absolute; top: 12px; right: 10px; color: var(--ink-2); }
/* Logo and greeting */
.auth-brand { display: grid; justify-items: center; text-align: center; }
.auth-mark { height: 54px; width: auto; }
.auth-word { height: 34px; width: auto; margin-top: 4px; }
.auth-brand p { margin-top: 10px; max-width: 30ch; font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
/* Log in / Sign up tabs */
.auth-tabs { margin-top: 14px; border-bottom-color: #E6D8C5; }
.auth-tabs button { font-size: 1rem; color: #9A8676; }
.auth-tabs button[aria-selected="true"] { color: #4A2414; border-bottom-color: var(--brown-700); font-weight: 600; }
/* Role cards */
.auth-roles { border: 0; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-roles legend { padding: 0; margin-bottom: 10px; font-size: .92rem; font-weight: 600; color: #4A2414; }
.arole { position: relative; display: block; cursor: pointer; }
.arole input { position: absolute; opacity: 0; pointer-events: none; }
.arole-card {
position: relative; display: grid; align-content: start; gap: 3px; height: 100%;
padding: 14px 14px 16px; border-radius: 14px; border: 1.5px solid #E6D8C5; background: #FFFCF6;
transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.arole-ic { width: 34px; height: 34px; margin-bottom: 8px; color: #A0612B; stroke-width: 1.5; }
.arole strong { font-size: .98rem; font-weight: 600; line-height: 1.2; color: #4A2414; }
.arole small { font-size: .8rem; line-height: 1.35; color: var(--muted); }
.arole-dot { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #B9A58E; background: #fff; }
.arole input:checked + .arole-card { border-color: #8A4A1C; background: #F6E9DA; box-shadow: 0 8px 18px -12px rgba(138, 74, 28, .6); }
.arole input:checked + .arole-card .arole-dot {
border-color: var(--brown-700);
background: var(--brown-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.arole input:focus-visible + .arole-card { outline: 2.5px solid var(--gold); outline-offset: 2px; }
/* Fields with an icon inside the box */
.af { display: grid; gap: 6px; margin-top: 14px; }
.af-label { font-size: .9rem; font-weight: 600; color: #4A2414; }
.af-box { position: relative; display: block; }
.af-ic { position: absolute; left: 16px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: #6B4A33; pointer-events: none; }
.af-box input {
display: block; width: 100%; height: 48px; padding: 0 16px 0 48px;
border-radius: 12px; border: 1px solid #E6D8C5; background: #FFFCF6; font-size: .92rem; color: var(--ink);
}
.af-box input::placeholder { color: #B3A393; }
.af-box input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 149, 71, .2); }
.af-box input[aria-invalid="true"] { border-color: #B23A1F; }
.af-box:has(.pw-eye) input { padding-right: 52px; }
.af-box .pw-eye { right: 5px; color: #4A2414; }
/* Submit and links */
.auth-err { text-align: center; }
.auth-submit {
width: 100%; max-width: 280px; height: 50px; margin: 22px auto 0; gap: 10px;
border-radius: 999px; background: var(--brown-700); font-size: 1rem; font-weight: 600;
box-shadow: 0 10px 22px -12px rgba(107, 45, 27, .7);
}
.auth-switch { margin-top: 14px; text-align: center; font-size: .86rem; color: var(--ink-2); }
.auth-switch .link, .auth-demo .link { font-size: inherit; color: var(--brown-700); text-decoration: underline; text-underline-offset: 3px; }
.auth-demo { margin-top: 6px; text-align: center; font-size: .8rem; color: var(--muted); }
@media (max-width: 360px) {
.auth-scroll { padding-inline: 18px; }
.auth-roles { gap: 8px; }
.arole-card { padding: 12px 10px 14px; }
}
@media (prefers-reduced-motion: no-preference) {
.auth-scroll { animation: auth-in .35s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes auth-in { from { opacity: 0; transform: translateY(14px); } }
/* =========================================================
Tourist home (redesign)
========================================================= */
:root {
--bg: #FAF3E6;
--brown: #5A2614;
--rust: #A9472A;
--ochre: #D39432;
--olive: #7A6542;
}
.home2 { padding-top: calc(var(--safe-top) + 12px); }
.h-top { display: flex; align-items: center; gap: 4px; }
.h-top .brand img.mark { height: 38px; }
.h-top .brand img.word { height: 22px; }
.h-bell { margin-left: auto; color: var(--brown); }
.h-bell .dot { top: 8px; right: 9px; background: #E0482B; }
.h-avatar { display: flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--brown); }
.h-avatar .avatar { width: 40px; height: 40px; background: var(--rust); font-size: .85rem; }
.h-hello { margin-top: 16px; font-size: 1.85rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--brown); }
.h-sub { margin-top: 6px; max-width: 34ch; font-size: .95rem; line-height: 1.45; color: #7A5A48; }
.h-search {
margin-top: 16px; height: 52px; padding: 0 6px 0 18px; border-radius: 999px;
background: #FFFDF9; border: 1px solid #EADCC8; box-shadow: 0 6px 16px -12px rgba(90, 38, 20, .35); color: #6B4A33;
}
.h-search input { font-size: .92rem; }
.h-filter { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--brown); }
/* Hero carousel */
.hero-track {
display: flex; gap: 18px; margin: 16px -18px -14px; padding: 0 18px 18px;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero2 {
position: relative; flex: 0 0 100%; height: 190px; padding: 0; border: 0; border-radius: 20px;
overflow: hidden; text-align: left; color: #fff; scroll-snap-align: start;
box-shadow: 0 14px 28px -18px rgba(90, 38, 20, .6);
}
.hero2 .pic { position: absolute; inset: 0; }
.hero2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(40, 18, 8, .75) 0%, rgba(40, 18, 8, .25) 45%, transparent 70%); }
.h2-text { position: absolute; left: 18px; right: 72px; bottom: 16px; z-index: 1; display: grid; gap: 2px; }
.h2-text small { font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #F3E3CC; }
.h2-text strong { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.h2-loc { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: .88rem; color: #F6EBDD; }
.h2-go {
position: absolute; right: 14px; bottom: 16px; z-index: 1; display: grid; place-items: center;
width: 44px; height: 44px; border-radius: 50%; background: #FFFBF4; color: var(--brown);
box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4);
}
.h-dots { margin-top: 10px; }
.h-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: #DCCDB8; transition: width .25s, background-color .25s; }
.h-dots button.on { width: 22px; background: var(--rust); }
/* Category tiles */
.cats2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.cat2 { display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; }
.cat2-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; color: #FFF8EE; box-shadow: 0 10px 18px -10px rgba(90, 38, 20, .55); }
.cat2-ico .ic { width: 26px; height: 26px; stroke-width: 1.7; }
.c-rust { background: var(--rust); }
.c-gold { background: var(--ochre); }
.c-olive { background: var(--olive); }
.cat2-lbl { position: relative; padding-bottom: 8px; font-size: .8rem; font-weight: 500; color: var(--brown); }
.cat2-lbl::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 18px; height: 2px; margin-left: -9px; border-radius: 1px; background: var(--ochre); }
/* Section headings and cards */
.h-sec h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; color: var(--brown); }
.h-sec .see-all { font-size: .85rem; font-weight: 500; color: #9A5B23; }
.fcard {
position: relative; flex: 0 0 152px; display: block; padding: 0; text-align: left; scroll-snap-align: start;
border: 1px solid #F0E4D3; border-radius: 16px; overflow: hidden; background: #FFFDF9;
box-shadow: 0 8px 20px -14px rgba(90, 38, 20, .45);
}
.f-media { position: relative; display: block; height: 98px; }
.f-media .pic { position: absolute; inset: 0; }
.f-chip {
position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 999px; background: rgba(60, 30, 14, .62); color: #FFF6EA;
font-size: .66rem; font-weight: 500; backdrop-filter: blur(4px);
}
.f-body { position: relative; display: grid; gap: 3px; padding: 9px 38px 11px 10px; }
.f-body strong {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
font-size: .84rem; font-weight: 600; line-height: 1.25; color: var(--brown);
}
.f-body .meta { font-size: .72rem; }
.f-body .price { font-size: .86rem; }
.f-go { position: absolute; right: 9px; bottom: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #F4EADD; color: var(--brown); }
.f-media .ac-chip { top: auto; bottom: 8px; left: 8px; padding: 3px 8px; font-size: .66rem; }
/* Tab bar: rounded white bar with a woven band underneath */
.tabbar {
position: relative; z-index: 2; height: var(--tabbar); padding-bottom: 0;
background: #FFFDF9; border-top: 0; border-radius: 22px 22px 0 0;
box-shadow: 0 -8px 24px -14px rgba(90, 38, 20, .35);
}
.tabbar button { font-size: .7rem; font-weight: 500; color: #9A8676; }
.tabbar button[aria-current="page"] { color: #8A3B1E; font-weight: 600; }
.tabbar button[aria-current="page"] .ic { fill-opacity: .2; }
.tabbar button[aria-current="page"]::after {
content: ""; position: absolute; left: 50%; bottom: 6px; width: 22px; height: 2.5px; margin-left: -11px;
border-radius: 2px; background: #8A3B1E;
}
.tab-weave {
flex-shrink: 0; height: 18px; box-sizing: content-box; padding-bottom: var(--safe-bottom);
background: var(--weave) center / auto 100% repeat-x;
background-origin: content-box; background-clip: content-box; background-color: var(--weave-bg);
}
.toast { bottom: calc(var(--tabbar) + 18px + var(--safe-bottom) + 24px); }
/* =========================================================
Explore: map button beside the filter button, and the Map page
========================================================= */
.search-row .filter-btn { flex-shrink: 0; }
.map-btn { background: #FFFDF9; color: var(--brown-700); border: 1.5px solid var(--brown-700); }
.map-btn:active { background: var(--chip); }
.map-chips { padding: 0 18px 10px; margin: 0; }
.map-empty { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 14px; border-radius: var(--r); background: #fff; font-size: .85rem; color: var(--muted); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); }
.map-card strong { color: var(--brown); font-weight: 600; }
/* =========================================================
Heritage auction
========================================================= */
.ac-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ac-head h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: var(--brown); }
.ac-head .sub { max-width: 30ch; }
.ac-live {
flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 11px;
border-radius: 999px; background: #FBE3DB; color: #B23A1F; font-size: .75rem; font-weight: 600;
}
.ac-live i { width: 7px; height: 7px; border-radius: 50%; background: #D9472B; }
@media (prefers-reduced-motion: no-preference) {
.ac-live i { animation: blink 1.4s ease-in-out infinite; }
}
@keyframes blink { 50% { opacity: .25; } }
.ac-list { display: grid; gap: 14px; margin-top: 16px; }
.ac-card {
display: block; width: 100%; padding: 0; text-align: left; overflow: hidden;
border: 1px solid #F0E4D3; border-radius: 18px; background: #FFFDF9;
box-shadow: 0 10px 24px -16px rgba(90, 38, 20, .5);
}
.ac-media { position: relative; display: block; height: 170px; }
.ac-media .pic { position: absolute; inset: 0; }
.ac-chip {
position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
padding: 5px 10px; border-radius: 999px; background: rgba(255, 251, 244, .94); color: var(--brown);
font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ac-chip.hot { background: #B23A1F; color: #fff; }
.ac-chip.done { background: rgba(60, 30, 14, .78); color: #fff; }
.ac-me { position: absolute; right: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: var(--green); color: #fff; font-size: .72rem; font-weight: 600; }
.ac-me.out { background: #B23A1F; }
.ac-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.ac-body .kind { font-size: .7rem; font-weight: 600; color: var(--gold-dark); }
.ac-body strong { font-size: 1.02rem; font-weight: 600; line-height: 1.25; color: var(--brown); }
.ac-foot { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed #EADCC8; }
.ac-cur { display: grid; }
.ac-cur small { font-size: .7rem; color: var(--muted); }
.ac-cur b { font-size: 1.15rem; font-weight: 700; color: #8A3B1E; }
.ac-bids { margin-bottom: 3px; font-size: .75rem; color: var(--muted); }
.ac-btn { margin-left: auto; gap: 6px; background: var(--brown-700); }
.ac-sheet-pic { position: relative; height: 180px; margin-bottom: 12px; border-radius: 16px; }
.ac-kind { font-size: .72rem; font-weight: 600; color: var(--gold-dark); }
.ac-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ac-stats div { display: grid; gap: 2px; min-width: 0; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.ac-stats small { font-size: .7rem; color: var(--muted); }
.ac-stats b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .98rem; font-weight: 700; color: var(--brown); }
.f-loc { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }8557
/* =========================================================
Tourist: auto-sliding hero, products with cart, cart, orders
========================================================= */
.hero3 { height: 200px; }
.hero3::after { background: linear-gradient(100deg, rgba(40, 18, 8, .82) 0%, rgba(40, 18, 8, .45) 55%, rgba(40, 18, 8, .1) 100%); }
.h3-text { position: absolute; left: 20px; right: 76px; bottom: 18px; z-index: 1; display: grid; gap: 6px; }
.h3-text strong { display: grid; font-size: 1.45rem; font-weight: 700; line-height: 1.18; letter-spacing: -.015em; color: #FFF8EE; }
.h3-text small { font-size: .84rem; color: #F3E3CC; }
@media (prefers-reduced-motion: no-preference) {
.hero3 .pic img { transition: transform 6s ease-out; }
.hero3:hover .pic img { transform: scale(1.04); }
}
/* Product page */
.p-price { margin-top: 6px; font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.p-by { margin-top: 6px; }
.p-by .link { font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.qty button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--chip); color: var(--maroon); }
.qty button:disabled { opacity: .4; cursor: default; }
.qty output { min-width: 32px; text-align: center; font-weight: 700; }
.qty-sm { margin-top: 8px; }
.qty-sm button { width: 30px; height: 30px; }
.qty-sm output { min-width: 26px; font-size: .9rem; }
.p-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.p-badges span { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-align: center; font-size: .72rem; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.p-badges .ic { color: var(--maroon); width: 20px; height: 20px; }
/* Cart */
.cart-line { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); }
.cl-pic { flex: 0 0 84px; height: 84px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; }
.cl-pic .pic { width: 100%; height: 100%; }
.cart-line .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cart-line strong { font-size: .92rem; line-height: 1.25; }
.cl-del { color: var(--muted); }
.cart-sum { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.cart-sum div { display: flex; justify-content: space-between; font-size: .9rem; color: var(--ink-2); }
.cart-sum .tot { padding-top: 10px; border-top: 1px solid var(--line); font-size: 1.05rem; font-weight: 800; color: var(--ink); }
/* Experiences list */
.xcard { position: relative; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.xc-open { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.xc-media { position: relative; display: block; height: 150px; }
.xc-media .pic { position: absolute; inset: 0; }
.xc-body { display: grid; gap: 4px; padding: 12px 52px 14px 14px; }
.xc-body strong { font-size: 1rem; }
.xc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.xcard .heart { position: absolute; right: 8px; bottom: 12px; }
/* Profile */
.support-card { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 18px; border-radius: var(--r); background: #F3EBE0; color: var(--ink-2); }
.support-card .ic { width: 28px; height: 28px; color: var(--maroon); }
.support-card p { font-size: .88rem; line-height: 1.45; }
/* =========================================================
Tourist v3: Explore + Live Auctions, live auction detail,
Community, My Activity, Profile, provenance records
========================================================= */
.live-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #D7262B; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .08em; vertical-align: middle; }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.live-badge.ended { background: #6F6259; }
@media (prefers-reduced-motion: no-preference) { .live-badge i { animation: livePulse 1.4s ease-in-out infinite; } }
@keyframes livePulse { 50% { opacity: .3; } }
.sec-head h2 .ic, .lv-head h2 .ic { color: var(--maroon); vertical-align: -3px; }
/* Home: the four pillars */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.pillars button { display: grid; justify-items: center; gap: 3px; padding: 12px 4px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-align: center; color: var(--ink); }
.pillars .ic { width: 22px; height: 22px; color: var(--maroon); margin-bottom: 2px; }
.pillars b { font-size: .76rem; }
.pillars small { font-size: .6rem; line-height: 1.25; color: var(--muted); }
.maker-chip { flex: 0 0 104px; display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--shadow); text-align: center; scroll-snap-align: start; }
.maker-chip .mk-pic { width: 64px; height: 64px; border-radius: 50%; }
.maker-chip strong { font-size: .76rem; line-height: 1.2; }
.maker-chip small { font-size: .66rem; color: var(--muted); }
.tagline-end { margin: 26px 0 6px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--muted); }
/* Auction cards */
.lv-card { position: relative; flex: 0 0 236px; display: grid; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); overflow: hidden; scroll-snap-align: start; }
.lv-card.lv-sm { flex-basis: 196px; }
.lv-open { display: grid; padding: 0; border: 0; background: none; text-align: left; }
.lv-media { position: relative; display: block; height: 128px; }
.lv-media .pic { position: absolute; inset: 0; }
.lv-media .live-badge { position: absolute; top: 8px; left: 8px; }
.lv-watch { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(20, 10, 5, .6); color: #fff; font-size: .66rem; font-weight: 700; }
.lv-body { display: grid; gap: 4px; padding: 10px 12px 4px; }
.lv-body strong { font-size: .86rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lv-row small { display: block; font-size: .62rem; color: var(--muted); font-weight: 600; }
.lv-row b { font-size: .9rem; }
.lv-row .ac-chip { position: static; }
.lv-bid { margin: 8px 12px 12px; width: auto; }
.lv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 22px; }
.lv-head h2 { font-size: 1.02rem; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.lv-rail { margin-top: 10px; }
.lv-row-card { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px; border: 0; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.lv-row-card:disabled { opacity: 1; cursor: default; }
.lv-row-card .pic { flex: 0 0 64px; height: 64px; border-radius: 12px; }
.lv-row-card .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lv-row-card strong { font-size: .86rem; }
.lv-row-card .ac-chip { position: static; flex-shrink: 0; }
.soon-badge { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: .66rem; font-weight: 800; }
.soon-badge.done { background: var(--chip); color: var(--muted); }
.soon-badge.out { background: #FDE4E1; color: #B23A1F; }
.soon-badge.pay { background: #FBEBD3; color: var(--gold-dark); }
/* Explore */
.loc-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.loc-chip .ic { color: var(--maroon); }
.ex-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ex-cat { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border: 1px solid var(--line); border-radius: 16px; background: #fff; font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.ex-ico { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--chip); color: var(--maroon); }
.ex-live { position: absolute; top: -6px; right: -12px; padding: 1px 5px; border-radius: 6px; background: #D7262B; color: #fff; font-size: .52rem; font-weight: 800; letter-spacing: .06em; }
.chip-n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: rgba(116, 55, 26, .14); font-size: .66rem; }
.chip[aria-pressed="true"] .chip-n { background: rgba(255, 255, 255, .25); }
/* Live auction detail */
.lot-hero-badges { position: absolute; left: 16px; bottom: 34px; z-index: 2; display: flex; gap: 8px; align-items: center; }
.lot-hero-badges .lv-watch { position: static; }
.seller-row { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.seller-row .avatar { width: 38px; height: 38px; background: var(--gold); }
.seller-row .grow { display: grid; gap: 2px; }
.seller-row b { font-size: .88rem; }
.seller-row small { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--muted); }
.verified { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: .62rem; font-weight: 800; vertical-align: 1px; }
.bid-panel { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 14px; border-radius: 16px; background: #fff; border: 1.5px solid var(--gold); }
.bp-main { display: grid; gap: 2px; }
.bp-main small { font-size: .7rem; font-weight: 700; color: var(--muted); }
.bp-main b { font-size: 1.6rem; font-weight: 800; color: var(--maroon); }
.bp-side { display: grid; justify-items: end; align-content: space-between; gap: 6px; text-align: right; }
.bp-side .ac-chip { position: static; }
.place-bid { height: 56px; font-size: 1rem; letter-spacing: .02em; }
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.facts-grid span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.facts-grid span.wide { grid-column: 1 / -1; }
.facts-grid small { font-size: .64rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.t-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--green); }
.bid-hist { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.bid-hist li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.bid-hist li + li { border-top: 1px solid var(--line); }
.bid-hist .avatar { width: 30px; height: 30px; font-size: .66rem; background: var(--gold); }
.bid-hist li.me .avatar { background: var(--maroon); }
.bid-hist .grow { flex: 1; display: grid; }
.bid-hist small { font-size: .7rem; color: var(--muted); }
.bid-hist .top { padding: 2px 7px; border-radius: 999px; background: #FBEBD3; color: var(--gold-dark); font-size: .62rem; font-weight: 800; }
/* Provenance */
.prov-head { display: flex; gap: 14px; align-items: center; margin: 4px 0 16px; }
.prov-head .pic { flex: 0 0 84px; height: 84px; border-radius: 14px; }
.prov-head h2 { font-size: 1.05rem; line-height: 1.25; margin: 2px 0 6px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--gold); display: grid; gap: 14px; }
.timeline li { position: relative; display: grid; gap: 2px; font-size: .86rem; color: var(--ink-2); }
.timeline li::before { content: ""; position: absolute; left: -23px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--maroon); border: 2px solid var(--bg); }
.timeline b { color: var(--ink); }
/* Community */
.c-title { margin-top: 14px; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--maroon-2); }
.c-sub { margin-top: 2px; font-size: 1.05rem; font-weight: 600; color: #6B4A33; }
.comm .sub { margin-top: 6px; }
.composer { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); text-align: left; color: var(--muted); font-size: .88rem; }
.composer span:nth-child(2) { flex: 1; }
.composer .avatar { width: 40px; height: 40px; }
.cam { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #8A5A2B; color: #fff; }
.c-chips .chip { display: inline-flex; align-items: center; gap: 6px; }
.post { margin-top: 14px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.post header { display: flex; gap: 10px; align-items: center; }
.post header .avatar { width: 42px; height: 42px; background: var(--gold); }
.post header .grow { display: grid; gap: 2px; }
.post header b { color: var(--maroon); font-size: .9rem; }
.post header small { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; color: var(--muted); }
.post > p { margin-top: 10px; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.post-imgs { display: grid; gap: 6px; margin-top: 10px; }
.post-imgs.n2 { grid-template-columns: 1.4fr 1fr; }
.post-imgs .pi { position: relative; display: block; height: 170px; border-radius: 14px; overflow: hidden; }
.post-imgs .pi .pic { position: absolute; inset: 0; }
.pin-tag { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .66rem; font-weight: 700; color: var(--ink); }
.post footer { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.pf { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.pf.on { color: #D7262B; }
.pf.on .ic { fill: currentColor; }
.topic { position: relative; flex: 0 0 132px; height: 92px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; text-align: left; scroll-snap-align: start; }
.topic .pic { position: absolute; inset: 0; }
.topic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 10, 5, .75), transparent 70%); }
.topic span { position: absolute; left: 10px; bottom: 8px; z-index: 1; display: grid; color: #fff; }
.topic b { font-size: .76rem; }
.topic small { font-size: .66rem; opacity: .9; }
.follow-card { flex: 0 0 132px; display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); text-align: center; scroll-snap-align: start; }
.follow-card .fc-pic { width: 64px; height: 64px; border-radius: 50%; }
.follow-card strong { font-size: .76rem; line-height: 1.2; }
.follow-card small { font-size: .66rem; color: var(--muted); }
.follow-card .btn { margin-top: 4px; height: 30px; padding: 0 16px; background: #8A5A2B; }
.follow-card .btn.btn-ghost { background: transparent; color: #8A5A2B; border-color: #8A5A2B; }
.q-card { margin-top: 18px; padding: 14px; border-radius: 20px; background: #F3EBE0; }
.q-top { display: flex; align-items: center; gap: 10px; }
.q-top b { flex: 1; font-size: .9rem; }
.q-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #8A5A2B; color: #fff; }
.q-body { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 0; border: 0; background: none; text-align: left; }
.q-body .grow { flex: 1; display: grid; gap: 4px; }
.q-body b { font-size: .88rem; }
.q-body small { font-size: .72rem; color: var(--muted); }
.q-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--maroon); }
/* My Activity */
.act-head { padding-bottom: 0; }
.act-head .c-title { margin-top: 0; }
.act-body > div:first-child { padding-top: 6px !important; }
.act-body .seg { margin-top: 6px; }
/* Cultural places map / list switch */
.map-seg { margin: 0 14px 8px; }
/* Profile */
.prof-hero { display: grid; justify-items: center; gap: 4px; margin-top: 8px; text-align: center; }
.avatar-xl { width: 92px; height: 92px; font-size: 1.8rem; box-shadow: 0 10px 24px -12px rgba(116, 55, 26, .7); }
.prof-hero strong { margin-top: 6px; font-size: 1.2rem; }
.prof-hero small { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--muted); }
.prof-hero .btn { margin-top: 6px; }
.menu-label { margin: 20px 4px -12px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.two-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.two-btns .btn { height: 46px; }
.seg.seg3 { grid-template-columns: repeat(3, 1fr); }
.act-head { padding-top: calc(var(--safe-top) + 22px); }
/* =========================================================
Community: logo header with search, alerts and messages;
stories; story viewer; direct messages
========================================================= */
.c-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c-head .brand img.mark { height: 34px; }
.c-head .brand img.word { height: 20px; }
.c-actions { display: flex; gap: 2px; }
.c-actions .icon-btn { width: 40px; height: 40px; }
.c-searchbar { margin-top: 10px; padding-right: 4px; }
.c-searchbar .icon-btn { width: 34px; height: 34px; color: var(--muted); }
.stories { display: flex; gap: 14px; overflow-x: auto; margin: 14px -18px 0; padding: 4px 18px 6px; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: 0 0 auto; display: grid; justify-items: center; gap: 6px; width: 70px; padding: 0; border: 0; background: none; }
.story small { width: 100%; font-size: .66rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.st-ring { position: relative; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, #C89547, var(--maroon), #D39432, #C89547); }
.story.seen .st-ring { background: var(--line); }
.st-ring .st-pic, .st-ring .avatar { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg); }
.story.add .st-ring { background: none; border: 2px dashed #D9C6AD; }
.story.add .avatar { border: 0; width: 54px; height: 54px; }
.st-plus { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--maroon); color: #fff; border: 2px solid var(--bg); }
.comm .composer { margin-top: 12px; }
.story-view { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; max-width: 440px; margin: 0 auto; background: #120a06; color: #fff; }
.story-view .sv-pic { position: absolute; inset: 0; }
.story-view .sv-pic img { object-fit: cover; }
.story-view::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 25%, transparent 65%, rgba(0, 0, 0, .7)); pointer-events: none; }
.sv-bars { position: relative; z-index: 3; display: flex; gap: 4px; padding: calc(var(--safe-top) + 10px) 12px 0; }
.sv-bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.sv-bars i { display: block; height: 100%; width: 0; background: #fff; }
.sv-bars .done i { width: 100%; }
.sv-bars .now i { width: 100%; }
@media (prefers-reduced-motion: no-preference) { .sv-bars .now i { animation: svFill 5s linear both; } }
@keyframes svFill { from { width: 0; } to { width: 100%; } }
.story-view header { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.story-view header .avatar { width: 34px; height: 34px; background: var(--gold); font-size: .7rem; }
.story-view header b { flex: 1; font-size: .9rem; }
.story-view header .icon-btn { color: #fff; }
.sv-cap { position: absolute; left: 16px; right: 16px; bottom: calc(var(--safe-bottom) + 34px); z-index: 3; font-size: 1rem; font-weight: 600; line-height: 1.45; }
.sv-nav { position: absolute; top: 80px; bottom: 120px; z-index: 2; width: 38%; border: 0; background: transparent; }
.sv-nav.prev { left: 0; }
.sv-nav.next { right: 0; }
.dm-pic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; }
/* =========================================================
Community & Profile v2
========================================================= */
.av-pic { border-radius: 50%; flex-shrink: 0; }
.c-actions { align-items: center; }
.c-actions .icon-btn { width: 38px; height: 38px; }
.c-me { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; background: none; }
.c-me .avatar, .c-me .av-pic { width: 34px; height: 34px; font-size: .74rem; }
.c-searchbar { margin-top: 10px; }
.story em { display: block; margin-top: -4px; font-style: normal; font-size: .58rem; font-weight: 600; color: var(--muted); }
.story.add.has .st-ring { border: 0; background: conic-gradient(from 210deg, #C89547, var(--maroon), #D39432, #C89547); }
.story.add .st-ring .av-pic, .story.add .st-ring .avatar { width: 54px; height: 54px; }
.composer2 { margin-top: 12px; padding: 0 0 10px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.composer2 .composer { margin-top: 0; border: 0; box-shadow: none; background: transparent; }
.composer2 .composer .av-pic { width: 40px; height: 40px; }
.cmp-tools { display: flex; gap: 6px; overflow-x: auto; padding: 0 10px; scrollbar-width: none; }
.cmp-tools::-webkit-scrollbar { display: none; }
.cmp-tools button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 0; border-radius: 999px; background: var(--chip); font-size: .7rem; font-weight: 700; color: var(--ink-2); }
.cmp-tools .ic { color: var(--maroon); }
.ph-who { display: flex; gap: 10px; align-items: center; padding: 0; border: 0; background: none; text-align: left; }
.ph-who .avatar, .ph-who .av-pic { width: 42px; height: 42px; }
.ph-who .grow { display: grid; gap: 1px; }
.ph-who b { color: var(--ink); font-size: .9rem; }
.ph-who small { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; color: var(--muted); }
.post-topics { margin-top: 6px; }
.post-topics button { border: 0; background: none; padding: 0; color: var(--maroon); font-weight: 700; font-size: .84rem; }
.c-tag { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 9px 12px; border: 0; border-radius: 12px; background: #F3EBE0; text-align: left; font-size: .78rem; color: var(--ink-2); }
.c-tag span { flex: 1; }
.c-tag .ic { color: var(--maroon); }
.pf.saved { color: var(--maroon); }
.pf.saved .ic { fill: currentColor; }
.p-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); margin-bottom: 8px; }
.pr-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; text-align: left; }
.pr-main .grow { display: grid; min-width: 0; }
.pr-main small { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-av { width: 44px !important; height: 44px !important; }
.f-btn { height: 32px; padding: 0 14px; background: #8A5A2B; }
.f-btn.btn-ghost { background: transparent; color: #8A5A2B; border-color: #8A5A2B; }
.follow-card { flex-basis: 140px; }
.fc-open { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; text-align: center; }
.follow-card .fc-pic { width: 64px !important; height: 64px !important; }
.follow-card .mut { color: var(--green); font-weight: 700; }
.fc-btns { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.fc-btns .btn { margin-top: 0; }
.fc-msg { width: 32px; height: 32px; background: var(--chip); color: #8A5A2B; }
.trend { display: flex; flex-wrap: wrap; gap: 8px; }
.trend button { padding: 7px 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--shadow); font-size: .78rem; font-weight: 700; color: var(--maroon); }
.q-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(138, 90, 43, .15); }
.q-item b { font-size: .88rem; }
.q-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.q-meta small { flex: 1; font-size: .7rem; color: var(--muted); }
.av-stack { display: inline-flex; }
.av-stack .stk { width: 26px !important; height: 26px !important; font-size: .55rem; border: 2px solid #F3EBE0; margin-left: -8px; }
.av-stack .stk:first-child { margin-left: 0; }
.ask-btn { margin-top: 14px; width: 100%; background: #8A5A2B; }
/* Messenger */
.online-row { display: flex; gap: 14px; overflow-x: auto; padding: 14px 0 4px; scrollbar-width: none; }
.online-row::-webkit-scrollbar { display: none; }
.online-row button { position: relative; flex-shrink: 0; display: grid; justify-items: center; gap: 4px; width: 56px; padding: 0; border: 0; background: none; }
.online-row .dm-pic { width: 52px; height: 52px; flex-basis: 52px; }
.online-row small { font-size: .66rem; font-weight: 600; color: var(--ink-2); }
.on-dot { position: absolute; right: 2px; top: 38px; width: 12px; height: 12px; border-radius: 50%; background: #2EB872; border: 2px solid var(--bg); }
.on-dot.inline { position: static; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border: 0; vertical-align: 1px; }
.dm-av { position: relative; flex: 0 0 44px; }
.dm-av .on-dot { top: auto; bottom: 0; right: 0; }
.m-at { align-self: flex-start; font-size: .64rem; color: var(--muted); }
.msg-wrap { display: grid; justify-items: start; gap: 4px; }
.msg-wrap.me { justify-items: end; }
.msg-wrap .msg { margin: 0; }
.m-who { font-size: .66rem; font-weight: 700; color: var(--muted); padding-left: 4px; }
.m-card { display: flex; gap: 10px; width: 78%; padding: 8px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.m-card .pic { flex: 0 0 76px; height: 76px; border-radius: 12px; }
.mc-body { display: grid; gap: 2px; min-width: 0; align-content: start; }
.mc-body .kind { display: flex; align-items: center; gap: 6px; }
.mc-body b { font-size: .84rem; line-height: 1.2; }
.mc-body small { font-size: .7rem; color: var(--muted); }
.mc-body .btn { margin-top: 6px; height: 28px; width: auto; justify-self: start; padding: 0 12px; font-size: .72rem; }
.reply .icon-btn { flex-shrink: 0; width: 40px; height: 46px; color: var(--maroon); }
/* My profile and other people's profiles */
.me-page { padding: 0 18px 28px; }
.me-head { display: flex; align-items: center; gap: 18px; }
.me-av { width: 84px !important; height: 84px !important; font-size: 1.6rem; flex-shrink: 0; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); }
.me-stats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.me-stats b { display: block; font-size: 1.15rem; }
.me-stats small { font-size: .72rem; color: var(--muted); }
.me-name { margin-top: 12px; font-size: 1.2rem; font-weight: 800; }
.me-handle { font-size: .82rem; font-weight: 600; color: var(--maroon); }
.me-loc { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .8rem; color: var(--muted); }
.me-bio { margin-top: 8px; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.int-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.int-chips .chip { font-size: .74rem; padding: 7px 12px; }
.stories.hl { margin-top: 10px; }
.conn { margin-top: 18px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.conn-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }
.conn-stats button { display: grid; padding: 4px 0; border: 0; background: none; text-align: center; }
.conn-stats b { font-size: 1rem; }
.conn-stats small { font-size: .66rem; color: var(--muted); }
.conn-row { display: flex; align-items: center; justify-content: space-between; }
.conn .av-stack .stk { border-color: #fff; width: 30px !important; height: 30px !important; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.photo-grid .pic { aspect-ratio: 1; border-radius: 6px; }
/* Story viewer extras */
.story-view header .grow { display: grid; }
.story-view header small { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; opacity: .85; }
.story-view header .av-pic, .story-view header .avatar { width: 34px; height: 34px; }
.sv-cap p { margin: 0; }
.sv-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: .76rem; font-weight: 700; }
.mc-body .kind { font-size: .62rem; font-weight: 800; letter-spacing: .03em; color: var(--gold-dark); }
/* Messages header: new group + new message */
.tb-actions { display: inline-flex; gap: 2px; }
.pick-people { border: 0; padding: 0; margin: 14px 0 0; }
.pick-people legend { padding: 0; margin-bottom: 6px; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.pp-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pp-row .grow { flex: 1; display: grid; min-width: 0; }
.pp-row b { font-size: .86rem; }
.pp-row small { font-size: .7rem; color: var(--muted); }
.pp-row input { width: 20px; height: 20px; accent-color: var(--maroon); }
.m-sys { align-self: center; max-width: 85%; margin: 4px 0; padding: 5px 12px; border-radius: 999px; background: var(--chip); text-align: center; font-size: .72rem; font-weight: 600; color: var(--muted); }
/* =========================================================
My Activity dashboard
========================================================= */
.a-tabs { display: grid; grid-template-columns: repeat(4, auto); gap: 8px; margin: 14px -18px 0; padding: 0 18px 2px; overflow-x: auto; scrollbar-width: none; }
.a-tabs::-webkit-scrollbar { display: none; }
.a-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--chip); font-size: .82rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.a-tabs button .ic { color: var(--maroon); }
.a-tabs button[aria-selected="true"] { background: var(--maroon); color: #fff; }
.a-tabs button[aria-selected="true"] .ic { color: #fff; }
.a-n { min-width: 18px; padding: 0 5px; border-radius: 9px; background: rgba(116, 55, 26, .12); font-size: .66rem; line-height: 18px; text-align: center; }
.a-tabs button[aria-selected="true"] .a-n { background: rgba(255, 255, 255, .22); }
.a-wrap { padding: 4px 18px 28px; }
.a-sec { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.a-sec h2 { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; font-weight: 800; color: var(--maroon-2); }
.a-sec h2 .ic { color: var(--maroon); }
.a-sec .see-all { color: var(--muted); font-weight: 600; }
.a-card { position: relative; display: flex; gap: 12px; align-items: stretch; width: 100%; margin-bottom: 10px; padding: 10px; border: 0; border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.a-tap { flex-shrink: 0; padding: 0; border: 0; background: none; }
.a-img { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 14px; }
.a-img.sq { width: 88px; height: 88px; flex-basis: 88px; }
.a-body { flex: 1; min-width: 0; display: grid; gap: 4px; align-content: start; }
.a-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.a-top strong { font-size: .9rem; line-height: 1.25; }
.a-body .meta { font-size: .74rem; }
.a-price { font-size: 1rem; font-weight: 800; color: var(--ink); }
.a-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.a-row .btn { height: 32px; width: auto; padding: 0 14px; font-size: .74rem; }
.a-soft { background: #F3EBE0; color: var(--maroon-2); box-shadow: none; }
.a-go { align-self: center; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); }
.a-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .64rem; font-weight: 800; white-space: nowrap; }
.a-pill.ok { background: var(--green-bg); color: var(--green); }
.a-pill.info { background: #E3ECF7; color: #2F5D8F; }
.a-pill.warn { background: #FBEBD3; color: var(--gold-dark); }
.a-pill.bad { background: #FDE4E1; color: #B23A1F; }
.a-pill.mute { background: var(--chip); color: var(--muted); }
.a-bid { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.a-bid small { display: block; font-size: .64rem; font-weight: 700; color: var(--muted); }
.a-bid b { font-size: 1.25rem; font-weight: 800; color: var(--maroon); }
.a-stats { display: grid; gap: 2px; padding-left: 12px; border-left: 1px solid var(--line); font-size: .7rem; color: var(--muted); }
.a-stats span { display: inline-flex; align-items: center; gap: 4px; }
.a-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.a-mini { position: relative; padding: 8px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.a-mini .a-tap { display: grid; gap: 8px; width: 100%; text-align: left; }
.a-mini-img { width: 100%; height: 84px; border-radius: 12px; }
.a-mini-body { display: grid; gap: 2px; padding: 0 2px 2px; }
.a-mini-body strong { font-size: .78rem; line-height: 1.25; padding-right: 22px; }
.a-mini-body small { display: inline-flex; align-items: center; gap: 3px; font-size: .66rem; color: var(--muted); }
.a-mark { position: absolute; right: 6px; bottom: 30px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--maroon); }
.a-mark .ic { fill: currentColor; }
.a-empty { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; border: 1px dashed var(--line); font-size: .82rem; color: var(--muted); }
.a-empty .ic { color: var(--gold); }
.a-empty .link { margin-left: auto; }
.a-wrap .sec-head { margin-top: 18px; }
/* Order tracking */
.track { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0; }
.track li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; color: var(--muted); }
.track li::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
.track li:last-child::before { display: none; }
.track li.done::before { background: var(--green); }
.tdot { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--chip); color: #fff; }
.track li.done .tdot { background: var(--green); }
.track li.now .tdot { background: var(--maroon); box-shadow: 0 0 0 4px rgba(116, 55, 26, .15); }
.track li span:last-child { display: grid; }
.track b { font-size: .86rem; }
.track li.done b, .track li.now b { color: var(--ink); }
.track small { font-size: .7rem; }
.a-tabs { gap: 6px; }
.a-tabs button { padding: 8px 11px; font-size: .78rem; gap: 5px; }
.a-tabs button { padding: 8px 9px; font-size: .74rem; } .a-tabs .ic-sm { width: 15px; height: 15px; }
@media (max-width: 420px) { .a-tabs { display: flex; justify-content: space-between; } .a-tabs button .ic { display: none; } }
/* =========================================================
LOCARTA brown palette
Several shades of brown taken from the logo (dark handle brown,
mid brown, caramel, tan), with cream, beige, terracotta and a
little gold. Every screen reads these variables.
========================================================= */
:root {
--brown-950: #2B160B; /* text */
--brown-900: #3E1E0E;
--brown-800: #5A2810; /* logo handle */
--brown-700: #74371A; /* primary buttons */
--brown-600: #8E4F28; /* secondary buttons */
--brown-500: #A8693A; /* caramel accents and icons */
--brown-300: #D7B48C; /* logo tan */
--brown-200: #E9D6BC;
--brown-100: #F4E9DA; /* chips and soft panels */
--terracotta: #B4552F;
--gold: #C8892C; /* logo map-pin gold */
--gold-dark: #9E6A1E;
--bg: #FBF6EE;
--ink: var(--brown-950);
--ink-2: #4E3424;
--muted: #8C7663;
--line: #EADCC8;
--chip: var(--brown-100);
--maroon: var(--brown-700);
--maroon-2: var(--brown-800);
--star: #D89A2E;
}
/* the Home screen's own tokens */
.home2, .app { --brown: var(--brown-800); --rust: var(--terracotta); --ochre: var(--gold); --olive: #8A6A44; }
/* Headings in deep brown, icons and small accents in caramel */
.sec-head h2, .a-sec h2, .d-h2, .h-hello, .c-title, .me-name, .topbar h1 { color: var(--brown-800); }
.a-sec h2 .ic, .sec-head h2 .ic, .lv-head h2 .ic, .menu .ic:first-child, .cmp-tools .ic, .c-tag .ic, .loc-chip .ic, .pillars .ic, .ex-ico, .p-badges .ic, .fact .ic, .support-card .ic { color: var(--brown-500); }
.ex-ico { background: var(--brown-100); }
.see-all { color: var(--brown-600); }
/* Buttons: primary dark brown, secondary mid brown, soft caramel tints */
.btn { background: var(--brown-700); }
.btn:active { background: var(--brown-800); }
.btn-ghost { color: var(--brown-700); border-color: var(--brown-600); background: transparent; }
.f-btn, .follow-card .btn, .ask-btn, .lv-bid { background: var(--brown-600); }
.f-btn.btn-ghost, .follow-card .btn.btn-ghost { color: var(--brown-600); border-color: var(--brown-600); background: transparent; }
.a-soft { background: var(--brown-100); color: var(--brown-800); }
.cam, .q-ico { background: var(--brown-500); }
.fc-msg { background: var(--brown-100); color: var(--brown-600); }
/* Chips, tabs and highlights */
.chip[aria-pressed="true"], .a-tabs button[aria-selected="true"] { background: var(--brown-800); }
.tabbar button[aria-current="page"] { color: var(--brown-700); }
.tabs button[aria-selected="true"], .seg button[aria-selected="true"] { color: var(--brown-700); border-bottom-color: var(--brown-700); }
.price, .a-price { color: var(--brown-700); }
.bp-main b, .a-bid b { color: var(--terracotta); }
.q-card, .c-tag, .support-card { background: var(--brown-100); }
.avatar { background: var(--brown-600); }
.post header .avatar, .bid-hist .avatar, .seller-row .avatar, .thread .avatar { background: var(--brown-500); }
.post header b, .ph-who b, .me-handle { color: var(--brown-700); }
.st-ring, .story.add.has .st-ring { background: conic-gradient(from 210deg, var(--gold), var(--brown-500), var(--brown-800), var(--terracotta), var(--gold)); }
.bid-panel { border-color: var(--brown-300); }
.timeline { border-left-color: var(--brown-300); }
.timeline li::before { background: var(--brown-700); }
/* =========================================================
Places map v2 and Mindanao microcopy
========================================================= */
.tb-local { font-size: .72rem; font-weight: 700; font-style: italic; color: var(--brown-500); }
.h-local, .c-local small { display: block; font-size: .66rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.c-local { margin-top: 14px; font-size: .86rem; font-weight: 800; color: var(--brown-800); }
.c-local small { display: inline; margin-left: 6px; }
.comm .c-local + .stories { margin-top: 4px; }
.map-top { padding: 0 18px; flex-shrink: 0; }
.filter-btn.on { background: var(--brown-800); box-shadow: 0 0 0 3px rgba(116, 55, 26, .2); }
.map-cats { padding-top: 10px; }
.map-cats .chip { display: inline-flex; align-items: center; gap: 6px; }
.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; vertical-align: 0; }
.chip[aria-pressed="true"] .cdot { box-shadow: 0 0 0 2px #fff; }
.map-seg { margin: 10px 0 6px; }
.map2 { margin-top: 4px; background: #DCE9E6; touch-action: none; cursor: grab; }
.map2:active { cursor: grabbing; }
.map2 .lbl { font-size: 10px; fill: #8C7663; font-weight: 700; letter-spacing: .02em; }
.map2 .lbl-sea { fill: #6E9A97; }
.pin2 { cursor: pointer; transition: transform .15s; }
.pin2-shape { stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 3px 3px rgba(43, 22, 11, .35)); }
.pin2.on .pin2-shape { stroke: var(--gold); stroke-width: 3; }
.pin2:focus-visible .pin2-shape { stroke: var(--gold); }
.map-ctrls { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; }
.map-ctrls button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #fff; color: var(--brown-700); box-shadow: var(--shadow); }
.map-ctrls button.on { background: var(--brown-800); color: #fff; }
.map-count { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .7rem; font-weight: 700; color: var(--brown-800); box-shadow: var(--shadow); }
.map-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: .74rem; color: var(--ink-2); white-space: nowrap; box-shadow: var(--shadow); }
.map-hint b { color: var(--brown-700); }
.place-pop { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(43, 22, 11, .2); }
.pc-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; color: var(--muted); }
.pc-top { display: flex; gap: 12px; padding-right: 26px; }
.pc-img { flex: 0 0 70px; width: 70px; height: 70px; border-radius: 12px; }
.pc-info { display: grid; gap: 2px; min-width: 0; align-content: start; }
.pc-cat { display: inline-flex; align-items: center; gap: 5px; font-size: .64rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.pc-info strong { font-size: .95rem; line-height: 1.2; }
.pc-desc { margin-top: 8px; font-size: .8rem; line-height: 1.45; color: var(--ink-2); }
.pc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pc-btns .btn { width: 100%; height: 38px; }
.near-note { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--brown-100); font-size: .76rem; color: var(--ink-2); }
.near-note b { color: var(--brown-800); }
.row .kind { display: inline-flex; align-items: center; gap: 5px; }
/* =========================================================
Creator side: Artist · Artisan · Collector
========================================================= */
.role-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 2px; }
.rb { padding: 2px 8px; border-radius: 999px; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rb-artisan { background: #F6E3D3; color: var(--terracotta); }
.rb-artist { background: #F3E6C9; color: var(--gold-dark); }
.rb-collector { background: var(--brown-200); color: var(--brown-800); }
.rb-creator { background: #E3EDE3; color: #4F7A5A; }
.cr-card { margin-top: 14px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.cr-id { display: flex; gap: 12px; align-items: center; }
.cr-av { width: 64px !important; height: 64px !important; font-size: 1.2rem; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brown-300); }
.cr-id .grow { display: grid; gap: 1px; min-width: 0; }
.cr-id strong { font-size: 1.02rem; color: var(--brown-800); }
.cr-id small { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; color: var(--muted); }
.cr-bio { margin-top: 10px; font-size: .86rem; font-style: italic; color: var(--ink-2); }
.cr-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 12px; padding: 10px 0; border-block: 1px solid var(--line); text-align: center; }
.cr-stats b { display: block; font-size: 1.05rem; color: var(--brown-800); }
.cr-stats small { font-size: .68rem; color: var(--muted); }
.cr-card .two-btns .btn { height: 42px; font-size: .84rem; }
.cr-qa { display: flex; gap: 8px; overflow-x: auto; margin: 14px -18px 0; padding: 2px 18px 6px; scrollbar-width: none; }
.cr-qa::-webkit-scrollbar { display: none; }
.cr-qa button { flex-shrink: 0; display: grid; justify-items: center; gap: 6px; width: 96px; padding: 12px 6px; border: 0; border-radius: 16px; background: var(--brown-700); color: #FFF8EE; font-size: .72rem; font-weight: 700; text-align: center; box-shadow: 0 8px 18px -12px var(--brown-800); }
.cr-qa button:nth-child(2) { background: var(--brown-600); }
.cr-qa button:nth-child(3) { background: var(--brown-500); }
.cr-qa button:nth-child(4) { background: var(--terracotta); }
.cr-qa button:nth-child(5) { background: var(--gold-dark); }
.cr-qa span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .16); }
.cr-sec { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; }
.cr-sec h2 { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; color: var(--brown-800); }
.grp { padding: 2px 7px; border-radius: 6px; font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.grp-create { background: #F6E3D3; color: var(--terracotta); }
.grp-manage { background: var(--brown-200); color: var(--brown-800); }
.grp-connect { background: #E3EDE3; color: #4F7A5A; }
.grp-grow { background: #F3E6C9; color: var(--gold-dark); }
.grp-preserve { background: #EDE4F0; color: #6A4A6E; }
.cr-overview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cr-overview > div { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.cr-overview > div.big { grid-column: 1 / -1; background: var(--brown-800); border-color: var(--brown-800); color: #FFF8EE; }
.cr-overview b { font-size: 1.15rem; color: var(--brown-800); }
.cr-overview .big b { font-size: 1.6rem; color: #FFF8EE; }
.cr-overview small { font-size: .68rem; font-weight: 600; color: var(--muted); }
.cr-overview .big small { color: var(--brown-300); }
.cr-overview .big .t-ok { color: #A9D8B5 !important; font-size: .72rem; display: inline-flex; gap: 4px; align-items: center; }
.cr-prod, .cr-coll, .cr-space { flex: 0 0 210px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); overflow: hidden; scroll-snap-align: start; }
.cr-pimg, .cr-cimg, .cr-simg { height: 116px; }
.cr-pbody { display: grid; gap: 3px; padding: 10px 12px 12px; }
.cr-pbody strong { font-size: .86rem; line-height: 1.25; }
.cr-pbody .a-pill { justify-self: start; }
.cr-mini { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; color: var(--muted); }
.t-bad { color: #B23A1F; font-weight: 700; }
.cr-nums { display: flex; gap: 10px; font-size: .7rem; font-weight: 700; color: var(--brown-600); }
.cr-nums span { display: inline-flex; align-items: center; gap: 3px; }
.cr-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cr-btns button { padding: 6px 10px; border: 0; border-radius: 999px; background: var(--brown-100); font-size: .7rem; font-weight: 700; color: var(--brown-800); }
.cr-btns button:first-child { background: var(--brown-700); color: #fff; }
.cr-space.add { display: grid; place-content: center; justify-items: center; gap: 4px; padding: 16px; border: 1.5px dashed var(--brown-300); background: transparent; box-shadow: none; text-align: center; color: var(--brown-700); }
.cr-space.add span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brown-100); }
.cr-space.add small { font-size: .68rem; color: var(--muted); }
.cr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cr-grid .cr-prod, .cr-grid .cr-coll { flex: none; }
.cr-grid .cr-pimg, .cr-grid .cr-cimg { height: 100px; }
.co-card { align-items: flex-start; }
.cr-feed { display: grid; gap: 6px; }
.cr-feed button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 14px; background: #fff; box-shadow: var(--shadow); text-align: left; font-size: .8rem; color: var(--ink-2); }
.cr-feed .n-ico { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--brown-700); color: #fff; }
.cr-feed .n-ico.gold { background: var(--gold); }
.cr-feed .n-ico.dark { background: var(--brown-900); }
.cr-grow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cr-grow button { display: grid; gap: 3px; padding: 12px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--shadow); text-align: left; }
.cr-grow .ic { color: var(--brown-500); }
.cr-grow b { font-size: .84rem; color: var(--brown-800); }
.cr-grow small { font-size: .68rem; color: var(--muted); }
.cr-post { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--shadow); text-align: left; color: var(--muted); font-size: .82rem; }
.cr-post span:nth-child(2) { flex: 1; }
.cr-post .avatar, .cr-post .av-pic { width: 38px; height: 38px; }
.pub-note { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 7px 12px; border-radius: 12px; background: var(--brown-100); font-size: .74rem; color: var(--brown-800); }
.cr-bg { margin-top: 8px; font-size: .82rem; line-height: 1.5; color: var(--ink-2); }
.rev-mini { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .82rem; color: var(--star); }
.rev-mini b { color: var(--ink); }
.rev-mini small { color: var(--muted); }
.rev-mini .link { margin-left: auto; }
.rev-head { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.rev-head > b { font-size: 2.2rem; color: var(--brown-800); }
.rev-head span { display: grid; gap: 2px; }
.rev-head small { font-size: .76rem; color: var(--muted); }
.cr-pub { display: grid; gap: 4px; padding: 0 0 8px; border: 0; border-radius: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.cr-pub .pic { height: 110px; }
.cr-pub b, .cr-pub small { padding: 0 10px; }
.cr-pub b { font-size: .8rem; }
.cr-pub small { font-size: .7rem; color: var(--muted); }
.prov-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; background: #FBEBD3; font-size: .76rem; color: var(--gold-dark); }
.prov-note.ok { background: var(--green-bg); color: var(--green); }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; }
.chip-check span { display: inline-block; padding: 7px 12px; border-radius: 999px; background: var(--chip); font-size: .76rem; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.chip-check input:checked + span { background: var(--brown-800); color: #fff; }
.chip-check input:focus-visible + span { outline: 2.5px solid var(--gold); }
.me-page .tabs { overflow-x: auto; scrollbar-width: none; }
.me-page .tabs::-webkit-scrollbar { display: none; }
.me-page .tabs button { flex: 0 0 auto; padding: 11px 12px; }
/* One creator platform: My LOCARTA workspace and activity glance */
.cr-ws { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cr-ws button { display: grid; justify-items: start; gap: 3px; padding: 12px 10px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--shadow); text-align: left; }
.cr-ws .ws-ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 11px; background: var(--brown-100); color: var(--brown-700); }
.cr-ws button:nth-child(2) .ws-ico { color: var(--terracotta); background: #F6E3D3; }
.cr-ws button:nth-child(3) .ws-ico { color: var(--gold-dark); background: #F3E6C9; }
.cr-ws button:nth-child(4) .ws-ico { color: #4F7A5A; background: #E3EDE3; }
.cr-ws button:nth-child(5) .ws-ico { color: #B23A1F; background: #FDE4E1; }
.cr-ws button:nth-child(6) .ws-ico { color: #6A4A6E; background: #EDE4F0; }
.cr-ws b { font-size: .76rem; line-height: 1.2; color: var(--brown-800); }
.cr-ws small { font-size: .64rem; color: var(--muted); }
.glance { display: grid; gap: 8px; }
.glance button { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 12px 14px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--shadow); text-align: left; }
.glance small { grid-column: 1 / -1; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brown-500); }
.glance b { font-size: .9rem; color: var(--ink); }
.glance span:not(.a-pill):not(.live-badge) { font-size: .76rem; color: var(--muted); }
.glance .a-pill, .glance .live-badge { grid-column: 2; grid-row: 2 / span 2; justify-self: end; }
/* Creator quick actions: one uniform colour, the gold of the LOCARTA logo's map pin */
.cr-qa button,
.cr-qa button:nth-child(2),
.cr-qa button:nth-child(3),
.cr-qa button:nth-child(4),
.cr-qa button:nth-child(5) { background: #C8892C; color: var(--brown-900); box-shadow: 0 8px 18px -12px #9E6A1E; }
.cr-qa span { background: rgba(255, 248, 238, .45); color: var(--brown-900); }
/* =========================================================
LOCARTA CLEAN THEME
Few colours, each with one job:
• Neutrals: cream page, white cards, soft sand panels, hairline borders
• Ink: three text tones from the logo's dark brown
• Primary: logo brown for actions, selection and navigation
• Accent: logo gold for highlights only (quick actions, stars, badges)
• Status: muted green / amber / red / blue, always as soft tints
========================================================= */
:root {
/* neutrals */
--bg: #FAF6F0;
--card: #FFFFFF;
--sand: #F3ECE2;
--line: #E8DED0;
/* ink */
--ink: #2B1A10;
--ink-2: #5E4A3C;
--muted: #9A8676;
/* primary (logo brown) */
--primary: #5A2810;
--primary-hover: #45200C;
--primary-soft: #F1E6DA;
/* accent (logo gold) */
--accent: #C8892C;
--accent-soft: #F7EBD5;
--accent-ink: #8A5A14;
/* status */
--ok: #3F7A57; --ok-soft: #E6F1EA;
--warn: #A86A12; --warn-soft: #FBF0DC;
--bad: #C0392B; --bad-soft: #FBE6E2;
--info: #3E6A8C; --info-soft: #E5EEF5;
/* map the older names onto the clean set */
--maroon: var(--primary);
--maroon-2: var(--primary-hover);
--brown-950: var(--ink); --brown-900: #3A2214; --brown-800: var(--primary); --brown-700: var(--primary); --brown-600: #7A4A2A;
--brown-500: var(--accent-ink); --brown-300: #D9C3A6; --brown-200: #EADCC8; --brown-100: var(--sand);
--chip: var(--sand);
--gold: var(--accent); --gold-dark: var(--accent-ink);
--terracotta: var(--primary);
--green: var(--ok); --green-bg: var(--ok-soft);
--star: var(--accent);
}
body, .app { background: var(--bg); color: var(--ink); }
/* Text */
h1, h2, h3, .sec-head h2, .a-sec h2, .cr-sec h2, .d-h2, .h-hello, .c-title, .me-name, .topbar h1, .cr-id strong { color: var(--ink); }
.sub, .meta, .h-sub { color: var(--muted); }
.see-all, .link { color: var(--primary); }
/* Buttons: one primary, one quiet secondary */
.btn, .btn-gold, .f-btn, .follow-card .btn, .ask-btn, .lv-bid, .filter-btn { background: var(--primary); color: #fff; box-shadow: 0 6px 14px -10px var(--primary); }
.btn:active, .btn:hover { background: var(--primary-hover); }
.btn-ghost, .f-btn.btn-ghost, .follow-card .btn.btn-ghost { background: transparent; color: var(--primary); border: 1.5px solid var(--line); box-shadow: none; }
.btn-ghost:hover { border-color: var(--primary); background: transparent; }
.a-soft, .cr-btns button { background: var(--sand); color: var(--primary); }
.cr-btns button:first-child { background: var(--primary); color: #fff; }
.filter-btn.on, .map-ctrls button.on { background: var(--primary-hover); }
/* Selection, tabs and navigation */
.chip { background: var(--sand); color: var(--ink-2); }
.chip[aria-pressed="true"], .a-tabs button[aria-selected="true"] { background: var(--primary); color: #fff; }
.a-tabs button { background: var(--sand); color: var(--ink-2); }
.a-tabs button .ic { color: var(--primary); }
.a-tabs button[aria-selected="true"] .ic { color: #fff; }
.tabs button[aria-selected="true"], .seg button[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.tabbar button[aria-current="page"] { color: var(--primary); }
.tabbar button[aria-current="page"]::after { background: var(--primary); }
/* Cards and panels */
.cr-card, .a-card, .post, .row, .bk, .thread, .box, .menu, .cr-prod, .cr-coll, .cr-space, .lv-card, .cr-grow button, .cr-ws button, .glance button, .p-row, .follow-card, .xcard, .pcard, .cart-line { background: var(--card); }
.q-card, .c-tag, .support-card, .near-note, .pub-note, .composer2, .cr-post { background: var(--sand); }
.cr-overview > div { background: var(--card); border-color: var(--line); }
.cr-overview > div.big { background: var(--primary); border-color: var(--primary); }
.cr-overview .big small { color: #E9D8C6; }
/* Icons: one quiet tone */
.a-sec h2 .ic, .sec-head h2 .ic, .lv-head h2 .ic, .menu .ic:first-child, .cmp-tools .ic, .c-tag .ic, .loc-chip .ic, .pillars .ic, .ex-ico, .p-badges .ic, .fact .ic, .support-card .ic, .cr-grow .ic { color: var(--primary); }
.ex-ico { background: var(--sand); }
/* Accent (gold) only where something should stand out */
.cr-qa button, .cr-qa button:nth-child(n) { background: var(--accent); color: var(--brown-900); box-shadow: 0 8px 18px -12px var(--accent-ink); }
.cr-qa span { background: rgba(255, 248, 238, .5); color: var(--brown-900); }
.cr-ws .ws-ico, .cr-ws button:nth-child(n) .ws-ico { background: var(--accent-soft); color: var(--accent-ink); }
.rb, .rb-artist, .rb-artisan, .rb-collector, .rb-creator { background: var(--accent-soft); color: var(--accent-ink); }
.grp, .grp-create, .grp-manage, .grp-connect, .grp-grow, .grp-preserve { background: var(--sand); color: var(--ink-2); }
.st-ring, .story.add.has .st-ring { background: conic-gradient(from 210deg, var(--accent), var(--primary), var(--accent)); }
.rating .ic, .stars, .rev-mini { color: var(--accent); }
.me-av, .cr-av { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent); }
/* Prices */
.price, .a-price, .p-price { color: var(--ink); }
.bp-main b, .a-bid b { color: var(--primary); }
/* Status: soft tints, never loud */
.a-pill.ok, .status, .soon-badge, .verified, .t-ok { background: var(--ok-soft); color: var(--ok); }
.t-ok { background: none; }
.a-pill.warn, .status.res, .soon-badge.pay, .prov-note { background: var(--warn-soft); color: var(--warn); }
.a-pill.bad, .soon-badge.out { background: var(--bad-soft); color: var(--bad); }
.a-pill.info, .status.info { background: var(--info-soft); color: var(--info); }
.a-pill.mute, .soon-badge.done, .status.past { background: var(--sand); color: var(--muted); }
.prov-note.ok { background: var(--ok-soft); color: var(--ok); }
.live-badge { background: var(--bad); }
.dot, .udot, .tb-badge { background: var(--bad); }
/* Avatars */
.avatar { background: var(--primary); }
.post header .avatar, .bid-hist .avatar, .seller-row .avatar, .thread .avatar, .review-head .avatar { background: #8A6A4E; }
/* Home category tiles: one calm colour */
.c-rust, .c-olive, .c-gold { background: var(--primary); }
/* =========================================================
Creator side uses the tourist design system exactly
(same cards, headers, tiles, shadows and radius as the tourist Home)
========================================================= */
.pillars-5 { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pillars-5 button { padding: 10px 2px; }
.pillars-5 b { font-size: .72rem; }
.pillars-5 small { font-size: .56rem; }
.cr-home .h-sub { margin-top: 4px; }
.cr-space-nav .ex-cat { gap: 4px; padding: 12px 4px 10px; font-size: .72rem; text-align: center; }
.cr-space-nav .ex-cat small { font-size: .62rem; font-weight: 500; color: var(--muted); }
/* creator cards = tourist "featured" cards */
.cr-card, .cr-prod, .cr-coll, .cr-space, .cr-grow button, .cr-feed button, .glance button {
border: 1px solid #F0E4D3; border-radius: 16px; background: #FFFDF9; box-shadow: 0 8px 20px -14px rgba(90, 38, 20, .45);
}
.cr-prod, .cr-coll, .cr-space { flex-basis: 168px; }
.cr-pimg, .cr-cimg, .cr-simg { height: 98px; }
.cr-pbody { padding: 9px 10px 11px; }
.cr-pbody strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .84rem; font-weight: 600; line-height: 1.25; color: var(--brown); }
.cr-pbody .price { font-size: .86rem; }
.cr-space.add { border-style: dashed; background: transparent; box-shadow: none; }
/* insights = tourist white cards, no dark admin panel */
.cr-overview > div, .cr-overview > div.big { border: 1px solid #F0E4D3; background: #FFFDF9; box-shadow: 0 8px 20px -14px rgba(90, 38, 20, .35); }
.cr-overview .big b { color: var(--brown); }
.cr-overview .big small { color: var(--muted); }
.cr-overview .big .t-ok { color: var(--ok) !important; }
/* quick actions keep the logo gold, with the tourist card shape */
.cr-qa button { border-radius: 16px; }
.grp { display: none; }
/* =========================================================
Creator Home: clean, minimal layout
One main card (profile); everything else sits on the page
with simple rows, a plain icon menu and compact buttons.
========================================================= */
.cr-home { padding-bottom: 28px; }
.cr-home .h-hello { margin-top: 12px; font-size: 1.5rem; }
.cr-home .h-sub { margin-top: 2px; font-size: .84rem; }
/* section rhythm: same gap everywhere */
.cr-home .sec-head { margin: 26px 0 10px; }
.cr-home .h-sec h2 { font-size: 1.02rem; font-weight: 700; }
.cr-home .h-sec .see-all { font-size: .78rem; }
/* 1 · Profile: the only prominent card */
.cr-home .cr-card { margin-top: 14px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 6px 18px -14px rgba(90, 38, 20, .35); }
.cr-home .cr-id { gap: 12px; align-items: flex-start; }
.cr-home .cr-av { width: 56px !important; height: 56px !important; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent); }
.cr-home .cr-id strong { font-size: .98rem; line-height: 1.2; }
.cr-home .cr-id small { font-size: .74rem; }
.cr-home .role-badges { margin: 3px 0 1px; }
.cr-home .cr-bio { margin-top: 8px; font-size: .82rem; }
.cr-home .cr-stats { margin-top: 10px; padding: 8px 0; border-block: 1px solid var(--line); }
.cr-home .cr-stats > div + div { border-left: 1px solid var(--line); }
.cr-home .cr-stats b { font-size: .98rem; }
.cr-home .cr-stats small { font-size: .64rem; }
.cr-home .cr-card .two-btns { margin-top: 10px; gap: 8px; }
.cr-home .cr-card .two-btns .btn { height: 38px; font-size: .8rem; border-radius: 12px; }
/* 2 · Five areas: a plain icon menu, no boxes */
.cr-home .pillars-5 { margin-top: 18px; gap: 0; padding: 4px 0; border-bottom: 1px solid var(--line); }
.cr-home .pillars-5 button { padding: 8px 2px 10px; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 5px; }
.cr-home .pillars-5 .ic { width: 22px; height: 22px; margin: 0; color: var(--primary); }
.cr-home .pillars-5 b { font-size: .72rem; font-weight: 600; color: var(--ink-2); }
.cr-home .pillars-5 small { display: none; }
.cr-home .pillars-5 button:active b, .cr-home .pillars-5 button:hover b { color: var(--primary); }
/* 3 · Quick actions: compact, quiet buttons */
.cr-qa2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.cr-qa2 button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 10px; border: 1px solid #EAD9BC; border-radius: 12px; background: var(--accent-soft); color: var(--primary); font-size: .78rem; font-weight: 600; }
.cr-qa2 button .ic { color: var(--accent-ink); }
.cr-qa2 button:active { background: #F0DFC0; }
/* 4 · Simple lists instead of grids of boxes */
.cr-list { display: grid; border-top: 1px solid var(--line); }
.cr-list button { display: grid; grid-template-columns: 22px 1fr auto 14px; align-items: center; gap: 10px; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.cr-list button > .ic:first-child { color: var(--primary); }
.cr-list b { font-size: .86rem; font-weight: 600; color: var(--ink); }
.cr-list small { font-size: .74rem; color: var(--muted); }
.cr-list button > .ic:last-child { color: var(--muted); }
/* 5 · Insights: one quiet strip */
.cr-insights { padding: 12px 0 2px; border-top: 1px solid var(--line); }
.ci-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ci-top small { width: 100%; font-size: .7rem; font-weight: 600; color: var(--muted); }
.ci-top b { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.ci-top .t-ok { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; color: var(--ok); }
.ci-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; padding: 10px 0; border-block: 1px solid var(--line); text-align: center; }
.ci-row > div + div { border-left: 1px solid var(--line); }
.ci-row b { display: block; font-size: .98rem; color: var(--ink); }
.ci-row small { font-size: .62rem; color: var(--muted); }
/* rails and rows: lighter cards, smaller shadows */
.cr-home .cr-prod, .cr-home .cr-coll, .cr-home .cr-space { box-shadow: 0 4px 12px -10px rgba(90, 38, 20, .4); }
.cr-home .a-card { box-shadow: none; border: 1px solid var(--line); background: #fff; margin-bottom: 8px; }
.cr-home .a-empty { border: 0; background: none; padding: 6px 2px; }
.cr-home .thread { box-shadow: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 12px 2px; }
.cr-home .list { gap: 0; }
.cr-home .cr-post { border: 1px solid var(--line); background: #fff; box-shadow: none; }
/* larger screens: a little more room, same single column */
@media (min-width: 480px) {
.cr-home .h-hello { font-size: 1.6rem; }
}
/* =========================================================
Creator Home, reference layout
soft outlined tiles · round quick-action icons · pill buttons
========================================================= */
.cr-home .cr-card { padding: 14px 14px 14px; border-color: #EFE4D6; background: #FFFCF7; box-shadow: 0 8px 22px -18px rgba(90, 38, 20, .45); }
.cr-home .cr-stats { border-top: 0; border-bottom: 1px solid #EADFD0; padding: 6px 0 12px; }
.cr-home .cr-stats b { font-size: 1.05rem; font-weight: 700; }
.cr-home .cr-stats small { font-size: .68rem; }
.cr-home .cr-card .two-btns { margin-top: 12px; gap: 10px; }
.cr-home .cr-card .two-btns .btn { height: 40px; border-radius: 999px; font-size: .84rem; }
.cr-home .cr-card .two-btns .btn-ghost { border: 1px solid #D9C6AE; color: var(--ink); }
/* Create · Share · Manage · Connect · Preserve: soft outlined tiles */
.cr-home .pillars-5 { margin-top: 16px; gap: 6px; padding: 0; border: 0; }
.cr-home .pillars-5 button { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 10px 2px 9px; border: 1px solid #EBDFCF; border-radius: 14px; background: #FFFCF7; box-shadow: none; }
.cr-home .pillars-5 .ic { width: 21px; height: 21px; margin-bottom: 3px; }
.cr-home .pillars-5 b { font-size: .72rem; font-weight: 600; color: var(--primary); }
.cr-home .pillars-5 small { display: block; font-size: .56rem; line-height: 1.3; color: var(--muted); }
/* quick actions: round gold icons with a label underneath, no card */
.cr-qa3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 16px; }
.cr-qa3 button { display: grid; justify-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; }
.qa-dot { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #F4E3C6; color: var(--primary); transition: transform .15s; }
.qa-dot .ic { width: 22px; height: 22px; }
.cr-qa3 button:hover .qa-dot, .cr-qa3 button:active .qa-dot { transform: scale(1.05); background: #EFD8B0; }
.qa-l { font-size: .72rem; line-height: 1.25; color: var(--ink); text-align: center; }
/* Creator Space: 3 × 2 soft tiles */
.cr-home .h-sec h2 { font-size: 1.15rem; }
.cr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cr-tiles button { display: grid; justify-items: center; gap: 2px; padding: 12px 4px 11px; border: 1px solid #EBDFCF; border-radius: 14px; background: #FFFCF7; text-align: center; }
.t-dot { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 5px; border-radius: 50%; background: #F4E9DC; color: var(--primary); }
.t-dot .ic { width: 19px; height: 19px; }
.cr-tiles b { font-size: .74rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.cr-tiles small { font-size: .64rem; color: var(--muted); }
.cr-tiles button:active { background: #F8F0E5; }
/* Five areas: coloured squircle icons with label and note, no card behind (reference) */
.cr-home .pillars-5 { margin-top: 18px; gap: 4px; }
.cr-home .pillars-5 .pz { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pz-ico { display: grid; place-items: center; width: 56px; height: 50px; margin-bottom: 6px; border-radius: 20px; color: #FFFCF7; box-shadow: 0 8px 16px -12px rgba(60, 30, 14, .6); transition: transform .15s; }
.pz-ico .ic { width: 24px !important; height: 24px !important; margin: 0 !important; color: #FFFCF7 !important; }
.pz-create .pz-ico { background: #D4A04A; }
.pz-share .pz-ico { background: #8C9B7D; }
.pz-manage .pz-ico { background: #C2694A; }
.pz-connect .pz-ico { background: #CFA877; }
.pz-preserve .pz-ico { background: #8E6560; }
.cr-home .pillars-5 .pz b { font-size: .76rem; font-weight: 700; color: var(--primary); }
.cr-home .pillars-5 .pz small { display: block; font-size: .58rem; line-height: 1.3; color: var(--muted); }
.pz:hover .pz-ico, .pz:active .pz-ico { transform: translateY(-2px); }
.pz:focus-visible { outline: none; }
.pz:focus-visible .pz-ico { outline: 2.5px solid var(--accent); outline-offset: 2px; }
/* Marketplace sub-categories (e.g. Paintings → Oil, Acrylic…) */
.sub-chips { padding-top: 6px; }
.sub-chips .chip { padding: 6px 12px; font-size: .74rem; background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.sub-chips .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: #EAD9BC; color: var(--primary); }
/* =========================================================
Story: a core LOCARTA feature on every product, experience,
collectible, gallery, studio and creator
========================================================= */
.story-card { margin-top: 16px; padding: 14px 14px 6px; border: 1px solid #EAD9BC; border-radius: 16px; background: linear-gradient(180deg, #FBF3E6, #FFFCF7); }
.story-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--primary); }
.story-h .ic { color: var(--accent-ink); }
.story-h small { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: var(--accent-ink); }
.story-row { padding: 9px 0; border-top: 1px dashed #EAD9BC; }
.story-row:first-of-type { border-top: 0; }
.story-row b { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.story-row p { margin-top: 3px; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.story-maker { display: flex; align-items: center; gap: 6px; width: 100%; margin: 4px 0 8px; padding: 9px 0 0; border: 0; border-top: 1px dashed #EAD9BC; background: none; text-align: left; font-size: .8rem; color: var(--ink-2); }
.story-maker b { color: var(--primary); }
.story-maker .ic:last-child { margin-left: auto; color: var(--muted); }
.story-maker:disabled { cursor: default; }
.story-maker:disabled .ic:last-child { display: none; }
.story-tag { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); font-size: .6rem; font-weight: 700; color: var(--accent-ink); width: fit-content; }
.xc-foot .story-tag { margin: 0 6px 0 auto; }
/* =========================================================
Profile pages (Artist and Tourist): cover photo + overlapping card
========================================================= */
.pf-wrap { margin-top: 14px; }
.pf-cover { position: relative; height: 150px; border-radius: 18px; overflow: hidden; background: var(--sand); }
.pf-cover .pic { position: absolute; inset: 0; }
.pf-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 26, 16, 0) 45%, rgba(43, 26, 16, .35)); pointer-events: none; }
.pf-cover.empty { background:
repeating-linear-gradient(45deg, transparent 0 9px, rgba(200, 137, 44, .18) 9px 11px, transparent 11px 20px),
repeating-linear-gradient(-45deg, transparent 0 9px, rgba(200, 137, 44, .18) 9px 11px, transparent 11px 20px), var(--sand); }
.pf-cover.empty::after { display: none; }
.pf-cover-btn { position: absolute; right: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 0; border-radius: 999px; background: rgba(255, 252, 247, .92); color: var(--primary); font-size: .72rem; font-weight: 600; box-shadow: 0 4px 12px -6px rgba(43, 26, 16, .5); backdrop-filter: blur(4px); }
.upload.cover-up { height: 150px; }
/* artist dashboard: the card overlaps the bottom of the cover */
.cr-home .pf-card { position: relative; z-index: 1; margin: -38px 10px 0; padding-top: 0; text-align: center; }
.cr-home .pf-card .cr-id { flex-direction: column; align-items: center; gap: 6px; }
.cr-home .pf-card .cr-av { width: 76px !important; height: 76px !important; margin-top: -38px; box-shadow: 0 0 0 4px #FFFCF7, 0 6px 16px -8px rgba(43, 26, 16, .5); }
.cr-home .pf-card .cr-id .grow { justify-items: center; }
.cr-home .pf-card .role-badges { justify-content: center; }
.cr-home .pf-card .cr-bio { text-align: center; }
/* profile pages: avatar overlaps the cover, stats beside it */
.me-page > .pf-cover { margin: 2px -2px 0; }
.pf-head { position: relative; z-index: 1; margin-top: -36px; padding: 0 4px; align-items: flex-end; }
.pf-head .me-av { box-shadow: 0 0 0 4px var(--bg), 0 8px 18px -8px rgba(43, 26, 16, .5) !important; }
.pf-head .me-stats { padding-bottom: 4px; }
.me-page .two-btns .btn { height: 40px; border-radius: 999px; font-size: .84rem; }
.pf-shortcuts { margin-top: 16px; }
/* five shortcuts: rich earthy colours, white icons, same size */
.pz-ico { width: 54px; height: 50px; border-radius: 18px; box-shadow: 0 8px 16px -10px rgba(43, 26, 16, .55); }
.pz-create .pz-ico { background: #B8862B; } /* deep golden ochre */
.pz-share .pz-ico { background: #66775A; } /* dark muted sage */
.pz-manage .pz-ico { background: #A9502E; } /* rich terracotta */
.pz-connect .pz-ico { background: #946238; } /* warm caramel brown */
.pz-preserve .pz-ico { background: #7A3E44; } /* deep dusty maroon */
@media (min-width: 480px) {
.pf-cover { height: 170px; }
}
/* tourist profile shortcuts use exactly the same look as the artist ones */
.pf-shortcuts { grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0; border: 0; }
.pf-shortcuts .pz { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pf-shortcuts .pz-ico .ic { width: 24px !important; height: 24px !important; margin: 0 !important; color: #FFFCF7 !important; }
.pf-shortcuts .pz b { font-size: .74rem; font-weight: 700; color: var(--primary); }
.pf-shortcuts .pz small { display: block; font-size: .58rem; line-height: 1.3; color: var(--muted); }
/* =========================================================
Creator · My Activity: summary tiles → needs attention → one list
========================================================= */
.ac-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.ac-tiles button { display: grid; justify-items: start; gap: 1px; padding: 10px 10px 9px; border: 1px solid var(--line); border-radius: 14px; background: #FFFCF7; text-align: left; transition: border-color .15s, background-color .15s; }
.ac-tiles .at-ico { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 4px; border-radius: 9px; background: var(--sand); color: var(--primary); }
.ac-tiles b { font-size: 1.15rem; line-height: 1.1; color: var(--ink); }
.ac-tiles small { font-size: .7rem; font-weight: 600; color: var(--ink-2); }
.ac-tiles em { font-style: normal; font-size: .6rem; color: var(--muted); }
.ac-tiles button[aria-selected="true"] { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 1px var(--primary) inset; }
.ac-tiles button[aria-selected="true"] .at-ico { background: var(--primary); color: #fff; }
.ac-attn { margin-top: 14px; padding: 12px 12px 6px; border-radius: 16px; background: #FBF3E6; border: 1px solid #EAD9BC; }
.ac-attn h2 { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: .9rem; font-weight: 700; color: var(--primary); }
.ac-attn h2 .a-n { margin-left: auto; }
.attn-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed #EAD9BC; }
.attn-row:first-of-type { border-top: 0; }
.attn-ico { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; }
.attn-ico.warn { background: var(--warn-soft); color: var(--warn); }
.attn-ico.bad { background: var(--bad-soft); color: var(--bad); }
.attn-row .grow { flex: 1; min-width: 0; display: grid; }
.attn-row b { font-size: .8rem; color: var(--ink); }
.attn-row small { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attn-row .btn { height: 30px; padding: 0 12px; font-size: .72rem; flex-shrink: 0; }
.ac-attn.calm { display: flex; align-items: center; gap: 8px; padding: 11px 12px; background: var(--ok-soft); border-color: transparent; color: var(--ok); font-size: .8rem; }
.ac-list { padding: 4px 18px 28px; }
.ac-list-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
.ac-list-head h2 { font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.ac-list-head .see-all { display: inline-flex; align-items: center; gap: 4px; }
.ac-filters { padding-top: 0; margin-bottom: 4px; }
.ac-card { margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.ac-top { display: flex; align-items: flex-start; gap: 10px; }
.ac-thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 12px; }
.ac-top .grow { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ac-kicker { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ac-top b { font-size: .88rem; line-height: 1.25; color: var(--ink); }
.ac-top small { font-size: .74rem; color: var(--ink-2); }
.ac-date { flex: 0 0 52px; display: grid; justify-items: center; padding: 5px 0; border-radius: 12px; background: var(--sand); color: var(--primary); line-height: 1.1; }
.ac-date b { font-size: 1.2rem; }
.ac-date small { font-size: .6rem; font-weight: 700; text-transform: uppercase; }
.ac-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; }
.ac-steps span { height: 4px; border-radius: 2px; background: var(--line); }
.ac-steps span.on { background: var(--accent); }
.ac-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: .74rem; color: var(--ink-2); }
.ac-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ac-meta b { font-size: .92rem; color: var(--ink); }
.ac-meta small { font-size: .66rem; color: var(--muted); }
.ac-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ac-actions .btn { height: 34px; padding: 0 14px; font-size: .76rem; border-radius: 999px; }
.ac-ib { margin-left: auto; width: 34px; height: 34px; background: var(--sand); color: var(--primary); }
.ac-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.ac-timeline li button { display: flex; gap: 10px; width: 100%; padding: 0 0 12px; border: 0; background: none; text-align: left; font-size: .8rem; color: var(--ink-2); position: relative; }
.ac-timeline li:not(:last-child) button::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; background: var(--line); }
.tl-dot { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; }
.tl-dot.gold { background: var(--accent); }
.tl-dot.dark { background: #3A2214; }
.ac-timeline .grow { display: grid; gap: 2px; padding-top: 4px; }
.ac-timeline small { font-size: .68rem; color: var(--muted); }
/* =========================================================
Traditional textile accents (T'nalak-style diamonds)
Used in three places only, so they frame content without clutter:
1. a woven band along the bottom of every profile cover
2. a fine woven line beside section titles
3. a hairline woven edge on top of the profile card
========================================================= */
:root {
/* small diamonds: gold, brown, gold… */
--tx-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6'%3E%3Cpath d='M0 3 3 0 6 3 3 6Z' fill='%23C8892C'/%3E%3Cpath d='M7 3 10 0 13 3 10 6Z' fill='%235A2810' fill-opacity='.55'/%3E%3C/svg%3E");
/* woven band: cream diamonds and dots on deep brown, gold edges */
--tx-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12'%3E%3Crect width='20' height='12' fill='%235A2810'/%3E%3Crect width='20' height='1.5' fill='%23C8892C'/%3E%3Crect y='10.5' width='20' height='1.5' fill='%23C8892C'/%3E%3Cpath d='M5 6 8 3 11 6 8 9Z' fill='none' stroke='%23F3E3C6' stroke-width='1'/%3E%3Ccircle cx='8' cy='6' r='.9' fill='%23C8892C'/%3E%3Ccircle cx='17' cy='6' r='1.1' fill='%23F3E3C6'/%3E%3C/svg%3E");
}
/* 1 · cover photos end in a woven band */
.pf-cover::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 12px; background: var(--tx-band) repeat-x left center / 20px 12px; }
.pf-cover.empty::before { opacity: .9; }
/* 2 · section titles carry a fine woven line to the right */
.sec-head h2, .h-sec h2, .ac-list-head h2 { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.sec-head h2::after, .h-sec h2::after, .ac-list-head h2::after { content: ""; flex: 1; min-width: 24px; height: 6px; margin-right: 10px; background: var(--tx-line) repeat-x left center / 14px 6px; opacity: .55; }
.menu-label { display: flex; align-items: center; gap: 10px; }
.menu-label::after { content: ""; flex: 1; height: 6px; background: var(--tx-line) repeat-x left center / 14px 6px; opacity: .45; }
/* 3 · profile card: hairline woven edge and calmer surface */
.cr-home .pf-card { overflow: visible; border-color: #EFE4D6; }
.cr-home .pf-card::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--tx-line) repeat-x left center / 14px 6px; opacity: .7; }
/* tourist profile: cleaner header now the shortcut cards are gone */
.me-page .me-name { margin-top: 14px; font-size: 1.25rem; }
.me-page .me-bio { padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: #FBF3E6; font-style: italic; }
.me-page .two-btns { margin-top: 14px; }
.pf-compose { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 12px; padding: 10px; border: 1px dashed #DCC7A8; border-radius: 16px; background: #FFFCF7; text-align: left; color: var(--muted); font-size: .82rem; }
.pf-compose > span:nth-child(2) { flex: 1; }
.pf-compose .avatar, .pf-compose .av-pic { width: 36px; height: 36px; font-size: .72rem; }
.pf-compose-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700; }
/* =========================================================
Bottom navigation: hover lift, press, and a "rise" when a tab opens
(same for tourist and creator navigation)
========================================================= */
.tabbar .tb-btn { gap: 2px; -webkit-tap-highlight-color: transparent; transition: color .2s ease; }
.tb-ico { position: relative; display: grid; place-items: center; width: 46px; height: 30px; border-radius: 999px; transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), background-color .25s ease; }
.tb-ico .ic { position: relative; z-index: 1; transition: transform .25s cubic-bezier(.2, .9, .3, 1.3); }
.tb-label { transition: transform .25s ease, letter-spacing .25s ease; }
/* active tab: icon sits on a soft pill, slightly raised, with the woven-gold underline */
.tabbar .tb-btn[aria-current="page"] .tb-ico { background: rgba(90, 40, 16, .1); transform: translateY(-3px); }
.tabbar .tb-btn[aria-current="page"] .tb-label { transform: translateY(-1px); }
.tabbar .tb-btn[aria-current="page"]::after { width: 18px; height: 3px; margin-left: -9px; bottom: 5px; background: var(--accent); border-radius: 3px; }
/* hover (mouse or trackpad): the icon lifts */
@media (hover: hover) {
.tabbar .tb-btn:hover { color: var(--primary); }
.tabbar .tb-btn:hover .tb-ico { transform: translateY(-4px); background: rgba(200, 137, 44, .14); }
.tabbar .tb-btn:hover .ic { transform: scale(1.08); }
}
/* press: a quick squeeze */
.tabbar .tb-btn:active .tb-ico { transform: translateY(-1px) scale(.88); }
/* keyboard focus */
.tabbar .tb-btn:focus-visible { outline: none; }
.tabbar .tb-btn:focus-visible .tb-ico { box-shadow: 0 0 0 2px var(--accent); }
@media (prefers-reduced-motion: no-preference) {
/* when you switch to a tab: the icon rises and bounces, a ripple spreads, the underline grows */
.tabbar .tb-btn.pop .tb-ico { animation: tbRise .55s cubic-bezier(.2, .9, .3, 1.25) both; }
.tabbar .tb-btn.pop .tb-ico .ic { animation: tbWiggle .55s ease .1s both; }
.tabbar .tb-btn.pop .tb-ico::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: rgba(200, 137, 44, .35); animation: tbRipple .6s ease-out both; }
.tabbar .tb-btn.pop .tb-label { animation: tbLabel .4s ease .05s both; }
.tabbar .tb-btn.pop::after { animation: tbLine .45s cubic-bezier(.2, .9, .3, 1.2) .1s both; }
.tabbar .tb-badge { animation: tbBadge 2.4s ease-in-out infinite; }
}
@keyframes tbRise { 0% { transform: translateY(6px) scale(.85); } 55% { transform: translateY(-7px) scale(1.06); } 100% { transform: translateY(-3px) scale(1); } }
@keyframes tbWiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 60% { transform: rotate(7deg); } }
@keyframes tbRipple { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@keyframes tbLabel { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: translateY(-1px); } }
@keyframes tbLine { from { width: 0; margin-left: 0; } to { width: 18px; margin-left: -9px; } }
@keyframes tbBadge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } 90% { transform: scale(.95); } }/* =========================================================
LOCARTA - Mobile app styles
Used by: mobile.html
========================================================= */
:root {
--bg: #FBF7F0;
--card: #FFFFFF;
--ink: #2A1A12;
--ink-2: #4A372B;
--muted: #8A7B6E;
--line: #EDE3D6;
--chip: #F3EBE0;
--maroon: var(--maroon);
--maroon-2: var(--maroon-2);
--gold: #C89547;
--gold-dark: #A0702B;
--green: #2F7D4F;
--green-bg: #E3F2E8;
--star: #E0A13A;
--cat-places: #8E2F23;
--cat-exp: #E07A2E;
--cat-art: #5B3A8C;
--cat-prod: #2F7D4F;
/* One type family for the whole app, so every screen matches the LOCARTA wordmark.
To use a different font, change it here (and in the Google Fonts link in mobile.html). */
--sans: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;
--display: var(--sans);
--r: 16px;
--r-lg: 20px;
--shadow: 0 6px 20px rgba(42, 26, 18, .08);
--tabbar: 64px;
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
font-family: var(--sans); color: var(--ink); background: #E9E1D5;
-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Icons */
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic-sm { width: 16px; height: 16px; }
.ic-xs { width: 13px; height: 13px; }
.ic-fill { fill: currentColor; stroke: none; }
/* ---------- App frame (phone width, centred on bigger screens) ---------- */
.app {
position: relative; width: 100%; max-width: 440px; height: 100dvh; margin: 0 auto;
display: flex; flex-direction: column; overflow: hidden; background: var(--bg);
}
@media (min-width: 480px) {
body { padding: 24px 0; }
.app { height: min(900px, calc(100dvh - 48px)); border-radius: 36px; box-shadow: 0 30px 80px -30px rgba(42, 26, 18, .45); }
}
.screen { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.pad { padding: calc(var(--safe-top) + 14px) 18px 24px; }
/* ---------- Top bars ---------- */
.topbar { display: flex; align-items: center; gap: 12px; padding: calc(var(--safe-top) + 14px) 18px 10px; }
.topbar h1 { font-size: 1.15rem; font-weight: 700; }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); }
.icon-btn:active { background: var(--chip); }
.dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #D9472B; border: 2px solid var(--bg); }
.brand { display: flex; align-items: center; gap: 8px; }
.brand img.mark { height: 30px; width: auto; }
.brand img.word { height: 17px; width: auto; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--maroon); color: #FFF8EE; font-size: .78rem; font-weight: 700; border: 0; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.4rem; }
/* ---------- Search ---------- */
.search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; background: none; font-size: .88rem; color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--gold); }
.search-row { display: flex; gap: 10px; align-items: center; }
.search-row .search { flex: 1; }
.filter-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 0; background: var(--maroon); color: #fff; }
/* ---------- Chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 18px 4px; margin: 0 -18px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips::after { content: ""; flex: 0 0 10px; }
.chip { flex-shrink: 0; padding: 8px 16px; border-radius: 999px; border: 0; background: var(--chip); color: var(--ink-2); font-size: .8rem; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--maroon); color: #fff; }
.tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--chip); font-size: .78rem; font-weight: 600; color: var(--ink-2); }
/* ---------- Text ---------- */
.hello { margin-top: 14px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.sub { margin-top: 4px; font-size: .85rem; line-height: 1.45; color: var(--muted); }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 12px; }
.sec-head h2 { font-size: 1.02rem; font-weight: 800; }
.see-all { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 4px 0; font-size: .78rem; font-weight: 700; color: var(--maroon); }
.meta { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--muted); }
.rating { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.rating .ic { color: var(--star); }
.rating small { font-weight: 500; color: var(--muted); }
.price { font-weight: 800; color: var(--maroon); }
/* ---------- Pictures with a warm placeholder if the photo can't load ---------- */
.pic { position: relative; overflow: hidden; background: linear-gradient(135deg, #E8D7BF, #C89547 60%, #8E5A2E); }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ---------- Home ---------- */
.hero-card { position: relative; display: block; height: 170px; margin-top: 16px; border-radius: var(--r-lg); overflow: hidden; color: #fff; box-shadow: var(--shadow); }
.hero-card .pic { position: absolute; inset: 0; }
.hero-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 10, 5, .65), transparent 60%); }
.hero-card .hc-text { position: absolute; left: 16px; bottom: 14px; z-index: 1; }
.hero-card h3 { font-size: 1.3rem; font-weight: 800; }
.hero-card .meta { color: #F3E9DC; }
.hero-card .go { position: absolute; right: 14px; bottom: 16px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--maroon); }
.dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.dots span.on { width: 16px; border-radius: 3px; background: var(--maroon); }
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: none; padding: 0; font-size: .74rem; font-weight: 600; color: var(--ink-2); }
.cat span.ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #fff; box-shadow: 0 6px 14px -6px currentColor; }
.cat span.ico .ic { color: #fff; width: 25px; height: 25px; }
.rail { display: flex; gap: 12px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 6px; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail::after { content: ""; flex: 0 0 6px; }
.mini { flex: 0 0 132px; scroll-snap-align: start; border: 0; padding: 0; background: var(--card); border-radius: var(--r); overflow: hidden; text-align: left; box-shadow: var(--shadow); }
.mini .pic { height: 92px; }
.mini .mb { display: block; padding: 9px 10px 10px; }
.mini strong { display: block; font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .meta { font-size: .7rem; margin: 2px 0 4px; }
.wide { flex: 0 0 220px; }
.wide .pic { height: 120px; }
/* ---------- List rows (Explore, Favorites) ---------- */
.list { display: grid; gap: 12px; margin-top: 14px; }
.row { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
.row .pic { flex: 0 0 84px; height: 84px; border-radius: 12px; }
.row-main { flex: 1; min-width: 0; display: grid; gap: 3px; text-align: left; border: 0; background: none; padding: 0; }
.row-main strong { font-size: .9rem; font-weight: 700; line-height: 1.25; }
.row-main .kind { font-size: .66rem; font-weight: 700; color: var(--gold-dark); letter-spacing: .02em; }
.heart { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); flex-shrink: 0; align-self: flex-start; }
.heart.on { color: var(--maroon); }
.heart.on .ic { fill: currentColor; }
/* ---------- Product grid ---------- */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.pcard { position: relative; border-radius: var(--r); background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.pcard > button.pc-open { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.pcard .pic { aspect-ratio: 1 / .82; }
.pcard .pb { padding: 9px 11px 12px; }
.pcard strong { display: block; font-size: .82rem; font-weight: 700; line-height: 1.25; padding-right: 26px; }
.pcard .meta { font-size: .7rem; margin: 3px 0 5px; }
.pcard .heart { position: absolute; right: 4px; bottom: 6px; }
/* ---------- Detail ---------- */
.d-hero { position: relative; height: 300px; flex-shrink: 0; }
.d-hero .pic { position: absolute; inset: 0; }
.d-hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 110px; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent); pointer-events: none; }
.float-btn { position: absolute; top: calc(var(--safe-top) + 12px); z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.float-btn.left { left: 16px; }
.float-btn.right { right: 16px; }
.float-btn.on { color: var(--maroon); }
.float-btn.on .ic { fill: currentColor; }
.d-body { position: relative; margin-top: -22px; padding: 22px 18px 28px; border-radius: 24px 24px 0 0; background: var(--bg); }
.d-body h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.d-body .meta { margin-top: 6px; font-size: .82rem; }
.d-line { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.d-line .price { font-size: 1rem; }
.d-line .price small { font-weight: 500; color: var(--muted); font-size: .78rem; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.facts { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; padding: 12px 0; border-block: 1px solid var(--line); }
.fact { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.fact .ic { color: var(--maroon); }
.desc { margin-top: 14px; font-size: .88rem; line-height: 1.6; color: var(--ink-2); }
.d-h2 { margin: 20px 0 10px; font-size: 1rem; font-weight: 800; display: flex; justify-content: space-between; align-items: center; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.checks li { display: flex; align-items: center; gap: 9px; font-size: .86rem; color: var(--ink-2); }
.checks .ic { color: var(--green); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gallery .pic { aspect-ratio: 1; border-radius: 12px; border: 0; padding: 0; }
.actions3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; font-size: .74rem; font-weight: 600; color: var(--ink-2); padding: 6px 0; }
.act.on { color: var(--maroon); }
.act.on .ic { fill: currentColor; }
.tabs { display: flex; margin-top: 16px; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; padding: 11px 0; border: 0; background: none; font-size: .84rem; font-weight: 600; color: var(--muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--maroon); border-bottom-color: var(--maroon); font-weight: 700; }
.tab-body { padding-top: 14px; }
.review { padding: 12px 0; border-bottom: 1px solid var(--line); }
.review:last-child { border-bottom: 0; }
.review-head { display: flex; align-items: center; gap: 10px; }
.review-head .avatar { width: 30px; height: 30px; font-size: .7rem; background: var(--gold); }
.review-head strong { font-size: .84rem; }
.review p { margin-top: 6px; font-size: .84rem; line-height: 1.5; color: var(--ink-2); }
.stars { display: inline-flex; gap: 1px; color: var(--star); }
/* ---------- Buttons ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; border-radius: 14px; border: 0; background: var(--maroon); color: #fff; font-weight: 700; font-size: .92rem; box-shadow: 0 8px 18px -10px var(--maroon); transition: background-color .15s, transform .1s; }
.btn:active { background: var(--maroon-2); transform: scale(.99); }
.btn-ghost { background: transparent; color: var(--maroon); border: 1.5px solid var(--maroon); box-shadow: none; }
.btn-ghost:active { background: var(--chip); }
.btn-sm { height: 34px; width: auto; padding: 0 16px; border-radius: 999px; font-size: .8rem; }
.mt { margin-top: 18px; }
.link { border: 0; background: none; padding: 0; color: var(--maroon); font-weight: 700; font-size: .84rem; }
/* ---------- Map ---------- */
.map-wrap { position: relative; flex: 1; min-height: 0; margin: 4px 14px 0; border-radius: var(--r-lg); overflow: hidden; background: #CFE4EC; }
.map-wrap > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-wrap .lbl { font-family: var(--sans); font-size: 11px; font-weight: 600; fill: #7D8F7A; }
.map-wrap .lbl-sea { fill: #6F98AA; font-style: italic; }
.pin { cursor: pointer; }
.pin path { fill: var(--maroon); stroke: #fff; stroke-width: 2; transition: transform .15s; }
.pin.on path { fill: var(--gold); }
.pin circle { fill: #fff; }
.me-dot { fill: #2D7FF9; stroke: #fff; stroke-width: 3; }
.me-halo { fill: rgba(45, 127, 249, .18); }
@media (prefers-reduced-motion: no-preference) {
.me-halo { animation: halo 2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
}
@keyframes halo { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.locate { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: var(--maroon); box-shadow: var(--shadow); }
.map-card { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r); background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); border: 0; text-align: left; }
.map-card .pic { flex: 0 0 72px; height: 72px; border-radius: 12px; }
.map-card .grow { flex: 1; min-width: 0; display: grid; gap: 3px; }
.map-card strong { font-size: .92rem; }
.map-card .dist { align-self: flex-end; font-size: .74rem; color: var(--muted); white-space: nowrap; }
/* ---------- Bookings ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; margin-top: 4px; border-bottom: 1px solid var(--line); }
.seg button { padding: 11px 0; border: 0; background: none; font-size: .86rem; font-weight: 600; color: var(--muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.seg button[aria-selected="true"] { color: var(--maroon); border-bottom-color: var(--maroon); font-weight: 700; }
.bk { display: flex; gap: 12px; padding: 12px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); border: 0; width: 100%; text-align: left; }
.bk .pic { flex: 0 0 82px; height: 82px; border-radius: 12px; }
.bk .grow { flex: 1; min-width: 0; display: grid; gap: 3px; align-content: start; }
.bk strong { font-size: .9rem; line-height: 1.25; }
.status { justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: .7rem; font-weight: 700; }
.status.past { background: var(--chip); color: var(--muted); }
.status.res { background: #FBEBD3; color: var(--gold-dark); }
/* ---------- Profile ---------- */
.prof { display: flex; gap: 16px; align-items: center; margin-top: 18px; }
.prof strong { display: block; font-size: 1.05rem; }
.prof small { display: block; color: var(--muted); font-size: .8rem; margin: 2px 0 8px; }
.menu { margin-top: 22px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.menu button, .menu a { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; border: 0; background: none; font-size: .9rem; font-weight: 600; color: var(--ink); text-align: left; }
.menu > * + * { border-top: 1px solid var(--line); }
.menu .ic:first-child { color: var(--maroon); }
.menu .chev { margin-left: auto; color: var(--muted); }
.menu .count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--chip); font-size: .74rem; font-weight: 700; text-align: center; }
.menu .count + .chev { margin-left: 6px; }
/* ---------- Notifications ---------- */
.notif { display: flex; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.notif .n-ico { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--maroon); color: #fff; }
.notif .n-ico.gold { background: var(--gold); }
.notif .n-ico.dark { background: #3A2A5C; }
.notif p { font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.notif p b { color: var(--ink); }
.notif small { display: block; margin-top: 4px; font-size: .72rem; color: var(--muted); }
.notif.unread p { font-weight: 600; }
/* ---------- Empty state ---------- */
.empty { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--muted); }
.empty .ic { width: 34px; height: 34px; color: var(--gold); }
.empty strong { color: var(--ink); font-size: 1rem; }
.empty p { font-size: .85rem; }
/* ---------- Tab bar ---------- */
.tabbar {
flex-shrink: 0; display: grid; grid-template-columns: repeat(5, 1fr);
height: calc(var(--tabbar) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
background: #fff; border-top: 1px solid var(--line);
}
.tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: none; font-size: .66rem; font-weight: 600; color: #9A8C80; }
.tabbar button[aria-current="page"] { color: var(--maroon); font-weight: 700; }
.tabbar button[aria-current="page"] .ic { fill: currentColor; fill-opacity: .14; stroke-width: 2.1; }
/* ---------- Splash and welcome ---------- */
.splash { position: relative; flex: 1; display: flex; flex-direction: column; color: #FFF8EE; overflow: hidden; background: #2B1A10; }
.splash .pic { position: absolute; inset: 0; background: linear-gradient(180deg, #4C6B8A, #2B1A10); }
.splash::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(35, 20, 12, .25) 0%, rgba(35, 20, 12, .35) 40%, rgba(35, 20, 12, .9) 82%); }
.splash-in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; padding: calc(var(--safe-top) + 64px) 26px calc(var(--safe-bottom) + 44px); text-align: center; }
.badge-mark { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 28px; background: #FFF8EE; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .6); }
.badge-mark img { height: 76px; width: auto; }
.splash .word { height: 40px; width: auto; margin-top: 22px; }
.splash .tagline { margin-top: 10px; font-size: .9rem; font-weight: 500; line-height: 1.45; color: #F0E3D2; }
.script { margin-top: auto; font-family: var(--display); font-weight: 700; font-size: 2.1rem; line-height: 1.05; transform: rotate(-6deg); color: #FFF8EE; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.script span { display: block; }
.script span:nth-child(2) { margin-left: 2.2rem; }
.script span:nth-child(3) { margin-left: 4rem; }
.splash-actions { width: 100%; display: grid; gap: 10px; margin-top: 40px; }
.splash .btn-ghost { color: #FFF8EE; border-color: rgba(255, 248, 238, .6); }
.splash .btn-ghost:active { background: rgba(255, 255, 255, .1); }
.weave {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: calc(16px + var(--safe-bottom));
background:
repeating-linear-gradient(45deg, transparent 0 7px, var(--gold) 7px 9px, transparent 9px 16px),
repeating-linear-gradient(-45deg, transparent 0 7px, var(--gold) 7px 9px, transparent 9px 16px),
var(--maroon-2);
}
.skip { position: absolute; top: calc(var(--safe-top) + 14px); right: 16px; z-index: 3; border: 0; background: rgba(255, 255, 255, .16); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: .78rem; font-weight: 700; backdrop-filter: blur(6px); }
/* ---------- Bottom sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(20, 10, 5, .45); }
.sheet {
position: relative; width: 100%; max-width: 440px; max-height: 88dvh; overflow-y: auto;
padding: 10px 20px calc(22px + var(--safe-bottom)); border-radius: 24px 24px 0 0; background: var(--bg);
}
.sheet::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: var(--line); }
.sheet h2 { font-size: 1.15rem; font-weight: 800; }
.sheet .sub { margin-bottom: 4px; }
.sheet-close { position: absolute; top: 12px; right: 12px; }
.field { display: grid; gap: 6px; margin-top: 14px; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.field input, .field select, .field textarea { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: .92rem; font-weight: 500; }
.field textarea { height: auto; padding: 12px 14px; resize: none; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 149, 71, .2); }
.pick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pick::-webkit-scrollbar { display: none; }
.pick button { flex-shrink: 0; display: grid; justify-items: center; gap: 2px; min-width: 58px; padding: 9px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-size: .72rem; font-weight: 600; color: var(--muted); }
.pick button b { font-size: 1.05rem; color: var(--ink); }
.pick button[aria-pressed="true"] { border-color: var(--maroon); background: var(--maroon); color: #F3D9CF; }
.pick button[aria-pressed="true"] b { color: #fff; }
.pick.times button { min-width: 0; padding: 10px 14px; font-size: .82rem; color: var(--ink-2); }
.pick.times button[aria-pressed="true"] { color: #fff; }
.stepper { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: .9rem; font-weight: 600; }
.stepper div { display: flex; align-items: center; gap: 14px; }
.stepper button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--chip); color: var(--maroon); }
.stepper button:disabled { opacity: .4; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); font-weight: 700; }
.total .price { font-size: 1.25rem; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .9rem; font-weight: 600; }
.opt small { display: block; font-weight: 500; color: var(--muted); font-size: .78rem; }
.switch { appearance: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--line); margin: 0; flex-shrink: 0; cursor: pointer; transition: background-color .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.switch:checked { background: var(--maroon); }
.switch:checked::after { transform: translateX(18px); }
.radio-row { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: .9rem; }
.radio-row input { accent-color: var(--maroon); width: 18px; height: 18px; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { padding: 14px 0; font-weight: 700; font-size: .88rem; cursor: pointer; }
.faq p { padding-bottom: 14px; font-size: .85rem; line-height: 1.5; color: var(--ink-2); }
.err { margin-top: 10px; font-size: .82rem; font-weight: 600; color: #B23A1F; }
.center-note { margin-top: 14px; text-align: center; font-size: .82rem; color: var(--muted); }
/* ---------- Toast ---------- */
.toast {
position: fixed; left: 50%; bottom: calc(var(--tabbar) + var(--safe-bottom) + 34px); z-index: 60; transform: translateX(-50%);
width: max-content; max-width: min(400px, calc(100% - 32px)); padding: 11px 16px; border-radius: 14px;
background: var(--ink); color: #fff; font-size: .84rem; font-weight: 600; box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
@media (prefers-reduced-motion: no-preference) {
.screen-enter { animation: enter .22s ease-out; }
.sheet { animation: up .24s cubic-bezier(.2, .8, .2, 1); }
.toast { animation: fade .2s ease-out; }
}
@keyframes enter { from { opacity: 0; transform: translateX(10px); } }
@keyframes up { from { transform: translateY(40px); opacity: .6; } }
@keyframes fade { from { opacity: 0; } }
/* =========================================================
Opening animation
========================================================= */
.launch {
position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
background: radial-gradient(circle at 50% 42%, #FFFDF7 0%, var(--bg) 55%, #F1E6D6 100%);
transition: opacity .5s ease, transform .5s ease;
}
.launch.out { opacity: 0; transform: scale(1.05); pointer-events: none; }
.launch-in { display: grid; justify-items: center; text-align: center; margin-top: -40px; }
.l-stage { position: relative; display: grid; place-items: center; width: 170px; height: 170px; }
.l-ring { position: absolute; inset: 18px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; }
.l-swing { display: block; transform-origin: 50% 8%; }
.l-mark { height: 118px; width: auto; }
.l-word { height: 36px; width: auto; margin-top: 14px; }
.l-bar { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 64px); width: 132px; height: 4px; margin-left: -66px; border-radius: 2px; background: var(--line); overflow: hidden; }
.l-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--maroon)); transform-origin: left; }
.l-weave { position: absolute; left: 0; right: 0; box-sizing: content-box; }
.l-weave-top { top: 0; padding-top: var(--safe-top); }
.l-weave-bottom { bottom: 0; padding-bottom: var(--safe-bottom); }
.l-tag { margin-top: 12px; font-family: var(--sans); font-style: normal; font-size: .9rem; font-weight: 600; line-height: 1.45; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
.l-mark { animation: l-drop .9s cubic-bezier(.3, 1.45, .5, 1) .15s both; }
.l-swing { animation: l-swing 1.3s ease-in-out 1s forwards; }
.l-ring { animation: l-ring 1.2s ease-out .8s both; }
.l-ring-2 { animation-delay: 1.15s; }
.l-word { animation: l-wipe .8s cubic-bezier(.6, 0, .2, 1) .85s both; }
.l-tag { animation: l-up .6s ease-out 1.45s both; }
.l-bar span { animation: l-load 2.3s cubic-bezier(.4, 0, .2, 1) .1s both; }
.l-weave { animation: l-grow .9s cubic-bezier(.6, 0, .2, 1) 1.1s both; }
}
@keyframes l-drop { 0% { opacity: 0; transform: translateY(-80px) scale(.7); } 50% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes l-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-1.5deg); } }
@keyframes l-ring { 0% { opacity: .9; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes l-wipe { from { clip-path: inset(0 100% 0 0); opacity: .3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes l-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes l-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes l-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* =========================================================
Log in / sign up roles
========================================================= */
.roles { border: 0; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.roles legend { padding: 0; margin-bottom: 6px; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.role { position: relative; cursor: pointer; }
.role input { position: absolute; opacity: 0; }
.role span { display: grid; gap: 2px; height: 100%; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; }
.role span .ic { color: var(--maroon); margin-bottom: 4px; }
.role strong { font-size: .84rem; }
.role small { font-size: .72rem; color: var(--muted); }
.role input:checked + span { border-color: var(--maroon); background: #FBF1EC; }
.role input:focus-visible + span { outline: 2.5px solid var(--gold); outline-offset: 2px; }
/* =========================================================
Artist studio
========================================================= */
.studio-hero { position: relative; margin-top: 16px; border-radius: var(--r-lg); overflow: hidden; color: #FFF8EE; background: #2B1A10; box-shadow: var(--shadow); }
.studio-hero .pic { position: absolute; inset: 0; }
.studio-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(35, 20, 12, .95) 25%, rgba(56, 32, 19, .78) 60%, rgba(56, 32, 19, .4)); }
.sh-in { position: relative; z-index: 1; padding: 18px; }
.sh-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(232, 202, 148, .5); background: rgba(200, 149, 71, .25); color: #E8CA94; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.studio-hero h2 { margin-top: 10px; font-family: var(--display); font-size: 1.45rem; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; }
.studio-hero p { margin-top: 6px; font-size: .82rem; line-height: 1.45; color: #EADFD2; }
.sh-actions { display: flex; gap: 8px; margin-top: 14px; }
.btn-gold { background: linear-gradient(135deg, #C89547, #BA5231); box-shadow: 0 8px 18px -10px #BA5231; }
.btn-glass { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .35); box-shadow: none; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.stat { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); text-align: left; }
.stat span { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stat b { font-family: var(--display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.stat small { font-size: .74rem; font-weight: 600; color: var(--muted); }
.stat.wide2 { grid-column: 1 / -1; }
.t-terra { color: #BA5231 !important; }
.t-green { color: var(--green) !important; }
.box { padding: 14px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 150px; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.bar i { display: block; width: 100%; max-width: 30px; border-radius: 7px 7px 3px 3px; background: #E8CA94; }
.bar.now i { background: var(--maroon); }
.bar .bv { font-size: .6rem; font-weight: 700; color: var(--muted); }
.bar small { font-size: .68rem; font-weight: 600; color: var(--muted); }
.thread { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); text-align: left; }
.thread .avatar { flex: 0 0 40px; height: 40px; background: var(--gold); }
.thread .grow { flex: 1; min-width: 0; display: grid; gap: 1px; }
.thread strong { display: flex; align-items: center; gap: 6px; font-size: .88rem; }
.thread small { font-size: .7rem; font-weight: 700; color: var(--gold-dark); }
.thread .snip { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread.unread .snip { color: var(--ink); font-weight: 600; }
.udot { width: 8px; height: 8px; border-radius: 50%; background: #D9472B; }
.status.info { background: #E3ECF7; color: #2F5D8F; }
.ws { padding: 14px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); }
.ws-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ws-top strong { font-size: .95rem; }
.seatbar { height: 8px; margin: 10px 0 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.seatbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--maroon)); }
.ws-foot { display: flex; justify-content: space-between; align-items: center; font-size: .76rem; color: var(--muted); }
.chat-role { margin-top: -8px; padding: 0 18px 8px 70px; font-size: .74rem; color: var(--muted); }
.msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 12px; }
.msg { max-width: 78%; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: var(--shadow); font-size: .86rem; line-height: 1.45; }
.msg.me { align-self: flex-end; background: var(--maroon); color: #fff; border-radius: 16px 16px 4px 16px; }
.msg small { display: block; margin-top: 3px; font-size: .66rem; opacity: .65; }
.reply { display: flex; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--line); background: var(--bg); }
.reply input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .9rem; }
.reply input:focus { outline: none; border-color: var(--gold); }
.upload { position: relative; display: grid; place-items: center; height: 150px; margin-top: 14px; border-radius: 14px; border: 1.5px dashed #D9C6AD; background: #fff; overflow: hidden; color: var(--muted); font-size: .82rem; font-weight: 600; cursor: pointer; }
.upload span { display: grid; justify-items: center; gap: 6px; }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.icon-btn.add { background: var(--maroon); color: #fff; width: 36px; height: 36px; }
.tabbar button { position: relative; }
.tb-badge { position: absolute; top: 7px; left: calc(50% + 5px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #D9472B; color: #fff; font-size: .6rem; font-weight: 800; line-height: 16px; text-align: center; }
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.statrow div { padding: 10px 6px; border-radius: 12px; background: #fff; border: 1px solid var(--line); text-align: center; }
.statrow b { display: block; font-size: 1.1rem; }
.statrow small { font-size: .68rem; color: var(--muted); }
.role-chip { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: var(--chip); color: var(--maroon); font-size: .68rem; font-weight: 800; }
/* =========================================================
Intro slides (after the opening animation)
========================================================= */
.onb { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: #FAF6EF; overflow: hidden; isolation: isolate; }
.onb-deco { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: 28%; opacity: .85; pointer-events: none; }
.onb-track { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.onb-track::-webkit-scrollbar { display: none; }
.onb-slide { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start; scroll-snap-stop: always; background: transparent; }
.onb-media {
position: relative; flex: 1 1 52%; min-height: 220px; overflow: hidden;
border-radius: 0 0 46% 46% / 0 0 44px 44px;
box-shadow: 0 10px 30px -18px rgba(42, 26, 18, .45);
}
.onb-media .pic { position: absolute; inset: 0; }
.onb-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35, 20, 12, .25) 0%, transparent 28%); }
.onb-text { position: relative; flex: 0 0 auto; padding: 0 26px 4px; text-align: center; }
.onb-badge-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; margin: -42px 0 18px; }
.onb-badge-row::before, .onb-badge-row::after { content: ""; flex: 0 1 78px; height: 1.5px; margin-top: 42px; background: linear-gradient(90deg, transparent, var(--gold)); }
.onb-badge-row::after { background: linear-gradient(90deg, var(--gold), transparent); }
.onb-badge {
position: relative; z-index: 1; display: grid; place-items: center; width: 84px; height: 84px; margin: 0; flex-shrink: 0;
border-radius: 26px; border: 0; background: #FFFCF6; color: var(--maroon);
box-shadow: 0 14px 30px -14px rgba(42, 26, 18, .45), 0 0 0 1px rgba(200, 149, 71, .15);
}
.onb-badge img { height: 54px; width: auto; }
.onb-badge .ic { width: 34px; height: 34px; stroke-width: 1.7; }
.onb-kicker { font-family: var(--sans); font-style: normal; font-size: .76rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #8A5A2B; }
.onb-text h2 { margin-top: 10px; font-size: clamp(1.45rem, 6.4vw, 1.8rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #4A2414; text-wrap: balance; }
.onb-text h2 span { display: block; }
.onb-text h2 .accent {
background: linear-gradient(90deg, #8A4A1C 0%, #B9772E 55%, #C8923F 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.onb-copy { margin: 14px auto 0; max-width: 34ch; font-size: .95rem; line-height: 1.6; color: #5A4A3F; }
.onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px calc(24px + var(--safe-bottom)); }
.onb-next {
width: auto; height: 54px; min-width: 168px; padding: 0 28px; border-radius: 999px;
background: var(--brown-700); font-size: 1rem; gap: 12px;
box-shadow: 0 12px 24px -12px rgba(107, 45, 27, .7);
}
.onb-next .ic { width: 20px; height: 20px; }
.onb .skip {
top: calc(var(--safe-top) + 16px); right: 16px; padding: 9px 20px;
background: rgba(35, 28, 26, .82); color: #fff; font-size: .85rem; backdrop-filter: blur(6px);
}
.guest-link { border: 0; background: none; padding: 6px; margin-top: 2px; color: #F0E3D2; font-size: .85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-height: 740px) {
.onb-badge { width: 70px; height: 70px; border-radius: 22px; }
.onb-badge img { height: 44px; }
.onb-badge-row { margin: -35px 0 12px; }
.onb-badge-row::before, .onb-badge-row::after { margin-top: 35px; }
.onb-copy { margin-top: 10px; font-size: .88rem; }
}
/* First slide entrance: plays once when the opening animation ends */
@media (prefers-reduced-motion: no-preference) {
.onb-slide .onb-text > * { opacity: 0; }
.launched .onb-slide.on .onb-text > * { animation: onb-in .55s cubic-bezier(.2, .8, .2, 1) both; }
.launched .onb-slide.on .onb-text > :nth-child(2) { animation-delay: .08s; }
.launched .onb-slide.on .onb-text > :nth-child(3) { animation-delay: .16s; }
.launched .onb-slide.on .onb-text > :nth-child(4) { animation-delay: .24s; }
.launched .onb-slide.on .onb-badge { animation-name: onb-pop; }
}
@keyframes onb-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes onb-pop { 0% { opacity: 0; transform: scale(.5) rotate(-12deg); } 70% { opacity: 1; transform: scale(1.08) rotate(3deg); } 100% { opacity: 1; transform: none; } }
/* =========================================================
Log in / sign up screen (illustrated)
========================================================= */
.splash-art { position: relative; color: var(--ink); isolation: isolate; }
.splash-art::before { display: none; }
.splash-art .splash-in {
flex: 1 1 auto; min-height: 0; justify-content: center; overflow-y: auto; scrollbar-width: none;
position: relative; z-index: 2;
}
.splash-art .splash-in::-webkit-scrollbar { display: none; }
.splash-mark { width: auto; }
.splash-art .word { height: 46px; width: auto; }
.sp-land { flex: 0 0 auto; display: block; width: 100%; height: auto; min-height: 0; }
.splash-art .splash-actions { width: 100%; max-width: 330px; gap: 12px; }
.sp-btn { height: 54px; border-radius: 999px; gap: 12px; font-size: 1rem; }
.sp-btn span { min-width: 72px; text-align: center; }
.sp-btn .ic { width: 21px; height: 21px; }
.splash-art .btn:not(.btn-ghost) { background: var(--brown-700); box-shadow: 0 8px 18px -12px rgba(107, 45, 27, .6); }
.splash-art .btn-ghost { background: transparent; color: #4A2414; border: 1.5px solid var(--brown-700); }
.splash-art .btn-ghost:active { background: rgba(107, 45, 27, .06); }
.splash-art .guest-link { margin-top: 10px; color: var(--ink-2); font-weight: 500; text-decoration-color: var(--ink-2); }
.textile { position: relative; z-index: 2; box-sizing: content-box; }
.textile-top { padding-top: var(--safe-top); }
.textile-bottom { padding-bottom: var(--safe-bottom); }
/* Log in / sign up: centred card in the middle of the screen */
.sheet-wrap.center { align-items: center; padding: 16px; }
.sheet-wrap.center .sheet { max-width: 408px; max-height: calc(100dvh - 32px); padding: 22px 20px 20px; border-radius: 24px; box-shadow: 0 30px 60px -20px rgba(20, 10, 5, .5); }
.sheet-wrap.center .sheet::before { display: none; }
.auth-head { display: grid; justify-items: center; gap: 2px; text-align: center; }
.auth-head img { width: auto; margin-bottom: 8px; }
.auth-head .sub { margin-top: 2px; }
.sheet-wrap.center .roles legend { width: 100%; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
.sheet-wrap.center .sheet { animation: pop-in .22s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
/* =========================================================
Design refresh
Woven textile band, tagline without dots, intro slide
transition, log in / sign up screen, log in and log out cards
========================================================= */
/* ---------- 0. Woven textile band ----------
One 32×28 tile in the same browns as the intro slides: caramel ground,
deep brown centre band, light gold rules, cream diamonds, gold half-diamonds. */
:root {
--weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='28' viewBox='0 0 32 28'%3E%3Crect width='32' height='28' fill='%23B9772E'/%3E%3Crect y='7' width='32' height='14' fill='%238A4A1C'/%3E%3Crect y='2' width='32' height='2' fill='%23F0D2A0'/%3E%3Crect y='24' width='32' height='2' fill='%23F0D2A0'/%3E%3Crect y='5' width='32' height='1' fill='%23FAF0DD' opacity='.7'/%3E%3Crect y='22' width='32' height='1' fill='%23FAF0DD' opacity='.7'/%3E%3Cpath d='M16 7.5 22.5 14 16 20.5 9.5 14Z' fill='none' stroke='%23F4D59A' stroke-width='1.6'/%3E%3Cpath d='M16 11 19 14 16 17 13 14Z' fill='%23FFF8EC'/%3E%3Cpath d='M0 9.5 4.5 14 0 18.5ZM32 9.5 27.5 14 32 18.5Z' fill='%23C8923F'/%3E%3C/svg%3E");
--weave-bg: #B9772E;
--weave-h: 34px;
}
/* Opening animation bands use the same weave */
.l-weave {
height: var(--weave-h); border-block: 0;
background: var(--weave) center / auto 100% repeat-x;
background-origin: content-box; background-clip: content-box; background-color: var(--weave-bg);
}
/* ---------- 1. Tagline lockup: two lines, no dots ----------
—— Local Culture, Arts & ——
Artisan Tourism Access
A gold rule on each side, centred on the two lines. */
.sp-tag, .l-tag {
display: grid; justify-content: center; align-items: center;
grid-template-columns: minmax(18px, 44px) auto minmax(18px, 44px);
grid-template-areas: "l t r" "l b r";
column-gap: 14px; row-gap: 1px;
width: 100%; text-align: center; white-space: normal;
}
.sp-tag::before, .sp-tag::after, .l-tag::before, .l-tag::after {
content: ""; height: 1.5px; background: var(--gold); align-self: center;
}
.sp-tag::before, .l-tag::before { grid-area: l; }
.sp-tag::after, .l-tag::after { grid-area: r; }
.sp-tag span, .l-tag span {
display: block; font-family: var(--sans); font-style: normal; font-size: 1rem; font-weight: 400;
letter-spacing: 0; line-height: 1.4; color: var(--ink-2);
}
.sp-tag span:first-child, .l-tag span:first-child { grid-area: t; }
.sp-tag span:last-child, .l-tag span:last-child { grid-area: b; }
.sp-tag { margin-top: 18px; }
.l-tag { margin-top: 16px; }
/* ---------- 2. Intro slides ---------- */
/* Progress bar replaces the dots: each segment fills as you swipe */
.onb-progress { display: flex; gap: 2px; }
.onb-progress button {
display: grid; align-items: center; width: 30px; height: 28px; padding: 0 2px;
border: 0; background: none; transition: width .35s cubic-bezier(.2, .8, .2, 1);
}
.onb-progress button[aria-selected="true"] { width: 46px; }
.onb-progress i {
position: relative; display: block; height: 4px; border-radius: 2px;
background: #E3D5C1; overflow: hidden;
}
.onb-progress i::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
background: #8A4A1C; transform: scaleX(var(--f, 0)); transform-origin: left;
}
.onb-next { transition: background-color .3s ease, min-width .35s cubic-bezier(.2, .8, .2, 1), transform .1s; }
.onb-next span { display: inline-block; }
.onb-next.last { min-width: 188px; background: var(--maroon); }
/* Photo is wider than its frame so it can drift behind the swipe */
.onb-media .pic img { left: -25%; right: auto; width: 150%; max-width: none; }
@media (prefers-reduced-motion: no-preference) {
/* The slide follows your finger. --p is the slide's offset (-1..1), --a is |p|.
Photo moves slower than the slide (depth), each line of text trails a little
more than the one above it, the text fades, and the badge turns as it leaves. */
.onb-media {
transform: scale(calc(1 - var(--a, 0) * .06)); transform-origin: 50% 0;
}
.onb-media .pic img {
transform: translate3d(calc(var(--p, 0) * -16%), 0, 0) scale(calc(1 + var(--a, 0) * .08));
will-change: transform;
}
.onb-text {
opacity: calc(1 - var(--a, 0) * 1.4);
will-change: opacity;
}
.onb-text > * { translate: calc(var(--p, 0) * 44px) 0; }
.onb-text > :nth-child(2) { translate: calc(var(--p, 0) * 70px) 0; }
.onb-text > :nth-child(3) { translate: calc(var(--p, 0) * 98px) 0; }
.onb-text > :nth-child(4) { translate: calc(var(--p, 0) * 128px) 0; }
.onb-badge { rotate: calc(var(--p, 0) * 36deg); scale: calc(1 - var(--a, 0) * .3); }
/* The first slide keeps its entrance; after the first swipe the swipe itself is the transition */
.launched .onb-slide.on .onb-media img { animation: none; }
.launched .onb-slide.on .onb-media .pic { animation: onb-reveal 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.onb.moved .onb-slide .onb-text > *,
.onb.moved .onb-slide .onb-badge,
.onb.moved .onb-slide .onb-media .pic { opacity: 1; animation: none; }
.onb-next span { animation: label-in .3s ease-out; }
}
@keyframes label-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes onb-reveal { from { opacity: 0; transform: scale(1.06); } }
/* ---------- 3. Log in / sign up screen ---------- */
.splash-art { background: #FAF3E6; }
.splash-art > .textile {
flex-shrink: 0; height: var(--weave-h); border-block: 0;
background: var(--weave) center / auto 100% repeat-x;
background-origin: content-box; background-clip: content-box; background-color: var(--weave-bg);
}
.splash-art > .textile-top { box-shadow: 0 2px 8px -3px rgba(138, 74, 28, .35); }
.splash-art > .textile-bottom { box-shadow: 0 -2px 8px -3px rgba(138, 74, 28, .35); }
.splash.splash-art .splash-in { padding: 30px 26px 10px; }
.splash-art .splash-mark { height: 104px; }
.splash-art .word { height: 54px; margin-top: 10px; }
.splash-art .splash-actions { max-width: 252px; margin-top: 38px; gap: 14px; }
.splash-art .sp-btn { height: 50px; font-size: 1.05rem; font-weight: 600; }
.splash-art .btn-ghost { color: #4A2414; }
.splash-art .guest-link { margin-top: 14px; font-size: .95rem; font-weight: 400; color: #4A2414; text-decoration-color: #4A2414; text-underline-offset: 4px; }
.splash-art .sp-land { margin-top: 0; }
@media (max-height: 760px) {
.splash.splash-art .splash-in { padding-top: 16px; }
.splash-art .splash-mark { height: 82px; }
.splash-art .word { height: 42px; }
.splash-art .splash-actions { margin-top: 22px; }
}
@media (max-height: 640px) {
.splash-art .sp-land { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
/* The two bands weave open from the centre when the screen appears */
.splash-art > .textile { animation: weave-in .9s cubic-bezier(.6, 0, .2, 1) both; }
.splash-art > .textile-bottom { animation-delay: .12s; }
}
@keyframes weave-in { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
/* ---------- 4. Log in, sign up and log out cards ---------- */
/* Woven band along the top and bottom edge of the card */
.auth-band {
height: 16px; margin: -22px -20px 18px;
background: var(--weave) center / auto 100% repeat-x; background-color: var(--weave-bg);
}
.auth-band.bottom { margin: 22px -20px -20px; }
.sheet-wrap.center .sheet { overflow-x: hidden; }
.sheet-wrap.center .sheet-close { top: 24px; right: 10px; }
.auth-head h2 { font-family: var(--display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; }
.auth-head img { height: 50px; }
.auth-head .avatar-lg { margin: 4px 0 10px; }
.auth-head .sub { max-width: 30ch; }
/* Chosen role gets a check mark */
.role span { position: relative; transition: border-color .15s, background-color .15s; }
.role input:checked + span::after {
content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%;
background: var(--maroon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
/* Show / hide password */
.pw { position: relative; display: block; }
.pw input { display: block; width: 100%; padding-right: 52px; }
.pw-eye {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
display: grid; place-items: center; width: 40px; height: 40px;
border: 0; border-radius: 10px; background: none; color: var(--muted);
}
.pw-eye[aria-pressed="true"] { color: var(--maroon); }
/* Log out confirmation */
.logout-actions { display: grid; gap: 10px; margin-top: 22px; }
.menu button[data-act="logout"],
.menu button[data-act="logout"] .ic:first-child { color: #A3321C; }
/* =========================================================
Fixes
========================================================= */
/* Every intro slide has the same photo height, so the badge and title
stay on the same line while you swipe instead of jumping up and down */
.onb-media { flex: 0 0 50%; min-height: 0; }
.onb-text { flex: 1 1 auto; min-height: 0; }
@media (max-height: 740px) { .onb-media { flex-basis: 46%; } }
/* "Get Started" stays on one line on small phones */
.onb-next { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 370px) {
.onb-next { min-width: 0; padding: 0 22px; }
.onb-next.last { min-width: 0; }
}
/* Password hint sits under the box instead of on its own line above it */
.field:has(.pw) > small.meta { order: 3; margin-top: -2px; font-weight: 500; }
/* The woven bands stay at the top and bottom edge of the log in card,
even when the sign up form is long enough to scroll */
.auth-band.top { position: sticky; top: -22px; z-index: 3; }
.auth-band.bottom { position: sticky; bottom: -20px; z-index: 3; }
/* =========================================================
Log in / sign up page (full screen, opened from Sign Up / Log In)
========================================================= */
.auth-page { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: #FAF3E6; color: var(--ink); isolation: isolate; }
.auth-page > .textile {
position: relative; z-index: 3; flex-shrink: 0; height: var(--weave-h); border-block: 0;
background: var(--weave) center / auto 100% repeat-x;
background-origin: content-box; background-clip: content-box; background-color: var(--weave-bg);
}
.auth-page > .textile-top { box-shadow: 0 2px 8px -3px rgba(138, 74, 28, .35); }
.auth-page > .textile-bottom { box-shadow: 0 -2px 8px -3px rgba(138, 74, 28, .35); }
.auth-page > .sp-land {
position: absolute; left: 0; right: 0; z-index: 0; width: 100%; height: auto;
bottom: calc(var(--weave-h) + var(--safe-bottom)); opacity: .7; pointer-events: none;
}
.auth-scroll {
position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding: 20px 24px 30px; scrollbar-width: none;
}
.auth-scroll::-webkit-scrollbar { display: none; }
.auth-x { position: absolute; top: 12px; right: 10px; color: var(--ink-2); }
/* Logo and greeting */
.auth-brand { display: grid; justify-items: center; text-align: center; }
.auth-mark { height: 54px; width: auto; }
.auth-word { height: 34px; width: auto; margin-top: 4px; }
.auth-brand p { margin-top: 10px; max-width: 30ch; font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
/* Log in / Sign up tabs */
.auth-tabs { margin-top: 14px; border-bottom-color: #E6D8C5; }
.auth-tabs button { font-size: 1rem; color: #9A8676; }
.auth-tabs button[aria-selected="true"] { color: #4A2414; border-bottom-color: var(--brown-700); font-weight: 600; }
/* Role cards */
.auth-roles { border: 0; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-roles legend { padding: 0; margin-bottom: 10px; font-size: .92rem; font-weight: 600; color: #4A2414; }
.arole { position: relative; display: block; cursor: pointer; }
.arole input { position: absolute; opacity: 0; pointer-events: none; }
.arole-card {
position: relative; display: grid; align-content: start; gap: 3px; height: 100%;
padding: 14px 14px 16px; border-radius: 14px; border: 1.5px solid #E6D8C5; background: #FFFCF6;
transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.arole-ic { width: 34px; height: 34px; margin-bottom: 8px; color: #A0612B; stroke-width: 1.5; }
.arole strong { font-size: .98rem; font-weight: 600; line-height: 1.2; color: #4A2414; }
.arole small { font-size: .8rem; line-height: 1.35; color: var(--muted); }
.arole-dot { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #B9A58E; background: #fff; }
.arole input:checked + .arole-card { border-color: #8A4A1C; background: #F6E9DA; box-shadow: 0 8px 18px -12px rgba(138, 74, 28, .6); }
.arole input:checked + .arole-card .arole-dot {
border-color: var(--brown-700);
background: var(--brown-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.arole input:focus-visible + .arole-card { outline: 2.5px solid var(--gold); outline-offset: 2px; }
/* Fields with an icon inside the box */
.af { display: grid; gap: 6px; margin-top: 14px; }
.af-label { font-size: .9rem; font-weight: 600; color: #4A2414; }
.af-box { position: relative; display: block; }
.af-ic { position: absolute; left: 16px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: #6B4A33; pointer-events: none; }
.af-box input {
display: block; width: 100%; height: 48px; padding: 0 16px 0 48px;
border-radius: 12px; border: 1px solid #E6D8C5; background: #FFFCF6; font-size: .92rem; color: var(--ink);
}
.af-box input::placeholder { color: #B3A393; }
.af-box input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 149, 71, .2); }
.af-box input[aria-invalid="true"] { border-color: #B23A1F; }
.af-box:has(.pw-eye) input { padding-right: 52px; }
.af-box .pw-eye { right: 5px; color: #4A2414; }
/* Submit and links */
.auth-err { text-align: center; }
.auth-submit {
width: 100%; max-width: 280px; height: 50px; margin: 22px auto 0; gap: 10px;
border-radius: 999px; background: var(--brown-700); font-size: 1rem; font-weight: 600;
box-shadow: 0 10px 22px -12px rgba(107, 45, 27, .7);
}
.auth-switch { margin-top: 14px; text-align: center; font-size: .86rem; color: var(--ink-2); }
.auth-switch .link, .auth-demo .link { font-size: inherit; color: var(--brown-700); text-decoration: underline; text-underline-offset: 3px; }
.auth-demo { margin-top: 6px; text-align: center; font-size: .8rem; color: var(--muted); }
@media (max-width: 360px) {
.auth-scroll { padding-inline: 18px; }
.auth-roles { gap: 8px; }
.arole-card { padding: 12px 10px 14px; }
}
@media (prefers-reduced-motion: no-preference) {
.auth-scroll { animation: auth-in .35s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes auth-in { from { opacity: 0; transform: translateY(14px); } }
/* =========================================================
Tourist home (redesign)
========================================================= */
:root {
--bg: #FAF3E6;
--brown: #5A2614;
--rust: #A9472A;
--ochre: #D39432;
--olive: #7A6542;
}
.home2 { padding-top: calc(var(--safe-top) + 12px); }
.h-top { display: flex; align-items: center; gap: 4px; }
.h-top .brand img.mark { height: 38px; }
.h-top .brand img.word { height: 22px; }
.h-bell { margin-left: auto; color: var(--brown); }
.h-bell .dot { top: 8px; right: 9px; background: #E0482B; }
.h-avatar { display: flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--brown); }
.h-avatar .avatar { width: 40px; height: 40px; background: var(--rust); font-size: .85rem; }
.h-hello { margin-top: 16px; font-size: 1.85rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--brown); }
.h-sub { margin-top: 6px; max-width: 34ch; font-size: .95rem; line-height: 1.45; color: #7A5A48; }
.h-search {
margin-top: 16px; height: 52px; padding: 0 6px 0 18px; border-radius: 999px;
background: #FFFDF9; border: 1px solid #EADCC8; box-shadow: 0 6px 16px -12px rgba(90, 38, 20, .35); color: #6B4A33;
}
.h-search input { font-size: .92rem; }
.h-filter { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--brown); }
/* Hero carousel */
.hero-track {
display: flex; gap: 18px; margin: 16px -18px -14px; padding: 0 18px 18px;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero2 {
position: relative; flex: 0 0 100%; height: 190px; padding: 0; border: 0; border-radius: 20px;
overflow: hidden; text-align: left; color: #fff; scroll-snap-align: start;
box-shadow: 0 14px 28px -18px rgba(90, 38, 20, .6);
}
.hero2 .pic { position: absolute; inset: 0; }
.hero2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(40, 18, 8, .75) 0%, rgba(40, 18, 8, .25) 45%, transparent 70%); }
.h2-text { position: absolute; left: 18px; right: 72px; bottom: 16px; z-index: 1; display: grid; gap: 2px; }
.h2-text small { font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #F3E3CC; }
.h2-text strong { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.h2-loc { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: .88rem; color: #F6EBDD; }
.h2-go {
position: absolute; right: 14px; bottom: 16px; z-index: 1; display: grid; place-items: center;
width: 44px; height: 44px; border-radius: 50%; background: #FFFBF4; color: var(--brown);
box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4);
}
.h-dots { margin-top: 10px; }
.h-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: #DCCDB8; transition: width .25s, background-color .25s; }
.h-dots button.on { width: 22px; background: var(--rust); }
/* Category tiles */
.cats2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.cat2 { display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; }
.cat2-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; color: #FFF8EE; box-shadow: 0 10px 18px -10px rgba(90, 38, 20, .55); }
.cat2-ico .ic { width: 26px; height: 26px; stroke-width: 1.7; }
.c-rust { background: var(--rust); }
.c-gold { background: var(--ochre); }
.c-olive { background: var(--olive); }
.cat2-lbl { position: relative; padding-bottom: 8px; font-size: .8rem; font-weight: 500; color: var(--brown); }
.cat2-lbl::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 18px; height: 2px; margin-left: -9px; border-radius: 1px; background: var(--ochre); }
/* Section headings and cards */
.h-sec h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; color: var(--brown); }
.h-sec .see-all { font-size: .85rem; font-weight: 500; color: #9A5B23; }
.fcard {
position: relative; flex: 0 0 152px; display: block; padding: 0; text-align: left; scroll-snap-align: start;
border: 1px solid #F0E4D3; border-radius: 16px; overflow: hidden; background: #FFFDF9;
box-shadow: 0 8px 20px -14px rgba(90, 38, 20, .45);
}
.f-media { position: relative; display: block; height: 98px; }
.f-media .pic { position: absolute; inset: 0; }
.f-chip {
position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 999px; background: rgba(60, 30, 14, .62); color: #FFF6EA;
font-size: .66rem; font-weight: 500; backdrop-filter: blur(4px);
}
.f-body { position: relative; display: grid; gap: 3px; padding: 9px 38px 11px 10px; }
.f-body strong {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
font-size: .84rem; font-weight: 600; line-height: 1.25; color: var(--brown);
}
.f-body .meta { font-size: .72rem; }
.f-body .price { font-size: .86rem; }
.f-go { position: absolute; right: 9px; bottom: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #F4EADD; color: var(--brown); }
.f-media .ac-chip { top: auto; bottom: 8px; left: 8px; padding: 3px 8px; font-size: .66rem; }
/* Tab bar: rounded white bar with a woven band underneath */
.tabbar {
position: relative; z-index: 2; height: var(--tabbar); padding-bottom: 0;
background: #FFFDF9; border-top: 0; border-radius: 22px 22px 0 0;
box-shadow: 0 -8px 24px -14px rgba(90, 38, 20, .35);
}
.tabbar button { font-size: .7rem; font-weight: 500; color: #9A8676; }
.tabbar button[aria-current="page"] { color: #8A3B1E; font-weight: 600; }
.tabbar button[aria-current="page"] .ic { fill-opacity: .2; }
.tabbar button[aria-current="page"]::after {
content: ""; position: absolute; left: 50%; bottom: 6px; width: 22px; height: 2.5px; margin-left: -11px;
border-radius: 2px; background: #8A3B1E;
}
.tab-weave {
flex-shrink: 0; height: 18px; box-sizing: content-box; padding-bottom: var(--safe-bottom);
background: var(--weave) center / auto 100% repeat-x;
background-origin: content-box; background-clip: content-box; background-color: var(--weave-bg);
}
.toast { bottom: calc(var(--tabbar) + 18px + var(--safe-bottom) + 24px); }
/* =========================================================
Explore: map button beside the filter button, and the Map page
========================================================= */
.search-row .filter-btn { flex-shrink: 0; }
.map-btn { background: #FFFDF9; color: var(--brown-700); border: 1.5px solid var(--brown-700); }
.map-btn:active { background: var(--chip); }
.map-chips { padding: 0 18px 10px; margin: 0; }
.map-empty { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 14px; border-radius: var(--r); background: #fff; font-size: .85rem; color: var(--muted); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); }
.map-card strong { color: var(--brown); font-weight: 600; }
/* =========================================================
Heritage auction
========================================================= */
.ac-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ac-head h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: var(--brown); }
.ac-head .sub { max-width: 30ch; }
.ac-live {
flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 11px;
border-radius: 999px; background: #FBE3DB; color: #B23A1F; font-size: .75rem; font-weight: 600;
}
.ac-live i { width: 7px; height: 7px; border-radius: 50%; background: #D9472B; }
@media (prefers-reduced-motion: no-preference) {
.ac-live i { animation: blink 1.4s ease-in-out infinite; }
}
@keyframes blink { 50% { opacity: .25; } }
.ac-list { display: grid; gap: 14px; margin-top: 16px; }
.ac-card {
display: block; width: 100%; padding: 0; text-align: left; overflow: hidden;
border: 1px solid #F0E4D3; border-radius: 18px; background: #FFFDF9;
box-shadow: 0 10px 24px -16px rgba(90, 38, 20, .5);
}
.ac-media { position: relative; display: block; height: 170px; }
.ac-media .pic { position: absolute; inset: 0; }
.ac-chip {
position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
padding: 5px 10px; border-radius: 999px; background: rgba(255, 251, 244, .94); color: var(--brown);
font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ac-chip.hot { background: #B23A1F; color: #fff; }
.ac-chip.done { background: rgba(60, 30, 14, .78); color: #fff; }
.ac-me { position: absolute; right: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: var(--green); color: #fff; font-size: .72rem; font-weight: 600; }
.ac-me.out { background: #B23A1F; }
.ac-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.ac-body .kind { font-size: .7rem; font-weight: 600; color: var(--gold-dark); }
.ac-body strong { font-size: 1.02rem; font-weight: 600; line-height: 1.25; color: var(--brown); }
.ac-foot { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed #EADCC8; }
.ac-cur { display: grid; }
.ac-cur small { font-size: .7rem; color: var(--muted); }
.ac-cur b { font-size: 1.15rem; font-weight: 700; color: #8A3B1E; }
.ac-bids { margin-bottom: 3px; font-size: .75rem; color: var(--muted); }
.ac-btn { margin-left: auto; gap: 6px; background: var(--brown-700); }
.ac-sheet-pic { position: relative; height: 180px; margin-bottom: 12px; border-radius: 16px; }
.ac-kind { font-size: .72rem; font-weight: 600; color: var(--gold-dark); }
.ac-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ac-stats div { display: grid; gap: 2px; min-width: 0; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.ac-stats small { font-size: .7rem; color: var(--muted); }
.ac-stats b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .98rem; font-weight: 700; color: var(--brown); }
.f-loc { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }8557
/* =========================================================
Tourist: auto-sliding hero, products with cart, cart, orders
========================================================= */
.hero3 { height: 200px; }
.hero3::after { background: linear-gradient(100deg, rgba(40, 18, 8, .82) 0%, rgba(40, 18, 8, .45) 55%, rgba(40, 18, 8, .1) 100%); }
.h3-text { position: absolute; left: 20px; right: 76px; bottom: 18px; z-index: 1; display: grid; gap: 6px; }
.h3-text strong { display: grid; font-size: 1.45rem; font-weight: 700; line-height: 1.18; letter-spacing: -.015em; color: #FFF8EE; }
.h3-text small { font-size: .84rem; color: #F3E3CC; }
@media (prefers-reduced-motion: no-preference) {
.hero3 .pic img { transition: transform 6s ease-out; }
.hero3:hover .pic img { transform: scale(1.04); }
}
/* Product page */
.p-price { margin-top: 6px; font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.p-by { margin-top: 6px; }
.p-by .link { font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.qty button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--chip); color: var(--maroon); }
.qty button:disabled { opacity: .4; cursor: default; }
.qty output { min-width: 32px; text-align: center; font-weight: 700; }
.qty-sm { margin-top: 8px; }
.qty-sm button { width: 30px; height: 30px; }
.qty-sm output { min-width: 26px; font-size: .9rem; }
.p-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.p-badges span { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-align: center; font-size: .72rem; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.p-badges .ic { color: var(--maroon); width: 20px; height: 20px; }
/* Cart */
.cart-line { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); }
.cl-pic { flex: 0 0 84px; height: 84px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; }
.cl-pic .pic { width: 100%; height: 100%; }
.cart-line .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cart-line strong { font-size: .92rem; line-height: 1.25; }
.cl-del { color: var(--muted); }
.cart-sum { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.cart-sum div { display: flex; justify-content: space-between; font-size: .9rem; color: var(--ink-2); }
.cart-sum .tot { padding-top: 10px; border-top: 1px solid var(--line); font-size: 1.05rem; font-weight: 800; color: var(--ink); }
/* Experiences list */
.xcard { position: relative; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.xc-open { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.xc-media { position: relative; display: block; height: 150px; }
.xc-media .pic { position: absolute; inset: 0; }
.xc-body { display: grid; gap: 4px; padding: 12px 52px 14px 14px; }
.xc-body strong { font-size: 1rem; }
.xc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.xcard .heart { position: absolute; right: 8px; bottom: 12px; }
/* Profile */
.support-card { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 18px; border-radius: var(--r); background: #F3EBE0; color: var(--ink-2); }
.support-card .ic { width: 28px; height: 28px; color: var(--maroon); }
.support-card p { font-size: .88rem; line-height: 1.45; }
/* =========================================================
Tourist v3: Explore + Live Auctions, live auction detail,
Community, My Activity, Profile, provenance records
========================================================= */
.live-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #D7262B; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .08em; vertical-align: middle; }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.live-badge.ended { background: #6F6259; }
@media (prefers-reduced-motion: no-preference) { .live-badge i { animation: livePulse 1.4s ease-in-out infinite; } }
@keyframes livePulse { 50% { opacity: .3; } }
.sec-head h2 .ic, .lv-head h2 .ic { color: var(--maroon); vertical-align: -3px; }
/* Home: the four pillars */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.pillars button { display: grid; justify-items: center; gap: 3px; padding: 12px 4px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-align: center; color: var(--ink); }
.pillars .ic { width: 22px; height: 22px; color: var(--maroon); margin-bottom: 2px; }
.pillars b { font-size: .76rem; }
.pillars small { font-size: .6rem; line-height: 1.25; color: var(--muted); }
.maker-chip { flex: 0 0 104px; display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--shadow); text-align: center; scroll-snap-align: start; }
.maker-chip .mk-pic { width: 64px; height: 64px; border-radius: 50%; }
.maker-chip strong { font-size: .76rem; line-height: 1.2; }
.maker-chip small { font-size: .66rem; color: var(--muted); }
.tagline-end { margin: 26px 0 6px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--muted); }
/* Auction cards */
.lv-card { position: relative; flex: 0 0 236px; display: grid; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); overflow: hidden; scroll-snap-align: start; }
.lv-card.lv-sm { flex-basis: 196px; }
.lv-open { display: grid; padding: 0; border: 0; background: none; text-align: left; }
.lv-media { position: relative; display: block; height: 128px; }
.lv-media .pic { position: absolute; inset: 0; }
.lv-media .live-badge { position: absolute; top: 8px; left: 8px; }
.lv-watch { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(20, 10, 5, .6); color: #fff; font-size: .66rem; font-weight: 700; }
.lv-body { display: grid; gap: 4px; padding: 10px 12px 4px; }
.lv-body strong { font-size: .86rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lv-row small { display: block; font-size: .62rem; color: var(--muted); font-weight: 600; }
.lv-row b { font-size: .9rem; }
.lv-row .ac-chip { position: static; }
.lv-bid { margin: 8px 12px 12px; width: auto; }
.lv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 22px; }
.lv-head h2 { font-size: 1.02rem; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.lv-rail { margin-top: 10px; }
.lv-row-card { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px; border: 0; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.lv-row-card:disabled { opacity: 1; cursor: default; }
.lv-row-card .pic { flex: 0 0 64px; height: 64px; border-radius: 12px; }
.lv-row-card .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lv-row-card strong { font-size: .86rem; }
.lv-row-card .ac-chip { position: static; flex-shrink: 0; }
.soon-badge { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: .66rem; font-weight: 800; }
.soon-badge.done { background: var(--chip); color: var(--muted); }
.soon-badge.out { background: #FDE4E1; color: #B23A1F; }
.soon-badge.pay { background: #FBEBD3; color: var(--gold-dark); }
/* Explore */
.loc-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.loc-chip .ic { color: var(--maroon); }
.ex-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ex-cat { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border: 1px solid var(--line); border-radius: 16px; background: #fff; font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.ex-ico { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--chip); color: var(--maroon); }
.ex-live { position: absolute; top: -6px; right: -12px; padding: 1px 5px; border-radius: 6px; background: #D7262B; color: #fff; font-size: .52rem; font-weight: 800; letter-spacing: .06em; }
.chip-n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: rgba(116, 55, 26, .14); font-size: .66rem; }
.chip[aria-pressed="true"] .chip-n { background: rgba(255, 255, 255, .25); }
/* Live auction detail */
.lot-hero-badges { position: absolute; left: 16px; bottom: 34px; z-index: 2; display: flex; gap: 8px; align-items: center; }
.lot-hero-badges .lv-watch { position: static; }
.seller-row { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.seller-row .avatar { width: 38px; height: 38px; background: var(--gold); }
.seller-row .grow { display: grid; gap: 2px; }
.seller-row b { font-size: .88rem; }
.seller-row small { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--muted); }
.verified { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: .62rem; font-weight: 800; vertical-align: 1px; }
.bid-panel { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 14px; border-radius: 16px; background: #fff; border: 1.5px solid var(--gold); }
.bp-main { display: grid; gap: 2px; }
.bp-main small { font-size: .7rem; font-weight: 700; color: var(--muted); }
.bp-main b { font-size: 1.6rem; font-weight: 800; color: var(--maroon); }
.bp-side { display: grid; justify-items: end; align-content: space-between; gap: 6px; text-align: right; }
.bp-side .ac-chip { position: static; }
.place-bid { height: 56px; font-size: 1rem; letter-spacing: .02em; }
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.facts-grid span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.facts-grid span.wide { grid-column: 1 / -1; }
.facts-grid small { font-size: .64rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.t-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--green); }
.bid-hist { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.bid-hist li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.bid-hist li + li { border-top: 1px solid var(--line); }
.bid-hist .avatar { width: 30px; height: 30px; font-size: .66rem; background: var(--gold); }
.bid-hist li.me .avatar { background: var(--maroon); }
.bid-hist .grow { flex: 1; display: grid; }
.bid-hist small { font-size: .7rem; color: var(--muted); }
.bid-hist .top { padding: 2px 7px; border-radius: 999px; background: #FBEBD3; color: var(--gold-dark); font-size: .62rem; font-weight: 800; }
/* Provenance */
.prov-head { display: flex; gap: 14px; align-items: center; margin: 4px 0 16px; }
.prov-head .pic { flex: 0 0 84px; height: 84px; border-radius: 14px; }
.prov-head h2 { font-size: 1.05rem; line-height: 1.25; margin: 2px 0 6px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--gold); display: grid; gap: 14px; }
.timeline li { position: relative; display: grid; gap: 2px; font-size: .86rem; color: var(--ink-2); }
.timeline li::before { content: ""; position: absolute; left: -23px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--maroon); border: 2px solid var(--bg); }
.timeline b { color: var(--ink); }
/* Community */
.c-title { margin-top: 14px; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--maroon-2); }
.c-sub { margin-top: 2px; font-size: 1.05rem; font-weight: 600; color: #6B4A33; }
.comm .sub { margin-top: 6px; }
.composer { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); text-align: left; color: var(--muted); font-size: .88rem; }
.composer span:nth-child(2) { flex: 1; }
.composer .avatar { width: 40px; height: 40px; }
.cam { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #8A5A2B; color: #fff; }
.c-chips .chip { display: inline-flex; align-items: center; gap: 6px; }
.post { margin-top: 14px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.post header { display: flex; gap: 10px; align-items: center; }
.post header .avatar { width: 42px; height: 42px; background: var(--gold); }
.post header .grow { display: grid; gap: 2px; }
.post header b { color: var(--maroon); font-size: .9rem; }
.post header small { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; color: var(--muted); }
.post > p { margin-top: 10px; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.post-imgs { display: grid; gap: 6px; margin-top: 10px; }
.post-imgs.n2 { grid-template-columns: 1.4fr 1fr; }
.post-imgs .pi { position: relative; display: block; height: 170px; border-radius: 14px; overflow: hidden; }
.post-imgs .pi .pic { position: absolute; inset: 0; }
.pin-tag { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .66rem; font-weight: 700; color: var(--ink); }
.post footer { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.pf { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.pf.on { color: #D7262B; }
.pf.on .ic { fill: currentColor; }
.topic { position: relative; flex: 0 0 132px; height: 92px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; text-align: left; scroll-snap-align: start; }
.topic .pic { position: absolute; inset: 0; }
.topic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 10, 5, .75), transparent 70%); }
.topic span { position: absolute; left: 10px; bottom: 8px; z-index: 1; display: grid; color: #fff; }
.topic b { font-size: .76rem; }
.topic small { font-size: .66rem; opacity: .9; }
.follow-card { flex: 0 0 132px; display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); text-align: center; scroll-snap-align: start; }
.follow-card .fc-pic { width: 64px; height: 64px; border-radius: 50%; }
.follow-card strong { font-size: .76rem; line-height: 1.2; }
.follow-card small { font-size: .66rem; color: var(--muted); }
.follow-card .btn { margin-top: 4px; height: 30px; padding: 0 16px; background: #8A5A2B; }
.follow-card .btn.btn-ghost { background: transparent; color: #8A5A2B; border-color: #8A5A2B; }
.q-card { margin-top: 18px; padding: 14px; border-radius: 20px; background: #F3EBE0; }
.q-top { display: flex; align-items: center; gap: 10px; }
.q-top b { flex: 1; font-size: .9rem; }
.q-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #8A5A2B; color: #fff; }
.q-body { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 0; border: 0; background: none; text-align: left; }
.q-body .grow { flex: 1; display: grid; gap: 4px; }
.q-body b { font-size: .88rem; }
.q-body small { font-size: .72rem; color: var(--muted); }
.q-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--maroon); }
/* My Activity */
.act-head { padding-bottom: 0; }
.act-head .c-title { margin-top: 0; }
.act-body > div:first-child { padding-top: 6px !important; }
.act-body .seg { margin-top: 6px; }
/* Cultural places map / list switch */
.map-seg { margin: 0 14px 8px; }
/* Profile */
.prof-hero { display: grid; justify-items: center; gap: 4px; margin-top: 8px; text-align: center; }
.avatar-xl { width: 92px; height: 92px; font-size: 1.8rem; box-shadow: 0 10px 24px -12px rgba(116, 55, 26, .7); }
.prof-hero strong { margin-top: 6px; font-size: 1.2rem; }
.prof-hero small { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--muted); }
.prof-hero .btn { margin-top: 6px; }
.menu-label { margin: 20px 4px -12px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.two-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.two-btns .btn { height: 46px; }
.seg.seg3 { grid-template-columns: repeat(3, 1fr); }
.act-head { padding-top: calc(var(--safe-top) + 22px); }
/* =========================================================
Community: logo header with search, alerts and messages;
stories; story viewer; direct messages
========================================================= */
.c-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c-head .brand img.mark { height: 34px; }
.c-head .brand img.word { height: 20px; }
.c-actions { display: flex; gap: 2px; }
.c-actions .icon-btn { width: 40px; height: 40px; }
.c-searchbar { margin-top: 10px; padding-right: 4px; }
.c-searchbar .icon-btn { width: 34px; height: 34px; color: var(--muted); }
.stories { display: flex; gap: 14px; overflow-x: auto; margin: 14px -18px 0; padding: 4px 18px 6px; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: 0 0 auto; display: grid; justify-items: center; gap: 6px; width: 70px; padding: 0; border: 0; background: none; }
.story small { width: 100%; font-size: .66rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.st-ring { position: relative; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, #C89547, var(--maroon), #D39432, #C89547); }
.story.seen .st-ring { background: var(--line); }
.st-ring .st-pic, .st-ring .avatar { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg); }
.story.add .st-ring { background: none; border: 2px dashed #D9C6AD; }
.story.add .avatar { border: 0; width: 54px; height: 54px; }
.st-plus { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--maroon); color: #fff; border: 2px solid var(--bg); }
.comm .composer { margin-top: 12px; }
.story-view { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; max-width: 440px; margin: 0 auto; background: #120a06; color: #fff; }
.story-view .sv-pic { position: absolute; inset: 0; }
.story-view .sv-pic img { object-fit: cover; }
.story-view::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 25%, transparent 65%, rgba(0, 0, 0, .7)); pointer-events: none; }
.sv-bars { position: relative; z-index: 3; display: flex; gap: 4px; padding: calc(var(--safe-top) + 10px) 12px 0; }
.sv-bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.sv-bars i { display: block; height: 100%; width: 0; background: #fff; }
.sv-bars .done i { width: 100%; }
.sv-bars .now i { width: 100%; }
@media (prefers-reduced-motion: no-preference) { .sv-bars .now i { animation: svFill 5s linear both; } }
@keyframes svFill { from { width: 0; } to { width: 100%; } }
.story-view header { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.story-view header .avatar { width: 34px; height: 34px; background: var(--gold); font-size: .7rem; }
.story-view header b { flex: 1; font-size: .9rem; }
.story-view header .icon-btn { color: #fff; }
.sv-cap { position: absolute; left: 16px; right: 16px; bottom: calc(var(--safe-bottom) + 34px); z-index: 3; font-size: 1rem; font-weight: 600; line-height: 1.45; }
.sv-nav { position: absolute; top: 80px; bottom: 120px; z-index: 2; width: 38%; border: 0; background: transparent; }
.sv-nav.prev { left: 0; }
.sv-nav.next { right: 0; }
.dm-pic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; }
/* =========================================================
Community & Profile v2
========================================================= */
.av-pic { border-radius: 50%; flex-shrink: 0; }
.c-actions { align-items: center; }
.c-actions .icon-btn { width: 38px; height: 38px; }
.c-me { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; background: none; }
.c-me .avatar, .c-me .av-pic { width: 34px; height: 34px; font-size: .74rem; }
.c-searchbar { margin-top: 10px; }
.story em { display: block; margin-top: -4px; font-style: normal; font-size: .58rem; font-weight: 600; color: var(--muted); }
.story.add.has .st-ring { border: 0; background: conic-gradient(from 210deg, #C89547, var(--maroon), #D39432, #C89547); }
.story.add .st-ring .av-pic, .story.add .st-ring .avatar { width: 54px; height: 54px; }
.composer2 { margin-top: 12px; padding: 0 0 10px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.composer2 .composer { margin-top: 0; border: 0; box-shadow: none; background: transparent; }
.composer2 .composer .av-pic { width: 40px; height: 40px; }
.cmp-tools { display: flex; gap: 6px; overflow-x: auto; padding: 0 10px; scrollbar-width: none; }
.cmp-tools::-webkit-scrollbar { display: none; }
.cmp-tools button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 0; border-radius: 999px; background: var(--chip); font-size: .7rem; font-weight: 700; color: var(--ink-2); }
.cmp-tools .ic { color: var(--maroon); }
.ph-who { display: flex; gap: 10px; align-items: center; padding: 0; border: 0; background: none; text-align: left; }
.ph-who .avatar, .ph-who .av-pic { width: 42px; height: 42px; }
.ph-who .grow { display: grid; gap: 1px; }
.ph-who b { color: var(--ink); font-size: .9rem; }
.ph-who small { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; color: var(--muted); }
.post-topics { margin-top: 6px; }
.post-topics button { border: 0; background: none; padding: 0; color: var(--maroon); font-weight: 700; font-size: .84rem; }
.c-tag { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 9px 12px; border: 0; border-radius: 12px; background: #F3EBE0; text-align: left; font-size: .78rem; color: var(--ink-2); }
.c-tag span { flex: 1; }
.c-tag .ic { color: var(--maroon); }
.pf.saved { color: var(--maroon); }
.pf.saved .ic { fill: currentColor; }
.p-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); margin-bottom: 8px; }
.pr-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; text-align: left; }
.pr-main .grow { display: grid; min-width: 0; }
.pr-main small { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-av { width: 44px !important; height: 44px !important; }
.f-btn { height: 32px; padding: 0 14px; background: #8A5A2B; }
.f-btn.btn-ghost { background: transparent; color: #8A5A2B; border-color: #8A5A2B; }
.follow-card { flex-basis: 140px; }
.fc-open { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; text-align: center; }
.follow-card .fc-pic { width: 64px !important; height: 64px !important; }
.follow-card .mut { color: var(--green); font-weight: 700; }
.fc-btns { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.fc-btns .btn { margin-top: 0; }
.fc-msg { width: 32px; height: 32px; background: var(--chip); color: #8A5A2B; }
.trend { display: flex; flex-wrap: wrap; gap: 8px; }
.trend button { padding: 7px 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--shadow); font-size: .78rem; font-weight: 700; color: var(--maroon); }
.q-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(138, 90, 43, .15); }
.q-item b { font-size: .88rem; }
.q-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.q-meta small { flex: 1; font-size: .7rem; color: var(--muted); }
.av-stack { display: inline-flex; }
.av-stack .stk { width: 26px !important; height: 26px !important; font-size: .55rem; border: 2px solid #F3EBE0; margin-left: -8px; }
.av-stack .stk:first-child { margin-left: 0; }
.ask-btn { margin-top: 14px; width: 100%; background: #8A5A2B; }
/* Messenger */
.online-row { display: flex; gap: 14px; overflow-x: auto; padding: 14px 0 4px; scrollbar-width: none; }
.online-row::-webkit-scrollbar { display: none; }
.online-row button { position: relative; flex-shrink: 0; display: grid; justify-items: center; gap: 4px; width: 56px; padding: 0; border: 0; background: none; }
.online-row .dm-pic { width: 52px; height: 52px; flex-basis: 52px; }
.online-row small { font-size: .66rem; font-weight: 600; color: var(--ink-2); }
.on-dot { position: absolute; right: 2px; top: 38px; width: 12px; height: 12px; border-radius: 50%; background: #2EB872; border: 2px solid var(--bg); }
.on-dot.inline { position: static; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border: 0; vertical-align: 1px; }
.dm-av { position: relative; flex: 0 0 44px; }
.dm-av .on-dot { top: auto; bottom: 0; right: 0; }
.m-at { align-self: flex-start; font-size: .64rem; color: var(--muted); }
.msg-wrap { display: grid; justify-items: start; gap: 4px; }
.msg-wrap.me { justify-items: end; }
.msg-wrap .msg { margin: 0; }
.m-who { font-size: .66rem; font-weight: 700; color: var(--muted); padding-left: 4px; }
.m-card { display: flex; gap: 10px; width: 78%; padding: 8px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.m-card .pic { flex: 0 0 76px; height: 76px; border-radius: 12px; }
.mc-body { display: grid; gap: 2px; min-width: 0; align-content: start; }
.mc-body .kind { display: flex; align-items: center; gap: 6px; }
.mc-body b { font-size: .84rem; line-height: 1.2; }
.mc-body small { font-size: .7rem; color: var(--muted); }
.mc-body .btn { margin-top: 6px; height: 28px; width: auto; justify-self: start; padding: 0 12px; font-size: .72rem; }
.reply .icon-btn { flex-shrink: 0; width: 40px; height: 46px; color: var(--maroon); }
/* My profile and other people's profiles */
.me-page { padding: 0 18px 28px; }
.me-head { display: flex; align-items: center; gap: 18px; }
.me-av { width: 84px !important; height: 84px !important; font-size: 1.6rem; flex-shrink: 0; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); }
.me-stats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.me-stats b { display: block; font-size: 1.15rem; }
.me-stats small { font-size: .72rem; color: var(--muted); }
.me-name { margin-top: 12px; font-size: 1.2rem; font-weight: 800; }
.me-handle { font-size: .82rem; font-weight: 600; color: var(--maroon); }
.me-loc { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .8rem; color: var(--muted); }
.me-bio { margin-top: 8px; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.int-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.int-chips .chip { font-size: .74rem; padding: 7px 12px; }
.stories.hl { margin-top: 10px; }
.conn { margin-top: 18px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.conn-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }
.conn-stats button { display: grid; padding: 4px 0; border: 0; background: none; text-align: center; }
.conn-stats b { font-size: 1rem; }
.conn-stats small { font-size: .66rem; color: var(--muted); }
.conn-row { display: flex; align-items: center; justify-content: space-between; }
.conn .av-stack .stk { border-color: #fff; width: 30px !important; height: 30px !important; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.photo-grid .pic { aspect-ratio: 1; border-radius: 6px; }
/* Story viewer extras */
.story-view header .grow { display: grid; }
.story-view header small { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; opacity: .85; }
.story-view header .av-pic, .story-view header .avatar { width: 34px; height: 34px; }
.sv-cap p { margin: 0; }
.sv-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: .76rem; font-weight: 700; }
.mc-body .kind { font-size: .62rem; font-weight: 800; letter-spacing: .03em; color: var(--gold-dark); }
/* Messages header: new group + new message */
.tb-actions { display: inline-flex; gap: 2px; }
.pick-people { border: 0; padding: 0; margin: 14px 0 0; }
.pick-people legend { padding: 0; margin-bottom: 6px; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.pp-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pp-row .grow { flex: 1; display: grid; min-width: 0; }
.pp-row b { font-size: .86rem; }
.pp-row small { font-size: .7rem; color: var(--muted); }
.pp-row input { width: 20px; height: 20px; accent-color: var(--maroon); }
.m-sys { align-self: center; max-width: 85%; margin: 4px 0; padding: 5px 12px; border-radius: 999px; background: var(--chip); text-align: center; font-size: .72rem; font-weight: 600; color: var(--muted); }
/* =========================================================
My Activity dashboard
========================================================= */
.a-tabs { display: grid; grid-template-columns: repeat(4, auto); gap: 8px; margin: 14px -18px 0; padding: 0 18px 2px; overflow-x: auto; scrollbar-width: none; }
.a-tabs::-webkit-scrollbar { display: none; }
.a-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--chip); font-size: .82rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.a-tabs button .ic { color: var(--maroon); }
.a-tabs button[aria-selected="true"] { background: var(--maroon); color: #fff; }
.a-tabs button[aria-selected="true"] .ic { color: #fff; }
.a-n { min-width: 18px; padding: 0 5px; border-radius: 9px; background: rgba(116, 55, 26, .12); font-size: .66rem; line-height: 18px; text-align: center; }
.a-tabs button[aria-selected="true"] .a-n { background: rgba(255, 255, 255, .22); }
.a-wrap { padding: 4px 18px 28px; }
.a-sec { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.a-sec h2 { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; font-weight: 800; color: var(--maroon-2); }
.a-sec h2 .ic { color: var(--maroon); }
.a-sec .see-all { color: var(--muted); font-weight: 600; }
.a-card { position: relative; display: flex; gap: 12px; align-items: stretch; width: 100%; margin-bottom: 10px; padding: 10px; border: 0; border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.a-tap { flex-shrink: 0; padding: 0; border: 0; background: none; }
.a-img { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 14px; }
.a-img.sq { width: 88px; height: 88px; flex-basis: 88px; }
.a-body { flex: 1; min-width: 0; display: grid; gap: 4px; align-content: start; }
.a-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.a-top strong { font-size: .9rem; line-height: 1.25; }
.a-body .meta { font-size: .74rem; }
.a-price { font-size: 1rem; font-weight: 800; color: var(--ink); }
.a-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.a-row .btn { height: 32px; width: auto; padding: 0 14px; font-size: .74rem; }
.a-soft { background: #F3EBE0; color: var(--maroon-2); box-shadow: none; }
.a-go { align-self: center; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); }
.a-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .64rem; font-weight: 800; white-space: nowrap; }
.a-pill.ok { background: var(--green-bg); color: var(--green); }
.a-pill.info { background: #E3ECF7; color: #2F5D8F; }
.a-pill.warn { background: #FBEBD3; color: var(--gold-dark); }
.a-pill.bad { background: #FDE4E1; color: #B23A1F; }
.a-pill.mute { background: var(--chip); color: var(--muted); }
.a-bid { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.a-bid small { display: block; font-size: .64rem; font-weight: 700; color: var(--muted); }
.a-bid b { font-size: 1.25rem; font-weight: 800; color: var(--maroon); }
.a-stats { display: grid; gap: 2px; padding-left: 12px; border-left: 1px solid var(--line); font-size: .7rem; color: var(--muted); }
.a-stats span { display: inline-flex; align-items: center; gap: 4px; }
.a-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.a-mini { position: relative; padding: 8px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.a-mini .a-tap { display: grid; gap: 8px; width: 100%; text-align: left; }
.a-mini-img { width: 100%; height: 84px; border-radius: 12px; }
.a-mini-body { display: grid; gap: 2px; padding: 0 2px 2px; }
.a-mini-body strong { font-size: .78rem; line-height: 1.25; padding-right: 22px; }
.a-mini-body small { display: inline-flex; align-items: center; gap: 3px; font-size: .66rem; color: var(--muted); }
.a-mark { position: absolute; right: 6px; bottom: 30px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--maroon); }
.a-mark .ic { fill: currentColor; }
.a-empty { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; border: 1px dashed var(--line); font-size: .82rem; color: var(--muted); }
.a-empty .ic { color: var(--gold); }
.a-empty .link { margin-left: auto; }
.a-wrap .sec-head { margin-top: 18px; }
/* Order tracking */
.track { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0; }
.track li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; color: var(--muted); }
.track li::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
.track li:last-child::before { display: none; }
.track li.done::before { background: var(--green); }
.tdot { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--chip); color: #fff; }
.track li.done .tdot { background: var(--green); }
.track li.now .tdot { background: var(--maroon); box-shadow: 0 0 0 4px rgba(116, 55, 26, .15); }
.track li span:last-child { display: grid; }
.track b { font-size: .86rem; }
.track li.done b, .track li.now b { color: var(--ink); }
.track small { font-size: .7rem; }
.a-tabs { gap: 6px; }
.a-tabs button { padding: 8px 11px; font-size: .78rem; gap: 5px; }
.a-tabs button { padding: 8px 9px; font-size: .74rem; } .a-tabs .ic-sm { width: 15px; height: 15px; }
@media (max-width: 420px) { .a-tabs { display: flex; justify-content: space-between; } .a-tabs button .ic { display: none; } }
/* =========================================================
LOCARTA brown palette
Several shades of brown taken from the logo (dark handle brown,
mid brown, caramel, tan), with cream, beige, terracotta and a
little gold. Every screen reads these variables.
========================================================= */
:root {
--brown-950: #2B160B; /* text */
--brown-900: #3E1E0E;
--brown-800: #5A2810; /* logo handle */
--brown-700: #74371A; /* primary buttons */
--brown-600: #8E4F28; /* secondary buttons */
--brown-500: #A8693A; /* caramel accents and icons */
--brown-300: #D7B48C; /* logo tan */
--brown-200: #E9D6BC;
--brown-100: #F4E9DA; /* chips and soft panels */
--terracotta: #B4552F;
--gold: #C8892C; /* logo map-pin gold */
--gold-dark: #9E6A1E;
--bg: #FBF6EE;
--ink: var(--brown-950);
--ink-2: #4E3424;
--muted: #8C7663;
--line: #EADCC8;
--chip: var(--brown-100);
--maroon: var(--brown-700);
--maroon-2: var(--brown-800);
--star: #D89A2E;
}
/* the Home screen's own tokens */
.home2, .app { --brown: var(--brown-800); --rust: var(--terracotta); --ochre: var(--gold); --olive: #8A6A44; }
/* Headings in deep brown, icons and small accents in caramel */
.sec-head h2, .a-sec h2, .d-h2, .h-hello, .c-title, .me-name, .topbar h1 { color: var(--brown-800); }
.a-sec h2 .ic, .sec-head h2 .ic, .lv-head h2 .ic, .menu .ic:first-child, .cmp-tools .ic, .c-tag .ic, .loc-chip .ic, .pillars .ic, .ex-ico, .p-badges .ic, .fact .ic, .support-card .ic { color: var(--brown-500); }
.ex-ico { background: var(--brown-100); }
.see-all { color: var(--brown-600); }
/* Buttons: primary dark brown, secondary mid brown, soft caramel tints */
.btn { background: var(--brown-700); }
.btn:active { background: var(--brown-800); }
.btn-ghost { color: var(--brown-700); border-color: var(--brown-600); background: transparent; }
.f-btn, .follow-card .btn, .ask-btn, .lv-bid { background: var(--brown-600); }
.f-btn.btn-ghost, .follow-card .btn.btn-ghost { color: var(--brown-600); border-color: var(--brown-600); background: transparent; }
.a-soft { background: var(--brown-100); color: var(--brown-800); }
.cam, .q-ico { background: var(--brown-500); }
.fc-msg { background: var(--brown-100); color: var(--brown-600); }
/* Chips, tabs and highlights */
.chip[aria-pressed="true"], .a-tabs button[aria-selected="true"] { background: var(--brown-800); }
.tabbar button[aria-current="page"] { color: var(--brown-700); }
.tabs button[aria-selected="true"], .seg button[aria-selected="true"] { color: var(--brown-700); border-bottom-color: var(--brown-700); }
.price, .a-price { color: var(--brown-700); }
.bp-main b, .a-bid b { color: var(--terracotta); }
.q-card, .c-tag, .support-card { background: var(--brown-100); }
.avatar { background: var(--brown-600); }
.post header .avatar, .bid-hist .avatar, .seller-row .avatar, .thread .avatar { background: var(--brown-500); }
.post header b, .ph-who b, .me-handle { color: var(--brown-700); }
.st-ring, .story.add.has .st-ring { background: conic-gradient(from 210deg, var(--gold), var(--brown-500), var(--brown-800), var(--terracotta), var(--gold)); }
.bid-panel { border-color: var(--brown-300); }
.timeline { border-left-color: var(--brown-300); }
.timeline li::before { background: var(--brown-700); }
/* =========================================================
Places map v2 and Mindanao microcopy
========================================================= */
.tb-local { font-size: .72rem; font-weight: 700; font-style: italic; color: var(--brown-500); }
.h-local, .c-local small { display: block; font-size: .66rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.c-local { margin-top: 14px; font-size: .86rem; font-weight: 800; color: var(--brown-800); }
.c-local small { display: inline; margin-left: 6px; }
.comm .c-local + .stories { margin-top: 4px; }
.map-top { padding: 0 18px; flex-shrink: 0; }
.filter-btn.on { background: var(--brown-800); box-shadow: 0 0 0 3px rgba(116, 55, 26, .2); }
.map-cats { padding-top: 10px; }
.map-cats .chip { display: inline-flex; align-items: center; gap: 6px; }
.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; vertical-align: 0; }
.chip[aria-pressed="true"] .cdot { box-shadow: 0 0 0 2px #fff; }
.map-seg { margin: 10px 0 6px; }
.map2 { margin-top: 4px; background: #DCE9E6; touch-action: none; cursor: grab; }
.map2:active { cursor: grabbing; }
.map2 .lbl { font-size: 10px; fill: #8C7663; font-weight: 700; letter-spacing: .02em; }
.map2 .lbl-sea { fill: #6E9A97; }
.pin2 { cursor: pointer; transition: transform .15s; }
.pin2-shape { stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 3px 3px rgba(43, 22, 11, .35)); }
.pin2.on .pin2-shape { stroke: var(--gold); stroke-width: 3; }
.pin2:focus-visible .pin2-shape { stroke: var(--gold); }
.map-ctrls { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; }
.map-ctrls button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #fff; color: var(--brown-700); box-shadow: var(--shadow); }
.map-ctrls button.on { background: var(--brown-800); color: #fff; }
.map-count { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .7rem; font-weight: 700; color: var(--brown-800); box-shadow: var(--shadow); }
.map-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: .74rem; color: var(--ink-2); white-space: nowrap; box-shadow: var(--shadow); }
.map-hint b { color: var(--brown-700); }
.place-pop { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(43, 22, 11, .2); }
.pc-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; color: var(--muted); }
.pc-top { display: flex; gap: 12px; padding-right: 26px; }
.pc-img { flex: 0 0 70px; width: 70px; height: 70px; border-radius: 12px; }
.pc-info { display: grid; gap: 2px; min-width: 0; align-content: start; }
.pc-cat { display: inline-flex; align-items: center; gap: 5px; font-size: .64rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.pc-info strong { font-size: .95rem; line-height: 1.2; }
.pc-desc { margin-top: 8px; font-size: .8rem; line-height: 1.45; color: var(--ink-2); }
.pc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pc-btns .btn { width: 100%; height: 38px; }
.near-note { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--brown-100); font-size: .76rem; color: var(--ink-2); }
.near-note b { color: var(--brown-800); }
.row .kind { display: inline-flex; align-items: center; gap: 5px; }
/* =========================================================
Creator side: Artist · Artisan · Collector
========================================================= */
.role-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 2px; }
.rb { padding: 2px 8px; border-radius: 999px; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rb-artisan { background: #F6E3D3; color: var(--terracotta); }
.rb-artist { background: #F3E6C9; color: var(--gold-dark); }
.rb-collector { background: var(--brown-200); color: var(--brown-800); }
.rb-creator { background: #E3EDE3; color: #4F7A5A; }
.cr-card { margin-top: 14px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.cr-id { display: flex; gap: 12px; align-items: center; }
.cr-av { width: 64px !important; height: 64px !important; font-size: 1.2rem; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brown-300); }
.cr-id .grow { display: grid; gap: 1px; min-width: 0; }
.cr-id strong { font-size: 1.02rem; color: var(--brown-800); }
.cr-id small { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; color: var(--muted); }
.cr-bio { margin-top: 10px; font-size: .86rem; font-style: italic; color: var(--ink-2); }
.cr-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 12px; padding: 10px 0; border-block: 1px solid var(--line); text-align: center; }
.cr-stats b { display: block; font-size: 1.05rem; color: var(--brown-800); }
.cr-stats small { font-size: .68rem; color: var(--muted); }
.cr-card .two-btns .btn { height: 42px; font-size: .84rem; }
.cr-qa { display: flex; gap: 8px; overflow-x: auto; margin: 14px -18px 0; padding: 2px 18px 6px; scrollbar-width: none; }
.cr-qa::-webkit-scrollbar { display: none; }
.cr-qa button { flex-shrink: 0; display: grid; justify-items: center; gap: 6px; width: 96px; padding: 12px 6px; border: 0; border-radius: 16px; background: var(--brown-700); color: #FFF8EE; font-size: .72rem; font-weight: 700; text-align: center; box-shadow: 0 8px 18px -12px var(--brown-800); }
.cr-qa button:nth-child(2) { background: var(--brown-600); }
.cr-qa button:nth-child(3) { background: var(--brown-500); }
.cr-qa button:nth-child(4) { background: var(--terracotta); }
.cr-qa button:nth-child(5) { background: var(--gold-dark); }
.cr-qa span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .16); }
.cr-sec { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; }
.cr-sec h2 { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; color: var(--brown-800); }
.grp { padding: 2px 7px; border-radius: 6px; font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.grp-create { background: #F6E3D3; color: var(--terracotta); }
.grp-manage { background: var(--brown-200); color: var(--brown-800); }
.grp-connect { background: #E3EDE3; color: #4F7A5A; }
.grp-grow { background: #F3E6C9; color: var(--gold-dark); }
.grp-preserve { background: #EDE4F0; color: #6A4A6E; }
.cr-overview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cr-overview > div { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.cr-overview > div.big { grid-column: 1 / -1; background: var(--brown-800); border-color: var(--brown-800); color: #FFF8EE; }
.cr-overview b { font-size: 1.15rem; color: var(--brown-800); }
.cr-overview .big b { font-size: 1.6rem; color: #FFF8EE; }
.cr-overview small { font-size: .68rem; font-weight: 600; color: var(--muted); }
.cr-overview .big small { color: var(--brown-300); }
.cr-overview .big .t-ok { color: #A9D8B5 !important; font-size: .72rem; display: inline-flex; gap: 4px; align-items: center; }
.cr-prod, .cr-coll, .cr-space { flex: 0 0 210px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); overflow: hidden; scroll-snap-align: start; }
.cr-pimg, .cr-cimg, .cr-simg { height: 116px; }
.cr-pbody { display: grid; gap: 3px; padding: 10px 12px 12px; }
.cr-pbody strong { font-size: .86rem; line-height: 1.25; }
.cr-pbody .a-pill { justify-self: start; }
.cr-mini { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; color: var(--muted); }
.t-bad { color: #B23A1F; font-weight: 700; }
.cr-nums { display: flex; gap: 10px; font-size: .7rem; font-weight: 700; color: var(--brown-600); }
.cr-nums span { display: inline-flex; align-items: center; gap: 3px; }
.cr-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cr-btns button { padding: 6px 10px; border: 0; border-radius: 999px; background: var(--brown-100); font-size: .7rem; font-weight: 700; color: var(--brown-800); }
.cr-btns button:first-child { background: var(--brown-700); color: #fff; }
.cr-space.add { display: grid; place-content: center; justify-items: center; gap: 4px; padding: 16px; border: 1.5px dashed var(--brown-300); background: transparent; box-shadow: none; text-align: center; color: var(--brown-700); }
.cr-space.add span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brown-100); }
.cr-space.add small { font-size: .68rem; color: var(--muted); }
.cr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cr-grid .cr-prod, .cr-grid .cr-coll { flex: none; }
.cr-grid .cr-pimg, .cr-grid .cr-cimg { height: 100px; }
.co-card { align-items: flex-start; }
.cr-feed { display: grid; gap: 6px; }
.cr-feed button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 14px; background: #fff; box-shadow: var(--shadow); text-align: left; font-size: .8rem; color: var(--ink-2); }
.cr-feed .n-ico { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--brown-700); color: #fff; }
.cr-feed .n-ico.gold { background: var(--gold); }
.cr-feed .n-ico.dark { background: var(--brown-900); }
.cr-grow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cr-grow button { display: grid; gap: 3px; padding: 12px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--shadow); text-align: left; }
.cr-grow .ic { color: var(--brown-500); }
.cr-grow b { font-size: .84rem; color: var(--brown-800); }
.cr-grow small { font-size: .68rem; color: var(--muted); }
.cr-post { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--shadow); text-align: left; color: var(--muted); font-size: .82rem; }
.cr-post span:nth-child(2) { flex: 1; }
.cr-post .avatar, .cr-post .av-pic { width: 38px; height: 38px; }
.pub-note { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 7px 12px; border-radius: 12px; background: var(--brown-100); font-size: .74rem; color: var(--brown-800); }
.cr-bg { margin-top: 8px; font-size: .82rem; line-height: 1.5; color: var(--ink-2); }
.rev-mini { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .82rem; color: var(--star); }
.rev-mini b { color: var(--ink); }
.rev-mini small { color: var(--muted); }
.rev-mini .link { margin-left: auto; }
.rev-head { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.rev-head > b { font-size: 2.2rem; color: var(--brown-800); }
.rev-head span { display: grid; gap: 2px; }
.rev-head small { font-size: .76rem; color: var(--muted); }
.cr-pub { display: grid; gap: 4px; padding: 0 0 8px; border: 0; border-radius: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.cr-pub .pic { height: 110px; }
.cr-pub b, .cr-pub small { padding: 0 10px; }
.cr-pub b { font-size: .8rem; }
.cr-pub small { font-size: .7rem; color: var(--muted); }
.prov-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; background: #FBEBD3; font-size: .76rem; color: var(--gold-dark); }
.prov-note.ok { background: var(--green-bg); color: var(--green); }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; }
.chip-check span { display: inline-block; padding: 7px 12px; border-radius: 999px; background: var(--chip); font-size: .76rem; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.chip-check input:checked + span { background: var(--brown-800); color: #fff; }
.chip-check input:focus-visible + span { outline: 2.5px solid var(--gold); }
.me-page .tabs { overflow-x: auto; scrollbar-width: none; }
.me-page .tabs::-webkit-scrollbar { display: none; }
.me-page .tabs button { flex: 0 0 auto; padding: 11px 12px; }
/* One creator platform: My LOCARTA workspace and activity glance */
.cr-ws { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cr-ws button { display: grid; justify-items: start; gap: 3px; padding: 12px 10px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--shadow); text-align: left; }
.cr-ws .ws-ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 11px; background: var(--brown-100); color: var(--brown-700); }
.cr-ws button:nth-child(2) .ws-ico { color: var(--terracotta); background: #F6E3D3; }
.cr-ws button:nth-child(3) .ws-ico { color: var(--gold-dark); background: #F3E6C9; }
.cr-ws button:nth-child(4) .ws-ico { color: #4F7A5A; background: #E3EDE3; }
.cr-ws button:nth-child(5) .ws-ico { color: #B23A1F; background: #FDE4E1; }
.cr-ws button:nth-child(6) .ws-ico { color: #6A4A6E; background: #EDE4F0; }
.cr-ws b { font-size: .76rem; line-height: 1.2; color: var(--brown-800); }
.cr-ws small { font-size: .64rem; color: var(--muted); }
.glance { display: grid; gap: 8px; }
.glance button { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 12px 14px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--shadow); text-align: left; }
.glance small { grid-column: 1 / -1; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brown-500); }
.glance b { font-size: .9rem; color: var(--ink); }
.glance span:not(.a-pill):not(.live-badge) { font-size: .76rem; color: var(--muted); }
.glance .a-pill, .glance .live-badge { grid-column: 2; grid-row: 2 / span 2; justify-self: end; }
/* Creator quick actions: one uniform colour, the gold of the LOCARTA logo's map pin */
.cr-qa button,
.cr-qa button:nth-child(2),
.cr-qa button:nth-child(3),
.cr-qa button:nth-child(4),
.cr-qa button:nth-child(5) { background: #C8892C; color: var(--brown-900); box-shadow: 0 8px 18px -12px #9E6A1E; }
.cr-qa span { background: rgba(255, 248, 238, .45); color: var(--brown-900); }
/* =========================================================
LOCARTA CLEAN THEME
Few colours, each with one job:
• Neutrals: cream page, white cards, soft sand panels, hairline borders
• Ink: three text tones from the logo's dark brown
• Primary: logo brown for actions, selection and navigation
• Accent: logo gold for highlights only (quick actions, stars, badges)
• Status: muted green / amber / red / blue, always as soft tints
========================================================= */
:root {
/* neutrals */
--bg: #FAF6F0;
--card: #FFFFFF;
--sand: #F3ECE2;
--line: #E8DED0;
/* ink */
--ink: #2B1A10;
--ink-2: #5E4A3C;
--muted: #9A8676;
/* primary (logo brown) */
--primary: #5A2810;
--primary-hover: #45200C;
--primary-soft: #F1E6DA;
/* accent (logo gold) */
--accent: #C8892C;
--accent-soft: #F7EBD5;
--accent-ink: #8A5A14;
/* status */
--ok: #3F7A57; --ok-soft: #E6F1EA;
--warn: #A86A12; --warn-soft: #FBF0DC;
--bad: #C0392B; --bad-soft: #FBE6E2;
--info: #3E6A8C; --info-soft: #E5EEF5;
/* map the older names onto the clean set */
--maroon: var(--primary);
--maroon-2: var(--primary-hover);
--brown-950: var(--ink); --brown-900: #3A2214; --brown-800: var(--primary); --brown-700: var(--primary); --brown-600: #7A4A2A;
--brown-500: var(--accent-ink); --brown-300: #D9C3A6; --brown-200: #EADCC8; --brown-100: var(--sand);
--chip: var(--sand);
--gold: var(--accent); --gold-dark: var(--accent-ink);
--terracotta: var(--primary);
--green: var(--ok); --green-bg: var(--ok-soft);
--star: var(--accent);
}
body, .app { background: var(--bg); color: var(--ink); }
/* Text */
h1, h2, h3, .sec-head h2, .a-sec h2, .cr-sec h2, .d-h2, .h-hello, .c-title, .me-name, .topbar h1, .cr-id strong { color: var(--ink); }
.sub, .meta, .h-sub { color: var(--muted); }
.see-all, .link { color: var(--primary); }
/* Buttons: one primary, one quiet secondary */
.btn, .btn-gold, .f-btn, .follow-card .btn, .ask-btn, .lv-bid, .filter-btn { background: var(--primary); color: #fff; box-shadow: 0 6px 14px -10px var(--primary); }
.btn:active, .btn:hover { background: var(--primary-hover); }
.btn-ghost, .f-btn.btn-ghost, .follow-card .btn.btn-ghost { background: transparent; color: var(--primary); border: 1.5px solid var(--line); box-shadow: none; }
.btn-ghost:hover { border-color: var(--primary); background: transparent; }
.a-soft, .cr-btns button { background: var(--sand); color: var(--primary); }
.cr-btns button:first-child { background: var(--primary); color: #fff; }
.filter-btn.on, .map-ctrls button.on { background: var(--primary-hover); }
/* Selection, tabs and navigation */
.chip { background: var(--sand); color: var(--ink-2); }
.chip[aria-pressed="true"], .a-tabs button[aria-selected="true"] { background: var(--primary); color: #fff; }
.a-tabs button { background: var(--sand); color: var(--ink-2); }
.a-tabs button .ic { color: var(--primary); }
.a-tabs button[aria-selected="true"] .ic { color: #fff; }
.tabs button[aria-selected="true"], .seg button[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.tabbar button[aria-current="page"] { color: var(--primary); }
.tabbar button[aria-current="page"]::after { background: var(--primary); }
/* Cards and panels */
.cr-card, .a-card, .post, .row, .bk, .thread, .box, .menu, .cr-prod, .cr-coll, .cr-space, .lv-card, .cr-grow button, .cr-ws button, .glance button, .p-row, .follow-card, .xcard, .pcard, .cart-line { background: var(--card); }
.q-card, .c-tag, .support-card, .near-note, .pub-note, .composer2, .cr-post { background: var(--sand); }
.cr-overview > div { background: var(--card); border-color: var(--line); }
.cr-overview > div.big { background: var(--primary); border-color: var(--primary); }
.cr-overview .big small { color: #E9D8C6; }
/* Icons: one quiet tone */
.a-sec h2 .ic, .sec-head h2 .ic, .lv-head h2 .ic, .menu .ic:first-child, .cmp-tools .ic, .c-tag .ic, .loc-chip .ic, .pillars .ic, .ex-ico, .p-badges .ic, .fact .ic, .support-card .ic, .cr-grow .ic { color: var(--primary); }
.ex-ico { background: var(--sand); }
/* Accent (gold) only where something should stand out */
.cr-qa button, .cr-qa button:nth-child(n) { background: var(--accent); color: var(--brown-900); box-shadow: 0 8px 18px -12px var(--accent-ink); }
.cr-qa span { background: rgba(255, 248, 238, .5); color: var(--brown-900); }
.cr-ws .ws-ico, .cr-ws button:nth-child(n) .ws-ico { background: var(--accent-soft); color: var(--accent-ink); }
.rb, .rb-artist, .rb-artisan, .rb-collector, .rb-creator { background: var(--accent-soft); color: var(--accent-ink); }
.grp, .grp-create, .grp-manage, .grp-connect, .grp-grow, .grp-preserve { background: var(--sand); color: var(--ink-2); }
.st-ring, .story.add.has .st-ring { background: conic-gradient(from 210deg, var(--accent), var(--primary), var(--accent)); }
.rating .ic, .stars, .rev-mini { color: var(--accent); }
.me-av, .cr-av { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent); }
/* Prices */
.price, .a-price, .p-price { color: var(--ink); }
.bp-main b, .a-bid b { color: var(--primary); }
/* Status: soft tints, never loud */
.a-pill.ok, .status, .soon-badge, .verified, .t-ok { background: var(--ok-soft); color: var(--ok); }
.t-ok { background: none; }
.a-pill.warn, .status.res, .soon-badge.pay, .prov-note { background: var(--warn-soft); color: var(--warn); }
.a-pill.bad, .soon-badge.out { background: var(--bad-soft); color: var(--bad); }
.a-pill.info, .status.info { background: var(--info-soft); color: var(--info); }
.a-pill.mute, .soon-badge.done, .status.past { background: var(--sand); color: var(--muted); }
.prov-note.ok { background: var(--ok-soft); color: var(--ok); }
.live-badge { background: var(--bad); }
.dot, .udot, .tb-badge { background: var(--bad); }
/* Avatars */
.avatar { background: var(--primary); }
.post header .avatar, .bid-hist .avatar, .seller-row .avatar, .thread .avatar, .review-head .avatar { background: #8A6A4E; }
/* Home category tiles: one calm colour */
.c-rust, .c-olive, .c-gold { background: var(--primary); }
/* =========================================================
Creator side uses the tourist design system exactly
(same cards, headers, tiles, shadows and radius as the tourist Home)
========================================================= */
.pillars-5 { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pillars-5 button { padding: 10px 2px; }
.pillars-5 b { font-size: .72rem; }
.pillars-5 small { font-size: .56rem; }
.cr-home .h-sub { margin-top: 4px; }
.cr-space-nav .ex-cat { gap: 4px; padding: 12px 4px 10px; font-size: .72rem; text-align: center; }
.cr-space-nav .ex-cat small { font-size: .62rem; font-weight: 500; color: var(--muted); }
/* creator cards = tourist "featured" cards */
.cr-card, .cr-prod, .cr-coll, .cr-space, .cr-grow button, .cr-feed button, .glance button {
border: 1px solid #F0E4D3; border-radius: 16px; background: #FFFDF9; box-shadow: 0 8px 20px -14px rgba(90, 38, 20, .45);
}
.cr-prod, .cr-coll, .cr-space { flex-basis: 168px; }
.cr-pimg, .cr-cimg, .cr-simg { height: 98px; }
.cr-pbody { padding: 9px 10px 11px; }
.cr-pbody strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .84rem; font-weight: 600; line-height: 1.25; color: var(--brown); }
.cr-pbody .price { font-size: .86rem; }
.cr-space.add { border-style: dashed; background: transparent; box-shadow: none; }
/* insights = tourist white cards, no dark admin panel */
.cr-overview > div, .cr-overview > div.big { border: 1px solid #F0E4D3; background: #FFFDF9; box-shadow: 0 8px 20px -14px rgba(90, 38, 20, .35); }
.cr-overview .big b { color: var(--brown); }
.cr-overview .big small { color: var(--muted); }
.cr-overview .big .t-ok { color: var(--ok) !important; }
/* quick actions keep the logo gold, with the tourist card shape */
.cr-qa button { border-radius: 16px; }
.grp { display: none; }
/* =========================================================
Creator Home: clean, minimal layout
One main card (profile); everything else sits on the page
with simple rows, a plain icon menu and compact buttons.
========================================================= */
.cr-home { padding-bottom: 28px; }
.cr-home .h-hello { margin-top: 12px; font-size: 1.5rem; }
.cr-home .h-sub { margin-top: 2px; font-size: .84rem; }
/* section rhythm: same gap everywhere */
.cr-home .sec-head { margin: 26px 0 10px; }
.cr-home .h-sec h2 { font-size: 1.02rem; font-weight: 700; }
.cr-home .h-sec .see-all { font-size: .78rem; }
/* 1 · Profile: the only prominent card */
.cr-home .cr-card { margin-top: 14px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 6px 18px -14px rgba(90, 38, 20, .35); }
.cr-home .cr-id { gap: 12px; align-items: flex-start; }
.cr-home .cr-av { width: 56px !important; height: 56px !important; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent); }
.cr-home .cr-id strong { font-size: .98rem; line-height: 1.2; }
.cr-home .cr-id small { font-size: .74rem; }
.cr-home .role-badges { margin: 3px 0 1px; }
.cr-home .cr-bio { margin-top: 8px; font-size: .82rem; }
.cr-home .cr-stats { margin-top: 10px; padding: 8px 0; border-block: 1px solid var(--line); }
.cr-home .cr-stats > div + div { border-left: 1px solid var(--line); }
.cr-home .cr-stats b { font-size: .98rem; }
.cr-home .cr-stats small { font-size: .64rem; }
.cr-home .cr-card .two-btns { margin-top: 10px; gap: 8px; }
.cr-home .cr-card .two-btns .btn { height: 38px; font-size: .8rem; border-radius: 12px; }
/* 2 · Five areas: a plain icon menu, no boxes */
.cr-home .pillars-5 { margin-top: 18px; gap: 0; padding: 4px 0; border-bottom: 1px solid var(--line); }
.cr-home .pillars-5 button { padding: 8px 2px 10px; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 5px; }
.cr-home .pillars-5 .ic { width: 22px; height: 22px; margin: 0; color: var(--primary); }
.cr-home .pillars-5 b { font-size: .72rem; font-weight: 600; color: var(--ink-2); }
.cr-home .pillars-5 small { display: none; }
.cr-home .pillars-5 button:active b, .cr-home .pillars-5 button:hover b { color: var(--primary); }
/* 3 · Quick actions: compact, quiet buttons */
.cr-qa2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.cr-qa2 button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 10px; border: 1px solid #EAD9BC; border-radius: 12px; background: var(--accent-soft); color: var(--primary); font-size: .78rem; font-weight: 600; }
.cr-qa2 button .ic { color: var(--accent-ink); }
.cr-qa2 button:active { background: #F0DFC0; }
/* 4 · Simple lists instead of grids of boxes */
.cr-list { display: grid; border-top: 1px solid var(--line); }
.cr-list button { display: grid; grid-template-columns: 22px 1fr auto 14px; align-items: center; gap: 10px; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.cr-list button > .ic:first-child { color: var(--primary); }
.cr-list b { font-size: .86rem; font-weight: 600; color: var(--ink); }
.cr-list small { font-size: .74rem; color: var(--muted); }
.cr-list button > .ic:last-child { color: var(--muted); }
/* 5 · Insights: one quiet strip */
.cr-insights { padding: 12px 0 2px; border-top: 1px solid var(--line); }
.ci-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ci-top small { width: 100%; font-size: .7rem; font-weight: 600; color: var(--muted); }
.ci-top b { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.ci-top .t-ok { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; color: var(--ok); }
.ci-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; padding: 10px 0; border-block: 1px solid var(--line); text-align: center; }
.ci-row > div + div { border-left: 1px solid var(--line); }
.ci-row b { display: block; font-size: .98rem; color: var(--ink); }
.ci-row small { font-size: .62rem; color: var(--muted); }
/* rails and rows: lighter cards, smaller shadows */
.cr-home .cr-prod, .cr-home .cr-coll, .cr-home .cr-space { box-shadow: 0 4px 12px -10px rgba(90, 38, 20, .4); }
.cr-home .a-card { box-shadow: none; border: 1px solid var(--line); background: #fff; margin-bottom: 8px; }
.cr-home .a-empty { border: 0; background: none; padding: 6px 2px; }
.cr-home .thread { box-shadow: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 12px 2px; }
.cr-home .list { gap: 0; }
.cr-home .cr-post { border: 1px solid var(--line); background: #fff; box-shadow: none; }
/* larger screens: a little more room, same single column */
@media (min-width: 480px) {
.cr-home .h-hello { font-size: 1.6rem; }
}
/* =========================================================
Creator Home, reference layout
soft outlined tiles · round quick-action icons · pill buttons
========================================================= */
.cr-home .cr-card { padding: 14px 14px 14px; border-color: #EFE4D6; background: #FFFCF7; box-shadow: 0 8px 22px -18px rgba(90, 38, 20, .45); }
.cr-home .cr-stats { border-top: 0; border-bottom: 1px solid #EADFD0; padding: 6px 0 12px; }
.cr-home .cr-stats b { font-size: 1.05rem; font-weight: 700; }
.cr-home .cr-stats small { font-size: .68rem; }
.cr-home .cr-card .two-btns { margin-top: 12px; gap: 10px; }
.cr-home .cr-card .two-btns .btn { height: 40px; border-radius: 999px; font-size: .84rem; }
.cr-home .cr-card .two-btns .btn-ghost { border: 1px solid #D9C6AE; color: var(--ink); }
/* Create · Share · Manage · Connect · Preserve: soft outlined tiles */
.cr-home .pillars-5 { margin-top: 16px; gap: 6px; padding: 0; border: 0; }
.cr-home .pillars-5 button { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 10px 2px 9px; border: 1px solid #EBDFCF; border-radius: 14px; background: #FFFCF7; box-shadow: none; }
.cr-home .pillars-5 .ic { width: 21px; height: 21px; margin-bottom: 3px; }
.cr-home .pillars-5 b { font-size: .72rem; font-weight: 600; color: var(--primary); }
.cr-home .pillars-5 small { display: block; font-size: .56rem; line-height: 1.3; color: var(--muted); }
/* quick actions: round gold icons with a label underneath, no card */
.cr-qa3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 16px; }
.cr-qa3 button { display: grid; justify-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; }
.qa-dot { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #F4E3C6; color: var(--primary); transition: transform .15s; }
.qa-dot .ic { width: 22px; height: 22px; }
.cr-qa3 button:hover .qa-dot, .cr-qa3 button:active .qa-dot { transform: scale(1.05); background: #EFD8B0; }
.qa-l { font-size: .72rem; line-height: 1.25; color: var(--ink); text-align: center; }
/* Creator Space: 3 × 2 soft tiles */
.cr-home .h-sec h2 { font-size: 1.15rem; }
.cr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cr-tiles button { display: grid; justify-items: center; gap: 2px; padding: 12px 4px 11px; border: 1px solid #EBDFCF; border-radius: 14px; background: #FFFCF7; text-align: center; }
.t-dot { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 5px; border-radius: 50%; background: #F4E9DC; color: var(--primary); }
.t-dot .ic { width: 19px; height: 19px; }
.cr-tiles b { font-size: .74rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.cr-tiles small { font-size: .64rem; color: var(--muted); }
.cr-tiles button:active { background: #F8F0E5; }
/* Five areas: coloured squircle icons with label and note, no card behind (reference) */
.cr-home .pillars-5 { margin-top: 18px; gap: 4px; }
.cr-home .pillars-5 .pz { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pz-ico { display: grid; place-items: center; width: 56px; height: 50px; margin-bottom: 6px; border-radius: 20px; color: #FFFCF7; box-shadow: 0 8px 16px -12px rgba(60, 30, 14, .6); transition: transform .15s; }
.pz-ico .ic { width: 24px !important; height: 24px !important; margin: 0 !important; color: #FFFCF7 !important; }
.pz-create .pz-ico { background: #D4A04A; }
.pz-share .pz-ico { background: #8C9B7D; }
.pz-manage .pz-ico { background: #C2694A; }
.pz-connect .pz-ico { background: #CFA877; }
.pz-preserve .pz-ico { background: #8E6560; }
.cr-home .pillars-5 .pz b { font-size: .76rem; font-weight: 700; color: var(--primary); }
.cr-home .pillars-5 .pz small { display: block; font-size: .58rem; line-height: 1.3; color: var(--muted); }
.pz:hover .pz-ico, .pz:active .pz-ico { transform: translateY(-2px); }
.pz:focus-visible { outline: none; }
.pz:focus-visible .pz-ico { outline: 2.5px solid var(--accent); outline-offset: 2px; }
/* Marketplace sub-categories (e.g. Paintings → Oil, Acrylic…) */
.sub-chips { padding-top: 6px; }
.sub-chips .chip { padding: 6px 12px; font-size: .74rem; background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.sub-chips .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: #EAD9BC; color: var(--primary); }
/* =========================================================
Story: a core LOCARTA feature on every product, experience,
collectible, gallery, studio and creator
========================================================= */
.story-card { margin-top: 16px; padding: 14px 14px 6px; border: 1px solid #EAD9BC; border-radius: 16px; background: linear-gradient(180deg, #FBF3E6, #FFFCF7); }
.story-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--primary); }
.story-h .ic { color: var(--accent-ink); }
.story-h small { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: var(--accent-ink); }
.story-row { padding: 9px 0; border-top: 1px dashed #EAD9BC; }
.story-row:first-of-type { border-top: 0; }
.story-row b { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.story-row p { margin-top: 3px; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.story-maker { display: flex; align-items: center; gap: 6px; width: 100%; margin: 4px 0 8px; padding: 9px 0 0; border: 0; border-top: 1px dashed #EAD9BC; background: none; text-align: left; font-size: .8rem; color: var(--ink-2); }
.story-maker b { color: var(--primary); }
.story-maker .ic:last-child { margin-left: auto; color: var(--muted); }
.story-maker:disabled { cursor: default; }
.story-maker:disabled .ic:last-child { display: none; }
.story-tag { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); font-size: .6rem; font-weight: 700; color: var(--accent-ink); width: fit-content; }
.xc-foot .story-tag { margin: 0 6px 0 auto; }
/* =========================================================
Profile pages (Artist and Tourist): cover photo + overlapping card
========================================================= */
.pf-wrap { margin-top: 14px; }
.pf-cover { position: relative; height: 150px; border-radius: 18px; overflow: hidden; background: var(--sand); }
.pf-cover .pic { position: absolute; inset: 0; }
.pf-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 26, 16, 0) 45%, rgba(43, 26, 16, .35)); pointer-events: none; }
.pf-cover.empty { background:
repeating-linear-gradient(45deg, transparent 0 9px, rgba(200, 137, 44, .18) 9px 11px, transparent 11px 20px),
repeating-linear-gradient(-45deg, transparent 0 9px, rgba(200, 137, 44, .18) 9px 11px, transparent 11px 20px), var(--sand); }
.pf-cover.empty::after { display: none; }
.pf-cover-btn { position: absolute; right: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 0; border-radius: 999px; background: rgba(255, 252, 247, .92); color: var(--primary); font-size: .72rem; font-weight: 600; box-shadow: 0 4px 12px -6px rgba(43, 26, 16, .5); backdrop-filter: blur(4px); }
.upload.cover-up { height: 150px; }
/* artist dashboard: the card overlaps the bottom of the cover */
.cr-home .pf-card { position: relative; z-index: 1; margin: -38px 10px 0; padding-top: 0; text-align: center; }
.cr-home .pf-card .cr-id { flex-direction: column; align-items: center; gap: 6px; }
.cr-home .pf-card .cr-av { width: 76px !important; height: 76px !important; margin-top: -38px; box-shadow: 0 0 0 4px #FFFCF7, 0 6px 16px -8px rgba(43, 26, 16, .5); }
.cr-home .pf-card .cr-id .grow { justify-items: center; }
.cr-home .pf-card .role-badges { justify-content: center; }
.cr-home .pf-card .cr-bio { text-align: center; }
/* profile pages: avatar overlaps the cover, stats beside it */
.me-page > .pf-cover { margin: 2px -2px 0; }
.pf-head { position: relative; z-index: 1; margin-top: -36px; padding: 0 4px; align-items: flex-end; }
.pf-head .me-av { box-shadow: 0 0 0 4px var(--bg), 0 8px 18px -8px rgba(43, 26, 16, .5) !important; }
.pf-head .me-stats { padding-bottom: 4px; }
.me-page .two-btns .btn { height: 40px; border-radius: 999px; font-size: .84rem; }
.pf-shortcuts { margin-top: 16px; }
/* five shortcuts: rich earthy colours, white icons, same size */
.pz-ico { width: 54px; height: 50px; border-radius: 18px; box-shadow: 0 8px 16px -10px rgba(43, 26, 16, .55); }
.pz-create .pz-ico { background: #B8862B; } /* deep golden ochre */
.pz-share .pz-ico { background: #66775A; } /* dark muted sage */
.pz-manage .pz-ico { background: #A9502E; } /* rich terracotta */
.pz-connect .pz-ico { background: #946238; } /* warm caramel brown */
.pz-preserve .pz-ico { background: #7A3E44; } /* deep dusty maroon */
@media (min-width: 480px) {
.pf-cover { height: 170px; }
}
/* tourist profile shortcuts use exactly the same look as the artist ones */
.pf-shortcuts { grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0; border: 0; }
.pf-shortcuts .pz { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pf-shortcuts .pz-ico .ic { width: 24px !important; height: 24px !important; margin: 0 !important; color: #FFFCF7 !important; }
.pf-shortcuts .pz b { font-size: .74rem; font-weight: 700; color: var(--primary); }
.pf-shortcuts .pz small { display: block; font-size: .58rem; line-height: 1.3; color: var(--muted); }
/* =========================================================
Creator · My Activity: summary tiles → needs attention → one list
========================================================= */
.ac-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.ac-tiles button { display: grid; justify-items: start; gap: 1px; padding: 10px 10px 9px; border: 1px solid var(--line); border-radius: 14px; background: #FFFCF7; text-align: left; transition: border-color .15s, background-color .15s; }
.ac-tiles .at-ico { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 4px; border-radius: 9px; background: var(--sand); color: var(--primary); }
.ac-tiles b { font-size: 1.15rem; line-height: 1.1; color: var(--ink); }
.ac-tiles small { font-size: .7rem; font-weight: 600; color: var(--ink-2); }
.ac-tiles em { font-style: normal; font-size: .6rem; color: var(--muted); }
.ac-tiles button[aria-selected="true"] { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 1px var(--primary) inset; }
.ac-tiles button[aria-selected="true"] .at-ico { background: var(--primary); color: #fff; }
.ac-attn { margin-top: 14px; padding: 12px 12px 6px; border-radius: 16px; background: #FBF3E6; border: 1px solid #EAD9BC; }
.ac-attn h2 { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: .9rem; font-weight: 700; color: var(--primary); }
.ac-attn h2 .a-n { margin-left: auto; }
.attn-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed #EAD9BC; }
.attn-row:first-of-type { border-top: 0; }
.attn-ico { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; }
.attn-ico.warn { background: var(--warn-soft); color: var(--warn); }
.attn-ico.bad { background: var(--bad-soft); color: var(--bad); }
.attn-row .grow { flex: 1; min-width: 0; display: grid; }
.attn-row b { font-size: .8rem; color: var(--ink); }
.attn-row small { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attn-row .btn { height: 30px; padding: 0 12px; font-size: .72rem; flex-shrink: 0; }
.ac-attn.calm { display: flex; align-items: center; gap: 8px; padding: 11px 12px; background: var(--ok-soft); border-color: transparent; color: var(--ok); font-size: .8rem; }
.ac-list { padding: 4px 18px 28px; }
.ac-list-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
.ac-list-head h2 { font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.ac-list-head .see-all { display: inline-flex; align-items: center; gap: 4px; }
.ac-filters { padding-top: 0; margin-bottom: 4px; }
.ac-card { margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.ac-top { display: flex; align-items: flex-start; gap: 10px; }
.ac-thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 12px; }
.ac-top .grow { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ac-kicker { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ac-top b { font-size: .88rem; line-height: 1.25; color: var(--ink); }
.ac-top small { font-size: .74rem; color: var(--ink-2); }
.ac-date { flex: 0 0 52px; display: grid; justify-items: center; padding: 5px 0; border-radius: 12px; background: var(--sand); color: var(--primary); line-height: 1.1; }
.ac-date b { font-size: 1.2rem; }
.ac-date small { font-size: .6rem; font-weight: 700; text-transform: uppercase; }
.ac-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; }
.ac-steps span { height: 4px; border-radius: 2px; background: var(--line); }
.ac-steps span.on { background: var(--accent); }
.ac-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: .74rem; color: var(--ink-2); }
.ac-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ac-meta b { font-size: .92rem; color: var(--ink); }
.ac-meta small { font-size: .66rem; color: var(--muted); }
.ac-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ac-actions .btn { height: 34px; padding: 0 14px; font-size: .76rem; border-radius: 999px; }
.ac-ib { margin-left: auto; width: 34px; height: 34px; background: var(--sand); color: var(--primary); }
.ac-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.ac-timeline li button { display: flex; gap: 10px; width: 100%; padding: 0 0 12px; border: 0; background: none; text-align: left; font-size: .8rem; color: var(--ink-2); position: relative; }
.ac-timeline li:not(:last-child) button::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; background: var(--line); }
.tl-dot { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; }
.tl-dot.gold { background: var(--accent); }
.tl-dot.dark { background: #3A2214; }
.ac-timeline .grow { display: grid; gap: 2px; padding-top: 4px; }
.ac-timeline small { font-size: .68rem; color: var(--muted); }
/* =========================================================
Traditional textile accents (T'nalak-style diamonds)
Used in three places only, so they frame content without clutter:
1. a woven band along the bottom of every profile cover
2. a fine woven line beside section titles
3. a hairline woven edge on top of the profile card
========================================================= */
:root {
/* small diamonds: gold, brown, gold… */
--tx-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6'%3E%3Cpath d='M0 3 3 0 6 3 3 6Z' fill='%23C8892C'/%3E%3Cpath d='M7 3 10 0 13 3 10 6Z' fill='%235A2810' fill-opacity='.55'/%3E%3C/svg%3E");
/* woven band: cream diamonds and dots on deep brown, gold edges */
--tx-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12'%3E%3Crect width='20' height='12' fill='%235A2810'/%3E%3Crect width='20' height='1.5' fill='%23C8892C'/%3E%3Crect y='10.5' width='20' height='1.5' fill='%23C8892C'/%3E%3Cpath d='M5 6 8 3 11 6 8 9Z' fill='none' stroke='%23F3E3C6' stroke-width='1'/%3E%3Ccircle cx='8' cy='6' r='.9' fill='%23C8892C'/%3E%3Ccircle cx='17' cy='6' r='1.1' fill='%23F3E3C6'/%3E%3C/svg%3E");
}
/* 1 · cover photos end in a woven band */
.pf-cover::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 12px; background: var(--tx-band) repeat-x left center / 20px 12px; }
.pf-cover.empty::before { opacity: .9; }
/* 2 · section titles carry a fine woven line to the right */
.sec-head h2, .h-sec h2, .ac-list-head h2 { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.sec-head h2::after, .h-sec h2::after, .ac-list-head h2::after { content: ""; flex: 1; min-width: 24px; height: 6px; margin-right: 10px; background: var(--tx-line) repeat-x left center / 14px 6px; opacity: .55; }
.menu-label { display: flex; align-items: center; gap: 10px; }
.menu-label::after { content: ""; flex: 1; height: 6px; background: var(--tx-line) repeat-x left center / 14px 6px; opacity: .45; }
/* 3 · profile card: hairline woven edge and calmer surface */
.cr-home .pf-card { overflow: visible; border-color: #EFE4D6; }
.cr-home .pf-card::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--tx-line) repeat-x left center / 14px 6px; opacity: .7; }
/* tourist profile: cleaner header now the shortcut cards are gone */
.me-page .me-name { margin-top: 14px; font-size: 1.25rem; }
.me-page .me-bio { padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: #FBF3E6; font-style: italic; }
.me-page .two-btns { margin-top: 14px; }
.pf-compose { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 12px; padding: 10px; border: 1px dashed #DCC7A8; border-radius: 16px; background: #FFFCF7; text-align: left; color: var(--muted); font-size: .82rem; }
.pf-compose > span:nth-child(2) { flex: 1; }
.pf-compose .avatar, .pf-compose .av-pic { width: 36px; height: 36px; font-size: .72rem; }
.pf-compose-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700; }
/* =========================================================
Bottom navigation: hover lift, press, and a "rise" when a tab opens
(same for tourist and creator navigation)
========================================================= */
.tabbar .tb-btn { gap: 2px; -webkit-tap-highlight-color: transparent; transition: color .2s ease; }
.tb-ico { position: relative; display: grid; place-items: center; width: 46px; height: 30px; border-radius: 999px; transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), background-color .25s ease; }
.tb-ico .ic { position: relative; z-index: 1; transition: transform .25s cubic-bezier(.2, .9, .3, 1.3); }
.tb-label { transition: transform .25s ease, letter-spacing .25s ease; }
/* active tab: icon sits on a soft pill, slightly raised, with the woven-gold underline */
.tabbar .tb-btn[aria-current="page"] .tb-ico { background: rgba(90, 40, 16, .1); transform: translateY(-3px); }
.tabbar .tb-btn[aria-current="page"] .tb-label { transform: translateY(-1px); }
.tabbar .tb-btn[aria-current="page"]::after { width: 18px; height: 3px; margin-left: -9px; bottom: 5px; background: var(--accent); border-radius: 3px; }
/* hover (mouse or trackpad): the icon lifts */
@media (hover: hover) {
.tabbar .tb-btn:hover { color: var(--primary); }
.tabbar .tb-btn:hover .tb-ico { transform: translateY(-4px); background: rgba(200, 137, 44, .14); }
.tabbar .tb-btn:hover .ic { transform: scale(1.08); }
}
/* press: a quick squeeze */
.tabbar .tb-btn:active .tb-ico { transform: translateY(-1px) scale(.88); }
/* keyboard focus */
.tabbar .tb-btn:focus-visible { outline: none; }
.tabbar .tb-btn:focus-visible .tb-ico { box-shadow: 0 0 0 2px var(--accent); }
@media (prefers-reduced-motion: no-preference) {
/* when you switch to a tab: the icon rises and bounces, a ripple spreads, the underline grows */
.tabbar .tb-btn.pop .tb-ico { animation: tbRise .55s cubic-bezier(.2, .9, .3, 1.25) both; }
.tabbar .tb-btn.pop .tb-ico .ic { animation: tbWiggle .55s ease .1s both; }
.tabbar .tb-btn.pop .tb-ico::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: rgba(200, 137, 44, .35); animation: tbRipple .6s ease-out both; }
.tabbar .tb-btn.pop .tb-label { animation: tbLabel .4s ease .05s both; }
.tabbar .tb-btn.pop::after { animation: tbLine .45s cubic-bezier(.2, .9, .3, 1.2) .1s both; }
.tabbar .tb-badge { animation: tbBadge 2.4s ease-in-out infinite; }
}
@keyframes tbRise { 0% { transform: translateY(6px) scale(.85); } 55% { transform: translateY(-7px) scale(1.06); } 100% { transform: translateY(-3px) scale(1); } }
@keyframes tbWiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 60% { transform: rotate(7deg); } }
@keyframes tbRipple { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@keyframes tbLabel { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: translateY(-1px); } }
@keyframes tbLine { from { width: 0; margin-left: 0; } to { width: 18px; margin-left: -9px; } }
@keyframes tbBadge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } 90% { transform: scale(.95); } }
/* Badge placement in the app (the badge look itself is in badges.css) */
.fcard .lb-row, .pcard .lb-row, .lb-card { display: flex; margin-top: 4px; }
.lb-detail { display: flex; margin: 6px 0 2px; }
.lb-inline { display: inline-flex; margin-left: 6px; vertical-align: 1px; }
.ph-who .grow > b + .lb-inline { margin: 2px 0 1px; display: flex; }
.lb-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.lb-profile .role-badges { margin: 0; }
.lv-body .lb-row, .pr-main .lb-row, .cr-id .lb-row { display: flex; margin: 2px 0; }
.cr-home .pf-card .cr-id .lb-row { justify-content: center; }
.seller-row .grow > .lb-row { margin-top: 3px; }
/* badges inside cards never cause sideways scrolling */
.fcard, .pcard, .lv-card, .xcard, .post { min-width: 0; }
.fcard .lb, .pcard .lb, .lv-card .lb { max-width: 100%; }
/* =========================================================
LOCARTA v3 screens: Tourist Home hero, Creator workspace,
Community Story Exchange (same palette, fonts and weave)
========================================================= */
/* ---------- 1 · Tourist Home: greeting inside the cultural hero ---------- */
.r3-hero { position: relative; height: 212px; margin-top: 12px; border-radius: 22px; overflow: hidden; background: #E9D7BC; box-shadow: 0 14px 28px -20px rgba(90, 40, 16, .6); isolation: isolate; }
.r3-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.r3-slide.on { opacity: 1; }
.r3-slide .pic { position: absolute; inset: 0; }
.r3-slide.on .pic img { animation: r3-kb 6s ease-out both; }
@keyframes r3-kb { from { transform: scale(1.06); } to { transform: scale(1); } }
/* parchment fade on the left so the greeting stays readable on every photo */
.r3-paper { position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(90deg, rgba(250, 243, 230, .97) 0%, rgba(250, 243, 230, .9) 38%, rgba(250, 243, 230, .35) 62%, rgba(250, 243, 230, 0) 78%); }
.r3-copy { position: absolute; left: 18px; top: 18px; bottom: 18px; z-index: 2; width: 58%; display: flex; flex-direction: column; }
.r3-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.r3-copy h1 { margin-top: 6px; font-size: 1.12rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--primary); }
.r3-rule { display: block; width: 74%; height: 6px; margin-top: 10px; background: var(--tx-line) repeat-x left center / 14px 6px; opacity: .8; }
.r3-caption { margin-top: auto; font-size: .72rem; font-weight: 600; color: var(--ink-2); }
.r3-dots { position: absolute; right: 16px; bottom: 14px; z-index: 3; display: flex; gap: 5px; }
.r3-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 252, 247, .7); transition: width .3s, background-color .3s; }
.r3-dots button.on { width: 20px; background: #FFFCF7; }
.r3-go { position: absolute; right: 14px; top: 14px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 252, 247, .92); color: var(--primary); }
.r3-home .h-search { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .r3-slide { transition: none; } .r3-slide.on .pic img { animation: none; } }
/* wide Live Auction cards */
.r3-lots { scroll-snap-type: x mandatory; }
.r3-lot { flex: 0 0 calc(100% - 26px); display: grid; grid-template-columns: 40% 1fr; scroll-snap-align: start; border: 1px solid #F0E4D3; border-radius: 18px; overflow: hidden; background: #FFFDF9; box-shadow: 0 8px 20px -16px rgba(90, 38, 20, .5); }
.r3-lot-img { position: relative; padding: 0; border: 0; min-height: 168px; }
.r3-lot-img .pic { position: absolute; inset: 0; }
.r3-lot-img .live-badge { position: absolute; left: 8px; top: 8px; }
.r3-lot-body { display: grid; align-content: start; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
.r3-lot-body strong { font-size: .9rem; line-height: 1.25; color: var(--ink); }
.r3-lot-body .meta { font-size: .72rem; }
.r3-lot-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 6px; margin-top: 6px; }
.r3-lot-stats span { display: grid; }
.r3-lot-stats b { font-size: .82rem; color: var(--ink); white-space: nowrap; }
.r3-lot-stats small { font-size: .6rem; color: var(--muted); }
.r3-bid { width: 100%; margin-top: 8px; height: 34px; border-radius: 999px; }
/* ---------- 2 · Creator Home: one organised workspace ---------- */
.cw-hello { margin-top: 10px; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.cw-hello small { display: block; margin-top: 2px; font-size: .78rem; font-weight: 400; color: var(--muted); }
.cw-profile { margin-top: 12px; }
.cw-cover { position: relative; }
.cw-cover .pf-cover { height: 158px; }
.cw-cover-tag { position: absolute; left: 18px; top: 26px; z-index: 2; font-size: 1.05rem; font-style: italic; font-weight: 500; line-height: 1.3; color: #FFF8EE; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); pointer-events: none; }
.cw-card { position: relative; z-index: 2; margin: -26px 6px 0; padding: 0 14px 14px; border: 1px solid #EFE4D6; border-radius: 20px; background: #FFFCF7; box-shadow: 0 10px 24px -18px rgba(90, 38, 20, .5); }
.cw-id { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: end; }
.cw-av { width: 88px !important; height: 88px !important; margin-top: -30px; font-size: 1.6rem; box-shadow: 0 0 0 4px #FFFCF7, 0 8px 18px -8px rgba(43, 26, 16, .5); }
.cw-who { min-width: 0; padding-top: 10px; }
.cw-who h1 { font-size: 1.15rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.cw-handle { font-size: .78rem; color: var(--muted); }
.cw-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 3px; }
.cw-badges .role-badges { margin: 0; }
.cw-loc { display: flex; align-items: center; gap: 4px; font-size: .76rem; color: var(--ink-2); }
.cw-bio { margin-top: 10px; font-size: .82rem; font-style: italic; line-height: 1.5; color: var(--ink-2); }
.cw-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; padding: 10px 0; border-block: 1px solid #EADFD0; text-align: center; }
.cw-stats > div + div { border-left: 1px solid #EADFD0; }
.cw-stats b { display: block; font-size: 1.02rem; color: var(--ink); }
.cw-stats small { font-size: .64rem; color: var(--muted); }
.cw-btns { margin-top: 12px; gap: 10px; }
.cw-btns .btn { height: 40px; border-radius: 999px; font-size: .82rem; }
.cw-btns .btn-ghost { border: 1px solid #D9C6AE; color: var(--ink); }
/* the five creator functions: quiet outlined tiles, label in terracotta */
.cw-funcs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 16px; }
.cw-func { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 3px 9px; border: 1px solid #EBDFCF; border-radius: 14px; background: #FFFCF7; text-align: center; transition: border-color .15s, transform .15s; }
.cw-func .ic { width: 22px; height: 22px; color: var(--primary); }
.cw-func small { font-size: .56rem; line-height: 1.25; color: var(--muted); min-height: 2.5em; }
.cw-func b { font-size: .74rem; font-weight: 700; color: #A9502E; }
@media (hover: hover) { .cw-func:hover { border-color: var(--accent); transform: translateY(-2px); } }
/* workspace strip: one container with dividers */
.cw-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); margin-top: 12px; border: 1px solid #EBDFCF; border-radius: 16px; background: #FFFCF7; overflow-x: auto; scrollbar-width: none; }
.cw-strip::-webkit-scrollbar { display: none; }
.cw-strip button { display: grid; align-content: start; gap: 2px; padding: 10px 10px 9px; border: 0; background: none; text-align: left; }
.cw-strip button + button { border-left: 1px solid #EFE4D6; }
.cw-strip-h { display: flex; align-items: center; gap: 5px; font-size: .64rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.cw-strip-h .ic { color: var(--primary); }
.cw-strip b { font-size: 1.25rem; color: var(--ink); line-height: 1.2; }
.cw-strip small { display: flex; align-items: center; gap: 4px; font-size: .64rem; color: var(--muted); }
.cw-strip small .live-badge { padding: 1px 5px; font-size: .5rem; }
.cw-open { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: .74rem; font-weight: 600; color: var(--ink); }
.cw-open i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
/* tabs: Cultural Stories · Community · Activity */
.cw-tabs { display: grid; grid-template-columns: 1.15fr 1fr 1fr; margin-top: 12px; padding: 4px; border: 1px solid #EBDFCF; border-radius: 16px; background: #FFFCF7; }
.cw-tabs button { display: flex; align-items: center; gap: 7px; padding: 8px; border: 0; border-radius: 12px; background: none; text-align: left; color: var(--ink-2); min-width: 0; }
.cw-tabs button span { display: grid; min-width: 0; }
.cw-tabs b { font-size: .74rem; color: var(--ink); white-space: nowrap; }
.cw-tabs small { font-size: .58rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-tabs button[aria-selected="true"] { background: var(--primary); color: #FFF8EE; }
.cw-tabs button[aria-selected="true"] b, .cw-tabs button[aria-selected="true"] small { color: #FFF8EE; }
.cw-thumb { position: relative; flex: 0 0 108px; height: 112px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; scroll-snap-align: start; }
.cw-thumb .pic { position: absolute; inset: 0; }
.cw-thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px; background: linear-gradient(0deg, rgba(43, 26, 16, .78), transparent); color: #FFF8EE; font-size: .64rem; font-weight: 600; text-align: left; line-height: 1.2; }
/* ---------- 3 · Community: Story Exchange ---------- */
.sxc-hero { position: relative; height: 190px; margin-top: 12px; border-radius: 22px; overflow: hidden; background: #E9D7BC; isolation: isolate; }
.sxc-hero > .pic { position: absolute; inset: 0; }
.sxc-copy { position: absolute; left: 18px; top: 18px; z-index: 2; width: 60%; }
.sxc-copy h1 { margin-top: 4px; font-size: 1.35rem; font-weight: 700; line-height: 1.15; color: var(--primary); }
.sxc-copy p:last-child { margin-top: 6px; font-size: .74rem; line-height: 1.4; color: var(--ink-2); }
.sxc-create { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border: 1px solid rgba(255, 248, 238, .6); border-radius: 999px; background: rgba(43, 26, 16, .78); color: #FFF8EE; font-size: .8rem; font-weight: 600; backdrop-filter: blur(4px); }
.sxc-tabs .chip { display: inline-flex; align-items: center; gap: 6px; }
/* story collections: arch-shaped frames (like a torogan doorway), themes not people */
.sxc-colls { display: flex; gap: 12px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 6px; scrollbar-width: none; }
.sxc-colls::-webkit-scrollbar { display: none; }
.sxc-coll { flex: 0 0 74px; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; }
.sxc-coll .arch { position: relative; display: block; width: 66px; height: 80px; border-radius: 33px 33px 12px 12px; overflow: hidden; border: 2px solid #E3C99A; box-shadow: 0 0 0 3px var(--bg), 0 6px 14px -8px rgba(90, 40, 16, .5); }
.sxc-coll .arch .pic, .sxc-coll .arch .av-pic, .sxc-coll .arch .avatar { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border-radius: 0; }
.sxc-coll.on .arch { border-color: var(--primary); }
.sxc-coll i { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; border: 2px solid #FFFCF7; }
.sxc-coll small { font-size: .62rem; font-weight: 600; line-height: 1.2; color: var(--ink-2); text-align: center; }
/* a story entry: editorial, not a social post (no card, woven divider between entries) */
.sx-list { margin-top: 6px; }
.sx { position: relative; padding: 16px 0 16px 14px; border-left: 3px solid var(--accent); }
.sx + .sx { margin-top: 18px; }
.sx + .sx::before { content: ""; position: absolute; left: -3px; right: 0; top: -12px; height: 6px; background: var(--tx-line) repeat-x left center / 14px 6px; opacity: .5; }
.sx-kicker { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.sx-title { margin-top: 3px; font-size: 1.08rem; font-weight: 700; line-height: 1.25; }
.sx-title button { padding: 0; border: 0; background: none; text-align: left; color: var(--ink); }
.sx-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.sx-who { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; text-align: left; }
.sx-av { width: 32px !important; height: 32px !important; font-size: .64rem; }
.sx-who b { display: block; font-size: .8rem; color: var(--primary); }
.sx-who small { display: inline-flex; align-items: center; gap: 3px; font-size: .66rem; color: var(--muted); }
.sx-text { margin-top: 8px; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.sx-imgs { display: grid; gap: 6px; margin-top: 10px; }
.sx-imgs.n2 { grid-template-columns: 1.3fr 1fr; }
.sx-img { height: 150px; border-radius: 14px; }
.sx-context { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 9px 12px; border: 1px dashed #DCC7A8; border-radius: 12px; background: #FBF3E6; text-align: left; font-size: .8rem; font-weight: 600; color: var(--ink); }
.sx-context .ic:first-child { color: var(--accent-ink); }
.sx-context span:not(.sx-place) { flex: 1; display: grid; min-width: 0; }
.sx-context small { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.sx-place { font-size: .7rem; font-weight: 500; color: var(--muted); }
.sx-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sx-act { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 1px solid #E5D6C1; border-radius: 999px; background: #FFFCF7; font-size: .72rem; font-weight: 600; color: var(--primary); }
.sx-act.main { background: var(--primary); border-color: var(--primary); color: #FFF8EE; }
.sx-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.sx-appr, .sx-save { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; border: 0; background: none; font-size: .74rem; color: var(--muted); }
.sx-appr.on { color: var(--bad); }
.sx-appr.on .ic, .sx-save.on .ic { fill: currentColor; }
.sx-save.on { color: var(--primary); }
/* culture conversations, local knowledge, meet the community */
.cv, .lk { border-top: 1px solid var(--line); }
.cv-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cv-q { flex: 1; display: grid; gap: 4px; padding: 11px 2px; border: 0; background: none; text-align: left; }
.cv-q b { font-size: .86rem; color: var(--ink); }
.cv-q small { display: flex; align-items: center; gap: 6px; font-size: .68rem; color: var(--muted); }
.cv-q .av-stack .stk { width: 22px !important; height: 22px !important; border-color: var(--bg); }
.sxc-ask { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; }
.lk-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--muted); }
.lk-ico { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); }
.lk-row .grow { flex: 1; display: grid; gap: 2px; min-width: 0; }
.lk-row b { font-size: .84rem; color: var(--ink); }
.lk-row small { font-size: .7rem; line-height: 1.35; color: var(--muted); }
.mc { flex: 0 0 104px; display: grid; justify-items: center; gap: 5px; text-align: center; scroll-snap-align: start; }
.mc-open { display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; }
.mc-av { width: 60px !important; height: 60px !important; margin-bottom: 4px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px #E3C99A; }
.mc-open b { font-size: .76rem; color: var(--ink); }
.mc-open small { font-size: .62rem; color: var(--muted); }
.mc .f-btn { height: 28px; padding: 0 12px; font-size: .7rem; }
/* v3 fixes: greeting first and largest; roomier creator strip and tabs */
.r3-hello { font-size: 1.45rem; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: var(--primary); }
.r3-sub { margin-top: 6px; font-size: .8rem; line-height: 1.4; color: var(--ink-2); }
.r3-copy { width: 60%; }
.cw-strip { grid-auto-columns: minmax(104px, 1fr); }
.cw-strip-h { white-space: normal; line-height: 1.2; min-height: 2.4em; align-items: flex-start; }
.cw-tabs { grid-template-columns: 1.2fr 1fr 1fr; }
.cw-tabs button { gap: 6px; padding: 8px 6px; }
@media (max-width: 420px) {
.cw-tabs small { display: none; }
.cw-tabs .ic { width: 16px; height: 16px; flex-shrink: 0; }
.cw-tabs b { font-size: .72rem; }
}
/* Log in · Sign up */
.sp-motto { margin-top: 12px; max-width: 30ch; font-size: .9rem; font-style: italic; line-height: 1.45; color: var(--accent-ink); text-align: center; }
.auth-forgot { display: flex; justify-content: flex-end; margin-top: 8px; }
.auth-forgot .link { font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; }
.auth-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 16px; padding: 9px 12px; border-radius: 12px; background: var(--sand); font-size: .72rem; line-height: 1.4; color: var(--ink-2); }
.auth-note .ic { flex-shrink: 0; margin-top: 2px; color: var(--accent-ink); }
.auth-roles legend { width: 100%; }
.splash-art > .textile, .auth-page > .textile { width: 100%; align-self: stretch; }
/* =========================================================
Tourist Profile · My Cultural Interests: light icon tiles
========================================================= */
.ci-head { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.ci-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ci-head h2 .ic { color: var(--accent); }
.ci-rule { flex: 1; height: 1px; background: linear-gradient(90deg, #E3D2B8, transparent); position: relative; }
.ci-rule::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border: 1.5px solid var(--accent); transform: rotate(45deg); opacity: .7; }
.ci-head small { font-size: .66rem; color: var(--muted); white-space: nowrap; }
.ci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.ci-tile { display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 76px; padding: 9px 3px 8px; border: 1px solid #F0E5D5; border-radius: 14px; background: #FBF5EB; color: var(--primary); text-align: center; transition: background-color .15s, border-color .15s, transform .15s; }
.ci-tile .ic { width: 24px; height: 24px; stroke-width: 1.6; color: var(--primary); }
.ci-tile span { font-size: .64rem; font-weight: 500; line-height: 1.2; color: var(--ink-2); }
button.ci-tile[aria-pressed="false"] { background: #FFFCF7; }
button.ci-tile[aria-pressed="false"] .ic { color: #8C7663; }
button.ci-tile[aria-pressed="false"] span { color: var(--muted); }
button.ci-tile[aria-pressed="true"] { background: #F8EAD0; border-color: #D9A15E; }
button.ci-tile[aria-pressed="true"] .ic { color: #A9502E; }
@media (hover: hover) { button.ci-tile:hover { transform: translateY(-2px); border-color: var(--accent); } }
button.ci-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ci-statement { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 11px 14px; border-radius: 14px; overflow: hidden; font-size: .78rem; line-height: 1.4; color: var(--ink-2);
background: #FBF3E6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='50' viewBox='0 0 150 50'%3E%3Cpath d='M10 50 52 18l18 14 26-26 44 44' fill='none' stroke='%23C8892C' stroke-opacity='.28' stroke-width='1.4'/%3E%3Cpath d='M40 50 70 30l16 10 18-16 30 26' fill='none' stroke='%23C8892C' stroke-opacity='.18' stroke-width='1.2'/%3E%3C/svg%3E") right bottom / 150px 50px no-repeat; }
.ci-motif { flex-shrink: 0; color: var(--accent); }
.ci-motif .ic { width: 26px; height: 26px; }
.ci-statement > span:last-child { max-width: 62%; }
/* even 3 × 4 grid for the 12 interests; 6 across on wider screens */
.ci-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 560px) { .ci-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ci-rule { min-width: 22px; }
@media (max-width: 380px) { .ci-head small { display: none; } }
/* =========================================================
Tourist Profile v2: calm header + editorial interests list
========================================================= */
/* header: tighter, connected spacing */
.me-page .pf-head { margin-top: -34px; }
.me-page .me-name { margin-top: 10px; font-size: 1.22rem; line-height: 1.2; }
.me-page .me-handle { margin-top: 1px; }
.me-page .lb-profile { margin-top: 6px; }
.me-page .me-loc { margin-top: 6px; }
.me-page .me-bio { margin-top: 10px; padding: 8px 12px; font-size: .84rem; }
.me-page .two-btns { margin-top: 12px; gap: 8px; }
.me-page .two-btns .btn { height: 38px; font-size: .8rem; }
/* My Cultural Interests: a quiet two-column list, no tiles */
.ci-head { margin: 24px 0 6px; }
.ci-head h2 { font-size: .98rem; }
.ci-head h2 .ic { color: var(--accent-ink); opacity: .8; }
.ci-rule { height: 1px; background: #E8DCCB; }
.ci-rule::after { width: 7px; height: 7px; top: -3px; border-width: 1px; opacity: .6; }
.ci-head small { font-size: .68rem; color: var(--muted); }
.ci-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.ci-list li { min-width: 0; }
.ci-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 2px; border: 0; border-bottom: 1px solid #F1E7DA; border-radius: 0; background: none; text-align: left; font: inherit; color: var(--ink-2); }
.ci-item .ic { flex-shrink: 0; width: 18px; height: 18px; stroke-width: 1.6; color: #A08A76; }
.ci-item > span { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-item.on .ic { color: var(--primary); }
.ci-item.on > span { color: var(--ink); font-weight: 600; }
.ci-check { display: grid; place-items: center; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
.ci-check .ic { width: 10px; height: 10px; stroke-width: 3; color: var(--accent-ink); }
button.ci-item { cursor: pointer; transition: color .15s; }
@media (hover: hover) { button.ci-item:hover > span { color: var(--primary); } }
button.ci-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.ci-line { margin-top: 12px; font-size: .78rem; font-style: italic; color: var(--muted); }
.ci-line::before { content: "◆"; margin-right: 8px; font-size: .55rem; font-style: normal; color: var(--accent); vertical-align: 2px; }
/* the old tile styles are no longer used */
.ci-grid, .ci-statement { display: none; }
/* long labels wrap onto a balanced second line instead of being cut off */
.ci-list { column-gap: 16px; }
.ci-item { gap: 9px; align-items: center; }
.ci-item > span { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; font-size: .8rem; }
/* =========================================================
Explore: a soft weaving photograph behind the header only
========================================================= */
.ex-top { position: relative; isolation: isolate; padding-bottom: 6px; }
.ex-top-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ex-top-bg .pic { position: absolute; inset: 0; background: none; }
.ex-top-bg .pic img { object-position: center 40%; opacity: .2; filter: saturate(.7) sepia(.2); }
/* cream fade: lighter at the top, melting fully into the page above the category cards */
.ex-top-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250, 246, 240, .55) 0%, rgba(250, 246, 240, .35) 45%, var(--bg) 100%); }
.ex-top-in { padding: 0 18px; }
.ex-top + div > .ex-cats { margin-top: 8px; }
/* =========================================================
Tourist Profile: interests (6 + See More) and up to 4 post photos
========================================================= */
.ci-more { margin-left: 2px; font-size: .78rem; font-weight: 600; color: var(--accent-ink); white-space: nowrap; }
.ci-more:hover { color: var(--primary); }
.ci-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
.ci-item { gap: 7px; min-height: 42px; }
.ci-item .ic { width: 17px; height: 17px; }
.ci-item > span { font-size: .76rem; }
@media (max-width: 370px) { .ci-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* photo grid: 1 large · 2 side by side · 3 one tall + two stacked · 4 = 2 × 2 */
.pg { display: grid; gap: 6px; margin-top: 10px; border-radius: 14px; overflow: hidden; }
.pg .pi { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--sand); cursor: zoom-in; }
.pg .pi .pic { position: absolute; inset: 0; }
.pg-1 .pi { aspect-ratio: 4 / 3; height: auto; }
.pg-2 { grid-template-columns: 1fr 1fr; }
.pg-2 .pi { aspect-ratio: 4 / 5; height: auto; }
.pg-3 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.pg-3 .pi { height: 100%; }
.pg-3 .pi:first-child { grid-row: 1 / span 2; }
.pg-4 { grid-template-columns: 1fr 1fr; }
.pg-4 .pi { aspect-ratio: 1; height: auto; }
.post-imgs.pg .pi { height: auto; }
.pg-3.post-imgs .pi { height: 100%; }
.sx-imgs.pg .pi { height: auto; }
.pg .pi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* photo preview */
.photo-view { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 56px 12px; background: rgba(20, 12, 6, .92); }
.photo-view img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
.pv-x { position: absolute; top: calc(var(--safe-top) + 12px); right: 12px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 252, 247, .15); color: #fff; }
.pv-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; margin-top: -21px; border: 0; border-radius: 50%; background: rgba(255, 252, 247, .15); color: #fff; }
.pv-nav.prev { left: 10px; } .pv-nav.next { right: 10px; }
.pv-count { position: absolute; bottom: calc(var(--safe-bottom) + 18px); left: 0; right: 0; text-align: center; font-size: .8rem; color: #F3E3C6; }
/* choosing photos for a post */
.pp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.pp-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--sand); }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-thumb button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(43, 26, 16, .7); color: #fff; }
.pp-add { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; aspect-ratio: 1; border: 1.5px dashed #D9C6AD; border-radius: 10px; background: #fff; color: var(--muted); font-size: .66rem; font-weight: 600; text-align: center; cursor: pointer; }
.pp-add:only-child { grid-column: 1 / -1; aspect-ratio: auto; height: 96px; }
.pp-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pp-add small { font-size: .6rem; font-weight: 500; }
/* =========================================================
LOCARTA AI Cultural Guide + Creator Assistant
========================================================= */
.gd-ask-this { margin-top: 12px; }
.gd { gap: 10px; padding: 6px 16px 14px; }
.gd-intro { display: grid; justify-items: center; gap: 6px; padding: 14px 8px 2px; text-align: center; }
.gd-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--primary); color: #FFF8EE; box-shadow: 0 10px 22px -14px var(--primary); }
.gd-intro h2 { font-size: 1.1rem; color: var(--ink); }
.gd-intro p { max-width: 34ch; font-size: .84rem; line-height: 1.5; color: var(--ink-2); }
.gd-sugs { display: grid; gap: 6px; }
.gd-sug { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #FFFCF7; text-align: left; font-size: .82rem; color: var(--ink); }
.gd-sug .ic { color: var(--accent-ink); flex-shrink: 0; }
.gd-ctx { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 8px; border: 1px dashed #DCC7A8; border-radius: 14px; background: #FBF3E6; }
.gd-ctx-pic { flex: 0 0 40px; height: 40px; border-radius: 10px; }
.gd-ctx .grow { flex: 1; display: grid; min-width: 0; }
.gd-ctx small { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.gd-ctx b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-msg { display: flex; gap: 8px; }
.gd-msg.me { justify-content: flex-end; }
.gd-msg.me p { max-width: 80%; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: var(--primary); color: #fff; font-size: .86rem; line-height: 1.45; }
.gd-av { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); }
.gd-msg.err .gd-av { background: var(--bad-soft); color: var(--bad); }
.gd-body { flex: 1; min-width: 0; display: grid; gap: 8px; justify-items: start; }
.gd-text { font-size: .86rem; line-height: 1.55; color: var(--ink); }
.gd-basis { font-size: .62rem; }
.gd-cards { width: 100%; margin-top: 0; gap: 8px; }
.gd-follow { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-follow .chip { padding: 6px 11px; font-size: .74rem; white-space: normal; text-align: left; }
.gd-typing { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; }
.gd-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .3; }
@media (prefers-reduced-motion: no-preference) { .gd-typing i { animation: gdDot 1s infinite; } .gd-typing i:nth-child(2) { animation-delay: .15s; } .gd-typing i:nth-child(3) { animation-delay: .3s; } }
@keyframes gdDot { 50% { opacity: 1; transform: translateY(-2px); } }
.gd-form { padding-bottom: 6px; }
.gd-foot { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 0 16px 10px; background: var(--bg); }
.gd-opt { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--ink-2); }
.gd-opt input { accent-color: var(--primary); }
.gd-opt select { padding: 2px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: .72rem; }
.gd-foot p { width: 100%; font-size: .64rem; line-height: 1.35; color: var(--muted); }
/* Creator Assistant inside the forms */
.ai-bar { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 14px; background: #FBF3E6; }
.ai-btn { flex-shrink: 0; gap: 6px; }
.ai-bar small { font-size: .68rem; line-height: 1.35; color: var(--ink-2); }
.ai-panel { margin-top: 10px; padding: 12px; border: 1px solid #EAD9BC; border-radius: 16px; background: #FFFCF7; }
.ai-head { display: grid; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ai-head b { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--primary); }
.ai-head small, .ai-note { font-size: .68rem; line-height: 1.4; color: var(--muted); }
.ai-row { display: grid; gap: 6px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ai-row > b { font-size: .78rem; color: var(--ink); }
.ai-orig { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--sand); font-size: .78rem; line-height: 1.45; color: var(--ink-2); }
.ai-orig small, .ai-sugg small { display: block; margin-bottom: 2px; font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ai-sugg { display: grid; font-size: .78rem; }
.ai-sugg input, .ai-sugg textarea { width: 100%; padding: 8px 10px; border: 1px solid #E3D2B8; border-radius: 10px; background: #fff; font: inherit; font-size: .82rem; line-height: 1.45; color: var(--ink); resize: vertical; }
.ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ai-end { justify-content: space-between; padding-top: 10px; }
.ai-done { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; color: var(--ok); }
.ai-list { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: .78rem; line-height: 1.45; color: var(--ink-2); }
.ai-list.q li::marker { content: "? "; color: var(--accent-ink); font-weight: 700; }
.ai-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-tr { display: flex; gap: 8px; align-items: center; }
.ai-tr select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: .8rem; }
.ai-msg { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .78rem; line-height: 1.45; color: var(--ink-2); }
.ai-msg.err { color: var(--bad); margin-bottom: 8px; }
/* =========================================================
LOKA by LOCARTA · AI cultural discovery companion
========================================================= */
.loka-av { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(145deg, #6B3A1E, #5A2810); color: #F4D59A; box-shadow: inset 0 0 0 1px rgba(244, 213, 154, .35); }
.loka-av .ic { width: 20px; height: 20px; stroke-width: 1.7; }
.loka-av.sm { flex-basis: 28px; width: 28px; height: 28px; border-radius: 10px; }
.loka-av.sm .ic { width: 16px; height: 16px; }
.loka-av.md { width: 44px; height: 44px; border-radius: 14px; }
.loka-av.md .ic { width: 24px; height: 24px; }
/* floating button: inside the app frame, above the bottom navigation */
.loka-fab { position: absolute; right: 14px; bottom: calc(var(--tabbar) + 18px + var(--safe-bottom) + 14px); z-index: 20; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px 0 12px; border: 1px solid rgba(244, 213, 154, .45); border-radius: 999px; background: #5A2810; color: #FFF8EE; font-size: .8rem; font-weight: 600; box-shadow: 0 10px 22px -10px rgba(43, 26, 16, .7); }
.loka-fab .ic { width: 20px; height: 20px; color: #F4D59A; stroke-width: 1.7; }
@media (hover: hover) { .loka-fab:hover { background: #45200C; } }
@media (prefers-reduced-motion: no-preference) { .loka-fab { animation: lkIn .4s ease-out both; } }
@keyframes lkIn { from { opacity: 0; transform: translateY(8px); } }
/* panel: a bottom sheet on phones (stops above the bottom navigation), a floating panel on wide screens */
.loka-panel { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); width: min(440px, 100%); top: max(56px, 9vh); bottom: calc(var(--tabbar) + 18px + var(--safe-bottom)); display: flex; flex-direction: column; border-radius: 22px 22px 16px 16px; background: var(--bg); box-shadow: 0 -10px 40px -10px rgba(43, 26, 16, .45); overflow: hidden; }
@media (min-width: 480px) { .loka-panel { bottom: calc(24px + var(--tabbar) + 18px); } }
@media (min-width: 900px) { .loka-panel { left: auto; right: 24px; transform: none; width: 380px; top: auto; bottom: 24px; height: min(600px, calc(100vh - 48px)); border-radius: 20px; box-shadow: 0 20px 50px -16px rgba(43, 26, 16, .5); } }
.lk-head, .lk-topbar { display: flex; align-items: center; gap: 10px; padding: 12px 10px 10px 14px; border-bottom: 1px solid var(--line); }
.lk-topbar { padding-left: 8px; }
.lk-head .grow, .lk-topbar .grow { flex: 1; display: grid; min-width: 0; }
.lk-head b, .lk-topbar b { font-size: .98rem; color: var(--ink); }
.lk-head small, .lk-topbar small { font-size: .66rem; color: var(--muted); }
.lk-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.lk-msg { display: flex; gap: 8px; }
.lk-msg.me { justify-content: flex-end; }
.lk-msg.me p { max-width: 82%; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: var(--primary); color: #fff; font-size: .86rem; line-height: 1.45; white-space: pre-wrap; }
.lk-body { flex: 1; min-width: 0; display: grid; gap: 7px; justify-items: start; padding: 9px 12px; border-radius: 4px 16px 16px 16px; background: #FFFCF7; border: 1px solid #EFE4D6; }
.lk-msg.err .lk-body { background: var(--bad-soft); border-color: transparent; }
.lk-text { font-size: .86rem; line-height: 1.55; color: var(--ink); }
.lk-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.lk-tags .a-pill { font-size: .6rem; }
.lk-cards { width: 100%; margin-top: 0; gap: 8px; }
.lk-cards .row { box-shadow: none; border: 1px solid var(--line); }
.lk-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-go { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid #E5D6C1; border-radius: 999px; background: #fff; font-size: .74rem; font-weight: 600; color: var(--primary); }
.lk-follow { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-follow .chip, .lk-prompts .chip { padding: 6px 11px; font-size: .74rem; white-space: normal; text-align: left; }
.lk-prompts { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 36px; }
.lk-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-left: 36px; }
.lk-quick button { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #EBDFCF; border-radius: 14px; background: #FFFCF7; text-align: left; font-size: .76rem; font-weight: 600; color: var(--ink); }
.lk-quick .ic { flex-shrink: 0; color: var(--accent-ink); }
.lk-ctx { display: flex; align-items: center; gap: 10px; margin-left: 36px; padding: 7px 6px 7px 8px; border: 1px dashed #DCC7A8; border-radius: 14px; background: #FBF3E6; }
.lk-ctx-pic { flex: 0 0 36px; height: 36px; border-radius: 10px; }
.lk-ctx .grow { flex: 1; display: grid; min-width: 0; }
.lk-ctx small { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.lk-ctx b { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-form { align-items: flex-end; }
.lk-form textarea { flex: 1; min-width: 0; min-height: 46px; max-height: 120px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 22px; background: #fff; font: inherit; font-size: .9rem; resize: none; }
.lk-form textarea:focus { outline: none; border-color: var(--gold); }
.lk-note { flex-shrink: 0; padding: 0 16px 10px; font-size: .62rem; line-height: 1.4; color: var(--muted); background: var(--bg); }
.lk-note .link { font-size: inherit; text-decoration: underline; }
.loka-row .dm-av { flex: 0 0 44px; }
.lk-ai { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: .58rem; font-weight: 800; letter-spacing: .08em; vertical-align: 1px; }
.loka-row { border: 1px solid #EAD9BC; background: #FFFCF7; }
/* compact round floating button; content can always scroll clear of it */
.loka-fab { width: 50px; height: 50px; padding: 0; justify-content: center; border-radius: 50%; transition: opacity .2s, transform .2s; }
.loka-fab .ic { width: 24px; height: 24px; }
.loka-fab.away { opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none; }
.app:has(.loka-fab) .screen > :last-child { padding-bottom: 76px; }
.loka-fab.left { right: auto; left: 14px; }
/* =========================================================
Creator progress: completion, assessments, skills, badges
========================================================= */
.pc { margin-top: 16px; padding: 14px 14px 10px; border: 1px solid #EBDFCF; border-radius: 18px; background: #FFFCF7; }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-top h2 { font-size: .98rem; font-weight: 700; color: var(--ink); }
.pc-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; }
.pc-sum b { font-size: .86rem; color: var(--primary); }
.pc-sum small { font-size: .7rem; color: var(--muted); }
.pc-bar { height: 8px; margin-top: 6px; border-radius: 4px; background: #EFE4D4; overflow: hidden; }
.pc-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #C8892C, #8A5A14); transition: width .4s ease; }
.pc-list { list-style: none; margin: 10px 0 0; padding: 0; }
.pc-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid #F1E7DA; }
.pc-ic { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--sand); color: var(--primary); }
.pc-item.done .pc-ic { background: var(--ok-soft); color: var(--ok); }
.pc-item .grow { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pc-item b { font-size: .82rem; color: var(--ink); }
.pc-item small { font-size: .7rem; line-height: 1.35; color: var(--muted); }
.pc-note { color: var(--accent-ink) !important; }
.pc-side { display: grid; justify-items: end; gap: 6px; flex-shrink: 0; }
.pc-side .a-pill { font-size: .6rem; }
.pc-side .link { font-size: .74rem; }
.pc-fine { margin-top: 8px; font-size: .66rem; line-height: 1.45; color: var(--muted); }
.pc-done { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 14px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--ok-soft); color: var(--ok); font-size: .78rem; text-align: left; }
.pc-done b { color: var(--primary); }
.as-wrap { padding: 4px 18px 28px; }
.as-title { font-size: 1.25rem; color: var(--ink); }
.as-res-k { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.as-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 10px; }
.as-facts div { padding: 8px 6px; border-radius: 12px; background: var(--sand); text-align: center; }
.as-facts dt { font-size: .6rem; color: var(--muted); }
.as-facts dd { margin: 2px 0 0; font-size: .82rem; font-weight: 700; color: var(--ink); }
.as-prog { display: grid; gap: 2px; font-size: .74rem; color: var(--muted); }
.as-q { margin: 18px 0 0; padding: 0; border: 0; }
.as-q legend { padding: 0; margin-bottom: 12px; font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
.as-opt { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font-size: .88rem; line-height: 1.35; color: var(--ink); cursor: pointer; }
.as-opt input { accent-color: var(--primary); width: 18px; height: 18px; flex-shrink: 0; }
.as-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.as-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.as-quit { display: block; margin: 16px auto 0; color: var(--muted); font-weight: 500; }
.as-res { display: grid; justify-items: center; gap: 4px; padding: 20px 16px; border-radius: 18px; background: var(--sand); text-align: center; }
.as-res.pass { background: var(--ok-soft); }
.as-res-pct { font-size: 2.6rem; line-height: 1.1; color: var(--ink); }
.as-res p { font-size: .82rem; color: var(--ink-2); }
.as-new { display: grid; gap: 6px; margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--accent-soft); }
.as-new b { font-size: .82rem; color: var(--accent-ink); }
.as-review { margin: 0; padding-left: 18px; display: grid; gap: 12px; }
.as-review li { font-size: .82rem; line-height: 1.45; color: var(--ink-2); }
.as-review b { display: block; color: var(--ink); }
.as-review small { display: block; font-size: .74rem; color: var(--bad); }
.as-review small.ok { color: var(--ok); }
.as-review p { margin-top: 3px; }
.sk { margin-top: 16px; padding-top: 4px; }
.sk-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.sk-h { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.sk-h .a-pill { font-size: .58rem; letter-spacing: 0; text-transform: none; }
.sk-empty { font-size: .8rem; color: var(--muted); }
.sk-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sk-badge { display: grid; justify-items: start; gap: 3px; padding: 0; border: 0; background: none; text-align: left; }
.sk-badge small { font-size: .6rem; color: var(--muted); padding-left: 2px; }
.sk-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sk-row { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; }
.sk-row b { color: var(--ink); }
.sk-pct { font-weight: 800; color: var(--primary); }
.sk-bar { height: 7px; margin-top: 5px; }
.sk-bars small { display: block; margin-top: 4px; font-size: .66rem; color: var(--muted); }
.sk-bars small .link { font-size: inherit; }
.sk-bg { margin: 0; display: grid; gap: 8px; }
.sk-bg dt { font-size: .7rem; font-weight: 600; color: var(--muted); }
.sk-bg dd { margin: 1px 0 0; font-size: .84rem; color: var(--ink); }
.cr-bg-f { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cr-show { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .72rem; color: var(--ink-2); }
.cr-show input { accent-color: var(--primary); }
.cp-wrap { padding: 0 18px 28px; }
.cp-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 10px 0; border-block: 1px solid var(--line); text-align: center; }
.cp-stats > div + div { border-left: 1px solid var(--line); }
.cp-stats b { display: block; font-size: 1.1rem; color: var(--ink); }
.cp-stats small { font-size: .62rem; color: var(--muted); }
.cp-list, .cp-locked { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cp-row, .cp-lock { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--muted); }
.cp-row .grow, .cp-lock .grow { flex: 1; display: grid; gap: 2px; min-width: 0; }
.cp-row b, .cp-lock b { font-size: .84rem; color: var(--ink); }
.cp-row small, .cp-lock small { font-size: .68rem; line-height: 1.35; color: var(--muted); }
.cp-score { display: grid; justify-items: end; text-align: right; }
.cp-score b { font-size: .98rem; color: var(--primary); }
.cp-list.soon .cp-row { opacity: .7; }
.cp-prog { flex: 0 0 34%; text-align: right; color: var(--accent-ink) !important; }
.pc-top .see-all { white-space: nowrap; flex-shrink: 0; }
/* =========================================================
Creator Home (simple dashboard) + Creator Profile
========================================================= */
.cr-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .6rem; font-weight: 700; letter-spacing: .04em; vertical-align: 3px; }
.cr-tag .ic { width: 11px; height: 11px; }
/* completion bar: one line + bar, expands on tap */
.pcx { margin-top: 14px; padding: 2px 0 12px; border-bottom: 1px solid var(--line); }
.pcx-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0 4px; border: 0; background: none; text-align: left; color: var(--muted); }
.pcx-head .grow { flex: 1; display: grid; gap: 1px; }
.pcx-head b { font-size: .88rem; color: var(--ink); }
.pcx-head small { font-size: .72rem; color: var(--muted); }
.pcx .pc-bar { margin-top: 4px; height: 6px; }
.pcx .pc-list { margin-top: 6px; }
/* Home */
.cwx .cw-hello { margin-top: 12px; }
.cwx-me { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 0; border: 0; background: none; text-align: left; }
.cwx-av { width: 48px !important; height: 48px !important; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }
.cwx-me .grow { flex: 1; display: grid; gap: 2px; min-width: 0; }
.cwx-me b { font-size: .98rem; color: var(--ink); }
.cwx-me small { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cwx-view { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; font-size: .74rem; font-weight: 600; color: var(--primary); }
.cwx-acts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 16px; }
.cwx-acts button { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; font-size: .72rem; font-weight: 600; color: var(--ink-2); }
.cwx-acts button > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--sand); color: var(--primary); transition: background-color .15s, transform .15s; }
.cwx-acts .ic { width: 22px; height: 22px; stroke-width: 1.7; }
@media (hover: hover) { .cwx-acts button:hover > span { background: var(--accent-soft); transform: translateY(-2px); } }
.cwx-acts button:focus-visible { outline: none; }
.cwx-acts button:focus-visible > span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 340px) { .cwx-acts { display: flex; overflow-x: auto; gap: 14px; scrollbar-width: none; } .cwx-acts button { flex: 0 0 58px; } }
.cwx-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; padding: 10px 0; border-block: 1px solid var(--line); }
.cwx-stats button { display: grid; justify-items: center; gap: 1px; padding: 2px 0; border: 0; background: none; }
.cwx-stats button + button { border-left: 1px solid var(--line); }
.cwx-stats b { font-size: 1.2rem; color: var(--ink); }
.cwx-stats small { font-size: .72rem; color: var(--muted); }
.cwx-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.cwx-nav button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border: 0; border-radius: 12px; background: var(--sand); font-size: .76rem; font-weight: 600; color: var(--primary); white-space: nowrap; }
.cwx-nav .a-n { margin-left: 2px; background: var(--bad); color: #fff; }
.cwx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cwx-grid .cw-thumb { width: auto; height: auto; aspect-ratio: 1; flex: none; }
@media (max-width: 380px) { .cwx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cwx-month { display: grid; grid-template-columns: 1.4fr 1fr 1fr; padding: 2px 0; }
.cwx-month div { display: grid; gap: 1px; }
.cwx-month div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.cwx-month b { font-size: 1.02rem; color: var(--ink); }
.cwx-month small { font-size: .68rem; color: var(--muted); }
.cwx-more { margin-top: 20px; }
/* Creator Profile: the Tourist Profile layout with creator content */
.crp .me-stats button { display: grid; padding: 0; border: 0; background: none; text-align: center; }
.crp .me-stats b { display: block; font-size: 1.15rem; }
.crp .me-stats small { font-size: .72rem; color: var(--muted); }
.cr-sub { color: var(--ink-2); font-weight: 500; }
.cr-rate { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); }
.cr-rate .ic { color: var(--accent); }
.cr-rate .link { font-size: inherit; font-weight: 500; text-decoration: underline; }
.crp-story { font-size: .86rem; line-height: 1.6; color: var(--ink-2); }
.crp-story .ci-more { font-size: .78rem; }
.crp-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crp-badges button { padding: 0; border: 0; background: none; }
.crp .sk-bars { gap: 10px; }
.crp-tabs { margin-top: 22px; overflow-x: auto; scrollbar-width: none; }
.crp-tabs::-webkit-scrollbar { display: none; }
.crp-tabs button { flex: 0 0 auto; padding: 11px 12px; }
.crp .ci-head .a-pill { font-size: .58rem; }
/* narrow screens: let labels and headings wrap instead of pushing sideways */
.cwx-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cwx-nav button { white-space: normal; line-height: 1.2; text-align: center; min-width: 0; }
@media (max-width: 380px) { .cwx-nav button { flex-direction: column; gap: 3px; padding: 8px 4px; font-size: .7rem; } }
.crp .ci-head { flex-wrap: wrap; row-gap: 4px; }
.crp .ci-head h2 { white-space: normal; min-width: 0; flex: 1 1 auto; }
.crp .ci-head .ci-rule { min-width: 12px; flex: 1 1 12px; }
/* =========================================================
Creator Profile v2: portfolio first, light sections
========================================================= */
.crp2 .me-name { margin-top: 10px; }
.crp2 .me-loc { display: flex; align-items: center; gap: 6px; }
.crp-rate { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 0 0 8px; border: 0; border-left: 1px solid var(--line); background: none; font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.crp-rate .ic { color: var(--accent); }
.crp-bio { margin-top: 6px; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.crp2 .two-btns { margin-top: 12px; }
.crp-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 24px 0 10px; }
.crp-h h2 { display: flex; align-items: center; gap: 8px; font-size: .98rem; font-weight: 700; color: var(--ink); }
.crp-h h2 .ic { color: var(--accent-ink); opacity: .85; }
.crp-h .ci-more { display: inline-flex; align-items: center; gap: 2px; }
.crp-self { font-size: .66rem; font-weight: 600; color: var(--muted); }
/* the portfolio grid: big thumbnails, one line of text */
.crp-works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .crp-works { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.crp-work { display: grid; gap: 6px; padding: 0; border: 0; background: none; text-align: left; }
.crp-work .pic { aspect-ratio: 1; border-radius: 14px; }
.crp-gallery .crp-work:first-child { grid-column: 1 / -1; }
.crp-gallery .crp-work:first-child .pic { aspect-ratio: 16 / 10; }
.crp-work-t { display: grid; min-width: 0; padding: 0 2px; }
.crp-work-t b { font-size: .8rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crp-work-t small { font-size: .66rem; color: var(--muted); }
@media (hover: hover) { .crp-work:hover .pic img { transform: scale(1.03); transition: transform .3s; } }
/* skills: thin bars, the row itself opens details */
.crp-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.crp-skills button { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.crp-sk-row { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; }
.crp-sk-row b { font-weight: 600; color: var(--ink); }
.crp-sk-row > span { font-weight: 700; color: var(--primary); }
.crp-skills li.na .crp-sk-row b { color: var(--muted); font-weight: 500; }
.crp-skills li.na small { font-size: .72rem; color: var(--muted); }
.crp-bar { display: block; height: 4px; border-radius: 2px; background: #EFE4D4; overflow: hidden; }
.crp-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #C8892C, #8A5A14); }
.crp-note { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 0; border: 0; background: none; font-size: .68rem; color: var(--muted); }
/* interests: icon over label, no boxes */
.crp-ci { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
@media (min-width: 560px) { .crp-ci { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.crp-ci li > button, .crp-ci li > span { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; text-align: center; }
.crp-ci i { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sand); color: #A08A76; }
.crp-ci .on i { background: var(--accent-soft); color: var(--primary); }
.crp-ci i .ic { width: 21px; height: 21px; stroke-width: 1.6; }
.crp-ci em { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); color: #fff; border: 2px solid var(--bg); }
.crp-ci em .ic { width: 9px; height: 9px; stroke-width: 3.2; }
.crp-ci small { font-size: .72rem; line-height: 1.25; color: var(--muted); }
.crp-ci .on small { color: var(--ink); font-weight: 600; }
/* background: three short facts */
.crp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.crp-facts dt { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.crp-facts dd { margin: 2px 0 0; font-size: .82rem; line-height: 1.35; color: var(--ink); }
.crp-facts.more { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.crp-facts .wide { grid-column: 1 / -1; }
.crp-facts.more dd { font-size: .82rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 360px) { .crp-facts { grid-template-columns: 1fr 1fr; } }
.crp-bg-more { margin-top: 8px; font-size: .78rem; }
/* =========================================================
Elevation pass: story cards, connections, trust notes, motion
(same fonts and palette; only layout and feedback refined)
========================================================= */
/* story-led creation cards */
.stc-rail { scroll-snap-type: x mandatory; }
.stc { flex: 0 0 236px; display: grid; padding: 0; border: 0; background: none; text-align: left; scroll-snap-align: start; }
.stc-img { aspect-ratio: 4 / 3; border-radius: 16px; }
.stc-body { display: grid; gap: 3px; padding: 9px 2px 2px; }
.stc-body b { font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.stc-body small { font-size: .7rem; color: var(--muted); }
.stc-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .76rem; line-height: 1.45; color: var(--ink-2); }
.stc-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: .74rem; font-weight: 600; color: var(--primary); }
@media (hover: hover) { .stc:hover .stc-img img { transform: scale(1.03); transition: transform .35s ease; } }
.pc-by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
/* connected stories at the end of listing pages */
.cn { margin-top: 8px; }
.cn-rail { display: flex; gap: 10px; overflow-x: auto; margin: 0 -18px; padding: 0 18px 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.cn-rail::-webkit-scrollbar { display: none; }
.cn-item { flex: 0 0 132px; display: grid; gap: 6px; padding: 0; border: 0; background: none; text-align: left; scroll-snap-align: start; }
.cn-img { aspect-ratio: 1; border-radius: 14px; }
.cn-item span { display: grid; gap: 1px; min-width: 0; }
.cn-item small { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.cn-item b { font-size: .78rem; font-weight: 600; color: var(--ink); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* trust notes: what is (and isn't) on record */
.prov-gap { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: var(--sand); font-size: .76rem; line-height: 1.45; color: var(--ink-2); }
.prov-gap .ic { flex-shrink: 0; margin-top: 2px; color: var(--accent-ink); }
.prov-gaps { display: grid; gap: 3px; margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--accent); background: #FBF3E6; border-radius: 0 12px 12px 0; }
.prov-gaps b { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--accent-ink); }
.prov-gaps span { font-size: .78rem; color: var(--ink-2); }
.bh-note { color: var(--muted); font-size: .76rem; }
.bh-note .ic { color: var(--accent-ink); }
/* motion: quick, purposeful, and off when reduced motion is preferred */
@media (prefers-reduced-motion: no-preference) {
.pcx.open .pc-list, .pcx.open .pc-fine { animation: elDown .22s ease-out both; }
.pc-bar span, .crp-bar i, .sk-bar span { animation: elGrow .7s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left center; }
.tab-body, .crp-works, .crp-skills, .crp-ci { animation: elFade .25s ease-out both; }
.heart.on .ic, .float-btn.on .ic, .sx-save.on .ic, .sx-appr.on .ic { animation: elPop .35s ease-out; }
.btn, .chip, .cwx-acts button > span, .stc, .cn-item, .crp-work { transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease; }
.btn:active, .chip:active, .cwx-acts button:active > span { transform: scale(.96); }
.stc:active, .cn-item:active, .crp-work:active { transform: scale(.98); }
.toast { animation: elToast .25s ease-out both; }
}
@keyframes elDown { from { opacity: 0; transform: translateY(-4px); } }
@keyframes elGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes elFade { from { opacity: 0; } }
@keyframes elPop { 40% { transform: scale(1.3); } }
@keyframes elToast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* consistent, visible keyboard focus everywhere */
:where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* =========================================================
Mobile welcome screen
========================================================= */
.wl-scroll { position: relative; z-index: 2; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 18px 22px 14px; text-align: center; scrollbar-width: none; }
.wl-scroll::-webkit-scrollbar { display: none; }
/* three photos of real crafts, arranged like a small gallery wall */
.wl-mosaic { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; width: 100%; max-width: 360px; height: clamp(170px, 30vh, 260px); }
.wl-ph { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 22px -16px rgba(90, 38, 20, .7); }
.wl-ph .pic { position: absolute; inset: 0; }
.wl-ph.a { grid-row: 1 / span 2; border-radius: 22px 18px 18px 22px; }
.wl-ph.b { border-top-right-radius: 22px; }
.wl-ph.c { border-bottom-right-radius: 22px; }
.wl-badge { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #FFFCF6; box-shadow: 0 10px 22px -12px rgba(43, 22, 11, .55), 0 0 0 4px #FAF3E6; }
.wl-badge img { height: 42px; width: auto; }
.wl-brand { margin-top: 38px; display: grid; justify-items: center; width: 100%; }
.wl-word { height: 40px; width: auto; }
.wl .sp-tag { margin-top: 12px; }
.wl .sp-tag span { font-size: .92rem; }
.wl-motto { margin-top: 8px; max-width: 30ch; font-size: .86rem; font-style: italic; line-height: 1.45; color: var(--accent-ink); }
.wl-pillars { list-style: none; margin: 18px 0 0; padding: 12px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 330px; border-top: 1px solid #EADCC8; }
.wl-pillars li { display: grid; justify-items: center; gap: 5px; font-size: .7rem; font-weight: 600; color: var(--ink-2); }
.wl-pillars .ic { width: 22px; height: 22px; stroke-width: 1.6; color: var(--primary); }
.wl-actions { margin-top: 20px !important; max-width: 290px !important; gap: 10px !important; }
.wl-actions .sp-btn { height: 50px; }
.wl-actions .guest-link { margin-top: 6px; }
.wl-foot { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; font-size: .72rem; color: var(--muted); }
.wl-foot .ic { color: var(--accent); }
/* shorter phones: smaller gallery, keep everything on one screen */
@media (max-height: 760px) {
.wl-mosaic { height: 150px; }
.wl-brand { margin-top: 34px; }
.wl-word { height: 34px; }
.wl-motto { display: none; }
.wl-pillars { margin-top: 14px; }
.wl-actions { margin-top: 14px !important; }
.wl-actions .sp-btn { height: 46px; }
}
@media (max-height: 640px) { .wl-pillars, .wl-foot { display: none; } .wl-mosaic { height: 120px; } }
@media (prefers-reduced-motion: no-preference) {
.wl-ph { animation: wlIn .7s cubic-bezier(.2, .8, .2, 1) both; }
.wl-ph.b { animation-delay: .08s; } .wl-ph.c { animation-delay: .16s; }
.wl-badge { animation: wlPop .6s cubic-bezier(.3, 1.4, .5, 1) .3s both; }
.wl-brand, .wl-pillars, .wl-actions { animation: wlUp .5s ease-out both; }
.wl-brand { animation-delay: .35s; } .wl-pillars { animation-delay: .45s; } .wl-actions { animation-delay: .55s; }
}
@keyframes wlIn { from { opacity: 0; transform: scale(.96); } }
@keyframes wlPop { from { opacity: 0; transform: translateX(-50%) scale(.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes wlUp { from { opacity: 0; transform: translateY(10px); } }
/* =========================================================
Transactions: detail page, lists, checkout, demo payment
========================================================= */
.txd { padding: 0 18px 28px; }
.txd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 4px; }
.txd-head span { display: grid; gap: 2px; min-width: 0; }
.txd-head small { font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.txd-head b { font-size: 1.05rem; color: var(--ink); line-height: 1.3; }
.txd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.txd-steps { margin-top: 12px; grid-template-columns: repeat(6, 1fr); }
.txd-actions { display: grid; gap: 8px; margin-top: 14px; }
.txd-actions:empty { display: none; }
.txd-actions .btn { height: 44px; }
.txd-hist { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 10px; }
.txd-hist li { position: relative; display: grid; gap: 1px; font-size: .82rem; }
.txd-hist li::before { content: ""; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.txd-hist b { color: var(--ink); }
.txd-hist small { font-size: .7rem; color: var(--muted); }
.co-group { margin-top: 12px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.co-group > b { font-size: .82rem; color: var(--primary); }
.co-policy { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--sand); font-size: .8rem; color: var(--ink-2); }
.co-policy summary { display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; color: var(--primary); }
.co-policy ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; line-height: 1.45; }
.pay-demo-flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.txl { display: grid; gap: 0; border-top: 1px solid var(--line); }
.txc { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.txc-img { flex: 0 0 52px; height: 52px; border-radius: 12px; }
.txc .grow { flex: 1; display: grid; gap: 2px; min-width: 0; }
.txc small { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txc b { font-size: .86rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txc-side { display: grid; justify-items: end; gap: 4px; flex-shrink: 0; }
.txc-side em { font-style: normal; font-size: .62rem; font-weight: 700; color: var(--accent-ink); }
.ac-tiles3 { grid-template-columns: repeat(3, 1fr); }
.win-box { display: grid; gap: 6px; margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--accent-soft); text-align: center; }
.win-box b { color: var(--primary); }
.win-box span { font-size: .8rem; color: var(--ink-2); }
/* =========================================================
Section headers without the textile divider
Removes only the small woven line between a section title and its
"See all" / "See more" link (shared by tourist and creator screens).
The bottom woven border, the creator card hairline, the hero rule and
the divider between community stories are intentionally untouched.
========================================================= */
.sec-head h2::after, .h-sec h2::after, .ac-list-head h2::after, .menu-label::after { content: none; display: none; }
.ci-head .ci-rule { display: none; }
/* title on the left, link on the right; long titles wrap instead of pushing the link */
.sec-head, .ac-list-head, .ci-head, .crp-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sec-head h2, .ac-list-head h2, .ci-head h2 { flex: 1 1 auto; min-width: 0; margin-right: 0; overflow-wrap: anywhere; }
.sec-head .see-all, .ac-list-head .see-all, .ci-head .ci-more, .ci-head small, .crp-h .ci-more { flex-shrink: 0; white-space: nowrap; }
/* =========================================================
Welcome screen v2: editorial, culture-first
Cream space, an organic photo collage, four features, clear actions.
Same fonts, logo, colours and woven borders as before.
========================================================= */
.wl2 { background: #FAF3E6; }
.wl2-scroll { position: relative; z-index: 2; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.wl2-scroll::-webkit-scrollbar { display: none; }
/* faint background shapes */
.wl2-deco { position: absolute; z-index: 0; border-radius: 50%; background: #F3E8D6; pointer-events: none; }
.wl2-deco.a { width: 220px; height: 220px; left: -110px; top: -90px; }
.wl2-deco.b { width: 180px; height: 180px; right: -90px; bottom: -60px; }
.wl2-lines { position: absolute; z-index: 0; left: 0; bottom: 0; width: 120px; height: 120px; fill: none; stroke: #EADBC2; stroke-width: 1.6; pointer-events: none; }
.wl2-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; grid-template-areas: "hero" "feat" "actions" "foot"; padding: 0 22px 14px; min-height: 100%; }
/* brand sits over the cream left side of the hero, the collage fills the right */
.wl2-brand { grid-area: hero; align-self: start; justify-self: start; position: relative; z-index: 3; width: 60%; padding-top: clamp(22px, 5vh, 46px); }
.wl2-logo { display: flex; align-items: center; gap: 8px; margin: 0; }
.wl2-mark { height: clamp(34px, 5.2vh, 46px); width: auto; flex-shrink: 0; }
.wl2-word { height: clamp(24px, 3.6vh, 32px); width: auto; max-width: 100%; }
.wl2-tag { margin-top: 12px; font-size: .9rem; line-height: 1.4; color: var(--ink-2); }
.wl2-rule { display: block; width: 34px; height: 2px; margin: 12px 0 10px; border-radius: 2px; background: var(--accent); }
.wl2-motto { font-size: .82rem; font-style: italic; line-height: 1.45; color: var(--accent-ink); }
.wl2-collage { grid-area: hero; position: relative; height: clamp(330px, 50vh, 440px); margin: 0 -22px; }
.wl2-img { position: absolute; overflow: hidden; background: var(--sand); }
.wl2-img .pic { position: absolute; inset: 0; }
/* large photo with an organic edge, bleeding off the right side */
.wl2-img.main { right: 0; top: 6%; width: 60%; height: 72%; border-radius: 62% 0 0 44% / 34% 0 0 30%; }
.wl2-img.main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(90, 40, 16, .06); }
/* two smaller photos overlapping its lower left, framed in cream */
.wl2-img.s1 { left: 9%; bottom: 3%; width: 39%; height: 33%; border-radius: 26px 34px 22px 46px; transform: rotate(-5deg); border: 4px solid #FAF3E6; box-shadow: 0 12px 24px -14px rgba(60, 30, 14, .55); z-index: 2; }
.wl2-img.s2 { left: 44%; bottom: 0; width: 37%; height: 28%; border-radius: 30px 24px 34px 22px; transform: rotate(3deg); border: 4px solid #FAF3E6; box-shadow: 0 12px 24px -14px rgba(60, 30, 14, .55); z-index: 3; }
.wl2-arc { position: absolute; left: 3%; bottom: 7%; width: 64px; height: 84px; border: 2px dashed var(--accent); border-right-color: transparent; border-radius: 50%; opacity: .7; z-index: 1; }
.wl2-motif { position: absolute; right: 9%; bottom: 3%; width: 38px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .8; transform: rotate(-24deg); }
/* four features: icon, name, one line; thin separators, no cards */
.wl2-feat { grid-area: feat; list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wl2-feat li { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 0 4px; text-align: center; }
.wl2-feat li + li { border-left: 1px solid #EADCC8; }
.wl2-fi { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: #F3E3C6; color: var(--primary); }
.wl2-fi .ic { width: 22px; height: 22px; stroke-width: 1.6; }
.wl2-feat b { font-size: .82rem; font-weight: 600; color: var(--primary); }
.wl2-feat small { font-size: .66rem; line-height: 1.35; color: var(--muted); }
.wl2-actions { grid-area: actions; display: grid; gap: 12px; width: 100%; max-width: 340px; justify-self: center; margin-top: 22px; }
.wl2-actions .sp-btn { height: 52px; border-radius: 999px; font-size: 1.02rem; font-weight: 600; gap: 14px; }
.wl2-primary { background: var(--primary) !important; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(90, 40, 16, .7); }
.wl2-secondary { background: transparent !important; color: var(--primary) !important; border: 1.5px solid var(--primary) !important; box-shadow: none !important; }
.wl2-guest { justify-self: center; margin-top: 4px; font-size: .95rem; color: var(--primary) !important; text-decoration: underline; text-underline-offset: 4px; }
.wl2-foot { grid-area: foot; align-self: end; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 18px 0 0; font-size: .74rem; color: var(--muted); }
.wl2-foot .ic { color: var(--accent); }
/* short phones: a shorter collage, everything still reachable by scrolling */
@media (max-height: 740px) { .wl2-collage { height: clamp(280px, 44vh, 330px); } .wl2-feat { margin-top: 14px; } .wl2-actions { margin-top: 16px; } .wl2-actions .sp-btn { height: 48px; } }
@media (max-width: 360px) { .wl2-brand { width: 64%; } .wl2-feat small { display: none; } }
/* wide screens: the welcome screen opens up into two columns */
@media (min-width: 900px) {
.app:has(.wl2) { max-width: min(1120px, calc(100vw - 48px)); }
.wl2-grid { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.15fr); grid-template-areas: "brand collage" "feat collage" "actions collage" "foot collage"; grid-template-rows: auto auto auto 1fr; column-gap: 40px; padding: 0 0 18px 56px; align-content: center; }
.wl2-brand { grid-area: brand; width: auto; padding-top: 56px; }
.wl2-mark { height: 58px; } .wl2-word { height: 42px; }
.wl2-tag { font-size: 1.1rem; } .wl2-motto { font-size: 1rem; }
.wl2-collage { grid-area: collage; height: 100%; min-height: 560px; margin: 0; }
.wl2-img.main { width: 78%; height: 74%; top: 4%; }
.wl2-img.s1 { left: 2%; width: 40%; height: 30%; }
.wl2-img.s2 { left: 38%; width: 36%; height: 26%; }
.wl2-feat { margin-top: 34px; }
.wl2-actions { justify-self: start; max-width: 360px; margin-top: 34px; }
.wl2-foot { justify-content: flex-start; align-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
.wl2-img.main { animation: wl2In .8s cubic-bezier(.2, .8, .2, 1) both; }
.wl2-img.s1 { animation: wl2Pop .7s cubic-bezier(.2, .8, .2, 1) .15s both; }
.wl2-img.s2 { animation: wl2Pop .7s cubic-bezier(.2, .8, .2, 1) .25s both; }
.wl2-brand, .wl2-feat, .wl2-actions { animation: wl2Up .55s ease-out both; }
.wl2-feat { animation-delay: .3s; } .wl2-actions { animation-delay: .4s; }
}
@keyframes wl2In { from { opacity: 0; transform: translateX(16px); } }
@keyframes wl2Pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes wl2Up { from { opacity: 0; transform: translateY(10px); } }
/* v2 fixes: decorations stay outside the scrolling area; brand text never sits under the photo */
.wl2 { position: relative; overflow: hidden; }
.wl2 > .wl2-deco, .wl2 > .wl2-lines { z-index: 1; }
.wl2-lines { bottom: 34px; }
.wl2-collage { margin: 0 -22px 0 0; }
.wl2-brand { width: 50%; }
.wl2-word { height: clamp(22px, 6.4vw, 30px); }
.wl2-mark { height: clamp(32px, 9vw, 44px); }
.wl2-tag { font-size: clamp(.78rem, 3.4vw, .9rem); }
.wl2-motto { font-size: clamp(.74rem, 3.2vw, .84rem); }
/* the photo's top-left curves far away from the text, like the concept */
.wl2-img.main { top: 0; width: 52%; height: 74%; border-radius: 100% 0 0 46% / 62% 0 0 30%; }
.wl2-feat b { font-size: clamp(.68rem, 3vw, .82rem); }
.wl2-feat small { font-size: clamp(.58rem, 2.6vw, .66rem); }
.wl2-fi { width: clamp(38px, 10.5vw, 44px); height: clamp(38px, 10.5vw, 44px); }
@media (max-width: 360px) { .wl2-brand { width: 52%; } }
@media (min-width: 900px) {
.wl2-brand { width: auto; }
.wl2-word { height: 42px; } .wl2-mark { height: 58px; }
.wl2-tag { font-size: 1.1rem; } .wl2-motto { font-size: 1rem; }
.wl2-collage { margin: 0; }
.wl2-img.main { width: 80%; height: 76%; border-radius: 64% 0 0 40% / 40% 0 0 28%; }
.wl2-feat b { font-size: .86rem; } .wl2-feat small { font-size: .72rem; } .wl2-fi { width: 48px; height: 48px; }
}
@media (max-height: 740px) and (max-width: 899px) { .wl2-img.s1 { height: 27%; width: 36%; } .wl2-img.s2 { height: 24%; width: 34%; } .wl2-arc { height: 66px; width: 52px; } }
/* =========================================================
Loka welcome + onboarding, and personalised sections
========================================================= */
.ob { position: relative; display: flex; flex-direction: column; height: 100%; background: #FAF3E6; }
.ob > .textile { flex-shrink: 0; position: relative; }
.ob-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px 8px; }
.ob-head .grow { flex: 1; display: grid; min-width: 0; }
.ob-head b { font-size: 1rem; color: var(--ink); }
.ob-head small { font-size: .68rem; color: var(--muted); }
.ob-bar { height: 3px; margin: 0 18px; border-radius: 2px; background: #EFE4D4; overflow: hidden; }
.ob-bar span { display: block; height: 100%; background: linear-gradient(90deg, #C8892C, #8A5A14); transition: width .35s ease; }
.ob-thread { flex: 1; min-height: 0; padding: 14px 18px 8px; }
.ob-ans { display: inline-flex; align-items: center; gap: 8px; max-width: 82%; padding: 9px 13px; border: 0; border-radius: 16px 16px 4px 16px; background: var(--primary); color: #fff; font: inherit; font-size: .86rem; line-height: 1.4; text-align: left; cursor: pointer; }
.ob-ans .ic { flex-shrink: 0; opacity: .6; }
.ob-ans:hover .ic { opacity: 1; }
.ob-controls { flex-shrink: 0; padding: 10px 18px 12px; border-top: 1px solid #EFE4D4; background: #FAF3E6; }
.ob-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1.5px solid #E2D2BA; border-radius: 999px; background: #fff; font: inherit; font-size: .84rem; font-weight: 600; color: var(--primary); cursor: pointer; transition: background-color .15s, border-color .15s; }
.ob-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
@media (hover: hover) { .ob-chip:hover { border-color: var(--accent); } }
.ob-type { display: flex; gap: 8px; margin-top: 10px; }
.ob-type input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: .86rem; }
.ob-go { width: 100%; margin-top: 10px; height: 48px; }
.ob-nav { display: flex; justify-content: space-between; margin-top: 8px; }
.ob-nav .link { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; }
.ob-note { margin-top: 6px; font-size: .62rem; line-height: 1.4; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { .ob-thread .lk-msg:last-child { animation: elDown .3s ease-out both; } .ob-opts { animation: elFade .3s ease-out both; } }
.ob-invite { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 10px 12px; border: 1px dashed #DCC7A8; border-radius: 16px; background: #FFFCF7; text-align: left; color: var(--muted); }
.ob-invite .grow { flex: 1; display: grid; min-width: 0; }
.ob-invite b { font-size: .84rem; color: var(--ink); }
.ob-invite small { font-size: .7rem; }
.ob-hello { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 16px; background: var(--accent-soft); }
.ob-hello p { flex: 1; font-size: .84rem; line-height: 1.5; color: var(--ink); }
.ob-hello .a-pill { font-size: .58rem; vertical-align: 1px; }
.fy { flex: 0 0 236px; display: grid; gap: 6px; }
.fy .stc { flex: none; }
.fy-why { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 600; color: var(--accent-ink); }
.ob-qs { margin-top: 10px; }
.ob-guide { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 16px; background: #FBF3E6; }
.ob-guide .grow { flex: 1; display: grid; gap: 8px; min-width: 0; }
.ob-guide b { font-size: .84rem; color: var(--ink); }
.ob-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-steps button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid #E2D2BA; border-radius: 999px; background: #fff; font-size: .74rem; font-weight: 600; color: var(--primary); }
/* the welcome conversation uses the same woven bands as the welcome and login screens */
.ob > .textile {
flex-shrink: 0; height: var(--weave-h); border-block: 0;
background: var(--weave) center / auto 100% repeat-x;
background-origin: content-box; background-clip: content-box; background-color: var(--weave-bg);
}
.ob > .textile-top { box-shadow: 0 2px 8px -3px rgba(138, 74, 28, .35); }
.ob > .textile-bottom { box-shadow: 0 -2px 8px -3px rgba(138, 74, 28, .35); }
/* =========================================================
Floating Loka: half-hidden at the right edge
========================================================= */
.loka-fab.peek { left: auto; right: -24px; bottom: calc(var(--tabbar) + 18px + var(--safe-bottom) + var(--fab-y, 104px)); width: 54px; height: 54px; padding: 0 0 0 9px; justify-content: flex-start; border-radius: 50%; transform: translateX(0); transition: transform .25s cubic-bezier(.2, .8, .2, 1), bottom .25s ease; animation: none; opacity: 1; pointer-events: auto; }
.loka-fab.peek .ic { width: 24px; height: 24px; }
@media (hover: hover) { .loka-fab.peek:hover { transform: translateX(-8px); } }
.loka-fab.peek:focus-visible { transform: translateX(-8px); outline: 2px solid var(--accent); outline-offset: 3px; }
.loka-fab.peek.out { transform: translateX(-30px); }
.loka-fab.peek.back { animation: fabBack .26s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fabBack { from { transform: translateX(-30px); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .loka-fab.peek { transition: none; } .loka-fab.peek.back { animation: none; } }
/* =========================================================
Welcome: one short, optional question from Loka
========================================================= */
.wl3-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 22px 10px; scrollbar-width: none; }
.wl3-body::-webkit-scrollbar { display: none; }
.wl3-hero { display: grid; justify-items: center; gap: 6px; margin-bottom: 16px; }
.wl3-av { width: 64px !important; height: 64px !important; border-radius: 20px !important; flex-basis: 64px !important; }
.wl3-av .ic { width: 34px !important; height: 34px !important; }
.wl3-hero small { font-size: .7rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.wl3 .lk-msg .lk-body { gap: 8px; padding: 12px 14px; border-radius: 16px; }
.wl3-q { margin-top: 20px; font-size: 1.12rem; line-height: 1.3; color: var(--ink); }
.wl3-hint { margin-top: 4px; font-size: .74rem; color: var(--muted); }
.wl3-opts { display: grid; gap: 8px; margin-top: 12px; }
.wl3-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 1.5px solid #E6D7C2; border-radius: 14px; background: #fff; font: inherit; font-size: .86rem; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.wl3-opt > .ic:first-child { flex-shrink: 0; color: var(--accent-ink); }
.wl3-opt span { flex: 1; }
.wl3-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.wl3-opt[aria-pressed="true"] > .ic:last-child { color: var(--accent-ink); }
@media (hover: hover) { .wl3-opt:hover { border-color: var(--accent); } }
.wl3-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 14px; border-top: 1px solid #EFE4D4; }
.wl3-skip { font-size: .9rem; }
.wl3-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 56px; height: 56px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--primary); color: #fff; box-shadow: 0 10px 22px -12px rgba(90, 40, 16, .7); cursor: pointer; transition: transform .15s; }
.wl3-go span { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: .74rem; font-weight: 700; }
.wl3-go:active { transform: scale(.96); }
.wl3-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-height: 680px) { .wl3-hero { margin-bottom: 10px; } .wl3-av { width: 52px !important; height: 52px !important; } .wl3-opt { padding: 9px 12px; } }
/* =========================================================
Loka onboarding (storyboard): welcome → explore → role → preferences → summary
========================================================= */
.wz { background: #FAF3E6; }
.wz-top { flex-shrink: 0; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 46px; padding: 0 10px; }
.wz-back { width: 40px; height: 40px; }
.wz-dots { display: flex; justify-content: center; gap: 6px; }
.wz-dots i { width: 6px; height: 6px; border-radius: 3px; background: #E6D7C2; transition: width .25s, background-color .25s; }
.wz-dots i.done { background: var(--accent); }
.wz-dots i.on { width: 20px; background: var(--primary); }
.wz-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.wz-scroll::-webkit-scrollbar { display: none; }
.wz-pad { padding: 4px 22px 16px; }
.wz-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 22px 14px; }
.wz-skip { font-size: .86rem; text-decoration: underline; text-underline-offset: 3px; }
.wz-next { display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 10px 22px -10px rgba(90, 40, 16, .75); cursor: pointer; transition: transform .15s; }
.wz-next .ic { width: 24px; height: 24px; }
.wz-next:active { transform: scale(.94); }
.wz-next:focus-visible, .wz-opt:focus-visible, .wz-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 1 · welcome */
.wz-hello-in { display: grid; justify-items: center; text-align: center; }
.wz-brand { display: grid; justify-items: center; gap: 6px; }
.wz-logo { display: inline-flex; align-items: center; gap: 8px; }
.wz-logo img:first-child { height: 38px; } .wz-logo img:last-child { height: 26px; }
.wz-brand small { font-size: .76rem; line-height: 1.35; color: var(--accent-ink); }
.wz-mascot { position: relative; margin: 18px 0 14px; }
.wz-big { width: clamp(92px, 26vw, 116px) !important; height: clamp(92px, 26vw, 116px) !important; flex-basis: auto !important; border-radius: 32px !important; box-shadow: 0 18px 30px -16px rgba(90, 40, 16, .7), inset 0 0 0 1px rgba(244, 213, 154, .35) !important; }
.wz-big .ic { width: 56% !important; height: 56% !important; }
.wz-mascot .sp { position: absolute; font-style: normal; color: var(--accent); font-size: 1.2rem; }
.wz-mascot .sp.a { left: -22px; top: 22px; } .wz-mascot .sp.b { right: -18px; top: -4px; font-size: .9rem; }
.wz-mascot.small .wz-big { width: 84px !important; height: 84px !important; border-radius: 26px !important; }
.wz-card { width: 100%; padding: 14px 16px; border: 1px solid #EDE1CF; border-radius: 18px; background: #FFFCF7; text-align: left; }
.wz-card > p { font-size: .84rem; line-height: 1.55; color: var(--ink-2); }
.wz-hi { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.wz-hi span { display: grid; gap: 1px; }
.wz-hi b { font-size: .9rem; color: var(--ink); }
/* 2 · explore */
.wz-ask { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 14px; }
.wz-ask > div { flex: 1; display: grid; gap: 3px; padding: 11px 14px; border: 1px solid #EDE1CF; border-radius: 4px 16px 16px 16px; background: #FFFCF7; }
.wz-ask b { font-size: .92rem; color: var(--ink); }
.wz-ask small { font-size: .72rem; color: var(--muted); }
/* options (all steps) */
.wz-list { display: grid; gap: 8px; }
.wz-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 1.5px solid #E6D7C2; border-radius: 14px; background: #fff; font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s; }
.wz-opt .grow { flex: 1; display: grid; gap: 1px; min-width: 0; }
.wz-opt b { font-size: .84rem; font-weight: 600; }
.wz-opt small { font-size: .7rem; line-height: 1.35; color: var(--muted); }
.wz-opt .wz-acc { font-weight: 700; color: var(--accent-ink); }
.wz-ic { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: #F5EADA; color: var(--primary); }
.wz-check { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 50%; border: 1.5px solid #D9C6AD; color: #fff; }
.wz-opt.on { border-color: var(--primary); background: #FFF9F0; }
.wz-opt.on .wz-check { border-color: var(--primary); background: var(--primary); }
.wz-opt.on .wz-check .ic { width: 12px; height: 12px; stroke-width: 3; }
@media (hover: hover) { .wz-opt:hover { border-color: var(--accent); } }
/* 3–6 · photo header with the panel and Loka badge */
.wz-photo { position: relative; height: clamp(120px, 21vh, 180px); }
.wz-photo .pic { position: absolute; inset: 0; }
.wz-panel { position: relative; margin-top: -26px; padding: 36px 20px 12px; border-radius: 26px 26px 0 0; background: #FAF3E6; }
.wz-badge { position: absolute; left: 20px; top: -26px; padding: 4px; border-radius: 18px; background: #FAF3E6; }
.wz-badge .loka-av { width: 46px; height: 46px; flex-basis: 46px; border-radius: 14px; }
.wz-q { font-size: 1.05rem; line-height: 1.3; color: var(--ink); }
.wz-sub { margin: 4px 0 12px; font-size: .74rem; line-height: 1.45; color: var(--muted); }
.wz-role .wz-top, .wz-tourist .wz-top, .wz-creator .wz-top, .wz-collector .wz-top { position: absolute; z-index: 3; left: 0; right: 0; top: 34px; }
.wz-role .wz-back, .wz-tourist .wz-back, .wz-creator .wz-back, .wz-collector .wz-back { background: rgba(255, 252, 247, .9); }
.wz-role .wz-dots i:not(.on), .wz-tourist .wz-dots i:not(.on), .wz-creator .wz-dots i:not(.on), .wz-collector .wz-dots i:not(.on) { background: rgba(255, 252, 247, .8); }
/* 7 · summary */
.wz-sum { display: grid; justify-items: center; text-align: center; padding-top: 16px; }
.wz-sum h1 { font-size: 1.35rem; color: var(--primary); }
.wz-sum .wz-sub { max-width: 30ch; font-size: .84rem; color: var(--ink-2); }
.wz-sum .wz-card b { display: block; margin-bottom: 8px; font-size: .84rem; color: var(--ink); }
.wz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid #E6D7C2; border-radius: 999px; background: #fff; font: inherit; font-size: .74rem; font-weight: 600; color: var(--primary); cursor: pointer; }
.wz-chip .ic { width: 10px; height: 10px; color: var(--accent-ink); }
.wz-roles { display: block; margin-top: 10px; font-size: .7rem; color: var(--muted); }
.wz-foot-sum { justify-content: center; }
.wz-home { width: 100%; max-width: 320px; height: 52px; border-radius: 999px; gap: 8px; }
@media (prefers-reduced-motion: no-preference) { .wz-scroll > * { animation: elFade .25s ease-out both; } }
@media (max-height: 680px) { .wz-mascot { margin: 10px 0 8px; } .wz-big { width: 80px !important; height: 80px !important; } .wz-opt { padding: 7px 10px; } .wz-ic { flex-basis: 32px; height: 32px; } }
/* =========================================================
Loka first: welcome → explore → follow-ups
========================================================= */
.lw-title { margin-top: 4px; font-size: 1.22rem; line-height: 1.3; color: var(--primary); }
.lw-text { margin-top: 10px; max-width: 34ch; font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
.lw-text.small { font-size: .78rem; color: var(--muted); }
.lw-feats { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 340px; }
.lw-feats li { display: grid; justify-items: center; gap: 6px; padding: 0 4px; font-size: .7rem; font-weight: 600; color: var(--primary); text-align: center; }
.lw-feats li + li { border-left: 1px solid #EADCC8; }
.lw-feats span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #F3E3C6; }
.lw-feats .ic { width: 20px; height: 20px; stroke-width: 1.6; }
.lw-group { margin-top: 14px; }
.lw-group h2 { margin-bottom: 8px; font-size: .86rem; font-weight: 700; color: var(--ink); }
.lw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* =========================================================
Loka character (photo/loka-*.png)
========================================================= */
.loka-av.img { background: none; box-shadow: none; border-radius: 50%; overflow: hidden; }
.loka-av.img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loka-av.img.mood { border-radius: 0; overflow: visible; }
.loka-av.img.mood > img, .loka-av.img.mood > .loka-art { width: 100%; height: 100%; object-fit: contain; }
.loka-art { display: block; height: auto; max-width: 100%; }
/* chat header gets a larger avatar */
.lk-head .loka-av.img, .lk-topbar .loka-av.img { width: 42px; height: 42px; flex-basis: 42px; }
.lk-hero { display: grid; justify-items: center; margin: 4px 0 -4px; }
.lk-hero-art { width: 84px; }
/* floating button: golden symbol in the visible half */
.loka-fab.peek .fab-sym { width: 24px; height: auto; margin-left: 2px; }
/* welcome screen: the waving pose */
.lw-mascot { display: grid; justify-items: center; margin: 4px 0 6px; }
.lw-art { width: clamp(120px, 38vw, 168px); }
@media (prefers-reduced-motion: no-preference) { .lw-art { animation: lokaHi 1.1s ease-out .2s both; transform-origin: 50% 90%; } }
@keyframes lokaHi { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 60% { opacity: 1; transform: translateY(0) rotate(-3deg); } 100% { transform: rotate(0); } }
@media (max-height: 680px) { .lw-art { width: 104px; } }
/* Home and Creator Home moments */
.ob-hello-art { flex: 0 0 auto; width: 46px; margin-top: -2px; }
.ob-guide-art { flex: 0 0 auto; width: 46px; }
.ob-guide-say { display: block; font-size: .72rem; font-style: italic; color: var(--accent-ink); }
.h-loka { width: 26px; height: auto; margin: -4px 0; }
.loka-line { display: flex; align-items: center; gap: 10px; margin: -2px 0 10px; font-size: .78rem; line-height: 1.45; color: var(--ink-2); }
.loka-line-art { flex: 0 0 auto; width: 36px; }
.loka-fab.peek { padding-left: 5px; }
.loka-fab.peek .fab-sym { width: 21px; margin-left: 0; }
/* =========================================================
Home: "Picked for You" as real cards, and an empty state for auctions
========================================================= */
.fy { box-sizing: border-box; flex: 0 0 236px; width: 236px; min-width: 0; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 18px; background: #FFFCF7; overflow: hidden; scroll-snap-align: start; }
.fy .stc { box-sizing: border-box; flex: 1 1 auto; width: 100%; min-width: 0; display: flex; flex-direction: column; }
.fy .stc-img { flex: 0 0 auto; width: 100%; height: 150px; aspect-ratio: auto; border-radius: 0; }
.fy .stc-body { box-sizing: border-box; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px 4px; }
.fy .stc-body > * { min-width: 0; }
.fy .stc-body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.fy .stc-body small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fy .stc-line { -webkit-line-clamp: 2; overflow-wrap: anywhere; min-height: calc(1.45em * 2); }
.fy .stc-go { margin-top: auto; padding-top: 4px; }
.fy-why { box-sizing: border-box; display: flex; align-items: flex-start; gap: 5px; margin: 0; padding: 6px 12px 10px; line-height: 1.35; }
.fy-why .ic { flex-shrink: 0; margin-top: 1px; }
.fy-why { overflow-wrap: anywhere; }
.fy-why > :not(.ic), .fy-why { display: flex; }
.stc-rail { align-items: stretch; }
.lots-empty { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed #DCC7A8; border-radius: 16px; background: #FFFCF7; color: var(--accent-ink); }
.lots-empty > .ic { flex-shrink: 0; width: 26px; height: 26px; }
.lots-empty .grow { flex: 1; display: grid; gap: 2px; min-width: 0; }
.lots-empty b { font-size: .86rem; color: var(--ink); }
.lots-empty small { font-size: .74rem; line-height: 1.4; color: var(--muted); }
.lots-empty .btn { flex-shrink: 0; }
/* very small phones: the four feature cards share the width instead of pushing past it */
.pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pillars > * { min-width: 0; }
@media (max-width: 340px) { .pillars > * b, .pillars > * strong { font-size: .7rem; } .pillars > * small { font-size: .58rem; } }
@media (max-width: 360px) { .pillars > button > b { font-size: .66rem !important; letter-spacing: -.01em; } .pillars > button > small { font-size: .56rem !important; } }
@media (max-width: 330px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pillars > button > b { font-size: .76rem !important; } .pillars > button > small { font-size: .62rem !important; } }
/* the LIVE badge never breaks across lines */
.live-badge { white-space: nowrap; flex-shrink: 0; }
/* =========================================================
Home: compact live-auction cards
========================================================= */
.lc-rail { gap: 10px; scroll-snap-type: x mandatory; }
.lc { box-sizing: border-box; flex: 0 0 152px; width: 152px; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: #FFFCF7; overflow: hidden; scroll-snap-align: start; }
.lc-img { position: relative; display: block; width: 100%; height: 96px; padding: 0; border: 0; background: var(--sand); }
.lc-img .pic { position: absolute; inset: 0; }
.lc-img .live-badge { position: absolute; left: 6px; top: 6px; }
.lc-left { position: absolute; right: 6px; top: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 252, 247, .92); font-size: .64rem; font-weight: 700; color: var(--ink); }
.lc-body { box-sizing: border-box; flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 9px 9px; }
.lc-body > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: .76rem; line-height: 1.3; color: var(--ink); min-height: 2.6em; }
.lc-body > small { font-size: .62rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 2px; }
.lc-price { font-size: .86rem; font-weight: 800; color: var(--primary); }
.lc-row small { font-size: .62rem; color: var(--muted); white-space: nowrap; }
.lc-demo { font-size: .58rem !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink) !important; }
.lc-bid { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: auto; height: 32px; border: 0; border-radius: 10px; background: var(--primary); color: #FFF8EE; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
.lc-body .lc-row + .lc-bid, .lc-body .lc-demo + .lc-bid { margin-top: 6px; }
/* =========================================================
One shared brown "Discover its story" button (Picked for You + Stories)
========================================================= */
.stc-go { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; margin-top: 8px; padding: 0 14px; border-radius: 10px; background: var(--primary); color: #FFF8EE; font-size: .78rem; font-weight: 700; transition: background-color .15s, transform .12s; }
.stc-go .ic { color: #F4D59A; }
@media (hover: hover) { .stc:hover .stc-go { background: #45200C; } }
.stc:active .stc-go { background: #3A1A09; transform: scale(.98); }
.stc:focus-visible .stc-go { outline: 2px solid var(--accent); outline-offset: 2px; }
.fy .stc-go { margin-top: auto; }
/* Stories Behind the Creations: the same card treatment as Picked for You */
.stc-rail > .stc { box-sizing: border-box; flex: 0 0 236px; width: 236px; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: #FFFCF7; overflow: hidden; }
.stc-rail > .stc .stc-img { width: 100%; height: 150px; aspect-ratio: auto; border-radius: 0; }
.stc-rail > .stc .stc-body { box-sizing: border-box; flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px 12px; }
.stc-rail > .stc .stc-body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.stc-rail > .stc .stc-body small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stc-rail > .stc .stc-line { min-height: calc(1.45em * 2); }
.stc-rail > .stc .stc-go { margin-top: auto; }
.fy .stc-body { padding-bottom: 8px; }
/* =========================================================
Loka waiting animation (shown only while a reply is pending)
========================================================= */
.lk-wait { align-items: center; }
.lk-wait-av { position: relative; flex: 0 0 40px; width: 40px; height: 44px; }
.lk-wait-art { width: 40px; height: auto; }
.lk-spark { position: absolute; right: -6px; top: -2px; font-style: normal; font-size: .7rem; color: var(--accent); }
.lk-wait-bubble { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: #F4E9DA; font-size: .82rem; color: var(--ink-2); }
.lk-dots { display: inline-flex; gap: 4px; }
.lk-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
.lk-wait-art { animation: lkFloat 1.6s ease-in-out infinite; }
.lk-spark { animation: lkSpark 2.4s linear infinite; }
.lk-dots i { animation: lkDot 1.2s ease-in-out infinite; }
.lk-dots i:nth-child(2) { animation-delay: .15s; } .lk-dots i:nth-child(3) { animation-delay: .3s; }
.lk-wait { animation: elFade .2s ease-out both; }
}
@keyframes lkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes lkSpark { from { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.25); } to { transform: rotate(360deg) scale(1); } }
@keyframes lkDot { 0%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* =========================================================
Collectibles & Art Collections
========================================================= */
.cgp { padding: 0 18px 28px; }
.cgp-sub { margin: -4px 0 12px; font-size: .82rem; line-height: 1.45; }
.cgp .search-row { margin-bottom: 4px; }
.filter-btn.on { background: var(--primary); color: #fff; }
.cg-filters { display: grid; gap: 8px; margin: 8px 0 4px; padding: 10px 12px; border-radius: 14px; background: #FBF3E6; }
/* 3D carousel: perspective stage, centre card forward, neighbours angled back */
.cg3 { position: relative; height: clamp(250px, 44vh, 340px); margin: 14px -18px 0; perspective: 1100px; outline: none; touch-action: pan-y; }
.cg3:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 18px; }
.cg3-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.cg3-card { position: absolute; left: 50%; top: 4%; width: 56%; height: 92%; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: var(--sand); box-shadow: 0 18px 30px -18px rgba(60, 30, 14, .55); transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease; cursor: pointer; }
.cg3-card .pic { position: absolute; inset: 0; }
.cg3-card:not(.on)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250, 243, 230, .05), rgba(250, 243, 230, .35)); }
.cg3-card.on { box-shadow: 0 22px 36px -16px rgba(60, 30, 14, .6), 0 0 0 3px #F3E3C6; }
.cg3-tag { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: rgba(43, 22, 11, .72); color: #FFF3DE; font-size: .66rem; font-weight: 700; z-index: 2; }
.cg3-nav { position: absolute; top: 50%; z-index: 20; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: rgba(255, 252, 247, .92); color: var(--primary); box-shadow: 0 6px 16px -8px rgba(60, 30, 14, .5); }
.cg3-nav.prev { left: 10px; } .cg3-nav.next { right: 10px; }
.cg3-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.cg3-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: #E3D2B8; transition: width .25s, background-color .25s; }
.cg3-dots button.on { width: 20px; background: var(--primary); }
@media (prefers-reduced-motion: reduce) { .cg3-card { transition: none; } }
/* selected item details */
.cgi { margin-top: 12px; }
.cgi-kind { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.cgi h2 { margin-top: 3px; font-size: 1.1rem; color: var(--ink); }
.cgi-by { margin-top: 3px; font-size: .8rem; color: var(--muted); }
.cgi-by .link { font-size: inherit; }
.cgi-text { margin-top: 6px; font-size: .84rem; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cgi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: .8rem; color: var(--ink-2); }
.cgi-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.cgi-save { margin-left: auto; }
.cgi-save[aria-pressed="true"] .ic { color: var(--bad); fill: currentColor; }
/* featured collections */
.cgc-rail { gap: 12px; }
.cgc { box-sizing: border-box; flex: 0 0 248px; width: 248px; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: #FFFCF7; overflow: hidden; text-align: left; }
.cgc-cover { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 150px; }
.cgc-cover .pic.a { grid-row: 1 / span 2; }
.cgc-cover .pic:only-child { grid-column: 1 / -1; }
.cgc-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0; flex: 1; }
.cgc-body b { font-size: .9rem; color: var(--ink); }
.cgc-body small { font-size: .7rem; color: var(--muted); }
.cgc-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .76rem; line-height: 1.45; color: var(--ink-2); }
.cgc-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; margin-top: auto; padding: 0 12px; border-radius: 10px; background: var(--primary); color: #FFF8EE; font-size: .76rem; font-weight: 700; }
/* item grid (two columns on phones) */
.cg-types { margin: -2px 0 10px; }
.cgg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .cgg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cgg-cell { position: relative; min-width: 0; }
.cgg-card { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: #FFFCF7; overflow: hidden; text-align: left; }
.cgg-card .pic { aspect-ratio: 1; width: 100%; }
.cgg-body { display: grid; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.cgg-body b { font-size: .8rem; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cgg-body small { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cgg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .74rem; color: var(--ink-2); }
.cgg-meta .a-pill { font-size: .56rem; }
.cgg-order { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.cgg-order .icon-btn { width: 30px; height: 30px; background: rgba(255, 252, 247, .92); }
/* collection page */
.cgd { padding: 0 18px 28px; }
.cgd-cover { position: relative; height: clamp(190px, 32vh, 280px); margin: 0 -18px 14px; }
.cgd-cover .pic { position: absolute; inset: 0; }
.cgd-title { margin-top: 3px; font-size: 1.3rem; color: var(--ink); }
/* creator profile: series & curated galleries */
.crs-rail { display: flex; gap: 10px; overflow-x: auto; margin: 0 -18px; padding: 0 18px 4px; scrollbar-width: none; }
.crs-rail::-webkit-scrollbar { display: none; }
.crs { flex: 0 0 150px; display: grid; gap: 6px; padding: 0; border: 0; background: none; text-align: left; }
.crs-img { aspect-ratio: 1; border-radius: 14px; }
.crs span { display: grid; gap: 1px; min-width: 0; }
.crs small { font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.crs b { font-size: .8rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crs em { font-style: normal; font-size: .68rem; color: var(--muted); }
/* form */
.ser-pick { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; padding: 2px; }
.ser-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: .82rem; }
.ser-row input { accent-color: var(--primary); }
.ser-thumb { flex: 0 0 40px; height: 40px; border-radius: 8px; }
.ser-row span { display: grid; min-width: 0; } .ser-row small { font-size: .66rem; color: var(--muted); }
/* item page: roles and collections */
.roles-facts { margin-top: 14px; }
.roles-facts .link { font-size: inherit; text-align: left; }
.in-cols { display: grid; gap: 6px; margin-top: 12px; }
.in-cols > small { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cg3 { overflow: hidden; }
/* =========================================================
Picked for You: Loka's own story button (golden, from Loka's colours)
========================================================= */
.fy .stc-go.loka-go { background: linear-gradient(135deg, #FBE7B8 0%, #F2C46D 55%, #E2A64A 100%); color: #4A2410; box-shadow: inset 0 0 0 1px rgba(160, 98, 30, .35), 0 4px 12px -8px rgba(200, 137, 44, .9); }
.fy .stc-go.loka-go .ic { color: #7A3F14; }
.loka-go-face { width: 22px; height: 22px; margin-left: -4px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 248, 230, .8); }
@media (hover: hover) { .fy .stc:hover .stc-go.loka-go { background: linear-gradient(135deg, #FCECC4 0%, #F4CB7B 55%, #E5AE57 100%); box-shadow: inset 0 0 0 1px rgba(160, 98, 30, .45), 0 6px 16px -8px rgba(200, 137, 44, 1); } }
.fy .stc:active .stc-go.loka-go { background: linear-gradient(135deg, #F6DCA2 0%, #E9B65A 60%, #D7983E 100%); transform: scale(.98); }
/* =========================================================
Community: Friends' Stories strip
========================================================= */
.fst { display: flex; gap: 10px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.fst::-webkit-scrollbar { display: none; }
.fst-add { flex: 0 0 74px; display: grid; justify-items: center; align-content: center; gap: 6px; height: 178px; padding: 0; border: 1.5px dashed #DCC7A8; border-radius: 16px; background: #FFFCF7; color: var(--primary); }
.fst-me { position: relative; width: 48px; height: 48px; }
.fst-me .av, .fst-me img, .fst-me > * { width: 48px !important; height: 48px !important; border-radius: 50%; }
.fst-me i { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 20px !important; height: 20px !important; border-radius: 50%; background: var(--primary); color: #fff; border: 2px solid #FFFCF7; }
.fst-add small { font-size: .68rem; font-weight: 700; }
.fst-card { position: relative; flex: 0 0 122px; width: 122px; height: 178px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--sand); text-align: left; scroll-snap-align: start; box-shadow: 0 8px 18px -14px rgba(60, 30, 14, .7); }
.fst-cover { position: absolute; inset: 0; }
.fst-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 22, 11, 0) 35%, rgba(43, 22, 11, .82) 100%); }
.fst-new { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .58rem; font-weight: 800; letter-spacing: .04em; }
.fst-info { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; display: grid; gap: 3px; color: #FFF8EE; }
.fst-who { display: flex; align-items: center; gap: 5px; min-width: 0; }
.fst-who .sx-av, .fst-who .av, .fst-who img { flex: 0 0 22px; width: 22px !important; height: 22px !important; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 248, 238, .9); font-size: .5rem; }
.fst-who b { font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fst-f { display: grid; place-items: center; flex: 0 0 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.fst-f .ic { width: 9px; height: 9px; color: #fff; stroke-width: 3; }
.fst-title { font-size: .72rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fst-info small { font-size: .6rem; opacity: .85; }
/* =========================================================
Explore: six categories in a 2 × 3 grid
========================================================= */
.ex-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ex-cats .ex-cat { min-height: 76px; align-content: center; padding: 12px 8px; font-size: .78rem; text-align: center; overflow-wrap: anywhere; }
@media (min-width: 560px) { .ex-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fst-add { scroll-snap-align: start; }
/* =========================================================
Home: search first
========================================================= */
.h-search-top { margin: 6px 0 14px; }
/* =========================================================
Community: editorial story posts (no divider between posts)
========================================================= */
.sx + .sx::before { content: none !important; display: none !important; }
.sx.sx2 { position: relative; margin: 0 0 16px; padding: 16px 16px 12px; border: 1px solid #EFE4D6; border-radius: 20px; background: #FFFCF7; box-shadow: none; }
.sx2-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.sx2-kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--accent); }
.sx2-head { display: flex; align-items: center; gap: 10px; }
.sx2-who { flex: 0 0 auto; padding: 0; border: 0; background: none; border-radius: 50%; }
.sx2-who .sx-av, .sx2-who .av, .sx2-who img { width: 44px !important; height: 44px !important; border-radius: 50%; box-shadow: 0 0 0 2px #E8C987; }
.sx2-meta { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sx2-meta b, .sx2-meta b .link { font-size: .9rem; font-weight: 700; color: var(--ink); text-align: left; }
.sx2-meta small { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx2-more { flex: 0 0 auto; width: 36px; height: 36px; color: var(--muted); }
.sx2-badges { margin: 8px 0 0 54px; }
.sx2-title { margin: 12px 0 0; font-size: 1.12rem; line-height: 1.3; }
.sx2-title button { padding: 0; border: 0; background: none; font: inherit; font-weight: 800; color: var(--ink); text-align: left; overflow-wrap: anywhere; }
.sx2-text { margin-top: 6px; font-size: .86rem; line-height: 1.55; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sx2-imgs { margin-top: 12px; }
/* three photos: one large on top, two below */
.sx2-imgs.pg-3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; aspect-ratio: auto; }
.sx2-imgs.pg-3 .pi:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; height: auto !important; }
.sx2-imgs.pg-3 .pi:not(:first-child) { aspect-ratio: 4 / 3; height: auto !important; }
.sx2-imgs.pg-2 .pi { aspect-ratio: 4 / 5; }
.sx2-imgs.pg-1 .pi { aspect-ratio: 4 / 3; }
.sx2-rel { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px solid #EFE4D6; border-radius: 14px; background: #FBF5EB; text-align: left; color: var(--muted); }
.sx2-rel-img { flex: 0 0 56px; height: 56px; border-radius: 10px; }
.sx2-rel .grow { flex: 1; display: grid; gap: 1px; min-width: 0; }
.sx2-rel small { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.sx2-rel b { font-size: .86rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx2-rel span span, .sx2-rel .grow > span { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx2-actions { display: flex; gap: 10px; margin-top: 12px; }
.sx2-main, .sx2-sec { flex: 1 1 0; min-width: 0; height: 44px; gap: 8px; border-radius: 999px; }
.sx2-eng { display: flex; align-items: center; gap: 16px; margin-top: 10px; padding-top: 8px; }
.sx2-eng > button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: none; font: inherit; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.sx2-eng .grow { flex: 1; }
.sx2-eng .sx-appr.on, .sx2-eng .sx-appr.on .ic { color: var(--bad); }
.sx2-eng .sx-appr.on .ic, .sx2-eng .sx-save.on .ic { fill: currentColor; }
.sx2-eng .sx-save.on { color: var(--primary); }
/* Stories from your community: tidy heading */
.fst-hint { margin: -6px 0 8px; font-size: .74rem; color: var(--muted); }
/* =========================================================
Creators directory
========================================================= */
.cdp { padding: 0 18px 28px; }
.cd-roles { margin: 10px -18px 12px; padding: 0 18px; }
.cd-list { display: grid; gap: 10px; }
.cd-card { display: flex; gap: 12px; padding: 12px; border: 1px solid #EFE4D6; border-radius: 18px; background: #FFFCF7; }
.cd-photo { flex: 0 0 84px; height: 84px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--sand); }
.cd-photo .pic { width: 100%; height: 100%; }
.cd-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cd-name { font-size: .94rem; color: var(--ink); }
.cd-roles-line { display: flex; flex-wrap: wrap; gap: 4px; }
.cd-role { padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .62rem; font-weight: 700; }
.cd-role.mute { background: var(--sand); color: var(--muted); }
.cd-loc { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--muted); }
.cd-bio { font-size: .78rem; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cd-acts .btn { height: 34px; }
/* =========================================================
Books & Literature
========================================================= */
.bk-rail { gap: 12px; }
.bk { flex: 0 0 140px; width: 140px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-cover { position: relative; width: 140px; aspect-ratio: 2 / 3; padding: 0; border: 0; border-radius: 6px 12px 12px 6px; overflow: hidden; background: var(--sand); box-shadow: 0 10px 18px -12px rgba(60, 30, 14, .7); }
.bk-cover .pic { position: absolute; inset: 0; }
.bk-title { margin-top: 6px; font-size: .8rem; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk small { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-meta { font-size: .62rem !important; }
.bk-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.bk-price { font-size: .86rem; font-weight: 800; color: var(--primary); }
.bk-go { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; margin-top: 4px; border: 0; border-radius: 10px; background: var(--primary); color: #FFF8EE; font: inherit; font-size: .74rem; font-weight: 700; }
.book-facts { margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.book-facts .link { font-size: inherit; }
/* book covers fill their frame; creator buttons share one row */
.bk-cover .pic, .bk-cover .pic img { width: 100% !important; height: 100% !important; object-fit: cover; }
.cd-acts { flex-wrap: nowrap; }
.cd-acts .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: .74rem; white-space: nowrap; }
/* =========================================================
Community refinements
========================================================= */
/* story strip: cards snap inside the page padding (not flush to the screen edge), room below */
.fst { scroll-padding-inline: 18px; margin-bottom: 20px; padding-bottom: 4px; }
.fst-add { flex: 0 0 78px; height: 178px; gap: 8px; }
.fst-info { left: 10px; right: 10px; bottom: 10px; }
.fst-card::after { background: linear-gradient(180deg, rgba(43, 22, 11, 0) 30%, rgba(43, 22, 11, .86) 100%); }
.fst-hint { margin: -4px 0 12px; }
/* Local Knowledge: compact, even rows with thin separators */
.lk { border-top: 1px solid #EFE4D6; }
.lk .lk-row { min-height: 60px; padding: 10px 2px; border: 0; border-bottom: 1px solid #EFE4D6; border-radius: 0; background: none; box-shadow: none; outline: none; }
.lk .lk-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.lk .lk-row .grow { gap: 2px; }
.lk .lk-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk .lk-row > .ic { flex-shrink: 0; color: var(--muted); }
/* Meet the Community: even, roomier cards */
.mc-rail { gap: 10px; }
.mc.mc2 { box-sizing: border-box; flex: 0 0 128px; width: 128px; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 14px 10px 12px; border: 1px solid #EFE4D6; border-radius: 18px; background: #FFFCF7; }
.mc2 .mc-open { width: 100%; gap: 3px; }
.mc2 .mc-av { width: 56px !important; height: 56px !important; margin-bottom: 6px; }
.mc2 .mc-open b { width: 100%; font-size: .78rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.mc2 .mc-open small { width: 100%; font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc2-badge { display: flex; justify-content: center; min-height: 22px; max-width: 100%; overflow: hidden; }
.mc2-badge .lb { max-width: 100%; }
.mc2 .f-btn, .mc2 .btn { width: 100%; height: 30px; padding: 0 10px; font-size: .72rem; }
.pp-row { display: flex; align-items: center; gap: 10px; }
.pp-open { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; }
.pp-av { width: 44px !important; height: 44px !important; flex-shrink: 0; }
/* More Stories: buttons stay on one line at phone widths */
.sx2-main, .sx2-sec { padding: 0 12px; font-size: .8rem; white-space: nowrap; }
.sx2-main .ic, .sx2-sec .ic { flex-shrink: 0; }
/* bottom content stays above the fixed navigation */
.comm, .sxc { padding-bottom: 96px; }
/* =========================================================
Books & Literature (Home, Books page, published works)
========================================================= */
.sec-sub { margin: -6px 0 10px; font-size: .78rem; }
.bk-story { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: .72rem; font-weight: 700; color: var(--accent-ink); text-align: left; }
.bkp { padding: 0 18px 28px; }
.bk-subs { margin: 10px -18px 12px; padding: 0 18px; }
.bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
@media (min-width: 640px) { .bk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bk.bk-cell { flex: none; width: auto; }
.bk.bk-cell .bk-cover { width: 100%; }
.pub-list { display: grid; gap: 8px; margin-top: 8px; }
.pub { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px 8px 8px; border: 1px solid #EFE4D6; border-radius: 14px; background: #FFFCF7; text-align: left; color: var(--muted); }
.pub-cover { flex: 0 0 48px; height: 72px; border-radius: 4px 8px 8px 4px; }
.pub .grow { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pub b { font-size: .84rem; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pub small { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-price { font-size: .8rem; font-weight: 800; color: var(--primary); }
/* Explore: link to the creators directory under the six categories */
.ex-creators { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #FFFCF7; text-align: left; color: var(--primary); }
.ex-creators .grow { flex: 1; display: grid; gap: 1px; min-width: 0; }
.ex-creators b { font-size: .86rem; color: var(--ink); }
.ex-creators small { font-size: .7rem; color: var(--muted); }
/* =========================================================
Traveler profile: cultural portfolio
========================================================= */
.me-page .pf-head .me-av { box-shadow: 0 0 0 4px #FFFCF7, 0 0 0 6px #E8C987, 0 10px 20px -12px rgba(60, 30, 14, .6); }
.me-page .me-stats > div + div { border-left: 1px solid #EADCC8; }
.me-page .me-name { margin-top: 10px; }
.me-page .me-bio { position: relative; margin-top: 10px; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent); font-style: italic; color: var(--ink-2); }
.me-page .lb-profile { margin-top: 10px; }
.me-page .two-btns .btn { gap: 8px; }
/* sections: no heavy cards, consistent rhythm */
.pf-sec { margin-top: 24px; }
.pf-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pf-sec-h h2 { font-size: 1rem; font-weight: 700; color: var(--ink); }
.pf-more { display: inline-flex; align-items: center; gap: 3px; font-size: .8rem; font-weight: 600; color: var(--accent-ink); }
.pf-hint { margin-top: 8px; font-size: .74rem; color: var(--muted); }
/* My Cultural Interests: 3 × 2 grid of icons (no heading icon) */
.pfi-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
.pfi { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: var(--muted); }
.pfi-ic { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #F6EBDA; color: #A08566; transition: background-color .15s, color .15s; }
.pfi.on .pfi-ic { background: #F3DDB0; color: var(--primary); box-shadow: inset 0 0 0 1px rgba(183, 130, 60, .35); }
.pfi-ic i { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; border: 2px solid var(--bg); }
.pfi-ic i .ic { width: 9px; height: 9px; stroke-width: 3; }
.pfi-l { max-width: 100%; font-size: .74rem; font-weight: 600; line-height: 1.25; text-align: center; color: var(--ink-2); overflow-wrap: anywhere; }
.pfi:not(.on) .pfi-l { color: var(--muted); font-weight: 500; }
.pfi:focus-visible .pfi-ic { outline: 2px solid var(--accent); outline-offset: 2px; }
/* My Stories: journal tiles */
.pfs { display: flex; gap: 10px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 8px; scroll-padding-inline: 18px; scroll-snap-type: x proximity; scrollbar-width: none; }
.pfs::-webkit-scrollbar { display: none; }
.pfs-new, .pfs-tile { flex: 0 0 116px; height: 172px; scroll-snap-align: start; border-radius: 16px; }
.pfs-new { display: grid; place-items: center; align-content: center; gap: 10px; padding: 0; border: 1.5px dashed #E2C99A; background: linear-gradient(160deg, #FCF1DC, #F8E6C4); color: var(--primary); }
.pfs-new span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: #fff; }
.pfs-new b { font-size: .76rem; }
.pfs-tile { position: relative; display: flex; flex-direction: column; padding: 0; border: 1px solid #EFE4D6; background: #FFFCF7; overflow: hidden; text-align: left; box-shadow: 0 8px 16px -14px rgba(60, 30, 14, .7); }
.pfs-img { flex: 0 0 104px; height: 104px; width: 100%; }
.pfs-ago { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(43, 22, 11, .62); color: #FFF3DE; font-size: .6rem; font-weight: 700; }
.pfs-body { display: grid; gap: 3px; padding: 8px 9px; min-width: 0; }
.pfs-body b { font-size: .74rem; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pfs-body small { display: flex; align-items: center; gap: 3px; font-size: .62rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Connections: one compact row */
.pfc { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #EFE4D6; border-radius: 16px; background: #FFFCF7; }
.pfc-stack { display: flex; align-items: center; padding: 0; border: 0; background: none; }
.pfc-av { width: 36px !important; height: 36px !important; border-radius: 50%; box-shadow: 0 0 0 2px #FFFCF7; font-size: .7rem; }
.pfc-stack > * + * { margin-left: -10px; }
.pfc-more { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #F3E3C6; color: var(--primary); font-size: .7rem; font-weight: 800; box-shadow: 0 0 0 2px #FFFCF7; }
.pfc-stats { display: flex; }
.pfc-stats button { display: grid; justify-items: start; gap: 0; padding: 0 12px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; }
.pfc-stats button + button { border-left: 1px solid #EADCC8; }
.pfc-stats b { font-size: .94rem; } .pfc-stats small { font-size: .66rem; color: var(--muted); }
.me-page { padding-bottom: 96px; }
/* own profile: a landscape shows if the cover file is missing; actions stay on one line */
.me-page .pf-cover:not(.empty) { background: #E9D7B8 url("photo/prod-the-golden-peak.jpg") center 35% / cover no-repeat; }
.me-page > .two-btns .btn, .me-page .two-btns .btn { white-space: nowrap; min-width: 0; padding: 0 12px; font-size: .84rem; }
.me-page .two-btns .btn .ic { flex-shrink: 0; }
.pfs-new, .pfs-tile { height: 160px; }
@media (max-width: 350px) { .me-page .two-btns .btn .ic { display: none; } .me-page .two-btns .btn { font-size: .78rem; padding: 0 8px; } }
.me-page .pf-cover .pic { background: #E9D7B8 url("photo/prod-the-golden-peak.jpg") center 35% / cover no-repeat; }
/* =========================================================
My Activity: one list, three tabs
========================================================= */
.act2 { padding-bottom: 4px; }
.act2-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.act2-cart { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #FFFCF7; color: var(--primary); font: inherit; font-size: .78rem; font-weight: 700; }
.act2-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 14px; padding: 4px; border-radius: 14px; background: #F3E9DA; }
.act2-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border: 0; border-radius: 11px; background: none; font: inherit; font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.act2-tabs button[aria-selected="true"] { background: #FFFCF7; color: var(--primary); box-shadow: 0 2px 8px -4px rgba(60, 30, 14, .45); }
.act2-tabs .a-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: .62rem; line-height: 18px; }
.act2-search { display: flex; gap: 8px; margin-top: 12px; }
.act2-search .search { flex: 1; min-width: 0; }
.act2-filters { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border-radius: 14px; background: #FBF3E6; }
.act2-filters small { display: block; margin-bottom: 6px; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.act2-body { padding: 4px 18px 100px; }
.atx-list { display: grid; gap: 10px; }
/* one transaction item */
.atx { border: 1px solid #EFE4D6; border-radius: 18px; background: #FFFCF7; overflow: hidden; }
.atx.attn { border-color: #E8C987; box-shadow: inset 3px 0 0 var(--accent); }
.atx-main { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px 8px; border: 0; background: none; text-align: left; color: var(--muted); }
.atx-media { position: relative; flex: 0 0 64px; height: 64px; }
.atx-img { width: 64px; height: 64px; border-radius: 12px; }
.atx-date { position: absolute; right: -6px; bottom: -6px; display: grid; justify-items: center; min-width: 34px; padding: 2px 4px; border-radius: 8px; background: var(--primary); color: #FFF3DE; line-height: 1; box-shadow: 0 0 0 2px #FFFCF7; }
.atx-date b { font-size: .84rem; } .atx-date small { font-size: .52rem; text-transform: uppercase; letter-spacing: .04em; }
.atx-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.atx-kind { display: inline-flex; align-items: center; gap: 4px; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.atx-title { font-size: .88rem; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.atx-by, .atx-ref { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atx-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 12px; border-top: 1px dashed #EFE4D6; }
.atx-status { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: start; }
.atx-status small { font-size: .7rem; line-height: 1.35; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.atx-btns { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.atx-btns .btn { white-space: nowrap; }
.atx-btns .link { font-size: .74rem; }
/* saved */
.sv-row { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid #EFE4D6; border-radius: 16px; background: #FFFCF7; }
.sv-main { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; text-align: left; color: var(--muted); min-width: 0; }
.sv-img { flex: 0 0 56px; height: 56px; border-radius: 12px; }
.sv-main .grow { flex: 1; display: grid; gap: 1px; min-width: 0; }
.sv-main small { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.sv-main b { font-size: .86rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-main span span, .sv-main .grow > span { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-acts { display: flex; align-items: center; gap: 12px; }
.sv-acts .link { font-size: .76rem; }
.sv-x { margin-left: auto; width: 32px; height: 32px; color: var(--muted); }
/* detail: labelled timeline, delivery card, booking date */
.tl { list-style: none; margin: 6px 0 0; padding: 0; }
.tl li { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
.tl li:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: #EADCC8; }
.tl li.done:not(:last-child)::before { background: var(--accent); }
.tl-dot { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #E0CDB2; background: #FFFCF7; color: #fff; }
.tl li.done .tl-dot { border-color: var(--accent); background: var(--accent); }
.tl li.now .tl-dot { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(122, 63, 20, .12); }
.tl-dot .ic { width: 12px; height: 12px; stroke-width: 3; }
.tl-txt { display: grid; gap: 1px; padding-top: 2px; }
.tl-txt b { font-size: .84rem; color: var(--ink); }
.tl li:not(.done):not(.now) .tl-txt b { color: var(--muted); font-weight: 600; }
.tl-txt small { font-size: .7rem; color: var(--muted); }
.txcard { margin-top: 4px; padding: 4px 12px 8px; border: 1px solid #EFE4D6; border-radius: 14px; background: #FFFCF7; }
.txbook { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px; border: 1px solid #EFE4D6; border-radius: 16px; background: #FFFCF7; }
.txbook-date { display: grid; justify-items: center; flex: 0 0 64px; padding: 8px 0; border-radius: 12px; background: var(--primary); color: #FFF3DE; line-height: 1.1; }
.txbook-date b { font-size: 1.4rem; } .txbook-date small { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; }
.txbook .grow { flex: 1; display: grid; gap: 2px; min-width: 0; }
.txbook .grow b { font-size: .92rem; color: var(--ink); }
.txbook .grow small { display: flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--muted); }
/* My Cultural Interests: four in one row (See More adds rows of four) */
.pfi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; }
.pfi-ic { width: 56px; height: 56px; background: #FBEFD6; border: 1px solid #E2C27E; color: #7A4A1E; }
.pfi.on .pfi-ic { background: #F6E1B4; border-color: #D2A24C; box-shadow: none; }
.pfi:not(.on) .pfi-ic { background: #FCF6EA; border-color: #EAD6AE; color: #A08566; }
.pfi-l { font-size: .72rem; }
@media (max-width: 350px) { .pfi-ic { width: 48px; height: 48px; } .pfi-l { font-size: .66rem; } }
/* profile posts: 3-column photo grid */
.pgrid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
@media (min-width: 640px) { .pgrid3 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } }
.pg3 { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--sand); }
.pg3 .pg3-img { position: absolute; inset: 0; }
.pg3-n { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 999px; background: rgba(43, 22, 11, .62); color: #FFF3DE; font-size: .62rem; font-weight: 700; }
.pg3-n .ic { width: 10px; height: 10px; }
.pg3-text { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; background: #F6EBDA; color: var(--ink); font-size: .68rem; font-weight: 700; text-align: center; }
.sx-sheet-eng { margin-top: 10px; }
/* books page: featured book */
.bk-feature { display: flex; gap: 14px; width: 100%; margin: 4px 0 4px; padding: 12px; border: 1px solid #EFE4D6; border-radius: 18px; background: #FFFCF7; text-align: left; color: var(--muted); }
.bk-feature-cover { flex: 0 0 96px; height: 144px; border-radius: 4px 10px 10px 4px; }
.bk-feature .grow { flex: 1; display: grid; gap: 3px; align-content: start; min-width: 0; }
.bk-feature small { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.bk-feature b { font-size: 1rem; color: var(--ink); }
.bk-feature > .grow > span { font-size: .74rem; }
.bk-feature em { font-style: normal; font-size: .78rem; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.writer-badge { margin-top: 8px; }
.bkp .search-row { margin-bottom: 0; }
/* =========================================================
Images: intentional fallbacks and display rules
========================================================= */
/* a missing or failed image shows a soft LOCARTA mark, not an empty box */
.pic.pic-failed { background: #EFE3D0 url("photo/locarta-mark.png") center / 34% auto no-repeat; }
/* people: their initials */
.pic.av-pic.pic-failed { display: grid; place-items: center; background: linear-gradient(135deg, #C9893F, #7A3F14); }
.pic.av-pic.pic-failed::after { content: attr(data-fb); color: #FFF3DE; font-weight: 800; font-size: .8em; letter-spacing: .02em; }
.pic.av-pic.pic-failed:not([data-fb])::after { content: ""; }
/* photos fill their frames; book covers on their own page are shown whole */
.pic img { width: 100%; height: 100%; object-fit: cover; }
.d-hero.d-hero-book { background: #EADCC6; }
.d-hero.d-hero-book .pic { background: #EADCC6; }
.d-hero.d-hero-book .pic img { object-fit: contain; padding: 18px 0 34px; }
/* =========================================================
Creator Home: gradient identity banner
========================================================= */
.cwx-me.cwx-banner { position: relative; gap: 14px; margin-top: 12px; padding: 14px 14px 14px 12px; border-radius: 22px; overflow: hidden; color: #FFF3DE;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23F4D59A' stroke-width='1.4'%3E%3Cpath d='M14 2 26 14 14 26 2 14Z'/%3E%3Cpath d='M14 8 20 14 14 20 8 14Z'/%3E%3C/g%3E%3C/svg%3E") right -6px center / 28px 28px repeat-y,
linear-gradient(110deg, #3A1A09 0%, #5E2E10 42%, #8E5520 78%, #B07A36 100%);
box-shadow: 0 14px 26px -18px rgba(58, 26, 9, .85); }
.cwx-me.cwx-banner::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 46%; background: linear-gradient(90deg, #5E2E10 0%, rgba(94, 46, 16, .55) 40%, rgba(142, 85, 32, .35) 100%); pointer-events: none; }
.cwx-banner > * { position: relative; z-index: 1; }
.cwx-banner .cwx-av { flex: 0 0 auto; box-shadow: 0 0 0 2px #E8C987, 0 0 0 4px rgba(255, 243, 222, .25); }
.cwx-banner .grow { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.cwx-banner .grow > b { font-size: 1.02rem; line-height: 1.25; color: #FFF6E6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cwx-banner .cr-tag { background: #F6E1B4; color: #5E2E10; border: 0; }
.cwx-banner .grow > small { font-size: .74rem; color: rgba(255, 243, 222, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cwx-banner .cwx-view { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border: 1px solid rgba(255, 243, 222, .75); border-radius: 999px; background: rgba(255, 243, 222, .12); color: #FFF3DE; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.cwx-banner:active { transform: scale(.99); }
@media (max-width: 360px) { .cwx-me.cwx-banner { flex-wrap: wrap; } .cwx-banner .cwx-view { margin-left: auto; } .cwx-banner .grow { flex: 1 1 calc(100% - 90px); } }
/* =========================================================
Creator Activity: compact cards with a progress stepper
========================================================= */
.ac-tiles.ac-tiles3 button { padding: 8px 10px; min-height: 0; }
.ac-tiles.ac-tiles3 b { font-size: 1.05rem; }
.ac-tiles.ac-tiles3 button[aria-selected="true"] { border-color: var(--primary); background: #F6EAD8; }
.txc.txc2 { display: grid; gap: 10px; padding: 12px; }
.txc2-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.txc2-top .grow { flex: 1; display: grid; gap: 2px; min-width: 0; }
.txc2-top .grow b { font-size: .88rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txc2-top .grow small { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-step { list-style: none; margin: 0; padding: 0; display: flex; }
.tx-step li { position: relative; flex: 1 1 0; display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; }
.tx-step li:not(:last-child)::after { content: ""; position: absolute; top: 8px; left: calc(50% + 10px); right: calc(-50% + 10px); height: 2px; background: #EADCC8; }
.tx-step li.done:not(:last-child)::after { background: var(--accent); }
.tx-step i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #E0CDB2; background: #FFFCF7; color: #fff; }
.tx-step li.done i { border-color: var(--accent); background: var(--accent); }
.tx-step li.now i { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(122, 63, 20, .12); }
.tx-step i .ic { width: 10px; height: 10px; stroke-width: 3; }
.tx-step span { font-size: .58rem; line-height: 1.2; color: var(--muted); }
.tx-step li.done span, .tx-step li.now span { color: var(--ink); font-weight: 600; }
.txc-note { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px dashed #EFE4D6; }
.txc-trk { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: .72rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txc-trk.muted { color: var(--muted); font-style: italic; }
.txc-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; font-size: .72rem; font-weight: 700; color: var(--accent-ink); }
/* =========================================================
Explore: Meet the Travelers
========================================================= */
.tv-rail { gap: 12px; }
.tv { box-sizing: border-box; flex: 0 0 212px; width: 212px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px 12px; border: 1px solid #EFE4D6; border-radius: 18px; background: #FFFCF7; text-align: center; }
.tv-who { display: grid; justify-items: center; gap: 2px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); }
.tv-av { width: 60px !important; height: 60px !important; margin-bottom: 6px; border-radius: 50%; box-shadow: 0 0 0 2px #E8C987; font-size: 1rem; }
.tv-who b { font-size: .86rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-who small, .tv-loc { font-size: .7rem; color: var(--muted); }
.tv-loc { display: inline-flex; align-items: center; gap: 3px; }
.tv-bio { font-size: .74rem; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.tv-badge { min-height: 22px; }
.tv-acts { display: flex; gap: 6px; width: 100%; margin-top: auto; }
.tv-acts .btn { flex: 1 1 0; min-width: 0; height: 32px; padding: 0 6px; font-size: .7rem; white-space: nowrap; }
.ex-creators-sm { margin-top: 12px; }
/* banner refinement: no overlay band; a faint motif on the right; roles may wrap */
.cwx-me.cwx-banner::after { content: none; }
.cwx-me.cwx-banner { background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23F4D59A' stroke-opacity='.28' stroke-width='1.2'%3E%3Cpath d='M13 2 24 13 13 24 2 13Z'/%3E%3Cpath d='M13 8 18 13 13 18 8 13Z'/%3E%3C/g%3E%3C/svg%3E") right 4px center / 26px 26px repeat-y,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23F4D59A' stroke-opacity='.14' stroke-width='1.2'%3E%3Cpath d='M13 2 24 13 13 24 2 13Z'/%3E%3C/g%3E%3C/svg%3E") right 30px center / 26px 26px repeat-y,
linear-gradient(110deg, #3A1A09 0%, #5E2E10 40%, #8E5520 78%, #B07A36 100%); }
.cwx-banner .grow > small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
/* creator account screen: centred profile photo (same alignment as the traveler profile) */
.prof-c { display: grid; justify-items: center; gap: 6px; margin: 6px 0 14px; text-align: center; }
.prof-c-av { width: 96px !important; height: 96px !important; flex: none !important; margin-bottom: 4px; border-radius: 50%; font-size: 1.6rem; box-shadow: 0 0 0 4px #FFFCF7, 0 0 0 6px #E8C987, 0 10px 20px -12px rgba(60, 30, 14, .6); }
.prof-c strong { font-size: 1.15rem; color: var(--ink); }
.prof-c-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.prof-c small { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; color: var(--muted); }
.prof-c-bio { max-width: 34ch; margin: 2px 0 4px; font-size: .84rem; line-height: 1.5; color: var(--ink-2); }
.prof-c .btn { gap: 6px; }
/* travelers page + Explore entry points */
.cd-handle { margin-top: -2px; font-size: .72rem; color: var(--muted); }
.cd-initials { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, #C9893F, #7A3F14); color: #FFF3DE; font-weight: 800; font-size: 1.3rem; }
.ex-entries { display: grid; gap: 8px; margin-top: 12px; }
.ex-entries .ex-creators { margin-top: 0; }
/* =========================================================
Onboarding: Loka reacts to each answer
========================================================= */
.lw-progress { margin: 2px 0 8px; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.lw-talk { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.lw-loka { position: relative; flex: 0 0 64px; }
.lw-loka-art { width: 64px; }
.lw-spark { position: absolute; top: -4px; right: -4px; font-style: normal; color: var(--accent); font-size: .8rem; }
.lw-bubble { flex: 1; display: grid; gap: 3px; padding: 11px 14px; border: 1px solid #EDE1CF; border-radius: 16px 16px 16px 4px; background: #FFFCF7; }
.lw-bubble b { font-size: .92rem; color: var(--ink); }
.lw-bubble small { font-size: .72rem; color: var(--muted); }
.lw-react { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #EADCC8; font-size: .8rem; line-height: 1.45; color: var(--primary); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
.lw-loka-art { animation: lwFloat 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.lw-loka-art.pop { animation: lwPop .5s cubic-bezier(.3, 1.6, .5, 1) both, lwFloat 2.4s ease-in-out .5s infinite; }
.lw-spark { animation: lkSpark 2.6s linear infinite; }
.lw-react { animation: elFade .3s ease-out both; }
}
@keyframes lwFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes lwPop { 0% { transform: scale(.85) rotate(-6deg); } 60% { transform: scale(1.12) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
/* =========================================================
Onboarding: festival celebration
========================================================= */
.lw-fest { position: relative; overflow: hidden; }
.fest-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.fest-sky i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; background: var(--c); transform: rotate(var(--r)); opacity: 0; }
.fest-ribbon { position: absolute; top: 34px; width: 46%; height: 26px; background: repeating-linear-gradient(90deg, #C8892F 0 14px, #7A3F14 14px 28px, #E8C987 28px 42px); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); opacity: .85; }
.fest-ribbon.r1 { left: -6%; transform: rotate(-4deg); } .fest-ribbon.r2 { right: -6%; transform: rotate(4deg) scaleX(-1); }
.fest-in { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; padding-top: 48px; }
.fest-loka { position: relative; margin-bottom: 8px; }
.fest-art { width: clamp(118px, 34vw, 150px); }
.fest-loka .sp { position: absolute; font-style: normal; color: var(--accent); font-size: 1.1rem; }
.fest-loka .sp.a { left: -18px; top: 18px; } .fest-loka .sp.b { right: -14px; top: 0; font-size: .9rem; } .fest-loka .sp.c { right: -22px; bottom: 26px; font-size: .8rem; }
.fest-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; max-width: 340px; }
.fest-chips span { padding: 5px 11px; border-radius: 999px; background: #F6E1B4; color: #5E2E10; font-size: .74rem; font-weight: 700; }
.lw-fest .wz-foot { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
.fest-sky i { animation: festFall 2.6s cubic-bezier(.25, .6, .4, 1) var(--d) 1 forwards; }
.fest-art { animation: festJump 1s cubic-bezier(.3, 1.5, .5, 1) .15s both, lwFloat 2.4s ease-in-out 1.2s infinite; }
.fest-loka .sp { animation: festTwinkle 1.4s ease-in-out infinite; } .fest-loka .sp.b { animation-delay: .3s; } .fest-loka .sp.c { animation-delay: .6s; }
.fest-ribbon { animation: festRibbon .8s ease-out both; }
.fest-in h1, .fest-in p, .fest-chips { animation: elFade .5s ease-out .35s both; }
}
@media (prefers-reduced-motion: reduce) { .fest-sky i { opacity: .8; top: calc(10% + var(--d) * 80); } }
@keyframes festFall { 0% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 100% { opacity: 0; transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); } }
@keyframes festJump { 0% { transform: translateY(30px) scale(.8); opacity: 0; } 60% { transform: translateY(-10px) scale(1.06); opacity: 1; } 100% { transform: translateY(0) scale(1); } }
@keyframes festTwinkle { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes festRibbon { from { opacity: 0; transform: translateY(-20px); } }
/* directory cards on very small phones: smaller photo, buttons may wrap, card never wider than the screen */
.cd-card { min-width: 0; }
.cd-body > * { min-width: 0; max-width: 100%; }
.cd-name, .cd-handle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 350px) { .cd-photo { flex-basis: 64px; height: 64px; } .cd-acts { flex-wrap: wrap; } .cd-acts .btn { flex: 1 1 100%; } }
/* =========================================================
Featured card (all six category pages)
========================================================= */
.feat { display: flex; gap: 0; margin: 4px 0 16px; border-radius: 18px; overflow: hidden; color: #FFF3DE;
background: linear-gradient(115deg, #3A1A09 0%, #5E2E10 45%, #8E5520 82%, #B07A36 100%); box-shadow: 0 12px 24px -18px rgba(58, 26, 9, .8); }
.feat.feat-loka { box-shadow: 0 0 0 1.5px rgba(232, 201, 135, .7), 0 12px 24px -16px rgba(176, 122, 54, .9); }
.feat-img { position: relative; flex: 0 0 38%; min-height: 168px; padding: 0; border: 0; background: #E9D7B8; }
.feat-img .pic { position: absolute; inset: 0; }
.feat-img .pic.feat-cover img { object-fit: contain; padding: 10px; background: #EADCC6; }
.feat-body { flex: 1; min-width: 0; display: grid; align-content: start; gap: 4px; padding: 12px 14px 14px; }
.feat-label { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 9px 3px 4px; border-radius: 999px; background: rgba(246, 225, 180, .18); color: #F6E1B4; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.feat-label .ic { margin-left: 4px; }
.feat-face { width: 18px; height: 18px; border-radius: 50%; }
.feat-title { font-size: .98rem; line-height: 1.3; color: #FFF6E6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feat-meta { font-size: .7rem; color: rgba(255, 243, 222, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-why, .feat-desc { font-size: .76rem; line-height: 1.4; color: rgba(255, 243, 222, .92); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feat-why { font-style: italic; }
.feat-go { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 7px 12px; border: 1px solid rgba(255, 243, 222, .75); border-radius: 999px; background: rgba(255, 243, 222, .12); color: #FFF3DE; font: inherit; font-size: .74rem; font-weight: 700; }
.ex-more { width: 100%; margin-top: 10px; }
/* =========================================================
Phone proportions: tighter sizing for the oversized parts (phones only)
========================================================= */
@media (max-width: 520px) {
.act2 .c-title, .act-head .c-title { font-size: 1.5rem; }
.h-search { height: 46px; }
.h-search-top { margin: 4px 0 12px; }
.sec-head.h-sec { margin-top: 20px; }
.sec-sub { margin-bottom: 8px; }
/* recommendation and story cards */
.fy, .stc-rail > .stc { flex-basis: 208px; width: 208px; }
.fy .stc-img, .stc-rail > .stc .stc-img { height: 124px; }
.fy .stc-body, .stc-rail > .stc .stc-body { padding: 9px 11px 4px; }
.lc { flex-basis: 144px; width: 144px; }
.lc-img { height: 86px; }
/* books in rows */
.bk { flex-basis: 122px; width: 122px; }
.bk-cover { width: 122px; }
.bk-go { height: 30px; }
/* community */
.fst-card { flex-basis: 112px; width: 112px; height: 164px; }
.fst-add { flex-basis: 72px; height: 164px; }
.sx.sx2 { padding: 14px 14px 10px; margin-bottom: 12px; }
.sx2-title { font-size: 1.02rem; margin-top: 10px; }
.sx2-text { font-size: .84rem; }
.sx2-actions .btn { height: 42px; }
.feat-img { min-height: 150px; }
}
@media (max-width: 360px) { .feat { flex-direction: column; } .feat-img { flex-basis: auto; height: 150px; } }
/* =========================================================
Lots for Your Collection: light cards, golden arrow
========================================================= */
.lotc-list { display: grid; gap: 8px; }
.lotc { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 82px; padding: 9px 10px 9px 9px; border: 1px solid #EFE4D6; border-radius: 16px; background: #FFFCF7; box-shadow: 0 4px 12px -10px rgba(60, 30, 14, .5); text-align: left; color: var(--muted); transition: transform .12s, box-shadow .15s; }
.lotc-img { flex: 0 0 64px; height: 64px; border-radius: 12px; }
.lotc-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lotc-body b { font-size: .86rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lotc-price { font-size: .88rem; font-weight: 800; color: var(--primary); }
.lotc-body small { font-size: .7rem; color: var(--muted); }
.lotc-go { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #FBE7B8, #E2A64A); color: #6B3A12; box-shadow: inset 0 0 0 1px rgba(160, 98, 30, .3); }
@media (hover: hover) { .lotc:hover { box-shadow: 0 8px 18px -12px rgba(176, 122, 54, .8); } }
.lotc:active { transform: scale(.99); }
/* =========================================================
Collectibles carousel: Loka's pick in the second slot
========================================================= */
.cg3-card.cg3-pick { box-shadow: 0 0 0 2px #E2B160, 0 18px 30px -18px rgba(176, 122, 54, .9); }
.cg3-card.cg3-pick.on { box-shadow: 0 0 0 3px #E2B160, 0 22px 36px -16px rgba(176, 122, 54, .9); }
.cg3-loka { position: absolute; z-index: 2; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px; background: linear-gradient(135deg, #FBE7B8, #E9B65A); color: #4A2410; font-size: .62rem; font-weight: 800; box-shadow: 0 2px 6px -3px rgba(60, 30, 14, .5); }
.cg3-loka img { width: 18px; height: 18px; border-radius: 50%; }
.cgi-loka { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; font-size: .72rem; font-weight: 800; color: #9A5B16; }
.cgi-loka img { width: 20px; height: 20px; border-radius: 50%; }
.cgi-loka span { font-weight: 600; font-style: italic; color: var(--ink-2); }
/* =========================================================
Experiences: image-led cards
========================================================= */
.xc2-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 4px; }
@media (min-width: 600px) { .xc2-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .xc2-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xc2 { position: relative; display: flex; flex-direction: column; border: 1px solid #EFE4D6; border-radius: 18px; background: #FFFCF7; overflow: hidden; box-shadow: 0 6px 16px -14px rgba(60, 30, 14, .6); }
.xc2-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--sand); }
.xc2-media .pic { position: absolute; inset: 0; }
.xc2-cat { position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 252, 247, .94); color: var(--primary); font-size: .66rem; font-weight: 800; letter-spacing: .03em; }
.xc2 > .heart { position: absolute; top: 8px; right: 8px; z-index: 2; }
.xc2-body { display: grid; gap: 5px; padding: 11px 13px 13px; min-width: 0; }
.xc2-title { font-size: .96rem; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xc2-loc { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--muted); }
.xc2-host { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.xc2-host-av { flex: 0 0 22px; width: 22px !important; height: 22px !important; border-radius: 50%; font-size: .5rem; }
.xc2-host small { font-size: .72rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc2-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.xc2-facts > span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: #F6EBDA; font-size: .66rem; font-weight: 600; color: var(--ink-2); }
.xc2-facts .xc2-rate { background: #FBEFD6; color: #7A4A1E; }
.xc2-facts .xc2-rate small { font-weight: 500; color: var(--muted); }
.xc2-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.xc2-foot .price { font-size: .96rem; font-weight: 800; color: var(--primary); }
.xc2-foot .price small { font-size: .66rem; font-weight: 600; color: var(--muted); }
.xc2-foot .btn { flex-shrink: 0; white-space: nowrap; }
/* =========================================================
Story strip: "Your Story" uses the same tile size as the story cards
========================================================= */
.fst { --story-w: 122px; --story-h: 178px; align-items: stretch; }
@media (max-width: 520px) { .fst { --story-w: 112px; --story-h: 164px; } }
.fst > .fst-add, .fst > .fst-card { box-sizing: border-box; flex: 0 0 var(--story-w); width: var(--story-w); min-width: var(--story-w); height: var(--story-h); }
.fst > .fst-add { gap: 10px; border: 1.5px dashed #D9B46E; border-radius: 16px; background: linear-gradient(180deg, #FFFBF2, #FBF1DE); }
.fst > .fst-add .fst-me { width: 58px; height: 58px; }
.fst > .fst-add .fst-me .av, .fst > .fst-add .fst-me img, .fst > .fst-add .fst-me > *:not(i) { width: 58px !important; height: 58px !important; box-shadow: 0 0 0 2px #FFFBF2, 0 0 0 3.5px #E8C987; }
.fst > .fst-add .fst-me i { right: -3px; bottom: -3px; width: 22px !important; height: 22px !important; }
.fst > .fst-add small { font-size: .74rem; }
/* =========================================================
Grids follow the app's own width (not the browser window):
on a wide window the app is a 440px frame, so window-based columns made cards cramped.
Each grid fits as many columns as there's room for at a sensible minimum card width.
========================================================= */
.xc2-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.bk-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.cgg { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.pgrid3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 108px), 1fr)); }
.ex-cats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
/* Experiences page */
.xp-page { padding: 0 16px 28px; }
.xp-sub { margin: -4px 0 12px; font-size: .84rem; }
.xp-search { display: flex; gap: 8px; margin-bottom: 8px; }
.xp-search .search { flex: 1; min-width: 0; }
.xp-search .filter-btn { flex: 0 0 auto; }
.xc2-list { gap: 16px; margin-top: 8px; }
.xc2 { min-width: 0; }
.xc2-body { gap: 6px; padding: 12px 14px 14px; }
.xc2-title { font-size: 1rem; }
.xc2-loc, .xc2-host small { font-size: .76rem; }
.xc2-foot { flex-wrap: wrap; row-gap: 8px; }
.xc2-foot .price { font-size: 1.02rem; }
.xc2-foot .btn { height: 40px; padding: 0 16px; }
@media (max-width: 374px) { .xc2-foot .btn { flex: 1 1 100%; } }
.xp-page .chips { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
/* =========================================================
Sign in / sign up: a compact centred card (all sizes)
========================================================= */
.auth-page .auth-scroll { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 100%; padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
.auth-card { position: relative; width: 100%; max-width: 460px; box-sizing: border-box; padding: 28px; border: 1px solid #EADCC8; border-radius: 18px; background: rgba(255, 252, 247, .97); box-shadow: 0 22px 44px -30px rgba(58, 26, 9, .55); }
.auth-card .auth-brand { margin: 0 0 18px; }
.auth-card .auth-brand p { margin-top: 6px; }
.auth-card .auth-tabs { margin: 0 0 20px; }
.auth-card form { display: grid; gap: 16px; }
.auth-card form > * { margin: 0 !important; }
.auth-card .af, .auth-card .af-box { width: 100%; box-sizing: border-box; }
.auth-card .auth-forgot { margin-top: -8px !important; text-align: right; }
.auth-card .auth-submit { width: 100%; height: 48px; margin-top: 4px !important; justify-content: center; }
.auth-card .auth-switch { text-align: center; }
.auth-scroll > .auth-demo, .auth-scroll > .auth-note { width: 100%; max-width: 460px; box-sizing: border-box; margin: 0; text-align: center; }
.auth-scroll > .auth-note { justify-content: center; }
.auth-scroll > .auth-x { position: absolute; top: 14px; right: 14px; z-index: 2; }
.auth-page > svg { opacity: .55; }
.auth-card :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) { .auth-card { padding: 20px; } .auth-page .auth-scroll { padding-left: 16px; padding-right: 16px; } }
/* =========================================================
Loka welcome (first step): a compact centred column (all sizes)
========================================================= */
.ob.wz .wz-scroll:has(> .wz-hello-in) { display: flex; flex-direction: column; justify-content: center; }
.wz-pad.wz-hello-in { width: 100%; max-width: 600px; margin-inline: auto; box-sizing: border-box; padding: 12px 24px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wz-hello-in .lw-mascot { margin: 0 0 16px; }
.wz-hello-in .lw-art { width: clamp(132px, 22vw, 176px); height: auto; object-fit: contain; }
.wz-hello-in .lw-title { margin: 0 0 12px; max-width: 520px; font-size: clamp(1.32rem, 2.4vw, 1.72rem); line-height: 1.25; overflow-wrap: anywhere; }
.wz-hello-in .lw-text { max-width: 420px; margin: 0; font-size: 1rem; line-height: 1.5; }
.wz-hello-in .lw-feats { width: 100%; max-width: 440px; margin: 22px 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.wz-hello-in .lw-text.small { max-width: 400px; font-size: .9rem; }
.ob.wz .wz-foot { padding-left: 26px; padding-right: 26px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.ob.wz .wz-next { width: 52px; height: 52px; min-width: 44px; min-height: 44px; border-radius: 50%; }
@media (max-width: 520px) { .wz-pad.wz-hello-in { padding: 8px 20px 16px; } .ob.wz .wz-foot { padding-left: 18px; padding-right: 18px; } }
@media (max-width: 340px) { .wz-hello-in .lw-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } }
/* centre the welcome column only when it fits; taller content scrolls from the top */
.ob.wz .wz-scroll:has(> .wz-hello-in) { justify-content: flex-start; }
.wz-pad.wz-hello-in { margin-block: auto; }
.auth-card .auth-submit { max-width: none; justify-self: stretch; }
/* =========================================================
Mobile refinements v2
========================================================= */
/* 1. no woven pattern in the header (the bottom border by the tab bar stays) */
body:not(.desk) .textile-top { display: none !important; }
/* 2. calm, quick transitions: short fades instead of zooms, bounces and spins */
@keyframes lcFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lcOpacity { from { opacity: 0; } to { opacity: 1; } }
.screen-enter { animation: lcFade .2s ease-out both !important; }
.launched .onb-slide.on .onb-text > * { animation: lcFade .25s ease-out both !important; }
.launched .onb-slide.on .onb-media .pic, .launched .onb-slide.on .onb-plain-art { animation: lcOpacity .3s ease-out both !important; }
.splash-art > .textile { animation: none !important; }
.tabbar .tb-btn.pop .tb-ico, .tabbar .tb-btn.pop .tb-ico .ic, .tabbar .tb-btn.pop .tb-label, .tabbar .tb-btn.pop::after { animation: none !important; }
.tabbar .tb-btn.pop .tb-ico::before { animation: lcOpacity .2s ease-out both !important; }
.lw-loka-art, .lw-loka-art.pop { animation: lcOpacity .25s ease-out both !important; }
.lk-spark, .lw-spark { animation: none !important; }
.auth-page .auth-card, .ch-in { animation: lcFade .22s ease-out both; }
@media (prefers-reduced-motion: reduce) { .screen-enter, .launched .onb-slide.on .onb-text > *, .auth-page .auth-card, .ch-in { animation: none !important; } }
/* 4. account type → log in / create account */
.ch-page .auth-scroll { justify-content: center; }
.ch-in { width: 100%; max-width: 460px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.ch-in h1 { font-size: 1.4rem; color: var(--ink); }
.ch-in .sub { max-width: 30ch; }
.ch-cards { width: 100%; display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
.ch-card { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 104px; padding: 14px 16px; border: 1.5px solid #EADCC8; border-radius: 18px; background: #FFFCF7; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ch-card img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; }
.ch-card span { flex: 1; display: grid; gap: 4px; }
.ch-card b { font-size: 1rem; color: var(--ink); }
.ch-card small { font-size: .8rem; line-height: 1.4; color: var(--muted); }
.ch-card > .ic { color: var(--muted); }
.ch-card:hover, .ch-card.on { border-color: var(--primary); background: #FBF2E4; }
.ch-card:focus-visible, .ch-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ch-chosen { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid #EADCC8; border-radius: 999px; background: #FFFCF7; font-size: .82rem; font-weight: 700; color: var(--primary); }
.ch-chosen img { width: 28px; height: 28px; object-fit: contain; }
.ch-chosen .link { margin-left: 4px; font-size: .76rem; }
.ch-opts { width: 100%; display: grid; gap: 10px; margin-top: 12px; }
.ch-opt { width: 100%; height: 50px; justify-content: center; gap: 8px; }
.ch-page > svg, .ch-page .auth-x { z-index: 2; }
@media (min-width: 420px) { .ch-cards { grid-template-columns: 1fr 1fr; } .ch-card { flex-direction: column; text-align: center; min-height: 190px; justify-content: center; } .ch-card > .ic { display: none; } }
/* 7. Explore: the six categories in three columns */
body:not(.desk) .ex-cats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
body:not(.desk) .ex-cat { min-height: 74px; padding: 10px 6px; gap: 5px; }
body:not(.desk) .ex-cat b, body:not(.desk) .ex-cat span:not([class]) { font-size: .74rem; line-height: 1.2; text-align: center; }
@media (max-width: 300px) { body:not(.desk) .ex-cats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* 8. Community: the story strip sits directly under the tabs */
body:not(.desk) .sxc .fst { margin-top: 10px; }
/* 6. less "zoomed in": tighter sizing on phones (real dimensions, no scaling) */
@media (max-width: 520px) {
body:not(.desk) .r3-hero { height: 176px; border-radius: 18px; }
body:not(.desk) .pillars { gap: 6px; margin-top: 12px; }
body:not(.desk) .pillars > * { padding: 8px 4px; min-height: 0; }
body:not(.desk) .sec-head h2 { font-size: 1.05rem; }
body:not(.desk) .sxc-hero { min-height: 0; height: 150px; }
body:not(.desk) .topbar h1 { font-size: 1.12rem; }
}
.ch-guest { justify-self: center; margin-top: 6px; }
/* =========================================================
Loka onboarding: LOCARTA cream, brown and gold (the logo animation stays plain)
========================================================= */
.ob.wz { background: var(--bg) !important; isolation: isolate; }
.ob.wz::before, .ob.wz::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.ob.wz::before { width: 320px; height: 320px; right: -140px; top: -90px; background: radial-gradient(closest-side, rgba(232, 201, 135, .35), rgba(232, 201, 135, 0)); }
.ob.wz::after { width: 360px; height: 360px; left: -170px; bottom: -150px; background: radial-gradient(closest-side, rgba(176, 122, 54, .16), rgba(176, 122, 54, 0)); }
.ob.wz .wz-scroll, .ob.wz .wz-foot { position: relative; }
/* answer choices: cream cards; the selected one gets a subtle gold highlight */
.ob.wz .wz-opt { background: #FFFCF7 !important; border-color: #EADCC8 !important; }
.ob.wz .wz-opt.on { background: #FBEFD6 !important; border-color: var(--primary) !important; box-shadow: 0 0 0 1px rgba(90, 40, 16, .15); }
.ob.wz .ob-chip { background: #FFFCF7; border-color: #EADCC8; color: var(--ink); }
.ob.wz .ob-chip[aria-pressed="true"] { background: #FBEFD6; border-color: var(--primary); color: var(--primary); }
.ob.wz .wz-dots i { background: #E6D7C2; } .ob.wz .wz-dots i.on { background: var(--accent); }
.ob.wz .lw-progress { color: var(--accent-ink); }
.ob.wz .wz-next, .ob.wz .wz-home { background: var(--primary); color: #FFF6E6; }
.ob.wz .wz-skip { color: var(--primary); }
/* Loka's picks on the completion screen */
.fest-picks { width: 100%; max-width: 440px; margin-top: 18px; text-align: left; }
.fest-picks h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 1rem; color: var(--ink); }
.fest-picks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fest-pick { display: flex; flex-direction: column; border: 1px solid #EADCC8; border-radius: 14px; background: #FFFCF7; overflow: hidden; color: var(--ink); }
.fest-pick-img { aspect-ratio: 4 / 3; }
.fest-pick span { display: grid; gap: 2px; padding: 8px 10px 10px; }
.fest-pick b { font-size: .8rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fest-pick small { font-size: .68rem; color: var(--accent-ink); line-height: 1.3; }
.fest-note { margin-top: 8px; font-size: .7rem; color: var(--muted); text-align: center; }
.lw-preview { gap: 8px; margin: 0 0 10px; }
/* First Get Started slide only: no waves or corner lines behind the footer (plain cream) */
.onb:has(.onb-slide:first-of-type.on) .onb-deco { display: none !important; }
/* the hand-off to the first slide is a plain fade (no zoom) */
#launch.out, #launch.out .launch-in, #launch.out .l-mark, #launch.out .l-text { transform: none !important; }
/* Experience and Support slides: no waves or corner lines behind the footer either (plain cream) */
.onb:has(.onb-slide:nth-of-type(2).on) .onb-deco, .onb:has(.onb-slide:nth-of-type(3).on) .onb-deco { display: none !important; }
/* account type / log in or sign up: the back button sits top-left */
.ch-page .auth-scroll > .auth-x { left: 14px; right: auto; }
/* sign-up heading (mobile) */
.auth-card .auth-h { margin: 10px 0 0; font-size: 1.3rem; color: var(--ink); }
.auth-card .auth-h + p { margin-top: 4px; }
.ch-page .ch-guest { color: var(--primary) !important; opacity: 1 !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* =========================================================
Account type and "Welcome to LOCARTA": the same woven textile band as the Loka screens, top and bottom
========================================================= */
.ch-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ch-page .auth-scroll { flex: 1 1 auto; min-height: 0 !important; overflow-y: auto; }
body:not(.desk) .ch-page > .textile-top { display: block !important; }
.ch-page > .textile { flex: 0 0 auto; pointer-events: none; }
/* =========================================================
"Welcome to LOCARTA" (Log In / Create an Account) refinements — this screen only (.ch-start)
========================================================= */
/* upper section: a small wordmark in the back button's row, under the textile header */
.ch-start .auth-scroll { position: relative; padding-top: 68px; }
.ch-start .ch-brand { position: absolute; top: 24px; left: 0; right: 0; margin-inline: auto; width: 104px; height: auto; opacity: .92; pointer-events: none; }
.ch-start .auth-scroll > .auth-x { top: 14px; }
/* one centred, compact group */
.ch-start .ch-in { gap: 0; max-width: 360px; margin-block: auto; padding-bottom: 28px; }
.ch-start .ch-chosen { margin-bottom: 16px; }
.ch-start .ch-in h1 { margin: 0; font-size: 1.45rem; line-height: 1.2; }
.ch-start .ch-in .sub { margin: 6px 0 0; }
.ch-start .ch-opts { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; margin-top: 22px; }
.ch-start .ch-opt { box-sizing: border-box; width: 88%; max-width: 320px; height: 50px; min-height: 48px; margin: 0; border-radius: 14px; justify-content: center; }
.ch-start .ch-opt.btn-ghost { background: #FFFCF7; border: 1.5px solid rgba(90, 40, 16, .28); color: var(--primary); }
.ch-start .ch-opt.btn-ghost:hover, .ch-start .ch-opt.btn-ghost:focus-visible { border-color: var(--primary); }
/* the account badge: a compact pill */
.ch-start .ch-chosen { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box; padding: 5px 6px 5px 6px; border: 1px solid #EADCC8; border-radius: 999px; background: #FFFCF7; box-shadow: 0 4px 12px -10px rgba(58, 26, 9, .5); }
.ch-start .ch-chosen img { flex: 0 0 28px; width: 28px; height: 28px; }
.ch-start .ch-chosen-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 700; color: var(--primary); }
.ch-start .ch-change { flex-shrink: 0; margin: 0 !important; padding: 5px 10px; border-radius: 999px; background: #F6EBDA; font-size: .74rem; font-weight: 700; color: var(--accent-ink); text-decoration: none; }
.ch-start .ch-change:hover, .ch-start .ch-change:focus-visible { background: #F0DFC4; }
@media (max-height: 600px) { .ch-start .auth-scroll { padding-top: 58px; } .ch-start .ch-in { padding-bottom: 12px; } }
/* =========================================================
Opening: "The Cultural Pin Reveal" (~3s, plain cream), logo kept whole
0–0.6s a golden point (centre → the pin) · 0.6–1.3s the complete symbol fades in around it, never split ·
1.5–2.3s wordmark + tagline · 2.3–2.7s one soft golden highlight · 2.75–3.0s fade to the first slide
========================================================= */
#launch.launch { background: var(--bg) !important; transition: opacity .25s ease-out, visibility .25s; }
#launch.launch::before, #launch.launch::after { display: none !important; }
#launch .l-ring, #launch .l-tag, #launch .l-bar, #launch .l-weave { display: none !important; }
#launch .l-stage, #launch .l-swing { display: contents; animation: none !important; }
#launch .launch-in { display: flex !important; flex-direction: row; align-items: center; justify-content: center; gap: 14px; animation: none !important; }
#launch .l-markw { position: relative; display: block; flex-shrink: 0; width: 74px; aspect-ratio: 177 / 192; }
#launch .l-markw > img { position: absolute; inset: 0; width: 100%; height: 100%; }
#launch .l-dot { position: absolute; left: 48.5%; top: 44%; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F6D58A, #C8892C 70%); box-shadow: 0 0 10px rgba(200, 137, 44, .45); animation: lDot 1.4s ease-out both; }
/* each band slides in at its own moment (alternating directions, like threads), then steps aside at 1.6s
once the original symbol has faded in, so the finished logo is the untouched artwork */
#launch .l-mark { opacity: 0; width: 100% !important; animation: lBase .7s .6s ease-out both, lShine .5s 2.3s ease-in-out both !important; }
#launch .l-text { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
#launch .l-word { display: block; width: 156px; height: auto; margin: 0 !important; max-width: none; opacity: 0; clip-path: inset(0 100% 0 0); animation: lWordWipe .65s 1.5s cubic-bezier(.25, .1, .25, 1) both, lShine .5s 2.4s ease-in-out both !important; }
#launch .l-tagline { display: block; width: 119px; height: auto; margin-left: 1px; opacity: 0; animation: lTagIn .35s 1.95s ease-out both !important; }
@keyframes lDot { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(1); } 85% { opacity: 1; transform: scale(.7); } 100% { opacity: 0; transform: scale(.5); } }
@keyframes lBase { from { opacity: 0; } to { opacity: 1; } }
@keyframes lWordWipe { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 20% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes lTagIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes lShine { 0%, 100% { filter: none; } 50% { filter: brightness(1.12) drop-shadow(0 0 6px rgba(232, 190, 110, .55)); } }
@media (prefers-reduced-motion: reduce) {
#launch .l-mark, #launch .l-word, #launch .l-tagline { animation: none !important; opacity: 1 !important; clip-path: none !important; transform: none !important; filter: none !important; }
}
#launch.out { opacity: 0 !important; visibility: hidden; }
#launch.out, #launch.out .launch-in, #launch.out .l-markw, #launch.out .l-text { transform: none !important; }
/* the golden point appears at the centre of the screen, then glides to the logo's pin as the symbol forms
(lockup = 74px symbol + 14px gap + 156px wordmark = 244px; the pin sits at 48.5% / 44% of the symbol) */
#launch .l-dot { --to-centre-x: calc(122px - 74px * .485); --to-centre-y: calc((74px * 192 / 177) * .5 - (74px * 192 / 177) * .44); animation-name: lDotGlide !important; }
@keyframes lDotGlide {
0% { opacity: 0; transform: translate(var(--to-centre-x), var(--to-centre-y)) scale(.2); }
22% { opacity: 1; transform: translate(var(--to-centre-x), var(--to-centre-y)) scale(1); }
45% { opacity: 1; transform: translate(0, 0) scale(1); }
70% { opacity: 1; transform: scale(.9); }
100% { opacity: 0; transform: scale(.5); }
}
@media (prefers-reduced-motion: reduce) { #launch .l-dot { display: none !important; animation: none !important; } }
/* Activity type chips */
.act-types { margin: 4px 0 12px; }
/* receipt */
.rc-open { display: flex; justify-content: center; padding: 6px 18px 24px; }
.rc { display: grid; gap: 2px; }
.rc-h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px dashed #E3D3BC; }
.rc-h > div { flex: 1; display: grid; } .rc-h b { font-size: 1rem; color: var(--ink); } .rc-h small { font-size: .74rem; color: var(--muted); letter-spacing: .04em; }
.rc-stage { margin: 2px 0 8px; font-size: .82rem; font-weight: 700; color: var(--accent-ink); }
.rc-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .84rem; color: var(--ink-2); }
.rc-row b { color: var(--ink); text-align: right; }
.rc-lines { margin: 6px 0; padding: 6px 0; border-top: 1px solid #EFE4D6; border-bottom: 1px solid #EFE4D6; }
.rc-total { margin-top: 4px; padding-top: 8px; border-top: 1px dashed #E3D3BC; font-size: .95rem; } .rc-total b { color: var(--primary); }
/* direct authentication form (mobile): role indicator, consent */
.auth-card .auth-role { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 0; font-size: .78rem; color: var(--ink-2); }
.auth-card .auth-role img { width: 24px; height: 24px; object-fit: contain; }
.auth-card .auth-role span { font-weight: 700; color: var(--primary); }
.auth-card .auth-role .link { font-size: .74rem; color: var(--accent-ink); }
.auth-card .auth-consent { display: flex; align-items: flex-start; gap: 10px; font-size: .78rem; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.auth-card .auth-consent input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--primary); }
.auth-card .auth-consent .link { font-size: inherit; }
body:not(.desk) .auth-card .auth-submit { width: 88%; max-width: 320px; justify-self: center; }
.auth-card .auth-submit[aria-busy="true"] { opacity: .7; pointer-events: none; }
/* the sign-in / sign-up page keeps the woven textile header and footer (mobile), with the form between them */
body:not(.desk) .auth-page:not(.ch-page) { display: flex; flex-direction: column; height: 100%; min-height: 0; }
body:not(.desk) .auth-page:not(.ch-page) > .textile-top { display: block !important; flex: 0 0 auto; pointer-events: none; }
body:not(.desk) .auth-page:not(.ch-page) > .textile-bottom { flex: 0 0 auto; pointer-events: none; }
body:not(.desk) .auth-page:not(.ch-page) > .auth-scroll { flex: 1 1 auto; min-height: 0 !important; overflow-y: auto; }
/* =========================================================
Compact sign-up form (mobile, sign-up only; detected by its confirm-password field)
========================================================= */
body:not(.desk) .auth-page:not(.ch-page):has([name="confirm"]) > .auth-scroll { padding-top: 12px; padding-bottom: 12px; gap: 10px; justify-content: safe center; }
body:not(.desk) .auth-card:has([name="confirm"]) { padding: 18px 20px 14px; }
/* header */
.auth-card:has([name="confirm"]) .auth-brand { margin: 0 0 10px; }
.auth-card:has([name="confirm"]) .auth-mark { width: 30px; height: auto; }
.auth-card:has([name="confirm"]) .auth-word { width: 112px; height: auto; margin-top: 2px; }
.auth-card:has([name="confirm"]) .auth-h { margin: 6px 0 0; font-size: 1.18rem; }
.auth-card:has([name="confirm"]) .auth-h + p { margin-top: 2px; font-size: .8rem; line-height: 1.35; }
.auth-card:has([name="confirm"]) .auth-role { margin-top: 6px; gap: 4px 6px; font-size: .74rem; }
.auth-card:has([name="confirm"]) .auth-role img { width: 20px; height: 20px; }
.auth-card:has([name="confirm"]) .auth-role .link { font-size: .7rem; font-weight: 600; }
.auth-card:has([name="confirm"]) .auth-role .link::before { content: "· "; color: var(--muted); text-decoration: none; display: inline-block; margin-right: 2px; }
/* tabs */
.auth-card:has([name="confirm"]) .auth-tabs { margin: 0 0 12px !important; }
.auth-card:has([name="confirm"]) .auth-tabs [role="tab"] { padding-top: 8px; padding-bottom: 8px; min-height: 40px; }
/* fields */
.auth-card:has([name="confirm"]) form { gap: 10px; }
.auth-card:has([name="confirm"]) .af { gap: 4px; }
.auth-card:has([name="confirm"]) .af-label { margin: 0 0 4px; font-size: .78rem; line-height: 1.2; }
.auth-card:has([name="confirm"]) .af-box { min-height: 42px; height: 42px; }
.auth-card:has([name="confirm"]) .af-box input { height: 40px; min-height: 0; font-size: .9rem; }
.auth-card:has([name="confirm"]) .af-box .pw-eye { width: 40px; height: 40px; }
/* agreement */
.auth-card:has([name="confirm"]) .auth-consent { align-items: flex-start; gap: 8px; margin: 2px 0 0 !important; font-size: .74rem; line-height: 1.4; }
.auth-card:has([name="confirm"]) .auth-consent input { width: 18px; height: 18px; margin-top: 0; }
/* button + bottom link */
body:not(.desk) .auth-card:has([name="confirm"]) .auth-submit { height: 44px; min-height: 44px; width: 82%; max-width: 300px; margin-top: 4px !important; }
.auth-card:has([name="confirm"]) .auth-switch { margin-top: -2px !important; font-size: .8rem; }
/* the prototype notice under the card, smaller */
body:not(.desk) .auth-page:has([name="confirm"]) .auth-scroll > .auth-note { padding: 6px 10px; font-size: .68rem; line-height: 1.35; }
/* sign-up: the logo as its horizontal lockup (symbol beside the wordmark), a little less padding */
.auth-card:has([name="confirm"]) .auth-brand { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 8px; row-gap: 0; }
.auth-card:has([name="confirm"]) .auth-brand > *:not(.auth-mark):not(.auth-word) { grid-column: 1 / -1; }
.auth-card:has([name="confirm"]) .auth-mark { width: 26px; }
.auth-card:has([name="confirm"]) .auth-word { width: 104px; margin: 0; }
body:not(.desk) .auth-card:has([name="confirm"]) { padding: 14px 18px 12px; }
.auth-card:has([name="confirm"]) .auth-label, .auth-card:has([name="confirm"]) .af-label { margin-bottom: 3px; }
.auth-card:has([name="confirm"]) .auth-tabs { margin-bottom: 10px !important; }
.auth-card:has([name="confirm"]) form { gap: 9px; }
.auth-card:has([name="confirm"]) .auth-brand > .auth-mark, .auth-card:has([name="confirm"]) .auth-brand > .auth-word { margin: 0 !important; justify-self: auto; }
.auth-card:has([name="confirm"]) .auth-brand > .auth-mark { justify-self: end; } .auth-card:has([name="confirm"]) .auth-brand > .auth-word { justify-self: start; }
/* =========================================================
Loka onboarding: a cleaner, minimal layout (all four pages kept; LOCARTA colours)
========================================================= */
/* footer: one clear Continue / Finish button, Skip as a small link beneath */
.ob.wz .wz-foot.lw-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 20px calc(12px + env(safe-area-inset-bottom, 0px)); }
.ob.wz .lw-cta.wz-next { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 88% !important; max-width: 340px; height: 50px !important; min-height: 48px; border-radius: 999px !important; background: var(--primary) !important; color: #FFF6E6 !important; font-size: .95rem; font-weight: 700; box-shadow: 0 10px 20px -14px rgba(58, 26, 9, .8); }
.ob.wz .lw-cta.wz-next:active { transform: scale(.98); background: #3A1A09 !important; }
.ob.wz .lw-cta.wz-next:disabled { opacity: .5; }
.ob.wz .lw-foot .wz-skip { font-size: .82rem; font-weight: 600; color: var(--muted); text-decoration: none; }
/* question header: centred and compact (Loka, question, hint, Loka's reaction) */
.ob.wz .lw-progress { margin: 0 0 6px; text-align: center; }
.ob.wz .lw-talk { flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; text-align: center; }
.ob.wz .lw-loka { flex: 0 0 auto; }
.ob.wz .lw-loka-art { width: 52px !important; }
.ob.wz .lw-bubble { padding: 0; border: 0; background: none; border-radius: 0; justify-items: center; gap: 4px; }
.ob.wz .lw-bubble b { max-width: 26ch; font-size: 1.18rem; line-height: 1.25; }
.ob.wz .lw-bubble small { font-size: .8rem; }
.ob.wz .lw-react { margin-top: 2px; padding-top: 0; border-top: 0; max-width: 34ch; font-size: .78rem; color: var(--accent-ink); }
/* question 1: a two-column grid of icon tiles */
.ob.wz .wz-list.lw-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ob.wz .lw-tiles .wz-opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 12px 10px; border-radius: 16px !important; text-align: center; }
.ob.wz .lw-tiles .wz-opt > :last-child:not(:first-child) { position: absolute; top: 8px; right: 8px; }
.ob.wz .lw-tiles .wz-opt b, .ob.wz .lw-tiles .wz-opt span { font-size: .78rem; line-height: 1.3; }
.ob.wz .lw-tiles .wz-opt.on { background: var(--primary) !important; border-color: var(--primary) !important; color: #FFF6E6; box-shadow: 0 10px 18px -14px rgba(58, 26, 9, .8); }
.ob.wz .lw-tiles .wz-opt.on * { color: #FFF6E6 !important; }
.ob.wz .lw-tiles .wz-opt.on .ob-ic, .ob.wz .lw-tiles .wz-opt.on [class*="ico"] { background: rgba(255, 246, 230, .16) !important; }
/* question 2: rounded tiles, the same selected style */
.ob.wz .ob-chip { min-height: 40px; padding: 8px 14px; border-radius: 12px !important; font-size: .82rem; }
.ob.wz .ob-chip[aria-pressed="true"] { background: var(--primary) !important; border-color: var(--primary) !important; color: #FFF6E6 !important; }
.ob.wz .lw-group h2, .ob.wz .wz-pad h2 { font-size: .86rem; }
/* completion screen: the same button style */
.ob.wz .wz-home { box-sizing: border-box; width: 88%; max-width: 340px; height: 50px; border-radius: 999px; justify-content: center; }
/* =========================================================
Log In / Sign Up (mobile): a two-tone card — deep-brown header panel, cream form
========================================================= */
body:not(.desk) .auth-page .auth-card { padding: 0 !important; overflow: hidden; border-radius: 20px; }
body:not(.desk) .auth-page .auth-card .auth-brand { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 10px; row-gap: 0; margin: 0 !important; padding: 18px 20px 16px; text-align: center; color: #FFF6E6; background: radial-gradient(120% 140% at 85% 0%, rgba(200, 137, 44, .35), rgba(200, 137, 44, 0) 55%), linear-gradient(155deg, #5A2810, #3A1A09); }
body:not(.desk) .auth-page .auth-card .auth-brand > *:not(.auth-mark):not(.auth-word) { grid-column: 1 / -1; }
body:not(.desk) .auth-page .auth-card .auth-mark { box-sizing: border-box; width: 40px !important; height: 40px !important; padding: 6px; margin: 0 !important; border-radius: 50%; background: #FFF6E6; object-fit: contain; justify-self: end; box-shadow: 0 0 0 3px rgba(232, 201, 135, .35); }
body:not(.desk) .auth-page .auth-card .auth-word { width: 112px !important; height: auto; margin: 0 !important; justify-self: start; }
body:not(.desk) .auth-page .auth-card .auth-h { margin: 10px 0 0 !important; font-size: 1.22rem; color: #FFF6E6; }
body:not(.desk) .auth-page .auth-card .auth-h + p { margin: 3px 0 0 !important; font-size: .8rem; line-height: 1.4; color: rgba(255, 243, 222, .82); }
body:not(.desk) .auth-page .auth-card .auth-role { justify-self: center; margin: 10px 0 0 !important; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(255, 246, 230, .12); border: 1px solid rgba(232, 201, 135, .28); }
body:not(.desk) .auth-page .auth-card .auth-role img { width: 22px; height: 22px; padding: 2px; box-sizing: border-box; border-radius: 50%; background: #FFF6E6; }
body:not(.desk) .auth-page .auth-card .auth-role span { color: #F6E1B4; }
body:not(.desk) .auth-page .auth-card .auth-role .link { color: #E8C987; font-weight: 600; }
body:not(.desk) .auth-page .auth-card .auth-role .link::before { color: rgba(255, 243, 222, .5); }
/* tabs + form in the cream area */
body:not(.desk) .auth-page .auth-card .auth-tabs { margin: 12px 20px 12px !important; }
body:not(.desk) .auth-page .auth-card form { padding: 0 20px 16px; }
body:not(.desk) .auth-page .auth-card .af-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 137, 44, .18); }
body:not(.desk) .auth-page .auth-card .auth-submit { box-shadow: 0 10px 20px -14px rgba(58, 26, 9, .8); }
/* question tiles: fixed-size icon and selection mark */
.ob.wz .lw-tiles .wz-opt .wz-ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px !important; height: 38px !important; border-radius: 12px; background: #F6EBDA; color: var(--primary); }
.ob.wz .lw-tiles .wz-opt .grow { flex: 0 0 auto; display: block; }
.ob.wz .lw-tiles .wz-opt .wz-check { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; flex: none; width: 20px !important; height: 20px !important; border-radius: 50%; border: 1.5px solid #E0CDB2; background: transparent; }
.ob.wz .lw-tiles .wz-opt.on .wz-ic { background: rgba(255, 246, 230, .16); color: #FFF6E6; }
.ob.wz .lw-tiles .wz-opt.on .wz-check { border-color: #F6E1B4; background: #F6E1B4; color: var(--primary) !important; }
.ob.wz .lw-tiles .wz-opt.on .wz-check * { color: var(--primary) !important; }
/* =========================================================
Log In / Sign Up (mobile) — the LOCARTA reference: no card, Loka medallion, form on the cream page
(overrides the earlier card / brown-panel / compact rules for this page)
========================================================= */
body:not(.desk) .auth-page:not(.ch-page) { background: var(--bg) !important; }
body:not(.desk) .auth-page:not(.ch-page) > svg { display: none; }
body:not(.desk) .auth-page:not(.ch-page) > .auth-scroll { padding: 14px 22px 14px !important; gap: 0 !important; justify-content: safe center; }
body:not(.desk) .auth-page .auth-card, body:not(.desk) .auth-page .auth-card:has([name="confirm"]) { max-width: 380px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible; }
/* header */
body:not(.desk) .auth-page .auth-card .auth-brand { display: flex !important; flex-direction: column; align-items: center; gap: 0; margin: 0 0 10px !important; padding: 0 !important; background: none !important; color: inherit; text-align: center; }
body:not(.desk) .auth-page .auth-card .auth-mark { width: 30px !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
body:not(.desk) .auth-page .auth-card .auth-word { width: 104px !important; margin-top: 3px !important; }
.auth-hero { display: grid; place-items: center; width: 116px; height: 116px; margin: 10px 0 0; border-radius: 50%; overflow: hidden;
background: radial-gradient(circle at 50% 38%, #FFF8EA 0%, #F6E6C6 58%, #EBD3A6 100%); box-shadow: inset 0 0 0 1px rgba(200, 137, 44, .25), 0 10px 22px -16px rgba(90, 40, 16, .6); }
.auth-hero img { width: 78%; height: 78%; object-fit: contain; margin-top: 8%; }
.auth-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: -10px; padding: 3px 12px 3px 4px; border: 1px solid #EADCC8; border-radius: 999px; background: #FFFCF7; box-shadow: 0 4px 10px -8px rgba(58, 26, 9, .5); font-size: .74rem; font-weight: 700; color: var(--ink); position: relative; }
.auth-pill img { width: 22px; height: 22px; object-fit: contain; }
.auth-change { margin-top: 4px; font-size: .74rem !important; font-weight: 600; color: var(--accent-ink) !important; text-decoration: none !important; }
body:not(.desk) .auth-page .auth-card .auth-h { margin: 12px 0 0 !important; font-size: 1.45rem; color: var(--ink); }
body:not(.desk) .auth-page .auth-card .auth-sub { margin: 4px 0 0 !important; max-width: 32ch; font-size: .82rem !important; line-height: 1.4; color: var(--ink-2) !important; }
/* tabs */
body:not(.desk) .auth-page .auth-card .auth-tabs { margin: 8px 0 12px !important; background: none; border: 0; border-bottom: 1px solid #E6D7C2; border-radius: 0; padding: 0; }
body:not(.desk) .auth-page .auth-card .auth-tabs [role="tab"] { min-height: 40px; background: none !important; box-shadow: none !important; border-radius: 0; color: var(--muted); font-weight: 600; }
body:not(.desk) .auth-page .auth-card .auth-tabs [role="tab"][aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--primary) !important; }
/* fields: cream-filled rounded boxes */
body:not(.desk) .auth-page .auth-card form { padding: 0 !important; gap: 10px; }
body:not(.desk) .auth-page .auth-card .af-label { font-size: .8rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
body:not(.desk) .auth-page .auth-card .af-box { height: 44px; min-height: 44px; border: 1px solid #E8DAC5; border-radius: 12px; background: #FBF4E8; box-shadow: none; }
body:not(.desk) .auth-page .auth-card .af-box:focus-within { border-color: var(--accent); background: #FFFCF7; box-shadow: 0 0 0 3px rgba(200, 137, 44, .16); }
body:not(.desk) .auth-page .auth-card .af-box input { height: 42px; background: transparent; }
body:not(.desk) .auth-page .auth-card .auth-forgot { margin-top: -4px !important; }
/* button + bottom link */
body:not(.desk) .auth-page .auth-card .auth-submit { width: 78%; max-width: 280px; height: 46px; min-height: 46px; margin-top: 8px !important; border-radius: 999px; box-shadow: 0 10px 20px -14px rgba(58, 26, 9, .85); }
body:not(.desk) .auth-page .auth-card .auth-switch { margin-top: 2px !important; font-size: .8rem; }
body:not(.desk) .auth-page .auth-card .auth-consent { font-size: .76rem; }
/* demo links and the prototype notice stay below, small */
body:not(.desk) .auth-page:not(.ch-page) .auth-scroll > .auth-demo { margin-top: 10px; font-size: .74rem; }
body:not(.desk) .auth-page:not(.ch-page) .auth-scroll > .auth-note { margin-top: 8px; padding: 6px 10px; font-size: .68rem; }
body:not(.desk) .auth-page:not(.ch-page) .auth-scroll > .auth-x { top: 10px; right: 14px; }
/* sign-up: a slightly smaller medallion so the form fits */
.auth-card:has([name="confirm"]) .auth-hero { width: 96px; height: 96px; margin-top: 6px; }
.auth-card:has([name="confirm"]) .auth-h { font-size: 1.3rem !important; margin-top: 8px !important; }
/* sign-up: a bit tighter so "Already have an account? Log in" clears the footer on standard phones */
.auth-card:has([name="confirm"]) .auth-hero { width: 84px; height: 84px; margin-top: 4px; }
.auth-card:has([name="confirm"]) .auth-pill { margin-top: -8px; }
.auth-card:has([name="confirm"]) .auth-change { margin-top: 2px; }
.auth-card:has([name="confirm"]) .auth-h { margin-top: 6px !important; }
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-tabs { margin: 6px 0 10px !important; }
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) form { gap: 8px; }
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .af-box { height: 42px; min-height: 42px; }
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-submit { margin-top: 4px !important; height: 44px; min-height: 44px; }
/* addresses, meetup */
.addr-form .addr-labels { margin: 0 0 6px; }
.addr-form .addr-labels .chip { position: relative; cursor: pointer; }
.addr-form .addr-labels input { position: absolute; opacity: 0; pointer-events: none; }
.addr-form .addr-labels .chip:has(input:checked) { background: var(--primary); color: #FFF6E6; border-color: var(--primary); }
.addr-form select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #FFFCF7; font: inherit; color: var(--ink); }
.addr-form .addr-filter { height: 36px; margin-bottom: 6px; }
.addr-src { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 4px; font-size: .74rem; line-height: 1.4; color: var(--muted); }
.addr-list { display: grid; gap: 8px; margin-bottom: 8px; }
.addr-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #FFFCF7; cursor: pointer; }
.addr-card.on { border-color: var(--primary); background: #FBF2E4; }
.addr-card input { margin-top: 3px; accent-color: var(--primary); }
.addr-card .grow { flex: 1; display: grid; gap: 2px; min-width: 0; }
.addr-card b { font-size: .86rem; color: var(--ink); } .addr-card small { font-size: .74rem; color: var(--ink-2); overflow-wrap: anywhere; }
.addr-acts { display: grid; gap: 4px; justify-items: end; } .addr-acts .link { font-size: .72rem; }
.meet-spot span { display: grid; } .meet-spot small { font-size: .72rem; color: var(--muted); }
/* =========================================================
Checkout v2
========================================================= */
.co-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; }
.co-steps li { flex: 1 1 0; display: grid; justify-items: center; gap: 3px; min-width: 0; position: relative; text-align: center; }
.co-steps li:not(:last-child)::after { content: ""; position: absolute; top: 10px; left: calc(50% + 12px); right: calc(-50% + 12px); height: 2px; background: #EADCC8; }
.co-steps li.done:not(:last-child)::after { background: var(--accent); }
.co-steps i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #E0CDB2; background: #FFFCF7; font-style: normal; font-size: .66rem; font-weight: 800; color: var(--muted); }
.co-steps li.done i { border-color: var(--accent); background: var(--accent); color: #fff; } .co-steps li.now i { border-color: var(--primary); color: var(--primary); }
.co-steps span { font-size: .6rem; color: var(--muted); } .co-steps li.now span, .co-steps li.done span { color: var(--ink); font-weight: 700; }
.co2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.co2-side { order: -1; }
.co-h { margin: 2px 0 10px; font-size: 1rem; color: var(--ink); }
.co-sum { border: 1px solid var(--line); border-radius: 14px; background: #FFFCF7; padding: 0 12px; }
.co-sum summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; cursor: pointer; list-style: none; font-size: .84rem; }
.co-sum summary span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.co-sum[open] summary { border-bottom: 1px dashed #E3D3BC; margin-bottom: 6px; }
.co-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: .8rem; color: var(--ink-2); }
.co-total { margin: 4px 0 8px; padding-top: 8px; border-top: 1px dashed #E3D3BC; font-size: .92rem; font-weight: 800; color: var(--primary); }
.co-sg small { display: block; margin-top: 4px; font-size: .7rem; font-weight: 700; color: var(--accent-ink); }
.co-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.co-thumb { flex: 0 0 48px; height: 48px; border-radius: 10px; }
.co-item .grow { display: grid; min-width: 0; } .co-item .grow b { font-size: .86rem; } .co-item .grow small { font-size: .74rem; color: var(--muted); }
.co-methods { display: grid; gap: 8px; }
.co-mcard { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1.5px solid var(--line); border-radius: 14px; background: #FFFCF7; cursor: pointer; }
.co-mcard.on { border-color: var(--primary); background: #FBF2E4; }
.co-mcard.off { opacity: .55; cursor: not-allowed; }
.co-mcard span { display: grid; gap: 2px; } .co-mcard b { font-size: .9rem; } .co-mcard small { font-size: .74rem; color: var(--muted); }
.co-mcard input { margin-top: 3px; accent-color: var(--primary); }
.co-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 360px) { .co-2 { grid-template-columns: 1fr; } }
.co-ship, .co-info { display: grid; gap: 2px; margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; background: #F6EBDA; font-size: .78rem; color: var(--ink-2); }
.co-ship { display: flex; gap: 6px; align-items: flex-start; } .co-info small { font-size: .74rem; color: var(--ink-2); }
.co-review { display: grid; gap: 8px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #FFFCF7; }
.co-review > div { display: grid; gap: 1px; } .co-review small { font-size: .7rem; color: var(--muted); } .co-review b { font-size: .84rem; color: var(--ink); overflow-wrap: anywhere; }
.co-secure { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; font-size: .74rem; color: var(--ink-2); }
.co-nav { display: flex; gap: 10px; margin-top: 12px; } .co-nav .btn { flex: 1; justify-content: center; } .co-nav .co-next { flex: 2; }
.co-done { display: grid; justify-items: center; gap: 6px; text-align: center; }
.co-done-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #E6F1E8; color: #2F7D4F; }
.co-done .co-review { width: 100%; text-align: left; } .co-nextstep { display: flex; gap: 6px; font-size: .8rem; color: var(--ink-2); text-align: left; }
.co-done .co-nav { width: 100%; }
/* desktop: form beside a persistent summary */
body.desk .sheet:has(.co2) { max-width: 920px !important; }
@media (min-width: 900px) { body.desk .co2-grid { grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); align-items: start; } body.desk .co2-side { order: 0; position: sticky; top: 0; } }
/* international form: paired fields stack on phones and never overflow */
.co-2 > .field, .co-2 input { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 460px) { .co-2 { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* Loka beside the assessment questions */
.as-loka { display: flex; align-items: flex-end; gap: 10px; margin: 10px 0 12px; }
.as-loka-art { flex: 0 0 auto; width: 52px !important; height: auto; }
.as-loka-msg { flex: 1; position: relative; margin: 0; padding: 9px 12px; border: 1px solid #EBD9B8; border-radius: 14px 14px 14px 4px; background: #FFF8EA; font-size: .82rem; line-height: 1.45; color: var(--ink-2); }
.as-loka-msg b { display: block; margin-bottom: 1px; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) { .as-loka-msg { animation: asMsg .25s ease-out both; } }
@keyframes asMsg { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* =========================================================
Creator Progress — "Your Creative Journey"
========================================================= */
.jr-head h1 { margin: 2px 0 4px; font-size: 1.3rem; color: var(--ink); }
.jr-head p { margin: 0 0 14px; font-size: .84rem; line-height: 1.5; color: var(--ink-2); }
.jr-over { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #FFFCF7; }
.jr-ring { --p: 0; flex: 0 0 86px; height: 86px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, #FFFCF7 78%, transparent 79% 100%), conic-gradient(var(--accent) calc(var(--p) * 1%), #EFE3D1 0); }
.jr-ring b { font-size: 1.2rem; color: var(--primary); line-height: 1; } .jr-ring small { font-size: .66rem; color: var(--muted); }
.jr-facts { flex: 1; display: grid; gap: 8px; }
.jr-facts div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid #F0E6D8; }
.jr-facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.jr-facts b { font-size: .88rem; color: var(--ink); order: 2; } .jr-facts small { font-size: .76rem; color: var(--ink-2); }
.jr-empty { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 14px; border-radius: 16px; background: #FBF2E4; }
.jr-empty-art { flex: 0 0 56px; width: 56px !important; } .jr-empty b { color: var(--ink); } .jr-empty p { margin: 4px 0 10px; font-size: .8rem; color: var(--ink-2); }
.jr-h { margin-top: 20px; } .jr-h h2 { font-size: 1rem; }
.jr-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jr-skills li { padding: 10px 0 12px; border-bottom: 1px solid #F0E6D8; }
.jr-sk-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.jr-sk-top b { font-size: .88rem; color: var(--ink); } .jr-sk-v { font-size: .82rem; font-weight: 800; color: var(--primary); white-space: nowrap; }
.jr-bar { height: 8px; } .jr-bar span { background: linear-gradient(90deg, #C8892C, #A9701F); transition: width .5s ease-out; }
.jr-bar-empty { background: #F1E7D9; }
.jr-sk-txt { margin: 6px 0 2px; font-size: .78rem; line-height: 1.45; color: var(--ink-2); }
.jr-sk-go { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; min-height: 32px; }
.jr-soon { margin: 8px 0 0; font-size: .74rem; color: var(--muted); }
.jr-two { display: grid; gap: 12px; margin-top: 18px; }
.jr-col { padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #FFFCF7; }
.jr-col h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .92rem; color: var(--ink); }
.jr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jr-col li { display: grid; gap: 2px; } .jr-col b { font-size: .82rem; color: var(--ink); } .jr-col small { font-size: .76rem; line-height: 1.4; color: var(--ink-2); }
.jr-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 8px; }
.jr-steps li { counter-increment: s; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #FFFCF7; }
.jr-steps li::before { content: counter(s); flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #F6EBDA; font-size: .74rem; font-weight: 800; color: var(--primary); }
.jr-steps .grow { display: grid; gap: 2px; min-width: 0; } .jr-steps b { font-size: .84rem; } .jr-steps small { font-size: .74rem; color: var(--ink-2); }
.jr-steps .btn { flex-shrink: 0; }
.jr-alldone { display: flex; gap: 6px; align-items: center; margin-top: 16px; font-size: .82rem; color: var(--ink-2); }
.jr-loka { display: flex; align-items: flex-end; gap: 10px; margin-top: 18px; }
.jr-loka-art { flex: 0 0 44px; width: 44px !important; }
.jr-loka p { margin: 0; padding: 8px 12px; border: 1px solid #EBD9B8; border-radius: 14px 14px 14px 4px; background: #FFF8EA; font-size: .8rem; line-height: 1.45; color: var(--ink-2); }
.jr-loka b { display: block; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.jr-hist { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; }
.jr-hist li { position: relative; display: flex; gap: 12px; padding: 0 0 12px; }
.jr-hist li:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: #EADCC8; }
.jr-dot { flex: 0 0 12px; height: 12px; margin-top: 3px; border-radius: 50%; border: 2px solid #D8C3A2; background: #FFFCF7; } .jr-dot.ok { border-color: var(--accent); background: var(--accent); }
.jr-hist .grow { display: grid; } .jr-hist b { font-size: .82rem; color: var(--ink); } .jr-hist small { font-size: .74rem; color: var(--muted); }
.jr-empty-h { font-size: .8rem; color: var(--muted); }
@media (min-width: 700px) { .jr-two { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .jr-bar span { transition: none; } }
/* =========================================================
Creator Progress v2 — compact, mobile-first
========================================================= */
.jr2 { padding-left: 16px !important; padding-right: 16px !important; padding-bottom: 104px !important; }
.jr2 .jr-head h1 { margin: 0 0 2px; font-size: 1.22rem; }
.jr2 .jr-head p { margin: 0 0 12px; font-size: .82rem; }
/* overview: ring + two figures, centred columns (no right-aligned values under the Loka tab) */
.jr2-over { display: grid; grid-template-columns: auto 1fr 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #FFFCF7; }
.jr2-over .jr-ring { grid-row: 1 / 3; flex: none; width: 74px; height: 74px; }
.jr2-over .jr-ring b { font-size: 1.05rem; }
.jr2-m { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 4px 0; }
.jr2-m + .jr2-m { border-left: 1px solid #F0E6D8; }
.jr2-m b { font-size: 1.15rem; color: var(--ink); line-height: 1.1; } .jr2-m b span { margin-left: 3px; font-size: .74rem; font-weight: 600; color: var(--muted); }
.jr2-m small { font-size: .7rem; line-height: 1.25; color: var(--ink-2); }
.jr2-m-ring { grid-column: 1; grid-row: 3; padding: 4px 0 0; } .jr2-m-ring small { font-weight: 700; color: var(--accent-ink); }
.jr2-over > .jr2-m:nth-of-type(2) { grid-column: 2; grid-row: 1 / 3; } .jr2-over > .jr2-m:nth-of-type(3) { grid-column: 3; grid-row: 1 / 3; }
.jr2-last { display: flex; align-items: center; gap: 5px; margin: 8px 2px 0; font-size: .74rem; color: var(--muted); }
/* continue your growth: one step, visually secondary */
.jr2-next { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: #FBF2E4; box-shadow: inset 3px 0 0 var(--accent); }
.jr2-next .grow { display: grid; gap: 1px; min-width: 0; }
.jr2-next small { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.jr2-next b { font-size: .88rem; color: var(--ink); } .jr2-next span { font-size: .74rem; line-height: 1.35; color: var(--ink-2); }
.jr2-next .btn { flex-shrink: 0; min-height: 40px; }
/* skills list */
.jr2-skh { margin: 18px 0 6px; } .jr2-skh h2 { margin: 0; font-size: 1rem; }
.jr2-filter { margin: 0 0 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.jr2-filter .chip { flex: 0 0 auto; min-height: 34px; } .jr2-filter .chip span { margin-left: 3px; font-size: .7rem; color: var(--muted); }
.jr2-filter .chip[aria-pressed="true"] span { color: inherit; opacity: .8; }
.jr2-list { list-style: none; margin: 0; padding: 0; }
.jr2-row { padding: 10px 0; border-bottom: 1px solid #F0E6D8; }
.jr2-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body:not(.desk) .jr2-top { padding-right: 16px; } /* keeps scores clear of the tucked Loka tab at the right edge */
.jr2-top b { font-size: .86rem; line-height: 1.3; color: var(--ink); }
.jr2-st { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.jr2-st em { font-style: normal; font-size: .86rem; font-weight: 800; color: var(--primary); }
.jr2-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: .66rem; font-weight: 700; white-space: nowrap; }
.jr2-row.passed .jr2-tag { background: #E9F3EC; color: #2F6B45; } .jr2-row.grow .jr2-tag { background: #FBF0DC; color: #8A5A14; } .jr2-row.todo .jr2-tag { background: #F2ECE4; color: var(--muted); }
.jr2-bar { height: 5px; margin: 7px 0 0; } .jr2-bar span { background: linear-gradient(90deg, #C8892C, #A9701F); transition: width .45s ease-out; }
.jr2-row.todo .jr2-bar { background: #F1E7D9; }
.jr2-txt { margin: 5px 0 0; font-size: .74rem; color: var(--ink-2); }
.jr2-acts { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.jr2-acts .link { display: inline-flex; align-items: center; gap: 3px; min-height: 34px; font-size: .78rem; font-weight: 700; }
.jr2-acts small { font-size: .72rem; color: var(--muted); }
.jr2-loka { margin-top: 14px; } .jr2-loka p { font-size: .78rem; }
@media (prefers-reduced-motion: reduce) { .jr2-bar span { transition: none; } }
.jr2-filter { flex-wrap: wrap !important; overflow: visible !important; gap: 6px; }
.jr2-m b span { margin-left: 0; }
/* overview: three equal columns — profile completion ring, assessments, badges */
.jr2-over { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; align-items: center; column-gap: 0; padding: 12px 8px; }
.jr2-over > .jr2-m { grid-column: auto !important; grid-row: auto !important; padding: 2px 6px; }
.jr2-pc { gap: 4px !important; } .jr2-pc .jr-ring { width: 64px; height: 64px; flex: none; } .jr2-pc .jr-ring b { font-size: .95rem; }
.jr2-pc small { font-weight: 700; color: var(--accent-ink) !important; }
.jr2-filter { padding: 0 !important; margin-left: 0 !important; justify-content: flex-start; }
/* =========================================================
Creator Progress v3 — cards, icons, slim bars, minimal text
========================================================= */
.jr3-ic { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; background: #F6EBDA; color: var(--primary); }
.jr3-ic-gold { background: #F3DDB1; color: #7A4A12; }
.jr2-over { box-shadow: 0 6px 16px -14px rgba(58, 26, 9, .5); }
.jr2-over .jr2-m { gap: 3px !important; }
.jr2-over .jr2-m .jr3-ic { margin-bottom: 2px; }
.jr2-over .jr2-m b { font-size: 1.2rem; }
.jr2-over .jr2-m small { font-size: .72rem; font-weight: 600; color: var(--muted); }
.jr2-pc .jr-ring { width: 58px !important; height: 58px !important; }
.jr2-next { box-shadow: none; border: 1px solid #EAD3A6; background: linear-gradient(135deg, #FDF4E2, #F8E9CC); border-left: 3px solid var(--primary); align-items: center; }
.jr2-next h2 { margin: 0; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.jr2-next b { font-size: .86rem; } .jr2-next span { font-size: .72rem; }
.jr2-next .btn { min-height: 38px; padding-inline: 14px; }
/* skill cards */
.jr2-list { display: grid; gap: 8px; }
.jr2-row { padding: 10px 12px !important; border: 1px solid var(--line) !important; border-radius: 14px; background: #FFFCF7; box-shadow: 0 4px 12px -12px rgba(58, 26, 9, .45); }
.jr2-top { gap: 8px !important; }
.jr2-top > b { flex: 1; min-width: 0; font-size: .84rem !important; }
.jr2-st i { font-style: normal; color: var(--muted); }
.jr2-row.passed { border-color: #CFE3D5 !important; }
.jr2-row.grow { border-color: #EBD3A2 !important; }
.jr2-bar { margin-left: 38px !important; }
.jr2-txt, .jr2-acts { margin-left: 38px !important; }
.jr2-acts { gap: 12px; } .jr2-acts .link { min-height: 32px; }
.jr3-loka { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .78rem; color: var(--ink-2); }
@media (max-width: 360px) { .jr2-bar, .jr2-txt, .jr2-acts { margin-left: 0 !important; } .jr2-top .jr3-ic { flex-basis: 26px; width: 26px; height: 26px; } }
.jr2-list > li { min-width: 0; }
.jr2-bar { width: auto !important; }
@media (max-width: 360px) { .jr2-top { flex-wrap: wrap; } .jr2-top > b { flex-basis: calc(100% - 40px); } .jr2-st { margin-left: 34px; } }
.lk-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lk-quick .chip { min-height: 34px; font-size: .76rem; background: #FFFCF7; border-color: #E6D2AE; color: var(--primary); }
.lk-quick .chip:hover, .lk-quick .chip:focus-visible { background: #FBF0DC; }
/* =========================================================
Creator badges — earned grid + badges to unlock
========================================================= */
.bd-sum { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #FFFCF7; }
.bd-sum .grow { display: grid; } .bd-sum .grow b { font-size: .92rem; color: var(--ink); } .bd-sum .grow small { font-size: .72rem; color: var(--muted); }
.bd-sum-n { font-size: 1.4rem; color: var(--primary); }
.bd-filter { margin: 10px 0 8px; flex-wrap: wrap; gap: 6px; }
.bd-filter .chip { min-height: 32px; } .bd-filter .chip span { margin-left: 3px; font-size: .7rem; opacity: .75; }
.bd-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bd-grid > li { min-width: 0; }
.bd-card { width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; gap: 5px; padding: 12px 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: #FFFCF7; text-align: center; cursor: pointer; }
.bd-card:hover, .bd-card:focus-visible { border-color: #D9BE8C; background: #FFF8EA; }
.bd-card .lb { padding: 0; border: 0; background: none; }
.bd-card .lb .lb-t, .bd-row-ic .lb .lb-t { display: none; }
.bd-card .lb svg { width: 30px; height: 30px; padding: 7px; box-sizing: content-box; border-radius: 50%; background: #F6EBDA; }
.bd-card.verification .lb svg { background: #E9F3EC; } .bd-card.editorial .lb svg { background: #F3DDB1; }
.bd-card b { font-size: .74rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.bd-card small { font-size: .62rem; line-height: 1.2; color: var(--muted); }
.bd-card.self small { font-style: italic; }
.bd-unlock { list-style: none; margin: 0; padding: 0; }
.bd-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #F0E6D8; }
body:not(.desk) .bd-row { padding-right: 16px; } /* clear of the tucked Loka tab */
.bd-row-ic .lb { padding: 0; border: 0; background: none; opacity: .55; filter: grayscale(.4); }
.bd-row-ic .lb svg { width: 20px; height: 20px; padding: 5px; box-sizing: content-box; border-radius: 10px; background: #F2ECE4; }
.bd-row .grow { flex: 1; display: grid; gap: 3px; min-width: 0; }
.bd-row-top { display: flex; align-items: center; gap: 5px; } .bd-row-top b { font-size: .82rem; color: var(--ink); } .bd-row-top svg { color: var(--muted); }
.bd-row small { font-size: .72rem; line-height: 1.35; color: var(--ink-2); }
.bd-bar { position: relative; height: 5px; margin-top: 3px; border-radius: 999px; background: #F1E7D9; overflow: visible; }
.bd-bar span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #C8892C, #A9701F); max-width: 100%; }
.bd-bar i { position: absolute; top: -3px; width: 2px; height: 11px; margin-left: -1px; background: var(--primary); border-radius: 1px; }
.bd-row-act { display: grid; justify-items: end; gap: 2px; flex-shrink: 0; max-width: 42%; text-align: right; }
.bd-row-act .link { font-size: .74rem; font-weight: 700; min-height: 30px; }
.bd-row-act small { font-size: .68rem; color: var(--muted); }
.bd-info { min-height: 26px !important; color: var(--muted) !important; }
@media (max-width: 340px) { .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) { .bd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bd-card .lb, .bd-row-ic .lb { display: block !important; position: static !important; width: auto !important; height: auto !important; min-height: 0 !important; line-height: 0; }
.bd-card .lb svg { display: block; width: 22px !important; height: 22px !important; padding: 8px !important; }
.bd-row-ic .lb svg { display: block; }
/* =========================================================
Full-page checkout
========================================================= */
.co-page { padding: 0 16px 110px; }
.co-page-h { display: flex; align-items: center; gap: 10px; padding: 12px 0 8px; }
.co-page-h h1 { flex: 1; display: flex; align-items: center; gap: 6px; margin: 0; font-size: 1.2rem; color: var(--ink); }
.co-page-h .link { font-size: .78rem; font-weight: 700; white-space: nowrap; }
.co-page .co2 { width: 100%; }
.co-page .co-steps { margin: 6px 0 16px; }
.co-page .co2-grid { gap: 16px; }
.co-page .co2-main { min-width: 0; }
.co-page .co-h { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 1rem; }
.co-page .field { display: grid; gap: 4px; }
.co-page .req { color: #A3402A; }
.co-weave { height: 6px; margin: 18px 0 14px; opacity: .55; background: repeating-linear-gradient(90deg, #C8892C 0 8px, transparent 8px 12px, #5A2810 12px 16px, transparent 16px 22px); border-radius: 3px; -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.co-gift { margin: 4px 0 6px; }
.co-rv { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F0E6D8; }
.co-rv:last-child { border-bottom: 0; } .co-rv > div { display: grid; gap: 2px; min-width: 0; } .co-rv .link { font-size: .76rem; font-weight: 700; flex-shrink: 0; }
.co-page .co-nav { position: sticky; bottom: calc(var(--tabbar-h, 72px) + 6px); z-index: 2; padding: 10px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.addr-note { display: flex; gap: 6px; align-items: flex-start; margin: 2px 0 4px; padding: 8px 10px; border-radius: 10px; background: #FBF2E4; font-size: .76rem; line-height: 1.4; color: var(--ink-2); }
.co-done-page { display: grid; place-items: start center; padding-top: 24px; }
.co-done-page .co-done { max-width: 640px; width: 100%; }
.co-done-page h1 { margin: 6px 0 4px; font-size: 1.25rem; color: var(--ink); text-align: center; }
/* desktop: a full-width two-column page */
body.desk .co-page { padding: 8px 32px 48px; }
body.desk .co-page .co2-grid { grid-template-columns: minmax(0, 68fr) minmax(300px, 32fr) !important; align-items: start; gap: 32px; }
body.desk .co-page .co2-side { order: 0 !important; position: sticky; top: 76px; }
body.desk .co-page .co-sum { padding: 4px 16px; } body.desk .co-page .co-sum summary { pointer-events: none; }
body.desk .co-page .co-nav { position: static; background: none; }
@media (max-width: 899px) { body.desk .co-page .co2-grid { grid-template-columns: minmax(0, 1fr) !important; } body.desk .co-page .co2-side { position: static; order: -1 !important; } }
.co-row-it { align-items: center; } .co-row-it .grow { display: grid; min-width: 0; } .co-row-it small { font-size: .7rem; color: var(--muted); }
.co-thumb-s { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; }
.co-page .field { display: block; } .co-page .field > input, .co-page .field > textarea, .co-page .field > select { display: block; width: 100%; margin-top: 4px; box-sizing: border-box; }
.co-page .field > small { display: inline; }
/* opening: one soft gold shimmer sweeping across the whole logo (masked to the logo's own shapes) */
#launch .l-img { position: relative; display: block; line-height: 0; }
#launch .l-gl { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
background: linear-gradient(105deg, rgba(255, 240, 205, 0) 38%, rgba(255, 236, 190, .9) 50%, rgba(255, 240, 205, 0) 62%) no-repeat;
background-size: 260% 100%; background-position: 130% 0;
-webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
animation: lSweep .5s ease-in-out both; }
#launch .l-gl-mark { -webkit-mask-image: url(photo/locarta-mark.png); mask-image: url(photo/locarta-mark.png); animation-delay: 2.2s; }
#launch .l-gl-word { -webkit-mask-image: url(photo/locarta-wordmark.png); mask-image: url(photo/locarta-wordmark.png); animation-delay: 2.3s; animation-duration: .45s; }
#launch .l-gl-tag { -webkit-mask-image: url(photo/locarta-tagline.png); mask-image: url(photo/locarta-tagline.png); animation-delay: 2.34s; animation-duration: .42s; }
@keyframes lSweep { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }
#launch .l-gl { animation-fill-mode: none; }
@media (prefers-reduced-motion: reduce) { #launch .l-gl { display: none !important; } }
/* shimmer: aligned to the tagline, and a warmer band that lightens the logo as it passes */
#launch .l-img:has(.l-tagline) { margin-left: 1px; } #launch .l-img .l-tagline { margin-left: 0 !important; }
#launch .l-gl { mix-blend-mode: screen; background-image: linear-gradient(105deg, rgba(255, 214, 140, 0) 32%, rgba(255, 222, 160, .95) 50%, rgba(255, 214, 140, 0) 68%) !important; }
/* =========================================================
Opening, refined pacing (~4.7s): discovery → symbol → wordmark → tagline → glow → shimmer → pause → fade
(no letter-by-letter or "written on the page" reveal; the logo artwork is never split)
========================================================= */
#launch .l-dot { animation: lPoint 2s cubic-bezier(.4, 0, .2, 1) both !important; }
@keyframes lPoint {
0% { opacity: 0; transform: translate(var(--to-centre-x), var(--to-centre-y)) scale(.3); box-shadow: 0 0 0 rgba(200, 137, 44, 0); }
25% { opacity: 1; transform: translate(var(--to-centre-x), var(--to-centre-y)) scale(1); box-shadow: 0 0 12px rgba(200, 137, 44, .45); }
50% { opacity: 1; transform: translate(var(--to-centre-x), var(--to-centre-y)) scale(1); } /* settles */
80% { opacity: 1; transform: translate(0, 0) scale(1); } /* glides to the pin */
100% { opacity: 0; transform: translate(0, 0) scale(.7); } /* merges into the pin */
}
#launch .l-mark { animation: lBase .9s 1.2s cubic-bezier(.4, 0, .2, 1) both, lShine .7s 3.2s ease-in-out both !important; }
#launch .l-word { clip-path: none !important; animation: lWordIn2 .9s 2.1s cubic-bezier(.22, .61, .36, 1) both, lShine .7s 3.3s ease-in-out both !important; }
@keyframes lWordIn2 { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
#launch .l-tagline { animation: lTagIn2 .8s 2.75s cubic-bezier(.4, 0, .2, 1) both !important; }
@keyframes lTagIn2 { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* one slow, narrow shimmer across the finished lockup */
#launch .l-gl { background-image: linear-gradient(105deg, rgba(255, 214, 140, 0) 40%, rgba(255, 222, 160, .9) 50%, rgba(255, 214, 140, 0) 60%) !important; }
#launch .l-gl-mark { animation-delay: 3.55s !important; animation-duration: .65s !important; }
#launch .l-gl-word { animation-delay: 3.68s !important; animation-duration: .6s !important; }
#launch .l-gl-tag { animation-delay: 3.74s !important; animation-duration: .56s !important; }
#launch.launch { transition: opacity .3s ease-in-out, visibility .3s !important; }
/* =========================================================
Tourist Home — visual polish only (v77): same sections and content as v75
========================================================= */
.r3-home { --hm-r: 16px; --hm-line: #EADFCF; --hm-card: #FFFCF7; --hm-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6); }
/* section headings: one style, gold accent, even rhythm */
.r3-home .sec-head.h-sec { margin: 24px 0 10px; align-items: center; }
.r3-home .sec-head.h-sec h2 { position: relative; display: flex; align-items: center; gap: 6px; padding-left: 11px; font-size: 1.02rem; letter-spacing: -.005em; color: var(--ink); }
.r3-home .sec-head.h-sec h2::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 16px; margin-top: -8px; border-radius: 3px; background: linear-gradient(180deg, #D9A24A, #A9701F); }
.r3-home .sec-head.h-sec h2 svg { color: var(--accent-ink); }
.r3-home .see-all { padding: 4px 8px; border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--accent-ink); }
.r3-home .see-all:hover, .r3-home .see-all:focus-visible { background: #F6EBDA; }
/* hero greeting: softer edge and depth */
.r3-home .hero-greet, .r3-home [class*="hg-"] { border-radius: 18px; }
.r3-home > :is(.hero-greet, .hg) { box-shadow: var(--hm-shadow); }
/* pillars: clearer icons and labels */
.r3-home .pillars { gap: 8px; margin-top: 12px; }
.r3-home .pillars button { padding: 10px 4px 9px; border: 1px solid var(--hm-line); border-radius: 14px; background: var(--hm-card); box-shadow: none; }
.r3-home .pillars button svg { box-sizing: content-box; width: 18px; height: 18px; padding: 8px; border-radius: 50%; background: #F6EBDA; color: var(--primary); }
.r3-home .pillars b { margin-top: 4px; font-size: .78rem; color: var(--ink); }
.r3-home .pillars small { font-size: .62rem; line-height: 1.25; color: var(--muted); }
.r3-home .pillars button:hover, .r3-home .pillars button:focus-visible { border-color: #D9BE8C; background: #FFF8EA; }
/* rails: snap card by card */
.r3-home .rail { gap: 12px; padding: 4px 18px 10px; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; }
/* a reliable trailing gutter after the last card (end padding of scrolling flex rows isn't honoured everywhere) */
.r3-home .rail > *:last-child { scroll-snap-align: end; }
/* rails inside the highlighted "Picked for You" box use that box's own 12px inset */
.r3-home .fy .rail { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; scroll-padding-inline: 12px; }
.r3-home .rail > * { scroll-snap-align: start; }
/* every rail card: one family */
.r3-home .rail > :is(.fcard, .fpcard, .stc, .lc, .lc-card, .bk-card, .maker-chip, .pcard, article, button.card) { border: 1px solid var(--hm-line) !important; border-radius: var(--hm-r) !important; background: var(--hm-card) !important; box-shadow: var(--hm-shadow) !important; overflow: hidden; }
.r3-home .rail > * img, .r3-home .rail > * .pic { border-radius: 0; }
.r3-home .rail > .maker-chip { padding: 12px 8px 10px; }
.r3-home .rail > .maker-chip .mk-pic { border-radius: 50% !important; box-shadow: 0 0 0 3px #FFF8EA, 0 0 0 4px #E6D2AE; }
/* titles: two clean lines instead of cut-offs */
.r3-home .rail :is(h3, strong, .ft, .fp-t, .stc-t) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important; text-overflow: clip; line-height: 1.28; }
/* small pills and round arrow buttons: consistent */
.r3-home .rail :is(.chip-sm, .story-pill, .pill-story) { border-radius: 999px; }
.r3-home .rail :is(.fcard, .fpcard) button:not(.btn) { border-radius: 50%; }
.r3-home .tagline-end { margin: 26px 0 6px; font-family: var(--serif, inherit); font-style: italic; color: var(--accent-ink); }
/* =========================================================
LOCARTA visual polish layer (v78) — styling only; no markup or behaviour changes.
Hover effects only on devices with a mouse; touch gets pressed states; reduced motion turns it all off.
========================================================= */
:root { --vp-ease: cubic-bezier(.22, .61, .36, 1); --vp-shadow-1: 0 10px 22px -18px rgba(58, 26, 9, .55); --vp-shadow-2: 0 18px 30px -18px rgba(58, 26, 9, .55); --vp-ring: 0 0 0 3px rgba(200, 137, 44, .35); }
/* --- page entrance: content rises in once when a screen opens (first sections lightly staggered) --- */
@keyframes vpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.screen-enter > :is(.pad, .cp-wrap, .ex-wrap, div) > :is(.sec-head, .rail, section, nav, .pillars, .h-search, header):nth-child(-n+8) { animation: vpIn .42s var(--vp-ease) both; }
.screen-enter > * > :nth-child(2) { animation-delay: .03s; } .screen-enter > * > :nth-child(3) { animation-delay: .06s; } .screen-enter > * > :nth-child(4) { animation-delay: .09s; }
.screen-enter > * > :nth-child(5) { animation-delay: .12s; } .screen-enter > * > :nth-child(6) { animation-delay: .15s; } .screen-enter > * > :nth-child(n+7) { animation-delay: .18s; }
/* --- cards: one family of smooth transitions --- */
:is(.fcard, .fpcard, .stc, .lc, .lc-card, .bk-card, .maker-chip, .pcard, .atx, .ch-card, .jr2-row, .bd-card, .co-mcard, .addr-card, .post, .fest-pick, .r4-card, .feat-card, .ex-cat, .ex-cats > *, .dsk-card, .tv-card, .cr-card) {
transition: transform .25s var(--vp-ease), box-shadow .25s var(--vp-ease), border-color .2s ease, background-color .2s ease; }
:is(.fcard, .fpcard, .stc, .lc, .bk-card, .pcard, .post, .fest-pick, .feat-card, .dsk-card, .tv-card, .cr-card) :is(img, .pic) { transition: transform .5s var(--vp-ease); }
@media (hover: hover) and (pointer: fine) {
:is(.fcard, .fpcard, .stc, .lc, .lc-card, .bk-card, .maker-chip, .pcard, .ch-card, .bd-card, .fest-pick, .feat-card, .dsk-card, .tv-card, .cr-card):hover { transform: translateY(-2px); box-shadow: var(--vp-shadow-2) !important; border-color: #DCC197 !important; }
:is(.fcard, .fpcard, .stc, .lc, .bk-card, .pcard, .fest-pick, .feat-card, .dsk-card, .tv-card, .cr-card):hover :is(img, .pic) { transform: scale(1.04); }
:is(.atx, .jr2-row, .co-mcard, .addr-card, .post):hover { border-color: #DCC197; box-shadow: var(--vp-shadow-1); }
}
/* keep zoomed images inside their frames */
:is(.fcard, .fpcard, .stc, .lc, .bk-card, .pcard, .fest-pick, .feat-card, .dsk-card, .tv-card, .cr-card) { overflow: hidden; }
/* touch: a gentle press */
@media (hover: none) { :is(.fcard, .fpcard, .stc, .lc, .bk-card, .maker-chip, .pcard, .ch-card, .bd-card, .fest-pick, .co-mcard, .addr-card, .ex-cat):active { transform: scale(.98); } }
/* --- buttons, chips, links --- */
:is(.btn, .chip, .see-all, .link, .icon-btn, .tabbar button, .seg button) { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease; }
.btn:active:not(:disabled), .chip:active:not(:disabled) { transform: scale(.97); }
.btn:not(.btn-ghost):not(:disabled) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .04)); }
@media (hover: hover) and (pointer: fine) {
.btn:not(.btn-ghost):not(:disabled):hover { box-shadow: 0 10px 18px -12px rgba(58, 26, 9, .7); filter: brightness(1.06); }
.btn-ghost:hover:not(:disabled), .chip:hover:not([aria-pressed="true"]):not(:disabled) { background-color: #FBF2E4; border-color: #DCC197; }
:is(.btn, .see-all, .link, .lk-go) svg:last-child { transition: transform .2s var(--vp-ease); }
:is(.btn, .see-all, .link, .lk-go):hover svg:last-child { transform: translateX(2px); }
}
.btn:disabled, .chip:disabled { opacity: .55; cursor: not-allowed; }
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255, 246, 230, .5); border-top-color: #FFF6E6; border-radius: 50%; animation: vpSpin .7s linear infinite; }
@keyframes vpSpin { to { transform: rotate(360deg); } }
.chip[aria-pressed="true"] { box-shadow: 0 6px 12px -10px rgba(58, 26, 9, .8); }
/* --- keyboard focus: a clear gold ring everywhere --- */
:is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--vp-ring) !important; border-radius: inherit; }
/* --- bottom navigation: animated active marker --- */
.tabbar button { position: relative; }
.tabbar button::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: var(--accent); transform: scaleX(0); opacity: 0; transition: transform .28s var(--vp-ease), opacity .2s ease; }
.tabbar button[aria-current="page"]::after, .tabbar button.on::after { transform: scaleX(1); opacity: 1; }
/* --- progress bars fill smoothly to their real values when a page opens --- */
@keyframes vpGrow { from { width: 0; } }
:is(.pc-bar, .jr2-bar, .bd-bar, .wz-bar, .ob-bar) > span { animation: vpGrow .8s var(--vp-ease) both; }
.jr-ring { transition: --p .8s var(--vp-ease); }
/* --- featured: Picked for You and Loka's picks get a soft cream-to-gold highlight --- */
.fy { padding: 12px 12px 4px; margin: 18px -4px 0; border-radius: 18px; background: linear-gradient(135deg, #FFF7E8 0%, #F8E8C8 100%); box-shadow: inset 0 0 0 1px rgba(200, 137, 44, .2); }
.fy .sec-head { margin-top: 0 !important; }
/* --- Loka: a gentle idle float; messages rise in softly --- */
@keyframes vpFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.loka-fab:active { scale: .96; }
@keyframes vpMsg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#lokaPanel .lk-msg { animation: vpMsg .28s var(--vp-ease) both; }
#lokaPanel .lk-quick .chip { animation: vpMsg .3s .08s var(--vp-ease) both; }
/* --- section dividers and headings: a touch more finish --- */
.sec-head h2 { letter-spacing: -.005em; }
/* --- everything still works with motion turned off --- */
@media (prefers-reduced-motion: reduce) {
.screen-enter *, .loka-fab, #lokaPanel .lk-msg, #lokaPanel .lk-quick .chip, :is(.pc-bar, .jr2-bar, .bd-bar, .wz-bar, .ob-bar) > span { animation: none !important; }
* { transition-duration: .01ms !important; }
:is(.fcard, .fpcard, .stc, .lc, .bk-card, .pcard, .feat-card):hover :is(img, .pic) { transform: none !important; }
}
/* Loka: float the peeking button too (the "back" bounce keeps priority) */
@media (prefers-reduced-motion: reduce) { .loka-fab.peek:not(.back) { animation: none !important; } }
/* more of the app's real card types get the same refined interaction */
:is(.a-card, .story-card, .dt-card, .dc-card, .ac-card, .follow-card, .m-card, .cgg-card) { transition: transform .25s var(--vp-ease), box-shadow .25s var(--vp-ease), border-color .2s ease; }
:is(.a-card, .story-card, .dt-card, .dc-card, .ac-card, .cgg-card) :is(img, .pic) { transition: transform .5s var(--vp-ease); }
@media (hover: hover) and (pointer: fine) {
:is(.a-card, .story-card, .dt-card, .dc-card, .ac-card, .follow-card, .m-card, .cgg-card):hover { transform: translateY(-2px); box-shadow: var(--vp-shadow-2); }
:is(.a-card, .story-card, .dt-card, .dc-card, .ac-card, .cgg-card):hover :is(img, .pic) { transform: scale(1.04); }
}
@media (hover: none) { :is(.a-card, .story-card, .dt-card, .dc-card, .ac-card, .follow-card, .m-card, .cgg-card):active { transform: scale(.98); } }
/* the button itself stays still (easy to tap); Loka inside it floats gently */
.loka-fab > :is(img, picture, svg, span):first-child { animation: vpFloat 4.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .loka-fab > :is(img, picture, svg, span):first-child { animation: none !important; } }
/* Home rows: the 18px gutter is the trailing space (the older 6px end spacer would double it) */
.r3-home .rail::after { content: none; display: none; }
/* =========================================================
Live & Videos
========================================================= */
.lv-entry { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 0; padding: 10px 12px; border: 1px solid #EAD3A6; border-radius: 16px; background: linear-gradient(135deg, #FFF7E8, #F8E8C8); text-align: left; cursor: pointer; }
.lv-entry-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #FFF6E6; }
.lv-entry .grow { display: grid; } .lv-entry b { font-size: .9rem; color: var(--ink); } .lv-entry small { font-size: .74rem; color: var(--ink-2); }
.lv-page { padding-bottom: 110px; }
.lv-note { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 10px; padding: 8px 10px; border-radius: 10px; background: #FBF2E4; font-size: .74rem; line-height: 1.4; color: var(--ink-2); }
.lv-tabs { margin: 0 0 10px; } .lv-tabs button span { margin-left: 4px; font-size: .7rem; opacity: .7; }
.lv-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 12px; padding: 0 18px; } .lv-cats .chip { flex: 0 0 auto; gap: 4px; }
.lv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { body.desk .lv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lvx-card { display: grid; padding: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #FFFCF7; text-align: left; cursor: pointer; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .55); transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s; }
@media (hover: hover) and (pointer: fine) { .lvx-card:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -18px rgba(58, 26, 9, .55); } .lvx-card:hover .lv-img { transform: scale(1.04); } }
.lv-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.lv-img { width: 100%; height: 100%; transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.lv-b { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 252, 247, .94); font-size: .66rem; font-weight: 800; color: var(--primary); }
.lv-b.live { background: #B3261E; color: #fff; } .lv-b.sm { position: static; padding: 1px 7px; font-size: .62rem; }
.lv-play { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(43, 22, 11, .6); color: #fff; }
.lvx-body { display: grid; gap: 2px; padding: 10px 12px 12px; } .lvx-body b { font-size: .9rem; line-height: 1.3; color: var(--ink); } .lvx-body small { font-size: .72rem; color: var(--muted); }
.lv-rel { display: inline-flex; gap: 4px; align-items: center; color: var(--accent-ink) !important; }
.lv-empty { display: grid; justify-items: center; gap: 6px; padding: 30px 10px; border: 1px dashed #E3D3BC; border-radius: 16px; text-align: center; color: var(--muted); } .lv-empty b { color: var(--ink); }
.lv-exp { flex: 0 0 60%; max-width: 220px; display: grid; gap: 3px; padding: 0; border: 0; background: none; text-align: left; } .lv-exp-img { aspect-ratio: 4 / 3; border-radius: 14px; } .lv-exp b { font-size: .82rem; } .lv-exp small { font-size: .7rem; color: var(--muted); }
/* watch page */
.lvx-watch { padding-bottom: 110px; }
.lv-player { position: relative; margin: 0 -18px 12px; aspect-ratio: 16 / 9; overflow: hidden; background: #2B160B; }
.lv-player-img { width: 100%; height: 100%; opacity: .55; }
.lv-player-ov .lv-b { top: 12px; left: 12px; }
.lv-player-msg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 0 30px; text-align: center; color: #FFF6E6; }
.lv-player-msg svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: rgba(255, 246, 230, .18); } .lv-player-msg small { font-size: .74rem; }
.lv-title { margin: 0; font-size: 1.15rem; color: var(--ink); } .lv-meta { margin: 2px 0 6px; font-size: .78rem; color: var(--muted); } .lv-desc { font-size: .84rem; color: var(--ink-2); }
.lv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.lv-pane { margin-bottom: 10px; }
.lv-side { display: none; }
.lv-sub { display: inline-flex; gap: 5px; align-items: center; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); }
.lv-lot, .lv-relc { display: grid; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #EAD3A6; border-radius: 14px; background: #FFF8EA; }
.lv-lot-in, .lv-relrow { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; } .lv-lot-img { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 10px; }
.lv-lot-in .grow, .lv-relrow .grow { display: grid; gap: 1px; min-width: 0; } .lv-lot b, .lv-relc b { font-size: .84rem; color: var(--ink); } .lv-lot small, .lv-relc small { font-size: .72rem; color: var(--ink-2); }
.lv-chat { display: grid; gap: 8px; } .lv-msgs { list-style: none; margin: 0; padding: 8px 10px; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: #FFFCF7; display: grid; gap: 6px; font-size: .8rem; }
.lv-msgs b { color: var(--primary); } .lv-msgs-empty { color: var(--muted); }
.lv-say { display: flex; gap: 8px; } .lv-say input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #FFFCF7; font: inherit; }
@media (min-width: 900px) { body.desk .lv-player { margin: 0 0 14px; border-radius: 16px; } body.desk .lv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; } body.desk .lv-side { display: block; } body.desk .lv-pane, body.desk .lv-pane-body { display: none; } }
/* creator studio */
.lvm-acts-grid, .lv-studio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lv-studio { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0 8px; }
.lvm-act { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 14px; background: #FFFCF7; cursor: pointer; }
.lvm-act span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #F6EBDA; color: var(--primary); } .lvm-act b { font-size: .76rem; text-align: center; color: var(--ink); } .lvm-act em { font-style: normal; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .66rem; }
.lvm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lvm-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: #FFFCF7; cursor: default; }
.lvm-row[role="button"] { cursor: pointer; } .lvm-img { flex: 0 0 56px; width: 56px; height: 42px; border-radius: 8px; object-fit: cover; } .lvm-ic { display: grid; place-items: center; background: #F6EBDA; color: var(--primary); }
.lvm-row .grow { display: grid; gap: 2px; min-width: 0; } .lvm-row b { font-size: .84rem; } .lvm-row small { font-size: .72rem; color: var(--muted); }
.lvm-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .lvm-acts .link { font-size: .74rem; font-weight: 700; }
.lv-form { display: grid; gap: 10px; } .lv-form .field { display: grid; gap: 4px; } .lv-form select, .lv-form input:not([type=checkbox]):not([type=radio]), .lv-form textarea { width: 100%; box-sizing: border-box; }
/* =========================================================
Custom creations
========================================================= */
.cr-page { padding-bottom: 110px; } .cr-page .field { display: grid; gap: 4px; margin-bottom: 10px; }
.cr-page select, .cr-page textarea, .cr-page input:not([type=checkbox]):not([type=file]) { width: 100%; box-sizing: border-box; }
.cr-item { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; } .cr-item span { display: grid; } .cr-item small { font-size: .7rem; color: var(--muted); }
.cr-refs { display: flex; flex-wrap: wrap; gap: 8px; } .cr-refs img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; } .cr-refs.sm img { width: 52px; height: 52px; }
.cr-ref { position: relative; } .cr-ref .icon-btn { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; background: #FFFCF7; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.cr-add { display: grid; place-items: center; align-content: center; width: 72px; height: 72px; border: 1.5px dashed #D9BE8C; border-radius: 10px; color: var(--accent-ink); font-size: .7rem; cursor: pointer; }
.cr-entry { display: grid; gap: 4px; justify-items: start; margin: 14px 18px 24px; padding: 12px; border: 1px solid #EAD3A6; border-radius: 14px; background: #FFF8EA; } .cr-entry small { font-size: .74rem; color: var(--ink-2); }
.cr-ref-no { margin: 2px 0; font-size: .74rem; color: var(--muted); } .cr-h { margin: 0 0 10px; font-size: 1.15rem; color: var(--ink); } .cr-h2, .cr-quote h2 { display: flex; gap: 6px; align-items: center; margin: 16px 0 8px; font-size: .95rem; color: var(--ink); }
.cr-track { list-style: none; display: flex; margin: 6px 0 14px; padding: 0; overflow-x: auto; scrollbar-width: none; }
.cr-track li { flex: 1 0 64px; position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.cr-track li:not(:last-child)::after { content: ""; position: absolute; top: 6px; left: calc(50% + 8px); right: calc(-50% + 8px); height: 2px; background: #EADCC8; }
.cr-track li.done:not(:last-child)::after { background: var(--accent); }
.cr-track i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #E0CDB2; background: #FFFCF7; } .cr-track .done i { border-color: var(--accent); background: var(--accent); } .cr-track .now i { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(90, 40, 16, .15); }
.cr-track span { font-size: .6rem; line-height: 1.2; color: var(--muted); } .cr-track .now span, .cr-track .done span { color: var(--ink); font-weight: 700; }
.cr-ended { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #F6EEE4; font-size: .8rem; color: var(--ink-2); }
.cr-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.cr-prev { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; } .cr-prev img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; } .cr-prev span { display: grid; font-size: .82rem; } .cr-prev small { font-size: .7rem; color: var(--muted); }
.cr-thread { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.cr-thread li { display: grid; gap: 2px; max-width: 85%; padding: 8px 10px; border-radius: 12px 12px 12px 4px; background: #FFFCF7; border: 1px solid var(--line); font-size: .82rem; }
.cr-thread li.me { justify-self: end; border-radius: 12px 12px 4px 12px; background: #FBF0DC; border-color: #EAD3A6; } .cr-thread b { font-size: .72rem; color: var(--primary); } .cr-thread small { font-size: .64rem; color: var(--muted); } .cr-none { color: var(--muted); }
.cr-accept { margin: 4px 0 10px; } .lv-empty-s { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: .82rem; }
@media (prefers-reduced-motion: reduce) { .lvx-card, .lv-img { transition: none !important; } }
.lv-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); } .lv-tabs button { min-width: 0; white-space: nowrap; }
.lvx-watch { display: block !important; } .lvx-watch .lv-player { width: auto; }
/* =========================================================
Live & Video: header icon + full-screen swipe viewer
========================================================= */
.h-live { position: relative; color: var(--primary); }
.h-live .dot.live { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #C8892C; box-shadow: 0 0 0 2px #FFFCF7; }
@media (hover: hover) and (pointer: fine) { .h-live:hover { background: #F6EBDA; } }
.h-live:active { transform: scale(.94); }
.rl { position: fixed; inset: 0; z-index: 60; background: #140A05; color: #FFF6E6; }
.rl-feed { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; outline: none; }
.rl-feed::-webkit-scrollbar { display: none; }
.rl-slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.rl-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rl-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 10, 5, .55) 0%, rgba(20, 10, 5, 0) 22%, rgba(20, 10, 5, 0) 52%, rgba(20, 10, 5, .82) 100%); }
.rl-top { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 10px; }
.rl-who { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.rl-who .avatar { width: 34px; height: 34px; font-size: .74rem; box-shadow: 0 0 0 2px rgba(255, 246, 230, .8); }
.rl-who b { font-size: .86rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.rl-live, .rl-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .66rem; font-weight: 800; }
.rl-live { background: #B3261E; color: #fff; } .rl-tag { background: rgba(255, 246, 230, .2); backdrop-filter: blur(6px); }
.rl-close { margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(20, 10, 5, .45); color: #FFF6E6; cursor: pointer; }
.rl-empty .rl-close { position: absolute; top: 14px; right: 14px; }
.rl-rail { position: absolute; right: 10px; bottom: 34%; z-index: 2; display: grid; gap: 14px; }
.rl-rail button { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; color: #FFF6E6; cursor: pointer; }
.rl-rail button svg { box-sizing: content-box; width: 22px; height: 22px; padding: 10px; border-radius: 50%; background: rgba(20, 10, 5, .4); backdrop-filter: blur(6px); transition: transform .15s; }
.rl-rail button:active svg { transform: scale(.9); } .rl-rail button[aria-pressed="true"] svg { background: #C8892C; }
.rl-rail small { font-size: .62rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.rl-bottom { position: absolute; left: 0; right: 66px; bottom: 0; z-index: 2; display: grid; gap: 6px; padding: 0 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
.rl-title { font-size: 1rem; line-height: 1.3; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); } .rl-cat { font-size: .72rem; opacity: .85; }
.rl-chatlite { list-style: none; margin: 2px 0; padding: 0; display: grid; gap: 3px; max-height: 96px; overflow: hidden; font-size: .76rem; -webkit-mask: linear-gradient(transparent, #000 35%); mask: linear-gradient(transparent, #000 35%); }
.rl-chatlite b { color: #F6D58A; }
.rl-play { display: flex; align-items: center; gap: 8px; } .rl-pp { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 246, 230, .2); color: #FFF6E6; cursor: pointer; }
.rl-prog { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 246, 230, .3); overflow: hidden; } .rl-prog span { display: block; width: 0; height: 100%; background: #E8C987; }
.rl-slide.playing .rl-prog span { animation: rlProg 20s linear forwards; } @keyframes rlProg { to { width: 100%; } }
.rl-play small { font-size: .62rem; opacity: .75; white-space: nowrap; }
.rl-th { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; }
.rl-lot, .rl-prod { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 14px; text-align: left; color: var(--ink); cursor: pointer; }
.rl-prod { background: rgba(255, 252, 247, .95); } .rl-lot { background: linear-gradient(135deg, #FFF2D9, #F3DDB1); box-shadow: inset 0 0 0 1px rgba(200, 137, 44, .5); }
.rl-lot-k { position: absolute; top: -9px; left: 10px; display: inline-flex; gap: 3px; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--primary); color: #FFF6E6; font-size: .6rem; font-weight: 800; }
.rl-lot .grow, .rl-prod .grow { display: grid; min-width: 0; } .rl-lot b, .rl-prod b { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rl-lot small, .rl-prod small { font-size: .68rem; color: var(--ink-2); }
.rl-shop { flex-shrink: 0; padding: 5px 10px; border-radius: 999px; background: var(--primary); color: #FFF6E6; font-size: .68rem; font-weight: 800; }
.rl-prods { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; } .rl-prods .rl-prod { flex: 0 0 92%; scroll-snap-align: start; }
.rl-prods .rl-prod:only-child { flex-basis: 100%; }
.rl-nav { position: fixed; right: 12px; top: 50%; z-index: 61; display: none; gap: 8px; transform: translateY(-50%); }
.rl-nav button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 246, 230, .18); color: #FFF6E6; cursor: pointer; }
.rl-empty { display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; } .rl-empty small { opacity: .7; }
@media (hover: hover) and (pointer: fine) { .rl-nav { display: grid; } }
/* desktop: a centred portrait column on a dark backdrop (no stretching) */
@media (min-width: 700px) { .rl-slide { width: min(100%, calc(100vh * 9 / 16)); margin: 0 auto; } }
/* explore and community rows */
.lv-rail .lvx-card { flex: 0 0 72%; max-width: 280px; }
.cm-videos { margin: 6px 0 14px; }
.lv-vprev video { width: 100%; max-height: 220px; border-radius: 12px; background: #000; } .lv-vprev small { font-size: .7rem; color: var(--muted); }
#lvErr.info { color: var(--ink-2); background: #FBF2E4; padding: 8px 10px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .rl-slide.playing .rl-prog span { animation: none; width: 30%; } }
/* panels (chat, comments) and toasts open above the full-screen viewer; the shading never blocks taps */
.rl-shade, .rl-bg { pointer-events: none; }
body:has(.rl) :is(#sheet, .sheet, .sheet-wrap, #sheetWrap, .scrim, #scrim, .sheet-bg, #sheetBg, .toast, #toast) { z-index: 90 !important; }
/* the viewer always covers the whole window (no page-entrance transform around it; above the desktop frame) */
.screen-enter:has(.rl), .screen-enter:has(.rl) > *, :has(> .rl) { animation: none !important; transform: none !important; }
.rl { z-index: 200; } .rl-nav { z-index: 201; } body:has(.rl) :is(#sheet, .sheet, .sheet-wrap, #sheetWrap, .sheet-backdrop, .toast, #toast) { z-index: 300 !important; }
.rl-who b { max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rl-live, .rl-tag { white-space: nowrap; }
.rl { z-index: 2000 !important; } .rl-nav { z-index: 2001 !important; }
body:has(.rl) :is(#sheet, .sheet, .sheet-wrap, #sheetWrap, .sheet-backdrop, .toast, #toast) { z-index: 2100 !important; }
/* desktop: while the full-screen viewer is open, the desktop frame steps aside (it returns on close) */
body:has(.rl) :is(.dk-side, .dk-top) { visibility: hidden; }
/* =========================================================
Community page — calmer layout and rhythm (styling only; same sections, content and interactions)
========================================================= */
/* banner: ~22% shorter, readable text over the photo, a smaller integrated Share a Story action */
.comm.sxc .sxc-hero { min-height: 0 !important; height: clamp(104px, 30vw, 118px) !important; margin: 4px 0 0 !important; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .55); }
.comm.sxc .sxc-hero .sxc-copy { padding: 12px 14px !important; gap: 4px !important; }
.comm.sxc .sxc-hero .sxc-copy :is(h1, h2, b, strong) { font-size: 1.02rem !important; line-height: 1.22 !important; }
.comm.sxc .sxc-hero .sxc-copy p { margin: 0 !important; font-size: .74rem !important; line-height: 1.35 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.comm.sxc .sxc-hero .r3-kicker { font-size: .62rem !important; }
.comm.sxc .sxc-create { min-height: 32px !important; padding: 6px 12px !important; font-size: .74rem !important; border-radius: 999px !important; }
/* filters: clear of the banner, one consistent chip style, scrolling inside the row only */
.comm.sxc .sxc-tabs { margin: 12px -18px 0 !important; padding: 0 18px 2px !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 18px; }
.comm.sxc .sxc-tabs::-webkit-scrollbar { display: none; }
.comm.sxc .sxc-tabs .chip { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); background: #FFFCF7; color: var(--ink-2); font-size: .8rem; font-weight: 700; }
.comm.sxc .sxc-tabs .chip[aria-pressed="true"], .comm.sxc .sxc-tabs .chip.on, .comm.sxc .sxc-tabs .chip[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #FFF6E6; }
/* stories: compact, consistent cards; names on a soft image overlay */
.comm.sxc .fst { margin-top: 16px !important; gap: 10px !important; }
.comm.sxc .fst > :is(.fst-add, .fst-card) { flex: 0 0 92px !important; width: 92px !important; height: 130px !important; min-height: 0 !important; border-radius: 14px !important; overflow: hidden; }
.comm.sxc .fst-card { position: relative; }
.comm.sxc .fst-card small, .comm.sxc .fst-card b { font-size: .68rem !important; line-height: 1.2; }
.comm.sxc .fst-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(30, 15, 7, .55)); pointer-events: none; }
.comm.sxc .fst-add { border: 1.5px dashed #D9BE8C !important; background: #FFF8EA !important; }
.comm.sxc .fst-add .fst-me { width: 48px !important; height: 48px !important; }
/* section rhythm: 22px between sections, 10px from a heading to its content */
.comm.sxc > .sec-head { margin: 22px 0 10px !important; align-items: center; }
.comm.sxc > .sec-head + * { margin-top: 0 !important; }
.comm.sxc > :is(.cm-videos, .sx-list, .cv, .lk, .rail):not(.sec-head + *) { margin-top: 22px !important; }
.comm.sxc .sec-head h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.comm.sxc .sec-head .see-all { flex-shrink: 0; }
/* videos from creators: consistent cards, two-line titles, soft shadows */
.comm.sxc .cm-videos { margin-bottom: 0 !important; }
.comm.sxc .cm-videos .sec-head { margin: 0 0 10px !important; }
.comm.sxc .cm-videos .lv-rail { gap: 12px; }
.comm.sxc .cm-videos .lvx-card { flex: 0 0 68%; max-width: 260px; border: 1px solid #EFE4D6; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .55); }
.comm.sxc .cm-videos .lvx-body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.comm.sxc .cm-videos .lvx-body small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* pressed / hover feedback */
.comm.sxc :is(.fst-card, .fst-add, .lvx-card):active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .comm.sxc :is(.fst-card, .fst-add):hover { transform: translateY(-2px); box-shadow: 0 14px 24px -18px rgba(58, 26, 9, .6); } }
.comm.sxc :is(.fst-card, .fst-add) { transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s; }
.comm.sxc .fst > :is(.fst-add, .fst-card) { min-width: 92px !important; }
/* banner: the subtitle stays clear of the Share a Story button */
.comm.sxc .sxc-hero .sxc-copy p.r3-kicker { display: block !important; -webkit-line-clamp: unset !important; max-width: none !important; overflow: visible !important; }
.comm.sxc .sxc-hero .sxc-copy p:not(.r3-kicker) { display: none !important; } /* compact banner: label + headline + Share a Story */
.comm.sxc .sxc-hero .sxc-copy :is(h1, h2) { max-width: calc(100% - 20px); }
/* story cards: compact but readable */
.comm.sxc .fst > :is(.fst-add, .fst-card) { flex-basis: 104px !important; width: 104px !important; min-width: 104px !important; height: 140px !important; }
.comm.sxc .fst-card :is(b, strong) { font-size: .66rem !important; line-height: 1.2 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.comm.sxc .fst-card small { font-size: .6rem !important; }
.comm.sxc .fst-card .avatar, .comm.sxc .fst-card img:not(.pic img):not([class*=bg]) { width: 22px; height: 22px; }
/* narrow phones: Share a Story becomes a compact icon button (its label stays available to screen readers) */
@media (max-width: 360px) {
.comm.sxc .sxc-create { width: 38px; min-width: 38px; height: 38px; min-height: 38px !important; padding: 0 !important; justify-content: center; font-size: 0 !important; }
.comm.sxc .sxc-create svg { width: 18px; height: 18px; margin: 0 !important; }
}
/* =========================================================
Community — matched to the reference (v83)
========================================================= */
/* banner: taller again, text on a soft cream wash, subtitle visible, Share a Story pill bottom-left */
.comm.sxc .sxc-hero { height: clamp(150px, 45vw, 176px) !important; border-radius: 18px; }
.comm.sxc .sxc-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(251, 244, 230, .96) 0%, rgba(251, 244, 230, .82) 38%, rgba(251, 244, 230, 0) 68%); }
.comm.sxc .sxc-hero .sxc-copy { position: absolute !important; inset: 0 auto 0 0 !important; z-index: 1; width: 64%; padding: 14px 16px 54px !important; display: grid; align-content: start; gap: 4px !important; }
.comm.sxc .sxc-hero .sxc-copy p:not(.r3-kicker) { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; overflow: hidden; max-width: none !important; font-size: .74rem !important; color: var(--ink-2); }
.comm.sxc .sxc-hero .sxc-copy :is(h1, h2) { font-size: 1.22rem !important; color: var(--ink) !important; max-width: none !important; }
.comm.sxc .sxc-create { position: absolute !important; left: 16px !important; right: auto !important; bottom: 12px !important; top: auto !important; z-index: 2; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 34px !important; padding: 0 14px !important; font-size: .76rem !important; background: var(--primary) !important; color: #FFF6E6 !important; }
.comm.sxc .sxc-create svg { width: 15px !important; height: 15px !important; margin-right: 6px !important; }
@media (max-width: 360px) { .comm.sxc .sxc-create { font-size: .72rem !important; } .comm.sxc .sxc-hero .sxc-copy { width: 78%; } }
/* chips + a "more" arrow */
.comm.sxc .sxc-tabs-wrap { position: relative; margin: 12px -18px 0; }
.comm.sxc .sxc-tabs-wrap .sxc-tabs { margin: 0 !important; padding: 0 58px 2px 18px !important; }
.comm.sxc .sxc-tabs .chip { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: .82rem; }
.comm.sxc .sxc-more { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: #FFFCF7; color: var(--primary); box-shadow: -14px 0 14px 4px var(--bg); cursor: pointer; }
/* stories: photo, avatar, name and time only (titles stay in the story itself) */
.comm.sxc .fst-card .fst-title { display: none !important; }
.comm.sxc .fst-card .fst-who b { font-size: .74rem !important; }
.comm.sxc .fst > :is(.fst-add, .fst-card) { flex-basis: 108px !important; width: 108px !important; min-width: 108px !important; height: 150px !important; border-radius: 16px !important; }
.comm.sxc .fst-add { gap: 8px !important; } .comm.sxc .fst-add .fst-me { width: 56px !important; height: 56px !important; box-shadow: 0 0 0 3px #FFF8EA, 0 0 0 5px #D9A24A; }
/* section headings with a round icon */
.lvr-hic { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--primary); color: #FFF6E6; vertical-align: -5px; }
/* video cards */
.lv-rail .lvr-card { flex: 0 0 64%; max-width: 250px; display: grid; align-content: start; gap: 4px; padding: 0 0 12px; border: 1px solid #EFE4D6; border-radius: 16px; background: #FFFCF7; overflow: hidden; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .55); scroll-snap-align: start; }
.lvr-main { display: grid; gap: 8px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; }
.lvr-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.lvr-img { width: 100%; height: 100%; transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
@media (hover: hover) and (pointer: fine) { .lvr-card:hover .lvr-img { transform: scale(1.04); } .lvr-card:hover { box-shadow: 0 18px 30px -18px rgba(58, 26, 9, .55); } }
.lvr-thumb .lv-b { top: 8px; left: 8px; }
.lvr-play { position: absolute; left: 10px; bottom: 10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; background: rgba(20, 10, 5, .35); color: #fff; }
.lvr-play svg { width: 14px; height: 14px; margin-left: 2px; }
.lvr-t { padding: 0 12px; font-size: .9rem; line-height: 1.28; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lvr-who, .lvr-cat { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 12px; font-size: .74rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvr-who .avatar { width: 22px; height: 22px; font-size: .56rem; }
.lvr-cat { color: var(--muted); } .lvr-cat svg { color: var(--accent-ink); }
.lvr-view { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 6px 12px 0; min-height: 34px; border: 0; border-radius: 999px; background: #F6EBDA; color: var(--primary); font-size: .76rem; font-weight: 700; cursor: pointer; }
.lvr-view:hover, .lvr-view:focus-visible { background: #F0DFC4; }
.lvr-card :is(.lvr-main, .lvr-view):active { transform: scale(.98); }
/* =========================================================
Live & Video viewer — four tabs
========================================================= */
.rl-head { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 0; pointer-events: none; }
.rl-head > * { pointer-events: auto; } .rl-logo { width: 104px; height: auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.rl-head .rl-close { margin-left: 0; width: 36px; height: 36px; }
.rl-tabs { position: absolute; z-index: 5; top: calc(52px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 4px; border-radius: 999px; background: rgba(251, 244, 230, .94); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .6); }
.rl-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 34px; padding: 0 4px; border: 0; border-radius: 999px; background: none; color: var(--primary); font: inherit; font-size: .68rem; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s; }
.rl-tabs button span { overflow: hidden; text-overflow: ellipsis; }
.rl-tabs button[aria-selected="true"] { background: var(--primary); color: #FFF6E6; }
@media (max-width: 360px) { .rl-tabs button { flex-direction: column; gap: 1px; min-height: 40px; font-size: .58rem; border-radius: 18px; } .rl-tabs { border-radius: 22px; } }
.rl .rl-top { padding-top: calc(102px + env(safe-area-inset-top, 0px)) !important; }
.rl-list { position: absolute; inset: 0; overflow-y: auto; padding: calc(106px + env(safe-area-inset-top, 0px)) 14px 24px; display: grid; align-content: start; gap: 10px; background: radial-gradient(120% 80% at 50% 0%, #3A1E0F, #140A05 70%); animation: vpIn .3s ease-out both; }
.rl-li { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 1px solid rgba(255, 246, 230, .12); border-radius: 14px; background: rgba(255, 246, 230, .06); color: #FFF6E6; text-align: left; cursor: pointer; }
.rl-li-img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; }
.rl-li .grow { display: grid; gap: 2px; min-width: 0; } .rl-li b { font-size: .86rem; } .rl-li small { font-size: .72rem; opacity: .75; }
.rl-when { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; color: #F6D58A; }
.rl-note { margin: 0 0 4px; font-size: .76rem; opacity: .8; }
.rl-none { display: grid; justify-items: center; gap: 8px; margin-top: 18vh; text-align: center; } .rl-none small { opacity: .7; max-width: 30ch; }
.rl-none svg { width: 34px; height: 34px; opacity: .8; }
.rl-feed { animation: vpIn .3s ease-out both; }
/* desktop: header and tabs sit over the centred portrait column */
@media (min-width: 700px) { .rl-head, .rl-tabs, .rl-list { left: 50%; right: auto; width: min(calc(100% - 24px), calc(100vh * 9 / 16 - 24px)); transform: translateX(-50%); } .rl-list { width: min(100%, calc(100vh * 9 / 16)); animation: none; } }
@media (prefers-reduced-motion: reduce) { .rl-list, .rl-feed { animation: none; } }
/* viewer tabs: icon above label on phones so every label shows in full */
@media (max-width: 480px) { .rl-tabs button { flex-direction: column; gap: 1px; min-height: 42px; font-size: .62rem; border-radius: 18px; } .rl-tabs { border-radius: 22px; } .rl .rl-top { padding-top: calc(108px + env(safe-area-inset-top, 0px)) !important; } .rl-list { padding-top: calc(112px + env(safe-area-inset-top, 0px)); } }
.lvr-hic svg { fill: currentColor; stroke: none; }
/* three-tab viewer: wider tabs, labels inline again */
.rl-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 480px) { .rl-tabs button { flex-direction: row !important; gap: 5px !important; min-height: 36px !important; font-size: .72rem !important; border-radius: 999px !important; } .rl-tabs { border-radius: 999px !important; } .rl .rl-top { padding-top: calc(102px + env(safe-area-inset-top, 0px)) !important; } .rl-list { padding-top: calc(106px + env(safe-area-inset-top, 0px)) !important; } }
/* upcoming rows with Remind Me */
.rl-li-main { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.rl-remind { flex-shrink: 0; gap: 4px; white-space: nowrap; }
.rl-remind[aria-pressed="true"] { background: rgba(255, 246, 230, .14) !important; color: #F6D58A !important; border-color: rgba(246, 213, 138, .4) !important; }
.rl-li { min-width: 0; } .rl-li-main { flex: 1 1 auto; min-width: 0; } .rl-li-main b, .rl-li-main small { overflow: hidden; text-overflow: ellipsis; }
.rl-remind { padding: 0 10px !important; min-height: 32px; font-size: .7rem !important; }
.rl-caption { display: flex; align-items: center; gap: 6px; margin: 2px 0; padding: 6px 10px; border-radius: 12px; background: rgba(20, 10, 5, .45); backdrop-filter: blur(6px); font-size: .78rem; line-height: 1.35; }
.rl-left { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #8A3A12 !important; }
.rl-sample { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(255, 246, 230, .16); font-style: normal; font-size: .6rem; color: #FFF6E6; }
.rl-li { align-items: flex-start; } .rl-li-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rl-details { min-height: 32px; padding: 0 10px !important; font-size: .7rem !important; background: none !important; color: #FFF6E6 !important; border: 1px solid rgba(255, 246, 230, .35) !important; }
/* =========================================================
Live auction viewer — refined hierarchy
========================================================= */
.rl-shade { background: linear-gradient(180deg, rgba(20, 10, 5, .45) 0%, rgba(20, 10, 5, 0) 20%, rgba(20, 10, 5, 0) 55%, rgba(20, 10, 5, .78) 100%) !important; }
.rl-rail { top: auto !important; right: 12px; gap: 12px; transition: bottom .2s; }
.rl-rail button svg { width: 20px !important; height: 20px !important; padding: 12px !important; background: rgba(20, 10, 5, .42) !important; }
@media (hover: hover) and (pointer: fine) { .rl-rail button:hover svg { background: rgba(20, 10, 5, .62) !important; } }
.rl-rail small { font-size: .62rem; font-weight: 700; }
.rl-bottom { right: 0 !important; gap: 6px !important; padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
.rl-bottom > .rl-title, .rl-bottom > .rl-cat, .rl-bottom > .rl-caption, .rl-bottom > .rl-play, .rl-bottom > .rl-chatlite { margin-right: 60px; }
.rl-title { font-size: 1.02rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rl-caption { display: inline-flex !important; justify-self: start; max-width: calc(100% - 60px); padding: 5px 11px !important; font-size: .74rem !important; font-weight: 700; border-radius: 999px !important; background: rgba(20, 10, 5, .5) !important; }
.rl-caption svg { color: #F6D58A; flex-shrink: 0; }
.rl-lot { display: grid !important; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px !important; padding: 12px 12px 10px !important; margin-top: 8px; border-radius: 16px !important; background: linear-gradient(135deg, #FFF8EA, #F5E3BE) !important; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .8) !important; }
.rl-lot .rl-th { width: 52px; height: 52px; border-radius: 12px; }
.rl-lot-b { display: grid; gap: 1px; min-width: 0; }
.rl-lot-b > b { font-size: .84rem !important; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-lot-bid { display: flex; align-items: baseline; gap: 6px; } .rl-lot-bid em { font-style: normal; font-size: 1.12rem; font-weight: 800; color: var(--primary); } .rl-lot-bid small { font-size: .66rem; color: var(--muted); }
.rl-lot-meta { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: .66rem; color: var(--ink-2); }
.rl-lot-meta svg { color: #8A3A12; }
.rl-bid { white-space: nowrap; min-height: 40px; padding: 0 16px !important; border-radius: 999px !important; font-size: .8rem !important; }
.rl-lot-k { top: -10px !important; }
.rl-prod { margin-top: 2px; }
@media (max-width: 360px) { .rl-lot { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px !important; } .rl-lot .rl-th { width: 44px; height: 44px; } .rl-bid { padding: 0 12px !important; } .rl-lot-bid em { font-size: 1rem; } }
/* =========================================================
Cultural Places — real map, heading, location
========================================================= */
.cp-head { padding: 2px 18px 8px; } .cp-head h1 { margin: 0; font-size: 1.15rem; color: var(--ink); } .cp-head p { margin: 2px 0 0; font-size: .78rem; color: var(--ink-2); }
.lf-map { position: absolute; inset: 0; z-index: 0; background: #EFE6D6; }
.map-wrap.map2 { position: relative; overflow: hidden; }
.lf-loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; margin: 0; color: var(--muted); font-size: .8rem; }
.lf-fail { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 20px; text-align: center; color: var(--ink-2); }
.lf-fail b { color: var(--ink); } .lf-fail small { max-width: 28ch; }
.lf-note { position: absolute; left: 12px; bottom: 10px; z-index: 450; margin: 0; padding: 4px 9px; border-radius: 999px; background: rgba(255, 252, 247, .92); font-size: .64rem; color: var(--ink-2); box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .3); }
.map-wrap.map2 .map-ctrls, .map-wrap.map2 .map-count { z-index: 450; }
.map-wrap.map2 .place-pop { z-index: 460; }
.lf-pin { background: none; border: 0; }
.lf-pin span { display: grid; place-items: center; width: 30px; height: 30px; margin: 2px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--c); box-shadow: 0 0 0 2px #fff, 0 6px 12px -4px rgba(0, 0, 0, .45); transition: transform .2s; }
.lf-pin span svg { transform: rotate(45deg); color: #fff; }
.lf-pin.on span { transform: rotate(-45deg) scale(1.18); box-shadow: 0 0 0 3px #F6D58A, 0 8px 16px -4px rgba(0, 0, 0, .5); }
.leaflet-container { font: inherit; background: #EFE6D6; } .leaflet-control-zoom a { color: var(--primary) !important; } .leaflet-control-attribution { font-size: .58rem !important; }
.cp-loc { margin: 18px 18px 8px; display: grid; gap: 8px; } .cp-loc h2 { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 1rem; color: var(--ink); }
.lf-mini { position: relative; height: 180px; border-radius: 14px; overflow: hidden; background: #EFE6D6; } .cp-loc .lf-note { position: static; justify-self: start; }
.cp-loc .btn { justify-self: start; }
.cp-toggle { display: grid; grid-template-columns: 1fr 1fr; margin: 8px 18px 2px; } .cp-toggle button { justify-content: center; gap: 5px; }
/* Request Customized — four-step form, confirmation, history */
.cr-prod, .cr-sum { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #FFFCF7; }
.cr-prod-img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 12px; } .cr-new { display: grid; place-items: center; background: #F6EBDA; color: var(--primary); }
.cr-prod .grow, .cr-sum .grow { display: grid; gap: 1px; min-width: 0; } .cr-prod small, .cr-sum small { font-size: .7rem; color: var(--accent-ink); font-weight: 700; } .cr-prod b, .cr-sum b { font-size: .92rem; color: var(--ink); } .cr-prod span span { font-size: .76rem; color: var(--muted); }
.cr-mode { display: grid; gap: 8px; }
.cr-lead { margin: 0 0 8px; font-size: .82rem; color: var(--ink-2); }
.cr-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cr-pick-i { display: grid; gap: 4px; padding: 6px; border: 1.5px solid var(--line); border-radius: 12px; background: #FFFCF7; text-align: center; cursor: pointer; }
.cr-pick-i.on { border-color: var(--primary); background: #FBF2E4; } .cr-pick-img { aspect-ratio: 1; border-radius: 8px; } .cr-pick-i small { font-size: .66rem; line-height: 1.2; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cr-pick-new { place-content: center; justify-items: center; color: var(--primary); }
.cr-restored, .cr-sent { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; background: #E9F3EC; color: #2F6B45; font-size: .8rem; }
.cr-sent span { display: grid; gap: 2px; } .cr-sent b { font-size: .9rem; } .cr-sent small { font-size: .74rem; color: var(--ink-2); }
.cr-draft-link { display: block; margin: 10px auto 0; font-size: .76rem; color: var(--muted); }
.cr-exp { display: flex; gap: 6px; align-items: center; width: 100%; margin: 0; font-size: .78rem; color: #8A3A12; }
.cr-hist { margin-top: 8px; font-size: .76rem; color: var(--ink-2); } .cr-hist summary { cursor: pointer; font-weight: 700; color: var(--primary); } .cr-hist p { margin: 4px 0; }
.cr-off { display: flex; gap: 6px; align-items: center; margin: 14px 18px; font-size: .8rem; color: var(--muted); }
.req { color: #A3402A; }
/* LOCARTA usability refinements: stable module navigation and Related Products CTA */
.screen-enter { animation: none !important; }
.screen-enter > * > *,
.screen-enter > * > :is(.sec-head, .rail, section, nav, .pillars, .h-search, header),
.screen-enter > * > :nth-child(n) { animation: none !important; transform: none; }
.tabbar .tb-btn.pop .tb-ico,
.tabbar .tb-btn.pop .tb-ico .ic,
.tabbar .tb-btn.pop .tb-label,
.tabbar .tb-btn.pop::after,
.tabbar .tb-btn.pop .tb-ico::before { animation: none !important; }
.cn-more-wrap { display: flex; justify-content: center; padding: 18px 0 4px; margin: 0; }
.cn-more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1px solid #DCC6A8; border-radius: 999px; background: #FBF5EB; color: var(--primary, #5A2810); font-weight: 700; cursor: pointer; }
.cn-more:focus-visible { outline: 2px solid var(--accent, #C8892C); outline-offset: 3px; }
.cn-related { padding-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .screen-enter, .screen-enter *, .tabbar .tb-btn.pop * { animation: none !important; transition: none !important; } }
.tabbar .tb-btn[aria-current="page"] .tb-ico,
.tabbar .tb-btn[aria-current="page"] .tb-label,
.tabbar .tb-btn:hover .tb-ico,
.tabbar .tb-btn:active .tb-ico { transform: none !important; }
/* Transaction and checkout refinement: clear hierarchy, compact rows, direct labels */
.co-heading { padding: 2px 0 14px; border-bottom: 1px solid var(--line, #E8DED1); margin-bottom: 16px; }
.co-heading h2 { margin: 0 36px 5px 0; }
.co-heading .sub { margin: 0; }
.co-form { display: flex; flex-direction: column; gap: 14px; }
.co-group, .co-section { display: block; padding: 14px; border: 1px solid var(--line, #E8DED1); border-radius: 12px; background: var(--card, #FFFCF7); }
.co-group h3, .co-section h3 { margin: 0 0 8px; color: var(--ink, #2A1A12); font-size: .94rem; font-family: inherit; font-weight: 750; }
.co-group .opt { padding: 9px 0; border-bottom: 1px solid var(--line, #E8DED1); }
.co-group .opt:last-child { border-bottom: 0; }
.co-fulfillment { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.co-fulfillment h3 { margin: 0; }
.co-total-row { display: flex; align-items: baseline; gap: 10px; margin-left: auto; color: var(--muted, #817468); font-size: .88rem; }
.co-total-row strong { color: var(--primary, #5A2810); font-size: 1.18rem; }
.co-label { margin: 2px 0 0; font-size: .9rem; font-weight: 750; color: var(--ink, #2A1A12); }
.co-form .field { margin-bottom: 0; }
.co-form .radio-row { margin: 0; border-radius: 10px; }
.co-form .addr-list { display: grid; gap: 8px; }
.co-form .addr-card { padding: 12px; border-radius: 10px; }
.co-form .co-policy { margin-top: 2px; }
.co-demo-note { margin: 0; color: var(--muted, #817468); font-size: .78rem; line-height: 1.45; }
.co-submit { width: 100%; min-height: 48px; font-weight: 750; }
.co-form .err:not([hidden]) { margin: 0; padding: 10px 12px; border-radius: 8px; }
@media (max-width: 480px) {
.co-group, .co-section { padding: 12px; }
.co-fulfillment { align-items: flex-start; flex-direction: column; }
.co-total-row { margin-left: 0; width: 100%; justify-content: space-between; }
}
/* ---------- Auth and onboarding polish: refined LOCARTA flow ---------- */
.launch { background: radial-gradient(ellipse at 50% 38%, #FFFDF8 0%, #FAF3E6 58%, #EDE0CE 100%); }
.launch.out { opacity: 0; transform: none; }
.l-stage { width: 158px; height: 158px; }
.l-mark { height: 108px; }
.l-swing { animation: none !important; }
.l-ring { border-color: rgba(190, 139, 62, .65); border-width: 1.5px; }
.l-word { height: 38px; margin-top: 12px; }
.l-tag { margin-top: 14px; letter-spacing: .025em; color: #806A56; }
.l-bar { width: 116px; margin-left: -58px; bottom: calc(var(--safe-bottom) + 54px); height: 3px; }
@media (prefers-reduced-motion: no-preference) {
.l-mark { animation: locarta-mark-arrive .72s cubic-bezier(.2,.8,.2,1) .12s both; }
.l-ring { animation: l-ring 1.25s ease-out .55s both; }
.l-ring-2 { animation-delay: .78s; }
.l-word { animation: l-wipe .58s cubic-bezier(.2,.7,.2,1) .62s both; }
.l-tag { animation: l-up .45s ease-out 1s both; }
.l-bar span { animation-duration: 1.65s; }
}
@keyframes locarta-mark-arrive { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
.onb { background: linear-gradient(180deg, #FBF7F0 0%, #F8F0E4 100%); }
.onb-media { box-shadow: 0 8px 24px -18px rgba(42,26,18,.35); }
.onb-badge { width: 76px; height: 76px; border-radius: 23px; box-shadow: 0 8px 22px -16px rgba(42,26,18,.42), 0 0 0 1px rgba(200,149,71,.2); }
.onb-badge img { height: 48px; }
.onb-badge-row { margin-bottom: 13px; }
.onb-kicker { letter-spacing: .16em; }
.onb-copy { max-width: 32ch; line-height: 1.55; }
.onb-foot { padding-top: 12px; }
.onb-next { min-width: 150px; height: 50px; box-shadow: 0 7px 16px -12px rgba(107,45,27,.55); }
.onb .skip { background: rgba(255,252,246,.92); border: 1px solid rgba(138,74,28,.16); color: #5A3826; backdrop-filter: blur(8px); }
.auth-page { background: #FAF3E6; }
.auth-scroll { padding: 22px 22px 32px; }
.auth-card { width: 100%; max-width: 460px; margin: 0 auto; padding: 22px 20px 24px; border: 1px solid rgba(138,74,28,.10); border-radius: 22px; background: rgba(255,252,246,.94); box-shadow: 0 12px 34px -28px rgba(74,36,20,.34); }
.auth-brand { gap: 0; }
.auth-mark { height: 46px; }
.auth-word { height: 29px; margin-top: 3px; }
.auth-brand p { margin-top: 8px; max-width: 32ch; }
.auth-tabs { margin-top: 20px; }
.auth-roles { gap: 10px; margin-top: 14px; }
.arole-card { min-height: 116px; padding: 12px; border-radius: 13px; box-shadow: none; }
.arole input:checked + .arole-card { box-shadow: 0 5px 14px -12px rgba(138,74,28,.4); }
.af { gap: 5px; margin-top: 12px; }
.af-label { font-size: .86rem; }
.af-box input { height: 46px; border-radius: 10px; background: #FFFDF9; }
.auth-submit { max-width: none; height: 48px; margin-top: 18px; border-radius: 12px; box-shadow: none; }
.auth-switch { margin-top: 16px; }
.auth-note { max-width: 42ch; margin: 14px auto 0; text-align: center; font-size: .74rem; line-height: 1.45; color: #887565; }
.auth-demo { margin-top: 14px; }
@media (max-width: 380px) {
.auth-scroll { padding-inline: 14px; }
.auth-card { padding: 18px 14px 20px; border-radius: 18px; }
.arole-card { min-height: 108px; padding: 10px; }
.onb-text { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.l-mark, .l-word, .l-tag, .l-ring, .l-bar span, .onb-slide .onb-text > *, .onb-slide .onb-badge { animation: none !important; }
}
/* LOCARTA refinement: compact authentication layout and consistent role-card backgrounds */
.auth-card {
padding: 20px 22px 18px;
}
.auth-card .auth-brand { margin-bottom: 10px; }
.auth-card .auth-brand p { margin-top: 3px; }
.auth-card .auth-mark { max-height: 34px; }
.auth-card .auth-word { max-width: 124px; }
.auth-card .auth-tabs { margin-bottom: 12px; }
.auth-card form { gap: 10px; }
.auth-card .auth-h { margin-top: 6px; font-size: 1.2rem; line-height: 1.25; }
.auth-card .auth-h + p { margin-top: 3px; }
.auth-card .auth-role { margin-top: 6px; }
.auth-card .af-label { margin-bottom: 4px; font-size: .8rem; }
.auth-card .af-box { min-height: 42px; }
.auth-card .af-box input { min-height: 40px; height: 40px; font-size: .9rem; }
.auth-card .auth-forgot { margin-top: -4px !important; }
.auth-card .auth-submit { height: 44px; margin-top: 2px !important; }
.auth-card .auth-switch { margin-top: 8px; font-size: .82rem; }
.arole-card,
.arole input:checked + .arole-card,
.arole input:hover + .arole-card,
.arole input:focus-visible + .arole-card {
background-color: #FFFFFF !important;
background-image: none !important;
}
.arole-card { border-color: #EADCC8; }
.arole input:checked + .arole-card { border-color: #8A4A1C; }
@media (max-height: 760px) {
.auth-card { padding-top: 14px; padding-bottom: 12px; }
.auth-card .auth-brand { margin-bottom: 6px; }
.auth-card .auth-mark { max-height: 28px; }
.auth-card .auth-word { max-width: 108px; }
.auth-card .auth-tabs { margin-bottom: 8px; }
.auth-card form { gap: 8px; }
.auth-card .auth-submit { height: 42px; }
}
@media (max-width: 520px) {
.auth-card { padding: 18px 16px 16px; }
}
/* LOCARTA signup reference match: compact, zoomed-out signup layout */
@media (max-width: 600px) {
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) {
padding: 12px 16px 10px !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-brand {
margin-bottom: 4px !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-mark {
height: 29px !important;
max-height: 29px !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-word {
height: 23px !important;
max-width: 112px !important;
margin-top: 1px !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-hero {
width: 70px !important;
height: 70px !important;
margin-top: 2px !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-pill {
margin-top: -7px !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-change {
margin-top: 1px !important;
font-size: .72rem !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-h {
margin-top: 4px !important;
font-size: 1.12rem !important;
line-height: 1.2 !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-sub {
margin-top: 2px !important;
font-size: .76rem !important;
line-height: 1.3 !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-tabs {
margin: 4px 0 7px !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-tabs [role="tab"] {
min-height: 34px !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) form {
gap: 6px !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .af-label {
margin-bottom: 2px !important;
font-size: .76rem !important;
line-height: 1.15 !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .af-box,
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .af-box input {
height: 38px !important;
min-height: 38px !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-consent {
margin-top: 2px !important;
font-size: .69rem !important;
line-height: 1.25 !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-submit {
height: 40px !important;
min-height: 40px !important;
margin-top: 1px !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-switch {
margin-top: 4px !important;
font-size: .76rem !important;
}
body:not(.desk) .auth-page:has(.auth-card [name="confirm"]) .auth-scroll > .auth-note,
body:not(.desk) .auth-page:has(.auth-card [name="confirm"]) .auth-scroll > .auth-demo {
margin-top: 5px !important;
font-size: .65rem !important;
line-height: 1.25 !important;
}
}
@media (max-height: 760px) {
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-hero {
width: 60px !important;
height: 60px !important;
}
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) .auth-brand { margin-bottom: 2px !important; }
body:not(.desk) .auth-page .auth-card:has([name="confirm"]) form { gap: 5px !important; }
}
/* =========================================================
LOCARTA Community: edge-to-edge editorial posts
Keep media immersive while preserving LOCARTA story styling.
========================================================= */
.sx.sx2 {
box-sizing: border-box;
width: 100%;
margin: 0 0 18px;
padding: 0 0 12px;
border: 0;
border-radius: 0;
border-bottom: 1px solid #E8D8C3;
background: transparent;
box-shadow: none;
overflow: visible;
}
.sx2-kicker,
.sx2-head,
.sx2-badges,
.sx2-title,
.sx2-text,
.sx2-rel,
.sx2-actions,
.sx2-eng {
margin-left: 14px;
margin-right: 14px;
}
.sx2-kicker { padding-top: 12px; }
.sx2-badges { margin-left: 68px; }
.sx2-imgs {
width: 100%;
margin: 12px 0 0;
gap: 3px;
overflow: hidden;
}
.sx2-imgs .pi {
border-radius: 0 !important;
}
.sx2-rel { width: calc(100% - 28px); box-sizing: border-box; }
.sx2-actions { gap: 8px; }
.sx2-main, .sx2-sec { border-radius: 12px; }
.sx2-eng { margin-top: 8px; padding-top: 2px; }
.sx.sx2 + .sx.sx2 { margin-top: 0; }
/* On mobile, break the post out of the page's standard side padding.
Other Community sections retain their normal page gutters. */
@media (max-width: 559px) {
.sx.sx2 {
width: calc(100% + 36px);
margin-left: -18px;
margin-right: -18px;
}
.sx2-kicker { margin-top: 0; }
}
/* Desktop/tablet posts fill the existing feed column only. */
@media (min-width: 560px) {
.sx.sx2 { width: 100%; margin-left: 0; margin-right: 0; }
.sx2-imgs.pg-1 .pi { aspect-ratio: 4 / 3; }
}
/* Community: home-style search and full-bleed media sections */
.comm.sxc .c-home-search {
display: flex;
width: 100%;
box-sizing: border-box;
margin: 12px 0 14px;
}
.comm.sxc .c-home-search input { min-width: 0; }
@media (max-width: 559px) {
/* Keep the header controls padded, while hero media reaches the screen edges. */
.comm.sxc .sxc-hero {
width: calc(100% + 36px) !important;
margin-left: -18px !important;
margin-right: -18px !important;
border-radius: 0 !important;
}
.comm.sxc .fst,
.comm.sxc .cm-videos {
width: calc(100% + 36px);
margin-left: -18px !important;
margin-right: -18px !important;
}
.comm.sxc .fst {
padding-left: 18px;
padding-right: 18px;
box-sizing: border-box;
}
.comm.sxc .cm-videos > .sec-head { padding: 0 18px; box-sizing: border-box; }
.comm.sxc .cm-videos .lv-rail {
padding: 0 18px 4px;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}
.comm.sxc .cm-videos .lv-rail .lvr-card { flex-basis: 78%; max-width: 300px; }
.comm.sxc .sxc-tabs-wrap { margin-left: -18px !important; margin-right: -18px !important; }
}
@media (min-width: 560px) {
.comm.sxc .sxc-hero { width: 100%; }
}
/* LOCARTA Community: remove category tabs and make hero, stories and creator video rail edge-to-edge */
.comm.sxc .sxc-tabs-wrap { display: none !important; }
@media (max-width: 767px) {
.comm.sxc .sxc-hero,
.comm.sxc .fst,
.comm.sxc .cm-videos {
width: calc(100% + 36px) !important;
max-width: none !important;
margin-left: -18px !important;
margin-right: -18px !important;
box-sizing: border-box !important;
}
.comm.sxc .sxc-hero {
border-radius: 0 !important;
margin-top: 8px !important;
}
.comm.sxc .fst {
padding-left: 12px !important;
padding-right: 12px !important;
gap: 10px !important;
overflow-x: auto !important;
scroll-padding-left: 12px !important;
}
.comm.sxc .cm-videos {
padding-left: 12px !important;
padding-right: 12px !important;
overflow: hidden !important;
}
.comm.sxc .cm-videos .sec-head { padding-left: 6px !important; padding-right: 6px !important; }
.comm.sxc .cm-videos .lv-rail {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 6px 8px !important;
box-sizing: border-box !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory;
}
}
/* LOCARTA Home: extend media and discovery rails to the mobile screen edges,
matching the Community edge-to-edge treatment while keeping the page header padded. */
@media (max-width: 767px) {
.r3-home > .rail,
.r3-home > .lotc-list,
.r3-home > .lots-empty,
.r3-home .home-gold-intro > .ob-invite {
width: calc(100% + 36px) !important;
max-width: none !important;
margin-left: -18px !important;
margin-right: -18px !important;
box-sizing: border-box !important;
}
.r3-home > .rail {
padding-left: 12px !important;
padding-right: 12px !important;
scroll-padding-inline: 12px !important;
gap: 12px;
}
.r3-home > .rail > *:first-child { scroll-margin-left: 0; }
.r3-home > .rail > *:last-child { margin-right: 0; }
.r3-home > .lotc-list { padding-left: 12px; padding-right: 12px; }
.r3-home > .lots-empty,
.r3-home .home-gold-intro > .ob-invite { border-radius: 0 !important; }
.r3-home > .hero-greet,
.r3-home > .hg,
.r3-home > [class*="hg-"] {
width: 100%;
box-sizing: border-box;
}
}
@media (min-width: 768px) {
.r3-home > .rail,
.r3-home > .lotc-list,
.r3-home > .lots-empty,
.r3-home .home-gold-intro > .ob-invite {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
/* FIX: Tourist Home hero uses .r3-hero (not .hero-greet/.hg).
Break it out of the .pad horizontal gutters on mobile so the photo reaches
both screen edges; keep the desktop content-column layout unchanged. */
@media (max-width: 767px) {
body:not(.desk) .r3-home .home-gold-intro > .r3-hero {
width: calc(100% + 36px) !important;
max-width: none !important;
margin-left: -18px !important;
margin-right: -18px !important;
border-radius: 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
}
@media (min-width: 768px) {
body:not(.desk) .r3-home .home-gold-intro > .r3-hero {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
/* Final Home layout correction: keep the cultural hero edge-to-edge,
but keep Loka's welcome message inset like the other content cards. */
@media (max-width: 767px) {
body:not(.desk) .r3-home .home-gold-intro > .r3-hero {
width: calc(100% + 36px) !important;
max-width: none !important;
margin-left: -18px !important;
margin-right: -18px !important;
border-radius: 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
body:not(.desk) .r3-home .home-gold-intro > .ob-hello {
width: calc(100% - 36px) !important;
max-width: none !important;
margin: 12px 18px 0 !important;
border-radius: 16px !important;
box-sizing: border-box !important;
}
}
@media (min-width: 768px) {
body:not(.desk) .r3-home .home-gold-intro > .r3-hero {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: initial;
}
body:not(.desk) .r3-home .home-gold-intro > .ob-hello {
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =========================================================
LOCARTA profile refinement — balanced header + cultural medallions
========================================================= */
.me-page > .pf-cover {
margin: 2px 0 0;
border-radius: 16px;
box-shadow: 0 8px 20px -16px rgba(54, 30, 16, .5);
}
.me-page .pf-cover-btn { padding: 6px 10px; font-size: .7rem; box-shadow: 0 3px 10px -7px rgba(43, 26, 16, .45); }
.me-page .pf-head {
display: flex;
align-items: flex-end;
gap: 12px;
margin-top: -30px;
padding: 0 8px;
}
.me-page .pf-head .me-av {
position: relative;
z-index: 2;
flex: 0 0 88px;
width: 88px !important;
height: 88px !important;
border: 3px solid var(--bg);
box-shadow: 0 0 0 1px #E8C987, 0 7px 16px -10px rgba(60, 30, 14, .55) !important;
}
.me-page .pf-head .me-stats { flex: 1; min-width: 0; padding: 0 0 5px; }
.me-page .me-name { margin: 12px 0 1px; font-size: 1.34rem; line-height: 1.18; letter-spacing: -.02em; }
.me-page .me-handle { margin-top: 2px; font-size: .82rem; }
.me-page .lb-profile { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.me-page .lb-profile > * { margin: 0 !important; padding: 4px 8px !important; border-radius: 9px !important; font-size: .68rem !important; line-height: 1.2; }
.me-page .me-loc { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: .78rem; color: var(--muted); }
.me-page .me-bio { margin-top: 9px; padding: 5px 10px; border-left: 2px solid #D4A052; border-radius: 0 10px 10px 0; background: linear-gradient(90deg, #F8EEDC, rgba(248, 238, 220, .35)); font-size: .83rem; line-height: 1.4; }
.me-page .two-btns { gap: 9px; margin-top: 12px; }
.me-page .two-btns .btn { min-height: 42px; height: 42px; justify-content: center; gap: 6px; padding-inline: 10px; font-size: .79rem; }
.me-page .two-btns .btn-ghost { border-color: #E8D9C5; background: rgba(255, 252, 247, .7); }
.me-page .pf-sec { margin-top: 22px; }
.me-page .pf-sec-h { margin-bottom: 13px; }
.me-page .pf-sec-h h2 { font-size: 1.02rem; letter-spacing: -.01em; }
.me-page .pf-more { white-space: nowrap; }
/* Cultural interests are illustrated medallions, not plain icon buttons. */
.me-page .pfi-grid { gap: 13px 7px; }
.me-page .pfi { gap: 7px; min-width: 0; }
.me-page .pfi-ic {
isolation: isolate;
width: 60px;
height: 60px;
border: 1px solid #E3C58B;
border-radius: 50%;
background: radial-gradient(circle at 32% 25%, #FFF9E9 0, #F7E7C5 54%, #EFD7A7 100%);
color: #75401E;
box-shadow: inset 0 0 0 3px rgba(255, 252, 247, .72), 0 4px 10px -8px rgba(74, 43, 20, .6);
transition: transform .15s ease, box-shadow .15s ease;
}
.me-page .pfi-ic::before {
content: "";
position: absolute;
inset: 6px;
z-index: -1;
border: 1px dashed rgba(147, 91, 39, .35);
border-radius: 50%;
pointer-events: none;
}
.me-page .pfi-ic > .ic { width: 22px !important; height: 22px !important; stroke-width: 1.8; }
.me-page .pfi:nth-child(4n + 1) .pfi-ic { background: radial-gradient(circle at 30% 25%, #FFF8E5, #EED6A2 78%); }
.me-page .pfi:nth-child(4n + 2) .pfi-ic { background: radial-gradient(circle at 30% 25%, #FFF9EE, #E6DCC1 78%); color: #6D5937; }
.me-page .pfi:nth-child(4n + 3) .pfi-ic { background: radial-gradient(circle at 30% 25%, #FFF4E8, #EFCDB4 78%); color: #8A4D2B; }
.me-page .pfi:nth-child(4n) .pfi-ic { background: radial-gradient(circle at 30% 25%, #FFF9E6, #E8CFA0 78%); color: #79502C; }
.me-page .pfi.on .pfi-ic { border: 1px solid #C9913B; box-shadow: inset 0 0 0 3px rgba(255, 252, 247, .78), 0 5px 12px -8px rgba(92, 48, 19, .7); }
.me-page .pfi-ic i { right: -1px; bottom: -1px; width: 17px; height: 17px; border: 2px solid var(--bg); background: #A86B24; box-shadow: 0 1px 3px rgba(43, 26, 16, .16); }
.me-page .pfi-l { max-width: 86px; font-size: .72rem; line-height: 1.25; font-weight: 650; color: #624936; }
.me-page .pfi:not(.on) .pfi-l { color: #8C7967; }
.me-page .pfi:active .pfi-ic { transform: scale(.97); }
@media (max-width: 370px) {
.me-page .pf-head .me-av { flex-basis: 78px; width: 78px !important; height: 78px !important; }
.me-page .pf-head { gap: 8px; padding-inline: 4px; }
.me-page .pfi-ic { width: 52px; height: 52px; }
.me-page .pfi-ic > .ic { width: 20px !important; height: 20px !important; }
.me-page .two-btns .btn { font-size: .74rem; padding-inline: 7px; }
}
/* LOCARTA ICON SYSTEM — warm illustrated icon language across the mobile app */
.ic { stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
button .ic, a .ic { transition: transform .16s ease, color .16s ease; }
.icon-btn { isolation: isolate; border: 1px solid rgba(218, 193, 155, .42); background: linear-gradient(145deg, #FFFCF6, #F4E7D0); color: #70401F; box-shadow: 0 2px 7px rgba(83, 52, 25, .06), inset 0 1px 0 rgba(255,255,255,.9); }
.icon-btn:hover { background: linear-gradient(145deg, #FFF9E9, #EED5A7); border-color: #D7B16C; }
.icon-btn:active .ic { transform: scale(.9); }
.icon-btn .ic { width: 20px; height: 20px; stroke-width: 1.9; }
.tabbar button .ic { width: 22px; height: 22px; stroke-width: 1.85; }
.tabbar button[aria-current="page"] .ic { color: #87501F; filter: drop-shadow(0 1px 1px rgba(113,68,28,.12)); }
.cat span.ico { border: 1px solid rgba(212, 172, 102, .55); background: radial-gradient(circle at 30% 22%, #FFF9E8, #E8C98E); box-shadow: inset 0 0 0 3px rgba(255,255,255,.55), 0 4px 10px rgba(94,58,25,.08); }
.cat span.ico .ic { color: #78431F; width: 24px; height: 24px; stroke-width: 1.8; }
.role span .ic, .onb-badge .ic { filter: drop-shadow(0 1px 1px rgba(79,47,21,.12)); }
.empty .ic { box-sizing: content-box; padding: 13px; border: 1px solid #E8D1A5; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #FFF9E8, #F0DDB8); color: #805020; }
.rating .ic, .ic-fill { fill: currentColor; }
button:focus-visible .ic, a:focus-visible .ic { outline: none; }
@media (prefers-reduced-motion: reduce) { .ic, button .ic, a .ic { transition: none !important; } }
/* Refined cultural shortcuts and Explore category icons */
.home2 .cat2 { gap: 8px; }
.home2 .cat2-ico { width: 58px; height: 58px; border-radius: 19px; border: 1px solid rgba(255,255,255,.32); box-shadow: 0 7px 16px -10px rgba(80,43,20,.6), inset 0 1px 0 rgba(255,255,255,.22); transition: transform .18s ease, box-shadow .18s ease; }
.home2 .cat2-ico .ic { width: 27px; height: 27px; stroke-width: 1.8; }
.home2 .cat2:active .cat2-ico { transform: scale(.94); }
.explore-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; }
.explore-chip .ic { width: 15px; height: 15px; color: #98663a; stroke-width: 1.9; }
.explore-chip[aria-pressed="true"] .ic { color: currentColor; }
/* LOCARTA Home refinement: compact, consistent feature cards */
.r3-home .home-feature-icon { width:40px; height:40px; display:grid; place-items:center; border:1px solid #E6D2AE; border-radius:50%; background:linear-gradient(145deg,#F8EBD3,#EBD5A9); color:#69421F; }
.r3-home .home-feature-icon svg { width:22px; height:22px; stroke-width:1.8; }
.r3-home .home-feature-cards > button:hover,.r3-home .home-feature-cards > button:focus-visible { border-color:#D1B274; box-shadow:0 7px 18px -13px rgba(65,39,19,.55); background:#FFF9EF; outline:none; }
.r3-home .home-gold-intro > .ob-hello { position:relative; gap:9px; padding:10px 38px 10px 11px; min-height:0; border:1px solid #E8DCC9; background:linear-gradient(120deg,#FBF3E5,#FFFCF7); box-shadow:0 6px 16px -14px rgba(65,39,19,.5); }
.r3-home .home-gold-intro > .ob-hello .ob-hello-art { width:36px; max-width:36px; margin-top:0; }
.r3-home .home-gold-intro > .ob-hello p { margin:0; font-size:.78rem; line-height:1.4; }
.r3-home .home-gold-intro > .ob-hello > .icon-btn { position:absolute; top:7px; right:7px; width:25px; height:25px; min-width:25px; }
.r3-home .home-gold-intro > .ob-invite { min-height:0; padding:10px 12px; border:1px solid #E8DCC9; border-radius:15px; background:#FFFCF7; }
.r3-home .home-gold-intro > .ob-invite small { line-height:1.35; }
@media (max-width:360px) {
}
@media (prefers-reduced-motion:reduce) { .r3-home .home-feature-cards > button { transition:none; } }
/* VERIFIED FIX: mobile tourist home hero height + Loka card alignment */
@media (max-width: 767px) {
body:not(.desk) .r3-home .home-gold-intro > .r3-hero {
height: clamp(250px, 68vw, 270px) !important; /* reference: increased height ≈ 250–270px */
min-height: 250px !important;
overflow: hidden !important;
}
body:not(.desk) .r3-home .home-gold-intro > .ob-hello {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
margin: 12px 0 0 !important;
box-sizing: border-box !important;
}
body:not(.desk) .r3-home .home-gold-intro > .ob-hello + .home-feature-cards,
body:not(.desk) .r3-home .home-feature-cards {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (min-width: 768px) {
body:not(.desk) .r3-home .home-gold-intro > .r3-hero { height: 230px; min-height: 230px; }
}
/* Product details: the page ends just below Related Products / See More (the screen already stops above the bottom navigation) */
body:not(.desk) .screen > div:has(> .d-body) { padding-bottom: 8px !important; }
body:not(.desk) .screen > div:has(> .d-body) > .d-body { padding-bottom: 12px !important; }
/* snapping rows keep their 18px gutter (otherwise snapping pulls the first card to the screen edge) */
.cn-rail { scroll-padding-inline: 18px; }
/* =========================================================
Tourist Home — matched to the annotated reference (v89)
========================================================= */
/* 1. header: compact; logo + stacked wordmark/tagline left, round icon buttons right */
.r3-home .h-top { align-items: center; min-height: 52px; gap: 8px; }
.r3-home .brand-tag { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
.r3-home .brand-tag .mark { width: 38px; height: auto; }
.r3-home .brand-txt { display: grid; gap: 2px; justify-items: start; }
.r3-home .brand-txt .word { width: 118px; height: auto; } .r3-home .brand-txt .tagline { width: 84px; height: auto; opacity: .9; }
.r3-home .h-top :is(.h-bell, .h-live) { width: 42px; height: 42px; border-radius: 50%; border: 1px solid #EADCC6; background: #FFF8EC; box-shadow: 0 4px 10px -8px rgba(58, 26, 9, .5); }
.r3-home .h-avatar .avatar { width: 42px; height: 42px; }
/* search: full placeholder, clear filter button, comfortable touch target */
.r3-home .h-search { min-height: 50px; border-radius: 999px; }
.r3-home .h-search input { font-size: .88rem; text-overflow: ellipsis; }
.r3-home .h-search .h-filter { width: 40px; height: 40px; }
/* 2. hero: taller, text left on a soft cream fade, photo right, pill CTA bottom-left, dots bottom-right */
.r3-home .r3-hero { height: clamp(250px, 68vw, 272px) !important; min-height: 0 !important; }
.r3-home .r3-slide .pic, .r3-home .r3-slide img { object-position: 72% 40% !important; }
.r3-home .r3-paper { background: linear-gradient(90deg, rgba(251, 244, 230, .97) 0%, rgba(251, 244, 230, .88) 36%, rgba(251, 244, 230, .28) 58%, rgba(251, 244, 230, 0) 72%) !important; }
.r3-home .r3-copy { top: 22% !important; bottom: auto !important; max-width: 64% !important; }
.r3-home .r3-hello { font-size: 1.3rem !important; line-height: 1.2 !important; color: var(--ink) !important; }
.r3-home .r3-sub { font-size: .8rem !important; line-height: 1.45 !important; color: var(--ink-2) !important; }
.r3-cta { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 86px); min-height: 40px; padding: 0 6px 0 16px; border: 0; border-radius: 999px; background: rgba(255, 252, 247, .96); box-shadow: 0 8px 18px -10px rgba(58, 26, 9, .6); color: var(--ink); cursor: pointer; text-align: left; }
.r3-cta .r3-caption { position: static !important; margin: 0 !important; font-size: .76rem !important; font-weight: 800; color: var(--ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: none !important; }
.r3-cta-ic { flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #FFF6E6; transition: transform .2s; }
@media (hover: hover) and (pointer: fine) { .r3-cta:hover .r3-cta-ic { transform: translateX(2px); } }
.r3-cta:active { transform: scale(.98); }
.r3-home .r3-dots { left: auto !important; right: 16px !important; bottom: 26px !important; }
.r3-home .r3-go { top: 16px !important; right: 16px !important; }
/* 3. Loka welcome card: same margins as the feature cards, compact, small mascot, close button right */
.r3-home .ob-hello { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 0 !important; padding: 14px 44px 14px 14px !important; border: 1px solid #EADCC6; border-radius: 16px; background: linear-gradient(135deg, #FFFCF7, #FBF1E1); box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .55); }
.r3-home .ob-hello .ob-hello-art { flex: 0 0 48px; width: 48px !important; height: 48px !important; }
.r3-home .ob-hello p { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--ink); }
.r3-home .ob-hello > button:last-child { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; min-height: 0; border-radius: 50%; }
.r3-home .ob-invite { margin-top: 14px !important; border-radius: 16px; }
/* 4. feature cards: four equal cards, icon circles, short descriptions, arrow */
.r3-home .home-feature-cards { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 14px !important; }
.r3-home .home-feature-cards > button { display: grid !important; grid-template-rows: auto auto 1fr auto; justify-items: center; align-content: start; gap: 4px !important; min-height: 168px; padding: 12px 6px 10px !important; border: 1px solid #EADCC6 !important; border-radius: 16px !important; background: #FFFCF7 !important; box-shadow: 0 10px 20px -18px rgba(58, 26, 9, .5) !important; text-align: center; }
.r3-home .home-feature-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: #F6EBDA; color: var(--primary); }
.r3-home .home-feature-icon svg { width: 22px !important; height: 22px !important; padding: 0 !important; background: none !important; }
.r3-home .home-feature-cards b { margin: 0 !important; font-size: .8rem !important; color: var(--ink); }
.r3-home .home-feature-cards small { font-size: .64rem !important; line-height: 1.35 !important; color: var(--muted); }
.r3-home .home-feature-arrow { display: grid; place-items: center; margin-top: 4px; color: var(--primary); transition: transform .2s; }
@media (hover: hover) and (pointer: fine) { .r3-home .home-feature-cards > button:hover { border-color: #D9BE8C !important; } .r3-home .home-feature-cards > button:hover .home-feature-arrow { transform: translateX(2px); } }
.r3-home .home-feature-cards > button:active { transform: scale(.98); }
@media (max-width: 360px) { .r3-home .home-feature-cards { gap: 6px !important; } .r3-home .home-feature-cards > button { min-height: 156px; padding: 10px 4px 8px !important; } .r3-home .home-feature-icon { width: 38px; height: 38px; } .r3-home .home-feature-cards small { font-size: .6rem !important; } }
/* 5. Picked for You: breathing room, Loka icon + title, subtle "Why?" */
.r3-home .sec-head.h-sec:has(.h-loka) { margin-top: 26px !important; }
.r3-home .h-loka { width: 30px !important; height: 30px !important; margin-right: 4px; vertical-align: middle; }
.r3-home .sec-head.h-sec:has(.h-loka) .see-all { font-weight: 700; color: var(--accent-ink); }
@media (max-width: 360px) { .r3-cta { max-width: calc(100% - 32px); } .r3-cta .r3-caption { font-size: .72rem !important; } .r3-home .r3-dots { bottom: 66px !important; } }
/* stacked four-card layout: text and arrow centred under the icon */
.r3-home .home-feature-cards > button > * { grid-column: auto !important; grid-row: auto !important; justify-self: center !important; }
.r3-home .home-feature-cards small { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual; }
.r3-home .home-feature-icon { width: 46px !important; height: 46px !important; border-radius: 50% !important; background: linear-gradient(145deg, #FBF1DF, #F1DDB8) !important; border: 1px solid #E6D2AE !important; }
/* =========================================================
Home feature cards — titles only, shorter, radiant hover (v90)
========================================================= */
.r3-home .home-feature-cards > button { min-height: 112px !important; grid-template-rows: auto auto auto !important; align-content: center !important; gap: 6px !important; padding: 12px 6px !important; transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, transform .15s ease !important; }
.r3-home .home-feature-cards > button small { display: none !important; }
.r3-home .home-feature-arrow { margin-top: 2px !important; }
@media (hover: hover) and (pointer: fine) {
.r3-home .home-feature-cards > button:hover, .r3-home .home-feature-cards > button:focus-visible { background: radial-gradient(120% 90% at 50% 0%, #FFF3DA 0%, #F7E2B8 55%, #EFD39E 100%) !important; border-color: #D9A24A !important; box-shadow: 0 0 0 3px rgba(217, 162, 74, .16), 0 14px 26px -16px rgba(169, 112, 31, .7) !important; }
.r3-home .home-feature-cards > button:hover .home-feature-icon { background: #FFF8EA !important; box-shadow: 0 0 0 4px rgba(255, 248, 234, .6); }
}
.r3-home .home-feature-cards > button:focus-visible { background: radial-gradient(120% 90% at 50% 0%, #FFF3DA 0%, #F7E2B8 55%, #EFD39E 100%) !important; border-color: #D9A24A !important; }
.r3-home .home-feature-cards > button:active { background: radial-gradient(120% 90% at 50% 0%, #FFF3DA, #F3DCAE) !important; transform: scale(.97) !important; }
/* =========================================================
Community page — rounded, spacious, consistent (v90)
========================================================= */
.comm.sxc { --cm-edge: 12px; --cm-r: 18px; --cm-line: #EADCC6; --cm-shadow: 0 10px 22px -18px rgba(58, 26, 9, .55); }
/* hero: taller, rounded, set in from the edges; text on a soft cream fade */
.comm.sxc .sxc-hero { height: clamp(240px, 66vw, 272px) !important; margin: 6px calc(var(--cm-edge) - 18px) 0 !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: var(--cm-shadow); }
.comm.sxc .sxc-hero :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.comm.sxc .sxc-hero .sxc-copy { padding: 22px 18px 64px !important; width: 66% !important; }
.comm.sxc .sxc-hero .sxc-copy :is(h1, h2) { font-size: 1.4rem !important; line-height: 1.18 !important; }
.comm.sxc .sxc-hero .sxc-copy p:not(.r3-kicker) { font-size: .8rem !important; -webkit-line-clamp: 3 !important; }
.comm.sxc .sxc-create { left: 18px !important; bottom: 18px !important; min-height: 38px !important; }
/* stories: on the content edge; Your Story is a proper creation card */
.comm.sxc .fst { margin-left: -18px !important; margin-right: -18px !important; padding: 2px var(--cm-edge) 6px !important; scroll-padding-inline: var(--cm-edge); gap: 10px !important; }
.comm.sxc .fst > :is(.fst-add, .fst-card) { flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; height: 158px !important; border-radius: var(--cm-r) !important; overflow: hidden; box-shadow: var(--cm-shadow); }
.comm.sxc .fst-add { display: grid !important; place-content: center; justify-items: center; gap: 10px !important; border: 1px solid var(--cm-line) !important; background: linear-gradient(160deg, #FFFCF7 0%, #F9EEDB 100%) !important; }
.comm.sxc .fst-add .fst-me { position: relative; width: 62px !important; height: 62px !important; box-shadow: 0 0 0 3px #FFFCF7, 0 0 0 5px #D9A24A !important; }
.comm.sxc .fst-add .fst-me :is(svg, .fst-plus, i) { color: #fff; }
.comm.sxc .fst-add small, .comm.sxc .fst-add b { font-size: .78rem !important; font-weight: 800 !important; color: var(--ink) !important; }
.comm.sxc .fst-card .fst-who { gap: 6px; } .comm.sxc .fst-card .fst-who b { max-width: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comm.sxc .fst-card::after { height: 55% !important; background: linear-gradient(transparent, rgba(30, 15, 7, .62)) !important; }
/* videos: same content edge, wider cards, rounded throughout */
.comm.sxc .cm-videos .lv-rail { margin-left: -18px !important; margin-right: -18px !important; padding: 2px var(--cm-edge) 10px !important; scroll-padding-inline: var(--cm-edge); gap: 12px !important; }
.comm.sxc .cm-videos .lvr-card { flex: 0 0 78% !important; max-width: 300px !important; border-radius: var(--cm-r) !important; border-color: var(--cm-line) !important; }
.comm.sxc .cm-videos .lvr-thumb { border-radius: var(--cm-r) var(--cm-r) 0 0; }
.comm.sxc .cm-videos .lvr-thumb .lv-b { font-size: .6rem; padding: 2px 8px; }
/* feed posts: wider (8px safety gap), rounded, media full card width */
.comm.sxc article.sx { margin-left: -10px !important; margin-right: -10px !important; border: 1px solid var(--cm-line) !important; border-radius: var(--cm-r) !important; overflow: hidden !important; background: #FFFCF7 !important; box-shadow: var(--cm-shadow) !important; }
.comm.sxc article.sx :is(img, video, .pic):not(.avatar):not([class*=av]) { max-width: 100%; }
/* like: warm active state + a small pop */
.comm.sxc [data-act="c-like"] { transition: color .2s, background-color .2s, transform .15s; }
.comm.sxc [data-act="c-like"].on { color: #8A3A12 !important; }
.comm.sxc [data-act="c-like"].on svg { fill: currentColor; }
.comm.sxc [data-act="c-like"]:active { transform: scale(.94); }
@keyframes cmPop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.comm.sxc [data-act="c-like"].pop svg { animation: cmPop .38s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) { .comm.sxc [data-act="c-like"].pop svg { animation: none; } }
/* the page scrolls clear of the bottom navigation */
.comm.sxc { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
/* comments panel */
#sheet .cm-sheet { display: grid; gap: 10px; }
#sheet .cm-sh-head h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 1.05rem; } #sheet .cm-sh-head h2 span { font-size: .8rem; color: var(--muted); font-weight: 700; }
#sheet .cm-ctx { display: flex; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 14px; background: #FBF2E4; font-size: .8rem; line-height: 1.4; color: var(--ink-2); }
#sheet .cm-ctx span, #sheet .cm-list li span { display: grid; gap: 1px; min-width: 0; } #sheet .cm-ctx b, #sheet .cm-list b { font-size: .76rem; color: var(--ink); }
#sheet .cm-list { list-style: none; margin: 0; padding: 0; display: grid; }
#sheet .cm-list li { display: flex; gap: 10px; padding: 10px 2px; border-bottom: 1px solid #F0E6D8; font-size: .84rem; line-height: 1.4; color: var(--ink); }
#sheet .cm-list li:last-child { border-bottom: 0; }
#sheet :is(.cm-ctx, .cm-list) .avatar { flex: 0 0 32px; width: 32px; height: 32px; font-size: .66rem; }
#sheet .cm-none { justify-content: center; align-items: center; padding: 18px 0 !important; color: var(--muted) !important; }
#sheet .cm-say { position: sticky; bottom: 0; display: flex; gap: 8px; margin: 4px -4px 0; padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--bg, #FBF7F0); }
#sheet .cm-say input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid var(--cm-line, #EADCC6); border-radius: 999px; background: #FFFCF7; font: inherit; font-size: .88rem; }
#sheet .cm-send { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--primary); color: #FFF6E6; cursor: pointer; }
#sheet .cm-note { margin: 0; font-size: .66rem; color: var(--muted); text-align: center; }
/* three-dot menu */
#sheet .cm-menu-t { margin: 0 0 8px; font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sheet .cm-menu-list { display: grid; border: 1px solid #EADCC6; border-radius: 16px; overflow: hidden; background: #FFFCF7; }
#sheet .cm-mi { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 16px; border: 0; border-bottom: 1px solid #F0E6D8; background: none; color: var(--ink); font: inherit; font-size: .88rem; font-weight: 600; text-align: left; cursor: pointer; }
#sheet .cm-mi:last-child { border-bottom: 0; } #sheet .cm-mi svg { color: var(--primary); flex-shrink: 0; }
#sheet .cm-mi span { display: grid; } #sheet .cm-mi small { font-size: .66rem; font-weight: 500; color: var(--muted); }
#sheet .cm-mi:hover, #sheet .cm-mi:focus-visible { background: #FBF2E4; } #sheet .cm-mi-warn svg { color: #A3402A; }
.comm.sxc article.sx { width: auto !important; max-width: none !important; }
/* feature cards: compact (≈115px): smaller icon circle and arrow */
.r3-home .home-feature-cards > button { min-height: 0 !important; padding: 12px 6px 10px !important; gap: 5px !important; }
.r3-home .home-feature-icon { width: 40px !important; height: 40px !important; margin-bottom: 0 !important; }
.r3-home .home-feature-icon svg { width: 20px !important; height: 20px !important; }
.r3-home .home-feature-arrow { width: 22px !important; height: 22px !important; }
.r3-home .home-feature-arrow svg { width: 13px !important; height: 13px !important; }
/* videos: wider cards (about 78% of the screen, up to 300px) */
body .comm.sxc .cm-videos .lv-rail > .lvr-card { flex: 0 0 auto !important; width: min(78vw, 300px) !important; max-width: none !important; }
.comm.sxc .cm-videos { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.comm.sxc .sxc-hero { width: auto !important; max-width: none !important; }
.comm.sxc .fst-add .fst-me { border-radius: 50% !important; overflow: visible; }
.comm.sxc .fst-add .fst-me > :not(svg):not(i):not(.fst-plus) { border-radius: 50%; }
.lvr-hic svg, .comm.sxc .lvr-hic svg { fill: #FFF6E6 !important; color: #FFF6E6 !important; stroke: none !important; }
/* =========================================================
Live auction viewer — collectibles layout (v91)
========================================================= */
/* header: basket icon · three tabs · close, on one row */
.rl-head.rl-head2 { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0 !important; pointer-events: auto; }
.rl-head2 .rl-tv-mark { width: 36px; height: 36px; flex: 0 0 36px; }
.rl-head2 .rl-tabs { position: static !important; transform: none !important; width: auto !important; left: auto !important; right: auto !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2px; padding: 3px !important; border-radius: 999px !important; background: rgba(251, 244, 230, .92) !important; }
.rl-head2 .rl-tabs button { flex-direction: row !important; gap: 4px !important; min-height: 34px !important; padding: 0 6px !important; border-radius: 999px !important; font-size: .7rem !important; }
.rl-head2 .rl-tabs button svg { width: 13px; height: 13px; flex-shrink: 0; }
.rl-head2 .rl-close { width: 34px !important; height: 34px !important; margin: 0 !important; }
@media (max-width: 360px) { .rl-head2 { gap: 6px; padding-left: 8px !important; padding-right: 8px !important; } .rl-head2 .rl-tv-mark { width: 28px; height: 28px; flex-basis: 28px; } .rl-head2 .rl-tabs button { font-size: .62rem !important; padding: 0 3px !important; gap: 2px !important; } .rl-head2 .rl-tabs button svg { width: 11px; height: 11px; } }
/* seller row just under the header */
.rl .rl-top { padding-top: calc(62px + env(safe-area-inset-top, 0px)) !important; }
.rl-list { padding-top: calc(66px + env(safe-area-inset-top, 0px)) !important; }
.rl-who .avatar { box-shadow: 0 0 0 2px rgba(255, 246, 230, .85); }
/* quiet right-side actions */
.rl-rail { gap: 14px !important; }
.rl-rail button svg { background: rgba(20, 10, 5, .38) !important; backdrop-filter: blur(6px); }
.rl-rail button[aria-pressed="true"] svg { background: rgba(200, 137, 44, .9) !important; }
/* title with a gold marker */
.rl-bottom > .rl-title { position: relative; padding-left: 12px; }
.rl-bottom > .rl-title::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: linear-gradient(#E8C987, #C8892C); }
.rl-bottom > .rl-cat { padding-left: 12px; color: rgba(255, 246, 230, .78) !important; font-style: italic; }
/* bidding panel: a cream sheet anchored at the bottom */
.rl-bottom { padding-bottom: 0 !important; }
.rl-lot.rl-lot2 { display: grid !important; grid-template-columns: 60px minmax(0, 1fr) auto !important; align-items: center; gap: 12px !important; margin: 10px -14px 0 !important; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 22px 22px 0 0 !important; background: #FBF5EA !important; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .55) !important; }
.rl-lot2 .rl-th { width: 60px; height: 60px; border-radius: 14px; }
.rl-lot2 .rl-lot-b { display: grid; gap: 2px; min-width: 0; }
.rl-lot2 .rl-lot-b > b { font-size: .9rem !important; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-lot2 .rl-lot-bid em { font-size: 1.3rem !important; color: var(--primary); }
.rl-lot2 .rl-lot-meta { font-size: .7rem !important; color: #7A5A44 !important; }
.rl-lot2 .rl-lot-time svg { color: #8A3A12; }
.rl-lot2 .rl-bid { display: inline-flex; align-items: center; gap: 6px; min-height: 44px !important; padding: 0 16px !important; border-radius: 999px !important; font-size: .86rem !important; white-space: nowrap; box-shadow: 0 8px 16px -10px rgba(58, 26, 9, .8); }
.rl-lot2 .rl-bid:active { transform: scale(.97); }
@media (max-width: 360px) { .rl-lot.rl-lot2 { grid-template-columns: 50px minmax(0, 1fr) auto !important; gap: 9px !important; padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important; } .rl-lot2 .rl-th { width: 50px; height: 50px; } .rl-lot2 .rl-bid { padding: 0 12px !important; } .rl-lot2 .rl-lot-bid em { font-size: 1.12rem !important; } }
/* products under a live stream sit above the panel */
.rl-bottom > .rl-prods { margin-bottom: 2px; }
.rl-slide .rl-bottom { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; }
.rl-lot.rl-lot2 { width: auto !important; max-width: none !important; }
.rl-bottom > .rl-title, .rl-bottom > .rl-cat, .rl-bottom > .rl-play, .rl-bottom > .rl-chatlite, .rl-bottom > .rl-prods { margin-right: 64px !important; }
@media (max-width: 400px) { .rl-head2 { gap: 8px !important; } .rl-head2 .rl-tabs { gap: 0 !important; } .rl-head2 .rl-tabs button { padding: 0 3px !important; gap: 3px !important; font-size: .66rem !important; letter-spacing: -.01em; } .rl-head2 .rl-tabs button svg { width: 11px !important; height: 11px !important; } .rl-head2 .rl-close { width: 32px !important; height: 32px !important; } }
@media (max-width: 340px) { .rl-head2 .rl-tabs button svg { display: none !important; } .rl-head2 .rl-tabs button { font-size: .66rem !important; } }
.rl-lot2 .rl-lot-b > b { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.rl-lot2 .rl-lot-time { display: flex !important; align-items: center; gap: 4px; white-space: nowrap; flex-wrap: nowrap !important; }
.rl-lot2 .rl-lot-time svg { flex-shrink: 0; }
@media (max-width: 360px) { .rl-lot2 .rl-lot-bid small { display: none; } .rl-lot2 .rl-bid svg { display: none; } .rl-lot2 .rl-bid { padding: 0 14px !important; } .rl-lot2 .rl-lot-b > b { font-size: .82rem !important; } }
/* =========================================================
Purchase flow refinements (v92)
========================================================= */
/* listing: four main categories, subcategories quieter below */
.mk-groups { display: flex; gap: 8px; margin: 10px -18px 0; padding: 0 18px 2px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 18px; }
.mk-groups::-webkit-scrollbar { display: none; }
.mk-g { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid #EADCC6; border-radius: 999px; background: #FFFCF7; color: var(--ink); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.mk-g svg { color: var(--accent-ink); } .mk-g.on { background: var(--primary); border-color: var(--primary); color: #FFF6E6; } .mk-g.on svg { color: #F6D58A; }
.mk-subs { margin-top: 8px !important; } .mk-subs .chip { min-height: 30px; padding: 0 11px; font-size: .72rem; background: transparent; }
/* product: stock status beside the quantity */
.qty .p-stock { margin-left: 10px; align-self: center; font-size: .74rem; font-weight: 700; color: #3F7A4F; } .qty .p-stock.low { color: #A3591C; } .qty .p-stock.out { color: #A3402A; }
/* cart */
.cart-more { margin-top: 8px; width: 100%; justify-content: center; gap: 6px; }
.cart-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; text-align: center; }
.cart-empty-art { width: 120px !important; height: 120px !important; }
.cart-empty h2 { margin: 6px 0 0; font-size: 1.15rem; color: var(--ink); } .cart-empty p { margin: 0 0 8px; max-width: 30ch; font-size: .86rem; color: var(--ink-2); }
/* payment rows with icons */
.co-pay-row { align-items: center !important; } .co-pay-ic { flex: 0 0 38px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #F6EBDA; color: var(--primary); }
.co-pay-row.on .co-pay-ic { background: var(--primary); color: #FFF6E6; }
/* confirmation */
.co-done-loka { width: 132px !important; height: 132px !important; margin: 0 auto 4px; display: block; }
.co-done-h { margin: 0 0 12px !important; font-size: 1.3rem !important; text-align: center; color: var(--ink); }
.co-done-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 12px; border-radius: 16px; background: #FBF2E4; text-align: center; }
.co-done-sum small { display: block; font-size: .68rem; color: var(--muted); } .co-done-sum b { font-size: .86rem; color: var(--ink); }
.co-done .co-done-ic { display: none; }
/* Activity: purchase status chips */
.act-st { margin-top: 6px; } .act-st .chip { min-height: 30px; font-size: .74rem; }
.mk-subs .chip[data-cat="All"] { display: none; }
/* =========================================================
Booking journey (v93)
========================================================= */
.bk-page { padding-bottom: 110px; }
.bk-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; } .bk-head-img { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 12px; }
.bk-head .grow { display: grid; gap: 2px; min-width: 0; } .bk-head b { font-size: .92rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-head small { font-size: .74rem; color: var(--muted); }
.bk-note { margin: -4px 0 8px; font-size: .76rem; color: var(--ink-2); }
.bk-cal { padding: 12px; border: 1px solid #EADCC6; border-radius: 18px; background: #FFFCF7; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .5); }
.bk-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .bk-cal-h b { font-size: .95rem; color: var(--ink); }
.bk-cal-h .icon-btn:disabled { opacity: .3; }
.bk-dow, .bk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.bk-dow span { font-size: .66rem; font-weight: 700; color: var(--muted); padding: 4px 0; }
.bk-day { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; font: inherit; font-size: .84rem; color: #BBA990; cursor: default; }
.bk-day.ok { color: var(--ink); font-weight: 700; cursor: pointer; } .bk-day.ok:hover { background: #F6EBDA; }
.bk-day.on { background: var(--primary) !important; color: #FFF6E6 !important; }
.bk-day i { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #C8892C; color: #fff; font-size: .58rem; font-style: normal; line-height: 16px; }
.bk-day.pub::after { content: ""; position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: #3F7A4F; }
.bk-day.on.pub::after { background: #F6D58A; }
.bk-legend { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .68rem; color: var(--muted); } .lg-b, .lg-p { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #C8892C; } .lg-p { width: 6px; height: 6px; background: #3F7A4F; margin-left: 8px; }
.bk-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bk-slot { min-height: 46px; border: 1px solid #EADCC6; border-radius: 14px; background: #FFFCF7; font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.bk-slot.on { background: var(--primary); border-color: var(--primary); color: #FFF6E6; }
.bk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding: 12px; border-radius: 16px; background: #FBF2E4; }
.bk-facts small { display: flex; align-items: center; gap: 4px; font-size: .68rem; color: var(--muted); } .bk-facts b { font-size: .86rem; color: var(--ink); }
.bk-guests { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border: 1px solid #EADCC6; border-radius: 16px; background: #FFFCF7; }
.bk-guests button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #EADCC6; border-radius: 50%; background: #fff; color: var(--primary); cursor: pointer; } .bk-guests button:disabled { opacity: .35; }
.bk-guests output { min-width: 28px; text-align: center; font-size: 1.1rem; font-weight: 800; color: var(--ink); } .bk-guests small { margin-left: auto; font-size: .74rem; color: var(--muted); }
.bk-page .field { display: grid; gap: 4px; margin-top: 10px; } .bk-page .field input, .bk-page .field textarea { width: 100%; box-sizing: border-box; }
.bk-sum { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid #EADCC6; border-radius: 16px; background: #FFFCF7; text-align: left; }
.bk-sum-img { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 12px; } .bk-sum .grow { display: grid; gap: 3px; min-width: 0; }
.bk-sum b { font-size: .9rem; color: var(--ink); } .bk-sum small { display: flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--ink-2); }
.bk-total { display: grid; gap: 6px; margin: 10px 0 4px; padding: 12px; border-radius: 14px; background: #FBF2E4; font-size: .84rem; color: var(--ink-2); }
.bk-total > div { display: flex; justify-content: space-between; } .bk-total .t { padding-top: 6px; border-top: 1px solid #EADCC6; color: var(--ink); } .bk-total .t b { font-size: 1.05rem; color: var(--primary); }
.bk-rv { margin-top: 12px; }
.bk-nav { margin-top: 16px; }
.bk-done-sub { margin: -6px 0 12px; text-align: center; font-size: .86rem; color: var(--ink-2); }
.bk-ref { margin: 12px 0; text-align: center; font-size: .82rem; color: var(--ink-2); }
.bk-done-acts { display: grid; gap: 8px; }
.bk-time { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: .78rem; font-weight: 800; color: var(--primary); }
.bk-cal-link { width: 100%; justify-content: center; gap: 6px; margin-top: 14px; }
.bk-page .co-h { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; }
.bk-done-acts .btn { width: 100%; justify-content: center; }
/* =========================================================
v94 — Home, Community and Profile refinements
========================================================= */
/* Loka: original proportions everywhere (no stretching) */
img.loka-art, img[src*="photo/loka-"] { object-fit: contain !important; height: auto; }
.r3-home .ob-hello .ob-hello-art { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; }
.r3-home .h-loka { width: 30px !important; height: 30px !important; }
/* feature cards: titles + the restored descriptions, equal cards, nothing hidden */
.r3-home .home-feature-cards > button { min-height: 0 !important; grid-template-rows: auto auto 1fr auto !important; align-content: start !important; gap: 4px !important; padding: 12px 6px 10px !important; }
.r3-home .home-feature-cards > button small { display: block !important; font-size: .64rem !important; line-height: 1.3 !important; color: var(--muted) !important; overflow: visible !important; white-space: normal !important; overflow-wrap: break-word; }
.r3-home .home-feature-cards { align-items: stretch !important; }
/* a compact gap before Picked for You */
.r3-home .sec-head.h-sec:has(.h-loka) { margin-top: 24px !important; margin-bottom: 8px !important; align-items: center; }
.r3-home .sec-head.h-sec:has(.h-loka) h2 { display: flex; align-items: center; gap: 6px; }
/* Community: full-width hero, wider rails, full-width posts */
.comm.sxc { --cm-edge: 10px; }
.comm.sxc .sxc-hero { margin: 0 -18px !important; width: auto !important; border-radius: 0 !important; box-shadow: none !important; }
.comm.sxc .sxc-hero :is(.pic, img) { border-radius: 0 !important; object-fit: cover; object-position: 70% 40%; }
.comm.sxc article.sx { margin-left: -18px !important; margin-right: -18px !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; }
.comm.sxc article.sx .sx-imgs, .comm.sxc article.sx .sx-imgs :is(.pic, img, video), .comm.sxc article.sx .pi { border-radius: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
/* Profile: full-width cover, wider content */
.pf-cover { margin-left: -18px !important; margin-right: -18px !important; width: auto !important; border-radius: 0 !important; }
.pf-cover :is(.pic, img) { border-radius: 0 !important; object-fit: cover; }
.screen:has(.pf-cover) > .pad, .screen:has(.pf-cover) > div:not(.topbar):not(header) { padding-left: 14px !important; padding-right: 14px !important; }
.screen:has(.pf-cover) .pf-cover { margin-left: -14px !important; margin-right: -14px !important; }
/* =========================================================
v95 — Home story cards and "Discover the Story" buttons
========================================================= */
:root { --locarta-brown-dark: #633018; --locarta-brown-medium: #925426; --locarta-cream: #FFF9F0; --locarta-beige-light: #F8EEDF; --locarta-gold-soft: #EED7AD; }
/* Picked for You: the per-card wrapper no longer adds a box, padding or a big top margin */
.r3-home .stc-rail > .fy { margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; display: grid; align-content: start; gap: 6px; }
.r3-home .stc-rail > .fy .fy-why { padding: 0 6px; font-size: .68rem; line-height: 1.35; color: var(--muted); }
.r3-home .sec-head.h-sec:has(.h-loka) { margin-bottom: 6px !important; }
.r3-home .sec-head.h-sec:has(.h-loka) + .rail { padding-top: 4px !important; }
/* every story card: softly rounded, subtle border and shadow, clean image crop */
.r3-home .stc { display: grid !important; grid-template-rows: auto 1fr; border: 1px solid #EADCC6 !important; border-radius: 18px !important; overflow: hidden !important; background: #FFFCF7 !important; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .55) !important; text-align: left; }
.r3-home .stc .stc-img { width: 100%; aspect-ratio: 4 / 3; height: auto !important; border-radius: 0 !important; }
.r3-home .stc .stc-img img { object-fit: cover; }
.r3-home .stc .stc-body { display: flex !important; flex-direction: column; gap: 4px; padding: 12px 12px 14px !important; }
.r3-home .stc .stc-body > :is(b, strong, h3) { font-size: .92rem; line-height: 1.25; color: var(--ink); }
.r3-home .stc .stc-body p, .r3-home .stc .stc-body .stc-desc { margin: 2px 0 6px; font-size: .78rem; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* one story-button design, two alternating browns */
.story-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; align-self: flex-start; margin-top: auto !important; min-height: 38px; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; background: var(--locarta-brown-dark) !important; color: var(--locarta-cream) !important; font: inherit; font-size: .78rem !important; font-weight: 700 !important; line-height: 1; white-space: nowrap; text-decoration: none !important; cursor: pointer; box-shadow: 0 6px 12px -10px rgba(58, 26, 9, .8); transition: filter .2s, transform .12s; }
.story-btn svg { width: 14px !important; height: 14px !important; flex-shrink: 0; color: currentColor !important; transition: transform .2s; }
.story-btn .loka-go-face { width: 22px !important; height: 22px !important; object-fit: contain !important; border-radius: 50%; background: #FFF9F0; }
@media (hover: hover) and (pointer: fine) { .story-btn:hover { filter: brightness(1.08); } .story-btn:hover svg { transform: translateX(2px); } }
.story-btn:active { transform: scale(.97); }
/* books: the button sits neatly inside the card */
.r3-home .bk-story.story-btn { margin: 8px 0 0 !important; width: auto; }
@media (max-width: 360px) { .story-btn { font-size: .72rem !important; padding: 0 11px !important; } }
/* books: wider cards so "Discover the Story" fits on one line inside them (covers scale with the card) */
.r3-home .bk-rail > .bk { flex: 0 0 max(176px, calc((100vw - 36px) / 2)) !important; width: max(176px, calc((100vw - 36px) / 2)) !important; max-width: none !important; padding: 10px !important; box-sizing: border-box; display: flex !important; flex-direction: column; }
.r3-home .bk-rail > .bk .bk-cover { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3; display: grid !important; place-items: center; padding: 0 !important; border-radius: 12px; overflow: hidden; }
.r3-home .bk-rail > .bk .bk-cover .pic, .r3-home .bk-rail > .bk .bk-cover img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center; }
.r3-home .bk-rail > .bk .bk-story.story-btn { margin-top: auto !important; }
.r3-home .bk-rail > .bk .bk-story.story-btn { width: 100% !important; padding: 0 10px !important; font-size: .74rem !important; justify-content: center; }
/* Picked for You: no outer box around card + note; Loka sits inside the button */
.r3-home .stc-rail > .fy { border: 0 !important; outline: 0 !important; }
.r3-home .story-btn .loka-go-face { position: static !important; margin: 0 !important; transform: none !important; flex: 0 0 22px; }
.r3-home .story-btn:has(.loka-go-face) { padding-left: 7px !important; }
/* =========================================================
v96 — section-based button colours, feature-card gradients
========================================================= */
/* one colour per section: medium brown for Loka's Picked for You, dark brown for every other featured section */
.r3-home .story-btn { background: var(--locarta-brown-dark) !important; color: var(--locarta-cream) !important; }
.r3-home .stc-rail:has(> .fy) .story-btn { background: var(--locarta-brown-medium) !important; }
.r3-home .lc-bid { background: var(--locarta-brown-dark) !important; color: var(--locarta-cream) !important; }
/* destination cards only (rows without Story chips); Upcoming Experiences and Featured Collectibles keep their own colours */
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-go { background: var(--locarta-brown-dark) !important; color: var(--locarta-cream) !important; border-color: transparent !important; }
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-go svg { color: var(--locarta-cream) !important; }
/* feature cards: one coordinated cream → light-beige gradient; pale-gold icon and arrow circles */
.r3-home .home-feature-cards > button { background: linear-gradient(165deg, #FFFCF6 0%, var(--locarta-beige-light) 100%) !important; border: 1px solid #EBDCC4 !important; box-shadow: 0 8px 18px -16px rgba(58, 26, 9, .5) !important; }
.r3-home .home-feature-icon { background: linear-gradient(145deg, #FCF3E2 0%, var(--locarta-gold-soft) 100%) !important; border: 1px solid #E6D2AE !important; color: var(--locarta-brown-dark) !important; }
.r3-home .home-feature-arrow { display: grid !important; place-items: center; width: 24px !important; height: 24px !important; border-radius: 50% !important; background: linear-gradient(145deg, #FCF3E2 0%, var(--locarta-gold-soft) 100%) !important; color: var(--locarta-brown-dark) !important; }
.r3-home .home-feature-arrow svg { width: 13px !important; height: 13px !important; }
.r3-home .home-feature-cards b { color: var(--locarta-brown-dark) !important; }
/* =========================================================
v98 — Explore: brown-gradient category cards, richer header photo
========================================================= */
:root { --locarta-brown-soft: #B47A43; }
:root { --lx-white: #FFFCF7; --lx-card: rgba(255, 250, 242, .88); --lx-tint: rgba(202, 151, 91, .08); --lx-champagne: #E8D2B3; --lx-gold: #D7B477; --lx-goldbrown: #B88752; --lx-ink: #60371F; --lx-taupe: #9A8471; --lx-line: #EADBC9; --lx-textile: url("data:image/svg+xml;utf8,"); }
/* six category cards: the supplied cream card with woven textile corners (photo/ex-card-textile.jpg) */
.ex-cats > button { position: relative; overflow: hidden; background: #F2E8DC url("photo/ex-card-textile.jpg") center / 100% 100% no-repeat !important;
border: 1px solid var(--lx-line) !important; box-shadow: 0 8px 18px -16px rgba(96, 55, 31, .45) !important; color: var(--lx-ink) !important; text-shadow: none !important; }
.ex-cats > button::before, .ex-cats > button::after { content: none !important; }
.ex-cats > button .ex-ico { border-radius: 50% !important; background: linear-gradient(145deg, #FFF9F0 0%, var(--lx-champagne) 100%) !important; border: 1px solid #E6D2AE !important; color: var(--lx-ink) !important; box-shadow: none !important; }
.ex-cats > button .ex-ico svg { color: var(--lx-ink) !important; filter: none !important; }
.ex-cats > button :is(b, span:not(.ex-ico), small) { color: var(--lx-ink) !important; text-shadow: none !important; }
@media (hover: hover) and (pointer: fine) { .ex-cats > button:hover { border-color: var(--lx-gold) !important; box-shadow: 0 12px 22px -16px rgba(96, 55, 31, .5) !important; } }
.ex-cats > button:active { transform: scale(.97); }
/* header photo: more visible, with a warm brown gradient that fades into the page */
.ex-top-bg .pic img, .ex-top-bg img { opacity: .9 !important; object-fit: cover; object-position: center 42%; }
.ex-top-bg::after { background: linear-gradient(180deg, rgba(255, 252, 247, .50) 0%, rgba(255, 252, 247, .22) 38%, rgba(255, 252, 247, .55) 70%, #FFFCF7 100%) !important; }
.ex-top :is(h1, h2, .ex-title) { color: var(--lx-ink) !important; text-shadow: 0 0 10px rgba(255, 252, 247, .9), 0 0 2px rgba(255, 252, 247, .9); }
.ex-top :is(p, .ex-sub, .sub) { color: var(--lx-ink) !important; text-shadow: 0 0 8px rgba(255, 252, 247, .9); }
/* Live & Video heading on Explore: a larger round play icon */
.ex-lv .sec-head h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.ex-lv .lvr-hic { width: 34px !important; height: 34px !important; margin-right: 0 !important; }
.ex-lv .lvr-hic svg { width: 14px !important; height: 14px !important; margin-left: 2px; }
/* reference details: round category icon circles; pale-gold circles for the Travelers / Creators icons */
.ex-cats > button .ex-ico { border-radius: 50% !important; }
.ex-creators > svg:first-child { box-sizing: content-box; flex: 0 0 auto; width: 20px; height: 20px; padding: 10px; border-radius: 50%; background: linear-gradient(145deg, #FCF3E2 0%, var(--locarta-gold-soft, #EED7AD) 100%); color: var(--locarta-brown-dark, #633018); border: 1px solid #E6D2AE; }
.ex-creators { gap: 12px; }
/* Explore: warm white page, white controls with champagne borders, gold-brown filter button */
.screen:has(.ex-cats) { background: var(--lx-white); }
.ex-top .search, .ex-top [role=search], .ex-top .ex-search { background: #FFFFFF !important; border: 1px solid var(--lx-champagne) !important; box-shadow: 0 6px 14px -12px rgba(96, 55, 31, .4) !important; color: var(--lx-ink); }
.ex-top :is(.search, [role=search]) svg { color: var(--lx-ink) !important; }
.ex-top [data-act="xp-filters"], .ex-top .filter-btn, .ex-top [aria-label="Filters"] { background: var(--lx-goldbrown) !important; color: #FFFFFF !important; border: 0 !important; }
.ex-top [data-act="xp-filters"] svg, .ex-top [aria-label="Filters"] svg { color: #FFFFFF !important; }
.ex-top :is(.loc-pick, .ex-loc, [data-act="loc-pick"], [data-act="ex-loc"]) { background: #FFFFFF !important; border: 1px solid var(--lx-champagne) !important; color: var(--lx-ink) !important; }
/* Travelers / Creators: white cards, champagne icon circles, taupe subtitles */
.ex-creators { background: #FFFFFF !important; border: 1px solid var(--lx-line) !important; box-shadow: 0 8px 18px -16px rgba(96, 55, 31, .4) !important; }
.ex-creators b, .ex-creators strong { color: var(--lx-ink) !important; } .ex-creators small { color: var(--lx-taupe) !important; }
.ex-creators > svg:first-child { background: linear-gradient(145deg, #FBF3E6 0%, var(--lx-champagne) 100%) !important; color: var(--lx-ink) !important; }
/* Live & Video: dark-brown title, gold-brown See all, white information areas */
.ex-lv .sec-head h2 { color: var(--lx-ink) !important; } .ex-lv .see-all { color: var(--lx-goldbrown) !important; }
.ex-lv .lvr-card { background: #FFFFFF !important; border-color: var(--lx-line) !important; }
.ex-top .loc-chip { background: #FFFFFF !important; border: 1px solid var(--lx-champagne) !important; color: var(--lx-ink) !important; }
.ex-top .loc-chip svg { color: var(--lx-ink) !important; }
@media (max-width: 360px) { .ex-cats > button :is(b, span:not(.ex-ico), small) { font-size: .68rem !important; } }
/* labels sit above the woven corners: content anchored to the top, equal height for all six cards */
.ex-cats > button { display: grid !important; grid-template-rows: auto auto; align-content: start !important; justify-items: center; gap: 5px !important; min-height: 108px !important; height: 108px; padding: 10px 6px 0 !important; box-sizing: border-box; }
.ex-cats > button .ex-ico { width: 40px !important; height: 40px !important; }
.ex-cats > button .ex-ico svg { width: 19px !important; height: 19px !important; }
.ex-cats > button :is(b, span:not(.ex-ico)) { line-height: 1.2 !important; max-width: 100%; }
@media (max-width: 340px) { .ex-cats > button { padding-top: 8px !important; gap: 4px !important; } .ex-cats > button :is(b, span:not(.ex-ico)) { font-size: .64rem !important; line-height: 1.1 !important; } }
@media (max-width: 340px) { .ex-cats > button { font-size: .64rem !important; line-height: 1.1 !important; } }
/* v109 — Explore category cards with real images floating over the card edge */
.screen:has(.ex-cats) .ex-cats {
column-gap: 8px !important;
row-gap: 34px !important;
margin-top: 34px !important;
overflow: visible !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-direction: column !important;
min-width: 0 !important;
min-height: 132px !important;
height: 132px !important;
padding: 0 6px 13px !important;
margin: 0 !important;
overflow: visible !important;
border: 1px solid rgba(255, 238, 211, .22) !important;
border-radius: 24px !important;
background: linear-gradient(145deg, #B77A3F 0%, #8A4C25 58%, #68351C 100%) !important;
box-shadow: 0 9px 16px -9px rgba(76, 38, 17, .42) !important;
color: #FFFCF7 !important;
text-shadow: 0 1px 3px rgba(55, 25, 10, .35) !important;
isolation: isolate;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
border-radius: inherit !important;
background: radial-gradient(circle at 18% 15%, rgba(255, 224, 172, .19), transparent 48%), linear-gradient(135deg, transparent 35%, rgba(56, 26, 12, .13)) !important;
pointer-events: none;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat .ex-cat-img {
position: absolute !important;
z-index: 2 !important;
left: 50% !important;
top: -34px !important;
transform: translateX(-50%) !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
width: min(118%, 142px) !important;
height: 96px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
pointer-events: none;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat .ex-cat-img img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center bottom !important;
border: 0 !important;
border-radius: 0 !important;
filter: drop-shadow(0 7px 5px rgba(52, 25, 11, .3)) !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat .ex-cat-label {
position: relative !important;
z-index: 3 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #FFFCF7 !important;
font-size: clamp(.68rem, 2.8vw, .88rem) !important;
font-weight: 750 !important;
line-height: 1.18 !important;
text-align: center !important;
text-shadow: 0 1px 3px rgba(48, 22, 9, .45) !important;
overflow-wrap: anywhere;
}
@media (max-width: 360px) {
.screen:has(.ex-cats) .ex-cats { column-gap: 7px !important; row-gap: 30px !important; }
.screen:has(.ex-cats) .ex-cats > button.ex-cat { height: 120px !important; min-height: 120px !important; border-radius: 19px !important; padding-bottom: 11px !important; }
.screen:has(.ex-cats) .ex-cats > button.ex-cat .ex-cat-img { top: -29px !important; height: 84px !important; }
}
/* v110 — balanced Explore category imagery and consistent label baseline */
.screen:has(.ex-cats) .ex-cats {
align-items: stretch !important;
column-gap: 8px !important;
row-gap: 30px !important;
margin-top: 27px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat {
height: 116px !important;
min-height: 116px !important;
padding: 0 5px 12px !important;
justify-content: flex-end !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat .ex-cat-img {
top: -22px !important;
width: min(108%, 128px) !important;
height: 82px !important;
align-items: flex-end !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat .ex-cat-img img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center bottom !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat .ex-cat-label {
min-height: 1.25em !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1.15 !important;
font-size: clamp(.64rem, 2.55vw, .78rem) !important;
text-align: center !important;
}
/* Individually balance the artwork silhouettes. The bayong needs less height
and a lower position because its handle makes it visually taller. */
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(1) .ex-cat-img {
top: -14px !important;
width: min(98%, 116px) !important;
height: 72px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(2) .ex-cat-img {
top: -18px !important;
width: min(108%, 128px) !important;
height: 76px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(3) .ex-cat-img {
top: -20px !important;
width: min(108%, 128px) !important;
height: 82px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(4) .ex-cat-img {
top: -17px !important;
width: min(108%, 128px) !important;
height: 78px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(5) .ex-cat-img {
top: -17px !important;
width: min(108%, 128px) !important;
height: 78px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(6) .ex-cat-img {
top: -17px !important;
width: min(108%, 128px) !important;
height: 78px !important;
}
@media (max-width: 360px) {
.screen:has(.ex-cats) .ex-cats { row-gap: 27px !important; }
.screen:has(.ex-cats) .ex-cats > button.ex-cat {
height: 108px !important;
min-height: 108px !important;
padding-bottom: 10px !important;
border-radius: 19px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat .ex-cat-img {
width: min(108%, 112px) !important;
height: 72px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(1) .ex-cat-img {
top: -12px !important;
width: min(98%, 104px) !important;
height: 64px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat .ex-cat-label {
font-size: .65rem !important;
}
}
/* v111 — final per-image alignment requested for Explore category cards */
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(1) .ex-cat-img {
top: -15px !important;
width: min(114%, 132px) !important;
height: 82px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(2) .ex-cat-img {
top: -12px !important;
width: min(108%, 128px) !important;
height: 76px !important;
}
/* Keep the festival image exactly as previously balanced. */
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(4) .ex-cat-img {
top: -17px !important;
width: min(108%, 128px) !important;
height: 78px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(5) .ex-cat-img,
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(6) .ex-cat-img {
top: -11px !important;
width: min(108%, 128px) !important;
height: 78px !important;
}
@media (max-width: 360px) {
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(1) .ex-cat-img {
top: -12px !important;
width: min(112%, 116px) !important;
height: 72px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(2) .ex-cat-img {
top: -9px !important;
width: min(108%, 112px) !important;
height: 70px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(4) .ex-cat-img {
top: -17px !important;
width: min(108%, 112px) !important;
height: 72px !important;
}
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(5) .ex-cat-img,
.screen:has(.ex-cats) .ex-cats > button.ex-cat:nth-child(6) .ex-cat-img {
top: -8px !important;
width: min(108%, 112px) !important;
height: 70px !important;
}
}
/* =========================================================
v112 — Home destination and story cards, section headings; Explore hover
========================================================= */
/* section headings: one size, brown icons, See all on the right */
.r3-home .sec-head.h-sec h2 { font-size: 1.05rem !important; font-weight: 800 !important; gap: 8px; align-items: center; }
.r3-home .sec-head.h-sec h2 > svg { width: 20px; height: 20px; color: var(--locarta-brown-dark, #633018) !important; flex-shrink: 0; }
.r3-home .sec-head.h-sec .see-all { color: var(--locarta-brown-dark, #633018); font-weight: 700; }
/* Featured Destinations: image on top (rounded top corners), badge, bold title, pin row, round brown arrow */
.r3-home .rail:not(:has(.story-tag)) > .fcard { display: flex !important; flex-direction: column; width: 168px !important; flex: 0 0 168px !important; padding: 0 !important; border: 1px solid #EFE4D6 !important; border-radius: 18px !important; overflow: hidden; background: #FFFCF7 !important; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .55) !important; scroll-snap-align: start; }
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 0 !important; overflow: hidden; }
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-media :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-chip { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(43, 22, 11, .72); color: #FFF6E6; font-size: .68rem; font-weight: 700; backdrop-filter: blur(4px); }
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 4px; align-items: center; padding: 12px 12px 14px !important; flex: 1; }
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-body strong { grid-column: 1 / 3; font-size: .92rem; font-weight: 800; line-height: 1.25; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-body .meta { grid-column: 1; display: flex; align-items: center; gap: 4px; min-width: 0; font-size: .74rem; color: #9A8471; }
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-go { grid-column: 2; position: static !important; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
/* Stories Behind the Creations: 4:3 image + badge, title, two-line description, full-width button aligned at the bottom */
.r3-home .stc-rail:not(:has(> .fy)) { align-items: stretch; }
.r3-home .stc-rail:not(:has(> .fy)) > .stc { flex: 0 0 216px !important; width: 216px !important; display: flex !important; flex-direction: column; }
.r3-home .stc-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.r3-home .stc-media .stc-img { width: 100%; height: 100% !important; aspect-ratio: auto !important; }
.r3-home .stc-tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(43, 22, 11, .72); color: #FFF6E6; font-size: .68rem; font-weight: 700; backdrop-filter: blur(4px); }
.r3-home .stc-tag svg { color: #FFF6E6; }
.r3-home .stc-rail:not(:has(> .fy)) > .stc .stc-body { flex: 1; display: flex !important; flex-direction: column; gap: 4px; padding: 12px 12px 14px !important; }
.r3-home .stc-rail:not(:has(> .fy)) > .stc .stc-body > b { font-size: .95rem; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.r3-home .stc-rail:not(:has(> .fy)) > .stc .stc-body > small { font-size: .72rem; color: #9A8471; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r3-home .stc-rail:not(:has(> .fy)) > .stc .stc-line { font-size: .8rem; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; margin-bottom: 8px; }
.r3-home .stc-rail:not(:has(> .fy)) > .stc .story-btn { align-self: stretch !important; width: 100%; margin-top: auto !important; }
/* no decoration on or around the Home cards */
.r3-home :is(.fcard, .stc)::before, .r3-home :is(.fcard, .stc)::after { content: none !important; }
/* Explore: the six category cards respond to hover (translate/scale keep the tuned image transforms) */
.ex-cats > .ex-cat { transition: translate .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s, filter .25s !important; }
.ex-cats > .ex-cat img { transition: scale .3s cubic-bezier(.22, .61, .36, 1), filter .3s; }
@media (hover: hover) and (pointer: fine) {
.ex-cats > .ex-cat:hover, .ex-cats > .ex-cat:focus-visible { translate: 0 -4px; box-shadow: 0 18px 28px -16px rgba(63, 30, 12, .7) !important; filter: brightness(1.05); }
.ex-cats > .ex-cat:hover img, .ex-cats > .ex-cat:focus-visible img { scale: 1.06; filter: drop-shadow(0 10px 12px rgba(40, 18, 6, .35)); }
}
.ex-cats > .ex-cat:active { translate: 0 0; scale: .97; }
@media (prefers-reduced-motion: reduce) { .ex-cats > .ex-cat, .ex-cats > .ex-cat img { transition: none !important; } }
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-media { height: auto !important; min-height: 0 !important; max-height: none !important; }
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-chip { height: auto !important; min-height: 0 !important; bottom: auto !important; right: auto !important; width: auto !important; line-height: 1.3; }
/* =========================================================
v113 — curvy image edge on Home destination and story cards (reference)
========================================================= */
:root { --lx-wave: url("data:image/svg+xml;utf8,"); }
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-media,
.r3-home .stc-media { -webkit-mask: var(--lx-wave) center / 100% 100% no-repeat; mask: var(--lx-wave) center / 100% 100% no-repeat; }
/* the card body tucks up slightly under the wave so the curve reads as the body's edge */
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-media { aspect-ratio: 4 / 3.15; margin-bottom: -6px; }
.r3-home .stc-media { aspect-ratio: 4 / 3.15; margin-bottom: -6px; }
.r3-home .rail:not(:has(.story-tag)) > .fcard .f-body, .r3-home .stc-rail:not(:has(> .fy)) > .stc .stc-body { position: relative; z-index: 1; }
/* =========================================================
v114 — the curvy image edge on every Home photo card
========================================================= */
/* Picked for You, Live Auctions, Upcoming Experiences, Featured Collectibles */
.r3-home .stc-rail:has(> .fy) .stc > .stc-img,
.r3-home .lc .lc-img,
.r3-home .rail:has(.story-tag) > .fcard .f-media { -webkit-mask: var(--lx-wave) center / 100% 100% no-repeat; mask: var(--lx-wave) center / 100% 100% no-repeat; }
.r3-home .stc-rail:has(> .fy) .stc > .stc-img, .r3-home .lc .lc-img, .r3-home .rail:has(.story-tag) > .fcard .f-media { margin-bottom: -5px; }
.r3-home .stc-rail:has(> .fy) .stc .stc-body, .r3-home .lc > :not(.lc-img), .r3-home .rail:has(.story-tag) > .fcard .f-body { position: relative; z-index: 1; }
/* Books: the cover fills its frame; a shallower wave trims only the decorative band at the very bottom of the cover */
:root { --lx-wave-soft: url("data:image/svg+xml;utf8,"); }
.r3-home .bk-rail > .bk .bk-cover { -webkit-mask: var(--lx-wave-soft) center / 100% 100% no-repeat; mask: var(--lx-wave-soft) center / 100% 100% no-repeat; }
/* category badges on experience / collectible cards sit at the top of the photo, clear of the wave */
.r3-home .rail:has(.story-tag) > .fcard .f-chip { top: 10px !important; bottom: auto !important; left: 10px !important; right: auto !important; height: auto !important; }
/* =========================================================
v115 — Cultural Places (listing) and Map & Directions
========================================================= */
/* photo header with a warm golden-brown overlay */
.cp-hero { position: relative; margin: 0 -18px; padding: 0 18px 14px; overflow: hidden; }
.cp-hero-bg { position: absolute; inset: 0; z-index: 0; } .cp-hero-bg :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.cp-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(99, 53, 31, .55) 0%, rgba(166, 106, 53, .35) 55%, rgba(250, 245, 236, .92) 100%); pointer-events: none; }
.cp-hero > :not(.cp-hero-bg) { position: relative; z-index: 1; }
.cp-hero .topbar { background: transparent !important; box-shadow: none !important; }
.cp-hero .topbar :is(h1, h2) { color: #FFF6E6 !important; text-shadow: 0 2px 8px rgba(30, 14, 6, .55); }
.cp-hero .topbar .icon-btn { background: rgba(255, 249, 240, .92) !important; color: var(--primary) !important; }
.cp-hero .search-row { margin-top: 4px; } .cp-hero .search { background: #FFFFFF !important; border: 1px solid #E8D2B3 !important; }
.cp-loc { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 36px; padding: 0 14px; border: 1px solid #E8D2B3; border-radius: 999px; background: rgba(255, 252, 247, .95); color: var(--ink); font: inherit; font-size: .8rem; cursor: pointer; }
.screen:has(.cp-hero) .map-top { margin-top: 0 !important; padding-top: 6px !important; background: none !important; }
/* the Directions card */
.cp-dir { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 4px; padding: 14px 14px 14px 16px; border: 0; border-radius: 18px; overflow: hidden; text-align: left; cursor: pointer; color: #FFF6E6;
background: var(--lx-textile, none) repeat, linear-gradient(135deg, #C58B46 0%, #A66A35 55%, #7E4524 100%); background-size: 10px 10px, cover; box-shadow: 0 14px 26px -16px rgba(99, 53, 31, .8); }
.cp-dir::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(197, 139, 70, .86) 0%, rgba(166, 106, 53, .9) 55%, rgba(126, 69, 36, .94) 100%); pointer-events: none; }
.cp-dir > * { position: relative; }
.cp-dir-txt { flex: 1; display: grid; gap: 4px; min-width: 0; }
.cp-dir-txt b { font-size: 1.05rem; line-height: 1.2; } .cp-dir-txt small { font-size: .76rem; line-height: 1.4; color: rgba(255, 246, 230, .92); }
.cp-dir-cta { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; padding: 6px 12px; border-radius: 999px; background: #FFF6E6; color: #63351F; font-size: .76rem; font-weight: 800; }
.cp-dir-art { position: relative; flex: 0 0 104px; } .cp-dir-map { width: 104px; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(40, 18, 6, .35)); }
.cp-dir-loka { position: absolute; left: -10px; bottom: -8px; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(40, 18, 6, .4)); }
@media (hover: hover) and (pointer: fine) { .cp-dir:hover { filter: brightness(1.05); } .cp-dir:hover .cp-dir-cta svg { transform: translateX(2px); } }
.cp-dir:active { transform: scale(.98); } .cp-dir-cta svg { transition: transform .2s; }
/* Popular Cultural Places: two-column grid */
.cpg-sec { margin-top: 14px; padding-bottom: 96px; } .cpg-sec .sec-head { align-items: center; } .cpg-count { font-size: .74rem; color: #9A8471; }
.cpg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cpg-card { position: relative; display: flex; flex-direction: column; border: 1px solid #EFE4D6; border-radius: 18px; overflow: hidden; background: #FFFCF7; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .55); }
.cpg-media { position: relative; display: block; aspect-ratio: 4 / 3; padding: 0; border: 0; background: #EFE6D6; cursor: pointer; }
.cpg-media :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
.cpg-tag { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 52px); padding: 3px 8px; border-radius: 999px; background: rgba(255, 252, 247, .95); color: #63351F; font-size: .64rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpg-fav { position: absolute; top: 6px; right: 6px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 252, 247, .92); color: #63351F; cursor: pointer; }
.cpg-fav.on { color: #A3402A; }
.cpg-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; }
.cpg-body b { font-size: .88rem; line-height: 1.25; color: var(--ink); } .cpg-body small { display: flex; align-items: center; gap: 4px; font-size: .7rem; color: #9A8471; }
.cpg-body small svg { color: #C58B46; flex-shrink: 0; }
.cpg-body p { margin: 2px 0 8px; font-size: .74rem; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cpg-go { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: auto; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: #63351F; color: #FFF6E6; font: inherit; font-size: .74rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
/* Map & Directions: Loka's guided prompts */
.cp-loka { display: flex; gap: 10px; align-items: flex-start; margin: 10px 18px 8px; padding: 10px 12px; border: 1px solid #EADCC6; border-radius: 16px; background: linear-gradient(135deg, #FFFCF7, #FBF1E1); }
.cp-loka-av { flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; }
.cp-loka-b { display: grid; gap: 6px; min-width: 0; } .cp-loka-b b { font-size: .84rem; color: var(--ink); } .cp-loka-b small { font-size: .68rem; color: #9A8471; }
.cp-loka-acts { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .cp-loka-acts .chip { flex: 0 0 auto; min-height: 32px; font-size: .72rem; gap: 4px; }
/* Cultural Places header: search keeps the page margins; Map & Directions: note clear of the hint */
.cp-hero .search-row { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
.screen:has(.cp-loka) .lf-note { bottom: auto !important; top: 12px !important; left: auto !important; right: 56px !important; }
.cp-hero { margin: 0 !important; padding: 0 18px 14px !important; }
.cp-hero .topbar { padding-left: 0 !important; padding-right: 0 !important; }
.cpg-sec { padding-left: 12px; padding-right: 12px; }
.cpg-sec .sec-head { padding: 0 6px; }
/* =========================================================
v116 — warm ivory & terracotta palette (design tokens), category pages
========================================================= */
:root {
--bg: #F8F1E8; --card: #FFFDF8; --primary: #6F351D; --sand: #E8CBA5; --ink: #38251B; --ink-2: #806B5A; --muted: #806B5A; --line: #E8DCCF;
--locarta-brown-dark: #6F351D; --locarta-cream: #FFFDF8;
}
body, .app, .screen { background-color: var(--bg); }
.screen:has(.ex-cats) { background: var(--bg) !important; }
/* card surfaces */
:is(.fcard, .fpcard, .stc, .lc, .bk, .lvr-card, .cpg-card, .cgc, .feat, .pcard, .sx2, article.sx, .maker-chip, .atx, .ex-creators) { background-color: var(--card) !important; }
:is(.fcard, .fpcard, .stc, .lc, .bk, .lvr-card, .cpg-card, .cgc, .feat, .pcard) { border-color: var(--line) !important; }
/* text roles */
.sec-head h2 { color: var(--ink); } .meta, .sub, small { color: var(--ink-2); }
/* buttons */
.btn:not(.btn-ghost):not(.btn-outline) { background-color: var(--primary); }
.btn-ghost { border-color: var(--primary); color: var(--primary); }
/* bottom navigation: soft white, terracotta active on sand */
.tabbar { background: var(--card) !important; border-top: 1px solid var(--line) !important; }
.tabbar button { color: var(--ink-2) !important; }
.tabbar button:is([aria-current="page"], .on) { color: var(--primary) !important; }
.tabbar button:is([aria-current="page"], .on) > :first-child, .tabbar button:is([aria-current="page"], .on) .tb-ico { background: var(--sand) !important; }
/* header photos: visible photo, warm gradient and a semi-transparent textile layer — header only, never over product images */
.cp-hero::after { background:
linear-gradient(180deg, rgba(56, 37, 27, .50) 0%, rgba(111, 53, 29, .30) 52%, rgba(248, 241, 232, .93) 100%),
var(--lx-textile, none) repeat !important; background-size: auto, 10px 10px !important; opacity: 1; }
.cp-hero-bg :is(.pic, img) { opacity: 1 !important; }
.cat-hero { margin: 0 !important; padding: 0 18px 16px !important; }
.cat-hero .topbar { padding-left: 0 !important; padding-right: 0 !important; }
.cat-hero .search-row { margin-left: 0 !important; margin-right: 0 !important; }
.cat-hero .search { background: #FFFFFF !important; border: 1px solid #E8D2B3 !important; }
.screen:has(.cat-hero) .topbar :is(h1, h2) { color: #FFFDF8 !important; text-shadow: 0 2px 8px rgba(30, 14, 6, .55); }
/* rounded cards across the six category pages (photos follow their card) */
.screen:has(.cat-hero, .cp-hero) :is(.feat, .pcard, .cgc, .bk, .fcard, .xp-card, .cg-card) { border-radius: 18px !important; overflow: hidden; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .5) !important; }
.screen:has(.cat-hero, .cp-hero) .feat :is(.feat-img, .feat-img img, .pic) { border-radius: 0 !important; }
.screen:has(.cat-hero, .cp-hero) .mk-subs .chip[aria-pressed="true"], .screen:has(.cat-hero) .chips .chip[aria-pressed="true"] { background: var(--primary) !important; border-color: var(--primary) !important; color: #FFFDF8 !important; }
.screen:has(.cat-hero) .mk-subs .chip:not([aria-pressed="true"]) { background: var(--card) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.screen:has(.cat-hero) .mk-subs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
.screen:has(.cat-hero) .mk-subs .chip { flex: 0 0 auto; min-height: 34px; font-size: .76rem; }
.screen:has(.cat-hero) .mk-subs .chip[data-cat="All"] { display: inline-flex !important; }
/* Books & Literature: equal cards in every category row — same width and height, covers 2:3, titles / prices / buttons aligned */
.bkp .bk-rail { align-items: stretch !important; gap: 12px !important; }
.bkp .bk-rail > .bk { flex: 0 0 150px !important; width: 150px !important; display: flex !important; flex-direction: column; padding: 10px !important; box-sizing: border-box; }
.bkp .bk-rail > .bk .bk-cover { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.bkp .bk-rail > .bk .bk-cover :is(.pic, img) { width: 100% !important; height: 100% !important; object-fit: cover; }
.bkp .bk-rail > .bk :is(b, strong, .bk-t) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; line-height: 1.25; }
.bkp .bk-rail > .bk :is(.bk-story, .btn, button:last-child) { margin-top: auto !important; }
.bkp .bk-rail > .bk small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Collectibles: "Series of" label */
.cgc-series { font-style: normal; font-weight: 600; color: var(--ink-2); }
.bkp .bk-rail > .bk { flex: 0 0 172px !important; width: 172px !important; }
.bkp .bk-rail > .bk :is(.bk-story, .story-btn) { width: 100% !important; padding: 0 10px !important; font-size: .74rem !important; justify-content: center; white-space: nowrap; }
.screen:has(.cat-hero) :is(.mk-subs, .chips) .chip { white-space: nowrap; }
/* =========================================================
v117 — vouchers and reviews
========================================================= */
.co-voucher { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 10px; border: 1px dashed var(--line, #E8DCCF); border-radius: 14px; background: var(--card, #FFFDF8); }
.co-v-field { flex: 1 1 140px; } .co-v-field input { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--line, #E8DCCF); border-radius: 10px; font: inherit; text-transform: uppercase; letter-spacing: .06em; background: #fff; box-sizing: border-box; }
.co-v-btn { min-height: 40px; padding: 0 16px; }
.co-v-on { display: inline-flex; align-items: center; gap: 6px; flex: 1; color: #2F6B3B; font-size: .84rem; } .co-v-on b { letter-spacing: .06em; }
.co-v-err { flex-basis: 100%; margin: 0; } .co-v-note { flex-basis: 100%; margin: 0; font-size: .7rem; color: var(--ink-2, #806B5A); }
.co-disc span:last-child, .co-disc-amt { color: #2F6B3B; font-weight: 700; } .co-disc span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.rv-st { display: inline-flex; gap: 1px; color: #E3D3BC; font-size: 1rem; line-height: 1; } .rv-st i { font-style: normal; } .rv-st i.on { color: #D9A13B; } .rv-st.sm { font-size: .82rem; }
.rv-sum { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .rv-sum > b { font-size: 1.9rem; line-height: 1; color: var(--ink, #38251B); }
.rv-sum > span { display: grid; gap: 2px; } .rv-sum small { color: var(--ink-2, #806B5A); font-size: .74rem; }
.rv-item, .rv-sample { border-top: 1px solid var(--line, #E8DCCF); padding-top: 10px; margin-top: 10px; }
.rv-item .review-head { align-items: flex-start; } .rv-item .a-pill { font-size: .62rem; }
.rv-sample-h { margin: 14px 0 0; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2, #806B5A); }
.rv-sample { opacity: .85; } .rv-none { margin: 4px 0 0; font-size: .82rem; }
.rv-mine { margin: 4px 0 6px; min-height: 36px; font-size: .8rem; gap: 6px; }
.rv-stars { display: flex; gap: 6px; margin: 4px 0 12px; padding: 0; border: 0; } .rv-stars legend { font-size: .82rem; font-weight: 700; color: var(--ink, #38251B); margin-bottom: 6px; padding: 0; }
.rv-stars label { position: relative; cursor: pointer; } .rv-stars input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rv-stars span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line, #E8DCCF); background: #fff; font-size: 1.5rem; color: #E3D3BC; transition: color .15s, transform .12s; }
.rv-stars input:focus-visible + span { outline: 3px solid var(--primary, #6F351D); outline-offset: 2px; }
.rv-stars[data-v="1"] label:nth-of-type(-n+1) span, .rv-stars[data-v="2"] label:nth-of-type(-n+2) span, .rv-stars[data-v="3"] label:nth-of-type(-n+3) span,
.rv-stars[data-v="4"] label:nth-of-type(-n+4) span, .rv-stars[data-v="5"] label:nth-of-type(-n+5) span { color: #D9A13B; border-color: #EBCB8E; background: #FFF8E8; }
.rv-tx { margin-top: 16px; padding: 12px; border: 1px solid var(--line, #E8DCCF); border-radius: 16px; background: var(--card, #FFFDF8); }
.rv-tx ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rv-row { display: flex; align-items: center; gap: 10px; } .rv-row .grow { display: grid; gap: 2px; min-width: 0; } .rv-row b { font-size: .86rem; } .rv-row small { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--ink-2, #806B5A); }
.rv-thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; } .rv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rv-btn { flex: 0 0 auto; min-height: 36px; padding: 0 12px; font-size: .78rem; white-space: nowrap; }
.rv-prod { margin-top: 18px; }
/* =========================================================
v118 — digital books and My Library
========================================================= */
.cp-ebook { margin: 14px 0 0; padding: 12px; border: 1px solid var(--line, #E8DCCF); border-radius: 14px; background: var(--card, #FFFDF8); }
.cp-ebook legend { padding: 0 4px; font-size: .82rem; font-weight: 700; color: var(--ink, #38251B); }
.cp-ebook .radio-row { margin: 4px 0; } .cp-ebook-file { margin-top: 8px; } .cp-ebook-file small { display: block; margin-top: 4px; color: var(--ink-2, #806B5A); font-size: .74rem; }
.co-digital { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: #F3EBDC; color: var(--ink, #38251B); font-size: .82rem; line-height: 1.45; }
.lib .sub { margin-top: 4px; } .lib-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.lib-item { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--line, #E8DCCF); border-radius: 16px; background: var(--card, #FFFDF8); }
.lib-cover { flex: 0 0 72px; width: 72px; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; } .lib-cover img { width: 100%; height: 100%; object-fit: cover; }
.lib-item .grow { display: grid; gap: 3px; align-content: start; min-width: 0; } .lib-item b { font-size: .92rem; } .lib-item small { color: var(--ink-2, #806B5A); font-size: .74rem; }
.lib-file { display: inline-flex; align-items: center; gap: 4px; } .lib-acts { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .lib-acts .btn { min-height: 38px; padding: 0 14px; font-size: .8rem; gap: 6px; }
.lib-note { font-style: italic; } .lib-empty { display: grid; justify-items: center; gap: 8px; margin-top: 40px; color: var(--ink-2, #806B5A); text-align: center; }
.lib-link, .lib-tx { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0; padding: 12px; border: 1px solid #E6D2AE; border-radius: 14px; background: linear-gradient(135deg, #FFFCF6, #F8EEDF); color: var(--ink, #38251B); text-align: left; font: inherit; cursor: pointer; }
.lib-link .grow, .lib-tx .grow { display: grid; gap: 2px; } .lib-link small, .lib-tx small { color: var(--ink-2, #806B5A); font-size: .74rem; } .lib-tx { cursor: default; } .lib-tx .btn { flex: 0 0 auto; }
/* v119 — language setting */
.lang-set { margin: 14px 0 6px; padding: 12px; border: 1px solid var(--line, #E8DCCF); border-radius: 14px; background: var(--card, #FFFDF8); }
.lang-set legend { padding: 0 4px; font-size: .84rem; font-weight: 700; color: var(--ink, #38251B); } .lang-set .radio-row { margin: 4px 0; }
.lang-note { margin: 6px 0 0; font-size: .72rem; line-height: 1.45; color: var(--ink-2, #806B5A); }
/* =========================================================
v120 — desktop layouts (only inside the desktop shell)
========================================================= */
/* Messages: list + open conversation side by side */
.dk-v120 .dk-msgs { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: calc(100vh - 64px); border-top: 1px solid var(--line, #E8DCCF); }
.dk-v120 .dk-ml { overflow-y: auto; border-right: 1px solid var(--line, #E8DCCF); background: var(--card, #FFFDF8); }
.dk-v120 .dk-ml .list { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; }
.dk-v120 .dk-ml .list > * { width: auto !important; }
.dk-v120 .dk-ml [aria-current="true"] { background: #F3E7D3 !important; border-color: #E2C79E !important; box-shadow: inset 3px 0 0 var(--primary, #6F351D); }
.dk-v120 .dk-mp { display: flex; flex-direction: column; min-height: 0; background: var(--bg, #F8F1E8); }
.dk-v120 .dk-mp > .topbar .icon-btn[data-act="back"], .dk-v120 .dk-mp > .topbar [data-go="messages"] { display: none; }
.dk-v120 .dk-mp > .msgs { flex: 1; overflow-y: auto; }
.dk-v120 .dk-mp > form.reply { position: sticky; bottom: 0; margin: 0 !important; border-top: 1px solid var(--line, #E8DCCF); background: var(--card, #FFFDF8); }
.dk-v120 .dk-mp-empty { margin: auto; display: grid; justify-items: center; gap: 6px; color: var(--ink-2, #806B5A); text-align: center; }
.dk-v120 .dk-mp-empty svg { width: 40px; height: 40px; color: #C9A77A; } .dk-v120 .dk-mp-empty b { color: var(--ink, #38251B); }
/* Account & Settings: profile column + cards */
.dk-v120 .pad.dk-acc { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; max-width: 1120px; margin: 0 auto; align-items: start; }
.dk-v120 .dk-acc-side { position: sticky; top: 16px; display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line, #E8DCCF); border-radius: 18px; background: var(--card, #FFFDF8); }
.dk-v120 .dk-acc-side .statrow { grid-template-columns: repeat(3, 1fr); }
.dk-v120 .dk-acc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dk-v120 .dk-acc-card { padding: 6px 14px 10px; border: 1px solid var(--line, #E8DCCF); border-radius: 18px; background: var(--card, #FFFDF8); }
.dk-v120 .dk-acc-card .menu { box-shadow: none !important; border: 0 !important; background: none !important; }
.dk-v120 .dk-acc-cards > :not(.dk-acc-card) { grid-column: 1 / -1; }
/* wider, comfortable dialogs */
.dk-v120 #sheet { max-width: 620px !important; width: min(620px, 92vw) !important; padding: 22px 26px !important; }
.dk-v120 #sheet .opt, .dk-v120 #sheet .field { font-size: .92rem; }
@media (max-width: 1100px) { .dk-v120 .dk-acc-cards { grid-template-columns: 1fr; } .dk-v120 .pad.dk-acc { grid-template-columns: 260px minmax(0, 1fr); } }
/* =========================================================
v121 — My Activity redesign + Home tweaks
========================================================= */
/* header: title + cart, pinned while scrolling */
.act2-top.act2-pin { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px 10px; background: var(--bg, #F8F1E8); box-shadow: 0 8px 12px -12px rgba(58, 26, 9, .35); }
.act2-top.act2-pin .c-title { margin: 0; font-size: 2rem; line-height: 1.1; color: #5A2D14; letter-spacing: -.01em; }
.act2-pin .act2-cart { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #F1E4D1; color: #6F351D; cursor: pointer; box-shadow: 0 6px 14px -10px rgba(58, 26, 9, .6); }
.act2-pin .act2-cart svg { width: 24px; height: 24px; }
.act2-cart-n { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #D9472B; color: #fff; font-size: .7rem; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--bg, #F8F1E8); }
/* segmented tabs with icons */
.act2 .act2-tabs { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 4px; border-radius: 18px; background: #F1E6D6; }
.act2 .act2-tabs [data-act=act-v] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 14px; background: none; color: #5A2D14; font: inherit; font-weight: 600; cursor: pointer; }
.act2 .act2-tabs [data-act=act-v] svg { width: 20px; height: 20px; }
.act2 .act2-tabs [aria-selected="true"] { background: linear-gradient(135deg, #B07338 0%, #8A4E24 100%); color: #FFF6E8; box-shadow: 0 8px 16px -12px rgba(58, 26, 9, .8); }
.act2-tab-n { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: #F6E4C8; color: #6F351D; font-size: .74rem; font-weight: 800; }
.act2 .act2-search .search { border-radius: 16px; background: #FFFDF8; border: 1px solid var(--line, #E8DCCF); }
.act2 .act2-search .filter-btn { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #8A4E24, #63351F); color: #FFF6E8; }
.act-body .chips .chip { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: #F1E4D1; color: #5A2D14; font-weight: 600; }
.act-body .chips .chip[aria-pressed="true"] { background: #6F351D; color: #FFF6E8; }
/* cards */
.atx.ax { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; padding: 10px; border: 1px solid var(--line, #E8DCCF); border-radius: 20px; background: var(--card, #FFFDF8); box-shadow: 0 10px 22px -20px rgba(58, 26, 9, .6); }
.ax-media { position: relative; display: block; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #EFE4D2; cursor: pointer; aspect-ratio: 1 / 1; align-self: stretch; }
.ax-media :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
.ax-badge { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(90, 45, 20, .86); color: #FFF6E8; font-size: .6rem; font-weight: 800; letter-spacing: .06em; }
.ax-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 4px 2px 2px 0; }
.ax-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta chev" "title chev"; column-gap: 6px; padding: 0; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.ax-head > svg { grid-area: chev; align-self: center; color: #8A6A52; }
.ax-meta { grid-area: meta; font-size: .66rem; font-weight: 700; letter-spacing: .1em; color: #8A6F5A; } .ax-meta.ok { color: #2F7A47; } .ax-meta.bad { color: #B23A23; }
.ax-title { grid-area: title; font-size: 1.02rem; line-height: 1.25; color: #5A2D14; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ax-by { display: flex; align-items: center; gap: 8px; } .ax-av { width: 30px !important; height: 30px !important; font-size: .7rem !important; flex: 0 0 30px; }
.ax-by span:last-child { display: grid; min-width: 0; } .ax-by b { font-size: .82rem; font-weight: 500; color: #5A3B2A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-by small { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; color: #8A6F5A; } .ax-by small svg { color: #8A6A52; }
.ax-next { font-size: .72rem; color: #8A6F5A; line-height: 1.35; }
.ax-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.ax-price { font-size: 1.25rem; color: #5A2D14; } .ax-time { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: #5A3B2A; }
.ax-btn { min-height: 38px; padding: 0 16px; border: 1.5px solid #8A4E24 !important; border-radius: 999px; background: transparent !important; color: #5A2D14 !important; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.ax-btn.attn { background: #6F351D !important; color: #FFF6E8 !important; }
@media (max-width: 360px) { .atx.ax { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; } .ax-title { font-size: .92rem; } .ax-price { font-size: 1.05rem; } }
/* Home: Picked for You — uniform cards, buttons without Loka's face */
.r3-home .stc-rail:has(> .fy) { align-items: stretch !important; }
.r3-home .stc-rail > .fy { flex: 0 0 236px !important; width: 236px !important; display: grid !important; grid-template-rows: 1fr auto; }
.r3-home .stc-rail > .fy > .stc { height: 100%; display: flex !important; flex-direction: column; }
.r3-home .stc-rail > .fy .stc-img { flex: 0 0 auto; aspect-ratio: 4 / 3 !important; height: auto !important; }
.r3-home .stc-rail > .fy .stc-body { flex: 1; display: flex !important; flex-direction: column; }
.r3-home .stc-rail > .fy .stc-body > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.r3-home .stc-rail > .fy .stc-body > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r3-home .stc-rail > .fy .stc-body p, .r3-home .stc-rail > .fy .stc-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.r3-home .stc-rail > .fy .story-btn { margin-top: auto !important; align-self: stretch !important; padding-left: 14px !important; height: 40px; min-height: 40px !important; box-sizing: border-box; flex: 0 0 auto; }
.r3-home .stc-rail > .fy .fy-why { height: 2.8em; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* fixes: photo box locked to its column; three equal tabs */
.atx.ax { grid-template-columns: 128px minmax(0, 1fr) !important; align-items: start; }
.atx.ax .ax-media { position: relative; width: 128px !important; height: 128px !important; max-width: 128px; aspect-ratio: auto !important; }
.atx.ax .ax-media > :is(.pic, img) { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; }
.atx.ax .ax-media img { object-fit: cover; }
.act2 .act2-tabs > [data-act=act-v] { width: 100%; min-width: 0; padding: 0 6px; font-size: .88rem; gap: 6px; white-space: nowrap; }
.act2 .act2-tabs > [data-act=act-v] svg { flex: 0 0 18px; width: 18px; height: 18px; }
@media (max-width: 360px) { .atx.ax { grid-template-columns: 96px minmax(0, 1fr) !important; } .atx.ax .ax-media { width: 96px !important; height: 96px !important; } .act2 .act2-tabs > [data-act=act-v] { font-size: .78rem; gap: 4px; } .act2 .act2-tabs > [data-act=act-v] svg { display: none; } }
.act2 .act2-tabs { grid-template-columns: 1.45fr 1fr 1fr !important; }
/* closer to the mock-up: no leftover gap under the pinned header; price and button side by side */
.act2.act-head { padding-top: 4px !important; }
.atx.ax { grid-template-columns: 104px minmax(0, 1fr) !important; gap: 12px; }
.atx.ax .ax-media { width: 104px !important; height: 104px !important; max-width: 104px; }
.ax-foot { flex-wrap: nowrap; } .ax-price { font-size: 1.1rem; white-space: nowrap; }
.ax-btn { min-height: 36px; padding: 0 12px; font-size: .76rem; }
@media (max-width: 360px) { .atx.ax { grid-template-columns: 84px minmax(0, 1fr) !important; } .atx.ax .ax-media { width: 84px !important; height: 84px !important; } .ax-foot { flex-wrap: wrap; } }
/* =========================================================
v122 — Explore: icon category cards, Promoted for You, Featured Experiences; creator promotions
========================================================= */
.ex-cats:has(.v122) { row-gap: 10px !important; column-gap: 10px !important; margin-top: 14px !important; }
.ex-cats > .ex-cat.v122 { position: relative; overflow: hidden !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 104px !important; min-height: 104px !important; padding: 10px 6px !important; margin: 0 !important; border: 1px solid rgba(99, 53, 31, .25) !important; border-radius: 18px !important;
background: var(--lx-textile, none) repeat, linear-gradient(145deg, #B47A43 0%, #8F5326 55%, #6B3A1C 100%) !important; background-size: 12px 12px, cover !important; box-shadow: 0 10px 20px -16px rgba(58, 26, 9, .8) !important; color: #FFF6E8 !important; }
.ex-cats > .ex-cat.v122::before { content: "" !important; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(180, 122, 67, .9), rgba(143, 83, 38, .9) 55%, rgba(107, 58, 28, .93)); pointer-events: none; }
.ex-cats > .ex-cat.v122::after { content: none !important; }
.ex-cats > .ex-cat.v122 > * { position: relative; z-index: 1; }
.v122-ico { display: grid !important; place-items: center; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: rgba(255, 240, 210, .18) !important; border: 1px solid rgba(255, 246, 232, .35) !important; color: #FFF6E8 !important; }
.v122-ico svg { width: 21px; height: 21px; color: #FFF6E8 !important; }
.v122-lbl { font-size: .78rem; font-weight: 700; line-height: 1.2; text-align: center; color: #FFF6E8; text-shadow: 0 1px 2px rgba(40, 18, 6, .45); }
/* Promoted for You + Featured Experiences */
.ex-more { padding: 0 0 8px; } .ex-more .sec-head { margin-top: 18px; }
.pr-note { margin: -4px 0 8px; font-size: .74rem; color: var(--ink-2, #806B5A); }
.pr-rail, .fx-rail { gap: 12px !important; align-items: stretch; }
.pr-card, .fx-card { flex: 0 0 220px; width: 220px; display: flex; flex-direction: column; border: 1px solid var(--line, #E8DCCF); border-radius: 18px; overflow: hidden; background: var(--card, #FFFDF8); box-shadow: 0 10px 22px -20px rgba(58, 26, 9, .6); }
.pr-card { border-color: #E2C79E; }
.pr-media, .fx-media { position: relative; display: block; aspect-ratio: 4 / 3; padding: 0; border: 0; background: #EFE4D2; cursor: pointer; }
.pr-media :is(.pic, img), .fx-media :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
.pr-tag { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: #F6E2B5; color: #5A2D14; font-size: .64rem; font-weight: 800; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(40, 18, 6, .25); }
.pr-body, .fx-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.pr-title, .fx-title { font-size: .9rem; line-height: 1.25; color: var(--ink, #38251B); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.pr-by, .fx-body > small { display: flex; align-items: center; gap: 3px; font-size: .72rem; color: var(--ink-2, #806B5A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.pr-price { font-size: .98rem; color: #5A2D14; white-space: nowrap; } .pr-price small { font-size: .68rem; font-weight: 500; color: var(--ink-2, #806B5A); }
.pr-btn { background: linear-gradient(135deg, #925426, #6F351D) !important; color: #FFF6E8 !important; white-space: nowrap; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 10px; } .pr-grid .pr-card { width: auto; flex: none; }
/* creator dashboard */
.pr-entry { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0; padding: 12px 14px; border: 1px solid #E2C79E; border-radius: 16px; background: linear-gradient(135deg, #FFF8EA, #F6E7CF); color: var(--ink, #38251B); text-align: left; font: inherit; cursor: pointer; }
.pr-entry .grow { display: grid; gap: 2px; } .pr-entry small { color: var(--ink-2, #806B5A); font-size: .74rem; } .pr-entry > svg:first-child { color: #8F5326; }
.pr-explain { padding: 12px 14px; border: 1px solid var(--line, #E8DCCF); border-radius: 16px; background: var(--card, #FFFDF8); }
.pr-explain > b { display: flex; align-items: center; gap: 6px; } .pr-explain ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: .8rem; line-height: 1.45; color: var(--ink-2, #806B5A); } .pr-explain li b { color: var(--ink, #38251B); }
.pr-new { width: 100%; margin: 12px 0 4px; justify-content: center; gap: 6px; }
.pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pr-row { padding: 12px; border: 1px solid var(--line, #E8DCCF); border-radius: 14px; background: var(--card, #FFFDF8); display: grid; gap: 4px; }
.pr-row-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pr-row small { font-size: .74rem; color: var(--ink-2, #806B5A); }
.pr-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; } .pr-demo { font-size: .74rem; color: var(--ink-2, #806B5A); } .pr-why { color: #A3402A !important; }
.pr-place { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-2, #806B5A); } .pr-pkgs { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line, #E8DCCF); border-radius: 12px; }
/* stronger than the older image-card rules: cream labels, tight rows, larger icons */
.screen .ex-cats:has(.v122) { row-gap: 10px !important; margin-top: 14px !important; padding-top: 0 !important; }
.screen .ex-cats > button.ex-cat.v122 .v122-lbl, .screen .ex-cats > button.ex-cat.v122 .v122-lbl * { color: #FFF6E8 !important; font-size: .8rem !important; font-weight: 700 !important; opacity: 1 !important; text-shadow: 0 1px 3px rgba(40, 18, 6, .55) !important; }
.screen .ex-cats > button.ex-cat.v122 .v122-ico { width: 46px !important; height: 46px !important; position: relative !important; inset: auto !important; transform: none !important; }
.screen .ex-cats > button.ex-cat.v122 .v122-ico svg { width: 23px !important; height: 23px !important; }
.screen .ex-cats > button.ex-cat.v122 { translate: none; }
/* v122b — the cut-out pictures float over the card again (card keeps the v122 size and gradient) */
.screen .ex-cats:has(.v122-pic) { row-gap: 38px !important; margin-top: 40px !important; overflow: visible !important; }
.screen .ex-cats > button.ex-cat.v122.v122-pic { overflow: visible !important; justify-content: flex-end !important; padding: 0 6px 12px !important; }
.screen .ex-cats > button.ex-cat.v122.v122-pic::before { border-radius: inherit; }
.screen .ex-cats > button.ex-cat.v122.v122-pic :is(.ex-cat-label, .ex-cat-label *) { position: relative; z-index: 3; color: #FFF6E8 !important; font-size: .8rem !important; font-weight: 700 !important; text-shadow: 0 1px 3px rgba(40, 18, 6, .6) !important; }
.screen .ex-cats > button.ex-cat.v122.v122-pic .ex-cat-img { z-index: 2; }
/* =========================================================
v124 — Explore premium showcase zones
========================================================= */
.zone { position: relative; margin: 22px -18px 0 !important; padding: 22px 18px 24px !important; overflow: hidden; isolation: isolate; }
.zone::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lx-textile, none) repeat; background-size: 12px 12px; opacity: .1; pointer-events: none; }
.zone .sec-head { margin-top: 0 !important; }
.zone .sec-head h2 { display: flex; align-items: center; gap: 8px; }
/* 1 · Live & Video — cinematic chocolate */
.zone-lv { background: radial-gradient(120% 90% at 20% 0%, #6B3A1C 0%, #4A230F 45%, #2B1409 100%); border-radius: 26px 26px 0 0; }
.zone-lv .sec-head h2 { color: #FFF8EE !important; text-transform: uppercase; letter-spacing: .1em; font-size: 1rem !important; }
.zone-lv .sec-head h2 svg, .zone-lv .lvr-hic { color: #2B1409 !important; background: #E6BD78 !important; }
.zone-lv .see-all { color: #E6BD78 !important; }
.zone-lv .rail { gap: 14px !important; }
.zone-lv .lvr-card { flex: 0 0 280px !important; width: 280px !important; background: rgba(255, 248, 238, .06) !important; border: 1px solid rgba(230, 189, 120, .28) !important; border-radius: 20px !important; box-shadow: 0 16px 30px -22px rgba(0, 0, 0, .9) !important; color: #FFF8EE !important; overflow: hidden; }
.zone-lv .lvr-card :is(.pic, img) { aspect-ratio: 16 / 9; height: auto !important; object-fit: cover; }
.zone-lv .lvr-card :is(.lvr-t, b, strong) { color: #FFF8EE !important; }
.zone-lv .lvr-card :is(small, span:not(.lv-b):not(.avatar), p) { color: rgba(255, 248, 238, .78) !important; }
.zone-lv .lvr-card svg { color: #E6BD78 !important; }
.zone-lv .lvr-card .btn { background: transparent !important; border: 1.5px solid #E6BD78 !important; color: #F6DDAE !important; }
.zone-lv .lvr-card .avatar { background: #E6BD78 !important; color: #2B1409 !important; }
/* 2 · Promoted for You — radiant golden-brown woven spotlight */
.zone-pr { margin-top: 0 !important; background: linear-gradient(160deg, #C48A4E 0%, #B47A43 30%, #925426 72%, #7A4220 100%); border-top: 2px solid rgba(241, 226, 206, .55); border-bottom: 2px solid rgba(241, 226, 206, .55); }
.zone-pr::before { opacity: .16; }
.zone-pr .sec-head h2 { color: #FFF8EE !important; text-shadow: 0 1px 2px rgba(40, 18, 6, .35); }
.zone-pr .sec-head h2 svg { color: #F6DDAE !important; } .zone-pr .see-all { color: #FFF1D6 !important; } .zone-pr .pr-note { color: rgba(255, 248, 238, .88) !important; }
.sp-rail { gap: 14px !important; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; padding-bottom: 6px !important; align-items: stretch; }
.sp-card { flex: 0 0 84%; max-width: 340px; scroll-snap-align: center; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #FFF8EE; border: 1px solid rgba(241, 226, 206, .8); box-shadow: 0 20px 34px -24px rgba(40, 18, 6, .9); }
.sp-media { position: relative; display: block; aspect-ratio: 16 / 11; padding: 0; border: 0; background: #E9D6BB; cursor: pointer; }
.sp-media :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
.sp-tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 248, 238, .95); color: #633018; font-size: .66rem; font-weight: 800; box-shadow: 0 2px 8px rgba(40, 18, 6, .3); }
.sp-weave { height: 10px; background: var(--weave, none) center / auto 100% repeat-x; flex: 0 0 auto; }
.sp-info { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 12px 16px 16px; }
.sp-by { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #925426; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-title { font-size: 1.08rem; line-height: 1.25; color: #3B1E0E; }
.sp-desc { margin: 0; font-size: .8rem; line-height: 1.45; color: #6B5444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.sp-price { font-size: 1.12rem; color: #633018; white-space: nowrap; } .sp-price small { font-size: .7rem; font-weight: 500; color: #8A6F5A; }
.sp-btn { min-height: 40px; padding: 0 18px; border-radius: 999px; background: linear-gradient(135deg, #925426, #633018) !important; color: #FFF8EE !important; white-space: nowrap; }
.sp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.sp-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 248, 238, .5); cursor: pointer; transition: width .25s, background .25s; }
.sp-dot.on { width: 22px; background: #FFF1D6; }
/* 3 · Featured Experiences — champagne travel editorial */
.zone-fx { margin-top: 0 !important; background: linear-gradient(180deg, #F1E2CE 0%, #F6EADA 55%, #FFF8EE 100%); border-radius: 0 0 26px 26px; padding-bottom: 28px !important; }
.zone-fx::before { opacity: .06; }
.zone-fx .sec-head h2 { color: #633018 !important; font-family: inherit; }
.zone-fx .see-all { color: #925426 !important; }
.fe-rail { gap: 14px !important; align-items: stretch; }
.fe-card { flex: 0 0 232px; width: 232px; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #FFF8EE; border: 1px solid #E7D3B3; box-shadow: 0 14px 26px -22px rgba(58, 26, 9, .7); }
.fe-media { position: relative; display: block; aspect-ratio: 4 / 4.4; padding: 0; border: 0; background: #E9D6BB; cursor: pointer; }
.fe-media :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
.fe-media::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(0deg, rgba(40, 18, 6, .45), transparent); pointer-events: none; }
.fe-chip { position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 248, 238, .94); color: #633018; font-size: .7rem; font-weight: 700; }
.fe-info { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; border-top: 3px solid #E6BD78; }
.fe-title { font-size: .98rem; line-height: 1.25; color: #3B1E0E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.fe-info > small { display: flex; align-items: center; gap: 4px; font-size: .74rem; color: #8A6F5A; } .fe-info > small svg { color: #B47A43; }
.fe-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.fe-price { font-size: .98rem; font-weight: 800; color: #633018; white-space: nowrap; } .fe-price small { font-size: .68rem; font-weight: 500; color: #8A6F5A; }
.fe-btn { min-height: 36px; padding: 0 16px; border-radius: 999px; background: #633018 !important; color: #FFF8EE !important; }
.zone-fx + * { margin-top: 18px; }
.zone-lv .lvr-card { max-width: none !important; min-width: 280px !important; }
.sp-media > .sp-tag { right: auto !important; bottom: auto !important; width: auto !important; max-width: calc(100% - 20px); justify-content: flex-start; }
/* =========================================================
v125 — Home, Explore, Activity refinements
========================================================= */
/* Home hero: same 18px margins as the other cards, rounded like them */
.r3-home .r3-hero { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; border-radius: 22px !important; overflow: hidden !important; }
.r3-home .r3-hero :is(.pic, img) { object-fit: cover; }
/* Home cards: title → creator → location/category → description → price → action, with breathing room at the bottom */
.r3-home .stc .stc-body { padding: 12px 14px 16px !important; gap: 4px !important; }
.r3-home .stc .stc-body > b { font-size: .95rem; font-weight: 800; line-height: 1.25; color: var(--ink, #38251B); }
.r3-home .stc .stc-body > small { font-size: .74rem; color: #8A6F5A; }
.r3-home .stc .stc-body :is(p, .stc-line) { margin: 4px 0 12px !important; font-size: .8rem; line-height: 1.45; }
.r3-home .stc .story-btn { margin-top: auto !important; }
.r3-home .bk-rail > .bk { padding: 10px 10px 14px !important; }
.r3-home .bk-rail > .bk :is(b, strong) { font-size: .9rem; font-weight: 800; color: var(--ink, #38251B); }
.r3-home .bk-rail > .bk small { font-size: .72rem; }
.r3-home .bk-rail > .bk .bk-story { margin-top: 12px !important; }
.r3-home .lc > :last-child, .r3-home .fcard .f-body, .r3-home .fpcard .f-body { padding-bottom: 14px !important; }
.r3-home .lc :is(.lc-t, b, strong):first-of-type { font-weight: 800; }
.r3-home :is(.lc, .fcard) .price, .r3-home .lc-price { display: block; margin-top: 6px; font-size: .98rem; font-weight: 800; color: #5A2D14; }
/* Explore premium zones: Live & Video with straight edges; swipe-only carousels with snapping */
.zone-lv { border-radius: 0 !important; }
.zone .rail { scroll-snap-type: x mandatory; scroll-padding-inline: 18px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.zone-lv .lvr-card, .zone-fx .fe-card { scroll-snap-align: start; }
.zone .rail:focus-visible { outline: 2px solid #E6BD78; outline-offset: 4px; }
/* Featured Experiences: a richer champagne & golden-beige backdrop */
.zone-fx { background: radial-gradient(120% 70% at 85% 0%, rgba(230, 189, 120, .35) 0%, rgba(230, 189, 120, 0) 60%), linear-gradient(180deg, #F1E2CE 0%, #F4E6D2 50%, #FFF8EE 100%) !important; border-top: 1px solid rgba(180, 122, 67, .35); }
.zone-fx::before { opacity: .08 !important; }
.zone-fx .sec-head h2 { position: relative; padding-left: 12px; }
.zone-fx .sec-head h2::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #E6BD78, #B47A43); }
.zone-fx .fe-card { border-color: #E2C79E !important; }
/* Activity: the header scrolls away naturally; standard title size; tidy cards */
.act2-top.act2-pin { position: static !important; box-shadow: none !important; padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px 6px !important; }
.act2-top.act2-pin .c-title { font-size: 1.3rem !important; font-weight: 800; line-height: 1.2; }
.act2-pin .act2-cart { width: 44px !important; height: 44px !important; }
.act2-pin .act2-cart svg { width: 21px !important; height: 21px !important; }
.atx.ax { padding: 12px !important; gap: 12px !important; border-radius: 18px !important; }
.ax-body { gap: 5px !important; }
.ax-ref { font-size: .7rem; color: #9A8471; letter-spacing: .01em; }
.ax-foot { padding-top: 4px; }
/* beats the phone-only full-bleed rule (body:not(.desk) .r3-home .home-gold-intro > .r3-hero) */
html body:not(.desk) .r3-home .home-gold-intro > .r3-hero.r3-hero { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; border-radius: 22px !important; overflow: hidden !important; }
/* =========================================================
v126 — Explore cultural digital mall
========================================================= */
/* Live & Video: 2 × 2 */
.zone-lv .lv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.zone-lv .lv-grid > .lvr-card { flex: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; display: flex; flex-direction: column; }
.zone-lv .lv-grid > .lvr-card :is(.pic, img) { aspect-ratio: 16 / 11 !important; }
.zone-lv .lv-grid .lvr-t { font-size: .82rem !important; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.zone-lv .lv-grid .lvr-card :is(p, small, .lvr-by, .lvr-cat) { font-size: .68rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-lv .lv-grid .lvr-card .avatar { width: 18px !important; height: 18px !important; font-size: .5rem !important; }
.zone-lv .lv-grid .lvr-view { margin-top: auto !important; min-height: 32px !important; padding: 0 10px !important; font-size: .7rem !important; background: transparent !important; border: 1.5px solid #E6BD78 !important; color: #F6DDAE !important; border-radius: 999px !important; }
/* Promoted for You: billboard */
.bb-rail { gap: 12px !important; scroll-snap-type: x mandatory; padding-bottom: 4px !important; }
.bb-card { position: relative; flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 3.6; max-height: 360px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(241, 226, 206, .7); box-shadow: 0 20px 34px -24px rgba(40, 18, 6, .9); }
.bb-card .bb-img { position: absolute; inset: 0; } .bb-card .bb-img img { width: 100%; height: 100%; object-fit: cover; }
.bb-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 18, 6, .1) 0%, rgba(40, 18, 6, 0) 30%, rgba(52, 24, 9, .78) 68%, rgba(52, 24, 9, .94) 100%); }
.bb-tag { position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 248, 238, .95); color: #633018; font-size: .66rem; font-weight: 800; }
.bb-over { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 14px 16px 16px; color: #FFF8EE; }
.bb-kick { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #F6DDAE; }
.bb-title { font-size: 1.25rem; line-height: 1.2; } .bb-by { font-size: .74rem; color: rgba(255, 248, 238, .85); }
.bb-msg { margin: 2px 0 0; font-size: .78rem; line-height: 1.4; color: rgba(255, 248, 238, .9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.bb-price { font-size: 1.15rem; color: #FFF1D6; white-space: nowrap; } .bb-price small { font-size: .7rem; font-weight: 500; }
.bb-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; background: #FFF1D6 !important; color: #633018 !important; gap: 6px; white-space: nowrap; }
/* Sponsored picks panel */
.pk-panel { margin-top: 14px; padding: 12px; border-radius: 20px; background: #FFF8EE; border: 1px solid rgba(241, 226, 206, .9); box-shadow: 0 14px 26px -22px rgba(40, 18, 6, .8); }
.pk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 10px; } .pk-head b { color: #633018; font-size: .92rem; } .pk-head small { color: #8A6F5A; font-size: .7rem; }
.pk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pk-grid.pk-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .pk-grid.pk-scroll > .pk-card { flex: 0 0 46%; scroll-snap-align: start; }
.pk-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #EFE0CA; }
.pk-media { position: relative; display: block; aspect-ratio: 1 / 1; padding: 0; border: 0; background: #EFE4D2; cursor: pointer; } .pk-media :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
.pk-tag { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(99, 48, 24, .88); color: #FFF8EE; font-size: .58rem; font-weight: 800; }
.pk-info { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; }
.pk-title { font-size: .82rem; line-height: 1.25; color: #3B1E0E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.pk-info small { font-size: .66rem; color: #8A6F5A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-price { font-size: .92rem; color: #633018; } .pk-price small { font-size: .62rem; font-weight: 500; color: #8A6F5A; }
.pk-btn { margin-top: auto; width: 100%; min-height: 34px; justify-content: center; border-radius: 999px; background: linear-gradient(135deg, #925426, #633018) !important; color: #FFF8EE !important; font-size: .72rem; white-space: nowrap; }
/* Featured Experiences: caramel zone */
.zone-fx { background: radial-gradient(120% 70% at 85% 0%, rgba(208, 163, 107, .55) 0%, rgba(208, 163, 107, 0) 60%), linear-gradient(170deg, #B47A43 0%, #A56C38 45%, #95602F 100%) !important; border-top: 2px solid rgba(208, 163, 107, .6) !important; border-radius: 0 !important; }
.zone-fx::before { opacity: .12 !important; }
.zone-fx .sec-head h2 { color: #FFF5E6 !important; text-shadow: 0 1px 2px rgba(40, 18, 6, .35); }
.zone-fx .sec-head h2::before { background: linear-gradient(180deg, #FFF5E6, #D0A36B) !important; }
.xb-card { position: relative; aspect-ratio: 4 / 3.4; max-height: 340px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255, 245, 230, .6); box-shadow: 0 20px 34px -24px rgba(40, 18, 6, .9); margin-bottom: 14px; }
.xb-card .xb-img { position: absolute; inset: 0; } .xb-card .xb-img img { width: 100%; height: 100%; object-fit: cover; }
.xb-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 18, 6, 0) 30%, rgba(60, 28, 10, .82) 70%, rgba(60, 28, 10, .95) 100%); }
.xb-over { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 14px 16px 16px; color: #FFF5E6; }
.xb-kick { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #F2CF9A; }
.xb-title { font-size: 1.22rem; line-height: 1.2; } .xb-msg { margin: 0; font-size: .78rem; line-height: 1.4; color: rgba(255, 245, 230, .9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xb-meta { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: rgba(255, 245, 230, .88); }
.xb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.xb-price { font-size: 1.12rem; white-space: nowrap; } .xb-price small { font-size: .7rem; font-weight: 500; }
.xb-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; background: #FFF5E6 !important; color: #633018 !important; gap: 6px; white-space: nowrap; }
.zone-fx .fe-card { background: #FFF5E6 !important; border-color: rgba(255, 245, 230, .7) !important; }
.zone-fx .fe-title, .zone-fx .fe-price { color: #633018 !important; }
/* Promoted for You: brighter radiant gold, clearly lighter than the caramel Featured Experiences */
.zone-pr { background: radial-gradient(110% 60% at 50% 0%, rgba(255, 230, 180, .55) 0%, rgba(255, 230, 180, 0) 65%), linear-gradient(170deg, #D9AE72 0%, #C99350 40%, #B47A43 100%) !important; }
.zone-pr .sec-head h2 { color: #4A230F !important; text-shadow: none !important; } .zone-pr .sec-head h2 svg { color: #633018 !important; } .zone-pr .pr-note { color: #5A3220 !important; }
.zone-pr .sp-dot { background: rgba(99, 48, 24, .35) !important; } .zone-pr .sp-dot.on { background: #633018 !important; }
/* =========================================================
v127 — Home, Explore, Activity final refinements
========================================================= */
/* Picked for You */
.r3-home .stc-rail > .fy > .stc { background: #FFF9F0 !important; }
.r3-home .stc-rail > .fy .stc-body > b:not(.fy-price) { color: #633018 !important; }
.r3-home .fy .fy-by { font-size: .74rem; font-weight: 600; color: #7A4B2E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r3-home .fy .fy-loc { display: inline-flex !important; align-items: center; gap: 3px; font-size: .72rem !important; color: #A87955 !important; }
.r3-home .fy .fy-loc svg { flex: 0 0 auto; color: #A87955; }
.r3-home .fy .fy-price { display: block; margin: 0 0 10px; font-size: .98rem; font-weight: 800; color: #925426; } .r3-home .fy .fy-price small { font-size: .68rem; font-weight: 500; color: #A87955; }
.r3-home .stc-rail > .fy .stc-body :is(p, .stc-line) { margin: 4px 0 10px !important; }
/* LOCARTA Live / LOCARTA Videos gateways */
.gw-sec { display: grid; gap: 12px; margin: 22px 0 6px; }
.gw { position: relative; display: grid; gap: 12px; width: 100%; padding: 14px; border: 1px solid rgba(230, 189, 120, .35); border-radius: 20px; text-align: left; font: inherit; color: #FFF8EE; cursor: pointer; overflow: hidden; isolation: isolate; box-shadow: 0 14px 26px -20px rgba(40, 18, 6, .85); }
.gw::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lx-textile, none) repeat; background-size: 12px 12px; opacity: .12; }
.gw-live { background: linear-gradient(135deg, #6B3A1C 0%, #5A2D16 55%, #3E1D0D 100%); }
.gw-vid { background: linear-gradient(135deg, #C08347 0%, #A56C38 55%, #8A5228 100%); }
.gw-top { display: flex; align-items: center; gap: 10px; } .gw-top > svg { flex: 0 0 auto; color: #F6DDAE; }
.gw-ic { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 241, 214, .16); border: 1px solid rgba(255, 241, 214, .35); color: #F6DDAE; }
.gw-txt { flex: 1; display: grid; gap: 2px; min-width: 0; } .gw-txt b { font-size: 1.02rem; color: #FFF8EE; } .gw-txt small { font-size: .74rem; line-height: 1.35; color: rgba(255, 248, 238, .85); }
.gw-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.gw-th { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: rgba(255, 248, 238, .12); border: 1px solid rgba(255, 241, 214, .25); }
.gw-th :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
.gw-live i, .gw-th .gw-live { position: absolute; top: 4px; left: 4px; padding: 1px 5px; border-radius: 6px; background: #C0392B; color: #fff; font-size: .55rem; font-style: normal; font-weight: 800; }
.gw-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(40, 18, 6, .55); color: #FFF8EE; font-style: normal; }
/* Explore · Live & Video cards in coffee/caramel */
.zone-lv .lvr-card { background: linear-gradient(180deg, #6E3D1E 0%, #57301A 100%) !important; border-color: rgba(230, 189, 120, .32) !important; }
.zone-lv .lvr-card :is(small, p, .lvr-cat, .lvr-by) { color: rgba(255, 241, 214, .82) !important; }
.zone-lv .lvr-card svg { color: #E6BD78 !important; }
/* Promoted billboard: the next campaign peeks in */
.bb-rail > .bb-card { flex: 0 0 90% !important; }
/* Featured Experiences: editorial travel cards with an overlapping cream panel */
.ed-kick { margin: -6px 0 12px; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #F2CF9A; }
.ed-rail { gap: 14px !important; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; padding-bottom: 6px !important; align-items: stretch; }
.ed-card { flex: 0 0 82%; max-width: 330px; scroll-snap-align: start; display: flex; flex-direction: column; }
.ed-photo { display: block; aspect-ratio: 4 / 3.1; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: #E9D6BB; cursor: pointer; box-shadow: 0 16px 28px -22px rgba(40, 18, 6, .9); }
.ed-photo :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
.ed-panel { position: relative; flex: 1; display: flex; flex-direction: column; gap: 5px; margin: -44px 12px 0; padding: 12px 14px 14px; border-radius: 18px; background: #FFF5E6; border: 1px solid rgba(208, 163, 107, .55); box-shadow: 0 14px 24px -18px rgba(40, 18, 6, .8); }
.ed-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ed-chips span { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; background: #F3E2C8; color: #925426; font-size: .68rem; font-weight: 700; }
.ed-title { font-size: 1.02rem; line-height: 1.25; color: #633018; } .ed-host { font-size: .72rem; color: #A87955; }
.ed-desc { margin: 0; font-size: .78rem; line-height: 1.42; color: #7A5A44; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ed-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.ed-price { font-size: 1rem; color: #633018; white-space: nowrap; } .ed-price small { font-size: .66rem; font-weight: 500; color: #A87955; }
.ed-btn { min-height: 40px; padding: 0 14px; border-radius: 999px; background: linear-gradient(135deg, #925426, #633018) !important; color: #FFF8EE !important; white-space: nowrap; font-size: .8rem; }
/* Activity */
.act2-top.act2-pin { padding-bottom: 0 !important; }
.act2.act-head { padding-top: 0 !important; } .act2 .act2-tabs { margin-top: 8px !important; }
.act2 .act2-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.act2 .act2-tabs > [data-act=act-v] { min-height: 46px; padding: 0 4px !important; gap: 5px !important; font-size: .84rem !important; font-weight: 700 !important; border-radius: 14px !important; }
.act2 .act2-tabs > [data-act=act-v] svg { flex: 0 0 16px !important; width: 16px !important; height: 16px !important; }
.act2 .act2-tabs > [data-act=act-v]:not([aria-selected="true"]) { color: #633018 !important; }
@media (max-width: 380px) { .act2 .act2-tabs > [data-act=act-v] svg { display: none !important; } }
.ax-badge { min-height: 20px; padding: 3px 8px !important; font-size: .6rem !important; font-weight: 800 !important; letter-spacing: .06em; border: 1px solid rgba(255, 248, 238, .25); }
.ax-badge.k-auction { background: #B47A43 !important; color: #FFF8EE !important; }
.ax-badge.k-bid { background: #B47A43 !important; color: #FFF8EE !important; }
.ax-badge.k-order { background: #925426 !important; color: #FFF8EE !important; }
.ax-badge.k-booking { background: #C9935A !important; color: #3B1E0E !important; }
.ax-badge.k-saved { background: #F2E2CC !important; color: #633018 !important; }
.r3-home .stc-rail > .fy .stc-body > b.fy-price { color: #925426 !important; font-size: .98rem !important; font-weight: 800 !important; }
/* =========================================================
v128 — gateways, clean experiences, parcel tracking, checkout
========================================================= */
.gw2-sec { margin: 22px 0 6px; }
.gw2-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gw2 { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 10px 10px; border: 1px solid #E8D6BC; border-radius: 18px; background: #FFF9F0; color: #633018; text-align: left; font: inherit; cursor: pointer; box-shadow: 0 12px 22px -20px rgba(58, 26, 9, .7); }
.gw2-h { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .gw2-h b { font-size: .86rem; font-weight: 800; letter-spacing: .02em; color: #633018; } .gw2-h svg { color: #925426; flex: 0 0 auto; }
.gw2-live .gw2-h b { color: #7A3A1A; } .gw2-vid .gw2-h b { color: #925426; }
.gw2-sub { font-size: .66rem; line-height: 1.35; color: #8A6F5A; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gw2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.gw2-th { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #EFE4D2; }
.gw2-th :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
.gw2-th::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(0deg, rgba(40, 18, 6, .75), transparent); pointer-events: none; }
.gw2-lbl { position: absolute; z-index: 1; left: 5px; right: 5px; bottom: 4px; font-style: normal; font-size: .56rem; font-weight: 700; line-height: 1.2; color: #FFF8EE; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gw2-live-b { position: absolute; z-index: 1; top: 4px; left: 4px; padding: 1px 5px; border-radius: 6px; background: #B23A23; color: #fff; font-size: .52rem; font-style: normal; font-weight: 800; }
.gw2-play { position: absolute; z-index: 1; top: 5px; right: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(40, 18, 6, .55); color: #FFF8EE; font-style: normal; }
.gw2-play svg { width: 10px; height: 10px; }
.zone-lv .gw2-pair { margin-top: 4px; } .zone-lv .gw2 { background: #FBEEDC; border-color: rgba(230, 189, 120, .55); }
/* Featured Experiences — clean cards */
.fx2-rail { gap: 14px !important; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; padding-bottom: 6px !important; align-items: stretch; }
.fx2-card { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #FFF5E6; border: 1px solid rgba(208, 163, 107, .7); box-shadow: 0 14px 26px -22px rgba(40, 18, 6, .9); }
.fx2-photo { display: block; aspect-ratio: 4 / 3; padding: 0; border: 0; background: #E9D6BB; cursor: pointer; } .fx2-photo :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
.fx2-info { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.fx2-title { font-size: 1rem; line-height: 1.25; color: #633018; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.fx2-host { font-size: .72rem; color: #7A5A44; } .fx2-meta { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: .7rem; color: #A87955; } .fx2-meta svg { color: #B47A43; }
.fx2-desc { margin: 2px 0 0; font-size: .76rem; line-height: 1.42; color: #7A5A44; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.84em; }
.fx2-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.fx2-price { font-size: .98rem; color: #925426; white-space: nowrap; } .fx2-price small { font-size: .64rem; font-weight: 500; color: #A87955; }
.fx2-btn { min-height: 38px; padding: 0 14px; border-radius: 999px; background: linear-gradient(135deg, #925426, #633018) !important; color: #FFF8EE !important; white-space: nowrap; font-size: .76rem; }
.zone-fx .ed-kick { display: none; }
/* billboard pause/play */
.zone-pr .sp-dots { align-items: center; }
.bb-pp { display: grid; place-items: center; width: 26px; height: 26px; margin-left: 8px; padding: 0; border: 1px solid rgba(99, 48, 24, .35); border-radius: 50%; background: rgba(255, 248, 238, .7); color: #633018; font-size: .55rem; cursor: pointer; }
/* Activity: Loka tracking card + map page */
.trk-card { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, #FFF6E8, #F4E1C3); border: 1px solid #E6CFA8; }
.trk-loka { flex: 0 0 auto; width: 84px; height: 84px; object-fit: contain; }
.trk-txt { display: grid; gap: 3px; justify-items: start; } .trk-txt b { font-size: .98rem; color: #633018; } .trk-txt small { font-size: .76rem; color: #8A6F5A; }
.trk-btn { margin-top: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: linear-gradient(135deg, #925426, #633018) !important; color: #FFF8EE !important; gap: 6px; }
.trk-say { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; } .trk-say img { width: 52px; height: 52px; object-fit: contain; }
.trk-say p { margin: 0; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #FFF6E8; border: 1px solid #E6CFA8; color: #633018; font-weight: 600; font-size: .86rem; }
.trk-map { height: 300px; border-radius: 18px; overflow: hidden; background: #F1E4D1; border: 1px solid #E6CFA8; display: grid; place-items: center; color: #8A6F5A; font-size: .82rem; }
.trk-nomap { padding: 20px; text-align: center; display: grid; gap: 6px; justify-items: center; }
.trk-pin span { display: block; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.trk-pin.from span { background: #B47A43; } .trk-pin.to span { background: #633018; }
.trk-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 2px; font-size: .7rem; color: #8A6F5A; }
.trk-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .trk-dot.from { background: #B47A43; } .trk-dot.to { background: #633018; }
.trk-dash { display: inline-block; width: 22px; border-top: 2px dashed #925426; }
.trk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.trk-facts > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: #FFF9F0; border: 1px solid #EADCC8; } .trk-facts small { font-size: .68rem; color: #8A6F5A; } .trk-facts b { font-size: .86rem; color: #633018; }
.trk-note { display: flex; gap: 6px; font-size: .74rem; line-height: 1.45; color: #7A5A44; margin: 6px 0 12px; }
/* Checkout */
.co-contact { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #EADCC8; border-radius: 14px; background: #FFF9F0; }
.co-contact span { display: grid; gap: 2px; min-width: 0; } .co-contact b { font-size: .9rem; font-weight: 600; color: #38251B; } .co-contact small { font-size: .74rem; color: #806B5A; overflow-wrap: anywhere; }
.co-fee small { font-size: .68rem; color: #8A6F5A; }
.co-page-h h1 { font-size: 1.15rem !important; }
.co2 .co-h { font-weight: 700; } .co2 .field { font-weight: 400; }
@media (max-width: 899px) {
body:not(.desk) .co2.co2-fixed { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
body:not(.desk) .co2.co2-fixed .co-nav { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; margin: 0 !important; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 248, 238, .97); border-top: 1px solid #EADCC8; box-shadow: 0 -10px 24px -18px rgba(58, 26, 9, .6); }
body:not(.desk) .co2.co2-fixed .co-nav .co-next { flex: 1; min-height: 50px; justify-content: center; background: linear-gradient(135deg, #925426, #633018) !important; color: #FFF8EE !important; }
}
.gw2-h b { font-size: .78rem !important; letter-spacing: .01em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 360px) { .gw2-h b { font-size: .74rem !important; white-space: normal !important; overflow: visible !important; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; } }
/* =========================================================
Creator profile: unified information card
Groups badges, skills, interests, and background into one
calm cream panel while preserving each section's actions.
========================================================= */
.crp2 .crp-info-card {
margin: 20px 0 22px;
padding: 15px 16px;
border: 1px solid #E8DCCB;
border-radius: 18px;
background: linear-gradient(155deg, #FFFCF7 0%, #F8F0E4 100%);
box-shadow: 0 7px 18px -16px rgba(69, 42, 23, .45), inset 0 1px 0 rgba(255,255,255,.8);
min-width: 0;
}
.crp2 .crp-info-section { min-width: 0; }
.crp2 .crp-info-section + .crp-info-section {
margin-top: 15px;
padding-top: 14px;
border-top: 1px solid #E9DDCD;
}
.crp2 .crp-info-section:first-child .crp-h { margin-top: 0; }
.crp2 .crp-info-section .crp-h { margin: 0 0 10px; min-height: 24px; }
.crp2 .crp-info-section .crp-h h2 { gap: 7px; font-size: .91rem; line-height: 1.25; font-weight: 700; color: #50301D; }
.crp2 .crp-info-section .crp-h h2 > .ic { width: 16px; height: 16px; color: #95602F; flex: 0 0 auto; }
.crp2 .crp-info-section .crp-h .ci-more { font-size: .72rem; font-weight: 650; color: #925426; }
.crp2 .crp-info-card .sk-empty { margin: 0; font-size: .76rem; line-height: 1.45; color: #8B7662; }
.crp2 .crp-info-card .sk-empty .link { color: #925426; font-size: .76rem; font-weight: 700; }
.crp2 .crp-info-card .crp-badges { gap: 7px; align-items: center; }
.crp2 .crp-info-card .crp-badges li { max-width: 100%; }
.crp2 .crp-info-card .crp-badges button { display: inline-flex; max-width: 100%; border-radius: 999px; }
.crp2 .crp-info-card .crp-badges .lb { border-radius: 999px; height: 23px; padding-inline: 8px; font-size: 10.5px; }
.crp2 .crp-info-card .crp-skills { gap: 10px; }
.crp2 .crp-info-card .crp-sk-row { align-items: baseline; font-size: .78rem; }
.crp2 .crp-info-card .crp-sk-row b { font-weight: 600; }
.crp2 .crp-info-card .crp-sk-row > span { color: #925426; font-size: .76rem; }
.crp2 .crp-info-card .crp-bar { height: 5px; background: #E9DDCA; }
.crp2 .crp-info-card .crp-bar i { background: linear-gradient(90deg, #C99750, #925426); }
.crp2 .crp-info-card .crp-note { margin-top: 8px; color: #8A735D; }
.crp2 .crp-info-card .crp-ci {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 13px 8px;
}
.crp2 .crp-info-card .crp-ci li { min-width: 0; }
.crp2 .crp-info-card .crp-ci li > button,
.crp2 .crp-info-card .crp-ci li > span { gap: 5px; }
.crp2 .crp-info-card .crp-ci i {
width: 46px; height: 46px;
border: 1px solid #E7D4B7;
background: linear-gradient(145deg, #FFF9ED, #EEDBB9);
color: #95602F;
box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.crp2 .crp-info-card .crp-ci .on i {
border-color: #D1A45D;
background: linear-gradient(145deg, #FBEBCB, #E7C98E);
color: #754321;
}
.crp2 .crp-info-card .crp-ci em { border-color: #FFFCF7; background: #A87543; }
.crp2 .crp-info-card .crp-ci small { max-width: 100%; font-size: .7rem; line-height: 1.25; color: #8B7662; }
.crp2 .crp-info-card .crp-ci .on small { color: #633018; font-weight: 650; }
.crp2 .crp-info-card .crp-facts {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px 12px;
min-width: 0;
}
.crp2 .crp-info-card .crp-facts > div { min-width: 0; }
.crp2 .crp-info-card .crp-facts dt { font-size: .61rem; letter-spacing: .055em; color: #9A8067; }
.crp2 .crp-info-card .crp-facts dd { overflow-wrap: anywhere; font-size: .76rem; line-height: 1.4; color: #65452F; }
.crp2 .crp-info-card .crp-facts.more { margin-top: 10px; padding-top: 10px; border-color: #E9DDCD; }
.crp2 .crp-info-card .crp-bg-more { margin-top: 8px; font-size: .74rem; color: #925426; }
@media (max-width: 360px) {
.crp2 .crp-info-card { padding: 13px 12px; }
.crp2 .crp-info-card .crp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.crp2 .crp-info-card .crp-facts dt { font-size: .56rem; }
.crp2 .crp-info-card .crp-facts dd { font-size: .69rem; }
.crp2 .crp-info-card .crp-ci i { width: 42px; height: 42px; }
}
/* Creator profile information: tidy two-column badge layout on owner and public profiles. */
.crp2 .crp-info-card .crp-badges {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 8px;
}
.crp2 .crp-info-card .crp-badges li,
.crp2 .crp-info-card .crp-badges button {
width: 100%;
min-width: 0;
}
.crp2 .crp-info-card .crp-badges button {
justify-content: flex-start;
text-align: left;
}
.crp2 .crp-info-card .crp-badges .lb {
width: 100%;
justify-content: flex-start;
gap: 5px;
}
/* =========================================================
v129 — Explore premium editorial treatment
A polished creator spotlight and curated experience collection.
Keeps LOCARTA's Lexend type family, with a lighter editorial hierarchy.
========================================================= */
.zone-pr,
.zone-fx {
padding: 25px 18px 27px !important;
}
/* Premium creator spotlight: espresso, champagne and warm ivory */
.zone-pr {
background:
radial-gradient(100% 68% at 100% 0%, rgba(190, 145, 82, .22), transparent 66%),
linear-gradient(148deg, #342014 0%, #432A1B 48%, #28170F 100%) !important;
border-top: 1px solid rgba(222, 190, 132, .55) !important;
border-bottom: 1px solid rgba(222, 190, 132, .42) !important;
}
.zone-pr::before { opacity: .055 !important; }
.zone-pr .sec-head,
.zone-fx .sec-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: 5px 10px !important;
align-items: end !important;
margin-bottom: 8px !important;
}
.zone-pr .sec-head::before,
.zone-fx .sec-head::before {
grid-column: 1 / -1;
display: block;
font-size: .59rem;
line-height: 1.2;
font-weight: 750;
letter-spacing: .2em;
text-transform: uppercase;
}
.zone-pr .sec-head::before { content: "THE LOCARTA CREATOR EDIT"; color: #D9BB83; }
.zone-pr .sec-head h2,
.zone-fx .sec-head h2 {
margin: 0 !important;
font-family: var(--display) !important;
font-size: 1.23rem !important;
line-height: 1.22 !important;
font-weight: 560 !important;
letter-spacing: -.035em !important;
}
.zone-pr .sec-head h2 { color: #FFF3DD !important; text-shadow: none !important; }
.zone-pr .sec-head h2 svg { color: #DDBB7D !important; }
.zone-pr .pr-note {
margin: 2px 0 14px !important;
max-width: 34rem;
color: rgba(255, 243, 221, .76) !important;
font-size: .75rem !important;
line-height: 1.5 !important;
letter-spacing: .01em;
}
.zone-pr .bb-rail {
gap: 13px !important;
padding: 2px 1px 8px !important;
scroll-padding-inline: 1px !important;
align-items: stretch !important;
}
.zone-pr .bb-rail > .bb-card {
flex: 0 0 91% !important;
max-width: 390px;
min-width: 0;
min-height: 0;
aspect-ratio: auto !important;
max-height: none !important;
display: flex !important;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(219, 188, 132, .92) !important;
border-radius: 23px !important;
background: #F4EADB !important;
box-shadow: 0 22px 42px -28px rgba(0, 0, 0, .82), 0 2px 0 rgba(255, 255, 255, .35) inset !important;
}
.zone-pr .bb-card .bb-img {
position: relative !important;
inset: auto !important;
display: block;
flex: 0 0 205px;
width: 100%;
height: 205px !important;
min-height: 0;
overflow: hidden;
background: #D8C2A4;
}
.zone-pr .bb-card .bb-img :is(img, .pic) {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.zone-pr .bb-card::after { display: none !important; }
.zone-pr .bb-tag {
top: 12px !important;
left: 12px !important;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 10px !important;
border: 1px solid rgba(214, 183, 125, .9);
border-radius: 999px !important;
background: rgba(250, 245, 235, .96) !important;
color: #694523 !important;
font-size: .58rem !important;
font-weight: 800 !important;
letter-spacing: .12em;
text-transform: uppercase;
box-shadow: 0 4px 12px rgba(35, 20, 12, .16);
}
.zone-pr .bb-over {
position: relative !important;
inset: auto !important;
display: grid;
gap: 5px !important;
padding: 15px 17px 17px !important;
background: linear-gradient(155deg, #FFF9F0 0%, #F0E2CF 100%);
color: #3C281B !important;
}
.zone-pr .bb-kick {
color: #9B7344 !important;
font-size: .59rem !important;
font-weight: 800 !important;
letter-spacing: .17em !important;
text-transform: uppercase;
}
.zone-pr .bb-title {
color: #382317 !important;
font-size: 1.18rem !important;
line-height: 1.23 !important;
font-weight: 650 !important;
letter-spacing: -.025em;
}
.zone-pr .bb-by {
color: #876E58 !important;
font-size: .71rem !important;
line-height: 1.35;
}
.zone-pr .bb-msg {
margin: 3px 0 0 !important;
color: #725B47 !important;
font-size: .74rem !important;
line-height: 1.48 !important;
-webkit-line-clamp: 2;
}
.zone-pr .bb-foot { margin-top: 8px !important; align-items: center; }
.zone-pr .bb-price { color: #79502B !important; font-size: 1.02rem !important; font-weight: 750 !important; }
.zone-pr .bb-price small { color: #927C65 !important; font-size: .66rem !important; }
.zone-pr .bb-btn {
min-height: 42px !important;
padding: 0 15px !important;
border: 1px solid #B48B54 !important;
border-radius: 12px !important;
background: linear-gradient(135deg, #654329, #392316) !important;
color: #FFF6E8 !important;
font-size: .74rem !important;
font-weight: 700 !important;
letter-spacing: .01em;
box-shadow: 0 5px 12px rgba(57, 35, 22, .16);
}
.zone-pr .sp-dots { display: flex; justify-content: center; gap: 7px; margin: 8px 0 4px !important; }
.zone-pr .sp-dot { width: 6px !important; height: 6px !important; border: 0 !important; background: rgba(237, 215, 176, .35) !important; }
.zone-pr .sp-dot.on { width: 21px !important; border-radius: 99px !important; background: #E4C58D !important; }
.zone-pr .bb-pp {
width: 28px !important; height: 28px !important; margin-left: 5px !important;
border-color: rgba(224, 195, 146, .7) !important;
background: rgba(255, 247, 232, .12) !important;
color: #F5E2BF !important;
}
/* Sponsored picks: a quiet ivory gallery inside the espresso showcase */
.zone-pr .pk-panel {
margin-top: 15px !important;
padding: 14px !important;
border: 1px solid rgba(211, 179, 125, .75) !important;
border-radius: 21px !important;
background: linear-gradient(145deg, #F9F1E3 0%, #EAD9BF 100%) !important;
box-shadow: 0 16px 30px -23px rgba(0, 0, 0, .64), inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}
.zone-pr .pk-head { margin: 0 2px 11px !important; align-items: baseline; }
.zone-pr .pk-head b { color: #52351F !important; font-size: .94rem !important; font-weight: 650 !important; letter-spacing: -.015em; }
.zone-pr .pk-head small { color: #967B5D !important; font-size: .65rem !important; letter-spacing: .04em; }
.zone-pr .pk-grid { gap: 9px !important; }
.zone-pr .pk-card {
border: 1px solid #DCC7A5 !important;
border-radius: 16px !important;
background: #FFF9F0 !important;
box-shadow: 0 8px 18px -16px rgba(58, 34, 18, .8) !important;
}
.zone-pr .pk-media { aspect-ratio: 4 / 3.25 !important; background: #E3D1B5 !important; }
.zone-pr .pk-tag {
top: 7px !important; left: 7px !important;
padding: 4px 8px !important;
border: 1px solid rgba(232, 210, 171, .7);
background: rgba(62, 39, 24, .88) !important;
color: #FFF2D9 !important;
font-size: .55rem !important;
letter-spacing: .08em;
text-transform: uppercase;
}
.zone-pr .pk-info { gap: 4px !important; padding: 10px 10px 11px !important; }
.zone-pr .pk-title { color: #45301F !important; font-size: .8rem !important; font-weight: 650 !important; line-height: 1.3 !important; }
.zone-pr .pk-info > small { color: #90775D !important; font-size: .64rem !important; }
.zone-pr .pk-price { color: #80552E !important; font-size: .9rem !important; font-weight: 750 !important; }
.zone-pr .pk-btn {
min-height: 34px !important;
border: 1px solid #B58C57 !important;
border-radius: 10px !important;
background: linear-gradient(135deg, #6B482A, #42291A) !important;
color: #FFF6E8 !important;
font-size: .67rem !important;
font-weight: 700 !important;
}
/* Featured experiences: warm atelier-caramel backdrop with gallery-like cards */
.zone-fx {
background:
radial-gradient(95% 65% at 100% 0%, rgba(231, 197, 143, .25), transparent 65%),
linear-gradient(150deg, #8B5A36 0%, #795033 54%, #68432D 100%) !important;
border-top: 1px solid rgba(228, 197, 148, .58) !important;
border-radius: 0 0 24px 24px !important;
}
.zone-fx::before { opacity: .055 !important; }
.zone-fx .sec-head { margin-bottom: 14px !important; }
.zone-fx .sec-head::before { content: "CURATED CULTURAL JOURNEYS"; color: #E7C99A; }
.zone-fx .sec-head h2 { color: #FFF5E4 !important; text-shadow: none !important; }
.zone-fx .sec-head h2::before { content: none !important; }
.zone-fx .fx2-rail {
gap: 14px !important;
padding: 2px 1px 9px !important;
scroll-padding-inline: 1px !important;
align-items: stretch !important;
}
.zone-fx .fx2-card {
flex: 0 0 82% !important;
max-width: 320px !important;
min-width: 0;
border: 1px solid rgba(220, 190, 145, .95) !important;
border-radius: 22px !important;
background: linear-gradient(160deg, #FFF9F0 0%, #F1E3D0 100%) !important;
box-shadow: 0 18px 34px -24px rgba(27, 15, 9, .72), inset 0 1px 0 rgba(255, 255, 255, .85) !important;
}
.zone-fx .fx2-photo {
position: relative !important;
aspect-ratio: 4 / 3.05 !important;
overflow: hidden;
background: #D7C1A2 !important;
}
.zone-fx .fx2-photo::after {
content: "";
position: absolute;
inset: 45% 0 0;
pointer-events: none;
background: linear-gradient(0deg, rgba(38, 24, 15, .34), transparent);
}
.zone-fx .fx2-photo :is(.pic, img) { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.zone-fx .fx2-badge {
position: absolute;
z-index: 2;
left: 11px;
bottom: 10px;
display: inline-flex;
align-items: center;
padding: 5px 9px;
border: 1px solid rgba(231, 205, 162, .85);
border-radius: 999px;
background: rgba(54, 34, 21, .82);
color: #FFF1D5;
font-size: .56rem;
font-weight: 750;
letter-spacing: .12em;
text-transform: uppercase;
backdrop-filter: blur(8px);
}
.zone-fx .fx2-info { gap: 5px !important; padding: 13px 14px 14px !important; }
.zone-fx .fx2-title {
min-height: 0 !important;
color: #3E2A1B !important;
font-size: 1.02rem !important;
font-weight: 650 !important;
line-height: 1.28 !important;
letter-spacing: -.025em;
}
.zone-fx .fx2-host { color: #94785D !important; font-size: .7rem !important; }
.zone-fx .fx2-meta { margin-top: 1px; color: #8B6A49 !important; font-size: .68rem !important; }
.zone-fx .fx2-meta svg { color: #AA7D46 !important; }
.zone-fx .fx2-desc {
min-height: 2.8em;
color: #705A45 !important;
font-size: .74rem !important;
line-height: 1.48 !important;
}
.zone-fx .fx2-foot { padding-top: 9px !important; border-top: 1px solid #E6D5BD; }
.zone-fx .fx2-price { color: #76502C !important; font-size: .98rem !important; font-weight: 750 !important; }
.zone-fx .fx2-price small { color: #977F66 !important; font-size: .63rem !important; }
.zone-fx .fx2-btn {
min-height: 40px !important;
padding: 0 13px !important;
border: 1px solid #BA9562 !important;
border-radius: 11px !important;
background: linear-gradient(135deg, #704B2C, #422A1B) !important;
color: #FFF7E9 !important;
font-size: .71rem !important;
font-weight: 700 !important;
box-shadow: 0 5px 12px rgba(56, 34, 20, .16);
}
@media (max-width: 380px) {
.zone-pr, .zone-fx { padding-left: 15px !important; padding-right: 15px !important; }
.zone-pr .bb-card .bb-img { flex-basis: 180px; height: 180px !important; }
.zone-pr .bb-over { padding: 13px 14px 15px !important; }
.zone-pr .bb-title { font-size: 1.08rem !important; }
.zone-pr .bb-foot { gap: 6px !important; }
.zone-pr .bb-btn { padding: 0 10px !important; font-size: .68rem !important; }
.zone-fx .fx2-card { flex-basis: 86% !important; }
}
/* =========================================================
v130 — Explore premium headings: centered calligraphic elegance
Applies only to Promoted for You, Sponsored Picks, and Featured Experiences.
Card details and functional labels retain the readable Lexend family.
========================================================= */
.zone-pr .sec-head,
.zone-fx .sec-head {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
min-height: 82px;
margin: 0 0 13px !important;
padding: 4px 64px 2px !important;
text-align: center !important;
}
.zone-pr .sec-head::before,
.zone-fx .sec-head::before {
display: block !important;
width: 100%;
order: 0;
text-align: center !important;
font-family: var(--sans) !important;
font-size: .57rem !important;
line-height: 1.35 !important;
font-weight: 650 !important;
letter-spacing: .24em !important;
}
.zone-pr .sec-head h2,
.zone-fx .sec-head h2 {
display: block !important;
width: 100%;
order: 1;
margin: 0 !important;
padding: 0 !important;
font-family: "Allura", "URW Chancery L", "Apple Chancery", cursive !important;
font-size: 2.12rem !important;
font-weight: 400 !important;
line-height: 1.04 !important;
letter-spacing: .012em !important;
text-align: center !important;
text-shadow: none !important;
}
.zone-pr .sec-head h2::after,
.zone-fx .sec-head h2::after {
content: "";
display: block;
width: 48px;
height: 1px;
margin: 7px auto 0;
opacity: .9;
background: linear-gradient(90deg, transparent, currentColor 24%, currentColor 76%, transparent);
}
.zone-pr .sec-head h2 svg {
width: 13px !important;
height: 13px !important;
vertical-align: middle;
margin-right: 4px;
color: #DDBB7D !important;
stroke-width: 1.5;
}
.zone-pr .sec-head .see-all,
.zone-fx .sec-head .see-all {
position: absolute !important;
top: 5px;
right: 0;
align-self: auto !important;
margin: 0 !important;
padding: 5px 0 5px 5px !important;
font-family: var(--sans) !important;
font-size: .61rem !important;
font-weight: 550 !important;
letter-spacing: 0 !important;
white-space: nowrap;
}
.zone-pr .pr-note {
max-width: 31rem !important;
margin: 0 auto 15px !important;
text-align: center !important;
}
.zone-pr .pk-head {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 1px !important;
margin: 0 0 12px !important;
text-align: center !important;
}
.zone-pr .pk-head b {
color: #52351F !important;
font-family: "Allura", "URW Chancery L", "Apple Chancery", cursive !important;
font-size: 1.78rem !important;
font-weight: 400 !important;
line-height: 1.08 !important;
letter-spacing: .012em !important;
}
.zone-pr .pk-head small {
color: #967B5D !important;
font-family: var(--sans) !important;
font-size: .59rem !important;
line-height: 1.35 !important;
letter-spacing: .16em !important;
text-transform: uppercase;
}
.zone-fx .sec-head h2 { color: #FFF5E4 !important; }
@media (max-width: 380px) {
.zone-pr .sec-head,
.zone-fx .sec-head { min-height: 76px; padding-left: 54px !important; padding-right: 54px !important; }
.zone-pr .sec-head h2,
.zone-fx .sec-head h2 { font-size: 1.95rem !important; }
.zone-pr .sec-head .see-all,
.zone-fx .sec-head .see-all { font-size: .56rem !important; }
}
/* =========================================================
v131 — Explore: calligraphic Live & Video; straight-edged
Featured Experiences section with collectible-style gallery cards
========================================================= */
.zone-lv .sec-head {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
min-height: 70px;
margin: 0 0 12px !important;
text-align: center !important;
}
.zone-lv .sec-head h2 {
width: 100%;
margin: 0 !important;
color: #FFF5E4 !important;
font-family: "Allura", "URW Chancery L", "Apple Chancery", cursive !important;
font-size: 2.15rem !important;
font-weight: 400 !important;
line-height: 1.08 !important;
letter-spacing: .01em !important;
text-align: center !important;
text-transform: none !important;
}
.zone-lv .sec-head h2 .lvr-hic { display: none !important; }
.zone-lv .sec-head h2::after {
content: "";
display: block;
width: 48px;
height: 1px;
margin: 7px auto 0;
background: linear-gradient(90deg, transparent, #E6BD78 24%, #E6BD78 76%, transparent);
}
.zone-lv .sec-head .see-all { display: none !important; }
.zone-lv .gw2-h {
position: relative;
display: flex !important;
justify-content: center !important;
align-items: center !important;
min-height: 30px;
text-align: center !important;
}
.zone-lv .gw2-h b {
max-width: calc(100% - 20px);
overflow: visible !important;
color: #FFF2D8 !important;
font-family: "Allura", "URW Chancery L", "Apple Chancery", cursive !important;
font-size: 1.55rem !important;
font-weight: 400 !important;
line-height: 1.05 !important;
letter-spacing: .01em !important;
text-align: center !important;
white-space: normal !important;
}
.zone-lv .gw2-h svg {
position: absolute;
right: 0;
color: #E6BD78 !important;
}
/* Give the Featured Experiences backdrop a clean, architectural edge. */
.zone-fx {
border-radius: 0 !important;
clip-path: none !important;
-webkit-clip-path: none !important;
box-shadow: none !important;
}
.zone-fx::before { border-radius: 0 !important; }
/* Gallery treatment follows the LOCARTA Collectibles two-column image grid. */
.zone-fx .fx-gallery {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
gap: 12px !important;
align-items: stretch;
padding: 2px 0 8px !important;
overflow: visible !important;
scroll-snap-type: none !important;
}
.zone-fx .fxg-card {
box-sizing: border-box;
display: flex !important;
flex-direction: column !important;
min-width: 0;
width: 100%;
overflow: hidden;
border: 1px solid rgba(225, 198, 158, .9) !important;
border-radius: 16px !important;
background: #FFF8ED !important;
box-shadow: 0 10px 22px -17px rgba(40, 22, 12, .62), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.zone-fx .fxg-photo {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 0 !important;
background: #D9C3A5;
cursor: pointer;
}
.zone-fx .fxg-photo :is(.pic, img) {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.zone-fx .fxg-photo-tag {
position: absolute;
left: 7px;
bottom: 7px;
max-width: calc(100% - 14px);
padding: 4px 7px;
border: 1px solid rgba(235, 213, 180, .8);
border-radius: 7px;
background: rgba(54, 34, 21, .82);
color: #FFF3DF;
font-size: .5rem;
font-weight: 700;
letter-spacing: .09em;
line-height: 1.2;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.zone-fx .fxg-body {
display: flex;
flex: 1;
flex-direction: column;
align-items: stretch;
gap: 4px;
min-width: 0;
padding: 9px 10px 10px !important;
background: #FFF8ED;
}
.zone-fx .fxg-title {
display: -webkit-box;
min-height: 2.5em;
overflow: hidden;
color: #46301F !important;
font-size: .81rem !important;
font-weight: 650 !important;
line-height: 1.3 !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.zone-fx .fxg-host,
.zone-fx .fxg-meta {
display: block;
overflow: hidden;
color: #94785D !important;
font-size: .64rem !important;
line-height: 1.35 !important;
text-overflow: ellipsis;
white-space: nowrap;
}
.zone-fx .fxg-meta svg { width: 11px; height: 11px; color: #A87946 !important; vertical-align: -2px; }
.zone-fx .fxg-desc {
display: -webkit-box;
min-height: 2.7em;
margin: 2px 0 0 !important;
overflow: hidden;
color: #765F49 !important;
font-size: .67rem !important;
line-height: 1.4 !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.zone-fx .fxg-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
margin-top: auto;
padding-top: 8px;
border-top: 1px solid #E9D9C3;
}
.zone-fx .fxg-price {
min-width: 0;
color: #76502C !important;
font-size: .82rem !important;
font-weight: 750 !important;
white-space: nowrap;
}
.zone-fx .fxg-price small {
color: #977F66 !important;
font-size: .56rem !important;
font-weight: 500 !important;
}
.zone-fx .fxg-btn {
flex: 0 0 auto;
min-height: 32px !important;
padding: 0 10px !important;
border: 1px solid #B58C57 !important;
border-radius: 9px !important;
background: linear-gradient(135deg, #704B2C, #422A1B) !important;
color: #FFF7E9 !important;
font-size: .65rem !important;
font-weight: 700 !important;
white-space: nowrap;
}
@media (max-width: 360px) {
.zone-lv .sec-head h2 { font-size: 1.98rem !important; }
.zone-lv .gw2-h b { font-size: 1.38rem !important; }
.zone-fx .fx-gallery { gap: 9px !important; }
.zone-fx .fxg-body { padding: 8px !important; }
.zone-fx .fxg-price { font-size: .76rem !important; }
.zone-fx .fxg-btn { padding: 0 8px !important; font-size: .61rem !important; }
}
/* v132 — Explore Live & Video heading: centered calligraphy without the play badge */
.ex-lv .lvr-premium-head {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100%;
min-height: 92px;
margin: 0 auto 13px !important;
padding: 8px 12px 2px !important;
text-align: center !important;
box-sizing: border-box;
}
.ex-lv .lvr-premium-head h2 {
display: block !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
color: #FFF5E4 !important;
font-family: "Allura", "URW Chancery L", "Apple Chancery", cursive !important;
font-size: 2.45rem !important;
font-weight: 400 !important;
line-height: 1.04 !important;
letter-spacing: .01em !important;
text-align: center !important;
text-transform: none !important;
text-shadow: none !important;
}
.ex-lv .lvr-premium-head p {
max-width: 290px;
margin: 3px auto 0 !important;
color: rgba(255, 242, 220, .84) !important;
font-family: var(--sans) !important;
font-size: .68rem !important;
font-weight: 400 !important;
line-height: 1.45 !important;
letter-spacing: .015em !important;
text-align: center !important;
}
.ex-lv .lvr-premium-rule {
display: block;
width: 50px;
height: 1px;
margin: 8px auto 0;
background: linear-gradient(90deg, transparent, #E6BD78 22%, #E6BD78 78%, transparent);
}
/* Keep both Live and Videos gateway titles in the same elegant script treatment. */
.ex-lv .gw2-h {
justify-content: center !important;
align-items: center !important;
min-height: 34px;
text-align: center !important;
}
.ex-lv .gw2-h b {
display: block !important;
max-width: calc(100% - 16px);
color: #7A421F !important;
font-family: "Allura", "URW Chancery L", "Apple Chancery", cursive !important;
font-size: 1.48rem !important;
font-weight: 400 !important;
line-height: 1.04 !important;
letter-spacing: .005em !important;
text-align: center !important;
text-transform: none !important;
white-space: normal !important;
}
.ex-lv .gw2-h svg {
position: absolute !important;
right: 0 !important;
color: #A97843 !important;
}
@media (max-width: 360px) {
.ex-lv .lvr-premium-head { min-height: 88px; }
.ex-lv .lvr-premium-head h2 { font-size: 2.2rem !important; }
.ex-lv .gw2-h b { font-size: 1.32rem !important; }
}
/* v133 — Featured Experiences carousel modeled on the Collectibles showcase */
.zone-fx .fx3-showcase { width: 100%; }
.zone-fx .fx3-carousel {
position: relative;
height: clamp(258px, 43vh, 342px);
margin: 8px -18px 0;
perspective: 1100px;
outline: none;
touch-action: pan-y;
}
.zone-fx .fx3-carousel:focus-visible { box-shadow: inset 0 0 0 2px #E7C99A; border-radius: 18px; }
.zone-fx .fx3-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.zone-fx .fx3-card {
position: absolute;
top: 4%; left: 50%;
display: block;
width: 56%; height: 92%;
padding: 0;
overflow: hidden;
border: 1px solid rgba(233, 211, 177, .95);
border-radius: 21px;
background: #D8C3A6;
box-shadow: 0 18px 30px -18px rgba(35, 19, 10, .62);
transform-origin: 50% 50%;
transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease, box-shadow .3s ease;
cursor: pointer;
}
.zone-fx .fx3-card .pic { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.zone-fx .fx3-card :is(img, .pic img) { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.zone-fx .fx3-card:not(.on)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(44, 28, 16, .04), rgba(44, 28, 16, .28)); pointer-events: none; }
.zone-fx .fx3-card.on { box-shadow: 0 22px 36px -16px rgba(35, 19, 10, .7), 0 0 0 3px #F2E2C6; }
.zone-fx .fx3-tag {
position: absolute; z-index: 2; left: 9px; bottom: 9px;
max-width: calc(100% - 18px);
padding: 5px 8px;
overflow: hidden;
border: 1px solid rgba(235, 213, 180, .72);
border-radius: 7px;
background: rgba(54, 34, 21, .82);
color: #FFF3DF;
font-size: .53rem; font-weight: 750; letter-spacing: .1em;
text-overflow: ellipsis; white-space: nowrap;
backdrop-filter: blur(7px);
}
.zone-fx .fx3-nav {
position: absolute; top: 50%; z-index: 20;
display: grid; place-items: center;
width: 40px; height: 40px; margin-top: -20px; padding: 0;
border: 1px solid rgba(221, 197, 161, .82); border-radius: 50%;
background: rgba(255, 252, 247, .95); color: #70472B;
box-shadow: 0 6px 16px -8px rgba(45, 25, 12, .58);
}
.zone-fx .fx3-nav.prev { left: 10px; }
.zone-fx .fx3-nav.next { right: 10px; }
.zone-fx .fx3-dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 12px 0 0; }
.zone-fx .fx3-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 5px; background: #E3CBA7; transition: width .25s, background-color .25s; }
.zone-fx .fx3-dots button.on { width: 20px; background: #F9E9C9; }
.zone-fx .fx3-details { margin: 14px 0 0; }
.zone-fx .fx3-info-card {
display: flex; flex-direction: column; gap: 5px;
padding: 15px 15px 14px;
border: 1px solid rgba(238, 218, 187, .94);
border-radius: 17px;
background: linear-gradient(145deg, #FFF9F0 0%, #F2E4D1 100%);
color: #49301E;
box-shadow: 0 12px 26px -22px rgba(35, 19, 10, .72), inset 0 1px 0 rgba(255,255,255,.8);
}
.zone-fx .fx3-kicker { margin: 0; color: #9C7041; font-size: .58rem; font-weight: 750; letter-spacing: .18em; line-height: 1.3; }
.zone-fx .fx3-info-card h3 { margin: 0; color: #422A1B; font-size: 1.08rem; font-weight: 650; line-height: 1.27; letter-spacing: -.02em; }
.zone-fx .fx3-host { margin: 0; color: #8C7055; font-size: .7rem; line-height: 1.35; }
.zone-fx .fx3-meta { display: flex; flex-wrap: wrap; gap: 4px; margin: 1px 0 0; color: #8D6B47; font-size: .68rem; line-height: 1.4; }
.zone-fx .fx3-meta svg { width: 12px; height: 12px; color: #A87946; vertical-align: -2px; }
.zone-fx .fx3-desc { margin: 2px 0 0; color: #725C47; font-size: .74rem; line-height: 1.48; }
.zone-fx .fx3-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; padding-top: 10px; border-top: 1px solid #E6D5BD; }
.zone-fx .fx3-price { color: #76502C; font-size: 1rem; font-weight: 750; white-space: nowrap; }
.zone-fx .fx3-price small { color: #977F66; font-size: .63rem; font-weight: 500; }
.zone-fx .fx3-book { flex: 0 0 auto; min-height: 38px !important; padding: 0 12px !important; border: 1px solid #B58C57 !important; border-radius: 10px !important; background: linear-gradient(135deg, #704B2C, #422A1B) !important; color: #FFF7E9 !important; font-size: .69rem !important; font-weight: 700 !important; white-space: nowrap; }
.zone-fx .fx3-empty { margin: 8px 0 0; padding: 20px 14px; border: 1px solid rgba(238, 218, 187, .75); border-radius: 14px; background: rgba(255, 249, 240, .12); color: #FFF2DB; text-align: center; font-size: .78rem; }
@media (max-width: 380px) {
.zone-fx .fx3-carousel { height: clamp(245px, 41vh, 310px); }
.zone-fx .fx3-card { width: 58%; }
.zone-fx .fx3-nav { width: 36px; height: 36px; margin-top: -18px; }
.zone-fx .fx3-info-card { padding: 13px 12px 12px; }
.zone-fx .fx3-info-card h3 { font-size: 1rem; }
.zone-fx .fx3-book { min-height: 35px !important; padding: 0 9px !important; font-size: .64rem !important; }
}
@media (prefers-reduced-motion: reduce) { .zone-fx .fx3-card, .zone-fx .fx3-dots button { transition: none; } }
/* The Featured Experiences carousel has its own pagination; keep its heading uncluttered. */
.zone-fx .sec-head .see-all { display: none !important; }
/* v134 — Restore regular type for the Live / Video gateway titles and prevent the featured CTA from overlapping its price. */
.ex-lv .gw2-h b {
font-family: var(--sans), "Lexend", sans-serif !important;
font-size: .78rem !important;
font-weight: 800 !important;
line-height: 1.25 !important;
letter-spacing: .015em !important;
text-transform: none !important;
}
.zone-fx .fx3-foot {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
min-width: 0;
}
.zone-fx .fx3-price {
flex: 0 0 auto !important;
min-width: 0;
}
.zone-fx .fx3-book {
display: inline-flex !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
flex: 0 1 auto !important;
white-space: nowrap !important;
}
@media (max-width: 350px) {
.zone-fx .fx3-foot {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
justify-items: stretch !important;
}
.zone-fx .fx3-book {
width: 100% !important;
}
}
/* v134 — Explore header: radiant solid gold-brown finish, no faded photography */
.ex-top {
position: relative !important;
isolation: isolate;
overflow: hidden;
background:
radial-gradient(ellipse 78% 115% at 50% -12%, rgba(255, 226, 174, .48) 0%, rgba(255, 226, 174, .12) 46%, transparent 72%),
linear-gradient(118deg, #A66B3B 0%, #C18B52 38%, #B77B43 68%, #945A32 100%) !important;
border-bottom: 1px solid rgba(226, 190, 137, .72);
}
.ex-top-bg { display: none !important; }
.ex-top :is(h1, h2, .ex-title),
.ex-top .topbar h1 {
color: #FFF8EA !important;
text-shadow: 0 1px 5px rgba(67, 38, 17, .22) !important;
}
.ex-top .topbar .icon-btn {
background: linear-gradient(145deg, #FFF9EE, #F0DDBF) !important;
border: 1px solid rgba(255, 246, 226, .82) !important;
color: #80502D !important;
box-shadow: 0 3px 9px rgba(72, 42, 20, .14), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.ex-top .search,
.ex-top [role=search] {
background: #FFFCF7 !important;
border-color: rgba(255, 246, 229, .92) !important;
box-shadow: 0 5px 14px rgba(74, 43, 20, .13) !important;
}
.ex-top .filter-btn {
background: linear-gradient(145deg, #754321, #573019) !important;
color: #FFF8EA !important;
box-shadow: 0 4px 10px rgba(67, 37, 17, .2) !important;
}
.ex-top .loc-chip {
background: rgba(255, 251, 243, .97) !important;
border-color: rgba(244, 222, 190, .95) !important;
color: #684126 !important;
box-shadow: 0 3px 9px rgba(74, 43, 20, .1) !important;
}
/* v135 — Home welcome zone: radiant champagne gold into warm artisan brown.
The gradient ends after the four Discover / Experience / Collect / Preserve cards. */
@media (max-width: 767px) {
body:not(.desk) .r3-home .home-gold-intro {
position: relative;
isolation: isolate;
width: calc(100% + 36px);
margin: -14px -18px 0;
padding: 14px 18px 20px;
overflow: hidden;
background:
radial-gradient(ellipse 82% 38% at 50% 0%, rgba(255, 248, 224, .92) 0%, rgba(255, 239, 197, .52) 48%, transparent 78%),
radial-gradient(ellipse 95% 62% at 100% 48%, rgba(255, 220, 158, .28) 0%, transparent 72%),
linear-gradient(158deg, #F0D39D 0%, #DEB879 42%, #C18C52 76%, #AE7544 100%);
border-bottom: 1px solid rgba(150, 98, 47, .22);
box-shadow: inset 0 -12px 24px -28px rgba(81, 43, 19, .6);
}
body:not(.desk) .r3-home .home-gold-intro .h-top {
position: relative;
z-index: 1;
}
body:not(.desk) .r3-home .home-gold-intro .h-top :is(.h-bell, .h-live) {
background: linear-gradient(145deg, #FFF9EC, #EED6AA) !important;
border-color: rgba(255, 250, 236, .9) !important;
color: #79502F !important;
box-shadow: 0 4px 11px rgba(92, 57, 25, .15), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
body:not(.desk) .r3-home .home-gold-intro .h-avatar .avatar {
border: 2px solid rgba(255, 248, 229, .95);
box-shadow: 0 3px 10px rgba(83, 47, 20, .2);
}
body:not(.desk) .r3-home .home-gold-intro .h-search {
background: #FFFCF7 !important;
border-color: rgba(255, 248, 231, .95) !important;
box-shadow: 0 6px 16px rgba(91, 57, 25, .13) !important;
}
body:not(.desk) .r3-home .home-gold-intro .r3-hero {
border: 1px solid rgba(255, 248, 230, .88);
box-shadow: 0 12px 24px -18px rgba(77, 43, 20, .52) !important;
}
body:not(.desk) .r3-home .home-gold-intro .ob-hello,
body:not(.desk) .r3-home .home-gold-intro .ob-invite {
background: linear-gradient(135deg, rgba(255, 252, 245, .98), rgba(250, 239, 217, .97)) !important;
border-color: rgba(255, 250, 235, .96) !important;
box-shadow: 0 8px 18px -15px rgba(77, 44, 22, .45) !important;
}
body:not(.desk) .r3-home .home-gold-intro .home-feature-cards {
margin-bottom: 0 !important;
}
body:not(.desk) .r3-home .home-gold-intro .home-feature-cards > button {
background: linear-gradient(155deg, #FFFCF5 0%, #F9EBD2 100%) !important;
border-color: rgba(255, 248, 229, .92) !important;
box-shadow: 0 8px 18px -13px rgba(81, 46, 20, .42), inset 0 1px 0 rgba(255,255,255,.88) !important;
}
body:not(.desk) .r3-home .home-gold-intro .home-feature-cards > button:active {
background: linear-gradient(155deg, #FFF8E8 0%, #F1D9AE 100%) !important;
}
}
/* v136 — Home gold-brown backdrop extends behind the upper half of Live & Video.
The cream gateway cards remain clear and readable while their surroundings
visually connect to the welcome and four feature cards above. */
@media (max-width: 767px) {
body:not(.desk) .r3-home .home-gold-intro {
background: transparent !important;
border-bottom: 0 !important;
box-shadow: none !important;
padding-bottom: 18px !important;
}
body:not(.desk) .r3-home .home-gold-intro::before {
content: "";
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 124px;
left: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(248, 241, 231, 0) 70%, rgba(248, 241, 231, .94) 100%),
radial-gradient(ellipse 82% 38% at 50% 0%, rgba(255, 248, 224, .92) 0%, rgba(255, 239, 197, .52) 48%, transparent 78%),
radial-gradient(ellipse 95% 62% at 100% 48%, rgba(255, 220, 158, .28) 0%, transparent 72%),
linear-gradient(158deg, #F0D39D 0%, #DEB879 42%, #C18C52 76%, #AE7544 100%);
}
body:not(.desk) .r3-home .home-gold-intro > * {
position: relative;
z-index: 1;
}
body:not(.desk) .r3-home .home-gold-intro > .home-gw2-sec {
margin: 16px 0 0 !important;
}
body:not(.desk) .r3-home .home-gold-intro > .home-gw2-sec .gw2-pair {
gap: 10px !important;
}
}
/* v137 — Home Live / Video gateways: closer to the reference gallery,
tighter corner radii and clear red LIVE markers on every live item. */
@media (max-width: 767px) {
body:not(.desk) .r3-home .home-gold-intro .home-feature-cards > button {
border-radius: 14px !important;
}
body:not(.desk) .r3-home .home-gw2-sec .gw2 {
border-radius: 14px !important;
}
body:not(.desk) .r3-home .home-gw2-sec .gw2-th {
border-radius: 7px !important;
}
body:not(.desk) .r3-home .home-gw2-sec .gw2-pair {
gap: 9px !important;
}
}
.gw2-live-b {
display: inline-flex !important;
align-items: center;
gap: 3px;
top: 4px !important;
left: 4px !important;
padding: 3px 5px !important;
border: 1px solid rgba(255,255,255,.28);
border-radius: 5px !important;
background: #C9322B !important;
color: #FFFFFF !important;
font-size: .48rem !important;
font-style: normal;
font-weight: 850 !important;
line-height: 1 !important;
letter-spacing: .045em;
box-shadow: 0 2px 5px rgba(55, 12, 8, .28);
}
.gw2-live-dot {
display: inline-block;
width: 5px;
height: 5px;
flex: 0 0 5px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}
.gw2-live-b small {
margin-left: 1px;
padding-left: 3px;
border-left: 1px solid rgba(255,255,255,.48);
color: rgba(255,255,255,.92);
font-size: .39rem;
font-style: normal;
font-weight: 750;
letter-spacing: .025em;
}
/* v138 — Visible Home Live / Video finish: match the gallery reference. */
@media (max-width: 767px) {
body:not(.desk) .r3-home .home-gold-intro {
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
padding-bottom: 18px !important;
}
body:not(.desk) .r3-home .home-gold-intro::before {
bottom: 124px !important;
}
body:not(.desk) .r3-home .home-gold-intro > .home-gw2-sec {
position: relative !important;
z-index: 2 !important;
display: block !important;
margin: 14px 0 0 !important;
}
body:not(.desk) .r3-home .home-gw2-sec .gw2-pair {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 9px !important;
}
body:not(.desk) .r3-home .home-gw2-sec .gw2 {
min-width: 0 !important;
border-radius: 10px !important;
padding: 10px 8px 9px !important;
}
body:not(.desk) .r3-home .home-gw2-sec .gw2-th {
border-radius: 5px !important;
}
body:not(.desk) .r3-home .home-gw2-sec .gw2-grid {
gap: 5px !important;
}
}
.gw2-live-b {
position: absolute !important;
z-index: 5 !important;
top: 5px !important;
left: 5px !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 3px 5px !important;
border: 1px solid rgba(255,255,255,.35) !important;
border-radius: 5px !important;
background: #C62828 !important;
color: #FFFFFF !important;
font-size: .49rem !important;
font-style: normal !important;
font-weight: 850 !important;
line-height: 1 !important;
letter-spacing: .04em !important;
box-shadow: 0 2px 5px rgba(40,12,8,.28) !important;
white-space: nowrap !important;
}
.gw2-live-dot {
display: inline-block !important;
width: 5px !important;
height: 5px !important;
flex: 0 0 5px !important;
border-radius: 50% !important;
background: #FFFFFF !important;
}
/* v139 — Shopee-inspired Home Live / Video gateways.
Keep LOCARTA's ivory, cocoa and warm gold palette; use coral accents for media labels. */
@media (max-width: 767px) {
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video {
margin: 14px 0 8px !important;
position: relative !important;
z-index: 2 !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-pair {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
align-items: stretch !important;
gap: 9px !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2 {
min-width: 0 !important;
padding: 10px 8px 8px !important;
gap: 5px !important;
border: 1px solid #EADBC8 !important;
border-radius: 13px !important;
background: linear-gradient(180deg, #FFFEFC 0%, #FFF9F0 100%) !important;
color: #633018 !important;
box-shadow: 0 7px 16px -13px rgba(58, 26, 9, .5), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-h {
min-height: 19px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 4px !important;
margin-bottom: 1px !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-h b {
color: #D94B32 !important;
font-size: .82rem !important;
line-height: 1.1 !important;
font-weight: 850 !important;
letter-spacing: .025em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-h svg {
width: 13px !important;
height: 13px !important;
color: #C8784D !important;
flex: 0 0 auto !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 5px !important;
margin-top: 3px !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-th {
position: relative !important;
display: block !important;
width: 100% !important;
aspect-ratio: .70 / 1 !important;
border-radius: 7px !important;
overflow: hidden !important;
background: #E9D8C1 !important;
box-shadow: 0 2px 5px rgba(58, 26, 9, .13) !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-th :is(.pic, img) {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-th::after {
inset: 44% 0 0 !important;
background: linear-gradient(0deg, rgba(35, 17, 8, .78) 0%, rgba(35, 17, 8, .12) 70%, transparent 100%) !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-lbl {
left: 5px !important;
right: 5px !important;
bottom: 5px !important;
color: #FFF9F0 !important;
font-size: .56rem !important;
font-weight: 750 !important;
line-height: 1.2 !important;
-webkit-line-clamp: 2 !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-live-b {
top: 5px !important;
left: 5px !important;
padding: 4px 6px !important;
border-radius: 5px !important;
background: #E84135 !important;
color: #FFFFFF !important;
font-size: .51rem !important;
line-height: 1 !important;
box-shadow: 0 2px 5px rgba(47, 12, 8, .28) !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-video-flag {
position: absolute !important;
z-index: 3 !important;
top: 5px !important;
left: 5px !important;
right: auto !important;
width: auto !important;
height: auto !important;
min-height: 17px !important;
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
padding: 3px 5px !important;
border-radius: 5px !important;
background: rgba(56, 36, 25, .78) !important;
color: #FFFFFF !important;
font-size: .48rem !important;
font-style: normal !important;
font-weight: 800 !important;
letter-spacing: .035em !important;
box-shadow: 0 2px 5px rgba(35, 17, 8, .2) !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-video-flag svg {
width: 9px !important;
height: 9px !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2:active {
transform: scale(.99) !important;
box-shadow: 0 3px 9px -7px rgba(58, 26, 9, .5) !important;
}
}
/* v140 — Explore New Arrivals: three landscape, swipeable category features */
.new-arrivals-zone {
position: relative;
margin: 22px -18px 24px;
padding: 22px 0 18px;
overflow: hidden;
background:
radial-gradient(90% 75% at 50% 0%, rgba(255, 245, 224, .96) 0%, rgba(255, 245, 224, 0) 75%),
linear-gradient(145deg, #F5D8B8 0%, #E9BD8D 48%, #C58A50 100%);
border-top: 1px solid rgba(142, 73, 39, .18);
border-bottom: 1px solid rgba(142, 73, 39, .22);
}
.new-arrivals-zone::before,
.new-arrivals-zone::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; }
.new-arrivals-zone::before { width: 260px; height: 260px; top: -150px; right: -85px; border: 1px solid rgba(255, 249, 235, .32); box-shadow: 0 0 0 18px rgba(255,249,235,.07), 0 0 0 38px rgba(255,249,235,.05); }
.new-arrivals-zone::after { width: 210px; height: 210px; bottom: -160px; left: -88px; border: 1px solid rgba(112, 43, 30, .14); }
.na-head { position: relative; z-index: 1; text-align: center; padding: 0 20px 13px; color: #5B281C; }
.na-kicker { display: block; margin-bottom: 2px; color: #8A4B2B; font-size: .58rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.na-head h2 { margin: 0; color: #6B241E; font-family: "Allura", "URW Chancery L", "Apple Chancery", cursive; font-size: 2.65rem; font-weight: 600; line-height: 1.02; }
.na-head p { margin: 3px 0 0; color: #70442F; font-family: inherit; font-size: .76rem; line-height: 1.35; }
.na-flourish { display: block; width: 58px; height: 2px; margin: 10px auto 0; border-radius: 99px; background: linear-gradient(90deg, transparent, #A96A36 25%, #7B2B24 50%, #A96A36 75%, transparent); }
.na-viewport { position: relative; z-index: 1; width: 100%; overflow-x: auto; overflow-y: hidden; padding: 0 18px 8px; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; }
.na-viewport::-webkit-scrollbar { display: none; }
.na-track { display: flex; align-items: stretch; gap: 12px; width: max-content; min-width: 100%; }
.na-slide { position: relative; display: block; flex: 0 0 min(86vw, 390px); width: min(86vw, 390px); aspect-ratio: 3 / 2; min-height: 0; padding: 0; overflow: hidden; isolation: isolate; scroll-snap-align: center; border: 1px solid rgba(255, 244, 225, .9); border-radius: 13px; background: #F9E6D3; box-shadow: 0 12px 23px -15px rgba(76, 35, 19, .72); text-align: left; color: #FFF8ED; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.na-slide > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; object-fit: fill; object-position: center; transition: none; }
.na-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 18px 0; }
.na-dots { display: inline-flex; align-items: center; gap: 6px; }
.na-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: rgba(105, 47, 31, .35); transition: width .2s ease, background .2s ease; }
.na-dot.on { width: 20px; background: #762C23; }
.na-bottom > small { color: #74442D; font-size: .55rem; font-weight: 800; letter-spacing: .1em; }
.na-bottom > small span { color: #6B241E; }
@media (max-width: 360px) {
.new-arrivals-zone { margin-left: -14px; margin-right: -14px; }
.na-slide { flex-basis: 88vw; width: 88vw; min-height: 148px; }
.na-head h2 { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
.na-viewport { scroll-behavior: auto; }
.na-slide > img, .na-dot { transition: none; }
}
/* =========================================================
v142 — Explore premium cards: balanced scale to match New Arrivals
Compact the promoted spotlight and featured-experience showcase on phones
without changing their swipe, pagination, or booking behaviour.
========================================================= */
@media (max-width: 767px) {
body:not(.desk) .zone-pr,
body:not(.desk) .zone-fx {
padding: 18px 15px 20px !important;
}
body:not(.desk) .zone-pr .sec-head,
body:not(.desk) .zone-fx .sec-head {
min-height: 70px !important;
margin-bottom: 9px !important;
padding-top: 2px !important;
padding-bottom: 0 !important;
}
body:not(.desk) .zone-pr .sec-head h2,
body:not(.desk) .zone-fx .sec-head h2 {
font-size: 1.9rem !important;
}
/* Promoted creator spotlight: narrower card and shorter image, with a small next-card peek. */
body:not(.desk) .zone-pr .pr-note {
max-width: 30rem !important;
margin: 0 auto 10px !important;
font-size: .69rem !important;
line-height: 1.4 !important;
}
body:not(.desk) .zone-pr .bb-rail {
gap: 10px !important;
padding: 2px 2px 7px !important;
scroll-padding-inline: 2px !important;
}
body:not(.desk) .zone-pr .bb-rail > .bb-card {
flex: 0 0 84% !important;
width: 84% !important;
max-width: 315px !important;
border-radius: 16px !important;
box-shadow: 0 12px 24px -19px rgba(0, 0, 0, .7) !important;
}
body:not(.desk) .zone-pr .bb-card .bb-img {
flex: 0 0 142px !important;
height: 142px !important;
background: #D8C2A4 !important;
}
body:not(.desk) .zone-pr .bb-card .bb-img :is(img, .pic img) {
object-fit: cover !important;
object-position: center center !important;
}
body:not(.desk) .zone-pr .bb-tag {
top: 8px !important;
left: 8px !important;
padding: 4px 8px !important;
font-size: .53rem !important;
}
body:not(.desk) .zone-pr .bb-over {
gap: 3px !important;
padding: 10px 12px 11px !important;
}
body:not(.desk) .zone-pr .bb-kick {
font-size: .52rem !important;
letter-spacing: .13em !important;
}
body:not(.desk) .zone-pr .bb-title {
font-size: 1rem !important;
line-height: 1.2 !important;
}
body:not(.desk) .zone-pr .bb-by {
font-size: .64rem !important;
line-height: 1.3 !important;
}
body:not(.desk) .zone-pr .bb-msg {
margin-top: 1px !important;
font-size: .67rem !important;
line-height: 1.35 !important;
-webkit-line-clamp: 2 !important;
}
body:not(.desk) .zone-pr .bb-foot {
gap: 7px !important;
margin-top: 4px !important;
}
body:not(.desk) .zone-pr .bb-price {
font-size: .9rem !important;
}
body:not(.desk) .zone-pr .bb-price small {
font-size: .6rem !important;
}
body:not(.desk) .zone-pr .bb-btn {
min-height: 34px !important;
padding: 0 10px !important;
border-radius: 9px !important;
font-size: .64rem !important;
}
body:not(.desk) .zone-pr .sp-dots {
margin: 6px 0 2px !important;
}
/* Sponsored Picks: smaller panel padding and less dominant product tiles. */
body:not(.desk) .zone-pr .pk-panel {
margin-top: 11px !important;
padding: 10px !important;
border-radius: 16px !important;
}
body:not(.desk) .zone-pr .pk-head {
margin-bottom: 8px !important;
}
body:not(.desk) .zone-pr .pk-head b {
font-size: 1.55rem !important;
}
body:not(.desk) .zone-pr .pk-grid {
gap: 8px !important;
}
body:not(.desk) .zone-pr .pk-card {
border-radius: 12px !important;
}
body:not(.desk) .zone-pr .pk-media {
aspect-ratio: 4 / 3.2 !important;
}
body:not(.desk) .zone-pr .pk-info {
gap: 3px !important;
padding: 8px !important;
}
body:not(.desk) .zone-pr .pk-title {
font-size: .74rem !important;
line-height: 1.25 !important;
}
body:not(.desk) .zone-pr .pk-price {
font-size: .82rem !important;
}
body:not(.desk) .zone-pr .pk-btn {
min-height: 31px !important;
font-size: .63rem !important;
}
/* Featured Experiences: shorter, wider showcase card instead of a tall, zoomed-in portrait. */
body:not(.desk) .zone-fx .fx3-carousel {
height: clamp(190px, 27vh, 215px) !important;
margin: 4px -15px 0 !important;
perspective: 950px !important;
}
body:not(.desk) .zone-fx .fx3-card {
top: 6% !important;
width: 64% !important;
height: 88% !important;
border-radius: 15px !important;
box-shadow: 0 12px 22px -16px rgba(35, 19, 10, .62) !important;
}
body:not(.desk) .zone-fx .fx3-card.on {
box-shadow: 0 14px 24px -15px rgba(35, 19, 10, .68), 0 0 0 2px #F2E2C6 !important;
}
body:not(.desk) .zone-fx .fx3-card :is(img, .pic img) {
object-fit: cover !important;
object-position: center center !important;
}
body:not(.desk) .zone-fx .fx3-tag {
left: 7px !important;
bottom: 7px !important;
padding: 4px 6px !important;
font-size: .48rem !important;
}
body:not(.desk) .zone-fx .fx3-nav {
width: 32px !important;
height: 32px !important;
margin-top: -16px !important;
}
body:not(.desk) .zone-fx .fx3-nav.prev { left: 8px !important; }
body:not(.desk) .zone-fx .fx3-nav.next { right: 8px !important; }
body:not(.desk) .zone-fx .fx3-dots {
gap: 5px !important;
margin-top: 8px !important;
}
body:not(.desk) .zone-fx .fx3-dots button {
width: 6px !important;
height: 6px !important;
}
body:not(.desk) .zone-fx .fx3-dots button.on {
width: 16px !important;
}
body:not(.desk) .zone-fx .fx3-details {
margin-top: 9px !important;
}
body:not(.desk) .zone-fx .fx3-info-card {
gap: 4px !important;
padding: 10px 11px 11px !important;
border-radius: 13px !important;
}
body:not(.desk) .zone-fx .fx3-kicker {
font-size: .52rem !important;
letter-spacing: .15em !important;
}
body:not(.desk) .zone-fx .fx3-info-card h3 {
font-size: .94rem !important;
line-height: 1.23 !important;
}
body:not(.desk) .zone-fx .fx3-host,
body:not(.desk) .zone-fx .fx3-meta {
font-size: .63rem !important;
}
body:not(.desk) .zone-fx .fx3-desc {
min-height: 0 !important;
margin-top: 1px !important;
font-size: .67rem !important;
line-height: 1.38 !important;
}
body:not(.desk) .zone-fx .fx3-foot {
gap: 7px !important;
margin-top: 5px !important;
padding-top: 7px !important;
}
body:not(.desk) .zone-fx .fx3-price {
font-size: .88rem !important;
}
body:not(.desk) .zone-fx .fx3-price small {
font-size: .57rem !important;
}
body:not(.desk) .zone-fx .fx3-book {
min-height: 33px !important;
padding: 0 9px !important;
border-radius: 8px !important;
font-size: .61rem !important;
}
}
@media (max-width: 380px) {
body:not(.desk) .zone-pr .bb-card .bb-img {
flex-basis: 132px !important;
height: 132px !important;
}
body:not(.desk) .zone-fx .fx3-carousel {
height: 190px !important;
}
body:not(.desk) .zone-fx .fx3-card {
width: 66% !important;
}
}
/* v142 — Home Live / Video gateway typography: replace coral-red headings with cocoa brown. */
@media (max-width: 767px) {
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-h b {
color: #704321 !important;
}
body:not(.desk) .r3-home .home-gw2-sec.shopee-home-live-video .gw2-h svg {
color: #A8783E !important;
}
}
/* =========================================================
LOCARTA Live — branded appreciation, expanded panels & sharing
========================================================= */
.rl-head2 .rl-tv-mark { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; position: relative; border: 1px solid rgba(255,246,230,.58); border-radius: 12px; background: linear-gradient(145deg,#FFF4DE,#E9C88E); color: #653515; box-shadow: 0 5px 14px rgba(25,10,3,.24); }
.rl-head2 .rl-tv-mark svg { width: 21px; height: 21px; stroke-width: 2.2; }
.rl-head2 .rl-tv-mark i { position: absolute; right: 5px; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: #B94B35; box-shadow: 0 0 0 2px #FFF4DE; }
@media (max-width: 360px) { .rl-head2 .rl-tv-mark { width: 30px; height: 30px; flex-basis: 30px; border-radius: 10px; } .rl-head2 .rl-tv-mark svg { width: 18px; height: 18px; } }
.rl-who { display: inline-flex; align-items: center; gap: 9px; max-width: min(68vw, 290px); }
.rl-who-copy { display: grid; gap: 2px; min-width: 0; text-align: left; }
.rl-who-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-who-copy small { color: rgba(255,246,230,.78); font-size: .66rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-rail .rl-appreciate svg { color: #F6D58A !important; }
.rl-rail .rl-appreciate.on svg { color: #FFF0BA !important; background: linear-gradient(145deg,rgba(194,137,48,.96),rgba(112,63,24,.96)) !important; box-shadow: 0 0 0 2px rgba(255,231,175,.3),0 0 16px rgba(238,183,82,.32); }
.rl-rail .rl-save.on svg { color: #F6D58A !important; background: rgba(126,75,34,.9) !important; }
.rl-rail button small { max-width: 62px; text-align: center; line-height: 1.12; }
.rl-rail button[aria-pressed="true"] small { color: #F6D58A; }
/* Larger, polished conversation / shop / share bottom panel */
.rl-sheet-wrap { align-items: flex-end !important; }
.rl-sheet-wrap .sheet.rl-live-sheet { display: flex; flex-direction: column; width: min(100%, 480px) !important; height: min(78dvh, 760px); max-height: 86dvh !important; overflow: hidden !important; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 26px 26px 0 0 !important; border: 1px solid rgba(173,124,68,.32); background: linear-gradient(180deg,#FFF9EF 0%,#F8EBDD 100%) !important; box-shadow: 0 -18px 50px rgba(20,10,5,.3); }
.rl-sheet-wrap .sheet.rl-live-sheet::before { flex: 0 0 4px; margin: 0 auto 12px; background: #C99A60; }
.rl-sheet-wrap .sheet.rl-live-sheet .sheet-close { top: 17px; right: 16px; z-index: 4; width: 34px; height: 34px; border: 1px solid #E5D1B7; border-radius: 50%; background: #FFFDF8; color: #603A20; }
.rl-panel-head { padding: 0 42px 10px 2px; }
.rl-panel-eyebrow,.rl-panel-kicker { color: #9A6A36; font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.rl-panel-head h2 { margin: 3px 0 2px !important; color: #4A2815; font-family: inherit; font-size: 1.18rem !important; font-weight: 800; }
.rl-panel-head p { margin: 0; color: #80664F; font-size: .74rem; }
.rl-panel-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; padding: 5px; margin: 2px 0 10px; border: 1px solid #E8D7C1; border-radius: 15px; background: #F4E8D7; flex: 0 0 auto; }
.rl-panel-tab { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 39px; padding: 0 7px; border: 0; border-radius: 11px; background: transparent; color: #77563B; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.rl-panel-tab[aria-selected="true"] { background: linear-gradient(135deg,#78431F,#9D6332); color: #FFF8EC; box-shadow: 0 3px 8px rgba(73,40,18,.2); }
.rl-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rl-panel-comments { display: grid; gap: 0; list-style: none; margin: 0; padding: 0 1px 12px; }
.rl-comment { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(177,139,98,.2); }
.rl-comment-av { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #D4B48C; border-radius: 50%; background: linear-gradient(145deg,#F3DDBB,#D9B17B); color: #673B1D; font-size: .7rem; font-weight: 800; }
.rl-comment-main { min-width: 0; }
.rl-comment-meta { display: flex; align-items: baseline; gap: 8px; }
.rl-comment-meta b { color: #4C2E1B; font-size: .78rem; }
.rl-comment-meta small,.rl-reply-context { color: #9A826B; font-size: .65rem; }
.rl-comment-main p { margin: 3px 0 5px; color: #3C2A1D; font-size: .82rem; line-height: 1.4; overflow-wrap: anywhere; }
.rl-reply-btn { padding: 0; border: 0; background: none; color: #956334; font: inherit; font-size: .68rem; font-weight: 800; cursor: pointer; }
.rl-reply-context { display: block; margin-top: 3px; }
.rl-comments-empty { display: grid; justify-items: center; gap: 7px; padding: 38px 18px; color: #80664F; text-align: center; }
.rl-comments-empty svg { width: 28px; height: 28px; color: #B27A3F; }
.rl-comments-empty b { color: #55331D; font-size: .88rem; }
.rl-comments-empty small { max-width: 30ch; font-size: .72rem; line-height: 1.4; }
.rl-panel-compose { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; padding: 10px 0 4px; background: linear-gradient(180deg,rgba(255,249,239,.82),#FFF9EF 35%); }
.rl-panel-compose input[name="t"] { flex: 1; min-width: 0; height: 44px; padding: 0 15px; border: 1px solid #E2CCAE; border-radius: 999px; background: #FFFDF9; color: #4B2C18; font: inherit; font-size: .8rem; }
.rl-panel-compose input[name="t"]:focus { outline: 2px solid rgba(190,139,76,.25); border-color: #B9874D; }
.rl-panel-compose button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: linear-gradient(145deg,#75401E,#A56A35); color: #FFF8EC; box-shadow: 0 5px 12px rgba(76,39,15,.2); }
.rl-panel-note { margin: 5px 0 2px; color: #9A826B; font-size: .62rem; text-align: center; }
.rl-panel-shop,.rl-share-panel { display: grid; gap: 10px; padding: 2px 0 14px; }
.rl-panel-item { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 12px; padding: 10px; border: 1px solid #E8D6BF; border-radius: 17px; background: rgba(255,253,248,.88); box-shadow: 0 5px 14px rgba(83,49,22,.06); }
.rl-panel-item-img { width: 88px; height: 100%; min-height: 116px; object-fit: cover; border-radius: 12px; }
.rl-panel-item .grow { display: grid; align-content: center; gap: 4px; min-width: 0; }
.rl-panel-item .grow b { color: #4B2C18; font-size: .84rem; }
.rl-panel-item .grow strong { color: #8A4F25; font-size: .94rem; }
.rl-panel-item .grow small { color: #90765E; font-size: .66rem; }
.rl-panel-item .btn { justify-self: start; min-height: 32px; padding: 0 12px; font-size: .7rem; }
.rl-share-preview { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 11px; align-items: center; padding: 10px; border: 1px solid #E6D3BA; border-radius: 16px; background: #FFFDF8; }
.rl-share-thumb { width: 76px; height: 68px; object-fit: cover; border-radius: 10px; }
.rl-share-preview span { display: grid; gap: 3px; min-width: 0; }
.rl-share-preview span small { color: #9A744D; font-size: .62rem; }
.rl-share-preview span b { color: #4B2C18; font-size: .82rem; line-height: 1.25; }
.rl-share-label { display: grid; gap: 5px; color: #76573C; font-size: .7rem; font-weight: 800; }
.rl-share-label input { height: 42px; padding: 0 13px; border: 1px solid #E2CCAE; border-radius: 12px; background: #FFFDF8; font: inherit; font-size: .78rem; }
.rl-share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rl-share-actions button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 42px; padding: 0 8px; border: 1px solid #DCC4A5; border-radius: 12px; background: #F3E5D1; color: #6A3D1E; font: inherit; font-size: .72rem; font-weight: 800; }
.rl-send-kicker { margin: 6px 0 0; }
.rl-share-friends { display: grid; gap: 4px; }
.rl-share-friend { display: grid; grid-template-columns: 38px minmax(0,1fr) 28px; gap: 10px; align-items: center; min-height: 56px; padding: 6px 9px; border: 0; border-bottom: 1px solid rgba(177,139,98,.22); background: transparent; color: #51331E; text-align: left; cursor: pointer; }
.rl-friend-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.rl-share-friend span { display: grid; gap: 2px; min-width: 0; }
.rl-share-friend b { font-size: .76rem; }
.rl-share-friend small { color: #977B60; font-size: .64rem; }
.rl-share-friend i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #EBD7B9; color: #78471F; font-style: normal; }
.rl-shared-card .mc-body .kind { display: inline-flex; align-items: center; gap: 5px; }
.live-dot-inline { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #C64A36; box-shadow: 0 0 0 3px rgba(198,74,54,.12); }
@media (max-height: 650px) { .rl-sheet-wrap .sheet.rl-live-sheet { height: 84dvh; } .rl-panel-comments { gap: 0; } .rl-comment { padding: 9px 0; } }
.rl-panel-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.rl-panel-item-actions .btn { margin: 0; }
/* ===== ROLE SELECTION + AUTH CLEANUP (v129) ===== */
body:not(.desk) .ch-page .auth-scroll { padding: 18px 30px 22px !important; justify-content: flex-start; }
body:not(.desk) .ch-page .ch-in { margin-top: 48px; gap: 0; }
body:not(.desk) .ch-page .ch-mark { width: 42px; height: 46px; object-fit: contain; margin-bottom: 12px; }
body:not(.desk) .ch-page .ch-in h1 { margin: 0; font-size: 1.28rem; line-height: 1.22; letter-spacing: -.01em; }
body:not(.desk) .ch-page .ch-in .sub { margin: 8px auto 18px; font-size: .82rem; line-height: 1.4; max-width: 31ch; }
body:not(.desk) .ch-page .ch-cards { gap: 10px; margin-top: 0; }
body:not(.desk) .ch-page .ch-card { min-height: 82px; padding: 11px 14px; border-radius: 16px; gap: 12px; }
body:not(.desk) .ch-page .ch-card img { flex-basis: 54px; width: 54px; height: 54px; }
body:not(.desk) .ch-page .ch-card span { gap: 2px; }
body:not(.desk) .ch-page .ch-card b { font-size: .96rem; }
body:not(.desk) .ch-page .ch-card small { font-size: .72rem; line-height: 1.32; }
body:not(.desk) .ch-page .ch-card.on { border-color: #8A4A1C; border-width: 1.5px; background: #FFF8EE; }
body:not(.desk) .ch-page .ch-cards::after { content: ""; display: block; grid-column: 1 / -1; height: 1px; background: linear-gradient(90deg, transparent, #D7A45B 18%, #D7A45B 82%, transparent); margin: 6px 18px 2px; }
body:not(.desk) .ch-page .ch-guest { margin-top: 8px; font-size: .76rem; text-underline-offset: 4px; }
/* Clean, regular profile icon for mobile login and sign-up */
body:not(.desk) .auth-profile-icon { width: 58px; height: 58px; margin: 2px auto 6px; display: grid; place-items: center; border-radius: 50%; background: #FFFDF9; border: 1.5px solid #E4D4BE; color: #8A4A1C; box-shadow: 0 8px 20px -16px rgba(74,36,20,.45); }
body:not(.desk) .auth-profile-icon svg { width: 28px; height: 28px; stroke-width: 1.8; }
body:not(.desk) .auth-card .auth-brand { display: grid; justify-items: center; text-align: center; }
body:not(.desk) .auth-card .auth-mark,
body:not(.desk) .auth-card .auth-word { display: none !important; }
body:not(.desk) .auth-card .auth-pill { margin-top: 0; padding: 4px 10px; font-size: .7rem; background: #FFF8EE; box-shadow: none; }
body:not(.desk) .auth-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #C58A35; display: inline-block; }
body:not(.desk) .auth-card .auth-change { margin-top: 4px; font-size: .72rem; }
body:not(.desk) .auth-card .auth-h { margin-top: 8px !important; font-size: 1.25rem; }
body:not(.desk) .auth-card .auth-sub { margin: 4px auto 8px; max-width: 31ch; font-size: .78rem; line-height: 1.35; }
body:not(.desk) .auth-card { padding: 18px 16px 16px; border-radius: 20px; }
body:not(.desk) .auth-card .auth-tabs { margin: 10px 0 12px; }
body:not(.desk) .auth-card form { gap: 9px; }
body:not(.desk) .auth-card .af-label { font-size: .76rem; margin-bottom: 3px; }
body:not(.desk) .auth-card .af-box { min-height: 44px; border-radius: 11px; }
body:not(.desk) .auth-card .af-box input { height: 42px; min-height: 42px; }
body:not(.desk) .auth-card .auth-submit { height: 46px; margin-top: 5px !important; border-radius: 12px; }
/* LOCARTA v130 — clean mobile authentication */
body:not(.desk) .auth-profile-icon { width:64px; height:64px; margin:4px auto 8px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#B58A55 0%,#704018 100%); border:0; color:#FFFDF8; box-shadow:0 5px 14px rgba(74,36,20,.16); }
body:not(.desk) .auth-profile-icon svg { width:38px; height:38px; stroke:#FFFDF8; stroke-width:1.7; }
body:not(.desk) .auth-card .auth-brand { gap:0; margin-bottom:12px; }
body:not(.desk) .auth-card .auth-pill { margin-top:0; }
body:not(.desk) .auth-card .auth-h { margin:8px 0 0 !important; }
body:not(.desk) .auth-card .auth-sub { margin:4px 0 0 !important; font-size:.78rem; line-height:1.3; }
body:not(.desk) .auth-card .auth-tabs { margin:12px 0; }
body:not(.desk) .auth-card form { gap:10px; }
body:not(.desk) .auth-card .auth-submit { margin-top:4px !important; }
body:not(.desk) .auth-card .auth-switch { margin-top:10px; }
body:not(.desk) .auth-card .auth-demo, body:not(.desk) .auth-card .auth-note, body:not(.desk) .auth-scroll > .auth-demo, body:not(.desk) .auth-scroll > .auth-note { display:none !important; }
/* =========================================================
v131 — literature categories and contemporary writers
========================================================= */
.lit-intro { margin: 4px 0 14px; } .lit-intro > p { margin: 0 0 8px; font-size: .84rem; line-height: 1.5; color: #6B5444; }
.lit-subs { display: flex; flex-wrap: wrap; gap: 6px; } .lit-subs span, .lit-genres span { padding: 4px 10px; border-radius: 999px; background: #F3E7D3; color: #7A4B2E; font-size: .7rem; font-weight: 600; }
.lit-h { margin: 14px 0 8px; font-size: .9rem; color: #633018; }
.lit-writers { gap: 10px !important; }
.lit-w { flex: 0 0 116px; display: grid; justify-items: center; gap: 4px; padding: 10px 8px; border: 1px solid #EADCC8; border-radius: 16px; background: #FFF9F0; font: inherit; color: #38251B; cursor: pointer; text-align: center; }
.lit-w-img { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; } .lit-w-img img { width: 100%; height: 100%; object-fit: cover; }
.lit-w b { font-size: .76rem; line-height: 1.25; } .lit-w small { font-size: .66rem; color: #8A6F5A; }
.lit-genres { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.lit-note { display: flex; gap: 6px; align-items: flex-start; }
.lit-ask { margin: 12px 0; padding: 12px 14px; border: 1px solid #E6CFA8; border-radius: 16px; background: #FFF6E8; } .lit-ask p { display: flex; gap: 6px; margin: 0 0 10px; font-size: .82rem; color: #6B5444; }
.lit-ask .btn { width: 100%; justify-content: center; }
.bk-subs { flex-wrap: nowrap; overflow-x: auto; }
/* the booking calendar's 7-column ".bk-grid" rule (shared class name) was crushing the Books category grid */
.bkp .bk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 14px !important; text-align: left !important; }
@media (min-width: 520px) { .bkp .bk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 760px) { .bkp .bk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.bkp .bk-grid .bk :is(.story-btn, .bk-story) { max-width: 100%; box-sizing: border-box; padding-left: 10px !important; padding-right: 10px !important; font-size: .72rem !important; gap: 4px !important; white-space: nowrap; justify-content: center; }
@media (max-width: 360px) { .bkp .bk-grid .bk :is(.story-btn, .bk-story) { font-size: .66rem !important; padding-left: 6px !important; padding-right: 6px !important; } .bkp .bk-grid .bk :is(.story-btn, .bk-story) svg { display: none; } }
/* =========================================================
v132 — Loka reactions, threaded comments, video timeline, Loka Moments
========================================================= */
.lr { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.lr-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 2px 10px 2px 4px; border: 1px solid #EADCC8; border-radius: 999px; background: #FFF9F0; color: #633018; font: inherit; font-size: .78rem; cursor: pointer; }
.lr-btn img { width: 26px; height: 26px; object-fit: contain; } .lr-btn img.lr-idle { filter: grayscale(.55) opacity(.75); }
.lr-btn.on { background: #F6E4C8; border-color: #E2C79E; } .lr-btn b { font-weight: 700; } .lr-name { font-weight: 600; font-size: .74rem; }
.lr-top { display: inline-flex; } .lr-top img { width: 18px; height: 18px; margin-left: -5px; border-radius: 50%; background: #FFF9F0; box-shadow: 0 0 0 1.5px #FFF9F0; object-fit: contain; }
.lr-sm .lr-btn { min-height: 28px; padding: 1px 8px 1px 3px; font-size: .72rem; } .lr-sm .lr-btn img { width: 20px; height: 20px; } .lr-sm .lr-top { display: none; }
.lr-pop { animation: lrpop .45s ease; } @keyframes lrpop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.lr-panel { position: fixed; z-index: 400; display: flex; gap: 2px; padding: 6px; border-radius: 18px; background: #FFF9F0; border: 1px solid #E6CFA8; box-shadow: 0 14px 30px -12px rgba(58, 26, 9, .45); animation: lrin .16s ease-out; }
@keyframes lrin { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.lr-opt { display: grid; justify-items: center; gap: 1px; width: 52px; padding: 4px 0; border: 0; border-radius: 12px; background: none; cursor: pointer; font: inherit; color: #633018; }
.lr-opt img { width: 38px; height: 38px; object-fit: contain; transition: transform .12s; } .lr-opt:hover img, .lr-opt:focus-visible img { transform: translateY(-3px) scale(1.12); }
.lr-opt small { font-size: .56rem; font-weight: 700; } .lr-opt.on { background: #F6E4C8; }
@media (max-width: 360px) { .lr-opt { width: 44px; } .lr-opt img { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .lr-pop, .lr-panel { animation: none; } }
/* comments */
.cmx-sheet { display: flex; flex-direction: column; max-height: 78vh; }
.cmx-top h2 { margin: 0 0 8px; } .cmx-ctx { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #F6EEE2; }
.cmx-ctx-img { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; } .cmx-ctx-img img { width: 100%; height: 100%; object-fit: cover; }
.cmx-ctx span { display: grid; gap: 2px; min-width: 0; } .cmx-ctx b { font-size: .86rem; color: #38251B; } .cmx-ctx small { font-size: .72rem; color: #806B5A; }
.cmx-scroll { flex: 1; overflow-y: auto; padding: 4px 0 8px; }
.cmx-tools { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 4px; } .cmx-tools b { font-size: .84rem; color: #633018; } .cmx-sort { display: flex; gap: 6px; } .cmx-sort .chip { min-height: 30px; padding: 0 12px; font-size: .74rem; }
.cmx-list, .cmx-replies { list-style: none; margin: 0; padding: 0; }
.cmx { display: flex; gap: 10px; padding: 10px 2px; } .cmx + .cmx { border-top: 1px solid #F0E6D8; }
.cmx-av { flex: 0 0 34px; width: 34px; height: 34px; font-size: .74rem; }
.cmx-body { flex: 1; min-width: 0; } .cmx-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; } .cmx-h b { font-size: .84rem; color: #38251B; } .cmx-h small { font-size: .7rem; color: #9A8471; }
.cmx-badge { padding: 1px 7px; border-radius: 999px; background: #F3E7D3; color: #7A4B2E; font-size: .6rem; font-weight: 700; } .cmx-badge.cr { background: #633018; color: #FFF8EE; }
.cmx-body > p { margin: 3px 0 4px; font-size: .86rem; line-height: 1.45; color: #38251B; overflow-wrap: anywhere; }
.cmx-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .cmx-acts .link { font-size: .74rem; color: #806B5A; }
.cmx-count { margin: 6px 0 0; font-size: .7rem; font-weight: 700; color: #925426; }
.cmx-replies { margin: 4px 0 0; padding-left: 10px; border-left: 2px solid #EADCC8; } .cmx-reply { padding: 8px 0 6px; } .cmx-reply .cmx-av { flex-basis: 28px; width: 28px; height: 28px; font-size: .62rem; }
.cmx-ts { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border: 0; border-radius: 999px; background: #633018; color: #FFF8EE; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; vertical-align: 1px; }
.cmx-edit { display: flex; gap: 8px; align-items: center; margin: 4px 0; } .cmx-edit input { flex: 1; min-height: 36px; padding: 0 10px; border: 1px solid #E2C79E; border-radius: 10px; font: inherit; }
.cmx-more { width: 100%; justify-content: center; margin: 6px 0; } .cmx-empty { padding: 18px 0; text-align: center; color: #9A8471; font-size: .84rem; }
.cmx-say { position: sticky; bottom: 0; padding: 8px 0 calc(4px + env(safe-area-inset-bottom, 0px)); background: var(--card, #FFFDF8); border-top: 1px solid #F0E6D8; }
.cmx-rep, .cmx-tsopt { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .74rem; color: #806B5A; }
.cmx-row { display: flex; align-items: center; gap: 8px; } .cmx-row .cmx-av { flex-basis: 30px; width: 30px; height: 30px; }
.cmx-row input { flex: 1; min-width: 0; min-height: 40px; padding: 0 14px; border: 1px solid #EADCC8; border-radius: 999px; background: #fff; font: inherit; font-size: .86rem; }
.lr-short .lr-btn { padding: 2px; border: 0; background: none; } .lr-short .lr-btn b, .lr-short .lr-name { display: none; }
.cmx-send { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #633018; color: #FFF8EE; cursor: pointer; flex: 0 0 auto; }
/* video preview timeline + live lane */
.rlt { margin: 6px 0 0; } .rlt-bar { height: 4px; border-radius: 4px; background: rgba(255, 248, 238, .3); overflow: hidden; } .rlt-bar span { display: block; height: 100%; background: #E6BD78; }
.rlt small { display: block; margin-top: 3px; font-size: .64rem; color: rgba(255, 248, 238, .8); }
.lr-rl .lr-btn { background: rgba(40, 18, 6, .45); border-color: rgba(255, 248, 238, .3); color: #FFF8EE; } .lr-rl .lr-top { display: none; }
.lr-lane { position: absolute; right: 8px; bottom: 45%; width: 44px; height: 160px; pointer-events: none; overflow: hidden; z-index: 3; }
.lr-float { position: absolute; bottom: 0; width: 28px; height: 28px; object-fit: contain; animation: lrfloat 1.6s ease-out forwards; }
@keyframes lrfloat { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-140px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lr-float { animation-duration: .01s; } }
/* Loka Moments row */
.lm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 14px 0 6px; } .lm-head b { font-size: .98rem; color: #633018; } .lm-head small { font-size: .68rem; color: #9A8471; }
.lmr { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; } .lmr::-webkit-scrollbar { display: none; }
.lmr > button { position: relative; flex: 0 0 auto; display: grid; justify-items: center; gap: 4px; width: 70px; padding: 0; border: 0; background: none; font: inherit; color: #38251B; cursor: pointer; }
.lmr-ring { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; padding: 3px; background: #EADCC8; box-sizing: border-box; }
.lmr-ring.on { background: linear-gradient(135deg, #E6BD78, #B47A43); } .lmr-ring.hl { background: #633018; }
.lmr-ring > *, .lmr-img { width: 100%; height: 100%; border-radius: 19px; overflow: hidden; border: 2px solid #FFF9F0; box-sizing: border-box; } .lmr-img img { width: 100%; height: 100%; object-fit: cover; }
.lmr-ring .avatar { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 19px; font-size: 1rem; }
.lmr small { font-size: .68rem; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lmr em { margin-top: -4px; font-style: normal; font-size: .58rem; color: #A87955; }
.lmr-plus { position: absolute; top: 46px; right: 2px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #633018; color: #FFF8EE; border: 2px solid #FFF9F0; }
/* Loka Moments viewer */
.lmv { position: fixed; inset: 0; z-index: 300; background: #1E0F07; color: #FFF8EE; display: flex; flex-direction: column; touch-action: none; }
.lmv-media { position: absolute; inset: 0; display: grid; place-items: center; } .lmv-media :is(img, video) { width: 100%; height: 100%; object-fit: contain; }
.lmv-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 8, 2, .55) 0%, transparent 18%, transparent 58%, rgba(20, 8, 2, .75) 100%); pointer-events: none; }
.lmv-top { position: relative; z-index: 2; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0; }
.lmv-bars { display: flex; gap: 4px; } .lmv-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 248, 238, .3); overflow: hidden; } .lmv-bars i { display: block; height: 100%; background: #F6DDAE; }
.lmv-who { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .lmv-who > span { flex: 1; display: grid; min-width: 0; } .lmv-who b { font-size: .9rem; } .lmv-who small { font-size: .7rem; opacity: .85; }
.lmv-av { padding: 0; border: 2px solid #E6BD78; border-radius: 14px; background: none; overflow: hidden; width: 38px; height: 38px; cursor: pointer; } .lmv-av .avatar { width: 100%; height: 100%; border-radius: 0; display: grid; place-items: center; }
.lmv-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 248, 238, .15); color: #FFF8EE; cursor: pointer; }
.lmv-zone { position: absolute; z-index: 1; top: 14%; bottom: 30%; width: 34%; border: 0; background: transparent; cursor: pointer; } .lmv-zone.l { left: 0; } .lmv-zone.r { right: 0; width: 66%; }
.lmv-stk { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; max-height: 42%; overflow-y: auto; }
.lmv-cap { flex-basis: 100%; margin: 0; font-size: .9rem; line-height: 1.4; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.stk { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 248, 238, .92); color: #633018; font-size: .7rem; font-weight: 700; }
.stk-behind { flex-basis: 100%; padding: 8px 10px; border-radius: 14px; background: rgba(255, 248, 238, .94); color: #38251B; font-size: .78rem; } .stk-behind summary { cursor: pointer; font-weight: 700; color: #633018; display: flex; gap: 4px; align-items: center; } .stk-behind p { margin: 6px 0 0; line-height: 1.4; }
.stk-note { flex-basis: 100%; display: flex; gap: 8px; align-items: center; margin: 0; padding: 6px 10px; border-radius: 14px; background: #F6E4C8; color: #633018; font-size: .76rem; } .stk-note img { width: 26px; height: 26px; }
.stk-disc { flex-basis: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 0; border-radius: 14px; background: rgba(255, 248, 238, .95); color: #38251B; font: inherit; text-align: left; cursor: pointer; }
.stk-disc-img { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; } .stk-disc-img img { width: 100%; height: 100%; object-fit: cover; } .stk-disc span { flex: 1; display: grid; } .stk-disc small { font-size: .62rem; color: #925426; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .stk-disc b { font-size: .82rem; }
.lmv-say { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.lmv-say input { flex: 1; min-width: 0; min-height: 42px; padding: 0 14px; border: 1px solid rgba(255, 248, 238, .5); border-radius: 999px; background: rgba(30, 15, 7, .45); color: #FFF8EE; font: inherit; } .lmv-say input::placeholder { color: rgba(255, 248, 238, .7); }
.lmv-keep { flex: 1; background: rgba(255, 248, 238, .92) !important; color: #633018 !important; }
.lr-mv .lr-btn { background: rgba(30, 15, 7, .45); border-color: rgba(255, 248, 238, .4); color: #FFF8EE; }
.lmv.paused .lmv-bars i { opacity: .55; } .lmv-preview .lmv-say { display: none; }
/* creation */
.lmc-prev { margin: -4px 0 10px; border-radius: 14px; overflow: hidden; max-height: 220px; } .lmc-prev :is(img, video) { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.lmc-stk { margin: 6px 0 10px; padding: 8px 12px; border: 1px solid #EADCC8; border-radius: 14px; } .lmc-stk summary { cursor: pointer; font-weight: 700; color: #633018; }
.lmc-acts { display: flex; gap: 10px; } .lmc-acts .btn { flex: 1; justify-content: center; }
.lr-opt { width: 56px; } .lr-opt small { font-size: .5rem; letter-spacing: -.01em; max-width: 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 360px) { .lr-panel { gap: 0; padding: 4px; } .lr-opt { width: 47px; } .lr-opt small { font-size: .45rem; max-width: 47px; } }
/* =========================================================
v133 — era labels and filters, specialties; Loka reaction panel above the Live & Video viewer
========================================================= */
.lr-panel { z-index: 3000 !important; }
.era-host { position: relative; }
.era-tag { position: absolute; z-index: 2; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; font-size: .56rem; font-weight: 800; letter-spacing: .02em; pointer-events: none; box-shadow: 0 1px 4px rgba(40, 18, 6, .25); }
.era-traditional { background: rgba(255, 248, 238, .94); color: #633018; } .era-heritage { background: #F2CF9A; color: #4A230F; } .era-contemporary { background: #38251B; color: #FFF8EE; }
.era-bar { display: flex; gap: 6px; overflow-x: auto; margin: 8px 0 10px; scrollbar-width: none; } .era-bar::-webkit-scrollbar { display: none; }
.era-bar .chip { flex: 0 0 auto; min-height: 32px; padding: 0 12px; font-size: .74rem; }
.era-none { margin: 6px 0 14px; font-size: .82rem; color: #8A6F5A; }
.spec-chip { display: inline-block; margin: 4px 0 6px; padding: 3px 10px; border-radius: 999px; background: #F3E7D3; color: #7A4B2E; font-size: .72rem; font-weight: 700; }
/* labels sit at the photo's top-right so wavy photo edges never clip them (top-left holds existing badges) */
.era-tag { top: 8px !important; right: 8px !important; bottom: auto !important; }
.era-tag.era-inline { position: static !important; display: inline-block; align-self: flex-start; margin: 0 0 4px; box-shadow: none; }
/* quieter labels (v133b): small text above the title, only for Contemporary and Heritage-Inspired */
.era-txt { display: block; margin: 0 0 2px; padding: 0; background: none !important; font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.era-txt.era-contemporary { color: #925426 !important; } .era-txt.era-heritage { color: #A87955 !important; }
/* =========================================================
v135 — Discover Creators / Meet Travelers cards
========================================================= */
.dp-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 16px; background: #F1E6D6; }
.dp-switch button { min-height: 40px; border: 0; border-radius: 12px; background: none; color: #633018; font: inherit; font-weight: 700; cursor: pointer; }
.dp-switch [aria-selected="true"] { background: linear-gradient(135deg, #B07338, #8A4E24); color: #FFF6E8; }
.dp-list { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; }
@media (min-width: 640px) { .dp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dp-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid #EADCC8; border-radius: 20px; background: #FFF9F0; box-shadow: 0 10px 22px -20px rgba(58, 26, 9, .6); }
.dp-head { display: flex; align-items: center; gap: 12px; }
.dp-photo { flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 2px solid #E6CFA8; border-radius: 50%; overflow: hidden; background: #F1E4D1; cursor: pointer; }
.dp-photo :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; } .dp-photo .cd-initials { display: grid; place-items: center; width: 100%; height: 100%; color: #633018; font-weight: 800; }
.dp-who { display: grid; gap: 2px; min-width: 0; } .dp-who b { font-size: 1rem; color: #38251B; } .dp-who small { font-size: .78rem; line-height: 1.4; color: #806B5A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dp-lbl { display: block; margin-bottom: 6px; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #925426; }
.dp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dp-cell { display: grid; gap: 4px; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: #5A3B2A; cursor: pointer; min-width: 0; }
.dp-cell > :is(.pic, img), .dp-cell > svg { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; object-fit: cover; background: #F1E4D1; }
.dp-cell .pic img { width: 100%; height: 100%; object-fit: cover; }
.dp-cell > span { font-size: .66rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dp-cell-txt { cursor: default; } .dp-cell-txt > svg { padding: 26%; box-sizing: border-box; color: #B47A43; }
span.dp-cell { cursor: default; }
.dp-empty { margin: 0; padding: 14px; border-radius: 14px; background: #F6EEE2; font-size: .78rem; color: #8A6F5A; text-align: center; }
.dp-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.dp-acts .btn { min-height: 40px; justify-content: center; border-radius: 999px; font-size: .82rem; }
.dp-follow:not(.btn-ghost) { background: linear-gradient(135deg, #925426, #633018) !important; color: #FFF8EE !important; }
.dp-none { display: grid; justify-items: center; gap: 6px; padding: 30px 10px; text-align: center; color: #8A6F5A; } .dp-none b { color: #633018; }
/* v136 refinements */
.cdp ~ *, .topbar .tb-me, .topbar .tb-cart { }
.topbar .tb-me, .topbar .tb-cart { margin-left: auto; position: relative; }
.tb-me { padding: 0 !important; overflow: hidden; } .tb-me .avatar, .tb-me img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: .72rem; }
.tb-cart { color: #633018; } .tb-cart svg { fill: none; }
.tb-cart-n { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #B23A23; color: #fff; font-size: .62rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #FFF9F0; }
.dp-icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dp-ic { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.dp-ic-c { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(145deg, #FFF6E8, #F1DFC2); border: 1px solid #E6CFA8; color: #925426; font-weight: 800; font-size: .86rem; }
.dp-ic small { font-size: .64rem; line-height: 1.25; color: #5A3B2A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dp-more .dp-ic-c { background: #F6EEE2; color: #806B5A; }
.dp-lbl-more { color: #A87955; letter-spacing: .04em; }
.dp-icons { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
/* =========================================================
v139 — floating-notch bottom navigation (woven strip removed)
========================================================= */
.tab-weave { display: none !important; }
.tabbar { bottom: 0 !important; overflow: visible !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; height: calc(66px + env(safe-area-inset-bottom, 0px)) !important; background: #FFFDF8 !important; border-radius: 24px 24px 0 0 !important; box-shadow: 0 -8px 24px -16px rgba(58, 26, 9, .35) !important; }
.tabbar > button { position: relative; z-index: 1; }
.tabbar > button[aria-current="page"]::after, .tabbar > button[aria-current="page"]::before { content: none !important; }
.tabbar > button .tb-ico { position: relative; transition: transform .38s cubic-bezier(.3, 1.4, .5, 1), color .2s; }
.tabbar > button[aria-current="page"] .tb-ico { transform: translateY(-24px); color: #FFF6E8 !important; background: none !important; }
.tabbar > button[aria-current="page"] .tb-ico .ic { fill: none !important; stroke: #FFF6E8 !important; }
.tabbar > button[aria-current="page"] { color: #633018 !important; font-weight: 700 !important; }
.tabbar > button:not([aria-current="page"]) { color: #9A8676 !important; }
.tb-orb { position: absolute; z-index: 0; top: -22px; left: calc(var(--x, 50%) - 29px); width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(145deg, #8F5326, #633018);
box-shadow: 0 0 0 7px var(--bg, #F8F1E8), 0 10px 18px -8px rgba(58, 26, 9, .55); transition: left .42s cubic-bezier(.3, 1.25, .5, 1); pointer-events: none; opacity: 0; }
.tabbar.has-active .tb-orb { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tb-orb, .tabbar > button .tb-ico { transition: none !important; } }
/* stronger than the older active-tab styles (gold pill, pop animation) */
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico { transform: translateY(var(--rise, -20px)) !important; background: none !important; box-shadow: none !important; animation: none !important; color: #FFF6E8 !important; }
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico::before, html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico::after { content: none !important; }
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico .ic { stroke: #FFF6E8 !important; fill: none !important; }
/* v140 — smoother glide (gentle ease-out, no overshoot) and a gold/yellow-brown active circle */
.tb-orb { background: linear-gradient(145deg, #F2CF8A 0%, #D9A44E 45%, #B47A43 100%) !important; transition: left .6s cubic-bezier(.45, .05, .25, 1) !important;
box-shadow: 0 0 0 7px var(--bg, #F8F1E8), 0 10px 20px -8px rgba(150, 95, 30, .55), inset 0 1px 0 rgba(255, 245, 220, .6) !important; }
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico { color: #4A230F !important; animation: tbRise .6s cubic-bezier(.45, .05, .25, 1) both !important; }
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico .ic { stroke: #4A230F !important; }
html body .tabbar > button.tb-btn[aria-current="page"] { color: #8A5A1E !important; }
@keyframes tbRise { from { transform: translateY(0); } to { transform: translateY(var(--rise, -20px)); } }
.tabbar > button { transition: color .3s ease, transform .15s ease; } .tabbar > button:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .tb-orb { transition: none !important; } html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico { animation: none !important; } .tabbar > button:active { transform: none; } }
/* v141 — specified navigation colours (shared bottom navigation component) */
html body .tabbar { background: #F8F0E5 !important; }
html body .tabbar > button.tb-btn:not([aria-current="page"]) { color: #92765D !important; }
html body .tabbar > button.tb-btn:not([aria-current="page"]) .tb-ico, html body .tabbar > button.tb-btn:not([aria-current="page"]) .tb-ico .ic { color: #92765D !important; stroke: #92765D !important; }
.tb-orb { background: #D9A04B !important; box-shadow: 0 0 0 7px var(--bg, #F8F1E8), 0 10px 20px -8px rgba(117, 64, 31, .5) !important; }
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico { color: #FFFFFF !important; }
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico .ic { stroke: #FFFFFF !important; }
html body .tabbar > button.tb-btn[aria-current="page"] { color: #75401F !important; }
/* =========================================================
v142 — Home: header, search, 11.11 carousel, feature cards, LOCARTA LIVE; sale page
========================================================= */
.r3-home { padding-left: 16px !important; padding-right: 16px !important; }
.home-gold-intro { padding: 0 !important; background: none !important; }
/* header */
.h-top { display: flex !important; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 6px !important; }
.h-top .brand { margin-right: auto; }
.h-top .icon-btn { width: 44px; height: 44px; border-radius: 50%; background: #F3E6D3 !important; color: #633018 !important; box-shadow: 0 6px 14px -10px rgba(58, 26, 9, .5); }
.h-top .h-avatar { width: 44px; height: 44px; border-radius: 50%; background: #633018 !important; color: #FFF6E8 !important; font-weight: 800; border: 2px solid #F3E6D3; }
.h-chev { display: inline-grid; margin-left: -6px; color: #633018; transform: rotate(90deg); }
.h-menu { position: fixed; z-index: 1500; min-width: 210px; padding: 6px; border-radius: 16px; background: #FFFDF8; border: 1px solid #EADCC8; box-shadow: 0 16px 36px -14px rgba(58, 26, 9, .45); }
.h-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: #38251B; font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.h-menu button:hover, .h-menu button:focus-visible { background: #F6EEE2; }
/* search */
.h-search { margin: 8px 0 14px !important; min-height: 52px; border-radius: 999px !important; background: #FFFDF8 !important; border: 1px solid #EFE3D2 !important; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .55) !important; padding: 0 8px 0 18px !important; }
.h-search .h-filter { color: #633018 !important; }
/* 11.11 carousel */
.hs { position: relative; overflow: hidden; border-radius: 26px; margin: 0 0 16px; box-shadow: 0 18px 34px -24px rgba(58, 26, 9, .8); background: #F6E7D2; }
.hs-track { display: flex; transition: transform .6s cubic-bezier(.45, .05, .25, 1); }
.hs-slide { position: relative; flex: 0 0 100%; min-height: 236px; display: flex; align-items: center; overflow: hidden; }
.hs-art { position: absolute; inset: 0 0 0 38%; } .hs-bg { position: absolute; inset: 0; } .hs-bg img { width: 100%; height: 100%; object-fit: cover; }
.hs-art::before { content: ""; position: absolute; z-index: 1; inset: 0 0 0 -2px; background: linear-gradient(90deg, #F6E7D2 0%, rgba(246, 231, 210, .7) 22%, rgba(246, 231, 210, 0) 55%); }
.hs-prod { position: absolute; z-index: 2; right: 6%; bottom: 8%; width: 58%; max-width: 230px; filter: drop-shadow(0 14px 18px rgba(40, 18, 6, .45)); }
.hs-tag { position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; justify-items: center; padding: 10px 10px 8px; border-radius: 10px 10px 12px 12px; background: #F4DDB6; color: #633018; transform: rotate(10deg); box-shadow: 0 8px 16px -8px rgba(40, 18, 6, .5); line-height: 1; }
.hs-tag::before { content: ""; position: absolute; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #633018; } .hs-tag small { margin-top: 10px; font-size: .62rem; font-weight: 800; letter-spacing: .06em; } .hs-tag small + b { font-size: 1.5rem; font-weight: 900; } .hs-tag b + small { margin-top: 2px; }
.hs-copy { position: relative; z-index: 4; display: grid; justify-items: start; gap: 6px; max-width: 64%; padding: 18px 0 30px 18px; }
.hs-copy h2 { margin: 2px 0 0; font-size: 1.32rem; line-height: 1.15; color: #3B1E0E; } .hs-copy p { margin: 0; font-size: .78rem; color: #4A2E1E; font-weight: 600; }
.sl-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, #8F5326, #633018); color: #FFF6E8; font-weight: 900; font-size: .86rem; letter-spacing: .02em; }
.sl-badge.alt { background: #F4DDB6; color: #633018; font-size: .72rem; }
.hs-spark { position: absolute; left: 62%; top: 16px; color: #D9A04B; font-style: normal; font-size: 1.2rem; }
.hs-cta { margin-top: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px; background: linear-gradient(135deg, #7A3A1A, #5A2810) !important; color: #FFF6E8 !important; gap: 6px; }
.hs-dots { position: absolute; z-index: 5; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.hs-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(99, 48, 24, .3); cursor: pointer; transition: width .3s, background .3s; } .hs-dots button.on { width: 22px; background: #FFF6E8; box-shadow: 0 0 0 1px rgba(99, 48, 24, .25); }
@media (prefers-reduced-motion: reduce) { .hs-track { transition: none; } }
/* feature cards: one even row */
.home-feature-cards { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 0 16px !important; }
.home-feature-cards > button { min-width: 0 !important; padding: 12px 6px 10px !important; border-radius: 18px !important; background: #FFF9F0 !important; border: 1px solid #F0E4D2 !important; box-shadow: 0 10px 20px -18px rgba(58, 26, 9, .6) !important; }
/* LOCARTA LIVE */
.hl-sec { margin: 0 0 20px; padding: 14px 12px; border-radius: 22px; background: #FFF9F0; border: 1px solid #F0E4D2; box-shadow: 0 10px 22px -20px rgba(58, 26, 9, .6); }
.hl-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; } .hl-head h2 { margin: 0; font-size: 1rem; letter-spacing: .04em; color: #633018; } .hl-head .link { display: inline-flex; align-items: center; gap: 2px; color: #925426; font-weight: 600; }
.hl-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hl-card { position: relative; display: block; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #EFE4D2; cursor: pointer; }
.hl-card :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
.hl-card::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(0deg, rgba(30, 12, 4, .72), transparent); }
.hl-tag { position: absolute; z-index: 1; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; font-size: .64rem; font-weight: 800; color: #fff; }
.hl-tag.live { background: #D63A2C; } .hl-tag.live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; } .hl-tag.video { background: rgba(20, 12, 8, .78); }
.hl-cap { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 5px; color: #FFF8EE; font-size: .74rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* sale page */
.sl-strip { display: grid; gap: 4px; justify-items: start; padding: 14px; margin: 4px 0 12px; border-radius: 18px; background: linear-gradient(135deg, #F6E7D2, #EBD3AE); }
.sl-strip b { font-size: 1.1rem; color: #3B1E0E; } .sl-strip small { color: #6B4A33; font-size: .76rem; }
.sl-cats { margin-bottom: 12px; } .sl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .sl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sl-card { display: grid; gap: 3px; padding: 0 0 10px; border: 1px solid #EFE3D2; border-radius: 16px; overflow: hidden; background: #FFFDF8; text-align: left; font: inherit; color: #38251B; cursor: pointer; }
.sl-img { position: relative; aspect-ratio: 1 / 1; background: #EFE4D2; } .sl-img :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
.sl-pct { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 8px; background: #D63A2C; color: #fff; font-style: normal; font-size: .72rem; font-weight: 800; }
.sl-card > b { padding: 0 10px; font-size: .84rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sl-card > small { padding: 0 10px; font-size: .7rem; color: #8A6F5A; }
.sl-price { display: flex; align-items: baseline; gap: 6px; padding: 0 10px; } .sl-price b { color: #B23A23; } .sl-price s, .sale-was { color: #9A8471; font-size: .78rem; }
.sale-pct { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 8px; background: #D63A2C; color: #fff; font-size: .7rem; font-weight: 800; vertical-align: middle; }
/* consistent 16px page margins: cancel the older full-bleed margins on the Home intro */
html body .r3-home > .home-gold-intro { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; }
html body .r3-home > .home-gold-intro > * { margin-left: 0 !important; margin-right: 0 !important; max-width: 100%; box-sizing: border-box; }
.hs-copy .hs-cta { width: auto !important; justify-self: start !important; flex: none !important; font-size: .86rem !important; min-height: 40px !important; padding: 0 18px !important; }
.h-top .h-avatar { font-size: .78rem !important; line-height: 1; display: grid !important; place-items: center; overflow: hidden; }
.h-chev { margin-left: -4px !important; }
.hs-copy .hs-spark { position: absolute; left: auto !important; right: -6px; top: 6px; }
/* v143 — banner closer to the reference: wide proportions, product photo on the right, hanging tag, curved gold edge */
.hs { border-radius: 24px !important; background: linear-gradient(120deg, #FBEFDD 0%, #F3DFC2 60%, #E9CDA4 100%) !important; }
.hs-slide { min-height: 0 !important; aspect-ratio: 1.95 / 1; }
.hs-art { inset: 0 0 0 40% !important; } .hs-art::before { background: linear-gradient(90deg, #F7E8D2 0%, rgba(247, 232, 210, .65) 22%, rgba(247, 232, 210, 0) 60%) !important; }
.hs-prod { right: 4% !important; bottom: 10% !important; width: 62% !important; max-width: 220px; }
.hs-copy { max-width: 60% !important; gap: 5px !important; padding: 14px 0 26px 16px !important; }
.hs-copy h2 { font-size: 1.18rem !important; line-height: 1.12 !important; letter-spacing: -.01em; }
.hs-copy p { font-size: .7rem !important; } .hs-copy .sl-badge { font-size: .8rem; padding: 5px 12px; }
.hs-copy .hs-cta { min-height: 36px !important; padding: 0 16px !important; font-size: .8rem !important; margin-top: 4px !important; }
.hs-tag { top: 10px !important; right: 12px !important; padding: 9px 9px 7px !important; transform: rotate(9deg); }
.hs-tag sup { font-size: .55em; vertical-align: .55em; } .hs-tag small + b { font-size: 1.3rem !important; }
.hs-tag::after { content: ""; position: absolute; top: -14px; left: 50%; width: 2px; height: 16px; background: #8A5A2B; transform: translateX(-50%); }
.hs-wave { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; width: 100%; height: 22px; pointer-events: none; }
.hs-dots { bottom: 24px !important; z-index: 6 !important; }
@media (max-width: 360px) { .hs-copy h2 { font-size: 1.02rem !important; } .hs-copy p { display: none; } }
/* fit the copy like the reference: two-line headline, nothing clipped, button clear of the dots */
.hs-slide { aspect-ratio: 1.72 / 1 !important; align-items: stretch !important; }
.hs-copy { display: flex !important; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 63% !important; padding: 12px 0 34px 16px !important; box-sizing: border-box; }
.hs-copy h2 { font-size: 1.06rem !important; white-space: nowrap; }
.hs-copy p { font-size: .66rem !important; line-height: 1.3; max-width: 100%; }
.hs-copy .sl-badge { font-size: .74rem !important; padding: 4px 11px !important; }
.hs-copy .hs-cta { min-height: 32px !important; font-size: .74rem !important; padding: 0 14px !important; }
.hs-dots { bottom: 26px !important; left: auto !important; right: 0 !important; width: 37% !important; }
@media (max-width: 360px) { .hs-copy h2 { font-size: .94rem !important; } }
/* v144 — the three supplied promotional banners; homepage spacing */
.hs { background: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; padding-bottom: 18px; margin: 0 0 18px !important; }
.hs-track-wrap, .hs .hs-track { border-radius: 20px; }
.hs { --r: 20px; } .hs > .hs-track { overflow: visible; } .hs { clip-path: none; }
.hs .hs-slide.hs-img-slide { aspect-ratio: 1672 / 941 !important; min-height: 0 !important; display: block !important; }
.hs-img { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #F3E3CB; cursor: pointer; box-shadow: 0 16px 30px -22px rgba(58, 26, 9, .8); }
.hs-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hs-img:focus-visible { outline: 3px solid #D9A04B; outline-offset: 3px; }
.hs { overflow: hidden !important; border-radius: 20px 20px 0 0 !important; }
.hs .hs-dots { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; }
.hs .hs-dots button { background: #DCC6A6 !important; box-shadow: none !important; } .hs .hs-dots button.on { background: #D9A04B !important; }
/* spacing */
.h-top { padding-bottom: 4px !important; }
.h-search { margin: 12px 0 16px !important; }
.h-search input { text-overflow: ellipsis; min-width: 0; }
.home-feature-cards { margin: 0 0 20px !important; }
.home-feature-cards > button { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 148px; text-align: center; }
.home-feature-cards > button :is(small, p, span:not([class*=ic])) { overflow-wrap: normal; word-break: normal; hyphens: auto; line-height: 1.3; }
.home-feature-cards > button > :last-child { margin-top: auto; }
@media (max-width: 349px) { .home-feature-cards { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; } .home-feature-cards > button { flex: 0 0 104px; scroll-snap-align: start; } }
.hl-sec { margin: 0 0 22px !important; padding: 16px 14px !important; }
.hl-card { aspect-ratio: 16 / 11 !important; box-shadow: 0 10px 18px -14px rgba(58, 26, 9, .7); }
.r3-home { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
html body .r3-home .home-gold-intro > .home-feature-cards { margin-bottom: 20px !important; }
html body .r3-home .home-gold-intro > .hl-sec { margin-top: 0 !important; }
html body .home-feature-cards > button { padding-left: 4px !important; padding-right: 4px !important; }
html body .home-feature-cards > button b, html body .home-feature-cards > button strong { font-size: .74rem !important; letter-spacing: -.01em; white-space: nowrap; }
html body .home-feature-cards > button small { font-size: .64rem !important; }
/* scoped to #app so they outrank the older, very specific Home rules */
#app .r3-home .home-gold-intro > .home-feature-cards { margin-bottom: 20px !important; }
#app .r3-home .home-gold-intro > .hl-sec { margin-top: 0 !important; }
#app .r3-home .home-feature-cards > button { padding-left: 4px !important; padding-right: 4px !important; }
#app .r3-home .home-feature-cards > button :is(b, strong) { font-size: .72rem !important; letter-spacing: -.01em !important; white-space: nowrap !important; }
#app .r3-home .home-feature-cards > button small { font-size: .64rem !important; }
#app .hs { touch-action: pan-y; } #app .hs-img img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
@media (max-width: 349px) {
#app .r3-home .home-gold-intro > .home-feature-cards { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; gap: 8px !important; padding-bottom: 4px; scrollbar-width: none; }
#app .r3-home .home-gold-intro > .home-feature-cards > button { flex: 0 0 104px !important; width: 104px !important; scroll-snap-align: start; }
}
/* v145 — full-bleed banner: edge to edge, no side margins, no empty space; dots on the image's lower edge */
#app .r3-home .home-gold-intro > .hs { margin: 0 -16px 18px !important; width: auto !important; padding-bottom: 0 !important; border-radius: 0 !important; background: none !important; }
#app .hs .hs-slide.hs-img-slide { aspect-ratio: 1672 / 941 !important; }
#app .hs-img { border-radius: 0 !important; box-shadow: none !important; background: none !important; }
#app .hs-img img { object-fit: cover !important; }
#app .hs .hs-dots { bottom: 8px !important; }
#app .hs .hs-dots button { background: rgba(255, 248, 238, .75) !important; box-shadow: 0 0 0 1px rgba(99, 48, 24, .2) !important; } #app .hs .hs-dots button.on { background: #D9A04B !important; }
#app .r3-home .home-gold-intro > .hs { max-width: none !important; width: calc(100% + 32px) !important; }
/* the golden wash behind the top of Home reaches both screen edges (no pale side strips) */
#app .r3-home .home-gold-intro { position: relative; }
#app .r3-home .home-gold-intro::before { left: -16px !important; right: -16px !important; width: auto !important; }
#app .r3-home .home-gold-intro { overflow: visible !important; }
/* =========================================================
v147 — Log Out dialog (no bands, no scrollbar, Loka) and the Added-to-cart pop-up
========================================================= */
#sheet:has(.logout-head) { scrollbar-width: none !important; -ms-overflow-style: none; }
#sheet:has(.logout-head)::-webkit-scrollbar { display: none !important; width: 0 !important; }
#sheet:has(.logout-head) *::-webkit-scrollbar { display: none !important; }
#sheet:has(.logout-head) .auth-band { display: none !important; }
.logout-head { display: grid; justify-items: center; gap: 6px; padding-top: 4px; text-align: center; }
.logout-loka { width: 96px; height: 96px; object-fit: contain; }
.cart-pop { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 24px; background: rgba(40, 18, 6, .28); animation: cpfade .2s ease-out; }
.cart-pop.out { animation: cpfadeout .2s ease-in forwards; }
.cart-pop-card { display: grid; justify-items: center; gap: 4px; width: min(300px, 86vw); padding: 22px 18px 18px; border-radius: 24px; background: #FFF9F0; border: 1px solid #EADCC8; box-shadow: 0 24px 48px -20px rgba(40, 18, 6, .55); text-align: center; animation: cppop .34s cubic-bezier(.3, 1.4, .5, 1); }
.cart-pop-loka { position: relative; display: block; width: 104px; height: 104px; margin-bottom: 4px; }
.cart-pop-loka img { width: 100%; height: 100%; object-fit: contain; }
.cart-pop-check { position: absolute; right: -2px; bottom: 6px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #D9A04B; color: #fff; border: 3px solid #FFF9F0; font-style: normal; box-shadow: 0 6px 12px -6px rgba(58, 26, 9, .6); }
.cart-pop-check svg { stroke: #fff; }
.cart-pop-card > b { font-size: 1.1rem; color: #633018; } .cart-pop-card > small { font-size: .8rem; color: #806B5A; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-pop-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 12px; } .cart-pop-acts .btn { min-height: 42px; justify-content: center; border-radius: 999px; font-size: .82rem; }
@keyframes cppop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpfade { from { opacity: 0; } to { opacity: 1; } } @keyframes cpfadeout { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cart-pop, .cart-pop-card, .cart-pop.out { animation: none !important; } }
/* v148 — Community gets the same golden-brown wash as Home (same layers), fading into cream below Loka Moments */
#app .comm.sxc {
background-color: var(--bg, #F8F1E8) !important;
background-image: linear-gradient(rgba(248, 241, 231, 0) 70%, rgba(248, 241, 231, .94) 100%),
radial-gradient(82% 38% at 50% 0%, rgba(255, 248, 224, .92) 0%, rgba(255, 239, 197, .52) 48%, rgba(0, 0, 0, 0) 78%),
radial-gradient(95% 62% at 100% 48%, rgba(255, 220, 158, .28) 0%, rgba(0, 0, 0, 0) 72%),
linear-gradient(158deg, #F0D39D 0%, #DEB879 42%, #C18C52 76%, #AE7544 100%) !important;
background-size: 100% 640px !important; background-repeat: no-repeat !important;
}
/* v149 — Loka pop-ups for the big moments (shares the Added-to-cart styles) */
.loka-pop .lp-sub { white-space: normal !important; line-height: 1.4; max-width: 240px; }
.cart-pop-acts.one { grid-template-columns: 1fr !important; }
/* =========================================================
v151 — Community cards and sections formatted like the reference
========================================================= */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#app .comm.sxc .c-me-dot { position: relative; } #app .comm.sxc .c-me-dot::after { content: ""; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #D9A04B; border: 2px solid #FFF9F0; }
/* hero: a rounded card inside the page margins */
#app .comm.sxc > .sxc-hero { margin: 14px 0 26px !important; width: auto !important; border-radius: 28px !important; overflow: hidden !important; min-height: 260px; box-shadow: 0 18px 34px -24px rgba(58, 26, 9, .7) !important; }
#app .comm.sxc .sxc-hero .r3-kicker { display: inline-block; margin: 0 0 10px; padding: 6px 14px; border-radius: 999px; background: #EBCFA6; color: #633018; font-size: .66rem; font-weight: 800; letter-spacing: .22em; }
#app .comm.sxc .sxc-hero h1 { font-size: 1.62rem !important; line-height: 1.12 !important; }
#app .comm.sxc .sxc-hero .sxc-copy > p:not(.r3-kicker) { font-size: .82rem !important; line-height: 1.45; }
#app .comm.sxc .sxc-create { min-height: 46px !important; padding: 0 22px !important; border-radius: 999px !important; font-size: .9rem !important; gap: 10px !important; }
/* Loka Moments: big title + See more; tall rounded story tiles */
#app .comm.sxc .lm-head { display: flex !important; align-items: center !important; justify-content: space-between; margin: 0 0 12px !important; }
#app .comm.sxc .lm-head b { font-size: 1.28rem !important; color: #4A230F; }
#app .comm.sxc .lm-more { display: inline-flex; align-items: center; gap: 6px; color: #633018; font-size: .84rem; font-weight: 600; }
#app .comm.sxc .lmr { gap: 10px !important; padding: 2px 2px 8px !important; }
#app .comm.sxc .lmr > button { width: 92px !important; gap: 0 !important; }
#app .comm.sxc .lmr-ring { width: 92px !important; height: 124px !important; padding: 0 !important; border-radius: 18px !important; background: none !important; border: 2px solid transparent; box-sizing: border-box; box-shadow: 0 10px 18px -14px rgba(58, 26, 9, .7); }
#app .comm.sxc .lmr-ring.on { border-color: #D9A04B !important; }
#app .comm.sxc .lmr-ring > *, #app .comm.sxc .lmr-img { border: 0 !important; border-radius: 16px !important; }
#app .comm.sxc .lmr-hl .lmr-ring { border-color: #633018 !important; }
#app .comm.sxc .lmr-me { width: 92px !important; }
#app .comm.sxc .lmr-add { display: grid; place-items: center; align-content: center; gap: 10px; width: 92px; height: 124px; border-radius: 18px; background: #F3E3CB; color: #633018; box-shadow: 0 10px 18px -14px rgba(58, 26, 9, .6); }
#app .comm.sxc .lmr-add i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #7A3A1A; color: #FFF6E8; font-style: normal; }
#app .comm.sxc .lmr-add i svg { stroke: #FFF6E8; }
#app .comm.sxc .lmr-add small { font-size: .74rem; font-weight: 600; white-space: nowrap; }
/* Videos from creators: one large wide card at a time, play button centred */
#app .comm.sxc .cm-videos .sec-head h2 { font-size: 1.28rem !important; }
#app .comm.sxc .cm-videos .lv-rail { gap: 12px !important; scroll-snap-type: x mandatory; }
#app .comm.sxc .cm-videos .lvr-card { flex: 0 0 100% !important; width: 100% !important; scroll-snap-align: start; }
#app .comm.sxc .cm-videos .lvr-thumb { display: block; aspect-ratio: 3 / 1.1 !important; height: auto !important; border-radius: 24px !important; overflow: hidden; }
#app .comm.sxc .cm-videos .lvr-thumb :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
#app .comm.sxc .cm-videos .lvr-play, #app .comm.sxc .cm-videos .lvr-thumb [class*=play] { position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%); width: 56px !important; height: 56px !important; border-radius: 50%; background: rgba(30, 14, 6, .45) !important; border: 2px solid rgba(255, 248, 238, .85); display: grid !important; place-items: center; }
#app .comm.sxc .sxc-hero h1 { font-size: 1.36rem !important; }
#app .comm.sxc .sxc-hero .sxc-copy { max-width: 62% !important; }
#app .comm.sxc .lmr-add small { white-space: normal !important; text-align: center; line-height: 1.2; font-size: .7rem !important; padding: 0 6px; }
#app .comm.sxc .cm-videos .lv-rail { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; scroll-padding: 0 !important; }
#app .comm.sxc .cm-videos .lv-rail { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
#app .comm.sxc .cm-videos .lvr-card { flex-basis: 100% !important; min-width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
#app .comm.sxc .sxc-hero .sxc-copy { max-width: none !important; width: auto !important; }
#app .comm.sxc .sxc-hero h1 { white-space: nowrap !important; font-size: clamp(1.12rem, 6.1vw, 1.5rem) !important; }
#app .comm.sxc > .cm-videos { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-right: 0 !important; box-sizing: border-box; overflow: hidden; }
#app .comm.sxc .sxc-hero .sxc-copy { display: flex !important; flex-direction: column; align-items: flex-start; }
#app .comm.sxc .sxc-hero .r3-kicker { display: inline-block !important; width: auto !important; align-self: flex-start; }
#app .comm.sxc .sxc-hero .sxc-copy > p:not(.r3-kicker) { max-width: 58% !important; }
/* =========================================================
v152 — Shopping Cart page
========================================================= */
.sc-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px; background: #FFFDF8; border-bottom: 1px solid #F0E6D8; }
.sc-top h1 { flex: 1; margin: 0; font-size: 1.12rem; color: #38251B; } .sc-top h1 span { color: #806B5A; font-weight: 600; }
.sc-top .icon-btn { color: #633018; } .sc-edit { color: #633018; font-weight: 600; }
.sc { padding: 12px 12px calc(170px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; background: var(--bg, #F8F1E8); min-height: 60vh; }
.sc-shop { padding: 4px 12px 6px; border-radius: 18px; background: #FFFDF8; box-shadow: 0 8px 18px -16px rgba(58, 26, 9, .6); }
.sc-shop-h { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid #F3EADD; }
.sc-shop-n { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: #38251B; } .sc-shop-n b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-shop-n svg { color: #925426; flex: none; }
.ck { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1.5px solid #C9B49A; border-radius: 7px; background: #fff; color: #fff; cursor: pointer; }
.ck.on { background: #D9A04B; border-color: #D9A04B; } .ck svg { stroke: #fff; width: 14px; height: 14px; }
.sc-line { display: flex; align-items: center; gap: 12px; padding: 14px 0; } .sc-line + .sc-line { border-top: 1px solid #F6EFE5; }
.sc-pic { flex: none; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #F1E4D1; cursor: pointer; } .sc-pic :is(.pic, img) { width: 100%; height: 100%; object-fit: cover; }
.sc-info { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.sc-t { grid-column: 1 / -1; font-size: .86rem; font-weight: 600; color: #38251B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-qty { grid-column: 2; grid-row: 2; display: inline-flex; align-items: center; border: 1px solid #EADCC8; border-radius: 10px; overflow: hidden; background: #fff; }
.sc-qty button { width: 30px; height: 30px; border: 0; background: #FFF9F0; color: #633018; font-size: 1rem; cursor: pointer; } .sc-qty button:disabled { color: #CBBBA8; cursor: default; }
.sc-qty span { min-width: 30px; text-align: center; font-size: .84rem; font-weight: 700; color: #38251B; }
.sc-price { grid-column: 1; grid-row: 2; display: inline-flex; align-items: baseline; gap: 6px; } .sc-price b { color: #B23A23; font-size: .98rem; } .sc-price s { color: #9A8471; font-size: .74rem; }
.sc-deal { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 4px; color: #B23A23; font-size: .7rem; font-weight: 600; }
.sc-bar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; background: #FFFDF8; border-top: 1px solid #EFE3D2; box-shadow: 0 -10px 22px -18px rgba(58, 26, 9, .5); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sc-vou { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-bottom: 1px solid #F3EADD; background: none; color: #38251B; font: inherit; font-size: .88rem; cursor: pointer; text-align: left; }
.sc-vou svg:first-child { color: #D9A04B; } .sc-vou span { flex: 1; } .sc-vou small { color: #9A8471; font-size: .76rem; }
.sc-pay { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 12px 0 14px; } .sc-all-l { font-size: .9rem; color: #38251B; margin-right: auto; }
.sc-total { display: grid; justify-items: end; line-height: 1.1; } .sc-total small { font-size: .68rem; color: #806B5A; } .sc-total b { color: #B23A23; font-size: 1.08rem; }
.sc-go { min-height: 46px; padding: 0 18px; border-radius: 14px; background: linear-gradient(135deg, #8F5326, #633018) !important; color: #FFF8EE !important; font-weight: 700; } .sc-go:disabled { opacity: .45; }
.sc-del { background: #B23A23 !important; }
.sc-empty { display: grid; justify-items: center; gap: 8px; padding: 60px 24px; text-align: center; } .sc-empty b { font-size: 1.1rem; color: #633018; } .sc-empty small { color: #806B5A; margin-bottom: 8px; }
body:has(.sc-bar) .tabbar { display: none !important; }
.sc-total i { font-style: normal; font-size: .6rem; color: #9A8471; white-space: nowrap; }
/* =========================================================
v153 — Creator Membership, upgrade prompt, analytics
========================================================= */
.mb-sub { margin: 4px 0 14px; color: #6B4A33; font-size: .9rem; }
.mb-now { display: grid; gap: 10px; padding: 16px; margin-bottom: 16px; border-radius: 20px; background: #FFFDF8; border: 1px solid #EFE3D2; }
.mb-now > div:first-child { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mb-now > div small { color: #806B5A; font-size: .74rem; width: 100%; } .mb-now > div b { font-size: 1.3rem; color: #4A230F; }
.mb-st { padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; background: #F3E7D3; color: #7A4B2E; } .mb-st.st-active { background: #E3F1E4; color: #2F6B3A; } .mb-st.st-expired { background: #F6E2DC; color: #9A3A22; } .mb-st.st-pending-payment { background: #FBEBC8; color: #7A4B12; }
.mb-now dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0; } .mb-now dt { font-size: .7rem; color: #9A8471; } .mb-now dd { margin: 0; font-weight: 700; color: #38251B; font-size: .88rem; }
.mb-pend { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: #FBF1DC; color: #6B4A20; font-size: .8rem; line-height: 1.4; }
.mb-cancel { justify-self: start; color: #9A3A22; }
.mb-cards { display: grid; gap: 14px; } @media (min-width: 720px) { .mb-cards { grid-template-columns: 1fr 1fr; } }
.mb-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 20px 18px; border-radius: 22px; background: #FFFDF8; border: 1px solid #EFE3D2; box-shadow: 0 14px 28px -24px rgba(58, 26, 9, .7); }
.mb-card.pro { background: linear-gradient(160deg, #FFF6E6, #F5E0BC); border-color: #E6C68E; }
.mb-tag { justify-self: start; padding: 4px 12px; border-radius: 999px; background: #F1E4D1; color: #633018; font-size: .7rem; font-weight: 800; letter-spacing: .14em; } .mb-tag.pro, .mb-card.pro .mb-tag { background: #633018; color: #FFF6E8; }
.mb-pop { position: absolute; top: 18px; right: 16px; padding: 3px 10px; border-radius: 999px; background: #D9A04B; color: #fff; font-style: normal; font-size: .66rem; font-weight: 800; }
.mb-price { font-size: 1.9rem; color: #4A230F; line-height: 1; } .mb-price small { display: block; margin-top: 4px; font-size: .78rem; font-weight: 600; color: #806B5A; }
.mb-card > p { margin: 0; color: #6B4A33; font-size: .84rem; } .mb-card ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .mb-card li { display: flex; gap: 8px; font-size: .84rem; color: #38251B; } .mb-card li svg { flex: none; color: #B47A43; margin-top: 2px; }
.mb-card .btn { justify-content: center; min-height: 46px; border-radius: 999px; }
.mb-h { margin: 22px 0 8px; color: #4A230F; } .mb-table { border-radius: 16px; overflow: hidden; border: 1px solid #EFE3D2; background: #FFFDF8; }
.mb-tr { display: grid; grid-template-columns: 1fr 86px 110px; gap: 8px; align-items: center; padding: 10px 12px; font-size: .78rem; color: #38251B; } .mb-tr + .mb-tr { border-top: 1px solid #F3EADD; } .mb-th { background: #F6EEE2; font-weight: 800; color: #633018; }
.mb-tr span:not(:first-child) { text-align: center; } .mb-yes svg { color: #2F6B3A; } .mb-no { color: #C9B49A; }
.mb-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; margin: 0 0 12px; border: 1px solid #E6C68E; border-radius: 16px; background: linear-gradient(160deg, #FFF6E6, #F5E0BC); color: #38251B; font: inherit; text-align: left; cursor: pointer; }
.mb-row span { flex: 1; display: grid; } .mb-row small { color: #806B5A; font-size: .74rem; } .mb-row svg:first-child { color: #B47A43; }
.mb-strip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 12px; border-radius: 14px; background: #FFFDF8; border: 1px solid #EFE3D2; } .mb-strip small { flex: 1; color: #806B5A; } .mb-strip .link { color: #633018; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.up-sheet { display: grid; justify-items: center; gap: 8px; text-align: center; } .up-sheet h2 { margin: 6px 0 0; font-size: 1.18rem; color: #4A230F; }
.up-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #F5E0BC; color: #633018; }
.up-feat { margin: 0; color: #38251B; } .up-price { margin: 4px 0; color: #4A230F; } .up-price b { font-size: 1.5rem; }
.up-acts { display: grid; gap: 8px; width: 100%; margin-top: 6px; } .up-acts .btn { justify-content: center; min-height: 46px; border-radius: 999px; }
.mb-locked { display: grid; justify-items: center; gap: 10px; padding-top: 40px; text-align: center; }
.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; } @media (min-width: 720px) { .an-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.an-stat { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: #FFFDF8; border: 1px solid #EFE3D2; } .an-stat small { color: #806B5A; font-size: .72rem; } .an-stat b { font-size: 1.15rem; color: #4A230F; }
.an-h { margin: 16px 0 8px; color: #4A230F; } .an-best { display: grid; gap: 8px; margin: 0; padding-left: 20px; } .an-best li { padding: 10px 12px; border-radius: 12px; background: #FFFDF8; } .an-best small { display: block; color: #806B5A; }
.adm-key { display: flex; gap: 8px; align-items: flex-end; } .adm-key .field { flex: 1; }
/* =========================================================
v154 — category filter rows: lighter, aligned, evenly spaced (all category pages)
========================================================= */
/* era filter: a slim text-tab row (distinct from the category chips) */
#app main .era-bar { display: flex !important; gap: 18px !important; margin: 12px 0 6px !important; padding: 0 2px 2px !important; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #EFE3D2; }
#app main .era-bar::-webkit-scrollbar { display: none; }
#app main .era-bar .chip { flex: 0 0 auto; min-height: 34px !important; height: auto !important; padding: 0 1px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
color: #9A8471 !important; font-size: .76rem !important; font-weight: 600 !important; position: relative; }
#app main .era-bar .chip[aria-pressed="true"] { color: #633018 !important; font-weight: 800 !important; }
#app main .era-bar .chip[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; border-radius: 3px; background: #D9A04B; }
/* category chips: smaller pills, text centred, same margin as the page */
#app main :is(.mk-subs, .bk-subs, .cg-types, .map-cats) { display: flex !important; gap: 8px !important; margin: 10px 0 14px !important; padding: 0 !important; overflow-x: auto; scrollbar-width: none; }
#app main :is(.mk-subs, .bk-subs, .cg-types, .map-cats)::-webkit-scrollbar { display: none; }
#app main :is(.mk-subs, .bk-subs, .cg-types, .map-cats) .chip { flex: 0 0 auto; display: inline-flex !important; align-items: center !important; justify-content: center; min-height: 32px !important; height: 32px !important;
padding: 0 14px !important; border-radius: 999px !important; font-size: .76rem !important; line-height: 1 !important; white-space: nowrap; }
#app .r3-home ~ * .era-bar, #app main .map-cats + .era-bar { margin-top: 4px !important; }
#app main .cat-hero + .era-bar { margin-left: 18px !important; margin-right: 18px !important; }
/* =========================================================
v155 — navigation only on main pages; Home product card treatment
========================================================= */
body.tabbar-off { --tabbar: 0px; }
body.tabbar-off .tabbar, .tabbar[hidden] { display: none !important; }
/* =========================================================
v157 — one comment layout (live, video, posts) with the text field pinned to the bottom
========================================================= */
#sheet:has(.rl-panel-head) { display: flex !important; flex-direction: column !important; height: min(82vh, 720px) !important; max-height: min(82vh, 720px) !important; overflow: hidden !important; }
#sheet:has(.rl-panel-head) > .rl-panel-scroll { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; }
/* live: the list grows, so the composer sits at the bottom */
#sheet:has(.rl-panel-head) > .rl-panel-scroll > .rl-panel-comments { flex: 1 0 auto; }
#sheet:has(.rl-panel-head) > .rl-panel-scroll > .rl-panel-compose { position: sticky; bottom: 0; margin-top: auto !important; padding-top: 10px; background: inherit; }
#sheet:has(.rl-panel-head) > .rl-panel-scroll > .rl-panel-note { margin-bottom: 0; }
/* posts and videos: the footer is outside the scroll area, always at the bottom */
#sheet .cmx-scroll { padding: 0 2px 8px !important; }
#sheet .cmx-scroll .cmx-tools { justify-content: flex-end !important; margin: 4px 0 6px !important; }
#sheet .cmx-scroll .rl-comments-empty { list-style: none; }
#sheet .cmx-foot { flex: none; padding: 10px 0 calc(2px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #F0E6D8; background: inherit; }
#sheet .cmx-foot .cmx-say { position: static !important; border: 0 !important; padding: 0 !important; background: none !important; }
#sheet .cmx-foot .cmx-rep, #sheet .cmx-foot .cmx-tsopt { margin: 0 2px 8px; }
#sheet .cmx-foot .rl-panel-note { margin: 6px 0 0; }
/* reactions show only Loka and the count */
.lr-btn .lr-name { display: none !important; }
/* the post and video composers use exactly the live composer's style */
#sheet .cmx-foot .rl-panel-compose { display: flex !important; gap: 8px !important; align-items: center !important; }
#sheet .cmx-foot .rl-panel-compose input[name="text"] { flex: 1; min-width: 0; height: 44px !important; padding: 0 15px !important; border-radius: 999px !important; border: 1px solid rgb(226, 204, 174) !important;
background: rgb(255, 253, 249) !important; color: rgb(75, 44, 24) !important; font: inherit; font-size: 12.8px !important; box-shadow: none !important; outline-offset: 2px; }
#sheet .cmx-foot .rl-panel-compose button[type="submit"] { flex: none; display: grid !important; place-items: center; width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
background: linear-gradient(145deg, rgb(117, 64, 30), rgb(165, 106, 53)) !important; color: rgb(255, 248, 236) !important; box-shadow: rgba(76, 39, 15, .2) 0 5px 12px 0 !important; cursor: pointer; }
#sheet .cmx-foot .rl-panel-compose button[type="submit"] svg { stroke: currentColor; }
/* keep the empty state compact when the list fills the sheet */
#sheet:has(.rl-panel-head) .rl-panel-comments { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; }
#sheet:has(.rl-panel-head) .rl-comments-empty { flex: none !important; height: auto !important; min-height: 0 !important; display: grid !important; justify-items: center !important; align-content: start !important; gap: 6px !important; margin: 36px auto 0 !important; }
/* =========================================================
v158 — floating bottom navigation with a real curved notch around the gold circle
========================================================= */
:root { --tabbar: calc(88px + env(safe-area-inset-bottom, 0px)); }
body.tabbar-off { --tabbar: 0px !important; }
html body .tabbar { left: 12px !important; right: 12px !important; width: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; height: 64px !important; padding-bottom: 0 !important;
border-radius: 22px !important; background: transparent !important; box-shadow: none !important; filter: drop-shadow(0 8px 14px rgba(58, 26, 9, .16)) drop-shadow(0 1px 1px rgba(58, 26, 9, .06)); }
/* the bar's surface, with a circular notch cut where the gold circle sits */
html body .tabbar::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 22px; background: #F8F0E5; pointer-events: none;
-webkit-mask: radial-gradient(circle 37px at var(--nx, -100px) 8px, transparent 36.5px, #000 37.5px); mask: radial-gradient(circle 37px at var(--nx, -100px) 8px, transparent 36.5px, #000 37.5px); }
html body .tabbar:not(.has-active)::before { -webkit-mask: none; mask: none; }
/* the circle now sits in a real notch: no painted ring around it */
html body .tabbar .tb-orb { box-shadow: 0 10px 18px -8px rgba(117, 64, 31, .55), inset 0 1px 0 rgba(255, 245, 220, .45) !important; }
html body .tabbar > button { z-index: 1; }
html body .tabbar { width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; left: 12px !important; right: auto !important; transform: none !important; margin: 0 !important; }
/* make the notch read clearly: a fine outline traces the bar (including the cut-out) and the gap is a little wider */
html body .tabbar { filter: drop-shadow(0 0 0.6px rgba(96, 53, 31, .55)) drop-shadow(0 8px 14px rgba(58, 26, 9, .16)) !important; }
html body .tabbar::before { -webkit-mask: radial-gradient(circle 39px at var(--nx, -100px) 8px, transparent 38.5px, #000 39.5px) !important; mask: radial-gradient(circle 39px at var(--nx, -100px) 8px, transparent 38.5px, #000 39.5px) !important; }
html body .tabbar:not(.has-active)::before { -webkit-mask: none !important; mask: none !important; }
/* a clean gap: fill the notch with the page background (the bar's fine outline still traces the curve) */
html body .tabbar .tb-orb { box-shadow: 0 0 0 9.4px var(--bg, #F8F1E8), 0 12px 18px -6px rgba(117, 64, 31, .45) !important; }
/* raise the circle and notch 4px so the gap never touches the active label */
html body .tabbar .tb-orb { top: -26px !important; }
html body .tabbar { --rise: -25px; }
html body .tabbar::before { -webkit-mask: radial-gradient(circle 39px at var(--nx, -100px) 3px, transparent 38.5px, #000 39.5px) !important; mask: radial-gradient(circle 39px at var(--nx, -100px) 3px, transparent 38.5px, #000 39.5px) !important; }
html body .tabbar:not(.has-active)::before { -webkit-mask: none !important; mask: none !important; }
html body .tabbar .tb-orb { top: -29px !important; }
html body .tabbar::before { -webkit-mask: radial-gradient(circle 39px at var(--nx, -100px) 0px, transparent 38.5px, #000 39.5px) !important; mask: radial-gradient(circle 39px at var(--nx, -100px) 0px, transparent 38.5px, #000 39.5px) !important; }
html body .tabbar:not(.has-active)::before { -webkit-mask: none !important; mask: none !important; }
/* =========================================================
v159 — simple floating pill navigation (reference): no circle or notch; the active tab is shown by colour
========================================================= */
html body .tabbar { left: 16px !important; width: calc(100% - 32px) !important; max-width: calc(100% - 32px) !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; height: 64px !important;
border-radius: 999px !important; filter: none !important; background: #F8F0E5 !important; box-shadow: 0 14px 34px -12px rgba(58, 26, 9, .28), 0 2px 6px rgba(58, 26, 9, .06) !important; }
html body .tabbar::before { display: none !important; }
html body .tabbar .tb-orb { display: none !important; }
/* every tab: icon above label, same size; colour change only */
html body .tabbar > button.tb-btn { color: #92765D !important; transition: color .25s ease !important; }
html body .tabbar > button.tb-btn .tb-ico { transform: none !important; animation: none !important; background: none !important; box-shadow: none !important; }
html body .tabbar > button.tb-btn:not([aria-current="page"]) .tb-ico .ic { stroke: #92765D !important; }
html body .tabbar > button.tb-btn[aria-current="page"] { color: #9C5E1E !important; font-weight: 700 !important; }
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico, html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico .ic { color: #9C5E1E !important; stroke: #9C5E1E !important; }
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico .ic { stroke-width: 2.4 !important; fill: rgba(217, 160, 75, .22) !important; }
html body .tabbar > button.tb-btn[aria-current="page"]::before, html body .tabbar > button.tb-btn[aria-current="page"]::after { content: none !important; }
html body .tabbar > button.tb-btn:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { html body .tabbar > button.tb-btn { transition: none !important; } }
/* the active icon no longer rises (there is no circle); five equal columns */
html body .tabbar { --rise: 0px !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico { transform: none !important; animation: none !important; background: none !important; }
html body .tabbar > button.tb-btn .tb-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* every label fits, even "Community" on small phones */
html body .tabbar > button.tb-btn { padding-left: 1px !important; padding-right: 1px !important; }
html body .tabbar .tb-label { font-size: clamp(9.6px, 2.95vw, 11.2px) !important; letter-spacing: -.01em; }
@media (max-width: 360px) { html body .tabbar { left: 10px !important; width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; } }
/* =========================================================
v160 — creator home (Studio): clear sections and cards
========================================================= */
#app .cr-home.cwx-v2 { display: grid; gap: 18px; padding-bottom: calc(var(--tabbar) + 24px) !important; }
#app .cwx-v2 > .c-head { margin: 0 !important; }
#app .cwx-v2 .cw-hello { display: grid; gap: 2px; margin: -4px 0 -6px !important; font-size: 1.32rem !important; font-weight: 800; color: #3B1E0E; }
#app .cwx-v2 .cw-hello .cw-sub { font-size: .8rem; font-weight: 500; color: #806B5A; }
/* profile card with the plan bar attached beneath it */
#app .cwx-profile { display: grid; }
#app .cwx-profile .cwx-me { position: relative; z-index: 1; margin: 0 !important; border-radius: 22px !important; }
#app .cwx-profile .cwx-plan { margin: -14px 0 0 !important; padding: 22px 16px 10px !important; border-radius: 0 0 20px 20px !important; background: #FFFDF8 !important; border: 1px solid #EFE3D2 !important; border-top: 0 !important; }
.cwx-sec { display: grid; gap: 10px; }
.cwx-h { display: flex; align-items: baseline; justify-content: space-between; } .cwx-h h3 { margin: 0; font-size: 1.02rem; color: #4A230F; } .cwx-h .see-all { font-size: .8rem; }
.cwx-card { padding: 14px; border-radius: 20px; background: #FFFDF8; border: 1px solid #EFE3D2; box-shadow: 0 12px 24px -22px rgba(58, 26, 9, .6); }
#app .cwx-complete .pcx { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
/* quick actions: five equal tiles */
#app .cwx-v2 .cwx-acts { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important; padding: 12px 6px !important; border-radius: 20px; background: #FFFDF8; border: 1px solid #EFE3D2; }
#app .cwx-v2 .cwx-acts > button { display: grid !important; justify-items: center; gap: 6px; padding: 0 !important; min-width: 0; background: none !important; border: 0 !important; box-shadow: none !important; font-size: .72rem !important; font-weight: 600; color: #4A230F !important; }
#app .cwx-v2 .cwx-acts > button svg { box-sizing: content-box; width: 22px; height: 22px; padding: 12px; border-radius: 16px; background: linear-gradient(150deg, #FBEAD0, #F1D7AE); color: #7A3A1A; }
/* at a glance: stats + this month in one card */
#app .cwx-glance { display: grid; gap: 12px; }
#app .cwx-glance .cwx-stats, #app .cwx-glance .cwx-month { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
#app .cwx-glance .cwx-month { padding-top: 12px !important; border-top: 1px solid #F3EADD !important; }
#app .cwx-glance :is(.cwx-stats > *, .cwx-month > *) { display: grid; justify-items: center; gap: 2px; background: none !important; border: 0 !important; box-shadow: none !important; padding: 2px 0 !important; text-align: center; color: #806B5A; font-size: .72rem; }
#app .cwx-glance :is(.cwx-stats > *, .cwx-month > *) + * { border-left: 1px solid #F3EADD !important; }
#app .cwx-glance :is(.cwx-stats, .cwx-month) :is(b, strong) { font-size: 1.12rem; color: #3B1E0E; }
/* recent creations */
#app .cwx-v2 .cwx-grid { margin: 0 !important; }
.cwx-empty { display: grid; justify-items: center; gap: 4px; padding: 18px 12px; border-radius: 20px; background: #FFFDF8; border: 1px dashed #E2C79E; text-align: center; }
.cwx-empty b { color: #4A230F; } .cwx-empty small { color: #806B5A; margin-bottom: 6px; } .cwx-empty .btn { border-radius: 999px; gap: 6px; }
/* grow your reach */
#app .cwx-v2 .pr-entry { margin: 0 !important; border-radius: 20px !important; }
/* studio tools: one tidy two-column grid */
.cwx-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#app .cwx-tools > .cwx-tool { display: flex !important; align-items: center; gap: 10px; min-height: 58px; margin: 0 !important; padding: 10px 12px !important; border-radius: 16px !important; background: #FFFDF8 !important; border: 1px solid #EFE3D2 !important; box-shadow: none !important;
color: #38251B !important; font: inherit; font-size: .8rem !important; font-weight: 700; text-align: left; width: auto !important; }
#app .cwx-tools > .cwx-tool svg:first-child { flex: none; color: #9C5E1E; }
#app .cwx-tools > .cwx-tool small { display: block; font-weight: 500; color: #806B5A; font-size: .68rem; }
#app .cwx-tools > .cwx-tool > svg:last-child:not(:first-child) { display: none; }
/* tidy tool tiles: icon left, title and detail stacked */
#app .cwx-tools > .cwx-tool { display: flex !important; align-items: center !important; gap: 10px !important; justify-content: flex-start !important; text-align: left !important; }
#app .cwx-tools .cwx-ti { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(150deg, #FBEAD0, #F1D7AE); color: #7A3A1A; }
#app .cwx-tools .cwx-ti svg { width: 18px; height: 18px; }
#app .cwx-tools .cwx-tt { display: grid; gap: 1px; min-width: 0; } #app .cwx-tools .cwx-tt b { font-size: .8rem; line-height: 1.2; color: #38251B; }
#app .cwx-tools .cwx-tt small { font-size: .68rem; font-weight: 500; color: #806B5A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the empty state spans the full width */
#app .cwx-v2 .cwx-grid:has(.cwx-empty) { display: block !important; }
#app .cwx-v2 .cwx-empty { width: auto; }
@media (max-width: 360px) {
#app .cwx-v2 .cwx-acts { gap: 4px !important; padding: 12px 4px !important; }
#app .cwx-v2 .cwx-acts > button { font-size: .62rem !important; letter-spacing: -.01em; }
#app .cwx-v2 .cwx-acts > button svg { padding: 10px; width: 20px; height: 20px; }
}
/* =========================================================
v161 — performance overview, recent activity, quick actions, analytics charts
========================================================= */
#app .cwx-v2 .cwx-acts.cwx-acts6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 14px !important; }
#app .cwx-v2 .cwx-acts6 > button span { font-size: .72rem; line-height: 1.2; text-align: center; }
.pf { display: grid; gap: 14px; }
.pf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 4px; }
.pf-t { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 0; border-radius: 12px; background: none; font: inherit; cursor: pointer; text-align: center; }
.pf-t:hover, .pf-t:focus-visible { background: #F6EEE2; } .pf-t b { font-size: 1rem; color: #3B1E0E; } .pf-t small { font-size: .62rem; color: #806B5A; line-height: 1.2; }
.pf-trend { padding-top: 12px; border-top: 1px solid #F3EADD; } .pf-th { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .pf-th b { font-size: .84rem; color: #4A230F; } .pf-th small { font-size: .68rem; color: #9A8471; }
.ch-svg { display: block; width: 100%; height: 110px; } .ch-x { display: flex; } .ch-x span { flex: 1; text-align: center; font-size: .6rem; color: #9A8471; white-space: nowrap; overflow: hidden; }
.ra { display: grid; gap: 0; margin: 0; padding: 4px 8px !important; list-style: none; } .ra li + li { border-top: 1px solid #F3EADD; }
.ra button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 4px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.ra-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: #F6E7CC; color: #7A3A1A; }
.ra-tx { flex: 1; min-width: 0; display: grid; } .ra-tx b { font-size: .8rem; color: #38251B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ra-tx small { font-size: .7rem; color: #806B5A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra time { flex: none; font-size: .66rem; color: #9A8471; } .ra-empty { margin: 0; color: #806B5A; font-size: .82rem; }
.an-intro { margin: 2px 0 10px; color: #6B4A33; font-size: .86rem; }
.an-range { display: flex; gap: 8px; margin: 4px 0 12px; overflow-x: auto; } .an-range .chip { flex: none; min-height: 34px; }
.an-custom { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; } .an-custom .field { flex: 1; min-width: 0; }
.an-stat i { font-style: normal; font-size: .62rem; color: #9A8471; }
.an-chart { padding: 12px; border-radius: 16px; background: #FFFDF8; border: 1px solid #EFE3D2; }
.an-up { display: grid; gap: 4px; justify-items: start; margin-top: 8px; padding: 14px; border-radius: 16px; background: linear-gradient(160deg, #FFF6E6, #F5E0BC); border: 1px solid #E6C68E; } .an-up small { color: #6B4A33; }
/* plain quick-action labels (no leftover pill behind the text) */
#app .cwx-v2 .cwx-acts6 > button span { background: none !important; padding: 0 !important; border-radius: 0 !important; width: auto !important; box-shadow: none !important; color: #4A230F !important; font-weight: 700; }
/* custom range: two date fields side by side, Apply full width below */
.an-custom { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; } .an-custom .btn { grid-column: 1 / -1; justify-content: center; }
.an-custom input[type="date"] { width: 100%; min-width: 0; box-sizing: border-box; }
/* =========================================================
v162 — creator interface matched to the tourist interface; demo-account helper
========================================================= */
/* the same golden-brown wash as Home, at the top of the Studio */
#app .cr-home.cwx-v2 { background-color: var(--bg, #F8F1E8) !important;
background-image: linear-gradient(rgba(248, 241, 231, 0) 70%, rgba(248, 241, 231, .94) 100%), radial-gradient(82% 38% at 50% 0%, rgba(255, 248, 224, .92) 0%, rgba(255, 239, 197, .52) 48%, rgba(0, 0, 0, 0) 78%),
radial-gradient(95% 62% at 100% 48%, rgba(255, 220, 158, .28) 0%, rgba(0, 0, 0, 0) 72%), linear-gradient(158deg, #F0D39D 0%, #DEB879 42%, #C18C52 76%, #AE7544 100%) !important;
background-size: 100% 560px !important; background-repeat: no-repeat !important; }
/* section titles with the tourist-side gold accent bar */
#app .cwx-v2 .cwx-h h3 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem !important; color: #3B1E0E !important; }
#app .cwx-v2 .cwx-h h3::before { content: ""; width: 4px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, #E6BD78, #B47A43); }
/* quick actions as warm cream cards, like the tourist feature cards */
#app .cwx-v2 .cwx-acts.cwx-acts6 { background: none !important; border: 0 !important; padding: 0 !important; gap: 10px !important; }
#app .cwx-v2 .cwx-acts6 > button { padding: 14px 6px 12px !important; border-radius: 18px !important; background: linear-gradient(155deg, #FFFCF4, #F8E9D2) !important; border: 1px solid #F0E4D2 !important;
box-shadow: 0 12px 22px -18px rgba(58, 26, 9, .65) !important; }
#app .cwx-v2 .cwx-acts6 > button svg { border-radius: 50% !important; background: #F3DDB4 !important; }
/* cards across the page share the tourist card look */
#app .cwx-v2 :is(.cwx-card, .cwx-tool, .cwx-plan) { background: #FFFCF6 !important; border-color: #F0E4D2 !important; box-shadow: 0 12px 24px -20px rgba(58, 26, 9, .6) !important; }
#app .cwx-v2 .cwx-profile .cwx-me { box-shadow: 0 18px 30px -20px rgba(58, 26, 9, .8) !important; }
/* demo-account helper on the login sheet */
.demo-help { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #E2C79E; text-align: center; } .demo-help small { color: #806B5A; }
.demo-help > div { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* =========================================================
v163 — creations search/sort, product form extras, order status tabs, Loka page prompts
========================================================= */
.cpx-tools { display: flex; gap: 8px; margin: 8px 0 10px; } .cpx-search { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 999px; background: #FFFDF8; border: 1px solid #EADCC8; color: #806B5A; }
.cpx-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: .84rem; outline: none; } .cpx-tools select { min-height: 42px; padding: 0 10px; border-radius: 999px; border: 1px solid #EADCC8; background: #FFFDF8; font: inherit; font-size: .78rem; color: #4A230F; }
.cpx-count, .cpx-none, .og-none { margin: 0 0 8px; font-size: .8rem; color: #806B5A; }
.cpx-more { margin: 10px 0; padding: 10px 12px 4px; border: 1px solid #EADCC8; border-radius: 14px; } .cpx-more legend { padding: 0 6px; font-weight: 700; color: #633018; font-size: .84rem; }
.cpx-price { margin: 4px 0 12px; padding: 10px 12px; border-radius: 14px; background: #FBF3E4; border: 1px solid #EADCC8; } .cpx-price summary { cursor: pointer; font-weight: 700; color: #633018; display: flex; gap: 6px; align-items: center; }
.cpx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin-top: 8px; } .cpx-calc ol { margin: 6px 0; padding-left: 18px; font-size: .8rem; color: #38251B; display: grid; gap: 4px; }
.cpx-note { margin: 4px 0 8px; font-size: .72rem; color: #806B5A; }
.cpx-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 8px; } .cpx-acts .btn { justify-content: center; gap: 6px; }
.cpx-card { display: grid; gap: 4px; margin-bottom: 10px; padding: 14px; border-radius: 16px; background: #FFFDF8; border: 1px dashed #D9A04B; } .cpx-card b { font-size: 1rem; color: #3B1E0E; } .cpx-pp { font-weight: 800; color: #9C5E1E; }
.cpx-card p { margin: 4px 0; font-size: .8rem; color: #38251B; } .cpx-card small { color: #806B5A; font-size: .72rem; } .cpx-tag { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #D9A04B !important; }
.cpx-coa { display: inline-flex; gap: 4px; align-items: center; font-size: .72rem; font-weight: 700; color: #2F6B3A; }
.og-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 6px 0 10px; padding-bottom: 2px; scrollbar-width: none; } .og-tabs::-webkit-scrollbar { display: none; }
.og-tabs .chip { flex: none; min-height: 34px; padding: 0 12px; font-size: .74rem; } .og-tabs .chip i { font-style: normal; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(99, 48, 24, .1); font-size: .66rem; }
.lk-page { margin: 0 0 8px; padding: 10px 12px; border-radius: 14px; background: #FBF3E4; border: 1px solid #EADCC8; } .lk-page small { display: block; margin-bottom: 6px; font-weight: 700; color: #633018; }
details.cpx-price:not([open]) > :not(summary) { display: none !important; }
/* =========================================================
v164 — creation form system (all creation sheets)
========================================================= */
/* the sheet scrolls, but its scrollbar is hidden in every browser; no sideways scrolling */
#sheet { scrollbar-width: none !important; -ms-overflow-style: none; overflow-x: hidden !important; overscroll-behavior: contain; }
#sheet::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
html.fx-lock, html.fx-lock body { overflow: hidden !important; } html.fx-lock main.screen { overflow: hidden !important; }
/* header stays visible while scrolling */
#sheet:has(form.fx) > h2:first-of-type, #sheet:has(form.fx) .sheet-h, #sheet:has(form.fx) > .co-heading { position: sticky; top: -1px; z-index: 3; margin-top: 0; padding: 14px 44px 10px 0; background: var(--card, #FFFDF8); }
#sheet:has(form.fx) > [data-act="close-sheet"]:first-child, #sheet:has(form.fx) > .sheet-x { position: sticky; top: 8px; z-index: 4; float: right; }
/* fields: consistent widths, never overflowing */
form.fx { display: grid; gap: 12px; min-width: 0; padding-bottom: 4px; }
form.fx :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; border-radius: 12px; }
form.fx textarea { min-height: 96px; resize: vertical; overflow: hidden; line-height: 1.45; }
form.fx .field { display: grid; gap: 6px; margin: 0 !important; min-width: 0; font-size: .8rem; font-weight: 700; color: #4A230F; overflow-wrap: anywhere; }
form.fx .field small { font-weight: 500; color: #9A8471; }
/* two-column rows: equal columns that can shrink; one column on narrow sheets */
form.fx :is(.co-2, .two-btns:has(input, select, textarea)) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin: 0 !important; }
@media (max-width: 440px) { form.fx :is(.co-2, .two-btns:has(input, select, textarea)) { grid-template-columns: minmax(0, 1fr) !important; } }
/* sections */
.fx-sec { display: grid; gap: 12px; padding: 14px 14px 16px; border-radius: 16px; background: #FFFCF6; border: 1px solid #F0E4D2; min-width: 0; }
.fx-h { margin: 0; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #9C5E1E; }
/* compact image upload */
form.fx .upload { position: relative; display: flex !important; align-items: center; justify-content: center; height: 112px !important; min-height: 0 !important; max-height: 112px; padding: 6px !important; margin: 0 !important;
border-radius: 14px !important; border: 1.5px dashed #D9B98A !important; background: #FBF3E4 !important; overflow: hidden; cursor: pointer; }
form.fx .upload img { width: auto !important; height: 100% !important; max-width: 100%; object-fit: contain !important; border-radius: 10px; }
form.fx .upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fx-up-hint { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 253, 248, .94); color: #633018; font-size: .7rem; font-weight: 700; pointer-events: none; box-shadow: 0 2px 6px rgba(58, 26, 9, .15); }
/* pricing helper sits on its own row below price/stock */
form.fx .cpx-price { margin: 0 !important; } form.fx .cpx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.fx-preview { justify-self: start; }
/* sticky action footer, in the flow so it never covers the last field */
.fx-foot { position: sticky; bottom: calc(-1 * var(--sheet-pad-b, 18px)); z-index: 3; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: 4px calc(-1 * var(--sheet-pad, 18px)) calc(-1 * var(--sheet-pad-b, 18px));
padding: 12px var(--sheet-pad, 18px) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--card, #FFFDF8); border-top: 1px solid #F0E4D2; box-shadow: 0 -10px 20px -18px rgba(58, 26, 9, .5); }
.fx-foot .btn { min-height: 46px; justify-content: center; margin: 0 !important; width: 100% !important; border-radius: 999px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { .fx-foot .btn { font-size: .78rem; padding: 0 8px !important; } }
/* multi-select lists (e.g. products shown in a video) need room to show their options */
form.fx select[multiple] { height: auto !important; min-height: 148px !important; padding: 6px !important; }
/* a collapsed "Help me price this" shows only its title (its inputs must not render over the next fields) */
details.cpx-price:not([open]) > :not(summary) { display: none !important; }
details.cpx-price { overflow: hidden; }
/* footer: Cancel takes its natural width; the main actions share the rest */
.fx-foot { grid-auto-flow: row !important; grid-template-columns: auto repeat(auto-fit, minmax(0, 1fr)) !important; }
.fx-foot .fx-cancel { padding: 0 16px !important; width: auto !important; }
.fx-foot .btn:not(.fx-cancel) { padding: 0 10px !important; font-size: .84rem; }
@media (max-width: 380px) { .fx-foot .btn:not(.fx-cancel) { font-size: .76rem; } .fx-foot .fx-cancel { padding: 0 12px !important; } }
/* one row: Cancel at its natural width, the main actions share the rest */
.fx-foot { display: flex !important; align-items: center; gap: 8px !important; }
.fx-foot .fx-cancel { flex: 0 0 auto !important; }
.fx-foot .btn:not(.fx-cancel) { flex: 1 1 0 !important; min-width: 0 !important; }
/* the form's single column is sized by the space available, never by its widest child (e.g. the footer's buttons) */
form.fx { grid-template-columns: minmax(0, 1fr) !important; }
form.fx > *, .fx-sec > * { min-width: 0; }
.fx-foot { min-width: 0; }
/* =========================================================
v165 — minimalist creator dashboard
========================================================= */
#app .cr-home.dz { gap: 16px !important; background-color: var(--bg, #F8F1E8) !important; background-image: linear-gradient(180deg, #F7E7CF 0px, rgba(248, 241, 232, 0) 300px) !important; background-size: auto !important; }
#app .dz .cw-hello { margin: 2px 0 0 !important; font-size: 1.36rem !important; } #app .dz .cw-hello .cw-sub { font-size: .86rem; color: #6B4A33; }
.dz-card { border-radius: 22px; background: #FFFCF6; box-shadow: 0 14px 28px -22px rgba(58, 26, 9, .55); overflow: hidden; }
/* profile card: brown top, light lower part with completion and plan */
#app .dz-prof .cwx-me { margin: 0 !important; border-radius: 22px 22px 0 0 !important; box-shadow: none !important; }
.dz-comp { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; width: 100%; padding: 14px 16px 10px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.dz-comp-t { display: grid; } .dz-comp-t b { font-size: .86rem; color: #3B1E0E; } .dz-comp-t small { font-size: .72rem; color: #806B5A; }
.dz-pct { font-weight: 800; color: #633018; } .dz-bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: #F0E3D0; overflow: hidden; } .dz-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #D9A04B, #B87932); }
#app .dz-plan { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 10px 16px 14px !important; border: 0 !important; border-top: 1px solid #F3EADD !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
#app .dz-plan small { flex: 1; color: #806B5A; font-size: .76rem; } #app .dz-plan .link { font-size: .78rem; }
/* section heading */
.dz-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.08rem; color: #3B1E0E; } .dz-sec { display: grid; gap: 10px; }
.dz-sec > .dz-h::before { content: ""; width: 4px; height: 18px; border-radius: 3px; background: #D9A04B; }
/* quick actions: six equal cards */
#app .dz .dz-qa { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
#app .dz .dz-qa > button { display: grid !important; grid-template-rows: auto 1fr; justify-items: center; align-items: start; gap: 8px; min-height: 112px; padding: 14px 6px 12px !important; border: 0 !important; border-radius: 18px !important;
background: #FFFCF6 !important; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6) !important; transition: transform .15s ease, box-shadow .15s ease; }
#app .dz .dz-qa > button:active { transform: scale(.96); box-shadow: 0 6px 14px -12px rgba(58, 26, 9, .6) !important; }
#app .dz .dz-qa > button svg { box-sizing: content-box; width: 22px !important; height: 22px !important; padding: 12px !important; border-radius: 50% !important; background: #F6E7CF !important; color: #633018 !important; }
#app .dz .dz-qa > button span { font-size: .74rem !important; font-weight: 600 !important; line-height: 1.25; color: #3B1E0E !important; text-align: center; }
/* performance: three metrics */
.dz-perf { padding: 14px 16px 16px; } .dz-perf-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .dz-perf-h .dz-h svg { color: #B87932; }
.dz-link { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; font: inherit; font-size: .78rem; font-weight: 600; color: #9C5E1E; cursor: pointer; }
.dz-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .dz-metrics > div { display: grid; justify-items: center; gap: 4px; text-align: center; } .dz-metrics > div + div { border-left: 1px solid #F0E3D0; }
.dz-metrics svg { width: 22px; height: 22px; color: #633018; } .dz-metrics b { font-size: 1.2rem; color: #3B1E0E; } .dz-metrics small { font-size: .7rem; color: #806B5A; }
/* more tools: compact and collapsed */
.dz-more { border-radius: 18px; background: #FFFCF6; box-shadow: 0 10px 22px -20px rgba(58, 26, 9, .5); } .dz-more > summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 700; color: #3B1E0E; font-size: .88rem; }
.dz-more > summary::-webkit-details-marker { display: none; } .dz-more > summary small { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: #F3E7D3; color: #7A4B2E; font-size: .68rem; }
.dz-more > summary svg { transition: transform .2s; } .dz-more[open] > summary svg { transform: rotate(90deg); }
.dz-more .cwx-tools { padding: 0 12px 12px; } #app .dz-more .cwx-tool { box-shadow: none !important; background: #FBF5EB !important; border: 0 !important; }
@media (min-width: 700px) { .dz-metrics b { font-size: 1.4rem; } #app .dz .dz-qa > button { min-height: 128px; } }
#app .dz .dz-qa { grid-auto-rows: 1fr !important; }
#app .dz .dz-qa > button { height: 100% !important; }
.dz-perf-h { gap: 8px; } .dz-perf .dz-h { font-size: .98rem !important; white-space: nowrap; min-width: 0; } .dz-link { white-space: nowrap; flex: none; }
@media (max-width: 340px) { .dz-perf .dz-h { font-size: .9rem !important; } .dz-perf .dz-h svg { display: none; } }
@media (max-width: 480px) { .dz-perf .dz-h { font-size: .92rem !important; overflow: hidden; text-overflow: ellipsis; } .dz-perf .dz-h svg { display: none; } .dz-link { font-size: .74rem; } }
/* narrow phones: both stay complete — "View analytics" moves under the title, aligned right */
.dz-perf-h { flex-wrap: wrap; row-gap: 2px; } .dz-perf .dz-h { text-overflow: clip !important; overflow: visible !important; } .dz-link { margin-left: auto; }
/* =========================================================
v166 — Quick Action icon circles: gold-to-brown gradient with white line icons (only the circles change)
========================================================= */
#app .dz .dz-qa > button svg {
box-sizing: content-box !important; width: 22px !important; height: 22px !important; padding: 13px !important; aspect-ratio: 1 / 1; border-radius: 50% !important; flex: none;
background: linear-gradient(145deg, #E9B85A 0%, #C9893A 45%, #8A4F22 78%, #5E3216 100%) !important;
color: #FFFFFF !important; stroke: #FFFFFF !important; stroke-width: 1.8 !important; fill: none !important;
box-shadow: 0 6px 12px -6px rgba(94, 50, 22, .55), inset 0 1px 0 rgba(255, 240, 210, .35) !important;
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#app .dz .dz-qa > button svg * { stroke: #FFFFFF !important; }
#app .dz .dz-qa > button:hover svg, #app .dz .dz-qa > button:focus-visible svg { filter: brightness(.9) saturate(1.08); transform: translateY(-1px); box-shadow: 0 9px 16px -7px rgba(94, 50, 22, .6), inset 0 1px 0 rgba(255, 240, 210, .35) !important; }
#app .dz .dz-qa > button:active svg { filter: brightness(.85) saturate(1.1); transform: scale(.95); }
@media (prefers-reduced-motion: reduce) { #app .dz .dz-qa > button svg { transition: filter .18s ease; } #app .dz .dz-qa > button:is(:hover, :focus-visible, :active) svg { transform: none; } }
/* =========================================================
v167 — Quick Action management pages
========================================================= */
.qa-head-act { margin: 10px 0 12px; } .qa-pad { padding-top: 0 !important; }
.qa-primary { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 18px !important; border-radius: 999px !important; background: linear-gradient(135deg, #8F5326, #633018) !important; color: #FFF8EE !important; font-weight: 700; box-shadow: 0 8px 16px -12px rgba(58, 26, 9, .7); }
.qa-primary svg { stroke: currentColor; }
/* filter pills: brown active, beige inactive, sideways scrolling */
#app main :is([data-act="cpcat"], [data-act="cpf"], [data-act="cxcat"]) { flex: 0 0 auto; min-height: 34px; padding: 0 14px; border-radius: 999px !important; border: 0 !important; background: #F1E4D1 !important; color: #633018 !important; font-size: .76rem; font-weight: 600; box-shadow: none !important; white-space: nowrap; }
#app main :is([data-act="cpcat"], [data-act="cpf"], [data-act="cxcat"])[aria-pressed="true"] { background: #633018 !important; color: #FFF8EE !important; }
#app main .chips:has([data-act="cpcat"], [data-act="cpf"], [data-act="cxcat"]) { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 10px; }
#app main .chips:has([data-act="cpcat"], [data-act="cpf"], [data-act="cxcat"])::-webkit-scrollbar { display: none; }
/* responsive grid */
#app main .cr-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
@media (max-width: 339px) { #app main .cr-grid { grid-template-columns: minmax(0, 1fr) !important; } }
@media (min-width: 700px) { #app main .cr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1024px) { #app main .cr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
/* cards */
#app .qa-card { display: flex !important; flex-direction: column; min-width: 0; border: 0 !important; border-radius: 18px !important; background: #FFFCF6 !important; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6) !important; overflow: hidden; }
#app .qa-card .pic, #app .qa-card .cr-pimg { aspect-ratio: 4 / 3; height: auto !important; width: 100%; } #app .qa-card .pic img { width: 100%; height: 100%; object-fit: cover; }
#app .qa-card .cr-pbody { display: flex !important; flex-direction: column; gap: 4px; flex: 1; padding: 10px 12px 12px !important; min-width: 0; }
#app .qa-card .cr-pbody > strong { font-size: .86rem; line-height: 1.25; color: #3B1E0E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#app .qa-card .price { font-size: .98rem; color: #633018; }
#app .qa-card .cr-mini { font-size: .7rem; color: #806B5A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-stock { display: flex; align-items: center; gap: 6px; }
.qa-badge { flex: none; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: .62rem; font-weight: 800; } .qa-badge.pub { background: #E3F1E4; color: #2F6B3A; } .qa-badge.off { background: #F1E4D1; color: #7A4B2E; } .qa-badge.sold { background: #F6E2DC; color: #9A3A22; }
.qa-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: .68rem; color: #806B5A; } .qa-stats b { color: #3B1E0E; } .qa-stats svg { color: #B87932; margin-right: 1px; } .qa-stats span { color: #C9B49A; }
#app .qa-card .cr-nums { font-size: .68rem; color: #806B5A; }
/* actions: Edit (primary) and View side by side, Manage full width */
#app .qa-btns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: auto !important; padding-top: 8px; }
#app .qa-btns > button { min-height: 34px; padding: 0 6px !important; border: 0 !important; border-radius: 999px !important; font: inherit; font-size: .74rem !important; font-weight: 700; cursor: pointer; white-space: nowrap; }
#app .qa-btns > .qa-b1 { background: #633018 !important; color: #FFF8EE !important; } #app .qa-btns > .qa-b2 { background: #F1E4D1 !important; color: #633018 !important; }
#app .qa-btns > :nth-child(3):last-child { grid-column: 1 / -1; }
/* every card's actions use two equal columns (collectibles have four actions → a 2 × 2 grid) */
#app .qa-card .qa-btns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* columns follow the space the grid actually has (the app column is phone-width on tablet/desktop), never below a readable card width */
#app main .cr-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
@media (max-width: 339px) { #app main .cr-grid { grid-template-columns: minmax(0, 1fr) !important; } }
/* header: description, then a compact primary button */
.qa-head-act { margin: 8px 0 14px !important; } .qa-primary { width: auto !important; }
/* metrics: three small stacked figures in one row */
.qa-stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important; margin-top: 4px; padding: 6px 0; border-top: 1px solid #F3EADD; border-bottom: 1px solid #F3EADD; }
.qa-stats > span { display: grid; justify-items: center; line-height: 1.15; } .qa-stats > span + span { border-left: 1px solid #F3EADD; }
.qa-stats b { font-size: .82rem; color: #3B1E0E; } .qa-stats small { font-size: .6rem; color: #9A8471; }
/* search and sort share the row without overflowing */
#app main .cpx-tools { min-width: 0; } #app main .cpx-search { min-width: 0; } #app main .cpx-tools select { flex: 0 1 auto; max-width: 42%; min-width: 0; }
/* =========================================================
v168 — balanced Quick Action headers; collectible cards
========================================================= */
.qa-band { position: relative; display: flex !important; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.qa-sum { position: relative; z-index: 1; display: grid; justify-items: end; gap: 2px; text-align: right; font-size: .74rem; color: #806B5A; }
.qa-sum b { color: #3B1E0E; font-size: .86rem; }
.qa-spark { position: absolute; z-index: 0; right: -6px; top: -26px; width: 56px; height: 56px; fill: #E2B565; opacity: .55; pointer-events: none; }
.qa-band:not(:has(.qa-primary)) { justify-content: flex-end; }
/* collectible cards */
#app .cr-coll .cc-badge { align-self: flex-start; margin: 0 0 4px !important; padding: 2px 10px !important; border-radius: 999px !important; font-size: .64rem !important; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#app .cr-coll .cc-badge.info { background: #E3EEF6 !important; color: #2F5C7E !important; }
#app .cr-coll .cc-badge.mute { background: #F3E7C9 !important; color: #7A5A1E !important; }
#app .cr-coll .cc-badge.warn { background: #FBEBC8 !important; color: #7A4B12 !important; }
.cc-line { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: .7rem; color: #806B5A; white-space: nowrap; } .cc-line i { font-style: normal; color: #C9B49A; }
.cc-chip { min-width: 0; padding: 1px 8px; border-radius: 999px; background: #F3E7D3; color: #633018; font-weight: 700; font-size: .64rem; overflow: hidden; text-overflow: ellipsis; }
.cc-line2 { justify-content: space-between; } .cc-line2 > span:first-child { overflow: hidden; text-overflow: ellipsis; } .cc-est { flex: none; }
#app .cr-coll .cr-pbody > strong { font-size: .9rem !important; }
/* narrow cards: nothing important is cut — the value chip moves under the condition, badges may wrap */
.cc-line2 { flex-wrap: wrap; row-gap: 3px; white-space: normal; } .cc-line2 > span:first-child { overflow: visible; text-overflow: clip; white-space: nowrap; }
#app .cr-coll .cc-badge { white-space: normal !important; overflow: visible !important; line-height: 1.25; font-size: .6rem !important; }
.cc-line .cc-chip { flex: 1 1 auto; }
.cc-line .cc-chip.cc-est { flex: 0 0 auto !important; }
/* v169 — header row sits right under the title now that the description is gone */
.qa-head-act.qa-band { margin-top: 4px !important; }
/* =========================================================
v170 — primary action in the header (right side); slim summary line under the title
========================================================= */
#app main .topbar:has(.qa-top-btn) { display: flex; align-items: center; gap: 10px; }
#app main .topbar:has(.qa-top-btn) h1 { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app main .topbar .qa-top-btn { flex: none; margin-left: auto; min-height: 40px; padding: 0 16px !important; font-size: .84rem; white-space: nowrap; }
@media (max-width: 380px) { #app main .topbar .qa-top-btn { min-height: 36px; padding: 0 12px !important; font-size: .74rem; gap: 4px; } #app main .topbar:has(.qa-top-btn) h1 { font-size: 1rem; } }
.qa-band.qa-band-sum { min-height: 0 !important; margin: 0 0 12px !important; justify-content: flex-start !important; }
.qa-band-sum .qa-sum { display: flex !important; gap: 10px; justify-items: start; text-align: left; } .qa-band-sum .qa-sum span + span::before { content: "·"; margin-right: 10px; color: #C9B49A; }
.qa-band-sum .qa-spark { top: -40px; right: 4px; width: 48px; height: 48px; opacity: .45; }
@media (max-width: 340px) { #app main .topbar:has(.qa-top-btn) { gap: 6px; } #app main .topbar .qa-top-btn { padding: 0 10px !important; } #app main .topbar .qa-top-btn svg { width: 14px; height: 14px; } #app main .topbar:has(.qa-top-btn) h1 { font-size: .94rem; } }
/* the sparkle balanced the old button row; with the button in the header it would sit on top of it */
.qa-band-sum .qa-spark { display: none !important; }
/* =========================================================
v171 — creator Activity polish
========================================================= */
/* status tabs: a lighter second row under the main filters */
#app .ac-list .og-tabs { gap: 2px !important; margin: 4px 0 12px !important; padding: 0 0 2px; border-bottom: 1px solid #EFE3D2; }
#app .ac-list .og-tabs .chip { min-height: 34px; padding: 0 10px; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: #806B5A !important; font-size: .74rem; font-weight: 600; border-bottom: 2px solid transparent !important; }
#app .ac-list .og-tabs .chip[aria-selected="true"] { color: #633018 !important; font-weight: 800; border-bottom-color: #B87932 !important; }
#app .ac-list .og-tabs .chip i { background: #F1E4D1; color: #633018; }
#app .ac-list .og-tabs .chip[aria-selected="true"] i { background: #633018; color: #FFF8EE; }
/* main filters: brown selected, beige otherwise */
#app .ac-filters .chip { border: 0 !important; background: #F1E4D1 !important; color: #633018 !important; font-weight: 700; box-shadow: none !important; }
#app .ac-filters .chip[aria-pressed="true"], #app .ac-filters .chip.on { background: #633018 !important; color: #FFF8EE !important; }
/* summary tiles and order cards: the same cream cards as the other creator pages */
#app .act-head .ac-tiles > button { border-radius: 16px !important; background: #FFFCF6 !important; border: 1px solid #F0E4D2 !important; box-shadow: 0 10px 20px -18px rgba(58, 26, 9, .6) !important; }
#app .act-head .ac-tiles > button[aria-pressed="true"], #app .act-head .ac-tiles > button.on { background: #F8ECDB !important; border-color: #B87932 !important; }
#app .act-head .ac-attn { border-radius: 16px !important; background: #FFFCF6 !important; border: 1px solid #F0E4D2 !important; box-shadow: 0 10px 20px -18px rgba(58, 26, 9, .5) !important; }
#app .ac-list .txl > .txc { border-radius: 18px !important; background: #FFFCF6 !important; border: 1px solid #F0E4D2 !important; box-shadow: 0 12px 22px -20px rgba(58, 26, 9, .6) !important; margin-bottom: 12px; }
/* the selected summary card (Orders / Bookings / Auctions) stays clearly marked */
#app .act-head .ac-tiles > button[aria-selected="true"] { background: #F6E7CF !important; border: 1.5px solid #8F5326 !important; }
/* =========================================================
v172 — compact filters and square cards
========================================================= */
#app main .chips.fz-hidden { display: none !important; }
.fz-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 999px; background: #F1E4D1; color: #633018; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.fz-btn i { font-style: normal; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #633018; color: #FFF8EE; font-size: .66rem; text-align: center; }
.fz-tools { justify-content: flex-end; }
.fz-active { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 10px; font-size: .74rem; color: #806B5A; } .fz-active span { font-weight: 700; color: #633018; }
.fz-active button { border: 0; background: none; font: inherit; font-size: .74rem; font-weight: 700; color: #9C5E1E; text-decoration: underline; cursor: pointer; }
.fz-sec h3 { margin: 14px 0 8px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #9C5E1E; } .fz-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fz-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid #EADCC8; border-radius: 999px; background: #FFFCF6; color: #4A230F; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.fz-opt i { font-style: normal; font-size: .66rem; color: #9A8471; } .fz-opt[aria-pressed="true"] { background: #633018; border-color: #633018; color: #FFF8EE; } .fz-opt[aria-pressed="true"] i { color: #F1DCC0; }
.fz-foot { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 18px; } .fz-foot .btn { justify-content: center; min-height: 46px; border-radius: 999px; }
/* square cards */
#app .qa-card .pic, #app .qa-card .cr-pimg, #app .qa-card .cr-cimg { position: relative; aspect-ratio: 1 / 1 !important; }
.fz-pin { position: absolute; top: 8px; right: 8px; box-shadow: 0 2px 6px rgba(58, 26, 9, .15); }
#app .qa-card .cr-pbody { gap: 2px !important; padding: 8px 10px 10px !important; }
#app .qa-card .cr-pbody > strong { font-size: .82rem !important; }
.fz-stats { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; font-size: .7rem; color: #6B4A33; } .fz-stats span { display: inline-flex; align-items: center; gap: 3px; } .fz-stats svg { color: #9C5E1E; }
#app .qa-btns.fz-has-menu { grid-template-columns: 1fr 1fr 32px !important; align-items: center; padding-top: 6px; }
#app .qa-btns > button { min-height: 32px !important; font-size: .72rem !important; }
.fz-menu { position: relative; } .fz-menu > summary { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #F6EEE2; color: #633018; cursor: pointer; list-style: none; } .fz-menu > summary::-webkit-details-marker { display: none; }
.fz-pop { position: absolute; z-index: 20; right: 0; bottom: 38px; display: grid; min-width: 140px; padding: 6px; border-radius: 14px; background: #FFFDF8; box-shadow: 0 14px 30px -10px rgba(58, 26, 9, .45); border: 1px solid #F0E4D2; }
.fz-pop > button { all: unset; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; font-size: .8rem; font-weight: 600; color: #3B1E0E; cursor: pointer; } .fz-pop > button:hover, .fz-pop > button:focus-visible { background: #F6EEE2; }
.fz-pop > .fz-danger { color: #A3341F; }
/* 1. the status badge is a small pill in the image corner */
#app .qa-card .pic .fz-pin { position: absolute !important; top: 8px; right: 8px; left: auto !important; width: auto !important; max-width: calc(100% - 16px); margin: 0 !important; padding: 2px 9px !important; }
/* 2. Edit · View · ⋮ on one row (beats the older two-column rule) */
#app .qa-card .qa-btns.fz-has-menu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px !important; }
/* 3. the search field gets the room; sort stays compact */
#app main .cpx-tools .cpx-search { flex: 1 1 120px; } #app main .cpx-tools select { flex: 0 1 auto; max-width: 30%; padding: 0 6px; } #app main .cpx-tools .fz-btn { padding: 0 12px; }
/* the v167 "third action spans the row" rule doesn't apply to the ⋮ menu */
#app .qa-card .qa-btns.fz-has-menu > .fz-menu { grid-column: auto !important; }
#app .qa-card .qa-btns.fz-has-menu.fz-one { grid-template-columns: minmax(0, 1fr) 32px !important; }
/* even spacing: the grid gap alone separates cards (older styles added a margin under each card) */
#app main .cr-grid > .qa-card { margin: 0 !important; }
/* =========================================================
v173 — search toolbars, clean forms, Live & Video, My Auctions
========================================================= */
.fx-req { color: #A3341F; font-weight: 800; }
form.fx .ai-bar, form.fx .ai-box { padding: 0 !important; background: none !important; border: 0 !important; }
.fx-format { align-self: flex-start; margin-bottom: 2px; padding: 1px 8px; border-radius: 999px; background: #EFE6F5; color: #5A3A7A; font-size: .62rem; font-weight: 800; }
/* Live & Video */
.lvx .lvx-acts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin: 4px 0 14px !important; }
.lvx .lvx-acts > * { min-height: 76px; border-radius: 18px !important; background: #FFFCF6 !important; border: 1px solid #F0E4D2 !important; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6) !important; }
.lvx .lvx-acts > .lvx-live { grid-column: 1 / -1; position: relative; min-height: 92px; background: linear-gradient(135deg, #8F5326, #4E2410) !important; border: 0 !important; color: #FFF8EE !important; }
.lvx .lvx-acts > .lvx-live * { color: #FFF8EE !important; }
.lvx .lvx-acts > .lvx-live::after { content: ""; position: absolute; top: 14px; right: 16px; width: 10px; height: 10px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 4px rgba(229, 72, 77, .25); animation: lvxPulse 1.6s ease-in-out infinite; }
@keyframes lvxPulse { 50% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); } } @media (prefers-reduced-motion: reduce) { .lvx .lvx-acts > .lvx-live::after { animation: none; } }
.lvx .sec-head { margin-top: 6px !important; }
.lvx .lvx-empty { display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; padding: 14px; border-radius: 14px; background: #FFFCF6; border: 1px dashed #E2C79E; color: #806B5A !important; }
.lvx .lvx-empty::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #E9B85A 0 35%, #F6E7CF 36%); }
.lvx .lvx-foot { margin-top: 18px !important; font-size: .7rem !important; color: #9A8471 !important; background: none !important; border: 0 !important; padding: 0 !important; }
/* My Auctions */
.aux-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: s; }
.aux-steps li { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; background: #FFFCF6; border: 1px solid #F0E4D2; text-align: center; }
.aux-steps svg { box-sizing: content-box; padding: 9px; border-radius: 50%; background: linear-gradient(145deg, #E9B85A, #8A4F22); color: #fff; stroke: #fff; }
.aux-steps b { font-size: .78rem; color: #3B1E0E; } .aux-steps small { font-size: .64rem; line-height: 1.3; color: #806B5A; }
/* v174 — forms: one cream background; sections separated by a thin line instead of nested panels */
#sheet:has(form.fx) { background: var(--card, #FFFDF8) !important; }
form.fx .fx-sec { padding: 14px 0 4px !important; background: none !important; border: 0 !important; border-top: 1px solid #F0E4D2 !important; border-radius: 0 !important; box-shadow: none !important; }
form.fx > .fx-sec:first-of-type { border-top: 0 !important; padding-top: 4px !important; }
form.fx :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) { background: #FFFFFF !important; border: 1px solid #E8DCCB !important; }
form.fx :is(input, select, textarea):focus-visible { outline: none; border-color: #B87932 !important; box-shadow: 0 0 0 3px rgba(217, 160, 75, .22) !important; }
.a-pill:empty { display: none !important; }
/* buttons: primary brown · secondary beige · outlined thin brown */
.btn:not(.btn-ghost):not(.btn-sec):disabled, .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; }
.btn.btn-ghost { background: transparent !important; border: 1px solid #8F5326 !important; color: #633018 !important; }
.btn:focus-visible { outline: 3px solid rgba(217, 160, 75, .5); outline-offset: 2px; }
/* file inputs as a neat upload area */
form.fx input[type=file] { display: block; width: 100%; box-sizing: border-box; padding: 16px 12px; border: 1.5px dashed #D9B98A; border-radius: 14px; background: #FBF3E4; color: #806B5A; font: inherit; font-size: .78rem; cursor: pointer; }
form.fx input[type=file]::file-selector-button { margin-right: 10px; padding: 8px 14px; border: 0; border-radius: 999px; background: #633018; color: #FFF8EE; font: inherit; font-weight: 700; cursor: pointer; }
/* =========================================================
v175 — product photo component
========================================================= */
.ph-up { display: grid; gap: 6px; }
.ph-add { position: relative; display: grid; justify-items: center; gap: 2px; padding: 18px 12px; border: 1.5px dashed #D9B98A; border-radius: 14px; background: #FBF3E4; color: #633018; cursor: pointer; text-align: center; }
.ph-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .ph-add b { font-size: .86rem; } .ph-add small { font-size: .72rem; color: #806B5A; } .ph-add svg { color: #9C5E1E; }
.ph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ph-item { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #F3E7D3; } .ph-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-item.is-cover { outline: 2px solid #B87932; outline-offset: -2px; }
.ph-cover, .ph-set { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border: 0; border-radius: 999px; font: inherit; font-size: .6rem; font-weight: 800; }
.ph-cover { background: #633018; color: #FFF8EE; } .ph-set { background: rgba(255, 253, 248, .92); color: #633018; cursor: pointer; }
.ph-del { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(59, 30, 14, .7); color: #fff; cursor: pointer; }
.ph-add-tile { aspect-ratio: 1 / 1; align-content: center; padding: 6px; } .ph-add-tile span { font-size: .72rem; font-weight: 700; }
.ph-note { font-size: .66rem; color: #9A8471; } .ph-msg { margin: 0; font-size: .72rem; color: #806B5A; min-height: 0; } .ph-msg.err { color: #A3341F; }
/* the other forms' upload boxes already say what they do — no extra pill */
form.fx .upload:not(:has(img)) .fx-up-hint { display: none !important; }
.ph-strip { display: flex; gap: 8px; margin: 8px 0 4px; overflow-x: auto; scrollbar-width: none; } .ph-strip::-webkit-scrollbar { display: none; }
.ph-strip .pic { flex: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; } .ph-strip img { width: 100%; height: 100%; object-fit: cover; }
/* =========================================================
v176 — Activity hub
========================================================= */
.ah-sub { margin: -4px 0 12px; font-size: .84rem; color: #806B5A; }
.ah-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
.ah-tabs button { display: grid; justify-items: start; gap: 0; padding: 10px 12px; border: 1px solid #F0E4D2; border-radius: 14px; background: #FFFCF6; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 8px 18px -16px rgba(58, 26, 9, .6); }
.ah-tabs button b { font-size: 1.1rem; color: #3B1E0E; } .ah-tabs button small { font-size: .7rem; color: #806B5A; font-weight: 600; }
.ah-tabs button[aria-selected="true"] { background: #633018; border-color: #633018; } .ah-tabs button[aria-selected="true"] :is(b, small) { color: #FFF8EE; }
.ah-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ah-bar select { flex: 0 1 auto; max-width: 48%; min-height: 36px; padding: 0 10px; border: 1px solid #EADCC8; border-radius: 999px; background: #FFFDF8; font: inherit; font-size: .76rem; color: #4A230F; }
.ah-lbl { font-size: .8rem; font-weight: 700; color: #633018; }
.ah-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #F1E4D1; } .ah-seg button { border: 0; border-radius: 999px; padding: 6px 10px; background: none; font: inherit; font-size: .72rem; font-weight: 700; color: #633018; cursor: pointer; white-space: nowrap; }
.ah-seg button i { font-style: normal; opacity: .7; } .ah-seg button[aria-pressed="true"] { background: #633018; color: #FFF8EE; }
.ah-list { display: grid; gap: 10px; }
.ah-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 80px; padding: 10px 12px; border: 1px solid #F0E4D2; border-radius: 16px; background: #FFFCF6; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 10px 20px -18px rgba(58, 26, 9, .6); }
.ah-th { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: #F3E7D3; color: #9C5E1E; } .ah-th img { width: 100%; height: 100%; object-fit: cover; }
.ah-tx { display: grid; gap: 1px; min-width: 0; } .ah-tx b { font-size: .84rem; color: #3B1E0E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ah-tx small { font-size: .68rem; color: #806B5A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-rt { display: grid; justify-items: end; gap: 3px; } .ah-rt b { font-size: .86rem; color: #633018; }
.ah-badge { font-style: normal; padding: 1px 8px; border-radius: 999px; font-size: .6rem; font-weight: 800; white-space: nowrap; }
.ah-badge.ok { background: #E3F1E4; color: #2F6B3A; } .ah-badge.info { background: #E3EEF6; color: #2F5C7E; } .ah-badge.warn { background: #FBEBC8; color: #7A4B12; } .ah-badge.mute { background: #F1E4D1; color: #7A4B2E; }
.ah-go { display: inline-flex; align-items: center; gap: 2px; font-size: .64rem; font-weight: 700; color: #9C5E1E; }
.ah-empty { display: grid; justify-items: center; gap: 4px; padding: 26px 16px; border: 1px dashed #E2C79E; border-radius: 16px; background: #FFFCF6; text-align: center; color: #806B5A; }
.ah-empty svg { width: 28px; height: 28px; color: #B87932; } .ah-empty b { color: #3B1E0E; } .ah-empty small { margin-bottom: 6px; font-size: .74rem; }
@media (max-width: 360px) { .ah-tabs button { padding: 8px; } .ah-tabs button b { font-size: .98rem; } .ah-card { grid-template-columns: 48px minmax(0, 1fr) auto; } .ah-th { width: 48px; height: 48px; } }
.ah-top { padding-left: 18px !important; } .ah-top h1 { margin: 0; font-size: 1.5rem; }
.ah-cart { position: relative; margin-left: auto; } .ah-cart i { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #A3341F; color: #fff; font-style: normal; font-size: .62rem; font-weight: 800; display: grid; place-items: center; }
.ah-cart.ah-float { position: fixed; z-index: 30; background: rgba(255, 253, 248, .94) !important; box-shadow: 0 4px 12px -4px rgba(58, 26, 9, .4); }
/* =========================================================
v179 — tourist Activity (original page): thin line dividers between sections and between activity cards
========================================================= */
#app .act2-top { padding-bottom: 10px !important; border-bottom: 1px solid #E8DCCB !important; }
#app .act2 .act2-tabs { padding-bottom: 10px !important; margin-bottom: 10px !important; border-bottom: 1px solid #E8DCCB !important; }
#app .act2 .act2-search { padding-bottom: 12px !important; margin-bottom: 0 !important; border-bottom: 1px solid #E8DCCB !important; }
#app .act2-body .act-types { padding: 10px 0 12px !important; margin: 0 0 12px !important; border-bottom: 1px solid #E8DCCB !important; }
#app .act2-body .atx-list > * + * { margin-top: 12px; padding-top: 12px; border-top: 1px solid #EFE4D4; }
/* =========================================================
v177 — tourist Home
========================================================= */
#app .hx-pillars { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; padding: 12px 6px !important; border-radius: 20px !important; background: #FFFCF6 !important; border: 1px solid #F0E4D2 !important; box-shadow: 0 12px 24px -22px rgba(58, 26, 9, .6) !important; }
#app .hx-pillars > * { background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px 4px !important; min-height: 0 !important; }
#app .hx-pillars > * + * { border-left: 1px solid #F3EADD !important; border-radius: 0 !important; }
.hx-lv { margin-top: 12px; padding: 12px; border-radius: 20px; background: #FFFCF6; border: 1px solid #F0E4D2; box-shadow: 0 12px 24px -22px rgba(58, 26, 9, .6); }
.hx-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .hx-h h3 { margin: 0; font-size: .82rem; letter-spacing: .08em; color: #3B1E0E; }
.hx-see { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; font: inherit; font-size: .74rem; font-weight: 700; color: #9C5E1E; cursor: pointer; }
.hx-row { display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px; } .hx-k { display: block; margin-bottom: 4px; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9A8471; }
.hx-vids > div, .hx-lives > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hx-lives { padding-left: 10px; border-left: 1px solid #F3EADD; }
.hx-vid, .hx-live { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.hx-vimg { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #F3E7D3; } .hx-vimg img { width: 100%; height: 100%; object-fit: cover; }
.hx-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(59, 30, 14, .55); color: #fff; font-style: normal; }
.hx-vimg em { position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 253, 248, .9); color: #633018; font-style: normal; font-size: .56rem; font-weight: 800; }
.hx-vid b { font-size: .68rem; color: #3B1E0E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hx-vid small, .hx-live small { font-size: .62rem; color: #806B5A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-live { justify-items: center; text-align: center; } .hx-ring { display: block; width: 100%; max-width: 64px; aspect-ratio: 1 / 1; border-radius: 50%; padding: 3px; background: linear-gradient(145deg, #E9B85A, #8A4F22); }
.hx-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #FFFCF6; display: block; }
.hx-live em { margin-top: -10px; padding: 1px 7px; border-radius: 999px; background: #A3341F; color: #fff; font-style: normal; font-size: .54rem; font-weight: 800; position: relative; }
.hx-live.is-up em { background: #633018; } .hx-none { margin: 4px 0; font-size: .72rem; color: #9A8471; grid-column: 1 / -1; }
.hx-div { margin: 16px 0 6px; border: 0; border-top: 1px solid #E8DCCB; }
.hx-tabs { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 0 2px; margin-bottom: 12px; border-bottom: 1px solid #F0E4D2; } .hx-tabs::-webkit-scrollbar { display: none; }
.hx-tabs button { flex: none; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: .84rem; font-weight: 600; color: #9A8471; cursor: pointer; }
.hx-tabs button[aria-selected="true"] { color: #3B1E0E; font-weight: 800; border-bottom-color: #633018; }
.hx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.hx-card { display: grid; gap: 2px; padding: 0 0 10px; border: 0; border-radius: 16px; overflow: hidden; background: #FFFCF6; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6); font: inherit; text-align: left; cursor: pointer; }
.hx-cimg { display: block; aspect-ratio: 1 / 1; background: #F3E7D3; } .hx-cimg img { width: 100%; height: 100%; object-fit: cover; }
.hx-card b, .hx-card small, .hx-price { padding: 0 10px; } .hx-card b { margin-top: 6px; font-size: .8rem; color: #3B1E0E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hx-card small { font-size: .68rem; color: #806B5A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hx-price { font-size: .8rem; font-weight: 800; color: #633018; } .hx-empty { padding: 20px; text-align: center; }
.hx-live small, .hx-vid small, .hx-vid b { display: block; max-width: 100%; } .hx-lives > div > * { min-width: 0; overflow: hidden; }
/* v177b — shortcuts: icon + name only; Video and Live Shopping as two separate cards */
#app .hx-pillars > * { display: grid !important; justify-items: center; gap: 6px; padding: 6px 2px !important; border-left: 0 !important; }
.hx-pi { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #F6E7CF; color: #633018; } .hx-pi svg { width: 22px; height: 22px; }
#app .hx-pillars > * b { font-size: .76rem; color: #3B1E0E; }
.hx-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.hx-card2 { min-width: 0; padding: 10px; border-radius: 18px; background: #FFFCF6; border: 1px solid #F0E4D2; box-shadow: 0 12px 24px -22px rgba(58, 26, 9, .6); display: grid; grid-template-rows: auto 1fr; }
.hx-card2 .hx-h { margin-bottom: 6px; } .hx-card2 .hx-h h3 { font-size: .86rem; letter-spacing: 0; }
.hx-up { font-size: .6rem; font-weight: 800; color: #9A8471; text-transform: uppercase; letter-spacing: .08em; }
.hx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; }
.hx-card2 .hx-vimg { aspect-ratio: 1 / 1; } .hx-card2 .hx-vid b { font-size: .62rem; } .hx-card2 .hx-vid small { display: none; }
.hx-card2 .hx-ring { max-width: 58px; } .hx-card2 .hx-live small { font-size: .6rem; }
@media (max-width: 340px) { .hx-card2 { padding: 8px; } .hx-two { gap: 4px; } .hx-card2 .hx-ring { max-width: 48px; } }
.hx-card2 .hx-h { flex-wrap: wrap; row-gap: 0; min-width: 0; } .hx-card2 .hx-h h3 { min-width: 0; }
@media (max-width: 360px) { .hx-card2 .hx-h h3 { font-size: .76rem; } .hx-up { font-size: .54rem; width: 100%; } }
#app .hx-pillars { align-items: start !important; padding: 10px 6px !important; } #app .hx-pillars > * { height: auto !important; min-height: 0 !important; }
/* v177c — match the reference */
#app .hx-pillars > * + * { border-left: 1px solid #F0E4D2 !important; }
.hx-pi { width: 50px; height: 50px; background: #F3DDB4; } #app .hx-pillars > * b { font-size: .8rem; }
.hx-card2 { padding: 12px; } .hx-card2 .hx-h h3 { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; } .hx-card2 .hx-h h3 svg { color: #633018; }
.hx-card2 .hx-see { font-size: .7rem; }
.hx-card2 .hx-vimg { aspect-ratio: 4 / 5; border-radius: 12px; }
.hx-card2 .hx-play { width: 34px; height: 34px; background: rgba(40, 20, 8, .55); }
.hx-by { display: flex; align-items: center; gap: 4px; min-width: 0; margin-top: 4px; font-size: .62rem; font-weight: 700; color: #3B1E0E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-by img { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #F3DDB4; object-fit: contain; }
.hx-card2 .hx-two { align-items: center; } .hx-card2 .hx-live { gap: 4px; } .hx-card2 .hx-ring { max-width: 76px; padding: 3px; background: linear-gradient(145deg, #E9B85A, #B87932, #8A4F22); }
.hx-card2 .hx-live em { margin-top: -12px; padding: 2px 8px; font-size: .58rem; } .hx-card2 .hx-live small { font-size: .66rem; color: #3B1E0E; }
.hx-tabs { gap: 8px; border-bottom: 0; } .hx-tabs button { padding: 6px 12px; border-radius: 999px; background: #F3E9DA; color: #806B5A; border-bottom: 0; }
.hx-tabs button[aria-selected="true"] { background: none; color: #3B1E0E; border-radius: 0; border-bottom: 2px solid #633018; padding-bottom: 4px; }
@media (max-width: 360px) { .hx-pi { width: 42px; height: 42px; } .hx-card2 .hx-ring { max-width: 56px; } .hx-card2 .hx-see { font-size: 0; } .hx-card2 .hx-see svg { width: 14px; height: 14px; } }
.hx-card2 .hx-h { flex-wrap: nowrap; } .hx-card2 .hx-h h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 440px) { .hx-see-live span { display: none; } }
@media (max-width: 440px) { .hx-card2 .hx-h h3 { font-size: .8rem; gap: 4px; } .hx-card2 .hx-h h3 svg { width: 14px; height: 14px; } }
@media (max-width: 340px) { .hx-card2 .hx-h h3 { font-size: .72rem; } .hx-card2 { padding: 8px; } }
@media (max-width: 380px) { .hx-card2[aria-label='Live Shopping'] .hx-h h3 svg { display: none; } .hx-card2 .hx-h h3 { font-size: .74rem; } .hx-card2 .hx-see { padding: 0; } }
/* v177d — balanced categories, compact header and a wider, shorter banner */
#app .hx-pillars > * { grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; align-content: start; text-align: center !important; width: 100%; }
#app .hx-pillars .hx-pi { margin: 0 auto !important; } #app .hx-pillars > * b { width: 100%; text-align: center; }
#app .h-top { min-height: 0 !important; padding-top: 6px !important; padding-bottom: 4px !important; }
#app .h-search { min-height: 44px !important; height: 44px !important; margin-top: 6px !important; margin-bottom: 10px !important; }
/* banner: wide strip (≈2.15:1); the image is cropped proportionally from its centre, never stretched */
#app .hs, #app .hs .hs-track, #app .hs .hs-slide, #app .hs .hs-img { height: auto !important; aspect-ratio: 2.15 / 1 !important; }
#app .hs .hs-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; }
/* banner inset like the reference: same side margins as the search bar and cards, rounded corners */
#app .hs { width: auto !important; margin-left: 16px !important; margin-right: 16px !important; border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 12px 24px -20px rgba(58, 26, 9, .7); }
html body #app .hs { width: auto !important; max-width: none !important; margin: 0 16px 0 !important; border-radius: 18px !important; overflow: hidden !important; }
html body #app .hs .hs-img img { border-radius: 0 !important; }
html body #app .r3-home .home-gold-intro > .hs { margin: 0 0 14px !important; width: auto !important; max-width: none !important; border-radius: 18px !important; overflow: hidden !important; }
/* v178 — plain text filters (brown underline); feed cards with a ♡ */
.hx-tabs { gap: 18px !important; } .hx-tabs button { padding: 6px 0 !important; border-radius: 0 !important; background: none !important; color: #9A8471 !important; border-bottom: 2px solid transparent !important; }
.hx-tabs button[aria-selected="true"] { color: #3B1E0E !important; border-bottom-color: #633018 !important; }
.hx-card { position: relative; } .hx-cimg { position: relative; } .hx-card:focus-visible { outline: 3px solid rgba(217, 160, 75, .5); outline-offset: 2px; }
.hx-fav { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 253, 248, .9); color: #633018; cursor: pointer; box-shadow: 0 2px 6px rgba(58, 26, 9, .2); }
.hx-fav[aria-pressed="true"] svg { fill: #A3341F; stroke: #A3341F; }
.hx-more { margin: 22px 0 6px; font-size: 1rem; color: #3B1E0E; }
.hx-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; }
.hx-sep { margin: 14px 0 12px !important; } #app .home-gold-intro .hx-sep { margin: 12px 0 !important; } .hx-more { margin-top: 4px !important; }
/* v181 — category icon circles: white-to-gold gradient, brown icons */
#app .hx-pillars .hx-pi { background: linear-gradient(145deg, #FFFFFF 0%, #FBF0DA 38%, #EFCF94 72%, #D9A04B 100%) !important; color: #633018 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 10px -4px rgba(150, 95, 30, .45) !important; border: 1px solid rgba(217, 160, 75, .35); }
#app .hx-pillars .hx-pi svg { stroke: #633018; }
/* =========================================================
v182 — viewer action rail (Live and Video alike) and the comment composer
========================================================= */
.rl-rail { gap: 14px !important; }
.rl-rail > button { display: grid !important; justify-items: center; gap: 4px; background: none !important; border: 0 !important; color: #fff !important; font-size: .66rem !important; font-weight: 800 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); opacity: 1 !important; }
.rl-rail > button > svg, .rl-rail > button > img, .rl-rail > button > .rl-ico, .rl-rail > button > span:first-child { box-sizing: content-box; width: 22px !important; height: 22px !important; padding: 11px !important; border-radius: 50% !important;
background: rgba(30, 14, 6, .55) !important; border: 1.5px solid rgba(255, 255, 255, .55) !important; color: #fff !important; stroke: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.rl-rail > button:hover > :first-child, .rl-rail > button:focus-visible > :first-child { background: rgba(99, 48, 24, .85) !important; border-color: #E9B85A !important; }
.rl-rail > button[aria-pressed="true"] > :first-child, .rl-rail > button.on > :first-child, .rl-rail > .rl-save.on > :first-child { background: linear-gradient(145deg, #E9B85A, #9C5E1E) !important; border-color: #FFE7B8 !important; }
.rl-rail > button img { object-fit: contain; }
/* comment sheet: no sideways scrolling; one pill field with a round send button */
.rl-live-sheet, .rl-live-sheet .rl-panel-scroll { overflow-x: hidden !important; }
.rl-panel-compose { display: flex !important; align-items: center; gap: 8px; padding: 10px 0 4px !important; border-top: 1px solid #F0E4D2; background: var(--card, #FFFDF8); }
.rl-panel-compose :is(textarea, input[type=text], input:not([type])) { flex: 1; min-width: 0; min-height: 44px; max-height: 120px; padding: 11px 16px !important; border: 1px solid #E8DCCB !important; border-radius: 22px !important; background: #FFFFFF !important; font: inherit; font-size: .86rem; resize: none; }
.rl-panel-compose :is(textarea, input):focus-visible { outline: none; border-color: #B87932 !important; box-shadow: 0 0 0 3px rgba(217, 160, 75, .22); }
.rl-panel-compose button[type=submit], .rl-panel-compose > button:last-of-type { flex: none; display: grid; place-items: center; width: 44px !important; height: 44px !important; padding: 0 !important; border: 0; border-radius: 50% !important; background: linear-gradient(145deg, #8F5326, #633018) !important; color: #FFF8EE !important; box-shadow: 0 6px 14px -8px rgba(58, 26, 9, .8); }
.rl-panel-compose .fx-foot, .rl-panel-compose .fx-cancel { display: none !important; }
/* the reaction button matches the other rail buttons; labels are white and readable over any video */
.rl-rail .lr-rl .lr-btn { display: grid !important; place-items: center; width: 46px !important; height: 46px !important; padding: 0 !important; border-radius: 50% !important;
background: rgba(30, 14, 6, .55) !important; border: 1.5px solid rgba(255, 255, 255, .55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.rl-rail .lr-rl .lr-btn img { width: 30px !important; height: 30px !important; object-fit: contain; }
.rl-rail .lr-rl .lr-btn[aria-pressed="true"], .rl-rail .lr-rl .lr-btn.on { background: linear-gradient(145deg, #E9B85A, #9C5E1E) !important; border-color: #FFE7B8 !important; }
.rl-rail small, .rl-rail .lr-rl small, .rl-rail .lr-rl .lr-n { color: #FFFFFF !important; font-weight: 800 !important; font-size: .66rem !important; opacity: 1 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .75) !important; }
/* =========================================================
v183 — Live & Video viewer matched to the reference
========================================================= */
/* tabs: cream pill bar, brown active tab, thin separators */
.rl-tabs { padding: 4px !important; border-radius: 999px !important; background: rgba(253, 243, 230, .94) !important; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); }
.rl-tabs [data-act="rl-tab"] { border-radius: 999px !important; color: #633018 !important; font-weight: 800 !important; background: none !important; }
.rl-tabs [data-act="rl-tab"] + [data-act="rl-tab"] { position: relative; }
.rl-tabs [data-act="rl-tab"] + [data-act="rl-tab"]::before { content: ""; position: absolute; left: -1px; top: 25%; bottom: 25%; width: 1px; background: rgba(99, 48, 24, .25); }
.rl-tabs [data-act="rl-tab"][aria-selected="true"] { background: #6B3418 !important; color: #FFF8EE !important; } .rl-tabs [data-act="rl-tab"][aria-selected="true"]::before, .rl-tabs [aria-selected="true"] + [data-act="rl-tab"]::before { display: none; }
.rl-close { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: #6B3418 !important; color: #FFF8EE !important; border: 0 !important; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.rl-who img, .rl-who .ava, .rl-who > span:first-child { box-shadow: 0 0 0 2.5px #E9B85A; }
/* action rail: solid chocolate circles, one centre line, equal spacing, white labels; React labelled */
.rl-rail { gap: 16px !important; align-items: center !important; }
.rl-rail > button > :first-child, .rl-rail .lr-rl .lr-btn { width: 50px !important; height: 50px !important; box-sizing: border-box !important; padding: 13px !important; background: rgba(107, 52, 24, .94) !important; border: 0 !important; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.rl-rail .lr-rl .lr-btn { padding: 0 !important; } .rl-rail .lr-rl .lr-btn img { width: 32px !important; height: 32px !important; }
.rl-rail .lr-rl { display: grid !important; justify-items: center; gap: 4px; }
.rl-rail .lr-rl::after { content: "React"; color: #fff; font-size: .66rem; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, .75); }
/* auction card */
.rl-lot2 { border-radius: 20px !important; background: #FDF3E6 !important; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55) !important; border: 0 !important; }
.rl-lot2 .btn, .rl-lot2 [data-act*="bid"] { border-radius: 999px !important; background: #6B3418 !important; color: #FFF8EE !important; }
/* v184 — Upcoming tab: light LOCARTA design */
.rl.rl-t-upcoming { background: var(--bg, #F8F1E8) !important; color: #3B1E0E; }
.rl-t-upcoming .rl-head { background: none !important; }
.rl-t-upcoming .rl-list { max-width: 640px; margin: 0 auto; padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important; background: none !important; }
.up-head { margin: 4px 0 6px; } .up-head h2 { margin: 0; font-size: 1.2rem; color: #3B1E0E; } .up-head small { font-size: .78rem; color: #806B5A; }
.up-g { margin: 14px 0 8px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #9C5E1E; }
.rl-t-upcoming .up-card { display: grid !important; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 10px; padding: 10px !important; border-radius: 18px !important; background: #FFFCF6 !important; border: 1px solid #F0E4D2 !important; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6); color: #3B1E0E !important; }
.rl-t-upcoming .up-card .rl-li-img { width: 88px !important; height: 88px !important; aspect-ratio: 1 / 1; border-radius: 14px !important; overflow: hidden; grid-row: span 2; }
.rl-t-upcoming .up-card .rl-li-img img { width: 100%; height: 100%; object-fit: cover; }
.rl-t-upcoming .up-card :is(b, strong, h3, h4) { color: #3B1E0E !important; font-size: .9rem !important; line-height: 1.25; white-space: normal !important; }
.rl-t-upcoming .up-card :is(small, p, span:not(.up-when):not(.pic)) { color: #806B5A !important; font-size: .72rem !important; }
.up-when { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 2px; font-size: .74rem !important; font-weight: 800; color: #9C5E1E !important; }
.up-acts { display: flex; gap: 8px; margin-top: 8px; grid-column: 2; }
.up-acts > button { flex: 1 1 0; min-height: 36px; padding: 0 10px !important; border-radius: 999px !important; font: inherit; font-size: .74rem !important; font-weight: 800; cursor: pointer; white-space: nowrap; }
.up-acts [data-act=rl-remind] { background: #6B3418 !important; color: #FFF8EE !important; border: 0 !important; }
.up-acts .up-view { background: transparent; color: #633018; border: 1px solid #8F5326; }
.up-empty { display: grid; justify-items: center; gap: 6px; padding: 32px 16px; text-align: center; color: #806B5A; } .up-empty svg { width: 32px; height: 32px; color: #B87932; } .up-empty b { color: #3B1E0E; }
/* v185 — 3D coverflow and textile dividers */
.cf { position: relative; height: 300px; margin: 6px -16px 10px; perspective: 1100px; overflow: hidden; touch-action: pan-y; user-select: none; }
.cf-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.cf-card { position: absolute !important; top: 10px; left: 50%; width: 58% !important; max-width: 230px; height: 270px !important; margin: 0 !important; transition: transform .55s cubic-bezier(.25,.8,.25,1), opacity .55s; border-radius: 18px !important; overflow: hidden; box-shadow: 0 18px 30px -16px rgba(58, 26, 9, .6) !important; background: #FFFCF6; }
.cf-card img { width: 100% !important; height: 170px !important; object-fit: cover !important; }
.cf-card .pic { height: 170px !important; aspect-ratio: auto !important; }
.cf-nav { position: absolute; z-index: 20; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 252, 246, .92); color: #633018; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4); cursor: pointer; }
.cf-prev { left: 10px; } .cf-prev svg { transform: rotate(180deg); } .cf-next { right: 10px; }
@media (min-width: 700px) { .cf { height: 340px; } .cf-card { max-width: 260px; height: 310px !important; } .cf-card img, .cf-card .pic { height: 200px !important; } }
@media (prefers-reduced-motion: reduce) { .cf-card { transition: none; } }
/* textile-inspired divider: a fine line with small woven diamonds in muted gold and brown */
.tx-div { height: 12px; margin: 18px 0 10px; border: 0; background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'%3E%3Cpath d='M0 6h28' stroke='%23C9A26B' stroke-width='1'/%3E%3Cpath d='M14 1l5 5-5 5-5-5z' fill='none' stroke='%23B87932' stroke-width='1.2'/%3E%3Cpath d='M14 4l2 2-2 2-2-2z' fill='%236B3418'/%3E%3Ccircle cx='2' cy='6' r='1.1' fill='%23B87932'/%3E%3Ccircle cx='26' cy='6' r='1.1' fill='%23B87932'/%3E%3C/svg%3E") center / 28px 12px repeat-x;
-webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cf-card img { -webkit-user-drag: none; user-select: none; }
/* image-only cards (New Arrivals banners) fit their image instead of a tall empty frame */
.cf:has(.cf-card:not(:has(b, strong, h3, h4, small, .price))) { height: 220px; }
.cf-card:not(:has(b, strong, h3, h4, small, .price)) { height: auto !important; top: 30px; background: none !important; }
.cf-card:not(:has(b, strong, h3, h4, small, .price)) :is(img, .pic) { height: auto !important; aspect-ratio: 16 / 10; }
/* v186 — dividers use the woven band from the login / sign-up screens, slimmed to a line */
.tx-div { height: 14px !important; margin: 22px 0 16px !important; border: 0 !important; border-radius: 3px;
background: var(--weave) center / auto 100% repeat-x !important; background-color: var(--weave-bg) !important; -webkit-mask: none !important; mask: none !important;
box-shadow: 0 2px 6px -3px rgba(138, 74, 28, .35); }
/* sections holding a coverflow don't keep empty space below it */
section:has(> .cf), div:has(> .cf) { min-height: 0 !important; }
.cf { margin-bottom: 4px !important; }
section:has(> .cf), div:has(> .cf) { height: auto !important; padding-bottom: 18px !important; } section:has(> .cf) > :not(.cf):not(.na-head):not(.sec-head):not(.tx-div):empty { display: none !important; }
/* v187 — full-width woven seams between Explore's coloured sections; New Arrivals mini cards */
#app .ex-band { margin-top: 0 !important; margin-bottom: 0 !important; border-radius: 0 !important; }
.tx-seam { height: 14px; margin: 0 calc(50% - 50vw); width: 100vw; max-width: none; background: var(--weave) center / auto 100% repeat-x; background-color: var(--weave-bg); box-shadow: 0 2px 6px -3px rgba(138, 74, 28, .35); position: relative; z-index: 2; }
.na-mini { padding: 4px 16px 6px; } .na-mini-h { margin: 0 0 8px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9C5E1E; text-align: left; }
.na-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.na-mini-card { display: grid; gap: 2px; padding: 0 0 10px; border: 0; border-radius: 16px; overflow: hidden; background: #FFFCF6; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6); font: inherit; text-align: left; cursor: pointer; }
.na-mini-card span { display: block; aspect-ratio: 4 / 3; background: #F3E7D3; } .na-mini-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.na-mini-card :is(b, small, i) { padding: 0 10px; } .na-mini-card b { margin-top: 6px; font-size: .78rem; color: #3B1E0E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.na-mini-card small { font-size: .66rem; color: #806B5A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .na-mini-card i { font-style: normal; font-size: .8rem; font-weight: 800; color: #633018; }
#app .ex-more { margin-top: 0 !important; padding-top: 0 !important; } #app .new-arrivals-zone, #app .ex-more > .zone { margin-top: 0 !important; margin-bottom: 0 !important; border-radius: 0 !important; }
/* v188 — New Arrivals fits its carousel; space above it with a woven seam on its top edge; promoted cards fit their content; every woven line full width */
#app .tx-seam-top { margin-top: 18px !important; }
#app .new-arrivals-zone { padding-bottom: 20px !important; min-height: 0 !important; height: auto !important; }
#app .ex-band { box-shadow: inset 0 10px 14px -12px rgba(58, 26, 9, .35), inset 0 -10px 14px -12px rgba(58, 26, 9, .3); }
.cf:has(.bb-card) { height: 390px !important; }
.cf .bb-card.cf-card { height: auto !important; max-height: 370px; display: flex !important; flex-direction: column; }
.cf .bb-card.cf-card img, .cf .bb-card.cf-card .pic { height: 150px !important; flex: none; }
.cf .bb-card.cf-card :is(.btn, button, a.btn) { position: static !important; margin-top: 8px !important; }
#app .tx-div { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: 100vw !important; max-width: none !important; border-radius: 0 !important; }
/* promoted cards: tall enough for image, text and button (nothing clipped) */
html body #app .cf .bb-card.cf-card { height: 340px !important; max-height: none !important; min-height: 0 !important; aspect-ratio: auto !important; }
html body #app .cf .bb-card.cf-card .bb-img, html body #app .cf .bb-card.cf-card .bb-img img { height: 130px !important; }
html body #app .cf:has(.bb-card) { height: 372px !important; }
/* v189 — New Arrivals: carousel box fits its banner cards; balanced space */
html body #app .new-arrivals-zone .cf { height: 176px !important; margin-bottom: 0 !important; }
html body #app .new-arrivals-zone .cf .cf-card { top: 8px !important; }
html body #app .new-arrivals-zone { padding-bottom: 18px !important; }
/* Featured Experiences cards share the promoted-card design */
.fx-card .bb-tag { position: absolute; top: 8px; left: 8px; display: inline-flex; gap: 4px; align-items: center; padding: 3px 9px; border-radius: 999px; background: rgba(255, 252, 246, .92); color: #633018; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.fx-card .bb-over { padding: 10px 12px 12px; display: grid; gap: 2px; } .fx-card .bb-kick { font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9C5E1E; }
.fx-card .bb-title { font-size: .9rem; color: #3B1E0E; line-height: 1.2; } .fx-card .bb-by { font-size: .68rem; color: #806B5A; } .fx-card .bb-msg { margin: 2px 0; font-size: .7rem; color: #6B4A33; }
.fx-card .bb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .fx-card .bb-price b { font-size: .9rem; color: #633018; } .fx-card .bb-price { font-size: .66rem; color: #806B5A; }
.fx-card .bb-foot .btn { min-height: 34px; padding: 0 14px !important; border-radius: 12px !important; background: linear-gradient(135deg, #8F5326, #4E2410) !important; color: #FFF8EE !important; font-size: .74rem; }
#app .ex-band .tx-div { display: none !important; }
.cf .fx-card.cf-card { background: #FFFCF6 !important; } .fx-card .bb-over { background: #FFFCF6 !important; color: #3B1E0E; } .fx-card .bb-msg { color: #6B4A33 !important; } .fx-card .bb-by { color: #806B5A !important; }
/* v190 — three uniform showcase bands: same deep chocolate background, same heading style */
html body #app :is(.new-arrivals-zone, .ex-promo, .ex-fx) { background: radial-gradient(120% 60% at 50% 0%, rgba(226, 181, 101, .22), transparent 60%), linear-gradient(180deg, #4E2410 0%, #5E2E16 55%, #4A220F 100%) !important; padding-top: 22px !important; padding-bottom: 24px !important; margin: 0 !important; }
html body #app :is(.new-arrivals-zone, .ex-promo, .ex-fx)::before, html body #app :is(.new-arrivals-zone, .ex-promo, .ex-fx)::after { opacity: .25; }
html body #app :is(.new-arrivals-zone, .ex-promo, .ex-fx) :is(h2, .h-sec h2, .na-head h2) { color: #FFF3DF !important; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
html body #app :is(.new-arrivals-zone, .ex-promo, .ex-fx) :is(.na-head, .sec-head) :is(p, small:not(:first-child), .pr-note) , html body #app .ex-promo .pr-note { color: rgba(255, 243, 223, .82) !important; }
html body #app :is(.new-arrivals-zone, .ex-promo, .ex-fx) :is(.na-head, .sec-head) > :first-child:not(h2) { color: #E9B85A !important; }
html body #app .new-arrivals-zone .na-head :is(small, .na-kick, [class*=kick]) { color: #E9B85A !important; }
html body #app :is(.new-arrivals-zone, .ex-promo, .ex-fx) :is(.na-flourish, hr) { background: linear-gradient(90deg, transparent, #E9B85A, transparent) !important; }
html body #app .ex-fx { margin-bottom: 0 !important; } html body #app .ex-fx + .tx-seam { margin-top: 0 !important; }
/* v191 — showcase bands run edge to edge, with a subtle woven texture; "Everything on LOCARTA" heading */
html body #app :is(.new-arrivals-zone, .ex-promo, .ex-fx) { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: 100vw !important; max-width: none !important; border-radius: 0 !important; box-sizing: border-box; position: relative; }
html body #app :is(.new-arrivals-zone, .ex-promo, .ex-fx) { background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M18 4l14 14-14 14L4 18z' fill='none' stroke='%23E9B85A' stroke-opacity='.07' stroke-width='1'/%3E%3Cpath d='M18 13l5 5-5 5-5-5z' fill='%23E9B85A' fill-opacity='.05'/%3E%3C/svg%3E"),
radial-gradient(120% 60% at 50% 0%, rgba(226, 181, 101, .22), transparent 60%), linear-gradient(180deg, #4E2410 0%, #5E2E16 55%, #4A220F 100%) !important; }
.ev-head { display: grid !important; gap: 2px; padding-top: 6px; } .ev-head .ev-kick { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #B87932; }
.ev-head h2 { position: relative; padding-bottom: 8px; } .ev-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #D9A04B, transparent); }
html body #app :is(.new-arrivals-zone, .ex-promo, .ex-fx) { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
/* =========================================================
v195 — context-aware search
========================================================= */
.sr { min-height: 100%; background: var(--bg, #F8F1E8); padding: 0 16px calc(var(--tabbar, 88px) + 20px); max-width: 760px; margin: 0 auto; }
.sr-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 0 10px; background: var(--bg, #F8F1E8); }
.sr-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 8px 0 14px; border-radius: 999px; background: #FFFDF8; border: 1px solid #EADCC8; box-shadow: 0 8px 18px -16px rgba(58, 26, 9, .6); color: #806B5A; }
.sr-field input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: .9rem; color: #3B1E0E; outline: none; } .sr-field input::-webkit-search-cancel-button { display: none; }
.sr-cl { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #F1E4D1; color: #633018; cursor: pointer; }
.sr-fbtn { position: relative; } .sr-fbtn i { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; border-radius: 999px; background: #633018; color: #fff; font-style: normal; font-size: .6rem; display: grid; place-items: center; }
.sr-sug { position: sticky; top: 66px; z-index: 6; margin: -4px 0 8px; padding: 6px; list-style: none; border-radius: 16px; background: #FFFDF8; box-shadow: 0 14px 30px -12px rgba(58, 26, 9, .4); }
.sr-sug button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: .84rem; color: #3B1E0E; text-align: left; cursor: pointer; }
.sr-sug button:hover, .sr-sug button.on { background: #F6EEE2; } .sr-sug small { color: #9A8471; } .sr-sug mark { background: none; color: #9C5E1E; font-weight: 800; }
.sr-sec { margin: 14px 0 6px; } .sr-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .sr-sh h3 { margin: 0; font-size: .98rem; color: #3B1E0E; }
.sr-muted { margin: 0; font-size: .74rem; color: #9A8471; } .sr-clear { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; font: inherit; font-size: .74rem; font-weight: 700; color: #9C5E1E; cursor: pointer; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; } .sr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px 0 12px; min-height: 34px; border: 0; border-radius: 999px; background: #F1E4D1; color: #633018; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.sr-chip > button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; } .sr-x { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; } .sr-pop { padding: 0 12px; }
.sr-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 6px; border-radius: 20px; background: #FFFCF6; border: 1px solid #F0E4D2; }
.sr-cats button { display: grid; justify-items: center; gap: 6px; border: 0; background: none; font: inherit; cursor: pointer; } .sr-cats span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, #FFFFFF, #EFCF94); color: #633018; } .sr-cats b { font-size: .74rem; color: #3B1E0E; }
.sr-rail { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; } .sr-rail::-webkit-scrollbar { display: none; }
.sr-item { flex: 0 0 140px; display: grid; gap: 2px; padding-bottom: 10px; border-radius: 16px; overflow: hidden; background: #FFFCF6; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6); cursor: pointer; }
.sr-img { position: relative; display: block; aspect-ratio: 1 / 1; background: #F3E7D3; } .sr-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-it { display: grid; gap: 1px; padding: 6px 10px 0; } .sr-kind { font-size: .56rem !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #B87932 !important; }
.sr-it b { font-size: .78rem; color: #3B1E0E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sr-it small { font-size: .66rem; color: #806B5A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-it i { font-style: normal; font-size: .78rem; font-weight: 800; color: #633018; }
.sr-exp .sr-img { aspect-ratio: 4 / 3; }
.sr-person { flex: 0 0 auto; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 250px; padding: 10px; border-radius: 16px; background: #FFFCF6; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6); }
.sr-pp { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: #F3E7D3; cursor: pointer; } .sr-pp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-pt { display: grid; min-width: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; } .sr-pt b { font-size: .84rem; color: #3B1E0E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-pt small { font-size: .68rem; color: #806B5A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-follow { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: #633018; color: #FFF8EE; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.sr-list { display: grid; gap: 10px; } .sr-list .sr-person { min-width: 0; }
.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .sr-grid .sr-item { flex: none; }
.sr-post { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 10px; border: 0; border-radius: 16px; background: #FFFCF6; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6); font: inherit; text-align: left; cursor: pointer; }
.sr-post img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; } .sr-post span { display: grid; gap: 2px; min-width: 0; } .sr-post small { font-size: .66rem; font-weight: 700; color: #9C5E1E; } .sr-post b { font-size: .82rem; color: #3B1E0E; }
.sr-post em { font-style: normal; font-size: .7rem; color: #6B4A33; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sr-post i { font-style: normal; display: inline-flex; gap: 3px; align-items: center; font-size: .66rem; color: #806B5A; }
.sr-tabs { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; margin: 2px 0 8px; border-bottom: 1px solid #F0E4D2; } .sr-tabs::-webkit-scrollbar { display: none; }
.sr-tabs button { flex: none; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: .82rem; font-weight: 600; color: #9A8471; cursor: pointer; } .sr-tabs button[aria-selected="true"] { color: #3B1E0E; font-weight: 800; border-bottom-color: #633018; }
.sr-count { margin: 4px 0 0; font-size: .74rem; color: #806B5A; }
.sr-loka { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px; padding: 6px 12px; border: 1px solid #E2C79E; border-radius: 999px; background: #FFF6E6; color: #633018; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
.sr-more { width: 100%; margin-top: 12px; justify-content: center; }
.sr-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 12px; text-align: center; color: #806B5A; } .sr-empty svg { width: 30px; height: 30px; color: #B87932; } .sr-empty b { color: #3B1E0E; }
.sr-adv { display: grid; gap: 12px; } .sr-adv-acts { display: grid; grid-template-columns: auto 1fr; gap: 8px; } .sr-adv-acts .btn { justify-content: center; border-radius: 999px; }
@media (min-width: 700px) { .sr-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
html body .sr-field input { border: 0 !important; box-shadow: none !important; outline: none !important; background: none !important; padding: 0 !important; min-height: 0 !important; }
/* v196 — no brown highlight while typing, anywhere in the app: fields keep their normal look when focused */
html body :is(input, textarea, select):is(:focus, :focus-visible, :active) { outline: none !important; box-shadow: none !important; }
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select):is(:focus, :focus-visible) { border-color: #E8DCCB !important; }
html body #app .sr-field input:is(:focus, :focus-visible), html body .sr-field input:is(:focus, :focus-visible), html body .sr-field input { border: 0 !important; background: none !important; box-shadow: none !important; outline: none !important; }
html body .sr-field:focus-within { border-color: #EADCC8 !important; box-shadow: 0 8px 18px -16px rgba(58, 26, 9, .6) !important; }
/* stronger: applies over every older focus style (main app, sheets and panels) */
html body :is(#app, #sheet, body) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select):is(:focus, :focus-visible, :active) { outline: none !important; box-shadow: none !important; border-color: #E8DCCB !important; }
html body :is(#app, #sheet, body) :is(.cpx-search, .sr-field, .field, label):focus-within { box-shadow: none !important; outline: none !important; }
html body :is(#app, #sheet, body) .sr-field input { border: 0 !important; }
/* v198 — Activity search cards; Loka's floating button hidden on the search page; rounded corners on every product/service card */
.sr-tx { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 18px; background: #FFFCF6; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6); font: inherit; text-align: left; cursor: pointer; }
.sr-txi { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: #F3E7D3; color: #9C5E1E; } .sr-txi img { width: 100%; height: 100%; object-fit: cover; }
.sr-txt { display: grid; min-width: 0; } .sr-txt small { font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #B87932; } .sr-txt b { font-size: .84rem; color: #3B1E0E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-txt em { font-style: normal; font-size: .68rem; color: #806B5A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-txr { display: grid; justify-items: end; gap: 3px; } .sr-txr b { font-size: .84rem; color: #633018; }
.sr-txr i { font-style: normal; padding: 1px 8px; border-radius: 999px; background: #F1E4D1; color: #633018; font-size: .6rem; font-weight: 800; }
body:has(.sr) .loka-fab { display: none !important; }
html body #app main :is(.sr-item, .sr-person, .sr-post, .hx-card, .na-mini-card, .exs-card, .ah-card, .fcard, .pcard, .p-card, .mk-card, .bk-card, .ex-card, .card, article.cr-prod, article.cr-coll, .bb-card, .rail > button, .rail > article, .grid > button, .grid > article, .rail > a, .grid > a) { border-radius: 18px !important; }
html body #app main :is(.sr-item, .hx-card, .exs-card, .ah-card, .fcard, .pcard, .p-card, .mk-card, .bk-card, .ex-card, .rail > button, .rail > article, .grid > button, .grid > article):not(.qa-card) { overflow: hidden; }
/* v199 — category cards: a gentle wave where the photo meets the card body (format of the reference card) */
html body #app main :is(.pc-open, .cg3-card, .bk-card, .bk-cover, .bk-grid > button, .bk-grid > article) .pic { position: relative; overflow: hidden; border-radius: 18px 18px 0 0 !important; }
html body #app main :is(.pc-open, .cg3-card, .bk-card, .bk-cover, .bk-grid > button, .bk-grid > article) .pic::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 18px; z-index: 2; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M0 10 C 35 0, 70 0, 100 8 S 165 18, 200 6 L 200 18 L 0 18 Z' fill='%23FFFCF6'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
html body #app main :is(article:has(> .pc-open), .pc, .cg3-card, .bk-card) { border-radius: 18px !important; background: #FFFCF6 !important; box-shadow: 0 12px 24px -20px rgba(58, 26, 9, .55) !important; overflow: hidden; }
/* v200 — the shared wavy card format: wave at the photo's edge + a faint flowing wave in the card body (category pages and search) */
html body #app main :is(.sr-item) .sr-img { position: relative; overflow: hidden; }
html body #app main .sr-item .sr-img::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 16px; z-index: 2; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M0 10 C 35 0, 70 0, 100 8 S 165 18, 200 6 L 200 18 L 0 18 Z' fill='%23FFFCF6'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
html body #app main :is(article:has(> .pc-open), .pc, .cg3-card, article:has(> .bk-cover), .sr-item) {
background: #FFFCF6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C 40 8, 80 8, 120 20 S 180 34, 200 18' fill='none' stroke='%23D9A04B' stroke-opacity='.22' stroke-width='1.4'/%3E%3Cpath d='M0 32 C 50 20, 90 22, 130 30 S 185 40, 200 28' fill='none' stroke='%239C5E1E' stroke-opacity='.12' stroke-width='1.2'/%3E%3C/svg%3E") bottom / 100% 40px no-repeat !important;
transition: transform .15s ease, box-shadow .15s ease; }
html body #app main :is(article:has(> .pc-open), .cg3-card, article:has(> .bk-cover), .sr-item):active { transform: scale(.985); }
/* v201 — Picked for You (expandable) and Dates to Remember */
.pk-list, .ev-list { display: grid; gap: 10px; margin: 0 0 8px; }
.pk-c { border-radius: 18px; background: #FFFCF6; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6); overflow: hidden; }
.pk-sum { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.pk-sum img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; } .pk-sum span { display: grid; min-width: 0; } .pk-sum b { font-size: .86rem; color: #3B1E0E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-sum small { font-size: .68rem; color: #9C5E1E; font-weight: 700; } .pk-sum i { font-style: normal; font-size: .8rem; font-weight: 800; color: #633018; } .pk-sum > svg { transition: transform .25s; transform: rotate(90deg); color: #9C5E1E; }
.pk-c.open .pk-sum > svg { transform: rotate(-90deg); } .pk-more { display: grid; gap: 6px; max-height: 0; padding: 0 14px; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }
.pk-c.open .pk-more { max-height: 260px; padding: 0 14px 14px; } .pk-more p { margin: 0; font-size: .78rem; color: #6B4A33; line-height: 1.45; } .pk-more small { font-size: .7rem; color: #806B5A; } .pk-more .btn { justify-self: start; border-radius: 999px; }
.ev-row { display: grid; grid-template-columns: 46px 60px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 18px; background: #FFFCF6; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6); font: inherit; text-align: left; cursor: pointer; }
.ev-date { display: grid; justify-items: center; padding: 6px 0; border-radius: 12px; background: #633018; color: #FFF8EE; } .ev-date b { font-size: 1rem; line-height: 1; } .ev-date small { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }
.ev-row img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; } .ev-tx { display: grid; min-width: 0; } .ev-tx b { font-size: .86rem; color: #3B1E0E; }
.ev-tx small { font-size: .7rem; color: #806B5A; } .ev-tx em { font-style: normal; font-size: .62rem; font-weight: 700; color: #9C5E1E; } .ev-row > svg { color: #9C5E1E; }
.ev-d img { width: 100%; height: 160px; object-fit: cover; border-radius: 16px; } .ev-cat { font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #B87932; } .ev-d h2 { margin: 2px 0; }
.ev-when { display: flex; gap: 6px; align-items: center; font-weight: 700; color: #633018; } .ev-note { padding: 8px 12px; border-radius: 12px; background: #FBEBC8; color: #7A4B12; font-size: .74rem; }
.ev-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; } .ev-acts .btn { justify-content: center; border-radius: 999px; }
.ev-rel { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 8px; padding: 6px; border: 0; border-radius: 14px; background: #F6EEE2; font: inherit; text-align: left; cursor: pointer; } .ev-rel img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.ev-head { margin-top: 18px; }
html body #app .ev-head { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; } .ev-head .see-all { flex: none; }
/* v203 — event cards, event page, stacked Picked for You, Cultural Places */
.ev-row { grid-template-columns: 52px 64px minmax(0, 1fr) auto !important; }
.ev-date { width: 52px; height: 56px; align-content: center; gap: 2px; border-radius: 14px !important; background: linear-gradient(160deg, #8F5326, #633018) !important; }
.ev-date small { font-size: .62rem !important; font-weight: 800; opacity: .9; padding-bottom: 2px; border-bottom: 1px solid rgba(255, 248, 238, .35); } .ev-date b { font-size: 1.15rem !important; }
.ev-row img { width: 64px !important; height: 64px !important; border-radius: 14px !important; }
.ev-tx small { display: flex; align-items: center; gap: 4px; } .ev-tx small svg { color: #C8892C; flex: none; } .ev-tx em { display: none; }
.evp-hero { position: relative; } .evp-hero img { width: 100%; height: 230px; object-fit: cover; display: block; } .evp-back { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; background: rgba(255, 252, 246, .92) !important; }
.evp-body { margin-top: -20px; position: relative; padding: 18px 16px calc(var(--tabbar, 88px) + 20px); border-radius: 22px 22px 0 0; background: var(--bg, #F8F1E8); }
.evp-body h1 { margin: 2px 0 8px; font-size: 1.35rem; color: #3B1E0E; } .evp-l { display: flex; gap: 6px; align-items: center; margin: 4px 0; font-weight: 700; color: #633018; } .evp-l svg { color: #C8892C; }
.evp-map { display: inline-flex; gap: 6px; align-items: center; margin: 4px 0 10px; font-weight: 800; color: #9C5E1E; }
.evp-rem { position: relative; display: grid; place-items: center; min-height: 44px; border-radius: 999px; background: #633018; color: #FFF8EE; font-weight: 800; font-size: .84rem; } .evp-rem select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pk-stack { position: relative; height: 196px; margin: 8px 6px 18px; }
.pk-card { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-columns: 45% 1fr; height: 168px; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #FFFCF6; box-shadow: 0 16px 30px -18px rgba(58, 26, 9, .6); font: inherit; text-align: left; cursor: pointer; transition: transform .4s cubic-bezier(.25,.8,.25,1), opacity .4s; }
.pk-card[data-k="0"] { z-index: 3; transform: none; } .pk-card[data-k="1"] { z-index: 2; transform: translate(-10px, -12px) scale(.94) rotate(-2deg); opacity: .9; } .pk-card[data-k="2"] { z-index: 1; transform: translate(-18px, -22px) scale(.88) rotate(-4deg); opacity: .75; }
.pk-card img { width: 100%; height: 100%; object-fit: cover; } .pk-info { display: grid; align-content: center; gap: 3px; padding: 12px; min-width: 0; } .pk-info b { font-size: .92rem; color: #3B1E0E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-info small { font-size: .68rem; color: #806B5A; } .pk-info i { font-style: normal; font-size: .9rem; font-weight: 800; color: #633018; } .pk-info em { font-style: normal; font-size: .66rem; color: #9C5E1E; }
.pk-next { position: absolute; right: 10px; bottom: 34px; z-index: 4; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #633018; color: #FFF8EE; cursor: pointer; }
.pk-dots { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 5px; } .pk-dots i { width: 6px; height: 6px; border-radius: 999px; background: #E2C79E; } .pk-dots i.on { width: 16px; background: #633018; }
.cpl { padding: 0 16px calc(var(--tabbar, 88px) + 20px); } .cpl-search { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #FFFDF8; border: 1px solid #EADCC8; color: #806B5A; }
.cpl-search input { flex: 1; min-width: 0; border: 0 !important; background: none !important; font: inherit; font-size: .86rem; padding: 0 !important; }
.cpl-ft { position: relative; display: block; width: 100%; height: 200px; margin: 14px 0 10px; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: pointer; text-align: left; }
.cpl-ft img { width: 100%; height: 100%; object-fit: cover; } .cpl-ft span { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: 40px 14px 12px; background: linear-gradient(180deg, transparent, rgba(30, 14, 6, .85)); color: #FFF8EE; }
.cpl-ft small { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #E9B85A; } .cpl-ft b { font-size: 1.15rem; } .cpl-ft em { font-style: normal; font-size: .72rem; opacity: .9; } .cpl-ft i { font-style: normal; display: inline-flex; align-items: center; font-size: .72rem; font-weight: 800; color: #E9B85A; }
.cpl-f { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; } .cpl-f::-webkit-scrollbar { display: none; }
.cpl-f button { flex: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: #F1E4D1; color: #633018; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; } .cpl-f button[aria-pressed="true"] { background: #633018; color: #FFF8EE; }
.cpl-h { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 8px; font-size: 1rem; color: #3B1E0E; } .cpl-h small { font-size: .72rem; color: #9A8471; }
.cpl-list { display: grid; gap: 2px; border-radius: 18px; background: #FFFCF6; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6); overflow: hidden; }
.cpl-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #F3E9DA; background: none; font: inherit; text-align: left; cursor: pointer; }
.cpl-row img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; } .cpl-row span { display: grid; min-width: 0; } .cpl-row b { font-size: .86rem; color: #3B1E0E; } .cpl-row small { font-size: .7rem; color: #806B5A; } .cpl-row em { font-style: normal; font-size: .66rem; font-weight: 700; color: #9C5E1E; } .cpl-row > svg { color: #9A8471; }
.cpl-empty { padding: 20px; text-align: center; color: #806B5A; }
/* v204 — Picked for You: flat auto-moving carousel; Featured Destinations: photo on top, info below */
.pf-rail { overflow-x: auto; scrollbar-width: none; margin: 4px -16px 6px; padding: 4px 16px 10px; touch-action: pan-x; cursor: grab; } .pf-rail::-webkit-scrollbar { display: none; }
.pf-track { display: flex; gap: 12px; width: max-content; }
.pf-card { flex: 0 0 148px; display: grid; gap: 2px; padding: 0 0 10px; border: 0; border-radius: 18px; overflow: hidden; background: #FFFCF6; box-shadow: 0 10px 22px -18px rgba(58, 26, 9, .6); font: inherit; text-align: left; cursor: pointer; user-select: none; }
.pf-img { display: block; aspect-ratio: 1 / 1; background: #F3E7D3; } .pf-img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pf-card b, .pf-card small, .pf-card i { padding: 0 10px; } .pf-card b { margin-top: 6px; font-size: .8rem; color: #3B1E0E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-card small { font-size: .68rem; color: #806B5A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-card i { font-style: normal; font-size: .82rem; font-weight: 800; color: #633018; }
html body #app .cf .fcard.cf-card { display: flex !important; flex-direction: column; height: 318px !important; padding: 0 !important; background: #FFFCF6 !important; border-radius: 18px !important; overflow: hidden; }
html body #app .cf .fcard.cf-card .f-media { position: relative !important; display: block; flex: none; width: 100% !important; aspect-ratio: 4 / 3; height: auto !important; margin: 0 !important; border-radius: 18px 18px 0 0 !important; overflow: hidden; }
html body #app .cf .fcard.cf-card .f-media :is(.pic, img) { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; }
html body #app .cf .fcard.cf-card .f-chip { position: absolute !important; top: 8px; left: 8px; z-index: 2; }
html body #app .cf .fcard.cf-card .f-body { position: static !important; display: grid !important; gap: 3px; padding: 10px 12px 0 !important; background: none !important; color: #3B1E0E !important; opacity: 1 !important; transform: none !important; text-align: left; }
html body #app .cf .fcard.cf-card .f-body strong { font-size: .95rem; color: #3B1E0E !important; } html body #app .cf .fcard.cf-card .f-body .meta { display: flex; gap: 4px; align-items: center; font-size: .72rem; color: #806B5A !important; }
html body #app .cf .fcard.cf-card .f-body .meta svg { color: #C8892C; } html body #app .cf .fcard.cf-card .f-go { display: none !important; }
html body #app .cf .fcard.cf-card .f-desc { font-size: .72rem; line-height: 1.4; color: #6B4A33; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body #app .cf .fcard.cf-card::after { content: "Explore Destination →"; margin: auto 12px 12px; font-size: .72rem; font-weight: 800; color: #9C5E1E; }
html body #app .cf .fcard.cf-card .f-chip { bottom: auto !important; right: auto !important; height: auto !important; width: auto !important; padding: 3px 9px !important; border-radius: 999px !important; background: rgba(255, 252, 246, .92) !important; color: #633018 !important; font-size: .62rem; font-weight: 800; display: inline-flex !important; align-items: center; gap: 4px; }
html body #app .cf:has(.fcard) { height: 350px !important; }
html body #app .cf .fcard.cf-card .f-ex { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; font-size: .72rem; font-weight: 800; color: #9C5E1E !important; }
html body #app .cf .fcard.cf-card::after { content: none !important; }
.tx-keep { margin-top: 0; margin-bottom: 0; } html body #app .tx-keep.tx-gap { margin-top: 24px !important; }
/* v206 — Everything on LOCARTA: three-column grid (Explore only) */
html body #app main .ev-head ~ .list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 9px; }
html body #app main .ev-head ~ .list > article.row { position: relative; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important; overflow: hidden; background: #FFFCF6 !important; box-shadow: 0 10px 20px -16px rgba(58, 26, 9, .6) !important; }
html body #app main .ev-head ~ .list .row-main { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; width: 100%; height: 100%; padding: 0 !important; border: 0; background: none; text-align: left; }
html body #app main .ev-head ~ .list .row-main > .pic { flex: none; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1.08; margin: 0 !important; border-radius: 0 !important; }
html body #app main .ev-head ~ .list .row-main > .pic img { width: 100%; height: 100%; object-fit: cover; }
html body #app main .ev-head ~ .list .row-main > span { display: grid !important; gap: 1px !important; padding: 6px 7px 9px; }
html body #app main .ev-head ~ .list .kind { font-size: .52rem !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #B87932 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #app main .ev-head ~ .list .row-main strong { font-size: .7rem !important; line-height: 1.25; min-height: 2.5em; color: #3B1E0E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body #app main .ev-head ~ .list .meta { font-size: .58rem !important; color: #806B5A !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; }
html body #app main .ev-head ~ .list :is(.rating, .price, .row-main b) { font-size: .64rem !important; font-weight: 800; color: #633018 !important; white-space: nowrap; }
html body #app main .ev-head ~ .list .heart { position: absolute !important; top: 6px; right: 6px; z-index: 2; display: grid; place-items: center; width: 28px !important; height: 28px !important; margin: 0 !important; border-radius: 50% !important; background: rgba(255, 252, 246, .92) !important; box-shadow: 0 2px 6px rgba(58, 26, 9, .2); }
html body #app main .ev-head ~ .list .heart svg { width: 14px; height: 14px; }
@media (min-width: 700px) { html body #app main .ev-head ~ .list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; } }
html body #app main .ev-head:has(.ev-kick) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-items: start; gap: 2px; }
/* v209 — Live & Video: one docked bottom card for live and video (same size), running video timer, dark-brown Upcoming */
.rl-slide .rl-bottom { padding-bottom: 0 !important; }
.rl-slide .rl-dock { display: flex; gap: 8px; margin: 10px -14px 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #FBF5EA; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .55); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.rl-slide .rl-dock::-webkit-scrollbar { display: none; }
.rl-slide .rl-dock-item { flex: 0 0 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; margin: 0; padding: 0; border: 0; background: none; color: var(--ink, #2B160B); text-align: left; font: inherit; cursor: pointer; scroll-snap-align: start; }
.rl-slide .rl-dock.is-multi .rl-dock-item { flex-basis: 94%; }
.rl-slide .rl-dock-th { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; }
.rl-slide .rl-dock-th img { width: 100%; height: 100%; object-fit: cover; }
.rl-slide .rl-dock-b { display: grid; gap: 1px; min-width: 0; }
.rl-slide .rl-dock-b > b { font-size: .86rem; font-weight: 800; line-height: 1.25; color: #2B160B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-slide .rl-dock-price { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.rl-slide .rl-dock-price em { font-style: normal; font-size: 1.05rem; font-weight: 800; color: #6B3418; }
.rl-slide .rl-dock-price small { font-size: .66rem; color: #8A6A52; white-space: nowrap; }
.rl-slide .rl-dock-meta { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: .66rem; color: #7A5A44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-slide .rl-dock-meta svg { flex-shrink: 0; color: #8A3A12; }
.rl-slide .rl-dock-cta { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 92px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: #6B3418; color: #FFF8EE; font: inherit; font-size: .8rem; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 16px -10px rgba(58, 26, 9, .8); cursor: pointer; }
.rl-slide .rl-dock-item:active .rl-dock-cta, .rl-slide .rl-dock-cta:active { transform: scale(.97); }
@media (max-width: 360px) { .rl-slide .rl-dock-item { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 9px; } .rl-slide .rl-dock-th { width: 48px; height: 48px; } .rl-slide .rl-dock-cta { min-width: 0; padding: 0 12px; } .rl-slide .rl-dock-cta svg { display: none; } }
/* video play row: button, progress bar and a running time on one line */
.rl-slide .rl-play { display: flex; align-items: center; gap: 10px; }
.rl-slide .rl-pp { flex-shrink: 0; width: 34px; height: 34px; background: rgba(43, 22, 11, .55); }
.rl-slide .rl-play .rlt { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; }
.rl-slide .rl-play .rlt-bar { flex: 1; height: 4px; }
.rl-slide .rl-play .rlt-bar span { transition: width 1s linear; }
.rl-slide .rlt-time { display: inline-flex; align-items: baseline; gap: 4px; margin: 0 !important; font-size: .7rem !important; color: rgba(255, 248, 238, .85) !important; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.rl-slide .rlt-time b { color: #FFF8EE; font-weight: 800; }
.rl-slide .rlt-time i { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 248, 238, .18); font-style: normal; font-size: .58rem; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .rl-slide .rl-play .rlt-bar span { transition: none; } }
/* Upcoming: dark brown, organised cards */
.rl.rl-t-upcoming { background: radial-gradient(120% 70% at 50% 0%, #4A2512, #24110A 72%) !important; color: #FFF6E6; }
.rl-t-upcoming .rl-list { padding: calc(78px + env(safe-area-inset-top, 0px)) 16px calc(28px + env(safe-area-inset-bottom, 0px)) !important; gap: 0 !important; }
.rl-t-upcoming .up-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 0 4px; }
.rl-t-upcoming .up-head h2 { font-size: 1.25rem; color: #FFF6E6; }
.rl-t-upcoming .up-head small { padding: 3px 10px; border-radius: 999px; background: rgba(232, 201, 135, .14); color: #E8C987; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.rl-t-upcoming .up-g { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; color: #E8C987; }
.rl-t-upcoming .up-g::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(232, 201, 135, .45), transparent); }
.rl-t-upcoming .up-card { grid-template-columns: 84px minmax(0, 1fr) !important; grid-template-rows: auto auto; gap: 12px 12px !important; align-items: center !important; margin-bottom: 12px !important; padding: 12px !important; border-radius: 18px !important; background: linear-gradient(160deg, #3D1F10, #2E170B) !important; border: 1px solid rgba(232, 201, 135, .22) !important; box-shadow: 0 14px 28px -20px rgba(0, 0, 0, .9) !important; color: #FFF6E6 !important; }
.rl-t-upcoming .up-card .rl-li-img { width: 84px !important; height: 84px !important; grid-row: auto !important; }
.rl-t-upcoming .up-card .rl-li-main { display: grid; gap: 3px; }
.rl-t-upcoming .up-card .rl-li-main b { color: #FFF6E6 !important; font-size: .92rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rl-t-upcoming .up-card .rl-li-main small { color: rgba(255, 246, 230, .66) !important; font-size: .72rem !important; opacity: 1; }
.rl-t-upcoming .up-card .up-when { justify-self: start; padding: 3px 9px; border-radius: 999px; background: rgba(232, 201, 135, .14); color: #E8C987 !important; font-size: .7rem !important; }
.rl-t-upcoming .up-card .up-acts { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid rgba(232, 201, 135, .14); }
.rl-t-upcoming .up-acts > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; }
.rl-t-upcoming .up-acts [data-act=rl-remind] { background: #E8C987 !important; color: #3B1E0E !important; }
.rl-t-upcoming .up-acts [data-act=rl-remind][aria-pressed="true"] { background: rgba(232, 201, 135, .16) !important; color: #E8C987 !important; box-shadow: inset 0 0 0 1px rgba(232, 201, 135, .5); }
.rl-t-upcoming .up-acts .up-view { background: transparent !important; color: #FFF6E6 !important; border: 1px solid rgba(255, 246, 230, .4) !important; }
.rl-t-upcoming .rl-note { margin-top: 4px; color: rgba(255, 246, 230, .55); text-align: center; }
.rl-t-upcoming .up-empty { color: rgba(255, 246, 230, .7); } .rl-t-upcoming .up-empty b { color: #FFF6E6; } .rl-t-upcoming .up-empty svg { color: #E8C987; }
/* v210 — Explore: the last "Show more" button sits centred under the grid, on its own row */
html body #app .list > button.ex-more { grid-column: 1 / -1 !important; justify-self: center !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; width: auto !important; min-width: 200px; max-width: 100%; min-height: 44px; margin: 10px auto 4px !important; padding: 0 22px !important; border-radius: 999px !important; white-space: nowrap; text-align: center; }
/* =========================================================
LOCARTA premium mobile refinement — community hero + soft square tab
Keeps the established ivory / cocoa / warm-gold palette.
========================================================= */
@media (max-width: 767px) {
/* Community header artwork: let the artisan and loom read clearly. */
html body #app .sxc-hero {
position: relative !important;
height: 202px !important;
margin-top: 13px !important;
border: 1px solid rgba(133, 91, 55, .13) !important;
border-radius: 22px !important;
overflow: hidden !important;
background: #EAD8BF !important;
box-shadow: 0 10px 24px -18px rgba(61, 35, 18, .42), 0 2px 5px rgba(61, 35, 18, .06) !important;
isolation: isolate !important;
}
html body #app .sxc-hero > .pic {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
html body #app .sxc-hero > .pic img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 58% 50% !important;
display: block !important;
}
html body #app .sxc-hero .r3-paper {
background: linear-gradient(90deg, rgba(255, 248, 237, .96) 0%, rgba(255, 248, 237, .88) 34%, rgba(255, 248, 237, .24) 65%, rgba(255, 248, 237, 0) 100%) !important;
opacity: 1 !important;
}
html body #app .sxc-copy {
left: 16px !important;
top: 16px !important;
width: 57% !important;
}
html body #app .sxc-copy h1 {
color: #4B2818 !important;
font-size: clamp(1.16rem, 5vw, 1.36rem) !important;
line-height: 1.12 !important;
letter-spacing: -.025em !important;
}
html body #app .sxc-copy p:last-child {
color: #6D5542 !important;
font-size: .72rem !important;
line-height: 1.38 !important;
max-width: 245px !important;
}
html body #app .sxc-copy .r3-kicker {
display: inline-flex !important;
align-items: center !important;
min-height: 24px !important;
padding: 4px 10px !important;
border: 1px solid rgba(139, 95, 54, .12) !important;
border-radius: 999px !important;
background: rgba(247, 231, 204, .94) !important;
color: #714126 !important;
font-size: .61rem !important;
font-weight: 800 !important;
letter-spacing: .13em !important;
text-transform: uppercase !important;
}
html body #app .sxc-create {
left: 16px !important;
right: auto !important;
bottom: 12px !important;
height: 37px !important;
padding: 0 14px !important;
border: 1px solid rgba(255, 250, 242, .7) !important;
border-radius: 13px !important;
background: #754326 !important;
color: #FFF8EE !important;
box-shadow: 0 5px 12px -8px rgba(53, 28, 14, .65) !important;
font-size: .75rem !important;
font-weight: 750 !important;
transition: transform .24s ease, background-color .24s ease, box-shadow .24s ease !important;
}
html body #app .sxc-create:active { transform: scale(.97) !important; }
/* Shared surfaces: quieter borders, softer elevation, consistent corners. */
html body #app .story,
html body #app .story-card,
html body #app .sx-card,
html body #app .lmr-it,
html body #app .sxc-coll {
-webkit-tap-highlight-color: transparent;
}
html body #app .sec-head h2 {
letter-spacing: -.018em;
}
/* Bottom navigation: active destination becomes a compact rounded square. */
html body .tabbar {
height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
align-items: center !important;
gap: 2px !important;
background: rgba(255, 250, 241, .98) !important;
border: 1px solid rgba(132, 91, 55, .12) !important;
border-bottom: 0 !important;
border-radius: 22px 22px 0 0 !important;
box-shadow: 0 -7px 22px -17px rgba(58, 35, 20, .35) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
html body .tabbar .tb-orb { display: none !important; }
html body .tabbar > button.tb-btn {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
justify-self: center !important;
gap: 2px !important;
width: min(100%, 68px) !important;
min-width: 0 !important;
height: 58px !important;
padding: 4px 2px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 15px !important;
background: transparent !important;
color: #8B7969 !important;
box-shadow: none !important;
transform: none !important;
transition: background-color .32s ease, color .32s ease, box-shadow .32s ease, transform .32s ease !important;
-webkit-tap-highlight-color: transparent !important;
}
html body .tabbar > button.tb-btn .tb-ico {
display: grid !important;
place-items: center !important;
width: 27px !important;
height: 25px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: currentColor !important;
transform: none !important;
transition: color .32s ease, transform .32s ease !important;
}
html body .tabbar > button.tb-btn .tb-ico .ic {
width: 21px !important;
height: 21px !important;
fill: none !important;
stroke: currentColor !important;
transition: color .32s ease, transform .32s ease !important;
}
html body .tabbar > button.tb-btn .tb-label {
display: block !important;
margin: 0 !important;
color: currentColor !important;
font-size: .61rem !important;
line-height: 1.05 !important;
font-weight: 650 !important;
white-space: nowrap !important;
transform: none !important;
transition: color .32s ease, opacity .32s ease !important;
}
html body .tabbar > button.tb-btn[aria-current="page"] {
background: linear-gradient(145deg, #7D492A 0%, #63351F 100%) !important;
color: #FFF5E5 !important;
box-shadow: 0 5px 12px -7px rgba(63, 34, 18, .7), inset 0 1px 0 rgba(255,255,255,.16) !important;
transform: translateY(-1px) !important;
}
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico,
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico .ic {
color: #F8E3B9 !important;
stroke: #F8E3B9 !important;
transform: none !important;
}
html body .tabbar > button.tb-btn[aria-current="page"] .tb-label {
color: #FFF5E5 !important;
font-weight: 800 !important;
}
html body .tabbar > button.tb-btn .tb-badge {
top: 1px !important;
right: 5px !important;
transform: none !important;
}
html body .tabbar > button.tb-btn.pop,
html body .tabbar > button.tb-btn.pop .tb-ico,
html body .tabbar > button.tb-btn.pop .tb-label {
animation: none !important;
}
html body .tabbar > button.tb-btn:active {
transform: scale(.97) !important;
}
html body .tabbar > button.tb-btn:focus-visible {
outline: 2px solid #B88A54 !important;
outline-offset: 2px !important;
}
}
@media (prefers-reduced-motion: reduce) {
html body .tabbar > button.tb-btn,
html body #app .sxc-create {
transition: none !important;
}
}
/* =========================================================
LOCARTA V213 — refined onboarding and authentication UI
Retains the original LOCARTA brown / burgundy / champagne palette.
========================================================= */
/* Loka Moments panel retained from the previous approved Community update. */
#app .comm.sxc .lm-panel {
display: block;
width: 100%;
margin: 14px 0 18px;
padding: 12px 12px 10px;
border-radius: 18px;
background: #F3EEDF;
box-sizing: border-box;
overflow: hidden;
}
#app .comm.sxc .lm-panel .lm-head {
margin: 0 0 10px !important;
padding: 0;
align-items: center !important;
}
#app .comm.sxc .lm-panel .lmr { margin: 0; padding: 2px 0 !important; background: transparent; }
/* Restore the previous active navigation treatment: deep LOCARTA brown,
cream icon/label, neutral inactive items. */
html body .tabbar > button.tb-btn[aria-current="page"] {
background: linear-gradient(145deg, #7D492A 0%, #63351F 100%) !important;
color: #FFF5E5 !important;
box-shadow: 0 5px 12px -7px rgba(63,34,18,.7), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico,
html body .tabbar > button.tb-btn[aria-current="page"] .tb-ico .ic {
color: #F8E3B9 !important;
stroke: #F8E3B9 !important;
}
html body .tabbar > button.tb-btn[aria-current="page"] .tb-label {
color: #FFF5E5 !important;
font-weight: 800 !important;
}
/* Welcome / intro */
.wl2 { background: #FAF3E6; }
.wl2-grid { row-gap: 2px; }
.wl2-brand { width: min(68%, 390px); }
.wl2-brand-tagline {
margin: 8px 0 0;
color: #74371A;
font-size: clamp(.95rem, 3.8vw, 1.12rem);
font-weight: 800;
letter-spacing: -.02em;
}
.wl2-tag { max-width: 32ch; line-height: 1.5; }
.wl2-motto { color: #8A5A14; }
.wl2-fi { box-shadow: 0 5px 14px -12px rgba(58,26,9,.55); }
.wl2-actions .sp-btn {
min-height: 50px;
border-radius: 16px;
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.wl2-primary {
background: #74371A !important;
color: #FFF8EE !important;
box-shadow: 0 9px 20px -14px rgba(90,40,16,.72);
}
.wl2-primary:active { transform: translateY(1px) scale(.99); }
.wl2-secondary {
background: #FFFCF6 !important;
border: 1px solid #D7B48C !important;
color: #5A2810 !important;
}
/* Onboarding photo slides */
.onb { background: #FAF6EF; }
.onb-media {
box-shadow: 0 12px 28px -20px rgba(42,26,18,.42);
}
.onb-text { padding-inline: clamp(20px, 6vw, 30px); }
.onb-badge {
border: 1px solid rgba(200,149,71,.2);
box-shadow: 0 10px 24px -16px rgba(42,26,18,.42), 0 0 0 5px rgba(255,252,246,.72);
}
.onb-text h2 { letter-spacing: -.025em; }
.onb-copy { max-width: 36ch; }
.onb-foot {
padding-top: 12px;
gap: 12px;
}
.onb-next {
min-height: 50px;
border-radius: 16px;
background: #74371A;
color: #FFF8EE;
box-shadow: 0 9px 20px -13px rgba(90,40,16,.68);
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.onb-next:active { transform: translateY(1px) scale(.99); }
.onb-back {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 72px;
min-height: 44px;
padding: 0 12px;
border: 1px solid #E2D2BC;
border-radius: 14px;
background: #FFFCF6;
color: #5A2810;
font: inherit;
font-size: .78rem;
font-weight: 700;
}
.onb-back[hidden] { display: none !important; }
.onb-foot { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; }
.onb-progress { justify-self: center; }
.onb-next { justify-self: end; min-width: 112px; }
.onb .skip {
background: rgba(90,40,16,.86);
color: #FFF8EE;
border: 1px solid rgba(255,248,238,.22);
border-radius: 999px;
}
/* Account type selection */
.ch-page { background: #FAF3E6; }
.ch-in { gap: 12px; padding-inline: 4px; }
.ch-in h1 { letter-spacing: -.025em; }
.ch-cards { gap: 12px; margin-top: 14px; }
.ch-card {
min-height: 100px;
padding: 15px 16px;
border: 1px solid #E6D8C5;
border-radius: 20px;
background: #FFFCF7;
box-shadow: 0 8px 20px -17px rgba(58,26,9,.58);
transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ch-card:hover, .ch-card.on {
border-color: #8A4A1C;
background: #F8EBDD;
box-shadow: 0 10px 22px -16px rgba(90,40,16,.48);
}
.ch-card:active { transform: scale(.99); }
.ch-card b { letter-spacing: -.01em; }
.ch-card small { line-height: 1.45; }
/* Login / Sign-up */
.auth-page { background: #FAF3E6; }
.auth-scroll { padding: 22px clamp(18px, 5vw, 28px) 30px; }
.auth-brand { margin-bottom: 4px; }
.auth-brand p { max-width: 32ch; }
.auth-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
border: 1px solid #E6D8C5;
border-radius: 14px;
background: #F4E9DA;
}
.auth-tabs button {
min-height: 44px;
border: 0;
border-radius: 11px;
transition: background-color .2s ease, color .2s ease;
}
.auth-tabs button[aria-selected="true"] {
background: #74371A;
color: #FFF8EE;
box-shadow: 0 4px 12px -9px rgba(90,40,16,.7);
}
.auth-roles { gap: 10px; }
.arole-card {
border-radius: 16px;
background: #FFFCF7;
transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.arole input:checked + .arole-card {
border-color: #8A4A1C;
background: #F6E9DA;
box-shadow: 0 8px 18px -14px rgba(138,74,28,.55);
}
.af { gap: 7px; margin-top: 13px; }
.af-label { font-size: .82rem; }
.af-box {
min-height: 50px;
border-radius: 13px;
border-color: #E2D2BC;
background: #FFFCF7;
transition: border-color .2s ease, box-shadow .2s ease;
}
.af-box:focus-within {
border-color: #A8693A;
box-shadow: 0 0 0 3px rgba(168,105,58,.12);
}
.auth-submit {
min-height: 50px;
border-radius: 16px;
background: #74371A;
color: #FFF8EE;
box-shadow: 0 9px 20px -13px rgba(90,40,16,.68);
transition: transform .2s ease, box-shadow .2s ease;
}
.auth-submit:active { transform: translateY(1px) scale(.99); }
.auth-switch .link, .auth-demo .link, .auth-forgot { color: #74371A; }
/* Loka guided questions: more readable option cards, softer selection, less visual weight. */
.ob.wz { background: #FAF3E6; }
.ob.wz .wz-scroll { scrollbar-width: thin; }
.ob.wz .wz-ask > div, .ob.wz .wz-card {
background: #FFFCF7;
border-color: #EADCC8;
border-radius: 16px;
box-shadow: 0 8px 18px -17px rgba(58,26,9,.5);
}
.ob.wz .wz-opt {
min-height: 48px;
border: 1px solid #E2D2BC;
border-radius: 14px;
background: #FFFCF7;
transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ob.wz .wz-opt:active { transform: scale(.99); }
.ob.wz .wz-opt.on {
border-color: #8A4A1C;
background: #F4E6D4;
color: #4A2414;
box-shadow: inset 0 0 0 1px rgba(138,74,28,.06), 0 6px 14px -13px rgba(58,26,9,.55);
}
.ob.wz .wz-opt.on .wz-check {
background: #74371A;
border-color: #74371A;
color: #FFF8EE;
}
.ob.wz .wz-opt.on .wz-ic {
background: #EBD8BE;
color: #74371A;
}
.ob.wz .wz-next, .ob.wz .wz-home {
background: #74371A;
color: #FFF8EE;
border-radius: 16px;
box-shadow: 0 9px 20px -13px rgba(90,40,16,.68);
}
.ob.wz .wz-chip, .ob.wz .ob-chip {
border-color: #E2D2BC;
background: #FFFCF7;
color: #5A2810;
}
.ob.wz .wz-chip[aria-pressed="true"], .ob.wz .ob-chip[aria-pressed="true"] {
border-color: #8A4A1C;
background: #F4E6D4;
color: #4A2414;
}
.ob.wz .wz-skip { color: #74371A; }
.ob.wz .wz-dots i.on, .ob.wz .wz-dots i.done { background: #8A4A1C; }
/* Responsive comfort and accessibility */
@media (max-width: 360px) {
.auth-scroll { padding-inline: 16px; }
.onb-text { padding-inline: 18px; }
.onb-foot { padding-inline: 14px; }
.onb-back { min-width: 62px; }
.onb-next { min-width: 98px; padding-inline: 18px; }
}
@media (max-height: 700px) {
.wl2-brand { padding-top: 16px; }
.onb-foot { padding-bottom: calc(12px + var(--safe-bottom)); }
.auth-scroll { padding-top: 14px; padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.wl2-actions .sp-btn, .onb-next, .ch-card, .auth-submit,
.auth-tabs button, .ob.wz .wz-opt { transition: none !important; }
}
/* =========================================================
LOCARTA v214 — Loka second-page questionnaire + community mascot
========================================================= */
/* Community: clean white/off-white Loka Moments panel with the mascot beside its title. */
#app .comm.sxc .lm-panel {
background: #FFFCF7 !important;
border-radius: 16px !important;
margin: 12px 0 16px !important;
padding: 12px 12px 10px !important;
}
#app .comm.sxc .lm-panel .lm-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
margin: 0 0 10px !important;
}
#app .comm.sxc .lm-head-main {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
}
#app .comm.sxc .lm-head-main b {
font-size: .98rem;
line-height: 1.2;
color: #633018;
white-space: nowrap;
}
#app .comm.sxc .lm-head-mascot {
display: block;
flex: 0 0 auto;
width: 34px;
height: 34px;
object-fit: contain;
object-position: center;
}
#app .comm.sxc .lm-panel .lmr {
margin: 0;
padding: 2px 0 4px !important;
}
/* Loka's preferences: one organized, scrollable second page after the welcome. */
.ob.wz.lw .wz-scroll { overscroll-behavior: contain; }
.ob.wz.lw .wz-pad:not(.wz-hello-in) {
width: 100%;
max-width: 620px;
margin: 0 auto;
padding: 8px clamp(16px, 4vw, 24px) 18px;
}
.ob.wz.lw .lw-progress { margin: 2px 0 5px; }
.ob.wz.lw .lw-talk { margin-bottom: 8px; }
.ob.wz.lw .lw-loka-art { width: 46px !important; }
.ob.wz.lw .lw-bubble b { font-size: clamp(1rem, 4vw, 1.14rem); }
.ob.wz.lw .lw-question-hint {
margin: 0 0 12px;
text-align: center;
color: #806B5A;
font-size: .74rem;
line-height: 1.4;
}
.ob.wz.lw .lw-group {
margin: 0 0 12px;
padding: 10px;
border: 1px solid #EADCC8;
border-radius: 16px;
background: rgba(243, 232, 214, .62);
}
.ob.wz.lw .lw-group h2 {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
color: #4A2414;
font-size: .82rem;
line-height: 1.25;
font-weight: 800;
}
.ob.wz.lw .lw-group-ic {
display: inline-grid;
place-items: center;
flex: 0 0 27px;
width: 27px;
height: 27px;
border-radius: 9px;
background: #EAD6B8;
color: #74371A;
}
.ob.wz.lw .lw-chips {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
.ob.wz.lw .lw-chips .ob-chip {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
width: 100%;
min-width: 0;
min-height: 42px;
padding: 8px 10px;
border: 1px solid #E2D2BC;
border-radius: 11px !important;
background: #FFFCF7;
color: #5A3B28;
text-align: left;
font-size: .72rem;
font-weight: 650;
line-height: 1.25;
white-space: normal;
}
.ob.wz.lw .lw-chips .ob-chip span {
min-width: 0;
overflow-wrap: anywhere;
}
.ob.wz.lw .lw-chips .ob-chip[aria-pressed="true"] {
background: #74371A !important;
border-color: #74371A !important;
color: #FFF6E6 !important;
box-shadow: 0 5px 12px -10px rgba(58,26,9,.75);
}
.ob.wz.lw .lw-chips .ob-chip[aria-pressed="true"] .ic {
flex: 0 0 auto;
color: #F4D9A8;
}
.ob.wz.lw .lw-foot {
flex-shrink: 0;
padding: 8px 18px calc(9px + env(safe-area-inset-bottom, 0px));
gap: 5px;
background: linear-gradient(180deg, rgba(250,243,230,0), #FAF3E6 28%);
}
.ob.wz.lw .lw-cta.wz-next {
width: min(100%, 340px) !important;
max-width: 340px;
height: 48px !important;
min-height: 48px;
border-radius: 14px !important;
background: #74371A !important;
color: #FFF6E6 !important;
}
.ob.wz.lw .lw-foot .wz-skip {
padding: 2px 8px;
font-size: .74rem;
}
@media (max-width: 360px) {
.ob.wz.lw .wz-pad:not(.wz-hello-in) { padding-inline: 12px; }
.ob.wz.lw .lw-group { padding: 8px; margin-bottom: 9px; }
.ob.wz.lw .lw-chips { gap: 6px; }
.ob.wz.lw .lw-chips .ob-chip { padding: 7px 8px; font-size: .68rem; }
}
@media (min-width: 700px) {
.ob.wz.lw .wz-pad:not(.wz-hello-in) { padding-top: 18px; padding-bottom: 24px; }
.ob.wz.lw .lw-group { padding: 14px; margin-bottom: 14px; }
.ob.wz.lw .lw-chips { gap: 10px; }
.ob.wz.lw .lw-chips .ob-chip { min-height: 48px; font-size: .82rem; }
}
/* First launch/splash: clearer brand lockup and a calmer reveal. */
.launch {
background: radial-gradient(circle at 50% 42%, #FFFDF7 0%, #FAF3E6 58%, #EEDFCB 100%);
}
.launch-in { gap: 3px; margin-top: -28px; }
.l-stage { width: 184px; height: 184px; }
.l-mark { height: 126px; filter: drop-shadow(0 10px 15px rgba(90,40,16,.12)); }
.l-word { height: 39px; margin-top: 12px; }
.l-tag { max-width: 30ch; color: #806B5A; letter-spacing: .015em; }
.l-bar { width: 148px; margin-left: -74px; height: 4px; background: #E8DCCB; }
.l-bar span { background: linear-gradient(90deg, #C8892C, #74371A); }
.l-weave-top, .l-weave-bottom { opacity: .94; }
@media (max-height: 700px) {
.launch-in { margin-top: -12px; }
.l-stage { width: 156px; height: 156px; }
.l-mark { height: 108px; }
}
@media (prefers-reduced-motion: reduce) {
.l-mark, .l-swing, .l-ring, .l-word, .l-tag, .l-bar span, .l-weave { animation: none !important; }
}
/* v215 — onboarding footer always fits: progress dots shrink, the last button never overflows */
.onb-foot { gap: 10px !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; max-width: 100%; }
.onb-foot .onb-progress { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
.onb-foot .onb-next { flex: none !important; white-space: nowrap; padding-left: 18px !important; padding-right: 18px !important; }
.onb-foot .onb-back { flex: none !important; }
.onb-foot .onb-progress { margin: 0 8px !important; max-width: 90px; justify-content: center; }
.onb-foot .onb-progress { flex: 1 1 0 !important; min-width: 24px !important; max-width: 90px; display: flex !important; gap: 4px; } .onb-foot .onb-progress > * { flex: 1 1 0 !important; min-width: 6px !important; width: auto !important; }
@media (max-width: 360px) { .onb-foot { gap: 6px !important; padding-left: 12px !important; padding-right: 12px !important; } .onb-foot .onb-next { padding-left: 14px !important; padding-right: 14px !important; } .onb-foot .onb-back { padding-left: 10px !important; padding-right: 10px !important; } .onb-foot .onb-progress { margin: 0 4px !important; } }
/* v217 — Loka onboarding in a stepped format: header, progress bar with Loka's face, Back + Continue */
.lw-top { display: grid !important; gap: 12px; padding: 10px 16px 6px !important; }
.lwh { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; } .lwh b { text-align: center; font-size: 1rem; color: #3B1E0E; } .lwh-sp { width: 40px; }
.lwh .icon-btn { width: 36px; height: 36px; font-weight: 800; color: #633018; }
.lwp { position: relative; display: flex; justify-content: space-between; align-items: center; height: 34px; margin: 0 4px; }
.lwp-line { position: absolute; left: 14px; right: 14px; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 3px; background: #E8DCCB; }
.lwp-line i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #C8892C, #633018); transition: width .45s ease; }
.lwp-n { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #F8F1E8; border: 1.5px solid #E2D2BC; color: #9A8471; font-size: .7rem; font-weight: 800; }
.lwp-n.done { border-color: #C8892C; background: #FFF6E6; } .lwp-n.on { width: 34px; height: 34px; border: 2px solid #C8892C; background: #FFF6E6; box-shadow: 0 0 0 4px rgba(200, 137, 44, .18); }
.lwp-n .lwp-face, .lwp-n img, .lwp-n svg { width: 82%; height: 82%; object-fit: contain; }
.lw-btns { display: grid; grid-template-columns: auto 1fr; gap: 10px; } .lw-btns:has(> :only-child) { grid-template-columns: 1fr; }
.lw-backbtn { min-height: 48px; padding: 0 22px !important; border-radius: 999px !important; border: 1.5px solid #D9C4A6 !important; background: #FFFDF8 !important; color: #633018 !important; }
.lw-btns .lw-cta { border-radius: 999px !important; justify-content: center; }
/* v217 — header row above a full-width progress bar; Back + Continue fill the footer */
html body .lw .wz-top.lw-top { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 14px !important; height: auto !important; padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 8px !important; position: relative; }
html body .lw .lw-top > * { position: static !important; transform: none !important; margin: 0 !important; width: auto !important; }
html body .lw .lwh { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 40px !important; align-items: center; position: relative; z-index: 2; }
html body .lw .lwh b { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .lw .lwp { width: 100% !important; position: relative !important; z-index: 1; }
html body .lw .lwp-line, html body .lw .lwp-line i { pointer-events: none; }
html body .lw .lw-foot { display: grid !important; gap: 8px; padding-left: 18px !important; padding-right: 18px !important; }
html body .lw .lw-btns { width: 100%; } html body .lw .lw-btns .lw-cta { width: 100% !important; min-height: 48px; }
html body .lw .wz-foot .lw-btns > .btn.wz-next.lw-cta, html body .lw .wz-foot .lw-btns > .btn.lw-backbtn { max-width: none !important; justify-self: stretch !important; flex: 1 1 auto !important; } html body .lw .wz-foot .lw-btns > .btn.wz-next.lw-cta { width: 100% !important; min-width: 0 !important; } html body .lw .wz-foot { align-items: stretch !important; justify-items: stretch !important; } html body .lw .wz-foot .wz-skip { justify-self: center; }
html body .lw .wz-foot.lw-foot { width: 100% !important; box-sizing: border-box; } html body .lw .wz-foot.lw-foot > .lw-btns { width: 100% !important; justify-self: stretch !important; align-self: stretch !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; } html body .lw .wz-foot.lw-foot > .lw-btns:has(> :only-child) { grid-template-columns: minmax(0, 1fr) !important; }
html body .lw .wz-foot.lw-foot { grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; }
/* =========================================================
Community banner — no side margins (edge to edge), phone app.
The text block is kept clear of the Share a Moment button.
========================================================= */
@media (max-width: 767px) {
html body #app .comm.sxc > .sxc-hero {
margin-left: calc(-1 * var(--cm-pad, 18px)) !important;
margin-right: calc(-1 * var(--cm-pad, 18px)) !important;
width: auto !important; max-width: none !important;
height: 238px !important;
border-left: 0 !important; border-right: 0 !important;
border-radius: 0 !important;
}
html body #app .comm.sxc > .sxc-hero > .pic, html body #app .comm.sxc > .sxc-hero > .pic img { border-radius: 0 !important; }
html body #app .comm.sxc > .sxc-hero .sxc-copy { left: 18px !important; width: 60% !important; max-width: 250px !important; }
html body #app .comm.sxc > .sxc-hero .sxc-copy p:last-child {
display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important; overflow: hidden !important;
max-width: none !important; width: 100% !important;
}
html body #app .comm.sxc > .sxc-hero .sxc-create { left: 18px !important; bottom: 14px !important; }
}