:root {
  color-scheme: dark;
  --bg: #0d0d0c;
  --bg2: #141311;
  --card: #181715;
  --card2: #1e1c19;
  --card3: #24211d;
  --line: rgba(255,255,255,.08);
  --line2: rgba(209,181,138,.18);
  --text: #f5f1eb;
  --muted: #b4aea5;
  --muted2: #8e877d;
  --soft: #d2b384;
  --soft2: #997649;
  --danger: #f67d73;
  --ok: #79d9a0;
  --shadow: 0 20px 60px rgba(0,0,0,.34);
  --radius: 20px;
  --radiusL: 24px;
  --navH: 82px;
  --safeBottom: env(safe-area-inset-bottom, 0px);
  --safeTop: env(safe-area-inset-top, 0px);
  --headerH: 74px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font-size: 15px; line-height: 1.38; overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.app {
  min-height: 100vh;
  padding-bottom: calc(var(--navH) + var(--safeBottom) + 12px);
  background:
    radial-gradient(circle at top left, rgba(210,179,132,.11), transparent 260px),
    radial-gradient(circle at top right, rgba(210,179,132,.04), transparent 240px),
    linear-gradient(180deg, #11100f 0%, #0d0d0c 22%, #0d0d0c 100%);
}
.appHeader {
  position: sticky;
  top: 0;
  z-index: 26;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--headerH);
  padding: calc(10px + var(--safeTop)) 14px 10px;
  background: rgba(14,14,13,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.brandMini {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  min-width: 0;
  flex: 1;
}
.brandMark {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #dcc18e, #9c7749);
  color: #16120d;
  font-weight: 950;
  font-size: 14px;
  letter-spacing: -.03em;
  box-shadow: 0 10px 24px rgba(153,118,73,.22);
  flex: 0 0 auto;
}
.brandMeta { display: grid; gap: 2px; min-width: 0; }
.brandMeta b {
  font-size: 17px;
  letter-spacing: -.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brandMeta small { color: var(--muted2); font-size: 12px; font-weight: 600; }
.headerActions { display: flex; align-items: center; gap: 8px; }
.linkPill, .cartMini {
  min-height: 38px;
  border-radius: 999px;
  padding: 0 13px;
  border: 1px solid var(--line);
  background: rgba(28,27,24,.92);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.staticIcon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--soft);
  font-size: 13px;
  line-height: 1;
}
.cartMini b {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--soft);
  color: #14110c;
  font-size: 12px;
  font-weight: 900;
}

.pageWrap {
  width: min(780px, 100%);
  margin: 0 auto;
  padding: 14px 12px 0;
}
.page { display: none; animation: pageIn .18s ease-out; }
.page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.heroCard, .infoCard, .formCard, .emptyBox, .productCard, .cartItem {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.heroCard {
  padding: 20px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(145deg, rgba(210,179,132,.18), rgba(255,255,255,.03) 46%, rgba(255,255,255,.015));
}
.label {
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft);
}
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(26px, 8vw, 38px); line-height: 1.03; letter-spacing: -.055em; margin-bottom: 10px; }
h2 { font-size: 20px; line-height: 1.12; letter-spacing: -.035em; margin-bottom: 9px; }
h3 { font-size: 17px; line-height: 1.18; letter-spacing: -.02em; margin-bottom: 6px; }
p { color: var(--muted); }
.heroCard p:not(.label) { max-width: 34rem; margin-bottom: 16px; }
.heroButtons, .inlineButtons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.btn, .smallBtn, .addBtn, .removeBtn, .roundBtn, .favBtn {
  border: 0;
  min-height: 46px;
  border-radius: 16px;
  padding: 0 15px;
  font-weight: 800;
}
.btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btnPrimary {
  background: linear-gradient(135deg, #d6b881, #a17b49);
  color: #17120d;
  box-shadow: 0 12px 26px rgba(161,123,73,.2);
}
.btnSecondary {
  background: var(--card3);
  border: 1px solid var(--line);
  color: var(--text);
}
.btnQuiet {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}
.btnLoad {
  display: none;
  margin: 14px 0;
  background: var(--card);
  border: 1px solid var(--line);
}
.smallBtn {
  min-height: 38px;
  padding: 0 13px;
  background: var(--card3);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.smallBtn:hover, .btnSecondary:hover { border-color: var(--line2); }

.statsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 18px; }
.statsGrid div {
  padding: 13px 11px;
  border-radius: 18px;
  background: rgba(22,20,18,.9);
  border: 1px solid var(--line);
}
.statsGrid b {
  display: block;
  color: var(--text);
  font-size: 17px;
  line-height: 1.05;
  margin-bottom: 5px;
}
.statsGrid span { display: block; color: var(--muted); font-size: 12px; }

.sectionHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 12px;
}
.sectionHead h1, .sectionHead h2 { margin: 0; }
.sectionHead.compact { margin-top: 10px; }
.stickyHead {
  position: sticky;
  top: calc(var(--headerH) + var(--safeTop));
  z-index: 16;
  padding: 10px 0 10px;
  background: linear-gradient(180deg, rgba(13,13,12,.98), rgba(13,13,12,.88));
  backdrop-filter: blur(14px);
}
.countPill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.homeCategories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 18px; }
.homeCat, .categoryBtn {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  color: var(--text);
  border-radius: 18px;
  text-align: left;
}
.homeCat {
  min-height: 96px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.homeCat em, .categoryBtn em { color: var(--muted); font-style: normal; font-size: 12px; }
.categoryIconWrap, .homeIconWrap {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(210,179,132,.1);
  color: var(--soft);
  border: 1px solid rgba(210,179,132,.1);
}
.homeCatTop { display: flex; align-items: center; gap: 10px; }
.homeCatTop b, .categoryBtn b { display: block; line-height: 1.08; letter-spacing: -.02em; }
.homeCatBottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.homeCatArrow { color: var(--soft); font-weight: 800; }

.infoCard { padding: 16px; margin-bottom: 14px; }
.infoCard ol { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.infoCard li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  padding: 11px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.infoCard li b { color: var(--soft); }
.infoCard li span { color: var(--muted); }

.categoryGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.categoryBtn {
  min-height: 82px;
  padding: 12px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 9px;
}
.categoryBtn.active {
  border-color: rgba(210,179,132,.55);
  background: linear-gradient(180deg, rgba(210,179,132,.16), rgba(255,255,255,.03));
}
.categoryBtn.zero { opacity: .7; }
.categoryBtn.active .categoryIconWrap { background: rgba(210,179,132,.18); }

.subChips, .quickQueries, .helpChoices {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 10px;
  scrollbar-width: none;
}
.subChips::-webkit-scrollbar, .quickQueries::-webkit-scrollbar, .helpChoices::-webkit-scrollbar { display: none; }
.subChips.hidden { display: none; }
.chip, .quickQueries button, .helpChoices button {
  flex: 0 0 auto;
  min-height: 40px;
  border-radius: 999px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-weight: 700;
}
.chip.active, .helpChoices button.active {
  color: #17120d;
  background: var(--soft);
  border-color: var(--soft);
}
.quickQueries button.active { color: #17120d; background: rgba(210,179,132,.95); border-color: rgba(210,179,132,.95); }

.filterRow { display: flex; align-items: end; gap: 8px; margin-bottom: 10px; }
.miniSelect { flex: 1; display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.miniSelect select, .searchInput input, .formCard input, .formCard textarea, .formCard select {
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #121211;
  color: var(--text);
  padding: 0 13px;
  outline: none;
}
.miniSelect select:focus, .searchInput input:focus, .formCard input:focus, .formCard textarea:focus, .formCard select:focus {
  border-color: rgba(210,179,132,.68);
  box-shadow: 0 0 0 3px rgba(210,179,132,.08);
}
.searchInput { display: grid; gap: 7px; color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.searchInput input { font-size: 16px; }
.searchMeta { color: var(--muted); font-size: 13px; margin: 6px 2px 12px; }

.productList { display: grid; gap: 10px; }
.productCard {
  position: relative;
  padding: 12px;
  display: grid;
  gap: 10px;
}
.productMain { padding-right: 44px; }
.productBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  max-width: calc(100% - 6px);
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(210,179,132,.1);
  color: var(--soft);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}
.productCard h3 {
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.productCard p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.favBtn {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #141412;
  color: var(--muted);
  display: grid;
  place-items: center;
}
.favBtn.active { color: var(--soft); border-color: rgba(210,179,132,.42); }
.productBottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.priceText { color: var(--text); font-weight: 900; font-size: 16px; letter-spacing: -.02em; }
.addBtn {
  min-height: 40px;
  padding: 0 16px;
  background: var(--soft);
  color: #17120d;
  white-space: nowrap;
  font-weight: 900;
}

.emptyBox { padding: 18px; margin-bottom: 12px; }
.emptyBox.inline { grid-column: 1 / -1; }
.emptyBox h2 { margin-bottom: 8px; }
.emptyBox p { margin-bottom: 14px; }

.cartList { display: grid; gap: 9px; margin-bottom: 12px; }
.cartItem {
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}
.cartItem h3 { margin-bottom: 4px; }
.cartItem p { margin-bottom: 6px; font-size: 13px; }
.cartItem b { color: var(--soft); }
.qtyControl {
  display: grid;
  grid-template-columns: 34px 34px 34px;
  align-items: center;
  background: #131312;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.qtyControl button { height: 34px; border: 0; background: transparent; color: var(--text); font-weight: 900; }
.qtyControl span { text-align: center; color: var(--text); font-weight: 800; }
.removeBtn {
  grid-column: 1 / -1;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}

.formCard {
  padding: 14px;
  display: grid;
  gap: 11px;
  margin-bottom: 12px;
}
.formCard label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.formCard textarea { min-height: 92px; resize: vertical; padding-top: 12px; }
.formNote { margin: 0; font-size: 12px; color: var(--muted); }
.mutedForm { opacity: .58; }
.helpIntro { margin-bottom: 10px; }
.helpChoices { padding-bottom: 12px; }

.bottomNav {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 30;
  height: calc(var(--navH) + var(--safeBottom));
  padding: 7px 7px calc(7px + var(--safeBottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  background: rgba(15,15,14,.96);
  border: 1px solid var(--line);
  border-radius: 28px;
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0,0,0,.36);
}
.bottomNav button {
  position: relative;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-height: 60px;
}
.navIcon { font-size: 17px; line-height: 1; }
.bottomNav button b { font-size: 10px; font-weight: 800; }
.bottomNav button.active { background: rgba(210,179,132,.14); color: var(--soft); }
.bottomNav em {
  position: absolute;
  top: 6px;
  right: 7px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--soft);
  color: #17120d;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.ageGate {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(18px);
}
.ageGate.hidden { display: none; }
.ageCard {
  width: min(390px, 100%);
  padding: 22px;
  border-radius: 26px;
  background: linear-gradient(180deg, #231f19, #141311);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: center;
}
.ageBadge {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--soft);
  color: #17120d;
  font-weight: 950;
}
.ageCard h1 { font-size: 26px; margin-bottom: 9px; }
.ageCard p { margin-bottom: 14px; }
.ageCard .btn { margin-top: 8px; }
.ageCard small { display: block; margin-top: 14px; color: var(--muted); }

.productSheet { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.productSheet.open { pointer-events: auto; }
.sheetShade { position: absolute; inset: 0; background: rgba(0,0,0,.58); opacity: 0; transition: opacity .18s ease; }
.productSheet.open .sheetShade { opacity: 1; }
.productPanel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(80vh, 700px);
  overflow: auto;
  transform: translateY(105%);
  transition: transform .22s ease;
  padding: 10px 14px calc(18px + var(--safeBottom));
  border-radius: 26px 26px 0 0;
  background: #171614;
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.productSheet.open .productPanel { transform: none; }
.sheetHandle { width: 42px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.22); margin: 2px auto 12px; }
.productPanelHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.productPanelHead h2 { margin: 0; }
.roundBtn {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--card3);
  border: 1px solid var(--line);
  color: var(--text);
}
.detailRows { display: grid; gap: 8px; margin-bottom: 12px; }
.detailRows div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.detailRows span { color: var(--muted); }
.detailRows b { text-align: right; }
.detailText { margin-bottom: 14px; }
.sheetActions { display: grid; grid-template-columns: 1fr; gap: 9px; }

.toast {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(var(--navH) + var(--safeBottom) + 24px);
  z-index: 90;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 14px;
  border-radius: 16px;
  background: #26221d;
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: .18s ease;
}
.toast.show { opacity: 1; transform: none; }

.iconSvg {
  width: 18px;
  height: 18px;
  display: block;
  color: currentColor;
}
.iconSvg.sm { width: 16px; height: 16px; }
.iconSvg.lg { width: 20px; height: 20px; }

@media (min-width: 560px) {
  .pageWrap { padding: 18px; }
  .heroButtons, .inlineButtons, .sheetActions { grid-template-columns: auto auto; justify-content: start; }
  .btn { width: auto; min-width: 180px; }
  .categoryGrid, .homeCategories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .productList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartItem { grid-template-columns: 1fr auto auto; align-items: center; }
  .removeBtn { grid-column: auto; }
  .productPanel { left: 50%; right: auto; width: min(520px, calc(100% - 22px)); transform: translate(-50%, 105%); border-radius: 24px; bottom: 12px; }
  .productSheet.open .productPanel { transform: translate(-50%, 0); }
}

@media (max-width: 420px) {
  .linkPill span:last-child { display: none; }
  .cartMini span:nth-child(2) { display: none; }
  .cartMini { padding: 0 10px; }
  .heroCard { padding: 18px; min-height: 184px; }
  .heroButtons, .inlineButtons { grid-template-columns: 1fr; }
  .categoryGrid { grid-template-columns: 1fr 1fr; }
  .productBottom { align-items: end; }
  .addBtn { min-width: 124px; }
}

@media (max-width: 370px) {
  .brandMeta b { font-size: 15px; }
  .brandMeta small { font-size: 11px; }
  .categoryBtn { grid-template-columns: 32px 1fr auto; }
  .homeCat, .categoryBtn, .productCard, .cartItem, .formCard, .emptyBox, .infoCard { border-radius: 18px; }
  .bottomNav button b { font-size: 9px; }
}

/* v8: premium product grid, subscription gate, subtle motion */
.subscriptionGate {
  position: fixed;
  inset: 0;
  z-index: 82;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(18px);
}
.subscriptionGate.hidden { display: none; }
.subscriptionCard {
  width: min(400px, 100%);
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, #242018, #141311);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow);
  text-align: center;
  animation: modalIn .22s ease-out;
}
.subscriptionIcon {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #d6b881, #8f6a3d);
  color: #17120d;
  font-weight: 950;
  font-size: 22px;
}
.subscriptionCard h1 { font-size: 27px; }
.subscriptionCard .btn { margin-top: 9px; }
.subscriptionCard small { display: block; margin-top: 13px; color: var(--muted); }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.productList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.productCard {
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  will-change: transform;
}
.productVisual {
  position: relative;
  height: 116px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 25%),
    linear-gradient(135deg, rgba(210,179,132,.34), rgba(34,31,27,.75));
  display: grid;
  place-items: center;
}
.productVisual::after {
  content: "";
  position: absolute;
  inset: auto 12px 10px 12px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0,0,0,.16);
  filter: blur(10px);
}
.visualIcon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: rgba(16,14,12,.38);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--soft);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  transform: rotate(-4deg);
  transition: transform .2s ease;
}
.visualIcon .iconSvg { width: 30px; height: 30px; }
.productContent { padding: 11px; display: grid; gap: 9px; }
.productMain { padding-right: 0; }
.productBadge {
  min-height: 23px;
  font-size: 10px;
  margin-bottom: 7px;
  max-width: 100%;
}
.productCard h3 {
  font-size: 14px;
  line-height: 1.16;
  min-height: 32px;
  margin-bottom: 5px;
  letter-spacing: -.025em;
}
.productCard p {
  font-size: 12px;
  line-height: 1.25;
  -webkit-line-clamp: 2;
}
.productTags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.productTag {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(210,179,132,.09);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
.productTag.accent { background: rgba(83,131,213,.18); color: #9dc1ff; }
.favBtn {
  z-index: 2;
  top: 9px;
  right: 9px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  background: rgba(14,14,13,.72);
  backdrop-filter: blur(10px);
}
.productBottom {
  align-items: center;
  gap: 7px;
}
.priceText { font-size: 15px; }
.addBtn {
  min-height: 38px;
  min-width: 96px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.categoryBtn, .homeCat, .btn, .smallBtn, .cartMini, .linkPill, .chip, .quickQueries button, .helpChoices button, .cartItem, .infoCard, .emptyBox, .formCard {
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
@media (hover: hover) {
  .productCard:hover, .categoryBtn:hover, .homeCat:hover, .cartItem:hover, .infoCard:hover, .emptyBox:hover {
    transform: translateY(-2px);
    border-color: rgba(210,179,132,.28);
    box-shadow: 0 12px 34px rgba(0,0,0,.22);
  }
  .productCard:hover .visualIcon { transform: rotate(-2deg) scale(1.04); }
  .btn:hover, .smallBtn:hover, .cartMini:hover, .linkPill:hover, .chip:hover, .quickQueries button:hover, .helpChoices button:hover {
    transform: translateY(-1px);
    border-color: rgba(210,179,132,.30);
  }
}
.productCard:active, .categoryBtn:active, .homeCat:active, .btn:active, .smallBtn:active, .cartMini:active, .linkPill:active {
  transform: scale(.985);
}
.bottomNav button { transition: transform .18s ease, color .18s ease, background .18s ease; }
.bottomNav button:active { transform: scale(.96); }
.toast { animation: none; }

@media (max-width: 380px) {
  .productVisual { height: 104px; }
  .productCard h3 { font-size: 13px; }
  .addBtn { min-width: 88px; padding: 0 10px; }
  .priceText { font-size: 14px; }
}

@media (min-width: 560px) {
  .productList { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.subscriptionDebug {
  display: block;
  margin-top: 8px;
  color: rgba(180,174,165,.72);
  font-size: 11px;
  word-break: break-word;
}
button:disabled,
.btn:disabled {
  opacity: .62;
  cursor: wait;
  transform: none !important;
}


/* === v3.4.0 UI cleanup === */

.appHeader {
  min-height: 72px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  justify-content: flex-start !important;
}

.brandMini {
  width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.brandMark {
  width: 44px !important;
  height: 44px !important;
  border-radius: 15px !important;
}

.brandMeta {
  min-width: 0 !important;
  max-width: none !important;
}

.brandMeta b {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 21px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
}

.brandMeta small {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.headerActions {
  display: none !important;
}

.heroCard {
  min-height: auto !important;
  padding: 22px 18px !important;
}

.heroCard h1 {
  font-size: clamp(32px, 10vw, 46px) !important;
  line-height: 0.98 !important;
  max-width: 100% !important;
}

.heroCard p:not(.label) {
  font-size: 17px !important;
  line-height: 1.32 !important;
  margin-bottom: 16px !important;
}

.heroButtons {
  grid-template-columns: 1fr !important;
}

.heroButtons .btnSecondary {
  display: none !important;
}

.statsGrid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.statsGrid div {
  min-height: 92px !important;
  padding: 14px 12px !important;
}

.homeCategories {
  gap: 10px !important;
}

.homeCat {
  min-height: 116px !important;
}

.infoCard {
  margin-bottom: 18px !important;
}

.infoCard li {
  grid-template-columns: 92px 1fr !important;
}

.bottomNav {
  grid-template-columns: repeat(4, 1fr) !important;
  height: calc(78px + var(--safeBottom)) !important;
  left: 10px !important;
  right: 10px !important;
  border-radius: 26px !important;
}

.bottomNav [data-page="favorites"] {
  display: none !important;
}

.bottomNav button {
  min-height: 58px !important;
}

.bottomNav button b {
  font-size: 11px !important;
}

.cartMini span:nth-child(2) {
  font-size: 0 !important;
}

.cartMini span:nth-child(2)::after {
  content: "Заявка";
  font-size: 13px;
}

.productList {
  gap: 12px !important;
}

.productCard {
  overflow: hidden !important;
}

@media (max-width: 560px) {
  .pageWrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .productList {
    grid-template-columns: 1fr !important;
  }

  .categoryGrid {
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }

  .categoryBtn {
    min-height: 92px !important;
    padding: 12px !important;
  }

  .homeCategories {
    grid-template-columns: 1fr 1fr !important;
  }

  .brandMeta b {
    font-size: 20px !important;
  }
}

@media (max-width: 380px) {
  .brandMeta b {
    font-size: 18px !important;
  }

  .heroCard h1 {
    font-size: 32px !important;
  }

  .bottomNav button b {
    font-size: 10px !important;
  }
}


/* === frontend cleanup 3.4.1 === */

.appHeader {
  min-height: 72px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.brandMini {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.brandMark {
  width: 44px !important;
  height: 44px !important;
  border-radius: 15px !important;
}

.brandMeta {
  min-width: 0 !important;
  max-width: none !important;
}

.brandMeta b {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 21px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
}

.brandMeta small {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.headerActions {
  display: none !important;
}

.heroCard {
  min-height: auto !important;
  padding: 22px 18px !important;
}

.heroCard h1 {
  font-size: clamp(32px, 10vw, 46px) !important;
  line-height: 0.98 !important;
}

.heroCard p:not(.label) {
  font-size: 17px !important;
  line-height: 1.32 !important;
  margin-bottom: 16px !important;
}

.heroButtons {
  grid-template-columns: 1fr !important;
}

.heroButtons .btnSecondary {
  display: none !important;
}

.bottomNav {
  grid-template-columns: repeat(4, 1fr) !important;
  height: calc(78px + var(--safeBottom)) !important;
  left: 10px !important;
  right: 10px !important;
  border-radius: 26px !important;
}

.bottomNav [data-page="favorites"] {
  display: none !important;
}

.bottomNav button {
  min-height: 58px !important;
}

.bottomNav button b {
  font-size: 11px !important;
}

.productList {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.productCard {
  overflow: hidden !important;
}

.categoryGrid {
  gap: 9px !important;
}

.homeCategories {
  gap: 10px !important;
}

@media (max-width: 420px) {
  .brandMeta b {
    font-size: 20px !important;
  }

  .heroCard h1 {
    font-size: 34px !important;
  }

  .bottomNav button b {
    font-size: 10px !important;
  }
}


/* === restore full UI 3.4.2 === */

/* Верх: название не обрезается */
.appHeader {
  min-height: 72px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.brandMini {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.brandMeta {
  min-width: 0 !important;
  max-width: none !important;
}

.brandMeta b {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 20px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
}

.brandMeta small {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}

/* Возвращаем верхние кнопки Канал / Корзина */
.headerActions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

.linkPill,
.cartMini {
  display: flex !important;
}

.cartMini span:nth-child(2) {
  font-size: 13px !important;
}

.cartMini span:nth-child(2)::after {
  content: "" !important;
}

/* Возвращаем две кнопки на главной */
.heroButtons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
}

.heroButtons .btnSecondary {
  display: inline-flex !important;
}

/* Возвращаем избранное в нижнюю навигацию */
.bottomNav {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  height: calc(var(--navH) + var(--safeBottom)) !important;
  left: 8px !important;
  right: 8px !important;
  border-radius: 28px !important;
}

.bottomNav [data-page="favorites"] {
  display: grid !important;
}

.bottomNav button {
  display: grid !important;
}

.bottomNav button b {
  font-size: 10px !important;
}

/* Каталог и карточки — оставляем красиво, но не скрываем */
.categoryGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.homeCategories {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.productList {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.productCard {
  display: grid !important;
  overflow: hidden !important;
}

/* На узких экранах не ломаем сетку */
@media (max-width: 390px) {
  .brandMeta b {
    font-size: 18px !important;
  }

  .linkPill {
    padding: 0 10px !important;
  }

  .cartMini {
    padding: 0 10px !important;
  }

  .linkPill span:last-child {
    display: none !important;
  }

  .cartMini span:nth-child(2) {
    display: none !important;
  }

  .bottomNav button b {
    font-size: 9px !important;
  }
}

@media (max-width: 350px) {
  .productList {
    grid-template-columns: 1fr !important;
  }
}


/* === safe small icons 3.4.7 === */

.staticIcon,
.navIcon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  color: currentColor !important;
  background: none !important;
  filter: none !important;
  overflow: hidden !important;
}

.staticIcon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
}

.navIcon {
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  margin-bottom: 3px !important;
}

.staticIcon::before,
.navIcon::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-color: currentColor !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;
}

.icon-home::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10.8 12 4l8 6.8V20h-5.2v-5.7H9.2V20H4V10.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10.8 12 4l8 6.8V20h-5.2v-5.7H9.2V20H4V10.8Z'/%3E%3C/svg%3E");
}

.icon-catalog::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h6v6H5V5Zm8 0h6v6h-6V5ZM5 13h6v6H5v-6Zm8 0h6v6h-6v-6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h6v6H5V5Zm8 0h6v6h-6V5ZM5 13h6v6H5v-6Zm8 0h6v6h-6v-6Z'/%3E%3C/svg%3E");
}

.icon-search::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 4a6.8 6.8 0 0 1 5.38 10.95l4.43 4.44-1.42 1.42-4.44-4.43A6.8 6.8 0 1 1 10.8 4Zm0 2a4.8 4.8 0 1 0 0 9.6 4.8 4.8 0 0 0 0-9.6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 4a6.8 6.8 0 0 1 5.38 10.95l4.43 4.44-1.42 1.42-4.44-4.43A6.8 6.8 0 1 1 10.8 4Zm0 2a4.8 4.8 0 1 0 0 9.6 4.8 4.8 0 0 0 0-9.6Z'/%3E%3C/svg%3E");
}

.icon-heart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20.5 10.6 19.3C5.6 14.9 3 12.6 3 9.2 3 6.6 5.1 4.5 7.7 4.5c1.5 0 3 .7 3.9 1.9.9-1.2 2.4-1.9 3.9-1.9 2.6 0 4.7 2.1 4.7 4.7 0 3.4-2.6 5.7-7.6 10.1L12 20.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20.5 10.6 19.3C5.6 14.9 3 12.6 3 9.2 3 6.6 5.1 4.5 7.7 4.5c1.5 0 3 .7 3.9 1.9.9-1.2 2.4-1.9 3.9-1.9 2.6 0 4.7 2.1 4.7 4.7 0 3.4-2.6 5.7-7.6 10.1L12 20.5Z'/%3E%3C/svg%3E");
}

.icon-cart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2 6H21l-1.8 8.7a2.2 2.2 0 0 1-2.2 1.8H9.4a2.2 2.2 0 0 1-2.2-1.8L5.8 4.8H3V3h4.2l.5 3Zm3.4 12.2a1.7 1.7 0 1 1 0 3.4 1.7 1.7 0 0 1 0-3.4Zm7.5 0a1.7 1.7 0 1 1 0 3.4 1.7 1.7 0 0 1 0-3.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2 6H21l-1.8 8.7a2.2 2.2 0 0 1-2.2 1.8H9.4a2.2 2.2 0 0 1-2.2-1.8L5.8 4.8H3V3h4.2l.5 3Zm3.4 12.2a1.7 1.7 0 1 1 0 3.4 1.7 1.7 0 0 1 0-3.4Zm7.5 0a1.7 1.7 0 1 1 0 3.4 1.7 1.7 0 0 1 0-3.4Z'/%3E%3C/svg%3E");
}

.icon-channel::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h10.2l-4.1-4.1L12.5 6.5 19 13l-6.5 6.5-1.4-1.4 4.1-4.1H5v-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h10.2l-4.1-4.1L12.5 6.5 19 13l-6.5 6.5-1.4-1.4 4.1-4.1H5v-2Z'/%3E%3C/svg%3E");
}

html,
body,
.app {
  overflow-x: hidden !important;
}

.heroCard {
  overflow: hidden !important;
}

.heroCard h1 {
  max-width: 100% !important;
  white-space: normal !important;
}

.bottomNav button.active .navIcon {
  transform: none !important;
}