/* UNIQLO Mini App Shop — mobile-first, self-contained (no external CSS framework) */

:root {
  /* Fixed, always-readable palette. We deliberately do NOT inherit
     --tg-theme-* for text/bg, because an unexpected theme (e.g. white-on-white)
     can make the whole catalog invisible. UNIQLO brand look is light anyway. */
  --bg:        #ffffff;
  --fg:        #1c1c1e;
  --muted:     #8e8e93;
  --card:      #f2f2f7;
  --accent:    #e60012;   /* UNIQLO red */
  --accent-fg: #ffffff;
  --border:    rgba(0,0,0,0.08);
  --sale:      #e60012;
  --topbar-h:  48px;
  --tabs-h:    44px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* The hidden attribute must always win over component display rules
   (e.g. .cart-overlay{display:flex}) — otherwise hidden overlays stay visible. */
[hidden] { display: none !important; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Khmer OS", sans-serif;
  font-size: 15px; line-height: 1.4;
}
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* ---------- Top bar ---------- */
#topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
}
#title {
  font-weight: 700; font-size: 17px; letter-spacing: 0.5px;
  display: inline-flex; align-items: center; line-height: 1;
}
#titleLogo {
  height: 22px;            /* keeps the red squares crisp + balanced against the 48px topbar */
  width: auto; display: block;
}
#titleText { font-weight: 700; font-size: 17px; }
.icon-btn {
  border: none; background: transparent; color: var(--fg);
  font-size: 22px; line-height: 1; padding: 6px 8px; position: relative;
  border-radius: 8px;
}
.icon-btn:active { background: var(--card); }
/* In-app Back as a clear, obvious pill (the reliable alternative to Telegram's
   native Back). Bigger tap target + red accent so customers use it. */
.back-btn {
  font-size: 28px; font-weight: 700; line-height: 1;
  color: var(--sale, #e60012); padding: 2px 10px;
}
.badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--accent); color: var(--accent-fg);
  font-size: 11px; font-weight: 700; min-width: 17px; height: 17px;
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

/* ---------- Primary audience nav (Row 1: UNIQLO-style uppercase tabs) ---------- */
.primary-nav {
  display: flex; gap: 1px; padding: 0 12px;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.primary-nav::-webkit-scrollbar { display: none; }
.primary-nav-item {
  border: none; background: transparent; color: var(--muted);
  font-size: 14px; font-weight: 700; letter-spacing: 0.6px;
  padding: 12px 5px 14px; position: relative; text-transform: uppercase;
  white-space: nowrap;
}
.primary-nav-item.active { color: var(--fg); }
.primary-nav-item.active::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 6px;
  height: 2px; background: var(--fg); border-radius: 2px;
}

/* ---------- Search ---------- */
.search-bar {
  padding: 0 12px 8px;
  background: var(--bg);
}
/* Grid search box is hidden until the 🔍 button toggles it (JS sets display). */
#searchBar { display: none; }
/* 🔍 toggle pinned to the right end of the audience row (near Baby). */
.primary-nav-search { margin-left: auto; background: none; border: 0; font-size: 17px;
  cursor: pointer; padding: 0 4px; align-self: center; line-height: 1; }
#title { cursor: pointer; }
#brandPrefix { font-size: 14px; font-weight: 700; color: var(--fg); margin-right: 7px;
  letter-spacing: 0; white-space: nowrap; }
@media (max-width: 360px) { #brandPrefix { font-size: 12px; margin-right: 5px; } }
.search-bar input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 14px;
  background: var(--card);
  color: var(--fg);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.search-bar input::placeholder { color: var(--muted); }
.search-bar input:focus { outline: none; border-color: var(--accent); }
/* Hide browser-native clear button for cleaner look */
.search-bar input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---------- Tabs (Row 2 — count pills, compact so all 5 fit on a narrow phone) ---------- */
#tabs {
  display: flex; gap: 4px; overflow-x: auto; padding: 6px 10px 6px;
  scrollbar-width: none;
}
#tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
  font-size: 12.5px; line-height: 1.3; letter-spacing: 0;
}
.tab.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }

/* ---------- Grid ---------- */
.grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  padding: 2px;
}
@media (min-width: 560px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 820px) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

.card { background: var(--card); position: relative; overflow: hidden; }
.card .thumb { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--card); }
.card .info { padding: 8px 8px 12px; }
.card .name {
  font-size: 13px; font-weight: 500; margin: 0 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.5em;
}
.card .price { font-size: 14px; font-weight: 700; }
.card .price .orig { color: var(--muted); font-weight: 400; text-decoration: line-through; margin-left: 6px; font-size: 12px; }
/* Limited-offer deadline line (under the price on cards + detail) */
.limited-until { color: var(--sale); font-size: 11px; font-weight: 600; margin-top: 2px; line-height: 1.3; }
.detail-limited { font-size: 13px; margin-top: 6px; }
.card .colors { color: var(--muted); font-size: 11px; margin-top: 3px; }
.tag-sale {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  background: var(--sale); color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* struck original price (cart items + cart total) */
.ci-orig { color: var(--muted); font-weight: 400; text-decoration: line-through; font-size: 12px; }
.cart-save { color: var(--sale); font-weight: 700; font-size: 13px; margin-bottom: 6px; }

/* ---------- Detail ---------- */
/* Detail is a fixed overlay (like cart/menu) sitting BELOW the shared topbar, so the
   grid stays painted underneath — on iOS/Telegram webviews that keeps the grid's
   images decoded, so Back is instant with no re-load flash. */
#detailView {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 90px;
}
.detail-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.detail-gallery::-webkit-scrollbar { display: none; }
.detail-gallery img { width: 100%; flex: 0 0 100%; aspect-ratio: 3/4; object-fit: cover; scroll-snap-align: center; cursor: zoom-in; }
.detail-body { padding: 16px; }
.detail-name { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.detail-price { font-size: 22px; font-weight: 800; color: var(--accent); }
.detail-price .orig { color: var(--muted); font-weight: 400; text-decoration: line-through; font-size: 15px; margin-left: 8px; }
.section-label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: 0.5px; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  border: 2px solid var(--border); border-radius: 10px; padding: 4px; background: var(--bg);
  width: 56px; text-align: center;
}
.swatch.active { border-color: var(--accent); }
.swatch img { width: 46px; height: 60px; object-fit: cover; border-radius: 6px; }
.swatch span { font-size: 9px; color: var(--muted); display: block; margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.size-pill {
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  border-radius: 8px; padding: 8px 14px; min-width: 44px; text-align: center; font-size: 14px;
}
.size-pill.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }

.detail-link { display: inline-block; margin-top: 18px; color: var(--muted); font-size: 13px; text-decoration: underline; }

/* ---------- Sticky add-to-cart ---------- */
.add-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; align-items: center;
}
.add-btn {
  flex: 1; background: var(--accent); color: var(--accent-fg);
  border: none; border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 700;
}
.add-btn:disabled { opacity: 0.45; }
.add-btn:active:not(:disabled) { filter: brightness(0.92); }

/* ---------- Cart ---------- */
.cart-overlay {
  position: fixed; inset: 0; z-index: 60; background: var(--bg);
  display: flex; flex-direction: column;
}
.cart-head { display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.cart-head h2 { margin: 0; font-size: 17px; }
.cart-items { flex: 1; overflow-y: auto; padding: 8px 16px; }

/* 🏬 Per-store cart tabs — matches the design prototype: text pills (no chip), full store name,
   SOLID-RED active fill + white text, translucent-white count badge on the active pill. */
.cart-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; border-bottom: 1px solid rgba(0,0,0,0.08); flex: none; -webkit-overflow-scrolling: touch; }
.cart-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid rgba(0,0,0,0.12); background: #fff; border-radius: 999px; padding: 7px 13px; cursor: pointer; color: #1c1c1e; font: 700 12.5px/1 -apple-system, sans-serif; white-space: nowrap; touch-action: manipulation; }
.cart-tab.on { border-color: var(--sale); background: rgba(0,0,0,0.07); color: var(--fg); }   /* soft light grey + red outline */
.cart-tab .ct-name { white-space: nowrap; }
.cart-tab .ct-badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--sale); color: #fff; font: 700 10px/16px -apple-system, sans-serif; text-align: center; }
.cart-tab.on .ct-badge { background: #3a3a3f; }
/* store-header row above the items — chip + store name + Remove-all link */
.cart-storehdr { display: flex; align-items: center; gap: 7px; padding: 12px 0 6px; }
.cart-storehdr .csh-name { font: 700 14px/1 -apple-system, sans-serif; color: var(--fg); }
.cart-storehdr .csh-removeall { margin-left: auto; border: none; background: transparent; color: var(--muted); font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 2px 0; }

.cart-item { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.cart-item.oos { opacity: .5; }
.cart-item img { width: 48px; height: 62px; object-fit: cover; border-radius: 7px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); flex: none; cursor: pointer; }
.cart-item .ci-body { flex: 1; min-width: 0; }
.cart-item .ci-top { display: flex; align-items: center; gap: 8px; }
.cart-item .ci-name { flex: 1; min-width: 0; font: 500 13.5px/1.3 -apple-system, sans-serif; color: var(--fg); text-decoration: underline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cart-item .ci-price { flex: none; font: 700 13.5px/1 -apple-system, sans-serif; color: var(--sale); }
.cart-item .ci-price .ci-orig { font-size: 11.5px; }
.cart-item .ci-meta { color: var(--muted); font: 400 12px/1.3 -apple-system, sans-serif; margin-top: 1px; }
.cart-item .ci-qty { font: 600 13.5px/1 -apple-system, sans-serif; color: var(--fg); min-width: 12px; text-align: center; }
.cart-item .qty-row { margin-top: 6px; gap: 10px; }
.cart-item .qty-btn { width: 28px; height: 28px; border-radius: 7px; font-size: 16px; }
.ci-remove { margin-left: auto; color: var(--muted); background: none; border: none; font-size: 12.5px; text-decoration: underline; padding: 2px 0; cursor: pointer; }
.cart-foot { border-top: 1px solid var(--border); padding: 16px; }
.cart-total { display:flex; justify-content: space-between; font-size: 17px; font-weight: 800; margin-bottom: 12px; }
.checkout-btn {
  display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none;
  background: var(--accent); color: var(--accent-fg); border: none; border-radius: 12px;
  padding: 15px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.checkout-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.checkout-btn-secondary {
  background: var(--bg); color: var(--fg); border: 1px solid var(--border); margin-top: 10px;
}
.cart-empty { text-align: center; color: var(--muted); padding: 60px 20px; }

/* ---------- Browser-mode checkout form (when NOT in Telegram Mini App) ---------- */
.checkout-summary {
  background: var(--card); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.checkout-line  { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.checkout-hint  { color: var(--muted); font-size: 13px; margin-top: 8px; line-height: 1.4; }
.checkout-form  { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.checkout-form label { font-size: 13px; font-weight: 600; color: var(--fg); margin-top: 8px; }
.checkout-form input[type="tel"] {
  font: inherit; font-size: 16px;        /* 16px so iOS Safari doesn't zoom on focus */
  padding: 13px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--fg);
  outline: none; -webkit-appearance: none; appearance: none;
}
.checkout-form input[type="tel"]:focus { border-color: var(--accent); background: var(--bg); }
.checkout-error {
  background: rgba(230, 0, 18, 0.08); color: var(--accent);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 8px 0 4px;
}
.checkout-form .checkout-btn { margin-top: 12px; }
.checkout-fineprint { color: var(--muted); font-size: 11px; line-height: 1.4; margin: 10px 0 0; text-align: center; }

.checkout-success { text-align: center; padding: 24px 16px; }
.checkout-success-icon { font-size: 56px; line-height: 1; margin-bottom: 12px; }
.checkout-success h3 { margin: 6px 0; font-size: 18px; word-break: break-all; }
.checkout-success p  { margin: 6px 0 12px; color: var(--fg); }
.checkout-success .checkout-hint { margin-bottom: 18px; }
.checkout-support { font-size: 13px; color: var(--muted); margin-top: 18px !important; }
.checkout-support a { color: var(--accent); text-decoration: none; font-weight: 600; }
.checkout-support a:hover { text-decoration: underline; }

/* ---------- Active filter chip ---------- */
.active-filter { padding: 0 12px 8px; background: var(--bg); }
/* 🏷️ Feature shortcut bar — Sale / Limited / New; sticky in the header on the audience home. */
.feat-bar {
  display: flex; gap: 8px; padding: 8px 12px; background: var(--bg);
  overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--border);
}
.feat-bar::-webkit-scrollbar { display: none; }
.feat-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg); font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.feat-chip.on { background: var(--sale); color: #fff; border-color: var(--sale); }
/* 🖼️ Home promo banner carousel (per store × audience; below the shortcut chips). */
.banner-carousel { position: relative; margin: 0 0 2px; }
.banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.banner-track::-webkit-scrollbar { display: none; }
.banner-slide { flex: 0 0 100%; scroll-snap-align: center; display: block; cursor: pointer; }
.banner-slide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--card); }
.banner-dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.banner-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 2px rgba(0,0,0,.35); transition: width .2s, background .2s; }
.banner-dot.on { background: #fff; width: 18px; border-radius: 3px; }
.banner-slide { position: relative; }
.banner-ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px 18px; text-align: left; pointer-events: none; }
.banner-ov-light { color: #fff; background: linear-gradient(to top, rgba(0,0,0,.52), rgba(0,0,0,.08) 55%, transparent); }
.banner-ov-dark { color: #1c1c1e; background: linear-gradient(to top, rgba(255,255,255,.68), rgba(255,255,255,.12) 55%, transparent); }
.banner-ov-t { font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -.2px; }
.banner-ov-s { font-size: 13px; margin-top: 4px; line-height: 1.35; opacity: .95; }
.banner-ov-red { color: #e60012; background: none; }
.banner-ov-red .banner-ov-t { -webkit-text-stroke: 3px #fff; paint-order: stroke fill; opacity: 1; }
.banner-ov-red .banner-ov-s { -webkit-text-stroke: 2px #fff; paint-order: stroke fill; opacity: 1; }
.banner-ov-whitered { color: #fff; background: none; }
.banner-ov-whitered .banner-ov-t { -webkit-text-stroke: 3px #e60012; paint-order: stroke fill; opacity: 1; }
.banner-ov-whitered .banner-ov-s { -webkit-text-stroke: 2px #e60012; paint-order: stroke fill; opacity: 1; }
.active-filter .chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); color: var(--fg); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 6px 5px 14px; font-size: 13px; font-weight: 600;
}
.active-filter .chip-x {
  border: none; background: transparent; color: var(--muted);
  font-size: 14px; cursor: pointer; padding: 2px 8px; border-radius: 999px;
}
.active-filter .chip-x:active { background: rgba(0,0,0,0.06); color: var(--fg); }

/* ---------- Browse menu overlay (UNIQLO-VN style) ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 70; background: var(--bg);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.menu-head {
  position: sticky; top: 0; z-index: 2; background: var(--bg);
  display: flex; align-items: stretch; justify-content: space-between;
  border-bottom: 1px solid var(--border); padding-right: 4px;
}
.menu-tabs {
  display: flex; gap: 1px; padding: 0 8px; flex: 1;
  overflow-x: auto; scrollbar-width: none;
}
.menu-tabs::-webkit-scrollbar { display: none; }
/* Store name on the right of the drawer head — tells the customer which store's
   categories they are browsing. Shown only when more than one store is enabled. */
.menu-store {
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
  align-self: center; flex: 0 0 auto; margin-right: 4px;
  padding: 4px 11px; font-size: 12px; font-weight: 700; letter-spacing: 0.1px;
  color: var(--muted); border: 1.5px solid var(--sale, #e60012);
  border-radius: 999px; background: transparent;
}
.menu-store { cursor: pointer; }
.menu-store[hidden] { display: none; }
.menu-tab {
  border: none; background: transparent; color: var(--muted);
  font-size: 16px; font-weight: 700; letter-spacing: 0.3px;
  padding: 14px 5px; position: relative; text-transform: uppercase;
  white-space: nowrap;
}
.menu-tab.active { color: var(--fg); }
.menu-tab.active::after {
  content: ''; position: absolute; left: 5px; right: 5px; bottom: 6px;
  height: 2px; background: var(--fg); border-radius: 2px;
}
#menuClose {
  align-self: center;
  border: none; background: transparent; color: var(--fg);
  font-size: 20px; padding: 10px 8px; border-radius: 8px;
}
#menuClose:active { background: var(--card); }

.menu-section-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: 1px; text-transform: uppercase;
  padding: 18px 16px 8px;
}

.menu-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
  background: var(--border);     /* shows as 1px gridlines between tiles */
  padding: 0 0 0 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 560px) { .menu-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 820px) { .menu-grid { grid-template-columns: repeat(6, 1fr); } }

.menu-tile {
  border: none; background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 6px; padding: 18px 8px 14px; min-height: 110px;
  font-size: 11px; font-weight: 600; text-align: center; line-height: 1.25;
  position: relative;
}
.menu-tile:active { background: var(--card); }
.menu-tile .mt-icon { font-size: 28px; line-height: 1; }
/* Photo tiles (UNIQLO-VN style): portrait product preview above the label.
   Frame ratio ≈ UNIQLO's product-image ratio so the garment isn't cropped. */
.menu-tile.has-photo { padding: 6px 6px 12px; justify-content: flex-start; gap: 8px; }
.menu-tile .mt-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: center top; border-radius: 6px; background: #f4f4f6; }
.menu-tile .mt-label { color: var(--fg); }
.menu-tile .mt-count {
  position: absolute; top: 6px; right: 8px;
  color: var(--muted); font-size: 10px; font-weight: 500;
}
.menu-tile.feat .mt-label { color: var(--accent); }

/* ---------- Misc ---------- */
.empty { text-align: center; color: var(--muted); padding: 60px 20px; }
#footer { text-align: center; color: var(--muted); font-size: 11px; padding: 20px 0 40px; }
.qty-row { display: flex; align-items: center; gap: 12px; }
.qty-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-size: 18px; }

/* ════════════════════════════════════════════════════════════════════
   POLISH PASS (v21, 2026-06-01) — visual refinement, perceived speed,
   micro-interactions. Purely additive: no markup/logic depends on this.
   ════════════════════════════════════════════════════════════════════ */

/* Crisper type rendering on retina/mobile */
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Image fade-in (bonus; images are visible by default so
   cached/instant loads can never end up blank) ---------- */
@keyframes imgFade { from { opacity: 0; } to { opacity: 1; } }
.card .thumb.fade-in,
.detail-gallery img.fade-in { animation: imgFade 0.4s ease both; }
/* Soft skeleton tint behind images while they load */
.card .thumb { background: linear-gradient(110deg, #ececf1 30%, #f6f6f9 50%, #ececf1 70%); background-size: 220% 100%; animation: skel 1.3s ease-in-out infinite; }
.card .thumb.fade-in { animation: imgFade 0.4s ease both; }   /* once loaded, stop shimmer */
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Grid: spaced, rounded cards (more premium than edge-to-edge) ---------- */
.grid { gap: 10px; padding: 10px; }
@media (min-width: 560px) { .grid { gap: 12px; padding: 12px; } }

/* ---------- Cards: gentle lift + press feedback ---------- */
.card {
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
}
.card .thumb { border-radius: 11px 11px 0 0; }
@media (hover: hover) {
  .card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.10); transform: translateY(-2px); }
  .card:hover .thumb.fade-in { transform: scale(1.03); }
  .card .thumb { transition: transform 0.35s ease; }
}
.card:active { transform: scale(0.985); }
/* Refined sale/limited badge */
.tag-sale {
  letter-spacing: 0.4px; border-radius: 6px; padding: 3px 7px;
  box-shadow: 0 1px 4px rgba(230,0,18,0.35); backdrop-filter: saturate(1.2);
}
.card .price { letter-spacing: -0.2px; }
/* UNIQLO-VN: discounted price shown in red; the struck original stays grey
   (.orig / .detail-price .orig keep their own muted color). */
.card .price.sale { color: var(--sale); }
.detail-price.sale { color: var(--sale); }

/* ---------- Tabs / pills / nav: smooth state changes ---------- */
.tab, .primary-nav-item, .size-pill, .swatch, .menu-tab, .icon-btn {
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.tab:active, .size-pill:active, .swatch:active { transform: scale(0.94); }
.primary-nav-item.active::after, .menu-tab.active::after { transition: left 0.2s ease, right 0.2s ease; }

/* ---------- Buttons: tactile press ---------- */
.add-btn, .checkout-btn, .qty-btn {
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.15s ease;
}
.add-btn { box-shadow: 0 4px 14px rgba(230,0,18,0.28); }
.add-btn:active:not(:disabled),
.checkout-btn:active:not(:disabled) { transform: scale(0.97); filter: brightness(0.92); }
.qty-btn:active { transform: scale(0.9); background: var(--card); }

/* ---------- Overlays: slide / fade in ---------- */
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
.cart-overlay:not([hidden]) { animation: slideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.menu-overlay:not([hidden]) { animation: fadeIn 0.22s ease; }
#detailView:not([hidden])   { animation: fadeIn 0.22s ease; }

/* ---------- Sticky bars: subtle elevation so they read as "floating" ---------- */
.add-bar { box-shadow: 0 -2px 16px rgba(0,0,0,0.06); }
#topbar  { box-shadow: 0 1px 0 var(--border); }

/* ---------- Detail page refinements ---------- */
.detail-gallery img { border-radius: 0; }
.detail-name { letter-spacing: -0.3px; line-height: 1.3; }
.size-pill, .swatch { transition: all 0.15s ease; }
.size-pill.active, .swatch.active { box-shadow: 0 2px 8px rgba(230,0,18,0.2); }

/* ---------- Cart items: cleaner separation ---------- */
.cart-item img { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.checkout-summary { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

/* ---------- Empty / footer: a touch more breathing room ---------- */
.empty { font-size: 14px; }

/* Sold-out size for the selected color (UNIQLO VN greys these). */
.size-pill.soldout, .size-pill:disabled {
  opacity: .35; text-decoration: line-through; cursor: not-allowed;
  pointer-events: none;
}

/* ---- Telegram full-screen (Bot API 8.0) ---- */
/* Pad the sticky topbar below the device status bar/notch + Telegram's floating
   close/menu buttons, using the SDK-injected safe-area CSS variables. */
/* "Add to Home Screen" button in the hamburger menu (revealed only inside Telegram). */
.add-home-btn {
  display: block; width: calc(100% - 32px); margin: 6px 16px 4px; padding: 13px 14px;
  border: 0; border-radius: 12px; background: #111; color: #fff;
  font-weight: 700; font-size: 15px; cursor: pointer;
}
.add-home-btn:active { opacity: .85; }

/* 📤 Share-to-Telegram button in the active-filter bar (copies a t.me?startapp deep link). */
.active-filter .chip-share {
  margin-left: 8px; border: 1px solid var(--border, #e5e5e5); background: var(--bg, #fff);
  color: inherit; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.active-filter .chip-share:active { opacity: .7; }

/* 📤 Share-this-product button on the detail page (copies a t.me?startapp=p<id> link). */
.detail-share {
  display: inline-block; margin: 6px 0 2px; border: 1px solid var(--border, #e5e5e5);
  background: var(--bg, #fff); color: inherit; border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.detail-share:active { opacity: .7; }

/* 🇯🇵/🇻🇳 store-switcher pill in the audience nav row. */
.primary-nav-store {
  border: none; border-left: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap;
  padding: 12px 6px 14px 8px; margin-left: 3px; cursor: pointer;
}
.primary-nav-store:active { opacity: .55; }

/* Animated (fluttering) Japan flag for the JP Store switcher pill. Self-drawn:
   white field + centred red disc (diameter = 3/5 of height, per the JP flag spec),
   gently waved via a skew/rotate keyframe so it reads as a waving flag — no asset. */
.jpflag {
  display: inline-block; width: 18px; height: 12px; vertical-align: -1px;
  margin-right: 1px; border: 1px solid var(--border); border-radius: 2px;
  background: radial-gradient(circle at 50% 50%, #bc002d 0 3.6px, #fff 4px);
  transform-origin: left center;
  animation: jpwave 1.5s ease-in-out infinite;
}
@keyframes jpwave {
  0%, 100% { transform: skewX(0deg) rotate(0deg); }
  25%      { transform: skewX(-8deg) rotate(-2deg); }
  50%      { transform: skewX(0deg) rotate(0deg); }
  75%      { transform: skewX(8deg) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .jpflag { animation: none; } }

/* GU brand WORDMARK LOGO for the store switcher (GU has no flag — it's a separate brand).
   Boxed navy/yellow 'GU' mark matching the official gu-global logo. */
.guflag {
  display: inline-block; min-width: 23px; height: 16px; vertical-align: middle; position: relative; top: -1px;
  padding: 0 3px; border-radius: 2px; background: #1d2087; color: #ffe800;
  font: 900 11px/16px Arial, Helvetica, sans-serif; text-align: center; letter-spacing: 0.5px;
}
.guflag::before { content: 'GU'; }

/* MUJI brand WORDMARK LOGO for the store switcher — white 'MUJI' on the MUJI red box. */
.mujiflag {
  display: inline-block; min-width: 34px; height: 16px; vertical-align: middle; position: relative; top: -1px;
  padding: 0 4px; border-radius: 2px; background: #7F0019; color: #fff;
  font: 900 10px/16px Arial, Helvetica, sans-serif; text-align: center; letter-spacing: 0.6px;
}
.mujiflag::before { content: 'MUJI'; }
.cocaflag {
  display: inline-block; min-width: 34px; height: 16px; vertical-align: middle; position: relative; top: -1px;
  padding: 0 4px; border-radius: 2px; background: #111; color: #fff;
  font: 800 10px/16px Arial, Helvetica, sans-serif; text-align: center; letter-spacing: 0.4px;
}
.cocaflag::before { content: 'coca'; }
.vnflag {
  display: inline-block; width: 17px; height: 16px; vertical-align: middle; position: relative; top: -1px;
  border-radius: 2px; background: #e60012; color: #fff;
  font: 900 12px/16px Arial, Helvetica, sans-serif; text-align: center;
}
.vnflag::before { content: 'U'; }

/* 🏬 Header store switcher (current store + dropdown). Scoped so production
   (JP disabled) keeps the exact original header — the class is only added when on. */
body.store-switch-on #title { margin-right: auto; }
body.on-detail #title { margin-right: 0; }   /* detail title stays centered even in multi-store mode */
.store-toggle { position: relative; margin-right: 6px; }
.store-toggle-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1.5px solid var(--sale, #e60012); border-radius: 999px; background: var(--bg);
  color: var(--fg); font-size: 13px; font-weight: 700; line-height: 1;
  padding: 6px 10px; cursor: pointer; white-space: nowrap;
}
.store-toggle-btn:active { background: var(--card); }
.store-caret { font-size: 10px; color: var(--muted); }
.store-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 156px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 11px;
  box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 5px; z-index: 60;
}
.store-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: transparent; color: var(--fg);
  font-size: 14px; font-weight: 600; padding: 9px 10px; border-radius: 7px;
  cursor: pointer; text-align: left;
}
.store-opt:active { background: var(--card); }
.store-opt-name { flex: 1; white-space: nowrap; }
.store-opt-check { color: var(--sale, #e60012); font-weight: 800; }

/* Two-line product name for the JP/GU brand stores: Japanese on top (authentic),
   English translation underneath (muted). VN products keep the single .name line. */
.card .name.name-ja { margin-bottom: 1px; }
.card .name-en {
  margin: 0; font-size: 12px; font-weight: 400; color: var(--muted);
  line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail-name-en {
  margin: -2px 0 8px; font-size: 14px; font-weight: 500; color: var(--muted); line-height: 1.35;
}

/* Collection picker tiles (collab brands) — laid out in the product grid. */
.collab-tile {
  border: 1px solid var(--border); background: var(--bg); border-radius: 12px;
  overflow: hidden; cursor: pointer; padding: 0; text-align: center;
  display: flex; flex-direction: column;
}
.collab-tile .ct-photo {
  aspect-ratio: 1 / 1; background: var(--card, #f4f4f4);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.collab-tile .ct-photo img { width: 100%; height: 100%; object-fit: cover; }
.collab-tile .ct-meta { padding: 10px 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.collab-tile .ct-name { font-size: 14px; font-weight: 700; color: var(--fg); line-height: 1.25; }
.collab-tile .ct-count { font-size: 12px; color: var(--muted); }
.collab-tile:active { opacity: .85; }
.chip.chip-back { cursor: pointer; }


/* 👗 Styling gallery (公式 official + StyleHint customer posts) on the product detail page.
   Horizontal scroll strip of UGC photos; tap → fullscreen overlay. (app.js loadStyling / openStylingImg) */
.styling-section { margin: 14px 0 4px; }
.styling-strip {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; padding: 2px 0 6px;
}
.styling-strip::-webkit-scrollbar { height: 0; }
.styling-card {
  flex: 0 0 auto; width: 132px; border: 0; padding: 0; margin: 0; background: #f2f2f4;
  border-radius: 10px; overflow: hidden; position: relative; cursor: pointer; scroll-snap-align: start;
}
.styling-card img { width: 132px; height: 176px; object-fit: cover; display: block; }
.styling-card:active { opacity: .85; }
.styling-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px;
  font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.55));
  text-align: left;
}
.styling-img-ov {
  display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.92);
}
.styling-img-track {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.styling-img-track::-webkit-scrollbar { height: 0; }
.styling-img-slide {
  flex: 0 0 100%; height: 100%; scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
}
.styling-img-slide img {
  max-width: 100%; max-height: 92vh; border-radius: 10px;
  transform-origin: center center; will-change: transform;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
.styling-img-close {
  position: absolute; top: 14px; right: 18px; color: #fff; font-size: 28px; line-height: 1;
  z-index: 2; cursor: pointer;
}


/* ============================================================
   DESKTOP OPTIMIZATION (added 2026-06-21)
   Gated on a REAL mouse/trackpad desktop: min-width 1024px AND
   pointer:fine AND hover:hover. A phone/tablet touchscreen reports
   pointer:coarse, so it can NEVER match this block — the mobile /
   iPhone-Safari layout is left 100% untouched. The app is mobile-
   first / full-bleed; on a wide desktop browser that stretched the
   grid into giant 4-up cards and made the product page one
   full-screen image. These rules just CAP + CENTER the content.
   ============================================================ */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  /* Sticky header: center its content (the bar background stays
     edge-to-edge so it still reads as a full-width site header). */
  .topbar-inner, .primary-nav, #tabs, .active-filter, .feat-bar, .search-bar {
    max-width: 1200px; margin-left: auto; margin-right: auto;
  }

  /* Product grid: cap the width so 4 columns are a normal card size
     instead of ~475px monsters, and center it on the page. */
  .grid { max-width: 1200px; margin-left: auto; margin-right: auto; }
  /* Home promo banner shouldn't be a full-bleed giant either. */
  .banner-carousel { max-width: 1200px; margin-left: auto; margin-right: auto; }

  /* ---- Product detail = centered column, image not full-screen ---- */
  .detail-gallery, .detail-body {
    max-width: 560px; margin-left: auto; margin-right: auto;
  }
  /* Sticky "Add to cart / Select a size" bar centers to the column. */
  .add-bar {
    max-width: 560px; margin-left: auto; margin-right: auto;
    border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  }

  /* ---- Cart / checkout = centered column ---- */
  .cart-head, .cart-items, .cart-foot {
    max-width: 600px; margin-left: auto; margin-right: auto; width: 100%;
  }

  /* ---- Category drawer = centered (tiles already 6-up, just cap) ---- */
  .menu-head, .menu-section-label, .menu-grid {
    max-width: 1120px; margin-left: auto; margin-right: auto;
  }
}


/* 📜 scroll-collapse (app.js toggles body.hdr-slim on scroll direction): hide the audience pills +
   feature chips while scrolling down — taller grid; row 1 (MEN/WOMEN/KIDS/BABY + mini_app) stays. */
#tabs, .feat-bar { max-height: 60px; overflow-y: hidden; transition: max-height .25s ease, opacity .2s ease, padding .25s ease; }
body.hdr-slim #tabs, body.hdr-slim .feat-bar {
  max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0;
}

/* ✨ Lookbook (curated IG) cards + fullscreen viewer */
.lookbook-card{position:relative}
.lookbook-card .lb-badge{position:absolute;top:6px;right:6px;background:rgba(15,15,20,.66);color:#fff;font-size:11px;font-weight:700;line-height:1;padding:3px 7px;border-radius:999px;backdrop-filter:blur(2px)}
.lb-shopbadge{position:absolute;bottom:7px;left:7px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.72);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);color:#1c1c1e;line-height:1;width:20px;height:20px;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.22)}
#lookbookOv{position:fixed;inset:0;z-index:10000;background:#0b0b0e;display:none;flex-direction:column}
#lookbookOv.on{display:flex}
#lookbookOv .lb-track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;min-height:0}
#lookbookOv .lb-slide{position:relative;flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;background:#0b0b0e}
/* ▶ shown only while the video is paused, so a customer can always tell playback stopped.
   pointer-events:none — the tap must reach the video underneath and resume it. */
#lookbookOv .lb-playchip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.82);width:74px;height:74px;border-radius:50%;background:rgba(18,18,22,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:4}
#lookbookOv .lb-playchip svg{margin-left:4px}
#lookbookOv .lb-playchip.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#lookbookOv .lb-slide img,#lookbookOv .lb-slide video{max-width:100%;max-height:100%;object-fit:contain}
#lookbookOv .lb-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 52px);right:12px;z-index:2;width:44px;height:44px;border:none;border-radius:50%;background:rgba(58,58,64,.82);color:#fff;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
#lookbookOv .lb-foot{position:absolute;left:0;right:0;bottom:0;padding:56px 16px calc(env(safe-area-inset-bottom,0px) + 16px);background:linear-gradient(to top,rgba(8,8,12,.94),rgba(8,8,12,.74) 40%,rgba(8,8,12,.34) 72%,transparent);pointer-events:none}
#lookbookOv.lb-nograd .lb-foot{background:none}
/* 📝 Clamped to 3 lines so a long caption never swallows the photo; the shadow keeps it legible
   over a pale frame, where the scrim alone is not enough. Tap to read the rest. */
/* panel: background + padding only — never clips, so no partial line can bleed into the padding */
#lookbookOv .lb-cap{color:#fff;font-size:13.5px;line-height:1.45;margin:0 auto 8px;max-width:640px;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  background:rgba(10,10,14,.52);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border-radius:12px;padding:9px 12px;pointer-events:auto;cursor:pointer}
/* inner span does the clamping, so the cut lands exactly on the last line */
#lookbookOv .lb-captext{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
#lookbookOv .lb-cap.on .lb-captext{display:block;max-height:38vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
#lookbookOv .lb-capmore{display:block;margin:0 auto 10px;max-width:640px;color:rgba(255,255,255,.82);
  font-size:12px;font-weight:600;letter-spacing:.2px;text-shadow:0 1px 3px rgba(0,0,0,.6);
  background:none;border:0;padding:0;cursor:pointer;pointer-events:auto}
#lookbookOv .lb-shop{pointer-events:auto;display:block;width:100%;max-width:640px;margin:0 auto;background:var(--sale,#e60012);color:#fff;border:none;border-radius:12px;padding:13px;font-size:15px;font-weight:800;cursor:pointer;letter-spacing:.01em}
@keyframes lbReelUp{from{opacity:.35;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes lbReelDown{from{opacity:.35;transform:translateY(-26px)}to{opacity:1;transform:none}}
#lookbookOv.reel-up .lb-track,#lookbookOv.reel-up .lb-foot{animation:lbReelUp .2s ease}
#lookbookOv.reel-down .lb-track,#lookbookOv.reel-down .lb-foot{animation:lbReelDown .2s ease}

/* ✨ Lookbook: auto-playing video thumbnail in the Styling strip */
.lookbook-card .lb-thumbvid{width:100%;height:100%;object-fit:cover;display:block}

/* ✨ Lookbook multi-product picker (bottom sheet) */
#lbPickOv{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center}
#lbPickOv.on{display:flex}
.lb-pick-sheet{background:#fff;width:100%;max-width:560px;border-radius:16px 16px 0 0;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 14px);max-height:80vh;overflow:auto}
.lb-pick-hd{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 10px;font-size:15px}
.lb-pick-x{border:none;background:none;font-size:18px;cursor:pointer;color:#888}
.lb-pick-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid #eee;border-radius:12px;padding:8px;margin-bottom:8px;background:#fff;cursor:pointer}
.lb-pick-item img{width:56px;height:70px;object-fit:cover;border-radius:8px;background:#f2f2f4;flex:0 0 auto}
.lb-pick-item .lb-pick-meta{flex:1;min-width:0}
.lb-pick-item .nm{font-size:14px;font-weight:600;color:#1a1a1f;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lb-pick-item .pz{font-size:13px;color:#e60012;font-weight:700;margin-top:2px}
.lb-pick-item .go{color:#c0c0c8;font-size:22px}

/* 👆 Swipe affordance for fullscreen media viewers (lookbook + photo zoom) — side arrows + counter */
#lookbookOv .swipe-arrow,.styling-img-ov .swipe-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:7;width:42px;height:42px;padding:0;border:none;border-radius:50%;background:rgba(0,0,0,.42);color:#fff;font-size:28px;line-height:42px;text-align:center;cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .2s}
#lookbookOv .swipe-arrow.prev,.styling-img-ov .swipe-arrow.prev{left:10px}
#lookbookOv .swipe-arrow.next,.styling-img-ov .swipe-arrow.next{right:10px}
#lookbookOv .swipe-arrow.off,.styling-img-ov .swipe-arrow.off{opacity:0;pointer-events:none}
#lookbookOv .swipe-count,.styling-img-ov .swipe-count{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:7;background:rgba(0,0,0,.5);color:#fff;font-size:13px;font-weight:600;padding:3px 11px;border-radius:999px;letter-spacing:.4px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.swipe-hint-on .swipe-arrow.prev:not(.off){animation:swipeNudgeL .85s ease-in-out 3}
.swipe-hint-on .swipe-arrow.next:not(.off){animation:swipeNudgeR .85s ease-in-out 3}
@keyframes swipeNudgeL{0%,100%{transform:translateY(-50%)}50%{transform:translate(-6px,-50%)}}
@keyframes swipeNudgeR{0%,100%{transform:translateY(-50%)}50%{transform:translate(6px,-50%)}}

/* ======================================================================
   🎨 THEME — OPTION 2 (design handoff 2026-07-22)
   Calmer, tighter, editorial. Everything here is scoped to body.theme-2, so
   Option 1 (the original look) is byte-for-byte unchanged when the flag is off.
   Enabled per-env: _env.php site_theme=option2 → store_config.php → app.js.
   ====================================================================== */

/* --- Promo strip: one calm centred line, no marquee --- */
/* ⚠️ The ticker is built in JS with INLINE styles (background, padding:4px 0 4px 100%,
   colour, and the marquee animation), so every property we override here needs !important —
   without it the inline 100% left-padding keeps the text parked off-screen. */
body.theme-2 #miniAppTicker {
  background: #fff5f5 !important;
  border-top: 1px solid #fde3e3 !important;
  border-bottom: 1px solid #fde3e3 !important;
}
/* The promo strip KEEPS SCROLLING in Option 2 (owner's call — the spec's static centred line was
   tried and rejected: a static line has to ellipsise, so the end of the message is never read).
   Only the colours are calmed; the marquee animation and the inline padding that drives it are
   left alone. ⚠️ renderTicker() sets `padding: 4px 0 4px 100%` and the animation INLINE, so any
   override here needs !important — and overriding padding/animation stops the scroll dead. */
body.theme-2 #miniAppTicker > span {
  color: #c8000f !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* 🛒 Collapsed header shows the CART instead of SEARCH.
   When the identity row folds away on scroll-down it takes the cart + item badge with it, so the
   customer can no longer see what they have added. In that state the category row swaps its 🔍 for a
   cart twin (#navCartBtn, built in buildPrimaryNav and kept in sync by updateCartBadge).
   Expanded header keeps 🔍 — the real cart is visible in the identity row, so no duplicate. */
body.theme-2 #navCartBtn { display: none; }
body.theme-2.hdr-slim #navCartBtn { display: inline-flex; position: relative; }
body.theme-2.hdr-slim .primary-nav-search:not(#navCartBtn) { display: none; }
body.theme-2 #navCartBtn .badge {
  position: absolute; top: -2px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--sale); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* --- Grid: tighter --- */
body.theme-2 .grid { gap: 6px; padding: 6px; }
@media (min-width: 560px) { body.theme-2 .grid { gap: 8px; padding: 8px; } }

/* --- Cards: frameless, full-bleed image --- */
body.theme-2 .card {
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.theme-2 .card .thumb { border-radius: 0; }
@media (hover: hover) {
  body.theme-2 .card:hover { box-shadow: none; transform: none; }
  body.theme-2 .card:hover .thumb.fade-in { transform: none; }
}

/* --- Card info: 3 tight lines --- */
body.theme-2 .card .info {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 2px 12px;
}
body.theme-2 .card .name {
  font-size: 13.5px; font-weight: 600; margin: 0;
  -webkit-line-clamp: 2; min-height: 0;
}
/* bilingual (JP/GU/coca): each language stays on ONE row — app.js mid-ellipsises the text */
body.theme-2 .card .name.name-ja {
  -webkit-line-clamp: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; margin: 0;
}
body.theme-2 .card .name-en {
  font-size: 12px; -webkit-line-clamp: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; display: block; margin: 0;
}
/* price + colours share one row */
body.theme-2 .card .price {
  font-size: 15px; font-weight: 800; color: #1c1c1e;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap;
  white-space: nowrap; overflow: hidden;
}
body.theme-2 .card .price.sale { color: var(--sale); }
body.theme-2 .card .price .orig { font-size: 12px; margin-left: 0; }
body.theme-2 .card .colors-inline {
  color: var(--muted); font-size: 12px; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
body.theme-2 .card .limited-until {
  font-size: 11px; font-weight: 600; margin-top: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 📜 THEME 2 SCROLLS THE GRID, NOT THE DOCUMENT.
   In Telegram/Facebook's in-app browser the toolbar collapses on scroll and the app fills the
   newly-exposed strip with page content that has just scrolled above the window — so a band of
   product images appears above the header. It cannot be covered from inside the page (a shield,
   a fixed header, an upward box-shadow and visualViewport re-pinning were all tried and clipped).
   The fix is to leave nothing up there to show: the DOCUMENT never scrolls, #gridView does.
   Verified on-device 2026-07-22 — the band disappears entirely.
   The detail / cart / menu overlays are position:fixed with their own scrolling, so they are
   unaffected. Scoped to theme 2; theme 1 keeps window scrolling unchanged. */
html.theme-2, body.theme-2 { overscroll-behavior: none; }
body.theme-2 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  height: 100svh;          /* smallest viewport wins where supported → container never exceeds the visible area */
  height: var(--app-vh, 100svh);   /* JS pins this to the EXACT visible innerHeight — iOS in-app browsers (Telegram/Safari) report 100dvh TALLER than visible, letting you scroll/bounce into empty space below the footer */
  overflow: hidden;
}
body.theme-2 #topbar  { position: static; flex: 0 0 auto; }
body.theme-2 #gridView {
  flex: 1 1 auto;
  min-height: 0;           /* without this a flex item refuses to shrink and the box never scrolls */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;   /* none (not contain) → no iOS elastic bounce past the last row into empty space */
}
body.theme-2 #footer { padding: 14px 0 16px; }   /* compact footer so the last product row sits near the bottom, not pushed up by a tall footer */
/* The infinite-scroll sentinel is zero-height; a zero-area target produces an EMPTY intersection
   rect and the IntersectionObserver never fires (verified — paging silently stopped at 24 items).
   1px is invisible but observable. Scoped to theme 2 so theme 1 stays untouched. */
body.theme-2 #loadMoreSentinel { min-height: 1px; }

/* Card names are kept to ONE row. midEllipsis() shortens from the middle (the tail carries the
   distinguishing words), but a character limit is only an approximation in a proportional font —
   so nowrap+ellipsis is the hard guarantee that a long name can never wrap and shove the price
   line down, which is what breaks the grid's rhythm. */
body.theme-2 .card .name,
body.theme-2 .card .name-en {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Header: direction-based collapse — scrolling DOWN folds the identity row (logo / store switcher
       / cart), the promo strip, the category tabs and the feature row; scrolling UP (or being near the
       top) restores them. The audience nav (#primaryNav) always stays pinned.

   This matches the design spec. The identity row was TEMPORARILY left un-collapsed while the in-app
   browser painted a band of scrolled-past products above the header — with the row gone, the top of
   the screen read as products floating over a bare nav row. That band is now genuinely fixed (the
   document no longer scrolls; #gridView does), so the workaround is retired and the row folds again,
   giving the grid the full header height back. --- */
body.theme-2.hdr-slim #miniAppTicker,
body.theme-2.hdr-slim .topbar-inner {
  max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;
  border-top-width: 0; border-bottom-width: 0;
  overflow-y: hidden;
  transition: max-height 1s cubic-bezier(0.16,1,0.3,1), opacity .7s ease, padding 1s cubic-bezier(0.16,1,0.3,1);
}
/* 📜 ASYMMETRIC COLLAPSE (owner call): folding away is quick, coming back is slow and soft
   (restore ~2s, collapse ~1s — both raised from .25s/.9s at the owner's request). Each state's `transition` governs the move INTO it — so the EXPANDED rule below is what
   plays when the header restores, and the .hdr-slim rule above is what plays when it collapses.
   Don't "tidy" these into one shared transition or the restore snaps back. */
body.theme-2 #miniAppTicker,
body.theme-2 .topbar-inner {
  transition: max-height 2s cubic-bezier(0.16,1,0.3,1), opacity 1.2s ease, padding 2s cubic-bezier(0.16,1,0.3,1);
  max-height: 120px;
}
/* the rows Option 1 also collapses — same asymmetry, scoped to theme 2 so Option 1 is untouched */
body.theme-2 #tabs,
body.theme-2 .feat-bar { transition: max-height 2s cubic-bezier(0.16,1,0.3,1), opacity 1.2s ease, padding 2s cubic-bezier(0.16,1,0.3,1); }
body.theme-2.hdr-slim #tabs,
body.theme-2.hdr-slim .feat-bar { transition: max-height 1s cubic-bezier(0.16,1,0.3,1), opacity .7s ease, padding 1s cubic-bezier(0.16,1,0.3,1); }

/* 📸 LOOKBOOK FEED — a content feed of vertical review clips, not a product listing.
   PORTRAIT 4:5 tiles 3-up (Instagram profile grid). Square crops were rejected: the source is
   vertical and often carries text burned into the frame at top/bottom, which 1:1 cuts off.
   Scoped to theme 2 AND the lookbook_nav flag, so it is inert everywhere else. */
body.theme-2.lb-nav #lookbookView {
  flex: 1 1 auto;
  min-height: 0;                 /* same flex rule as #gridView, or the box never scrolls */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #fff;
}
body.theme-2.lb-nav .lb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

/* 📸 Feed sub-tabs — Instagram profile-tab bar: sticky, flex, underline-on-active (no pills).
   The buttons carry their own inline styles (built in app.js to match the design prototype exactly);
   this only styles the sticky container. Safe-area top sits ON the bar so the notch area is filled. */
body.theme-2.lb-nav #lbSubtabs {
  position: sticky; top: 0; z-index: 8;
  display: flex; align-items: center;
  background: #fff; border-bottom: 1px solid rgba(0,0,0,0.08);
  padding-top: env(safe-area-inset-top, 0px);
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.theme-2.lb-nav .lb-grid { grid-template-columns: repeat(5, 1fr); max-width: 1120px; margin: 0 auto; gap: 4px; }
}
body.theme-2.lb-nav .lb-tile {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  touch-action: manipulation;                 /* no double-tap zoom on the grid either */
  -webkit-tap-highlight-color: transparent;
  background: var(--card);
  aspect-ratio: 4 / 5;           /* portrait — matches the source media and the IG grid */
  overflow: hidden;
  cursor: pointer;
}
body.theme-2.lb-nav .lb-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.theme-2.lb-nav .lb-badge {
  position: absolute; top: 6px; right: 6px;
  font-size: 13px; line-height: 1; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  pointer-events: none;
}
/* .lb-shop in feed uses the full-width red bar (#lookbookOv .lb-shop); the old absolute/left:6px override was removed (it overflowed the right edge + broke centering) */
body.theme-2.lb-nav .lb-empty {
  text-align: center; color: var(--muted);
  font-size: 14px; line-height: 1.7; padding: 72px 28px;
}
body.theme-2.lb-nav .lb-empty span { font-size: 13px; }

/* 📸 HEADERLESS FEED — the shop header is hidden while a Lookbook feed is open, so the
   content fills the screen like an IG profile grid. The floating nav is the only chrome and the
   only way back. body.theme-2 is a flex column, so removing the header simply lets the feed take
   the full height; the document still doesn't scroll, so the in-app-browser band cannot return. */
body.theme-2.lb-nav.lb-feed #topbar { display: none; }
/* feed top safe-area now lives on the sticky #lbSubtabs bar (IG-style), not the scroll box */

/* 📸 FLOATING BOTTOM NAV — pill, browse views only, gated on theme 2 + the lookbook flag.
   Direction behaviour is the INVERSE of the header (owner call): visible at rest, SHOWS on
   scroll-down, HIDES on scroll-up. That is deliberate — the header collapses on scroll-down and
   restores on scroll-up, so exactly one cart is on screen at any moment, never two. */
body.theme-2.lb-nav #lbNav {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 60;
  display: flex; align-items: center; gap: 8px;
  padding: 2px;
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  transition: transform .28s cubic-bezier(0.16,1,0.3,1), opacity .2s ease;
  touch-action: manipulation;
}
body.theme-2.lb-nav #lbNav[hidden] { display: none; }
/* hidden while scrolling UP — slide down out of the way, don't unmount */
body.theme-2.lb-nav.lb-nav-off #lbNav { transform: translateX(-50%) translateY(140%); opacity: 0; pointer-events: none; }
/* Custom inline-SVG line icons (house/camera/storefront/cart), IG palette — dark #1c1c1e, no red.
   Active tab = soft dark-grey CIRCLE behind the icon (not a red fill). Cart is a shortcut → never active. */
body.theme-2.lb-nav .lb-nav-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; padding: 0; border-radius: 999px; color: #1c1c1e;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
body.theme-2.lb-nav .lb-nav-btn .lb-ring { position: absolute; inset: 2px; border-radius: 999px; background: transparent; }
body.theme-2.lb-nav .lb-nav-btn.on .lb-ring { background: rgba(0,0,0,0.14); }
body.theme-2.lb-nav .lb-nav-btn .lb-ic { position: relative; display: inline-flex; line-height: 1; }
body.theme-2.lb-nav .lb-nav-btn .lb-ic svg { display: block; }
body.theme-2.lb-nav .lb-nav-btn .badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  background: var(--sale); color: #fff; font: 700 9px/15px -apple-system, sans-serif; text-align: center;
  border: 1.5px solid #fff;
}
/* the bar floats over content — give every browse scroll box room so the last row clears it */
body.theme-2.lb-nav #lookbookView { padding-bottom: 68px; }   /* fullscreen feed keeps a separate clearance (no footer there) */
body.theme-2.lb-nav #footer { padding: 22px 0 22px; }   /* GRID: footer text stays visible (owner's ask); it doubles as the nav clearance so the floating nav sits over its bottom edge — last product row ends just above the nav, no void, no over-scroll */
/* 🛒 With the nav ON its cart replaces the collapsed-header twin (handoff B.2). The twin
   stays for the flag-OFF case, where the collapsed header would otherwise have no cart at all. */
body.theme-2.lb-nav #navCartBtn { display: none !important; }
body.theme-2.lb-nav.hdr-slim .primary-nav-search:not(#navCartBtn) { display: inline-flex; }

/* 🚫 NO ACCIDENTAL DOUBLE-TAP ZOOM, SITE-WIDE (owner request 2026-07-22).
   A quick second tap on a button used to fire iOS double-tap-to-zoom, leaving the page zoomed and
   the floating nav off-centre. NOTE: `user-scalable=no` / `maximum-scale=1` in the viewport meta
   does NOT prevent this — iOS Safari has ignored those since iOS 10 for accessibility. Only
   touch-action works.

   DELIBERATELY BOTH THEMES (not scoped to .theme-2): it's a device-behaviour fix, not a look, and
   Option 1 has the same problem.

   `pan-x pan-y` = scrolling only — BOTH double-tap AND pinch zoom are off (owner's call
   2026-07-22, asked for explicitly after seeing the double-tap fix).

   ⚠️ The product-photo and lookbook viewers are UNAFFECTED: their zoom is our own
   (`enablePinchZoom` in app.js applies transforms from touch events and preventDefaults), not the
   browser's. Customers can still pinch a product photo inside the fullscreen viewer — they just
   can't zoom the page chrome. Those tracks set their own touch-action, so keep that intact. */
html, body { touch-action: pan-x pan-y; }

/* The three custom-zoom tracks take FULL gesture control back, so `enablePinchZoom()` keeps
   working inside the fullscreen viewers (it reads raw touch events and preventDefaults). Without
   this they would inherit `pan-x pan-y` from <body> and the browser would fight the handler. */
.lb-track, .styling-img-track { touch-action: pan-x; }   /* pan-x = native horizontal swipe works; enablePinchZoom flips to 'none' only while zoomed */

/* 🏬 STORE PICKER — a popover sitting just ABOVE the floating nav, not a full screen.
   Its backdrop stops short of the bar (bottom offset) and the nav has a higher z-index, so the
   customer can still tap Home / All / Cart to leave without choosing. Re-tapping Store closes it. */
#lbStoreOv {
  position: fixed; inset: 0 0 76px 0;      /* leave the nav uncovered */
  z-index: 55;                              /* under #lbNav (60) */
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 12px 10px;
  background: rgba(0,0,0,0.28);
  animation: lbFade .18s ease;
}
@keyframes lbFade { from { opacity: 0 } to { opacity: 1 } }
#lbStoreOv .lb-store-sheet {
  width: 100%; max-width: 420px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.22);
  overflow: hidden;
}
#lbStoreOv .lb-store-row {
  appearance: none; width: 100%; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; text-align: left;
  border-bottom: 1px solid var(--border);
  touch-action: manipulation;
}
#lbStoreOv .lb-store-row:last-child { border-bottom: 0; }
#lbStoreOv .lb-store-row:active { background: #f7f7fa; }
#lbStoreOv .lb-store-chip { flex: 0 0 auto; display: inline-flex; align-items: center; }
#lbStoreOv .lb-store-name {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px;
  font: 700 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Khmer OS", sans-serif;
  color: var(--fg);
}
#lbStoreOv .lb-store-n { font-weight: 400; font-size: 12px; line-height: 1.2; color: var(--muted); }
#lbStoreOv .lb-store-go { flex: 0 0 auto; color: var(--muted); font-size: 20px; line-height: 1; }
#lbStoreOv .lb-store-none { margin: 0; padding: 22px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* toast — switching store swaps the cart too, so say the old one is safe */
#lbToast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(10px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
  z-index: 70; max-width: 92vw;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(28,28,30,0.94); color: #fff;
  font: 600 12.5px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Khmer OS", sans-serif;
  text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
#lbToast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 🛒 SHOP-OVER-MEDIA SHEET — metrics taken from the design prototype's ③ LOOKBOOK phone,
   not improvised: bordered product cards, store buttons side by side, a titled header with ✕.
   Sits ABOVE the fullscreen viewer (z-index 10000) so it covers the still-playing video. */
#lbShopOv {
  position: fixed; inset: 0; z-index: 10010;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: rgba(0,0,0,0.45);
  touch-action: manipulation;
}
#lbShopOv .lb-sheet {
  background: #fff; border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column;
  max-height: 85vh; max-height: 85dvh;
  touch-action: manipulation;
  animation: lbUp .22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes lbUp { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }
#lbShopOv .lb-sheet-grip { width: 36px; height: 4px; border-radius: 999px; background: #d8d8dd; margin: 8px auto 4px; flex: none; }

/* header (picker): title + ✕ */
#lbShopOv .lb-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px 12px; flex: none; }
#lbShopOv .lb-sheet-h { margin: 0; font-weight: 800; font-size: 15.5px; line-height: 1.2; color: var(--fg); white-space: nowrap; }
#lbShopOv .lb-sheet-x { border: none; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; padding: 2px 4px; cursor: pointer; flex: none; touch-action: manipulation; }

/* STEP 1 — picker: horizontal card (thumb | name + store buttons), short store labels */
#lbShopOv .lb-sheet-list { overflow-y: auto; padding: 0 14px 16px; }
#lbShopOv .lb-sheet-card { background: #fafafa; border: 1px solid rgba(0,0,0,0.06); border-radius: 13px; padding: 9px; margin-bottom: 8px; }
#lbShopOv .lb-sheet-cardtop { display: flex; gap: 10px; align-items: center; }
#lbShopOv .lb-sheet-card img { width: 52px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--card); flex: none; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
#lbShopOv .lb-sheet-cardcol { flex: 1; min-width: 0; }
#lbShopOv .lb-sheet-name { margin: 0; font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lbShopOv .lb-sheet-stores { display: flex; gap: 8px; margin-top: 8px; }
#lbShopOv .lb-sheet-store { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; border: 1px solid rgba(0,0,0,0.1); background: #fff; border-radius: 10px; padding: 7px 8px; cursor: pointer; text-align: left; touch-action: manipulation; }
#lbShopOv .lb-sheet-store:active { background: #f7f7fa; }
#lbShopOv .lb-ss-name { font-weight: 600; font-size: 12px; line-height: 1; color: #3a3a3f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lbShopOv .lb-ss-price { margin-left: auto; padding-left: 4px; font-weight: 800; font-size: 13px; line-height: 1; color: var(--sale); flex: none; }

/* STEP 2 — variant: top bar (round back + ✕), light product panel, round swatches */
#lbShopOv .lb-sheet-bar { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; flex: none; }
#lbShopOv .lb-sheet-bar-sp { flex: 1; }
#lbShopOv .lb-sheet-back { border: none; background: #f2f2f4; color: var(--fg); width: 30px; height: 30px; border-radius: 999px; font-size: 19px; line-height: 1; cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; }
#lbShopOv .lb-sheet-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 0 16px 4px; }
#lbShopOv .lb-sheet-top { display: flex; gap: 13px; align-items: stretch; background: #f7f7f8; border-radius: 14px; padding: 11px; }
#lbShopOv .lb-sheet-top img { width: 76px; align-self: stretch; object-fit: cover; border-radius: 10px; background: var(--card); flex: none; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
#lbShopOv .lb-sheet-topcol { flex: 1; min-width: 0; }
#lbShopOv .lb-sheet-topcol .lb-sheet-name { font-size: 14.5px; }
#lbShopOv .lb-sheet-store-line { display: inline-flex; align-items: center; gap: 5px; margin: 5px 0 0; font-weight: 600; font-size: 11px; line-height: 1; color: var(--muted); }
#lbShopOv .lb-sheet-price { margin: 6px 0 0; font-weight: 800; font-size: 18px; line-height: 1; color: var(--sale); display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
#lbShopOv .lb-sheet-orig { font-weight: 400; font-size: 13px; line-height: 1; color: #a0a0a6; text-decoration: line-through; }
#lbShopOv .lb-sheet-free { display: inline-block; font-weight: 700; font-size: 11px; line-height: 1; color: #1a7f37; background: #e7f6ec; border-radius: 6px; padding: 4px 7px; margin: 7px 0 0; }
#lbShopOv .lb-sheet-lab { font-weight: 700; font-size: 11px; line-height: 1; color: var(--muted); letter-spacing: .6px; text-transform: uppercase; margin: 18px 0 9px; }
#lbShopOv .lb-sheet-labval { font-weight: 600; font-size: 13px; color: var(--fg); letter-spacing: 0; text-transform: none; margin-left: 6px; }
#lbShopOv .lb-sheet-sw { display: flex; gap: 12px; flex-wrap: wrap; }
#lbShopOv .lb-sw { position: relative; width: 36px; height: 36px; border-radius: 999px; padding: 0; cursor: pointer; border: 2px solid rgba(0,0,0,0.12); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); touch-action: manipulation; }
#lbShopOv .lb-sw.on { border-color: var(--sale); }
#lbShopOv .lb-sw-fill { position: absolute; inset: 3px; border-radius: 999px; background: var(--card) center/cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
#lbShopOv .lb-sw-pre { position: absolute; top: -7px; right: -7px; font-size: 12px; }
#lbShopOv .lb-sheet-pre { margin-top: 13px; padding: 10px 12px; background: #eef4ff; border: 1px solid #d3e2ff; border-radius: 11px; font-weight: 600; font-size: 12px; line-height: 1.4; color: #0a5bd0; }
#lbShopOv .lb-sheet-sizes { display: flex; gap: 9px; flex-wrap: wrap; }
#lbShopOv .lb-size { min-width: 50px; padding: 11px 14px; border-radius: 11px; cursor: pointer; border: 1.5px solid var(--border); background: #fff; color: var(--fg); font-weight: 700; font-size: 14px; line-height: 1; touch-action: manipulation; }
#lbShopOv .lb-size.on { border-color: var(--sale); background: var(--sale); color: #fff; }
#lbShopOv .lb-size.soldout { color: #c3c3c9; text-decoration: line-through; opacity: .55; pointer-events: none; }
#lbShopOv .lb-sheet-low { display: inline-block; font-weight: 700; font-size: 12px; line-height: 1; color: var(--sale); background: #fdecec; border-radius: 7px; padding: 6px 9px; margin-top: 12px; }
#lbShopOv .lb-sheet-foot { flex: none; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(0,0,0,0.07); box-shadow: 0 -3px 14px rgba(0,0,0,0.05); }
#lbShopOv .lb-sheet-add { width: 100%; border: none; border-radius: 13px; padding: 16px; background: var(--sale); color: #fff; font-weight: 800; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(230,0,18,0.22); touch-action: manipulation; }
#lbShopOv .lb-sheet-add[disabled] { background: #d6d6db; cursor: default; box-shadow: none; }
#lbShopOv .lb-sheet-full { width: 100%; margin-top: 9px; background: transparent; color: var(--muted); border: none; padding: 6px; font-weight: 600; font-size: 13px; line-height: 1; text-decoration: underline; cursor: pointer; touch-action: manipulation; }