/* Prototype behaviour layered over the static Figma snapshot.
   Hover specs come from the variants in the RUSSPASS library (read 2026-09-25):
   every State=Hover transition is 0.3s ease-out. */

:root { --hover: .3s cubic-bezier(0, 0, .58, 1); }

/* ---------- Cards: photo zooms ×1.1 from centre, title fades to .6 (component "card", State=Hover) */
.js-card { cursor: pointer; }
.js-photo-box { overflow: hidden; isolation: isolate; }
.js-photo { transition: transform var(--hover); transform-origin: 50% 50%; }
.js-title { transition: opacity var(--hover); }
@media (hover: hover) {
  .js-card:hover .js-photo { transform: scale(1.1); }
  .js-card:hover .js-title { opacity: .6; }
}

/* ---------- Buttons (Button / Button v2, State=Hover) */
.bg-\[\#ffcf08\], .bg-\[\#f5f5f5\], .bg-\[\#ebebeb\], [data-name="Button v2"], [data-name="Button"], [data-name="heart"] {
  transition: background-color var(--hover), border-color var(--hover), opacity var(--hover);
}
@media (hover: hover) {
  /* Primary: #FFCF08 → #E6B900 */
  .bg-\[\#ffcf08\].js-btn:hover { background-color: #e6b900; }
  /* Icon Secondary / Chips Gray: #F5F5F5 → #EBEBEB */
  .bg-\[\#f5f5f5\].js-btn:hover { background-color: #ebebeb; }
  /* Carousel arrows (Button, Icon secondary): #EBEBEB → #D9D9D9 */
  .bg-\[\#ebebeb\].js-btn:hover { background-color: #d9d9d9; }
  /* Outline: transparent → #F5F5F5, border #D9D9D9 → #1D1D1D */
  .js-btn-outline:hover { background-color: #f5f5f5; border-color: #1d1d1d !important; }
  /* Heart on photo: backdrop #1D1D1D 30% → 15% */
  .js-heart:hover { background-color: rgba(29, 29, 29, .15) !important; }
  /* Header menu items (Menu element new, State=Hover): underline */
  [data-name="Menu element new"]:hover p { text-decoration: underline; text-underline-offset: 4px; }
}
.js-btn, .js-heart, [data-name="Menu element new"] { cursor: pointer; }

/* ---------- Catalog icons under the header (Frame 2131331426, Property 2=Hover):
   slot background #F5F5F5 → #FFCF08; the same yellow while pressed */
/* .js-rubric: the catalog icon items (frames.json → proto.rubrics) */
.js-rubric { cursor: pointer; }
.js-rubric [data-name="Slot"],
.js-rubric [data-name="Slot"] .bg-\[\#f5f5f5\] { transition: background-color var(--hover); }
.js-rubric:active [data-name="Slot"],
.js-rubric:active [data-name="Slot"] .bg-\[\#f5f5f5\] { background-color: #ffcf08; }
@media (hover: hover) {
  .js-rubric:hover [data-name="Slot"],
  .js-rubric:hover [data-name="Slot"] .bg-\[\#f5f5f5\] { background-color: #ffcf08; }
}

/* ---------- Carousels (frames.json → proto.carousels) */
.js-carousel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.js-carousel::-webkit-scrollbar { display: none; }
.js-carousel > * { scroll-snap-align: start; }
.js-arrow[disabled] { opacity: .4; pointer-events: none; }
.js-carousel { cursor: grab; }
.js-carousel.js-dragging-row { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.js-carousel img { -webkit-user-drag: none; }

/* ---------- Like (component «On image red»): hover 15%, pressed 50%; a pressed like goes #E62B00 */
.js-heart:active { background-color: rgba(29, 29, 29, .5) !important; }
.js-heart[aria-pressed="true"]:active img { filter: brightness(.9); }

@media (prefers-reduced-motion: reduce) {
  .js-photo, .js-title { transition: none; }
  .js-card:hover .js-photo { transform: none; }
  .js-carousel { scroll-behavior: auto; }
  .js-region [data-name="arrow"] { transition: none; }
}

/* ---------- Browser chrome drawn into the frames (Desktop/Tablet, Mobile): the real browser has its own */
[data-name="Header group С ГЕО"] > :first-child:not([data-name="Header С ГЕО"]) { display: none; }

/* ---------- Desktop 1240–1440 (prototype.js → "desktop: 1240–1440"): --crop = px cut off each side */
:root { --crop: 0px; }
.js-cropped, .js-cropped body { overflow-x: hidden; }
[data-name="Header С ГЕО"]:not(.js-fluid *) { padding-left: max(108px, calc(var(--crop) + 16px)) !important; padding-right: max(96px, calc(var(--crop) + 16px)) !important; }

/* ---------- Phone: fluid width (prototype.js → "phone: fluid width") */
.js-fluid #root { width: 100% !important; min-width: 320px; }
.js-fluid #root > *, .js-fluid .w-\[375px\], .js-fluid .w-\[390px\] { width: 100% !important; }
.js-fluid [data-node-id="52:98980"] { width: 100% !important; }
.js-fluid [data-node-id="52:98980"] img { max-width: 100%; height: auto; }
/* journal header: the double rule (1 px, 5 px gap, 4 px) runs the full width; the rest of the header is an outlined SVG */
.js-fluid [data-node-id="52:98980"] { position: relative; }
.js-fluid [data-node-id="52:98980"]::before, .js-fluid [data-node-id="52:98980"]::after { content: ""; position: absolute; left: 16px; right: 16px; background: #1d1d1d; }
.js-fluid [data-node-id="52:98980"]::before { top: 24px; height: 1px; }
.js-fluid [data-node-id="52:98980"]::after { top: 30px; height: 4px; }
/* the paw (298×200) stays in the middle of wider screens */
.js-fluid div:has(> [data-name="Lapka"]) { align-self: center; }
.js-swipe { -webkit-overflow-scrolling: touch; }
/* phones narrower than 360: the header row (logo, burger, 4 icons) is 342 px wide in the design — tighten its gaps */
@media (max-width: 359px) {
  .js-fluid [data-name="Header С ГЕО"] { padding-left: 12px !important; padding-right: 4px !important; }
  .js-fluid [data-name="Header С ГЕО"] > :first-child { gap: 6px !important; }
  .js-fluid [data-name="Right menu"], .js-fluid [data-name="Right menu"] > * { gap: 0 !important; }
}

/* ---------- Paw: icons on the cards (prototype.js → "paw"); the Figma icons hide under them */
.js-paw { position: absolute; inset: 0; pointer-events: none; }
.js-paw-card { position: absolute; inset: 0; }
.js-paw-holder { position: absolute; width: 48px; height: 48px; }
.js-paw-holder img { position: absolute; display: block; }
.js-paw-on > :not([data-name="Lapka"]):not(.js-paw) { visibility: hidden; }

/* ---------- Popups: city dropdown and burger menu */
.js-city[hidden], .js-menu[hidden] { display: none !important; }
.js-city, .js-menu { position: absolute; z-index: 60; box-sizing: border-box; background: #fff; color: #1d1d1d;
  font-family: "Suisse Intl:Regular", sans-serif; -webkit-font-smoothing: antialiased; }
.js-city *, .js-menu * { box-sizing: border-box; }
.js-city p, .js-menu p, .js-city ul, .js-menu ul { margin: 0; padding: 0; list-style: none; }
.js-city a, .js-menu a { color: inherit; text-decoration: none; }

/* Region button (component Region): cursor, Outline hover, the arrow turns while the list is open */
.js-region { cursor: pointer; transition: border-color var(--hover); }
.js-region [data-name="arrow"] { transition: transform var(--hover); }
.js-region[aria-expanded="true"] [data-name="arrow"] { transform: rotate(180deg); }
@media (hover: hover) { .js-region:hover { border-color: #1d1d1d !important; } }

/* dropdown-city (147:89769): 320 wide, radius 10, shadow «Dropdown» 0 4 30 #94949440 */
.js-city { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 10px; box-shadow: 0 4px 30px rgba(148, 148, 148, .25); }
.js-city-search { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; padding: 12px 16px;
  border: 1px solid #d9d9d9; border-radius: 12px; cursor: text; transition: border-color var(--hover); }
.js-city-search:focus-within { border-color: #1d1d1d; }
.js-city-search img { flex: none; display: block; }
.js-city-search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; -webkit-appearance: none; appearance: none;
  font: 16px/24px "Suisse Intl:Regular", sans-serif; color: #1d1d1d; }
.js-city-search input::placeholder { color: #747474; opacity: 1; }
.js-city-search input::-webkit-search-cancel-button { display: none; }
.js-city .js-city-label { padding: 6px 16px; font-size: 16px; line-height: 24px; color: #a6a6a6; }
.js-city ul { display: flex; flex-direction: column; gap: 2px; }
.js-city li a { display: block; padding: 6px 16px; border-radius: 8px; font: 16px/24px "Suisse Intl:Medium", sans-serif; transition: background-color var(--hover); }
@media (hover: hover) { .js-city li a:hover { background: #f5f5f5; } }

/* Burger menu, shared */
.js-menu-logo { display: block; box-sizing: content-box !important; }   /* padding = where Figma's text box puts the glyphs */
.js-menu-logo img { display: block; }
.js-menu-brand { display: flex; flex-direction: column; }
.js-menu-brand p { width: 300px; max-width: 100%; color: #999; line-height: 1.2; }
.js-menu-h { font: 20px/22px "Suisse Intl:SemiBold", sans-serif; color: #000; }
.js-menu-col { display: flex; flex-direction: column; }
.js-menu-col a { display: block; font-size: 14px; line-height: 22px; }
.js-menu-chips { display: flex; }
.js-menu-chips a { display: block; border-radius: 100px; background: #ebebeb; font-family: "Suisse Intl:Medium", sans-serif; white-space: nowrap;
  transition: background-color var(--hover); }
@media (hover: hover) {
  .js-menu-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .js-menu-chips a:hover { background: #d9d9d9; }
}

/* Меню — десктоп (147:88739): a 1224×688 card under the header */
.js-menu-desktop { width: 1224px; height: 688px; padding: 48px; border-radius: 40px; box-shadow: 0 4px 30px rgba(148, 148, 148, .25); }
.js-menu-desktop .js-menu-top { display: flex; gap: 48px; align-items: flex-start; }
.js-menu-desktop .js-menu-brand { gap: 5px; }
.js-menu-desktop .js-menu-brand p { font-size: 16px; }
.js-menu-desktop .js-menu-top .js-menu-logo { height: 61.3px; padding: 2.7px 4px 0 2.6px; }
.js-menu-desktop .js-menu-cols { flex: 1; display: flex; justify-content: space-between; padding-top: 4px; }
.js-menu-desktop .js-menu-col { gap: 16px; }
.js-menu-desktop .js-menu-col a { padding: 8px 0; }
.js-menu-desktop .js-menu-useful a { padding: 9px 0; }
.js-menu-desktop .js-menu-projects { position: absolute; left: 48px; top: 408px; width: 1128px; display: flex; justify-content: space-between;
  padding: 48px 32px; border-radius: 32px; background: #f7f7f7; }
.js-menu-desktop .js-menu-project { display: flex; flex-direction: column; gap: 16px; }
.js-menu-desktop .js-menu-project .js-menu-logo { height: 46px; padding: 2px 0 0 1.9px; }
.js-menu-desktop .js-menu-chips { gap: 8px; }
.js-menu-desktop .js-menu-chips a { padding: 4px 12px; font-size: 14px; line-height: 20px; }
.js-menu-close { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; }
.js-menu-close img { display: block; }

/* Меню — мобилка (147:88832): a sheet from under the header to the bottom of the screen */
.js-menu-phone { position: fixed; left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 24px; padding: 24px 16px; }
.js-menu-phone .js-menu-top, .js-menu-phone .js-menu-cols { display: flex; flex-direction: column; gap: 24px; }
.js-menu-phone .js-menu-brand { gap: 2px; }
.js-menu-phone .js-menu-brand p { font-size: 12px; }
.js-menu-phone .js-menu-logo { height: 43px; padding-left: 1.9px; max-width: 100%; }
.js-menu-phone .js-menu-logo img { max-width: 100%; height: auto; }
.js-menu-phone .js-menu-col { gap: 8px; }
.js-menu-phone .js-menu-col a { padding: 4px 0; }
.js-menu-phone .js-menu-useful a { padding: 7px 0; }
.js-menu-phone .js-menu-projects { display: flex; flex-direction: column; gap: 32px; padding: 24px 16px; border-radius: 16px; background: #f7f7f7; }
.js-menu-phone .js-menu-project { display: flex; flex-direction: column; gap: 12px; }
.js-menu-phone .js-menu-chips { gap: 6px; flex-wrap: wrap; }
.js-menu-phone .js-menu-chips a { padding: 6px 8px; font-size: 12px; line-height: 12px; }
.js-lock, .js-lock body { overflow: hidden; }

/* ---------- Content try-on (CSV drop) */
.js-drop-hint { position: fixed; inset: 0; z-index: 100; display: none; place-items: center;
  background: rgba(29, 29, 29, .55); color: #fff; font: 500 24px/1.3 "Suisse Intl:Medium", sans-serif; }
.js-dragging .js-drop-hint { display: grid; }
.js-toast { position: fixed; left: 50%; bottom: 24px; z-index: 101; transform: translateX(-50%);
  padding: 12px 16px; border-radius: 12px; background: #1d1d1d; color: #fff;
  font: 14px/20px "Suisse Intl:Regular", sans-serif; }