/*!
Theme Name: EV charger
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ev-charger
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

EV charger is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* ==========================================================================
   Header
   ========================================================================== */
.site-header { background: var(--white); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  height: 34px;
  padding: 0 var(--gutter);
  background: var(--cream);
  font-size: 10px;
  line-height: 22px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--body);
}
.topbar a:hover { color: var(--heading); }
.topbar__divider { width: 1px; height: 10px; background: var(--line); }

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 89.5px;
  padding: 8px var(--gutter);
  border-bottom: 0.5px solid var(--line);
}
.navbar__logo img { width: 252.08px; height: 44px; object-fit: contain; }

.nav { display: flex; align-items: center; gap: 24px; }
.nav__item {
  display: flex;
  align-items: center;
  height: 64px;
  font-weight: 500;
  font-size: 10px;
  line-height: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--heading);
  white-space: nowrap;
}
.nav__item:hover { opacity: .65; }
.nav__item--caret { gap: 4px; }
.nav__item--caret::after {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 1.5px 3px;
  border-right: 1px solid var(--heading);
  border-bottom: 1px solid var(--heading);
  opacity: .6;
  transform: rotate(45deg);
}

.navbar__actions { display: flex; align-items: center; gap: 12px; }
.navbar__actions img { width: 16px; height: 16px; }
.navbar__cart { display: flex; align-items: center; }
.navbar__cart span {
  padding-left: 6px;
  font-size: 10px;
  line-height: 22px;
  letter-spacing: 1.2px;
  color: var(--heading);
}

/* ==========================================================================
   Assurance strip
   ========================================================================== */
.assurance {
  min-height: 263px;
  border-top: 1px solid var(--line);
  padding: 0 var(--gutter);
  background: var(--white);
}
.assurance__inner {
  display: flex;
  justify-content: center;
  gap: 24px;
  max-width: var(--content);
  margin: 0 auto;
  padding: 56px var(--gutter);
}
.assure {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.assure img { width: 54px; height: 54px; }
.assure h3 {
  padding-top: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 22px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--heading);
}
.assure p {
  width: 290px;
  max-width: 100%;
  font-size: 13px;
  line-height: 21px;
  color: var(--body);
}
.assure a:hover { color: var(--heading); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--cream-dark); }
.footer__inner { max-width: var(--content); margin: 0 auto; }

.footer__cols {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  height: 352px;
  padding: 64px 0 56px;
}
.footer__col { display: flex; flex-direction: column; gap: 20px; }
.footer__col--sm { width: 227.826px; flex: none; }
.footer__col--md { width: 296.174px; flex: none; }
.footer__col--contact { width: 341.391px; flex: none; margin-left: auto; gap: 12px; }

.footer__col h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 22px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--heading);
}
.footer__col p,
.footer__list a {
  max-width: 300px;
  font-size: 13px;
  line-height: 21px;
  color: var(--body);
}
.footer__col--contact p:first-of-type { padding-top: 8px; }
.footer__col--contact p:nth-of-type(n+3) { font-size: 12px; line-height: 19px; }
.footer__col--contact p:last-of-type { max-width: none; }

.footer__list { display: flex; flex-direction: column; gap: 11px; }
.footer__list li { padding: 0.5px 0; }
.footer__list a:hover { color: var(--heading); }

.footer__social { display: flex; align-items: center; gap: 16px; padding-top: 10px; }
.footer__social a { display: block; width: 36px; height: 36px; }
.footer__social .footer__social-linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--line-warm);
  border-radius: 9999px;
  background: var(--cream);
}
.footer__social-linkedin img { width: 16px; height: 13.4235px; margin-top: -0.6px; }

.footer__join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 36px 0;
  border-top: 1px solid var(--line-warm);
}
.footer__join h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 22px;
  letter-spacing: 3.36px;
  text-transform: uppercase;
  color: var(--heading);
}
.join-form {
  display: flex;
  width: 340px;
  max-width: 100%;
  border: 0.5px solid var(--line-input);
  background: var(--cream);
}
.join-form input {
  flex: 1 1 256px;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: var(--heading);
  outline: none;
}
.join-form input::placeholder { color: var(--muted); opacity: 1; }
.join-form button {
  flex: 1 0 auto;
  padding: 0 24px;
  border: 0;
  background: var(--brown);
  font-weight: 500;
  font-size: 11px;
  line-height: 22px;
  letter-spacing: 1.98px;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
}
.join-form button:hover { background: var(--brown-dark); }

.footer__bottom { padding: 0 var(--gutter); border-top: 1px solid var(--line-warm); }
.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--content);
  margin: 0 auto;
  padding: 22px 0;
  font-size: 11px;
  line-height: 22px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: #5f5f5f;
}
.footer__legal { display: flex; gap: 22px; }
.footer__legal a:hover { color: var(--heading); }
/* ##########################################################################
   2. HOME
   ########################################################################## */

/* ==========================================================================
   Vintage Watches Miami — Home
   Built from Figma node 913:2147 (1440px frame).
   Shared header / footer / buttons live in common.css.
   ========================================================================== */

/* ---------- Section type ---------- */
.eyebrow {
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 2.42px;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--muted { color: var(--tertiary); }
.eyebrow--light { color: rgba(255, 255, 255, 0.92); }

.h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 38px;
  letter-spacing: 3.36px;
  text-transform: uppercase;
  color: var(--heading);
}
.h2--light { color: var(--white); }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.text-link {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--heading);
  font-weight: 500;
  font-size: 11px;
  line-height: 24px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--heading);
  white-space: nowrap;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  height: 640px;
  overflow: hidden;
  background: var(--stone);
}
.hero__img,
.hero__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 50% 50%; }
.hero__overlay { background: rgba(0, 0, 0, 0.5); }

.hero__content {
  position: absolute;
  top: calc(50% + 0.5px);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 32px);
  text-align: center;
}
.hero__title {
  max-width: 900px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 50px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.hero__text {
  max-width: 560px;
  padding-top: 22px;
  font-size: 15px;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.hero__btn { margin-top: 34px; }

/* ==========================================================================
   Brands
   ========================================================================== */
.brands {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 48px;
  background: var(--white);
}
.brands__intro {
  max-width: 600px;
  padding-top: 2px;
  font-size: 15px;
  line-height: 25px;
  color: var(--body);
}

.brands__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.brand {
  display: block;
  height: 568px;
  background: var(--white);
  text-align: center;
}
.brand__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--stone);
}
.brand__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.brand:hover .brand__media img { transform: scale(1.03); }
.brand__name {
  margin-top: 22px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: var(--heading);
}
.brand__count {
  margin-top: 8px;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--body);
}