/* Indus Terra — cave, amber, quartz dust. Final brand palette. */
:root {
  --cave: #0d0b0a;
  --cave-2: #161311;
  --amber: #c85a32;
  --glow: #f99d42;
  --dust: #f2eae1;
  --mineral: #8c7d75;
  --line: rgba(242, 234, 225, 0.14);
  /* Inline magnifier glyph, so the search field needs no extra HTTP request. */
  --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'DM Sans', 'Segoe UI', sans-serif;
  --container: 1180px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cave);
  color: var(--dust);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.section { padding: 96px 0; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; line-height: 1.12; color: var(--dust); }
.eyebrow {
  color: var(--glow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 14px;
}
.lede { color: rgba(242, 234, 225, 0.78); max-width: 640px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 13px 22px; font-weight: 600; letter-spacing: 0.02em;
  /* Without this the label wraps to two lines in a narrow header and the
     button grows to double height, which inflates the whole header row. */
  white-space: nowrap;
  text-align: center;
}
.btn-primary { background: var(--amber); color: #fff; }
.btn-primary:hover { background: #d8683d; }
.btn-ghost { background: transparent; color: var(--dust); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--dust); }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  padding: 16px 0;
  background: linear-gradient(to bottom, rgba(13,11,10,0.72), transparent);
}
.site-header.scrolled {
  background: rgba(13, 11, 10, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 22px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 18px; letter-spacing: 0.08em; }
.logo-img { height: 36px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-link {
  padding: 10px 14px;
  font-size: 15px;
  color: rgba(242,234,225,0.80);
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-link:hover { color: var(--glow); background: rgba(249,157,66,0.1); }
.nav-link.active { color: #fff; }
.nav-drop { position: relative; }
.nav-drop-panel {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--cave-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px; display: none; box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}
.nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel { display: grid; }
.nav-drop-panel a { padding: 8px 10px; border-radius: 8px; font-size: 14px; color: rgba(242,234,225,0.86); }
.nav-drop-panel a:hover { background: rgba(249,157,66,0.12); color: var(--glow); }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
/* The button must never shrink, or its label wraps and the header doubles in
   height. The search field absorbs any squeeze instead. */
.header-tools .btn { flex: 0 0 auto; }
/* The search field sits over the hero photo, so it needs its own opaque
   backdrop to stay visible against the bright salt faces behind it. */
.nav-search { position: relative; display: flex; align-items: center; }
.nav-search::before {
  content: ''; position: absolute; left: 14px; width: 15px; height: 15px;
  pointer-events: none;
  background: currentColor; color: rgba(242,234,225,0.60);
  -webkit-mask: var(--search-icon) center / contain no-repeat;
  mask: var(--search-icon) center / contain no-repeat;
}
.nav-search input {
  width: 172px;
  background: rgba(20,17,15,0.86);
  border: 1px solid rgba(242,234,225,0.30);
  border-radius: 999px;
  padding: 11px 16px 11px 38px;
  font-size: 15px;
  color: var(--dust);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nav-search input::placeholder { color: rgba(242,234,225,0.62); }
.nav-search input:hover { border-color: rgba(242,234,225,0.46); }
.nav-search input:focus {
  outline: none;
  border-color: var(--glow);
  background: rgba(20,17,15,0.95);
  box-shadow: 0 0 0 3px rgba(249,157,66,0.18);
}
.header-phone { font-size: 14px; color: rgba(242,234,225,0.86); white-space: nowrap; }
.menu-toggle {
  display: none; background: none; border: 0;
  width: 46px; height: 46px; margin-left: auto;
  cursor: pointer; position: relative;
}
.menu-toggle span {
  display: block; height: 2px; margin: 5px 10px; background: var(--dust);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Turn the burger into a close (X) while the drawer is open, so the control
   that opened the menu is also the obvious way to dismiss it. */
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding: 140px 0 64px; overflow: hidden; }
/* The photo is already a clean 16:9 frame of the whole tunnel, so the hero
   shows it as-is: no inset, no base scale, and only a small drift so the shot
   stays sharp and the salt face keeps its colour. */
.hero-bg {
  position: absolute; inset: 0;
  background: url('../assets/hero-4k.jpg?v=43') center center / cover no-repeat;
  animation: drift 9s ease-in-out infinite alternate;
  transform: scale(1);
  will-change: transform;
}
/* Kept light so the pink in the salt is not washed out by the dark wash. The
   headline carries its own text-shadow, which is what keeps it legible. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,6,5,0.52) 0%, rgba(8,6,5,0.36) 30%, rgba(8,6,5,0.12) 62%, rgba(8,6,5,0.02) 100%),
    linear-gradient(180deg, rgba(8,6,5,0.24) 0%, rgba(8,6,5,0.00) 42%, rgba(8,6,5,0.34) 100%);
}
@keyframes drift {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.05) translate3d(-1.1%, -0.7%, 0); }
}
.hero-copy { position: relative; z-index: 1; max-width: 760px; }
.hero h1 {
  font-size: clamp(46px, 7vw, 84px);
  margin-bottom: 18px;
  color: #fffaf4;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 18px 40px rgba(0,0,0,0.45);
}
.hero .lede {
  font-size: 18px;
  margin-bottom: 28px;
  color: rgba(255,250,244,0.94);
  text-shadow: 0 2px 14px rgba(0,0,0,0.65);
}
.hero .eyebrow { text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.trust-row {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line);
}
.trust-row li { list-style: none; font-size: 14px; color: rgba(255,250,244,0.92); text-shadow: 0 1px 8px rgba(0,0,0,0.6); }

.range-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Stacked card: the photo sits on top in its own square frame and the caption
   flows underneath. Text never overlaps the product, so the shot stays clear. */
.range-card {
  border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--cave-2);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.range-card:hover { border-color: rgba(249, 157, 66, 0.42); transform: translateY(-3px); }
.range-card img {
  position: static;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  object-position: center center;
  background: #0d0b0a;
  border-bottom: 1px solid rgba(249, 157, 66, 0.22);
  transition: transform 0.6s ease;
}
.range-card:hover img { transform: scale(1.04); }
.range-body { padding: 16px 18px 20px; }
.range-card strong { font-family: var(--font-display); font-size: 24px; display: block; line-height: 1.15; }
.range-card em { font-style: normal; color: var(--glow); font-size: 13px; }
.range-kicker { letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; color: var(--dust); margin-bottom: 8px; }

.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { background: var(--cave-2); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.stat b { display: block; font-family: var(--font-display); font-size: 28px; color: var(--glow); }
.stat span { color: var(--mineral); font-size: 14px; }

.page-hero { padding: 150px 0 36px; }
.page-hero h1 { font-size: clamp(42px, 6vw, 72px); max-width: 16ch; }

.catalog-block { padding: 28px 0 10px; }
.catalog-intro { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 28px; align-items: center; margin-bottom: 18px; }
.catalog-intro-text { grid-template-columns: 1fr; }
.catalog-photo {
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(249, 157, 66, 0.22);
  background: #0d0b0a; aspect-ratio: 1; width: 100%; max-width: 360px;
}
.catalog-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
@keyframes breathe { to { transform: scale(1.06); } }
.sku-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sku {
  background: var(--cave-2); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column; align-items: stretch;
}
.sku-photo {
  position: relative;
  align-self: stretch;
  margin: 0;
  padding: 0;
  width: 100%;
  aspect-ratio: 1;
  line-height: 0;
  display: block;
  overflow: hidden;
  background: #0d0b0a;
  border: 0;
  border-bottom: 1px solid rgba(249, 157, 66, 0.22);
  border-radius: 0;
}
button.sku-photo {
  appearance: none;
  cursor: pointer;
  text-align: left;
}
.sku-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.sku-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 2vw, 28px); line-height: 1.15;
  margin: 0 0 8px; color: var(--dust);
}
.sku-blurb {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  line-height: 1.45; letter-spacing: 0; text-transform: none;
  color: rgba(242,234,225,0.78); margin: 0 0 8px;
}
.sku-more {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--glow); font-size: 14px; letter-spacing: 0.04em;
}
.sku-more:hover { color: #fff; }
.sku-long { margin-top: 10px; }
.sku-long p { font-size: 14.5px; line-height: 1.65; margin: 0; }
.origin-grid .sku-photo,
.sku-flagship .sku-photo { aspect-ratio: 1; }
.sku-flagship { border-color: rgba(249, 157, 66, 0.45); }
.sku-body { padding: 16px 16px 18px; }
.sku h3 { font-family: var(--font-body); font-size: 18px; margin-bottom: 6px; }
.sku p { color: rgba(242,234,225,0.75); font-size: 15px; }
.sku-lead { color: var(--glow); font-size: 13px; margin: 10px 0; }
.sku-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.size-btn {
  background: transparent; border: 1px solid var(--line); color: var(--dust);
  border-radius: 999px; padding: 7px 12px; cursor: pointer; font-size: 13px;
}
.size-btn:hover { border-color: var(--glow); color: var(--glow); }
.origin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.sku-flagship { border-color: rgba(249, 157, 66, 0.45); }
.group-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 42px); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--glow); margin: 36px 0 18px; line-height: 1.15;
}
#searchNote { color: var(--glow); min-height: 1.2em; margin-bottom: 8px; }

.market-grid, .faq-list, .cert-grid, .team-grid { display: grid; gap: 14px; }
.market-grid { grid-template-columns: repeat(3, 1fr); }
.cert-grid, .team-grid { grid-template-columns: 1fr 1fr; }
.panel { background: var(--cave-2); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.panel h3 { font-family: var(--font-body); font-size: 18px; margin-bottom: 6px; }
.panel p, .faq-list p { color: rgba(242,234,225,0.76); }
.founder-role { color: var(--glow); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin: 4px 0 8px; }

.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 22px; }
.contact-form, .info-card { background: var(--cave-2); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mineral); }
input, select, textarea {
  background: #100e0c; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--dust);
}
textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.info-stack { display: grid; gap: 12px; }
.info-card a { color: var(--glow); }

.site-footer { border-top: 1px solid var(--line); padding: 48px 0 28px; color: var(--mineral); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
.site-footer a:hover { color: var(--dust); }
.site-footer h4 { font-family: var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px; color: var(--glow); margin-bottom: 12px; }
.site-footer li { list-style: none; margin: 6px 0; }
.footer-bottom { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }

.whatsapp-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%; background: #25d366;
  display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }

.quote-modal[hidden] { display: none; }
.quote-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.quote-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.62); }
.quote-dialog {
  position: relative; width: min(860px, 100%); max-height: min(92vh, 820px); overflow: auto;
  background: #100e0c; border: 1px solid var(--line); border-radius: 22px; padding: 18px 22px 22px;
}
.quote-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.quote-bar img { height: 28px; }
.quote-bar span { margin-left: auto; letter-spacing: 0.16em; font-size: 12px; color: var(--mineral); }
.quote-x { background: none; border: 1px solid var(--line); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.q-kicker { color: var(--glow); letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; margin: 12px 0; }
.quote-dialog h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 18px; }
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-choice, .q-pill, .q-country {
  text-align: left; background: transparent; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; cursor: pointer;
}
.q-choice.is-on, .q-pill.is-on, .q-country.is-on { border-color: var(--amber); background: rgba(200,90,50,0.12); }
.q-choice strong { font-weight: 600; }
.q-div { color: var(--glow); letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; margin-bottom: 12px; }
.q-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q-or { margin: 16px 0 8px; letter-spacing: 0.14em; font-size: 12px; color: var(--mineral); }
.q-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.q-countries { display: grid; gap: 6px; margin-top: 10px; }
.q-select-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 14px 16px; text-align: left; cursor: pointer;
  background: #100e0c; border: 1px solid var(--line); border-radius: 14px; color: var(--dust);
}
.q-select-btn .is-placeholder { color: var(--mineral); }
.q-select-btn.is-on { border-color: var(--amber); background: rgba(200,90,50,0.12); }
.q-select-btn.is-on .q-select-value { color: #fff; }
.q-select-btn.is-invalid { border-color: #e07a5f; }
.q-select-chevron {
  width: 9px; height: 9px; flex: none; margin-right: 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
}
.q-select-btn.is-open .q-select-chevron { transform: rotate(225deg) translateY(-1px); }
.q-select-panel {
  margin-top: 8px; padding: 8px; background: #161310;
  border: 1px solid var(--line); border-radius: 14px;
}
.q-select-panel[hidden] { display: none; }
.q-select-panel input { width: 100%; margin: 0 0 8px; }
.q-select-list { max-height: 280px; overflow: auto; display: grid; gap: 2px; }
.q-select-label {
  padding: 10px 12px 4px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mineral);
}
.q-select-opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; background: transparent; border: 0; border-radius: 10px;
  padding: 12px; cursor: pointer; color: var(--dust); font-size: 15px;
}
.q-select-opt:hover, .q-select-opt:focus { background: rgba(249,157,66,0.12); outline: none; }
.q-select-opt.is-on { background: rgba(200,90,50,0.18); color: #fff; }
.q-select-check { color: var(--glow); }
.q-select-empty { color: var(--mineral); padding: 12px; font-size: 14px; }
.q-field-error { color: #e07a5f; font-size: 14px; margin-top: 8px; letter-spacing: 0; text-transform: none; }
.quote-dialog input.is-invalid { border-color: #e07a5f; }
.q-hint { color: var(--mineral); margin: 10px 0 16px; }
.q-review { display: grid; grid-template-columns: 140px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.q-review span { color: var(--mineral); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.q-review button { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.quote-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
#qCountrySearch, #qNotes { width: 100%; margin-top: 8px; }

@media (max-width: 1180px) {
  .range-grid, .market-grid, .sku-grid, .trust-row { grid-template-columns: 1fr 1fr; }
  .split, .catalog-intro, .contact-grid, .footer-grid, .origin-grid { grid-template-columns: 1fr; }
  /* The six links plus the search box and the quote button need roughly 1130px
     of container to sit on one row without touching. Below this the header
     would wrap or overflow, so the drawer takes over - a cleaner result than a
     cramped second row. The margin above the true fit point absorbs
     font-rendering differences across platforms. */
  .menu-toggle { display: block; }
  .main-nav {
    display: none; position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px);
    background: #100e0c; flex-direction: column; align-items: stretch;
    padding: 96px 20px 28px; gap: 2px;
    border-left: 1px solid var(--line);
    box-shadow: -28px 0 60px rgba(0,0,0,0.5);
    overflow-y: auto;
  }
  .main-nav.open { display: flex; }
  .nav-link { padding: 14px 16px; font-size: 17px; border-radius: 12px; }
  .nav-drop-panel { position: static; display: grid; border: 0; box-shadow: none; padding-left: 8px; }
}
@media (max-width: 640px) {
  /* On a phone the search field gets its own full-width row under the logo,
     which is the only way it stays visible and tappable. */
  .header-inner { flex-wrap: wrap; row-gap: 10px; }
  .site-header { padding: 12px 0 14px; }
  .logo { font-size: 16px; }
  .logo-img { height: 30px; }
  .header-tools { width: 100%; margin-left: 0; order: 3; gap: 8px; }
  .nav-search { flex: 1; min-width: 0; }
  .nav-search input { width: 100%; font-size: 16px; padding: 12px 14px 12px 40px; }
  .header-tools .btn { padding: 12px 18px; }
  /* The burger stays on the logo row instead of being pushed down. */
  .menu-toggle { order: 2; margin-left: auto; }
  .main-nav { padding-top: 84px; }
  .range-grid, .market-grid, .sku-grid, .trust-row, .cert-grid, .team-grid, .q-grid, .q-split, .form-row { grid-template-columns: 1fr; }
  .q-review { grid-template-columns: 1fr; }
  .hero { min-height: 88vh; }  /* Phones get the purpose-shot portrait frame. Reusing the 16:9 desktop image
     here would magnify it roughly 3x and crop the tunnel away. */
  .hero-bg {
    background-image: url('../assets/hero-4k-tall.jpg?v=43');
    background-position: center center;
  }
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(8,6,5,0.34) 0%, rgba(8,6,5,0.04) 32%, rgba(8,6,5,0.46) 100%);
  }
  @keyframes drift {
    0%   { transform: scale(1) translate3d(0, 0, 0); }
    100% { transform: scale(1.05) translate3d(0, -1%, 0); }
  }
}
/* Smallest phones (<=359px): the search field and the quote button only just
   fit side by side, so the paddings are tightened rather than stacking the
   button onto a third row, which would push the header to ~193px tall. */
@media (max-width: 359px) {
  .header-tools { gap: 6px; }
  .nav-search input { padding: 11px 12px 11px 34px; }
  .nav-search::before { left: 12px; width: 14px; height: 14px; }
  .header-tools .btn { padding: 11px 14px; font-size: 14px; }
}