:root {
  /* Monochrome by design: the only colour on the page comes from the fabric
     photographs and the colour-filter swatches, which are product data. */
  --bg: #f4f4f4;
  --surface: #ffffff;
  --ink: #111111;
  --ink-soft: #6f6f6f;
  --line: #e0e0e0;
  --accent: #111111;
  --accent-soft: #ededed;
  --gold: #767676;
  --ok: #111111;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .07);
  --sidebar-w: 268px;
  --header-h: 64px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans Thai", "Leelawadee UI", "Tahoma", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}

button, input, select { font: inherit; color: inherit; }

/* ---------------- header ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand { text-decoration: none; color: inherit; display: flex; flex-direction: column; line-height: 1.15; }
.brand-mark { font-weight: 700; font-size: 20px; color: var(--accent); letter-spacing: .01em; }
.brand-sub { font-size: 11px; color: var(--ink-soft); }

.search { position: relative; flex: 1; max-width: 560px; }
.search input {
  width: 100%;
  padding: 10px 34px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  outline: none;
}
.search input:focus { border-color: var(--accent); background: var(--surface); }
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; font-size: 20px; color: var(--ink-soft);
  width: 26px; height: 26px; border-radius: 50%;
}
.search-clear:hover { background: var(--line); }

.cart-btn {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.cart-btn:hover { filter: brightness(1.08); }
.cart-count {
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-grid; place-items: center;
  background: #fff; color: var(--accent);
  border-radius: 999px; font-size: 12px; font-weight: 700;
}

.icon-btn {
  border: 1px solid var(--line); background: var(--surface);
  width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 18px;
}
.icon-btn:hover { background: var(--bg); }
.filters-toggle { display: none; }

/* ---------------- layout ---------------- */

.layout { display: flex; align-items: flex-start; gap: 22px; padding: 22px 18px 60px; }

/* Deliberately not sticky and not scrollable: the category list is the point
   of this column, and pinning it meant a scrollbar inside a scrollbar. The
   page scrolls once instead, and every category is readable in full. */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.sidebar-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
/* Both only exist for the mobile drawer; the desktop sidebar is always open. */
.sidebar-close, .sidebar-foot, .sidebar-backdrop { display: none; }
/* Scoped to .sidebar so it outranks .ghost-btn's own display further down. */
.sidebar .advisor-btn-mobile { display: none; }
.link-btn { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 13px; padding: 2px 0; }
.link-btn:hover { text-decoration: underline; }

.facet { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.facet:first-of-type { border-top: 0; }
.facet h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--line); cursor: pointer; position: relative;
  padding: 0;
}
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }
.swatch[disabled] { opacity: .25; cursor: default; }

.price-row { display: flex; align-items: center; gap: 8px; }
.price-row input {
  width: 100%; min-width: 0; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg);
}

.check { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 10px; }
.inline-check { margin: 0; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--line); background: var(--bg);
  padding: 4px 10px; border-radius: 999px; cursor: pointer; font-size: 13px;
}
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip .n { color: var(--ink-soft); font-size: 11px; margin-inline-start: 4px; }
.chip[aria-pressed="true"] .n { color: var(--accent); }

/* No inner scroll: the categories are the sidebar's main content and should
   be read at a glance. The sidebar itself scrolls when branches are open, so
   there is never a scrollbar inside a scrollbar. */
.tree { max-height: none; }
.tree-row { display: flex; align-items: center; gap: 2px; }
.tree-toggle {
  flex: 0 0 20px; width: 20px; height: 24px;
  border: 0; background: none; cursor: pointer;
  color: var(--ink-soft); font-size: 15px; line-height: 1; padding: 0;
}
.tree-toggle:hover { color: var(--ink); }
.tree-toggle.placeholder { cursor: default; }
.tree-item {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
  border: 0; background: none; text-align: start; cursor: pointer;
  padding: 4px 6px; border-radius: 6px; font-size: 14px;
}
.tree-item > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-item:hover { background: var(--bg); }
.tree-item[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tree-item .n { margin-inline-start: auto; font-size: 11px; color: var(--ink-soft); }
.tree-depth-2 { padding-inline-start: 14px; }
.tree-depth-3 { padding-inline-start: 28px; }
.tree-depth-4 { padding-inline-start: 42px; }

/* ---------------- results ---------------- */

.results { flex: 1; min-width: 0; }
.results-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.result-count { font-weight: 600; }
.result-count em { font-style: normal; color: var(--accent); }
.sort { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.sort select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }

/* Sits with the sort control at the right of the results head: it belongs
   with the filters it describes, not up in the shop's own navigation. */
.share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; white-space: nowrap;
}
.share-icon { font-size: 14px; line-height: 1; }
.share-btn.ok { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 3px 6px 3px 10px; font-size: 12px;
}
.pill button { border: 0; background: none; cursor: pointer; color: inherit; font-size: 15px; line-height: 1; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card-media { position: relative; aspect-ratio: 1; background: var(--bg); }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-media .ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink-soft); font-size: 12px; }
.badges { position: absolute; top: 8px; inset-inline-start: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.badge { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff; }
.badge.gold { background: var(--gold); }
.badge.out { background: #77706a; }
.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-name {
  font-size: 13px; line-height: 1.45; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-foot { margin-top: auto; display: flex; align-items: baseline; gap: 6px; }
.price { font-weight: 700; color: var(--accent); }
.price-was { font-size: 12px; color: var(--ink-soft); text-decoration: line-through; }
.unit { font-size: 11px; color: var(--ink-soft); }

.sentinel { height: 40px; }
.empty { text-align: center; padding: 60px 0; color: var(--ink-soft); }

/* ---------------- modal ---------------- */

/* `hidden` is how this page hides things, and the UA rule behind it loses to
   any author `display` -- which several buttons here set. Make it absolute. */
[hidden] { display: none !important; }

.modal, .drawer { position: fixed; inset: 0; z-index: 50; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(36, 31, 26, .45); }
.modal-panel {
  position: relative; z-index: 1;
  max-width: 1120px; width: calc(100% - 32px);
  margin: 5vh auto; max-height: 90vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
}
.modal-close { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; }
.modal-body { padding: 22px; }
/* Opacity only: #productBody is itself a scroll container on mobile, and
   animating its transform would fight the scrolling. */
.modal-body.enter { animation: productEnter .22s ease-out; }
@keyframes productEnter { from { opacity: 0; } to { opacity: 1; } }

/* The gallery gets the larger share: full-resolution photos are the whole
   reason a fabric shopper opens a product. */
.detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; }
/* A grid column is never allowed to be sized by its widest child here. The
   thumbnail strip is one unwrappable row -- 13 photos is 800px of it -- and a
   column that stretches to fit that pushes the whole sheet wider than the
   phone. */
.detail > * { min-width: 0; }

.gallery-main {
  position: relative;
  background: var(--bg);
  border-radius: 8px;
  min-height: 240px;
  display: grid;
  place-items: center;
}
/* contain, never cover: the whole piece of cloth has to be visible. */
.gallery-main img {
  width: 100%; height: auto;
  max-height: 74vh;
  object-fit: contain;
  border-radius: 8px; display: block;
  transition: filter .25s ease;
}
.gallery-main img.loading { filter: blur(8px); }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .9); color: var(--ink);
  font-size: 24px; line-height: 1; cursor: pointer; box-shadow: var(--shadow);
  display: grid; place-items: center; padding: 0 0 3px;
}
.gallery-nav:hover { background: #fff; }
.gallery-nav.prev { inset-inline-start: 10px; }
.gallery-nav.next { inset-inline-end: 10px; }
.gallery-counter {
  position: absolute; bottom: 10px; inset-inline-end: 10px;
  background: rgba(36, 31, 26, .72); color: #fff;
  padding: 3px 10px; border-radius: 999px; font-size: 12px;
}

.detail-thumbs {
  display: flex; gap: 8px; margin-top: 10px;
  /* The strip is the thing that scrolls, not the page. `contain` keeps a swipe
     that runs off the end of the strip from turning into a browser back
     gesture on iOS. */
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; scrollbar-width: thin;
  max-width: 100%;
}
.detail-thumbs img {
  width: 62px; height: 62px; flex: 0 0 62px;
  object-fit: cover; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; background: var(--bg);
}
.detail-thumbs img:hover { border-color: var(--line); }
.detail-thumbs img[aria-current="true"] { border-color: var(--accent); }

.badge.count { background: rgba(36, 31, 26, .72); }
.detail h2 { margin: 0 0 6px; font-size: 19px; line-height: 1.4; }
.detail-price { font-size: 26px; font-weight: 700; color: var(--accent); }
.detail-desc { white-space: pre-wrap; color: var(--ink-soft); font-size: 14px; }
.spec { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.spec td { padding: 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec td:first-child { color: var(--ink-soft); width: 40%; }
.qty { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 8px; width: max-content; overflow: hidden; }
.qty button { width: 36px; height: 38px; border: 0; background: var(--bg); cursor: pointer; font-size: 17px; }
.qty input { width: 56px; height: 38px; border: 0; text-align: center; background: var(--surface); }
.buy-row { display: flex; gap: 10px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.primary-btn {
  background: var(--accent); color: #fff; border: 0;
  padding: 11px 22px; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.primary-btn:disabled { background: #b9b1a9; cursor: not-allowed; }
.primary-btn:not(:disabled):hover { filter: brightness(1.08); }
.ghost-btn {
  background: none; border: 1px solid var(--line); color: var(--ink);
  padding: 10px 16px; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-block;
}
.ghost-btn:hover { background: var(--bg); }
.view-original { margin-top: 2px; font-size: 14px; }

.related { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.related h3 { margin: 0 0 4px; font-size: 15px; }
.related p { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
.related-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.related-row .card-name { -webkit-line-clamp: 2; line-clamp: 2; font-size: 12px; }

/* ---------------- cart drawer ---------------- */

.drawer-panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(420px, 100%);
  background: var(--surface);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.drawer-head, .drawer-foot { padding: 16px 18px; border-block: 1px solid var(--line); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; border-top: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 18px; }
.drawer-foot { border-bottom: 0; }
.cart-line { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cart-line img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex: 0 0 64px; background: var(--bg); }
.cart-line-main { flex: 1; min-width: 0; }
.cart-line-name { font-size: 13px; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-line-foot { display: flex; align-items: center; gap: 10px; }
.cart-sums { margin: 0 0 10px; font-size: 14px; }
.cart-sums div { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; }
.cart-sums dt { color: var(--ink-soft); }
.cart-sums dd { margin: 0; }
.cart-sums .grand { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 8px; font-size: 17px; }
.cart-sums .grand dt { color: var(--ink); font-weight: 600; }
.cart-sums .grand dd { color: var(--accent); font-size: 21px; font-weight: 700; }
.cart-note { font-size: 11px; color: var(--ink-soft); margin: 0 0 12px; }
.drawer-foot .primary-btn { width: 100%; }
.cart-empty { text-align: center; color: var(--ink-soft); padding: 50px 0; }

.order-summary {
  width: 100%; min-height: 220px; margin-top: 12px;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px;
  background: var(--bg); resize: vertical;
}

/* ---------------- responsive ---------------- */

@media (max-width: 900px) {
  .filters-toggle { display: block; }
  .brand-sub { display: none; }

  /* Search gets its own full-width row. Sharing one line with the logo and
     the cart button left it under 150px wide on a 375px screen. */
  .topbar {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 10px;
  }
  .search {
    order: 3;
    flex: 0 0 100%;
    max-width: none;
  }
  .search input {
    padding: 12px 40px 12px 16px;
    /* 16px keeps iOS Safari from zooming the page when the field is focused. */
    font-size: 16px;
  }
  .search-clear { width: 32px; height: 32px; right: 8px; }
  .icon-btn { width: 40px; height: 40px; }
  .cart-btn { padding: 10px 14px; }

  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 45;
    width: min(320px, 86vw); max-height: none; border-radius: 0;
    display: flex; flex-direction: column;
    padding-bottom: 0;
    /* The desktop column is a plain block that grows with the page, but here
       the drawer is pinned to the viewport: without its own scrolling the
       categories below the fold are simply unreachable. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* visibility, not just transform: an off-screen drawer must not stay in
       the tab order where it can be focused but never seen. */
    transform: translateX(-102%);
    visibility: hidden;
    /* visibility deliberately flips instantly rather than riding a delayed
       transition: whether the drawer is reachable must never depend on an
       animation having finished. Only the slide itself is animated. */
    transition: transform .2s ease;
  }
  body.filters-open .sidebar {
    transform: none;
    visibility: visible;
  }

  /* The drawer sits above the header, so the ☰ button that opened it is
     covered -- it needs its own way out: this ×, the backdrop, Escape,
     or the apply button at the bottom. */
  .sidebar-close {
    display: grid; place-items: center;
    width: 32px; height: 32px; font-size: 22px; flex: 0 0 auto;
  }
  .sidebar-head {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface);
    padding-bottom: 10px; margin: 0 0 4px;
    border-bottom: 1px solid var(--line);
  }
  body.filters-open .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 44;
    background: rgba(36, 31, 26, .45);
  }
  .sidebar-foot {
    display: block;
    position: sticky; bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 12px 0 4px;
    margin-top: auto;
  }
  .sidebar-foot .primary-btn { width: 100%; }
  .layout { padding-inline: 12px; }
  /* min() guarantees two columns even at 320px CSS width -- which is what an
     iPhone reports when the owner has Display Zoom turned on. A bare
     minmax(150px, 1fr) collapses to a single column there. */
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 47%), 1fr));
    gap: 10px;
  }

  /* ---- product detail as a full-screen sheet ---- */

  .modal-panel {
    margin: 0;
    width: 100%; max-width: none;
    height: 100dvh; max-height: none;
    border-radius: 0;
    display: flex; flex-direction: column;
  }
  .modal-body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 14px 14px 0;
    -webkit-overflow-scrolling: touch;
  }
  /* Floats over the photo instead of stealing a row of its own. */
  .modal-close {
    position: fixed; top: 12px; inset-inline-end: 12px; z-index: 3;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow);
    border-color: transparent;
  }

  .detail { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .detail h2 { font-size: 17px; overflow-wrap: anywhere; }
  .detail-price { font-size: 22px; }
  .gallery-main img { max-height: 44vh; }
  .detail-thumbs img { width: 54px; height: 54px; flex-basis: 54px; }

  /* Add-to-cart must never be something you have to scroll to find. Sticky
     would come unstuck once the tags and the related row scroll past, so the
     bar is pinned to the sheet itself. */
  .buy-row {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 5;
    margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(36, 31, 26, .08);
    gap: 10px;
  }
  .buy-row .primary-btn { flex: 1; min-height: 48px; }
  .modal-body { padding-bottom: 92px; }
  .view-original { display: block; width: 100%; text-align: center; }
  .qty button { width: 42px; height: 48px; }
  .qty input { height: 48px; }

  .related-row { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }

  /* ---- cart drawer: one scroll, top to bottom ---- */

  /* The footer alone -- totals, confirmation, two buttons -- runs to 337px of
     an 812px phone, and Safari's own bars take another 150. That left a
     ~250px porthole onto the cart: the shopper could not see what they were
     about to buy. So nothing is pinned here but the way out. */
  .drawer-panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* The panel is full width on a phone, so there is no backdrop left to tap:
     this × is the only way to close the cart and has to stay reachable. */
  .drawer-head {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface);
  }
  .drawer-body { flex: 0 0 auto; overflow: visible; }
  .drawer-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

.full-size-link {
  display: inline-block; margin-top: 8px;
  font-size: 12px; color: var(--ink-soft); text-decoration: none;
}
.full-size-link:hover { color: var(--accent); text-decoration: underline; }

/* ---------------- personal shopper ---------------- */

.advisor-btn { white-space: nowrap; padding: 9px 14px; font-size: 14px; }

.advisor-panel {
  max-width: 640px;
  display: flex; flex-direction: column;
  max-height: 88vh;
  padding: 22px 24px 18px;
}
.advisor-head { display: flex; align-items: flex-start; gap: 16px; }
.advisor-head h2 { margin: 2px 0 0; font-size: 21px; line-height: 1.35; }
.advisor-eyebrow { margin: 0; font-size: 12px; color: var(--ink-soft); letter-spacing: .02em; }
.advisor-head .link-btn { flex: 0 0 auto; margin-top: 2px; }

.advisor-progress {
  height: 3px; background: var(--line); border-radius: 3px;
  margin: 16px 0 4px; overflow: hidden;
}
.advisor-progress span {
  display: block; height: 100%; width: 0;
  background: var(--accent); transition: width .25s ease;
}

.advisor-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 0; }
.advisor-hint { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }

.advisor-options { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.advisor-option {
  display: flex; align-items: center; gap: 12px;
  text-align: start; cursor: pointer;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface);
}
.advisor-option-icon {
  flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: 50%; background: var(--bg);
  display: grid; place-items: center; color: var(--ink);
}
.advisor-option-icon svg { width: 23px; height: 23px; }
.advisor-option[aria-pressed="true"] .advisor-option-icon { background: var(--surface); }
.advisor-option-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.advisor-option:hover { border-color: var(--ink-soft); }
.advisor-option[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.advisor-option-label { font-weight: 600; }
.advisor-option-note { font-size: 12.5px; color: var(--ink-soft); }

.advisor-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.advisor-color {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.advisor-color:hover { border-color: var(--ink-soft); }
.advisor-color[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.advisor-color-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .15);
}

.advisor-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.advisor-why {
  margin: 0; font-size: 11.5px; color: var(--ink-soft);
  border-top: 1px dashed var(--line); padding-top: 6px;
}
.advisor-pairing { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.advisor-pairing h3 { margin: 0 0 2px; font-size: 15px; }
.advisor-pairing p { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); }
.advisor-pairing .card { max-width: 190px; }

.advisor-foot {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.advisor-foot .primary-btn { margin-inline-start: auto; }
/* On the first screen this is "ขอเลือกเอง" — the way out, not the way back —
   so it stays as visible as the primary action. */
.advisor-foot .ghost-btn { padding: 10px 18px; }

@media (max-width: 900px) {
  .advisor-btn { display: none; }
  .sidebar .advisor-btn-mobile {
    display: block; width: 100%;
    margin: 4px 0 10px; min-height: 44px;
    border-color: var(--accent);
  }
  .advisor-panel {
    max-width: none; height: 100dvh; max-height: none;
    border-radius: 0; padding: 16px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .advisor-head h2 { font-size: 18px; }
  .advisor-options { grid-template-columns: 1fr; }

  /* Fingers, not cursors: the expand toggles and category rows need a real
     target size in the drawer. */
  .tree-toggle { flex-basis: 34px; width: 34px; height: 42px; font-size: 18px; }
  .tree-item { padding: 9px 6px; }
  .advisor-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .advisor-foot .primary-btn { flex: 1; min-height: 48px; }
  .advisor-foot .ghost-btn { min-height: 48px; }
}

/* ---------------- order handoff ---------------- */

.order-block { padding: 14px 0 6px; }
/* Success is the one other place colour earns its keep, alongside the LINE
   button it sits above: the shopper has to be sure the copy happened before
   they leave for another app. */
.copied-banner {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 10px; padding: 11px 13px;
  border-radius: 9px;
  background: #e9f9ef; border: 1px solid #9fe0bb;
}
.copied-mark {
  flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%; background: #06c755; color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.copied-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.copied-text strong { font-size: 15px; }
.copied-text span { font-size: 12.5px; color: var(--ink-soft); }

.copied-banner.warn { background: #fdf3e5; border-color: #e6c288; }
.copied-banner.warn .copied-mark { background: #b8791b; }

.order-steps { margin: 0 0 14px; padding-inline-start: 20px; font-size: 13.5px; }
.order-steps li { margin-bottom: 5px; }

/* LINE keeps its own green: this is the one button a shopper must recognise
   instantly, and a black button would read as just another control. */
.line-btn {
  display: block; width: 100%; text-align: center;
  background: #06c755; color: #fff;
  padding: 11px 16px; border-radius: 9px;
  text-decoration: none; line-height: 1.35;
}
.line-btn-main { display: block; font-weight: 700; font-size: 15px; }
.line-btn-sub { display: block; font-size: 12.5px; opacity: .92; }
.line-btn:hover { filter: brightness(1.06); }

.recopy-btn { display: block; width: 100%; margin-top: 8px; text-align: center; }

/* ---------------- product options ---------------- */

.badge.opt { background: var(--ink-soft); }

.variant-group { margin-bottom: 14px; }
.variant-label {
  display: block; margin-bottom: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.variant-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.variant-choice {
  border: 1px solid var(--line); background: var(--surface);
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  font-size: 14px; line-height: 1.3;
}
.variant-choice:hover { border-color: var(--ink-soft); }
.variant-choice[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600;
}
/* Still selectable — picking it just shows that it is sold out. */
.variant-choice.unavailable { color: var(--ink-soft); text-decoration: line-through; }

.cart-line-option {
  margin: -3px 0 6px; font-size: 12px; color: var(--ink-soft);
}

@media (max-width: 900px) {
  .variant-choice { padding: 10px 14px; min-height: 44px; }
}


/* ---------------- data freshness (for staff) ---------------- */

.data-status { border-top: 1px solid var(--line); }
.status-line {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; font-size: 13.5px; font-weight: 600;
}
.status-line .dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
  background: var(--ink-soft);
}
/* The one place colour earns its keep in a monochrome theme: staff need to
   read this at a glance, not parse a sentence. */
.status-line.ok .dot { background: #2f9e5e; }
.status-line.warn .dot { background: #d08a1a; }
.status-line.stale .dot { background: #c0392b; }
.status-line.stale { color: #c0392b; }

.status-facts { margin: 0; font-size: 11.5px; line-height: 1.45; }
.status-facts dt { color: var(--ink-soft); }
.status-facts dd { margin: 0 0 5px; }
.status-facts .muted { color: var(--ink-soft); }

/* ------------------------------------------------------ made-to-order state

   Out of stock and made-to-order are different answers, and the theme is
   monochrome, so the distinction cannot lean on colour alone: the sold-out
   badge stays flat grey while a preorder reads as an outlined offer. */
.badge.pre {
  background: #fff; color: var(--ink); border: 1px solid var(--ink);
  font-weight: 600;
}
.stock-pre { font-weight: 600; }
.preorder-note {
  margin: 10px 0 0; padding: 10px 12px;
  border: 1px dashed #bdbdbd; border-radius: 8px; background: var(--accent-soft);
  font-size: 13px; line-height: 1.6; color: var(--ink-soft);
}
.cart-line-pre {
  margin: -3px 0 6px; font-size: 12px; font-weight: 600; color: var(--ink);
}
.cart-line-pre::before { content: "⏳ "; }