/* Happyka · Catalog polish & mobile width guard · 27 Oct 2026
   Display-only. No changes to React, Supabase, checkout, cart or SEO.
   Uses the existing catalog input ID and results ID to scope its rules. */

/* Prevent an oversized child from making iOS Safari shrink the whole page.
   Unlike overflow-x:hidden, clip does not create a scrolling ancestor for sticky headers. */
html, body, #root { max-width: 100%; overflow-x: clip; }
#root { min-width: 0; }
#root img, #root video, #root svg { max-width: 100%; }

/* -------------------- Catalog navigation -------------------- */
#root main section:has(#happyka-catalog-search) {
  position: relative;
  background: #fffdfb;
  border-bottom-color: #ebe5e1;
  padding-top: 17px;
  padding-bottom: 15px;
}
#root main section:has(#happyka-catalog-search) > .mx-auto {
  min-width: 0;
}
/* Existing h1 is visually hidden. Display it instead of creating a second title. */
#root main section:has(#happyka-catalog-search) h1.sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 13px !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: 0 !important;
  color: #423841;
  font-family: inherit;
  font-size: clamp(22px, 4.3vw, 29px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.25;
}
/* A neat single-row category rail. Everything remains the original React buttons. */
#root main section:has(#happyka-catalog-search) [aria-label="Категории игрушек"] {
  min-width: 0;
  scroll-padding-left: 7px;
  gap: 6px;
}
#root main section:has(#happyka-catalog-search) [aria-label="Категории игрушек"] > button {
  border-radius: 999px;
  border-color: #e8e0dd;
  background: #fff;
  color: #756d72;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 13px;
  box-shadow: none;
}
#root main section:has(#happyka-catalog-search) [aria-label="Категории игрушек"] > button[class*="bg-[#eee5f2]"] {
  background: #f4e9ec;
  border-color: #d9b9c2;
  color: #825764;
}
/* Remove the visual duplicate "Все ↓" label, keeping the existing all-categories action. */
#root main section:has(#happyka-catalog-search) button[aria-label="Показать все категории"] {
  min-height: 36px;
  min-width: 104px;
  border: 1px solid #ded3d3;
  border-radius: 999px;
  background: #faf3f3;
  color: #775360;
  padding: 8px 12px;
  font-size: 0;
  font-weight: 700;
  box-shadow: none;
}
#root main section:has(#happyka-catalog-search) button[aria-label="Показать все категории"]::after {
  content: "Категории  ▾";
  font-size: 12px;
  white-space: nowrap;
}
#root main section:has(#happyka-catalog-search) button[aria-label="Показать все категории"][aria-expanded="true"]::after {
  content: "Скрыть  ▴";
}
#root main section:has(#happyka-catalog-search) button[aria-label="Показать все категории"]:focus-visible,
#root main section:has(#happyka-catalog-search) [aria-label="Категории игрушек"] button:focus-visible {
  outline: 2px solid #b77e91;
  outline-offset: 3px;
}
#root main section:has(#happyka-catalog-search) > .mx-auto > div:has(> #happyka-catalog-search) {
  min-width: 0;
  margin-top: 12px;
  min-height: 43px;
  border-color: #e5dcd9;
  border-radius: 12px;
  background: #fbf9f7;
}
#root main #happyka-catalog-search {
  min-width: 0;
  width: 100%;
  color: #473f47;
}
#root main #happyka-catalog-search::placeholder { color: #aaa0a0; }
#root main section:has(#happyka-catalog-search) [class*="grid-cols-2"] {
  max-width: 100%;
  gap: 8px;
  border: 1px solid #f0e6e5;
  border-radius: 14px;
  background: #fffaf9;
}

/* Filters and sorting remain familiar and functional. */
#root main section:has(+ #catalog-results) {
  background: #fffdfb;
  border-bottom-color: #eee7e3;
  padding-top: 10px;
  padding-bottom: 10px;
}
#root main section:has(+ #catalog-results) > div:first-child { min-width: 0; }
#root main section:has(+ #catalog-results) .relative.ml-auto { min-width: 0; }
#root main section:has(+ #catalog-results) button { box-shadow: none; }
#root main #catalog-results { background: #fcfaf8; padding-top: 14px; }
#root main #catalog-results .grid:has(> article) {
  min-width: 0;
  gap: clamp(10px, 1.45vw, 20px);
}
#root main #catalog-results article { min-width: 0; border: 1px solid #f2ece8; }
#root main #catalog-results article img { max-width: 100%; }

@media (min-width: 768px) {
  #root main section:has(#happyka-catalog-search) > .mx-auto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 41%);
    grid-template-rows: auto auto;
    gap: 17px 18px;
    align-items: center;
  }
  #root main section:has(#happyka-catalog-search) h1.sr-only {
    grid-row: 1;
    grid-column: 1;
    margin-bottom: 0 !important;
  }
  #root main section:has(#happyka-catalog-search) > .mx-auto > div:has(> #happyka-catalog-search) {
    grid-row: 1;
    grid-column: 2;
    margin-top: 0;
  }
  #root main section:has(#happyka-catalog-search) > .mx-auto > div:has(> [aria-label="Категории игрушек"]) {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  /* Do not let wide layout fragments force the viewport to zoom out. */
  #root > div, #root header, #root main, #root main > section {
    max-width: 100%; min-width: 0;
  }
  #root header > div { max-width: 100%; min-width: 0; }
  #root main #catalog-results .grid:has(> article) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #root main #catalog-results .grid:has(> article) > article { min-width: 0; }
  #root main #catalog-results article { border-radius: 17px; }
  #root main #catalog-results article .aspect-square { min-width: 0; }
  #root main section:has(#happyka-catalog-search) { padding: 14px 12px 13px; }
  #root main section:has(#happyka-catalog-search) h1.sr-only { font-size: 23px; margin-bottom: 12px !important; }
  #root main section:has(#happyka-catalog-search) > .mx-auto > div:has(> #happyka-catalog-search) { margin-top: 10px; }
  #root main section:has(#happyka-catalog-search) [aria-label="Категории игрушек"] > button { padding: 8px 11px; }
  #root main section:has(+ #catalog-results) { padding-left: 12px; padding-right: 12px; }
  #root main section:has(+ #catalog-results) .relative.ml-auto > div[class*="absolute"] {
    left: auto; right: 0; min-width: 0; width: min(240px, calc(100vw - 28px));
  }
  #root main #catalog-results { padding-left: 12px; padding-right: 12px; }
  #root main #catalog-results .grid:has(> article) { gap: 10px; }
  #root main #catalog-results p[class*="text-sm"] { overflow-wrap: anywhere; }

  /* iOS Safari zooms the page when focusing inputs smaller than 16px. */
  #root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  #root textarea, #root select,
  #happyka-ai-widget textarea {
    font-size: 16px !important;
  }
  #root input, #root textarea, #root select { min-width: 0; max-width: 100%; }
}


/* =============================================================
   Happyka catalog — Quiet Luxury v3 (27 Oct 2026)
   CSS-only restyle of existing React UI.
   No edits to product data, checkout, JS handlers, Supabase or SEO.
   The search is collapsed into a magnifying-glass control rather
   than disabled. The existing React category list becomes a drawer.
   ============================================================= */

/* Visually calm, small header and two useful controls. */
#root main section:has(#happyka-catalog-search) {
  z-index: 20;
  background: #fffdfa;
  border-bottom: none;
  padding-top: 15px;
  padding-bottom: 8px;
}
#root main section:has(#happyka-catalog-search) > .mx-auto {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-template-rows: auto 44px;
  gap: 10px;
  align-items: stretch;
}
#root main section:has(#happyka-catalog-search) h1.sr-only {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -.045em;
}
/* One select; native category buttons remain as source of truth. */
#root main section:has(#happyka-catalog-search) > .mx-auto > div:has(> [aria-label="Категории игрушек"]) {
  position: relative;
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  margin: 0;
  border: 1px solid #e8e1df;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
}
#root main section:has(#happyka-catalog-search) [aria-label="Категории игрушек"] {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 15px;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  scroll-snap-type: none;
}
#root main section:has(#happyka-catalog-search) [aria-label="Категории игрушек"]::before {
  content: none !important;
}
#root main section:has(#happyka-catalog-search) [aria-label="Категории игрушек"] > button {
  display: none !important;
}
#root main section:has(#happyka-catalog-search) [aria-label="Категории игрушек"] > button[class*="bg-[#eee5f2]"] {
  display: inline-block !important;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #4c4048;
  font-weight: 650;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#root main section:has(#happyka-catalog-search) [aria-label="Категории игрушек"] > button:first-child[class*="bg-[#eee5f2]"] {
  font-size: 0;
}
#root main section:has(#happyka-catalog-search) [aria-label="Категории игрушек"] > button:first-child[class*="bg-[#eee5f2]"]::after {
  content: "Все категории";
  font-size: 14px;
}
#root main section:has(#happyka-catalog-search) button[aria-label="Показать все категории"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 44px;
  min-width: 0;
  min-height: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border: none;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 0;
  color: transparent;
  background: transparent;
  cursor: pointer;
  box-shadow: none;
}
#root main section:has(#happyka-catalog-search) button[aria-label="Показать все категории"]::after {
  content: "⌄";
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #866a76;
  transform: translateY(-2px);
}
#root main section:has(#happyka-catalog-search) button[aria-label="Показать все категории"]:hover {
  background: #a76d8010;
}
#root main section:has(#happyka-catalog-search) button[aria-label="Показать все категории"]:focus-visible {
  outline: 2px solid #b68296;
  outline-offset: -3px;
}
/* Second full catalog search remains functional, but occupies only an icon.
   On focus (or whenever a search query exists), expand across category row. */
#root main section:has(#happyka-catalog-search) > .mx-auto > div:has(> #happyka-catalog-search) {
  grid-column: 2 !important;
  grid-row: 2 !important;
  position: relative;
  z-index: 3;
  width: 44px;
  height: 44px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid #e8e1df;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  cursor: text;
}
#root main section:has(#happyka-catalog-search) > .mx-auto > div:has(> #happyka-catalog-search) > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 23px;
  line-height: 1;
  color: #735f6a;
  pointer-events: none;
}
#root main #happyka-catalog-search {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 12px;
  opacity: 0;
  font-size: 16px;
  color: #4c4048;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
#root main section:has(#happyka-catalog-search) > .mx-auto > div:has(> #happyka-catalog-search):is(:focus-within, :has(#happyka-catalog-search:not(:placeholder-shown))) {
  grid-column: 1 / -1 !important;
  width: 100%;
  z-index: 6;
  border-color: #c9b0b9;
  background: #fff;
  box-shadow: 0 3px 16px #3f30330c;
}
#root main section:has(#happyka-catalog-search) > .mx-auto > div:has(> #happyka-catalog-search):is(:focus-within, :has(#happyka-catalog-search:not(:placeholder-shown))) > span {
  display: none;
}
#root main section:has(#happyka-catalog-search) > .mx-auto > div:has(> #happyka-catalog-search):is(:focus-within, :has(#happyka-catalog-search:not(:placeholder-shown))) > input {
  position: static;
  opacity: 1;
}
#root main section:has(#happyka-catalog-search) > .mx-auto > div:has(> #happyka-catalog-search) > button {
  position: relative;
  z-index: 7;
  margin-left: auto;
  padding-right: 12px;
  white-space: nowrap;
}
/* Existing React menu (same click handlers), outside normal document flow. */
#root main section:has(#happyka-catalog-search) > .mx-auto > div.grid.grid-cols-2 {
  position: absolute;
  grid-row: 3 !important;
  grid-column: 1 / -1 !important;
  top: calc(100% + 7px);
  left: 0;
  right: auto;
  z-index: 50;
  width: min(520px, 100%);
  max-width: 100%;
  max-height: min(65vh, 530px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0;
  margin: 0;
  padding: 10px 17px;
  border: 1px solid #e9e1e0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 17px 42px #493a4120;
}
#root main section:has(#happyka-catalog-search) > .mx-auto > div.grid.grid-cols-2 > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: 45px;
  border: none;
  border-bottom: 1px solid #f1ebea;
  border-radius: 0;
  background: transparent;
  color: #5a5056;
  padding: 10px 8px;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: none;
}
#root main section:has(#happyka-catalog-search) > .mx-auto > div.grid.grid-cols-2 > button[class*="bg-[#eee5f2]"] {
  background: transparent;
  color: #925f73;
  font-weight: 700;
}
#root main section:has(#happyka-catalog-search) > .mx-auto > div.grid.grid-cols-2 > button[class*="bg-[#eee5f2]"]::after {
  content: "✓";
  font-size: 14px;
  padding-left: 4px;
}
#root main section:has(#happyka-catalog-search):has(button[aria-label="Показать все категории"][aria-expanded="true"]) {
  z-index: 200;
}
/* One restrained filter row, no competing bubble shapes. */
#root main section:has(+ #catalog-results) {
  position: relative;
  z-index: 9;
  padding-top: 0;
  padding-bottom: 8px;
  background: #fffdfa;
  border-bottom: 1px solid #f0eae7;
}
#root main section:has(+ #catalog-results) button {
  border-color: #e7dedb;
  border-radius: 11px;
  color: #5c5058;
  box-shadow: none;
}
#root main section:has(+ #catalog-results) .relative.ml-auto > div[class*="absolute"] { z-index: 60; }
#root main #catalog-results {
  padding-top: 8px;
  background: #fdfbf8;
}
#root main #catalog-results p[class*="text-sm"] { margin-bottom: 11px; }
/* Hide decoration overlap when choosing a category on phones. */
@media (max-width: 767px) {
  #root main section:has(#happyka-catalog-search) {
    padding: 15px 13px 8px;
  }
  #root main section:has(#happyka-catalog-search) h1.sr-only {font-size: 24px;}
  #root main section:has(#happyka-catalog-search) > .mx-auto {gap: 10px 8px;}
  #root main section:has(#happyka-catalog-search) > .mx-auto > div.grid.grid-cols-2 {
    position: fixed;
    display: flex;
    flex-direction: column;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: min(72dvh, 660px);
    max-height: 72dvh;
    z-index: 100002;
    padding: 66px 22px max(32px, env(safe-area-inset-bottom));
    border: none;
    border-radius: 24px 24px 0 0;
    background: #fffefa;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0;
    box-shadow: 0 -15px 60px #24151e26;
  }
  #root main section:has(#happyka-catalog-search) > .mx-auto > div.grid.grid-cols-2::before {
    content: "Категории";
    position: absolute;
    top: 23px;
    left: 24px;
    color: #3d323c;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.25;
    pointer-events: none;
  }
  #root main section:has(#happyka-catalog-search) > .mx-auto > div.grid.grid-cols-2 > button {
    flex-shrink: 0;
    min-height: 46px;
    padding: 12px 0;
    font-size: 14px;
    line-height: 1.4;
    border-bottom: 1px solid #eee8e6;
  }
  body:has(button[aria-label="Показать все категории"][aria-expanded="true"]) {
    overflow: hidden;
  }
  body:has(button[aria-label="Показать все категории"][aria-expanded="true"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(33, 26, 31, .42);
  }
  /* React's existing toggle remains the Close control inside the drawer. */
  #root main section:has(#happyka-catalog-search) button[aria-label="Показать все категории"][aria-expanded="true"] {
    position: fixed;
    inset: auto 16px auto auto;
    top: calc(100dvh - min(72dvh, 660px) + 14px);
    width: 42px;
    height: 38px;
    z-index: 100003;
    border-radius: 50%;
    padding: 0 6px;
    background: #f6f0f0;
  }
  #root main section:has(#happyka-catalog-search) button[aria-label="Показать все категории"][aria-expanded="true"]::after {
    content: "×";
    font-size: 24px;
    transform: none;
  }
  #root main #catalog-results { padding-left: 12px; padding-right: 12px; }
  #root main #catalog-results .grid:has(> article) { gap: 11px; }
}
@media (min-width: 768px) {
  #root main section:has(#happyka-catalog-search) > .mx-auto {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-rows: auto 44px;
    gap: 12px 10px;
  }
  #root main section:has(#happyka-catalog-search) > .mx-auto > div.grid.grid-cols-2 {
    max-height: 450px;
  }
}
/* Stack the open drawer above the dimmer (not inside a lower stacking context). */
@media (max-width: 767px) {
  #root main section:has(#happyka-catalog-search):has(button[aria-label="Показать все категории"][aria-expanded="true"]) {
    z-index: 100001;
  }
}