/* Kampoeng Semanggi: warm cream paper, deep semanggi green and peanut-sauce brown, big serif headlines,
   soft rounded cards. Shared by the homepage, the seller desk and the admin desk. */
:root {
  color-scheme: light;
  --paper: #f9f8f3;        /* page background */
  --surface: #fffdf8;      /* cards, catalog band */
  --band: #f1f1e8;         /* top strip */
  --ink: #2d3026;
  --heading: #2f412f;
  --muted: #6c7164;
  --line: #e8e5d8;
  --line-strong: #d8d7ca;
  --leaf: #315b3a;         /* semanggi green */
  --leaf-soft: #e4eadc;
  --leaf-ink: #47704c;
  --sauce: #a06c3e;        /* peanut & sweet-potato sauce */
  --sauce-soft: #f4e8da;
  --on-leaf: #ffffff;
  --footer: #304b35;
  --on-footer: #e9eddf;
  --ok: #315b3a;
  --bad: #a3322a;
  --bad-soft: #f6e0dc;
  --shadow: 0 22px 50px rgb(64 69 45 / .13);
  --shadow-sm: 0 8px 20px rgb(49 91 58 / .14);
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.3rem;
  --step-2: clamp(2rem, 4.5vw, 3rem);
  --step-3: clamp(3rem, 7vw, 6.4rem);
  --radius: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --gutter: clamp(16px, 4vw, 48px);
}

/* Follows the phone or computer: light by default, the dark palette when the device is set to dark mode. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #151813; --surface: #1c2019; --band: #1a1d17; --ink: #e6e9dd; --heading: #eef1e6; --muted: #a3aa99;
    --line: #2c3227; --line-strong: #3a4134;
    --leaf: #8cc08a; --leaf-soft: #22301f; --leaf-ink: #a6d3a2; --sauce: #e0a86f; --sauce-soft: #352819; --on-leaf: #0f1a10;
    --footer: #1f2e21; --on-footer: #dfe6d6; --ok: #8cc08a; --bad: #ee8a80; --bad-soft: #3b201d;
    --shadow: 0 22px 50px rgb(0 0 0 / .35); --shadow-sm: 0 8px 20px rgb(0 0 0 / .3);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--step-0)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--heading); text-wrap: balance; margin: 0; }
h2 { font-size: var(--step-2); letter-spacing: -0.035em; }
h3 { font-size: var(--step-1); }
h1 em, h2 em { color: var(--sauce); }
p { margin: 0; }
a { color: var(--leaf); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sauce); outline-offset: 2px; }
.eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sauce); }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }

/* top strip & header */
.strip { background: var(--band); border-bottom: 1px solid var(--line); text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--muted); padding: 8px var(--gutter); }
.strip .dot { color: var(--sauce); margin-inline: 8px; }
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; }
.top.scrolled, .desk-page .top { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding-block: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--heading); }
.brand img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 50%; padding: 3px; box-shadow: 0 0 0 1px var(--line); }
.brand b { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.03em; }
.brand b span { color: var(--sauce); }
.brand .role { font-size: 11px; font-weight: 700; color: var(--sauce); letter-spacing: .12em; text-transform: uppercase; }
.top nav { display: flex; gap: 10px 26px; font-size: .875rem; font-weight: 500; align-items: center; flex-wrap: wrap; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover, .top nav a.current { color: var(--leaf); }
.top nav .actions { display: flex; align-items: center; gap: 10px; }
/* main tabs: Katalog, Lokasi lapak, Cerita kami. A row of tabs on wide screens, a dropdown on phones. */
.tabs-main { display: flex; gap: 4px; }
.top nav .tabs-main a { padding: 8px 14px; border-radius: 999px; transition: background-color .15s, color .15s; }
.top nav .tabs-main a:hover { background: var(--leaf-soft); }
.top nav .tabs-main a.current { background: var(--leaf-soft); color: var(--leaf); font-weight: 600; }
.navdrop { position: relative; }
.navdrop summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px 8px 14px; border-radius: 999px; color: var(--muted); transition: background-color .15s, color .15s; }
.navdrop summary::-webkit-details-marker { display: none; }
.navdrop summary:hover, .navdrop[open] summary { background: var(--leaf-soft); color: var(--leaf); }
.navdrop summary.current { background: var(--leaf-soft); color: var(--leaf); font-weight: 600; }
.navdrop summary .icon { width: 14px; height: 14px; transition: transform .15s; }
.navdrop[open] summary .icon { transform: rotate(180deg); }
.navdrop-list { position: absolute; left: 0; top: 100%; z-index: 30; min-width: 210px; display: grid; gap: 2px; padding: 6px; margin-top: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.navdrop-list::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.top nav .tabs-main .navdrop-list a { padding: 11px 14px; border-radius: 10px; color: var(--ink); white-space: nowrap; text-align: left; border: 0; background: none; font-size: .9375rem; font-weight: 500; }
.top nav .tabs-main .navdrop-list a:hover { background: var(--leaf-soft); }
.top nav .tabs-main .navdrop-list a.current { background: var(--leaf-soft); color: var(--leaf); font-weight: 600; }
.navmenu { display: none; position: relative; }
.navmenu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; color: var(--leaf); background: var(--surface); }
.navmenu summary::-webkit-details-marker { display: none; }
.navmenu summary .icon { width: 16px; height: 16px; transition: transform .15s; }
.navmenu[open] summary .icon { transform: rotate(180deg); }
.navmenu-list { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; min-width: 210px; max-width: calc(100vw - 32px); display: grid; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.top nav .navmenu-list a { padding: 11px 14px; border-radius: 10px; color: var(--ink); }
.top nav .navmenu-list a:hover { background: var(--leaf-soft); }
.top nav .navmenu-list a.current { background: var(--leaf-soft); color: var(--leaf); font-weight: 600; }
.top nav .btn { color: var(--on-leaf); }
/* Language switch: the visible part is drawn here; an invisible native dropdown covers it and takes the taps. */
.lang { position: relative; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 10px; font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--ink); background: var(--surface); cursor: pointer; }
.lang:hover, .lang:focus-within { border-color: var(--leaf); color: var(--leaf); }
.lang .icon { width: 15px; height: 15px; flex: none; }
.lang .chev { width: 12px; height: 12px; opacity: .7; }
.lang select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--leaf); background: var(--leaf); color: var(--on-leaf);
  padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: .875rem; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn.raised { box-shadow: var(--shadow-sm); }
.btn.ghost { background: transparent; color: var(--leaf); border-color: var(--line-strong); }
.btn.ghost:hover { border-color: var(--leaf); }
.btn.soft { background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--muted); border-color: var(--line-strong); }
.btn.small { padding: 8px 14px; font-size: 12px; font-weight: 700; }
.btn.warn { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.linkish { border: 0; background: none; padding: 0; color: var(--muted); font-weight: 500; cursor: pointer; font-size: .875rem; }
.linkish:hover { color: var(--leaf); }
.textlink { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--leaf); text-decoration: none; }
.textlink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; padding-block: 28px 96px; }
.badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--leaf-soft); color: var(--leaf-ink); padding: 8px 14px; font-size: 12px; font-weight: 600; }
.hero h1 { font-size: var(--step-3); line-height: .98; letter-spacing: -0.035em; margin-top: 20px; }
.hero .lede { margin-top: 26px; max-width: 28em; font-size: 1.05rem; line-height: 1.75; color: var(--muted); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.joined { display: flex; align-items: center; gap: 14px; margin-top: 40px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.joined strong { color: var(--ink); }
.faces { display: flex; }
.faces span { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--paper); display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #2d3026; }
.faces span + span { margin-left: -8px; }
.faces span:nth-child(1) { background: #c89d74; } .faces span:nth-child(2) { background: #71805a; color: #fff; } .faces span:nth-child(3) { background: #d4b38f; }
.faces span.more { background: var(--leaf-soft); color: var(--leaf); }
.hero-photo { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--leaf-soft); box-shadow: var(--shadow); }
.hero-photo img { display: block; width: 100%; height: clamp(340px, 46vw, 560px); object-fit: cover; }
.pick { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-radius: 18px; padding: 16px 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); border: 0; text-align: left; cursor: pointer; color: inherit; width: auto; }
.pick small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pick b { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; color: var(--heading); }
.pick .tag { flex: none; border-radius: 999px; background: var(--leaf-soft); color: var(--leaf-ink); padding: 6px 12px; font-size: 12px; font-weight: 700; }

/* sections */
.band { background: var(--surface); border-block: 1px solid var(--line); }
.section { padding-block: clamp(56px, 8vw, 88px); display: grid; gap: 28px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.section-head h2 { margin-top: 8px; }
.search { display: flex; align-items: center; gap: 10px; width: min(100%, 320px); border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 12px 16px; color: var(--muted); }
.search input { border: 0; background: transparent; outline: none; width: 100%; padding: 0; font-size: .875rem; }
.search input::placeholder { color: var(--muted); opacity: .8; }
.search:focus-within { border-color: var(--leaf); }
.howto { display: flex; align-items: flex-start; gap: 10px; background: var(--leaf-soft); color: var(--leaf-ink); border-radius: var(--radius); padding: 14px 18px; font-size: .9375rem; font-weight: 500; }
.howto .icon { margin-top: 3px; }

.banner { background: var(--sauce-soft); border-radius: var(--radius); padding: 14px 18px; font-size: .9375rem; }
.banner.bad { background: var(--bad-soft); color: var(--bad); }
.empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: 44px 24px; text-align: center; display: grid; gap: 8px; justify-items: center; color: var(--muted); }
.empty h3 { color: var(--heading); }
.empty svg { width: 48px; height: 48px; opacity: .6; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button { border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 7px 15px; font-size: 12px; font-weight: 700; cursor: pointer; }
.chips button[aria-pressed="true"] { border-color: var(--leaf); color: var(--on-leaf); background: var(--leaf); }

/* product cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 22px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgb(64 69 45 / .12); }
.photo { position: relative; aspect-ratio: 16 / 10; max-width: 100%; background: var(--leaf-soft); display: grid; place-items: center; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.card:hover .photo img { transform: scale(1.05); }
.photo svg { width: 36%; opacity: .35; }
button.photo { border: 0; padding: 0; width: 100%; cursor: pointer; }
.card .body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card h3 { font-size: 1.45rem; }
.titlelink { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.titlelink:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.card .stall { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .875rem; color: var(--muted); }
.comparelink { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--leaf); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.card .desc { font-size: .875rem; color: var(--muted); flex: 1; }
.price { font-weight: 700; color: var(--sauce); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .9375rem; }
.price small { font-weight: 500; color: var(--muted); }
.soldout { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--band); border-radius: 999px; padding: 4px 10px; }

/* Call / WhatsApp / Directions */
.reach { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.reach .btn { flex: 1 1 auto; padding: 10px 14px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.reach .btn.ghost { color: var(--leaf-ink); }
.closed { font-size: var(--step--1); background: var(--sauce-soft); color: var(--ink); border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.closed strong { color: var(--sauce); }

/* shops */
.shops-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; }
.shops-intro p { color: var(--muted); line-height: 1.75; max-width: 30em; }
.shops .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.shop { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.shop .map { border-radius: 0; aspect-ratio: 16 / 9; }
.shop .body { padding: 18px 20px 20px; display: grid; gap: 6px; align-content: start; }
.shop .addr { display: flex; gap: 6px; align-items: flex-start; color: var(--muted); font-size: .875rem; }
.shop .addr .icon { margin-top: 4px; }
.shop .contact { font-weight: 700; font-variant-numeric: tabular-nums; }
.map { width: 100%; aspect-ratio: 16 / 10; max-width: 100%; border: 0; border-radius: 12px; display: block; background: var(--leaf-soft); }
.mapbox { min-height: 40px; }

/* story: about, pincuk, field notes, history */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.people .prose { display: grid; gap: 16px; max-width: 34em; }
.people .prose p:not(.eyebrow) { color: var(--muted); line-height: 1.75; }
.about .prose { display: grid; gap: 16px; max-width: 34em; align-content: start; }
.about .prose p { color: var(--muted); line-height: 1.75; }
.about .prose p b, .about .prose p i { color: var(--ink); }
.pincuk { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 14px; align-content: start; }
.pincuk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pincuk li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); font-size: .9375rem; }
.pincuk li b { font-weight: 700; color: var(--sauce); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
.beyond { display: flex; flex-wrap: wrap; gap: 8px; }
.beyond span { background: var(--leaf-soft); color: var(--leaf-ink); padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.notes { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); margin: 0; overflow: hidden; }
.notes div { padding: 22px 20px; display: grid; gap: 6px; align-content: start; }
.notes div + div { border-left: 1px solid var(--line); }
.notes dt { font-size: 12px; color: var(--muted); }
.notes dd { margin: 0; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; color: var(--heading); }
.timeline { display: grid; gap: 22px; }
.timeline ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--leaf); }
.timeline li { padding: 18px 18px 0 0; position: relative; display: grid; gap: 6px; align-content: start; }
.timeline li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--leaf); }
.timeline .yr { font-family: var(--font-display); font-size: 1.4rem; color: var(--heading); }
.timeline li p { font-size: .9375rem; color: var(--muted); }

/* footer */
.site-footer { background: var(--footer); color: var(--on-footer); }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; padding-block: 44px; }
.site-footer .fbrand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.5rem; }
.site-footer .fbrand .icon { width: 28px; height: 28px; flex: none; }
.site-footer p { font-size: .875rem; line-height: 1.7; color: color-mix(in srgb, var(--on-footer) 75%, transparent); }
.site-footer .tagline { margin-top: 10px; max-width: 22em; }
.site-footer .fright { text-align: right; }
.site-footer a { color: var(--on-footer); }

/* panels & forms (seller & admin) */
.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.stack { display: grid; gap: 20px; align-content: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 16px; align-content: start; }
form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label, .field .label { font-size: var(--step--1); font-weight: 600; }
.field .hint { font-size: 12px; color: var(--muted); }
input[type="text"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], .field input[type="search"], textarea, select {
  width: 100%; border: 1px solid var(--line-strong); background: var(--paper); border-radius: 12px; padding: 10px 14px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-soft); }
textarea { min-height: 72px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drop { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.drop img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; }
.formerr { color: var(--bad); font-size: var(--step--1); font-weight: 600; }
fieldset.loc { border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 0; display: grid; gap: 12px; min-width: 0; }
fieldset.loc legend { font-weight: 600; padding-inline: 6px; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 500; }

.pill { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.pill.approved, .pill.live { background: var(--leaf-soft); color: var(--ok); }
.pill.done { background: var(--band); color: var(--muted); }
.pill.suspended, .pill.hidden { background: var(--bad-soft); color: var(--bad); }
.pill.paused { background: var(--sauce-soft); color: var(--sauce); }

.mine { display: grid; gap: 10px; }
.mine .item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.mine .item img, .mine .item .ph { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; background: var(--leaf-soft); }
.mine .item .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: end; }

.desk { padding-block: 36px 88px; display: grid; gap: 28px; }
/* Let these grids shrink below their content's natural width, so forms don't push the page sideways on phones. */
.desk, .stack, .panel, form, .field { grid-template-columns: minmax(0, 1fr); }
.desk-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.desk h1 { font-size: var(--step-2); letter-spacing: -0.035em; margin-top: 6px; }
.auth { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; padding-block: 48px 88px; }
.auth.single { grid-template-columns: minmax(0, 420px); justify-content: center; }
.auth h2 { font-size: 2rem; }
.tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; flex-wrap: wrap; }
.tabs button { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: .875rem; cursor: pointer; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.tabs button[aria-selected="true"] { background: var(--leaf); color: var(--on-leaf); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.stats div { padding: 18px 20px; display: grid; gap: 2px; }
.stats div + div { border-left: 1px solid var(--line); }
.stats dt { font-size: 12px; color: var(--muted); }
.stats dd { margin: 0; font-family: var(--font-display); font-size: 2rem; color: var(--heading); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .acts { display: flex; gap: 6px; flex-wrap: wrap; }
td img { width: 48px; height: 36px; object-fit: cover; border-radius: 6px; display: block; background: var(--leaf-soft); }
.loc-cell { max-width: 260px; }
.loc-cell a { font-size: var(--step--1); font-weight: 600; }

/* compare panel: every shop selling a product */
dialog.compare { width: min(720px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
dialog.compare::backdrop { background: rgb(28 32 24 / .5); }
.compare-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
.compare-head h2 { font-size: 1.5rem; }
.compare-tools { display: grid; gap: 12px; padding: 16px 20px 0; }
.compare-tools .chips { align-items: center; }
.compare-list { display: grid; gap: 14px; padding: 16px 20px 20px; }
.offer { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: grid; }
.offer .map { border-radius: 0; aspect-ratio: 16 / 7; }
.offer .body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.offer-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.offer-head h3 { font-size: 1.25rem; }
.dist { font-weight: 700; color: var(--leaf); }

/* order helper: a short chat that builds the WhatsApp message */
dialog.order { width: min(560px, calc(100% - 24px)); }
.chat { display: grid; gap: 10px; padding: 18px 20px 22px; }
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 18px; line-height: 1.45; }
.bubble.bot { justify-self: start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bubble.me { justify-self: end; background: var(--leaf); color: var(--on-leaf); border-bottom-right-radius: 6px; font-weight: 600; }
.order-step { display: grid; gap: 14px; margin-top: 4px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.order-items { display: grid; gap: 10px; }
.order-item .muted { display: block; }
.order-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.stepper button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--leaf); font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.stepper button:hover { border-color: var(--leaf); }
.stepper output { min-width: 2ch; text-align: center; font-weight: 700; }
.order-total { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line); }
.order-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.order-nav .btn { flex: 0 1 auto; }
.order-nav .btn[aria-disabled="true"] { opacity: .45; cursor: progress; }
.order-message { margin: 0; padding: 14px; white-space: pre-wrap; word-break: break-word; font: 500 .9375rem/1.55 var(--font-body); background: var(--paper); border: 1px dashed var(--line-strong); border-radius: 12px; }
.order-back { padding: 12px 14px; border-radius: 12px; background: var(--sauce-soft); font-size: .9375rem; }
.order-back:empty { display: none; }
.order-meaning summary { cursor: pointer; font-weight: 600; font-size: var(--step--1); color: var(--leaf); margin-bottom: 8px; }
.chips button:disabled { opacity: .45; cursor: not-allowed; }

/* favourites, share, lagi hits, opening hours */
.card, .shop { position: relative; }
.tools { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 6px; }
.tool { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 2px 8px rgb(0 0 0 / .15); backdrop-filter: blur(4px); }
.tool .icon { width: 18px; height: 18px; }
.tool:hover { color: var(--leaf); }
.tool.fav[aria-pressed="true"] { color: var(--bad); }
.tool.fav[aria-pressed="true"] .icon { fill: currentColor; }
.hot-badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: var(--sauce); color: var(--on-leaf); font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.hot-badge .icon { width: 14px; height: 14px; }
.chips button .icon { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.hours { display: flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; margin-top: 4px; }
.hours .icon { width: 14px; height: 14px; flex: none; }
.hours.is-open { color: var(--ok); }
.hours.is-closed { color: var(--sauce); }
.hours-edit { display: grid; gap: 8px; }
.hours-row { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(0, 110px) auto minmax(0, 110px); align-items: center; gap: 8px; }
.hours-row input[type="time"] { padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); min-width: 0; }
.hours-row input[type="time"]:disabled { opacity: .45; }
.flash { animation: flash 2.4s ease; }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 4px var(--leaf); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* several photos per product, big orders, seller statistics */
.photo.multi { display: block; }
.pics { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pics::-webkit-scrollbar { display: none; }
.pics > div { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.pics button { flex: 0 0 100%; height: 100%; scroll-snap-align: start; border: 0; padding: 0; background: none; cursor: pointer; }
.pics img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.pic-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / .6); box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.pic-dots span.on { background: #fff; width: 18px; border-radius: 999px; }
.pic-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--ink); cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: 0 2px 6px rgb(0 0 0 / .2); }
.pic-nav .icon { width: 16px; height: 16px; }
.pic-nav.prev { left: 8px; } .pic-nav.next { right: 8px; }
.card:hover .pic-nav, .pic-nav:focus-visible { opacity: 1; }
@media (hover: none) { .pic-nav { display: none; } }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb { position: relative; }
.thumb img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; display: block; }
.thumb button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper); font-weight: 700; line-height: 1; cursor: pointer; }
.big-order { display: flex; align-items: flex-start; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--leaf-ink); margin-top: 2px; }
.big-order .icon { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.big-edit { display: grid; gap: 10px; }
.deliv { display: flex; align-items: flex-start; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--heading); margin-top: 2px; }
.deliv .icon { width: 14px; height: 14px; flex: none; margin-top: 3px; }
/* Seller form: the delivery choice, with scrolling tick lists of countries and provinces */
.deliv-edit, .deliv-fields { display: grid; gap: 12px; }
.pick-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: grid; gap: 6px; background: var(--surface); }
.pick-list .check { font-weight: 400; }
.pick-list .check[hidden] { display: none; }
.pick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Shop details: two columns side by side on wide screens, one on phones */
.profile-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; align-items: start; }
#statsPanel { display: grid; gap: 12px; }
#statsPanel .desk-head { flex-wrap: wrap; gap: 10px; }

/* About us: our people and collaborations */
.people { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.groups { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.groups li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.groups .icon { grid-row: span 2; width: 20px; height: 20px; margin-top: 2px; color: var(--leaf); }
.groups li > span:last-child { color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.people-sellers { display: grid; gap: 12px; margin-top: 36px; }
.people-sellers h3 { font-size: 1.2rem; }
.people-list { display: flex; flex-wrap: wrap; gap: 8px; }
.people-list a { background: var(--leaf-soft); color: var(--leaf-ink); padding: 7px 14px; border-radius: 999px; font-size: .875rem; font-weight: 600; text-decoration: none; }
.people-list a:hover { background: var(--leaf); color: var(--on-leaf); }
.partners { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.partners li { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.partners .yr { font-family: var(--font-display); color: var(--sauce); }
.partners p { color: var(--muted); font-size: .9375rem; line-height: 1.6; }
#people, #semanggi, #collab { scroll-margin-top: 120px; }
@media (max-width: 900px) { .people { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .partners { grid-template-columns: minmax(0, 1fr); } }

/* Packages: what tours, experiences and homestays are; tours list their experiences */
.pack-kinds { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pack-kinds a { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; height: 100%; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.pack-kinds a:hover { border-color: var(--leaf); }
.pack-kinds .icon { grid-row: span 2; width: 20px; height: 20px; margin-top: 2px; color: var(--leaf); }
.pack-kinds a > span:last-child { color: var(--muted); font-size: .875rem; line-height: 1.55; }
.section-lede { color: var(--muted); max-width: 46em; margin-top: 8px; line-height: 1.65; }
.pack-links a { color: var(--leaf); font-weight: 600; }
.listing { scroll-margin-top: 120px; }
#tur, #pengalaman, #homestay { scroll-margin-top: 110px; }
.kind-hint { color: var(--muted); }
.exp-checks { display: grid; gap: 6px; }
.writer { padding: 14px 16px; border-radius: var(--radius); background: var(--leaf-soft); display: grid; gap: 12px; }
.writer[open] { padding-bottom: 18px; }
.writer summary { cursor: pointer; font-weight: 600; color: var(--leaf); display: inline-flex; gap: 6px; align-items: center; }
.writer summary .icon, #l-autofill .icon { width: 16px; height: 16px; }
@media (max-width: 760px) { .pack-kinds { grid-template-columns: minmax(0, 1fr); } }

/* Wisata: tours and homestays */
.page-title { font-size: var(--step-2); letter-spacing: -0.035em; margin-top: 8px; max-width: 18em; }
.listings { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.listing .card-head h3 { font-size: 1.35rem; }
.listing .desc { white-space: pre-line; flex: none; }
.facts { display: grid; gap: 6px; }
.fact { display: flex; align-items: flex-start; gap: 8px; font-size: .875rem; color: var(--ink); }
.fact .icon { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--leaf); }
.fact.dates ul { margin: 4px 0 0; padding-left: 1.1em; color: var(--muted); }
.includes { font-size: .875rem; }
.includes ul { margin: 4px 0 0; padding-left: 1.1em; color: var(--muted); display: grid; gap: 2px; }
.full-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.empty.soon .badge { margin-bottom: 4px; }
dialog.book { width: min(560px, calc(100% - 24px)); }
.book-form { display: grid; gap: 14px; padding: 18px 20px 22px; }
#listingForm { display: grid; gap: 14px; }
#listingRows img { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; background: var(--leaf-soft); display: block; }

/* homestay (coming soon) and sponsors */
.extras { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; }
.extras.one { grid-template-columns: minmax(0, 1fr); } /* a single box spans the full width, like the partner list */
.extra { display: grid; gap: 12px; align-content: start; padding: clamp(24px, 4vw, 36px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.extra.stay { background: var(--leaf-soft); border-color: transparent; }
.extra .badge { justify-self: start; background: var(--surface); }
.extra h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
.extra > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.extra .reach { justify-content: flex-start; }
.extra .reach .btn { flex: 0 1 auto; }
.home-note { color: var(--leaf-ink) !important; }
.site-footer .site-ig a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
@media (max-width: 900px) { .extras { grid-template-columns: minmax(0, 1fr); } }

/* history page */
.hist { display: grid; gap: clamp(32px, 5vw, 56px); padding-block: clamp(36px, 6vw, 72px); }
.hist-head { display: grid; gap: 14px; max-width: 46em; }
.hist-head h1 { font-size: var(--step-2); letter-spacing: -0.035em; }
.hist-head .lede { font-size: 1.125rem; color: var(--muted); }
.carousel { display: grid; gap: 12px; }
.track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius-lg); background: var(--band); border: 1px solid var(--line); }
.track::-webkit-scrollbar { display: none; }
.track:focus-visible { outline: 3px solid var(--leaf-soft); outline-offset: 3px; }
.track figure { flex: 0 0 100%; scroll-snap-align: start; margin: 0; display: grid; grid-template-rows: auto auto; }
.track img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--band); display: block; }
.track figcaption { padding: 12px 18px 16px; font-size: .9375rem; color: var(--muted); }
.carousel-bar { display: flex; align-items: center; gap: 12px; }
.carousel-bar .small { margin-left: auto; }
.round { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--leaf); font-size: 1.4rem; line-height: 1; cursor: pointer; flex: none; }
.round:hover:not(:disabled) { border-color: var(--leaf); }
.round:disabled { opacity: .4; cursor: default; }
.dots { display: flex; gap: 6px; flex-wrap: wrap; }
.dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--line-strong); cursor: pointer; }
.dots button[aria-current="true"] { background: var(--leaf); width: 22px; border-radius: 999px; }
.hist-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.hist-toc { position: sticky; top: 96px; display: grid; gap: 10px; }
.hist-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .875rem; }
.hist-toc a { color: var(--muted); text-decoration: none; }
.hist-toc a:hover { color: var(--leaf); }
.hist-chapters { display: grid; gap: 40px; max-width: 42em; }
.hist-chapters section { display: grid; gap: 10px; scroll-margin-top: 96px; }
.hist-chapters .yr { font-family: var(--font-display); font-size: 1.1rem; color: var(--sauce); }
.hist-chapters h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.hist-chapters .prose { display: grid; gap: 12px; color: var(--muted); line-height: 1.75; }
.hist-chapters .prose b { color: var(--ink); }
.hist-chapters .prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.hist-source { display: grid; gap: 16px; padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.hist-source .cta { display: flex; gap: 10px; flex-wrap: wrap; }
.timeline > p { margin-top: 4px; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--paper); padding: 11px 20px; border-radius: 999px; font-size: .9375rem; font-weight: 500; z-index: 20; max-width: calc(100% - 32px); }

@media (max-width: 900px) {
  .hero, .about, .split, .auth, .shops-intro { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero { padding-block: 12px 64px; }
  .notes { grid-template-columns: 1fr 1fr; }
  .notes div:nth-child(3) { border-left: 0; }
  .notes div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .timeline ol { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--leaf); gap: 18px; }
  .timeline li { padding: 0 0 0 20px; }
  .timeline li::before { top: 6px; left: -7px; }
  .hist-body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hist-toc { position: static; }
  /* Phones and tablets: the logo row on top, then all main tabs in one row underneath */
  .top nav { display: contents; }
  .top nav .actions { order: 2; margin-left: auto; }
  .tabs-main { order: 3; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; gap: 5px; padding-block: 2px; }
  .tabs-main::-webkit-scrollbar { display: none; }
  .top nav .tabs-main a { flex: 1 1 auto; text-align: center; white-space: nowrap; padding: 9px 7px; font-size: .8125rem; border: 1px solid var(--line-strong); background: var(--surface); }
  .top nav .tabs-main a.current { border-color: var(--leaf); }
  /* The About us list hangs under the whole tab row, so the scrolling row doesn't cut it off */
  .top .wrap { position: relative; }
  .navdrop { position: static; flex: 1 1 auto; display: flex; }
  .navdrop summary { flex: 1 1 auto; justify-content: center; white-space: nowrap; gap: 2px; padding: 9px 6px; font-size: .8125rem; border: 1px solid var(--line-strong); background: var(--surface); }
  .navdrop summary.current { border-color: var(--leaf); background: var(--leaf-soft); }
  .navdrop-list { left: 16px; right: 16px; top: calc(100% - 8px); }
  .stats div + div { border-left: 0; }
  .site-footer .fright { text-align: left; }
}
@media (max-width: 520px) {
  .row2 { grid-template-columns: 1fr; }
  .pincuk li { grid-template-columns: 1fr; gap: 2px; }
  /* Phones: the logo row keeps the For Sellers button, made compact. The shop name goes on two
     lines and the button text may wrap, so long translations still fit next to the language switch. */
  .top .wrap { column-gap: 10px; }
  .brand { gap: 8px; min-width: 0; }
  .brand img { width: 34px; height: 34px; }
  .brand b { display: grid; font-size: 1rem; line-height: 1.05; }
  .top nav .actions { gap: 6px; }
  .top nav .actions .btn { padding: 6px 11px; font-size: 12px; line-height: 1.15; text-align: center; white-space: normal; max-width: 104px; min-height: 32px; }
  .pick { left: 12px; right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .card:hover, .photo img, .card:hover .photo img { transition: none; transform: none; }
}

/* price per piece, under a price that covers several pieces */
.perpiece { color: var(--muted); margin-top: -4px; font-variant-numeric: tabular-nums; }

/* product window: opened by tapping a product's photo or name */
.product-body { display: grid; gap: 16px; padding: 16px 20px 20px; }
.detail-photo .photo { aspect-ratio: 4 / 3; border-radius: 18px; }
.detail-main { display: grid; gap: 8px; }
.detail-price { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail-price .price { font-size: 1.5rem; }
.detail-tools { display: flex; gap: 6px; }
.detail-desc { white-space: pre-line; line-height: 1.65; }
.detail-compare { justify-self: start; }
.cat-tag { display: inline-block; background: var(--leaf-soft); color: var(--leaf); font-size: var(--step--1); font-weight: 600; padding: 3px 12px; border-radius: 999px; }
.detail-seller .eyebrow { margin: 0; }

/* seller's first sign-in: the shop-details form on its own */
.setup { max-width: 760px; margin-inline: auto; }
.setup-head { display: grid; gap: 8px; }
.setup-head h1 { font-size: var(--step-2); }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }

/* About us (Cerita kami): one box style for the people groups, partners, the pincuk card and the
   sponsor and packages boxes. Boxes sit on the page colour; inside a band they use the paper colour. */
.groups li, .partners li, .pincuk, .extra, .extra.stay {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 28px); box-shadow: none;
}
.band .groups li, .band .partners li, .band .pincuk, .band .extra { background: var(--paper); }
.extra h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
/* Warga Kami: the text on top, then the groups in a grid */
.people { grid-template-columns: minmax(0, 1fr); }
.people .prose { max-width: 46em; }
.groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .groups { grid-template-columns: minmax(0, 1fr); } }

/* A shop's own page: details and map side by side, posters, then the shop's products */
.backlink { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; font-size: .9375rem; text-decoration: none; justify-self: start; }
.backlink:hover { color: var(--leaf); }
.shop-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.shop-head-main { display: grid; gap: 10px; align-content: start; }
.shop-head h1 { font-size: var(--step-2); }
.shop-head .map { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; }
.shop-head .addr { display: flex; gap: 6px; align-items: flex-start; color: var(--muted); }
.shop-head .contact { font-weight: 700; font-variant-numeric: tabular-nums; }
.posters-wrap { display: grid; gap: 18px; }
.posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; align-items: start; }
.poster { margin: 0; display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px; }
.poster img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.poster figcaption { font-size: .9375rem; color: var(--muted); padding: 0 4px 4px; }
.shoplink { color: inherit; text-decoration: none; }
.shoplink:hover { color: var(--leaf); text-decoration: underline; }
.shop-open { justify-self: start; }
.poster-mine { display: grid; gap: 10px; }
.poster-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.poster-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.poster-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; display: block; }
@media (max-width: 900px) { .shop-head { grid-template-columns: minmax(0, 1fr); } }

/* Warga Kami: one section per group, photos on one side and the text on the other, alternating */
.group-list { display: grid; gap: clamp(36px, 6vw, 64px); margin-top: clamp(32px, 5vw, 48px); }
.group { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; scroll-margin-top: 120px; }
.group:nth-child(even) > .group-photos { order: 2; }
.group-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.group-photos figure { margin: 0; display: grid; gap: 6px; }
.group-photos .zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; }
.group-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .25s; }
.group-photos .zoom:hover img { transform: scale(1.03); }
.group-photos figcaption { font-size: .8125rem; color: var(--muted); line-height: 1.45; }
/* Groups without photos yet: one card each, side by side */
.group-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.group.card { display: block; padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.group.card .group-text h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
.group-text { display: grid; gap: 10px; align-content: center; }
.group-text h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.group-text > p { color: var(--muted); line-height: 1.75; }
.group-icon .icon, .group-text > .icon { width: 26px; height: 26px; color: var(--leaf); }
.group .people-sellers { margin-top: 8px; gap: 10px; }
.group .people-sellers h4 { font-size: 1rem; }
dialog.photo-view { width: min(960px, calc(100% - 24px)); padding: 12px; border: 0; border-radius: var(--radius-lg); background: var(--surface); }
dialog.photo-view::backdrop { background: rgb(0 0 0 / .7); }
.photo-view img { display: block; width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius); }
.photo-view p { margin: 10px 4px 2px; color: var(--muted); font-size: .9375rem; }
.photo-view #photoClose { display: block; margin: 0 0 10px auto; }
@media (max-width: 760px) {
  .group { grid-template-columns: minmax(0, 1fr); }
  .group:nth-child(even) > .group-photos { order: 0; }
  .group-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Group photos: landscape crops for the newer groups; with three photos the first one runs across the top */
.group-photos.wide img { aspect-ratio: 4 / 3; }
.group-photos.three > figure:first-child { grid-column: 1 / -1; }
.group-photos.three > figure:first-child img { aspect-ratio: 16 / 9; }
.group-cards > :only-child { grid-column: 1 / -1; }
/* Partner cards: a row of photos that scrolls sideways; tap one to see it bigger */
.partner-photos { display: flex; gap: 8px; overflow-x: auto; margin: 6px -4px 0; padding: 4px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.partner-photos .zoom { flex: none; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; overflow: hidden; scroll-snap-align: start; }
.partner-photos img { display: block; height: 110px; width: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s; }
.partner-photos .zoom:hover img { transform: scale(1.04); }
.group-photos > .partner-photos { grid-column: 1 / -1; margin-top: 0; }

/* Our People: a group with one photo shows it wide */
.group-photos.one { grid-template-columns: minmax(0, 1fr); }
.group-photos.one img { aspect-ratio: 4 / 3; }
.intro-text { display: grid; gap: 16px; }
.intro-text p { color: var(--muted); line-height: 1.75; }

/* Admin → Warga & Mitra: photos with their captions */
.ab-photos { display: grid; gap: 10px; }
.ab-photo { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ab-photo img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; display: block; background: var(--leaf-soft); }
.ab-caps { display: grid; gap: 6px; }
.ab-caps .pill { justify-self: start; }
.ab-photo .acts { display: flex; gap: 4px; }
#ab-rows-groups img, #ab-rows-partners img { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; background: var(--leaf-soft); display: block; }
@media (max-width: 560px) { .ab-photo { grid-template-columns: 72px minmax(0, 1fr); } .ab-photo img { width: 72px; height: 54px; } .ab-photo .acts { grid-column: 1 / -1; justify-content: end; } }

/* Confirmation window for actions that can't be undone */
dialog.confirm { width: min(460px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
dialog.confirm::backdrop { background: rgb(28 32 24 / .5); }
dialog.confirm h2 { font-size: 1.5rem; }
dialog.confirm p { color: var(--muted); line-height: 1.6; margin-block: 10px 22px; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: var(--paper); }

/* Arabic reads right to left */
@media (min-width: 901px) { [dir="rtl"] .navdrop-list { left: auto; right: 0; } }
[dir="rtl"] .top nav .tabs-main .navdrop-list a { text-align: right; }
/* ---------- admin help: Help panel, "?" buttons and the guided tour ---------- */
.desk-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.help-q { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: var(--leaf); font: 700 12px/1 inherit; font-family: inherit; cursor: pointer; flex: none; }
button.help-q:hover { background: var(--leaf); color: var(--on-leaf); border-color: var(--leaf); }
.help-headwrap { display: inline-flex; align-items: center; gap: 8px; }
dialog.help-sheet { width: min(720px, 100%); max-width: 100%; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); overflow-y: auto; }
dialog.help-sheet::backdrop { background: rgb(28 32 24 / .45); }
.help-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
.help-head h2 { font-size: 1.5rem; }
.help-part { padding: 20px; display: grid; gap: 12px; }
.help-part + .help-part { border-top: 1px solid var(--line); }
.help-part h3 { font-size: 1.2rem; }
.mission-progress { display: grid; gap: 6px; }
.mission-bar { height: 8px; border-radius: 999px; background: var(--leaf-soft); overflow: hidden; }
.mission-bar span { display: block; height: 100%; background: var(--leaf); border-radius: inherit; transition: width .4s; }
.mission-badge { color: var(--leaf-ink); }
.missions { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.missions li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.missions li.done { border-color: color-mix(in srgb, var(--leaf) 35%, var(--line)); }
.mission-mark { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line-strong); color: var(--on-leaf); font-weight: 700; font-size: 14px; }
.missions li.done .mission-mark { background: var(--leaf); border-color: var(--leaf); }
.mission-name { flex: 1; display: grid; gap: 2px; min-width: 0; }
.help-search { width: 100%; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; }
.help-topic { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.help-topic > summary { padding: 12px 16px; font-weight: 600; cursor: pointer; }
.help-body { padding: 0 16px 16px; display: grid; gap: 10px; line-height: 1.6; font-size: .9375rem; }
.help-body h4 { font-size: 1rem; margin-top: 6px; }
.help-body ul, .help-body ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.help-body p { margin: 0; }
.help-tip { background: var(--leaf-soft); border-radius: var(--radius); padding: 10px 14px; }
.help-warn { background: var(--bad-soft); color: var(--ink); border-left: 4px solid var(--bad); border-radius: var(--radius); padding: 10px 14px; }
.help-qa { margin: 0; display: grid; gap: 4px; }
.help-qa dt { font-weight: 600; margin-top: 8px; }
.help-qa dd { margin: 0; color: var(--muted); }
html.touring { scroll-behavior: auto; }
.tour-dim { position: fixed; z-index: 1000; background: rgb(20 24 18 / .6); pointer-events: none; }
.tour-spot { position: fixed; z-index: 1000; border-radius: 12px; pointer-events: none; }
.tour-spot::after { content: ""; position: absolute; inset: -3px; border: 3px solid var(--sauce); border-radius: 14px; }
.tour-do-spot::after { animation: tour-pulse 1.2s ease-in-out infinite; }
@keyframes tour-pulse { 50% { inset: -9px; opacity: .45; } }
.tour-bubble { position: fixed; z-index: 1001; width: min(380px, calc(100vw - 24px)); padding: 18px 18px 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: grid; gap: 8px; }
.tour-bubble:focus { outline: none; }
.tour-bubble.tour-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tour-bubble h3 { font-size: 1.15rem; }
.tour-count { font-size: 12px; font-weight: 600; color: var(--muted); }
.tour-text { line-height: 1.55; font-size: .9375rem; }
.tour-do { margin: 0; font-weight: 600; color: var(--leaf-ink); }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tour-cheer { position: fixed; z-index: 1002; left: 50%; top: 24px; transform: translateX(-50%); padding: 12px 22px; border-radius: 999px; background: var(--leaf); color: var(--on-leaf); font-weight: 700; box-shadow: var(--shadow); animation: tour-pop .35s ease-out; max-width: calc(100% - 32px); text-align: center; }
@keyframes tour-pop { from { transform: translate(-50%, -12px) scale(.9); opacity: 0; } }
@media (max-width: 639px) {
  .tour-bubble:not(.tour-center) { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); top: auto; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .mission-bar span { transition: none; } .tour-do-spot::after, .tour-cheer { animation: none; } }

/* Seller and admin pages: the note shown before the sign-in form loads */
.boot-note { max-width: 560px; margin: 24px auto; display: grid; gap: 8px; }

/* Products in several sizes: the seller form rows and the list in the product window */
.size-title { font-weight: 600; margin: 0; }
fieldset.size-row { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px 16px; margin: 0; display: grid; gap: 12px; min-width: 0; }
fieldset.size-row legend { font-weight: 600; padding-inline: 6px; }
.sizes-edit { display: grid; gap: 12px; }
.sizes-edit:empty { display: none; }
.size-acts { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.size-add { justify-self: start; }
.size-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.size-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.size-list li > span:first-child { flex: 1; min-width: 0; }
.size-list strong { color: var(--sauce); font-variant-numeric: tabular-nums; }
.size-list li.out { opacity: .65; }
.size-list li.out strong { text-decoration: line-through; }
.size-list .perpiece { margin: 0; }