/* =====================================================================
   The module layer.
   YUU is three products under one roof: Property, Cars and bikes, Tours.
   A single flat row of five tabs worked when there was one product. With
   three it would be eleven, which is a menu nobody reads. So the header
   carries the product choice and a second bar carries the sections inside
   it. Two shallow decisions instead of one long list.
   ===================================================================== */
header .hw{display:flex;align-items:center;gap:22px;height:84px}
@media (max-width:900px){ header .hw{height:70px} }
@media (max-width:560px){ header .hw{height:62px} }

.mods{display:flex;gap:4px;align-items:center}
.mods button{background:none;border:0;font:inherit;font-size:15px;font-weight:600;
  color:var(--ink3);cursor:pointer;padding:8px 15px;border-radius:99px;white-space:nowrap;
  transition:color .14s,background .14s}
.mods button:hover{color:var(--ink)}
.mods button.on{background:var(--ink);color:var(--paper)}

.tools{display:flex;align-items:center;gap:8px;margin-left:auto}

/* The section bar. Quieter than the module row on purpose: it is a
   sub-choice, and it should never compete with the product choice above it. */
.subbar{border-top:1px solid var(--line)}
.subbar .tabs{display:flex;gap:2px;align-items:center;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.subbar .tabs::-webkit-scrollbar{display:none}
.subbar .tabs button{background:none;border:0;font:inherit;font-size:13.5px;font-weight:500;
  color:var(--ink3);cursor:pointer;padding:12px 14px;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .14s,border-color .14s}
.subbar .tabs button:hover{color:var(--ink)}
.subbar .tabs button.on{color:var(--ink);border-bottom-color:var(--terra)}
.subbar.hide{display:none}

/* A module with nothing in it yet says so, rather than pretending. */
#v-vehicles .empty, #v-tours .empty{margin-top:8px}

@media (max-width:760px){
  header .hw{flex-wrap:wrap;height:auto;padding-block:10px;gap:12px}
  .mods{order:3;width:100%;overflow-x:auto;scrollbar-width:none}
  .mods::-webkit-scrollbar{display:none}
  .tools{order:2}
}

/* style.css still carries the original pill treatment for nav.tabs, written
   when the tabs were the primary navigation. Inside the sub-bar they are the
   secondary choice, so the pill is unwound here rather than deleted there:
   the old rules still apply if this stylesheet ever fails to load. */
.subbar nav.tabs{margin-left:0;flex-wrap:nowrap}
.subbar nav.tabs button{background:none;border-radius:0;font-weight:500}
.subbar nav.tabs button:hover{background:none;color:var(--ink)}
.subbar nav.tabs button.on{background:none;color:var(--ink);font-weight:600;
  border-bottom-color:var(--terra)}
@media (max-width:760px){ .subbar nav.tabs{order:0;width:auto;margin:0} }

/* The side gutter. .hero shares its element with .w, so any `padding`
   shorthand on .hero silently zeroes .w's 20px side padding and the text runs
   into the edge of a phone screen. Restated here as padding-inline so the
   gutter cannot be lost again by a shorthand written later. */
.w{padding-inline:20px}
@media (max-width:560px){ .w{padding-inline:18px} }