/* EstateMIX shared components — the one binding variant of each element used on every public page.
   Generated from the approved templates by tools/design/split_css.py; page CSS must not restyle these
   (enforced by StorefrontCssBoundaryTest). See doc/audit/2026-10-09-spolecne-prvky.md. */

/* --- Base, colour variables and typography — template 01 --- */
:root{--blue:#0066cc;
  --blue2:#0758aa;
  --orange:#f49331;
  --ink:#111827;
  --muted:#667085;
  --paper:#f5f7fa;
  --line:#d9dee7;
  --white:#fff;
  --max:1200px;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;font-family:"DM Sans",Arial,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit}
input{font:inherit}
select{font:inherit}
img{display:block;max-width:100%}
@media (max-width: 720px){
  html{max-width:100%;overflow-x:hidden}
  body{max-width:100%;overflow-x:hidden}
}

/* --- Container — template 01 --- */
.container{width:min(var(--max),calc(100% - 56px));margin:auto}
@media(max-width:720px){
  .container{width:min(100% - 30px,var(--max))}
}
@media (max-width: 720px){
  .container{width:calc(100% - 32px);max-width:var(--max)}
}
@media (max-width: 430px){
  .container{width:calc(100% - 26px)}
}

/* --- Header: logo, navigation, language switcher, header buttons — CSS of template 03 (markup of 01);
   tablet 721–1100 px from template 01 (between 03 desktop and 03 mobile rules) --- */
.header{height:82px;display:flex;align-items:center;background:#fff;position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(17,24,39,.08)}
.header-inner{display:flex;align-items:center;width:min(1400px,calc(100% - 64px));max-width:1400px;margin:auto;gap:34px}
.logo{display:flex;align-items:center;min-width:max-content}
.logo svg{width:235px;height:auto}
.nav{display:flex;gap:28px;font-size:14px;font-weight:600;color:#394150;margin-left:24px}
.nav a{padding:31px 0 27px;position:relative}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--blue);transition:.22s}
.nav a:hover:after{right:0}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.locale-wrap{position:relative;margin-right:8px;padding-right:14px;border-right:1px solid var(--line)}
.locale-trigger{height:38px;min-width:58px;padding:0 10px;border:1px solid transparent;background:#fff;display:flex;align-items:center;justify-content:center;gap:8px}
.locale-trigger:hover{border-color:#cfd7e3;background:#f7f9fc}
.locale-trigger[aria-expanded="true"]{border-color:#cfd7e3;background:#f7f9fc}
.locale-flag{font-size:19px}
.locale-chevron{width:7px;height:7px;border-right:1.5px solid #667085;border-bottom:1.5px solid #667085;transform:rotate(45deg) translateY(-2px)}
.locale-menu{position:absolute;right:14px;top:calc(100% + 10px);width:228px;background:#fff;border:1px solid #d9dee7;box-shadow:0 16px 38px rgba(20,31,48,.16);padding:6px;display:none;z-index:100}
.locale-menu.open{display:block}
.locale-option{width:100%;border:0;background:#fff;color:#1f2937;padding:11px 12px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px;font-weight:600}
.locale-option:hover{background:#f4f7fb;color:var(--blue)}
.locale-option.active{background:#eef6ff;color:var(--blue)}
.locale-option small{font-size:11px;color:#98a2b3;font-weight:500}
.link-btn{padding:11px 14px;font-size:14px;font-weight:600}
.primary-btn{border:0;background:var(--blue);color:white;padding:12px 18px;font-weight:700}
@media(max-width:1050px){
  .nav{display:none}
}
@media(min-width:721px) and (max-width:1100px){
  .nav{display:none}
}
@media (min-width:721px) and (max-width:900px){
  .site-header .container{width: min(100% - 32px, 1400px);}
  header .container{width: min(100% - 32px, 1400px);}
  .header-inner{width: min(100% - 32px, 1400px);}
}
@media (min-width:721px) and (max-width:1100px){
  .header-inner{gap:16px}
  .logo svg{width:205px;height:auto}
}
@media(max-width:720px){
  .header{height:64px}
  .header-inner{width:calc(100% - 28px);gap:10px}
  .logo svg{width:168px}
  .header-actions .link-btn{display:none}
  .header-actions .primary-btn{display:none}
  .locale-wrap{margin:0;padding:0;border:0}
}
@media(max-width:430px){
  .header-inner{width:calc(100% - 22px)}
  .logo svg{width:150px}
}

/* --- Header interactions — from template 01 (cursor, hover, chevron), no static change --- */
.locale-trigger{cursor:pointer;transition:.18s}
.locale-chevron{transition:transform .18s}
.locale-trigger[aria-expanded="true"] .locale-chevron{transform:rotate(225deg) translate(-1px,-1px)}
.locale-option{cursor:pointer}
.primary-btn{cursor:pointer}
.primary-btn:hover{background:var(--blue2)}

/* --- Header, signed-in variant — avatar of template 07 --- */
.avatar{height:39px;width:39px;background:#e8f2ff;color:var(--blue);display:grid;place-items:center;border-radius:50%;font-weight:800}

/* --- Breadcrumbs — template 03 --- */
.breadcrumbs{padding:22px 0 14px;font-size:12px;color:#7b8492;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.breadcrumbs b{color:#293241}

/* --- Footer (full variant) — template 01 --- */
.brand-logo-footer{display:block;width:210px;height:auto;filter:brightness(0) invert(1);opacity:.96}
footer{background:#0d141e;color:#c4ceda;padding:54px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,.7fr);gap:50px}
.footer h4{color:white;margin:0 0 15px;font-size:13px}
.footer a{display:block;color:#99a6b4;font-size:13px;margin:9px 0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:22px;font-size:12px;color:#7e8b99;display:flex;justify-content:space-between;gap:20px}
@media(max-width:1100px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{display:block}
}
@media (max-width: 720px){
  .footer{padding-top:48px}
  .brand-logo-footer{width:180px}
  .footer-grid{gap:28px}
  .footer-bottom{margin-top:34px;padding-top:20px}
}

/* --- Footer, mobile — bottom texts stacked (fix, F1 review) --- */
@media (max-width: 720px){
  .footer-bottom span{display:block}
  .footer-bottom span + span{margin-top:8px}
}

/* --- Toast — look of template 01, z-index of template 02 (above the map/filter layers of the results page) --- */
.toast{position:fixed;right:22px;bottom:22px;background:#111925;color:white;padding:15px 18px;box-shadow:0 12px 30px rgba(0,0,0,.28);transform:translateY(90px);opacity:0;transition:.25s;z-index:120}
.toast.show{transform:none;opacity:1}

/* --- Menu under the flag (preferences) and (i) explanations — approved F1/F2c proposals --- */
.prefs-menu{width:300px;max-height:calc(100vh - 110px);overflow:auto}
.prefs-label{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#9199a7;padding:12px 12px 6px}
.prefs-sep{height:1px;background:var(--line);margin:8px 6px}
.prefs-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 6px}
.prefs-seg .locale-option{justify-content:center;border:1px solid var(--line)}
.prefs-seg .locale-option.active{border-color:#b9d6f5}
.prefs-list .locale-option.active{border-color:#b9d6f5}
.prefs-seg .locale-option:has(small){flex-direction:column;justify-content:center;gap:2px}
.prefs-seg .locale-option small{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#98a2b3}
.prefs-list{display:grid;gap:4px;padding:0 6px}
.prefs-list .locale-option{border:1px solid var(--line);flex-wrap:wrap;row-gap:2px}
.prefs-list .locale-option small{width:100%}
.locale-option[disabled]{opacity:.5;cursor:not-allowed}
.prefs-more{padding:4px 6px 0}
.prefs-more>summary{list-style:none;cursor:pointer;padding:8px 6px;font-size:13px;font-weight:700;color:var(--blue)}
.prefs-more>summary::-webkit-details-marker{display:none}
.prefs-more>summary:after{content:" ▾";font-size:11px}
.prefs-more[open]>summary:after{content:" ▴"}
.prefs-more>summary:focus:not(:focus-visible){outline:none}
.prefs-more>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.prefs-more .prefs-list{padding:0}
.prefs-note{font-size:11px;line-height:1.45;color:#98a2b3;margin:10px 12px 6px}
.prefs-i{width:16px;height:16px;border-radius:50%;border:1px solid #b8c1cd;background:#fff;color:#667085;font:700 10px/1 "DM Sans",Arial,sans-serif;padding:0;cursor:help;letter-spacing:0;text-transform:none;display:inline-grid;place-items:center;flex:none}
.prefs-i:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.emx-info{position:relative;display:inline-flex;align-items:center}
.prefs-pop{position:absolute;z-index:30;width:300px;background:#fff;border:1px solid #d9dee7;box-shadow:0 16px 38px rgba(20,31,48,.16);padding:14px 16px;font-size:13px;line-height:1.5;color:#1f2937;text-align:left;font-weight:400;letter-spacing:0;text-transform:none;white-space:normal}
.prefs-pop b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9199a7;margin-bottom:6px}
.emx-info .prefs-pop{left:-8px;top:calc(100% + 8px)}
.prefs-pop[hidden]{display:none}
/* In the menu the bubble hangs under its own label row (2026-10-11): it never covers the (i) icon
   it belongs to, nor the icons of other rows. */
.prefs-menu .prefs-label{position:relative}
.prefs-menu .emx-info{position:static}
.prefs-menu .emx-info .prefs-pop{left:6px;right:6px;width:auto;top:100%;margin-top:2px}
/* Variants and "Search by" (2026-10-11) */
.lang-rec{font-style:normal;font-weight:700;color:var(--blue)}
.lang-more{padding:2px 0 0}
.lang-more>summary{padding:8px 12px}
.lang-more-list{display:grid;gap:0}
/* Regional variant: the market on its own line under the language, the note kept on one line. */
.lang-market{display:block;font-size:12px;font-weight:500;color:#667085;margin-top:1px}
.locale-option.active .lang-market{color:inherit;opacity:.8}
.lang-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lang-option small{text-align:right}
.prefs-fixed{margin:0 12px 4px;font-size:13px;font-weight:600;color:#1f2937}
.prefs-fixed small{display:block;font-size:11px;font-weight:500;color:#98a2b3}
.prefs-earlier{margin:8px 6px 0;padding:10px 12px;background:#f4f7fb;border:1px solid var(--line);font-size:12px;line-height:1.45;color:#1f2937;display:grid;gap:6px}
.prefs-earlier button{justify-self:start;border:0;background:none;padding:0;color:var(--blue);font:inherit;font-weight:700;cursor:pointer;text-align:left}
.prefs-earlier button:focus:not(:focus-visible){outline:none}
.prefs-earlier button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width: 720px){
  .prefs-menu{position:fixed;left:12px;right:12px;top:72px;width:auto;max-height:calc(100dvh - 84px);overscroll-behavior:contain;padding-bottom:18px}
  .prefs-label{padding:10px 10px 5px}
  .prefs-menu .locale-option{padding:10px 10px}
  .emx-info .prefs-pop{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;z-index:300}
  .prefs-menu .emx-info .prefs-pop{top:auto;margin-top:0;left:16px;right:16px}
}
/* B6: the signed-in buyer's avatar links to the account and carries the unread alerts. */
.emx-avatar{position:relative;text-decoration:none}
.emx-unread{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--orange);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1}
.heart.is-busy,.save.is-busy,[data-emx-hide].is-busy{opacity:.55;pointer-events:none}