@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Instrument+Sans:wght@400;500;600;700&display=swap");

/* Colors, fonts, and the type scale now live in css/global.css (loaded site-wide)
   so every future template shares the same design system tokens. */


.am-product-foot a .fa-solid.fa-arrow-right,
.am-maker-card em .fa-solid.fa-arrow-right,
.am-brand-card em .fa-solid.fa-arrow-right {
  height: 15px;
  margin-left: 4px;
  width: 15px;
}

.am-hero {
  background: #f4f4f4;
}

.am-hero .am-fluid {
    display: grid;
    /* Same 2-column split all the way from 1920px down to 769px (only
       .am-hero__copy's max-width and the fluid type scale change the
       actual measure in between) — confirmed live at 1919/1199/1100/1025/
       900/769px that this ratio doesn't overflow anywhere in that range. */
    grid-template-columns: minmax(360px, 43%) minmax(0, 57%);
    padding-right: 0;
}

.am-hero__copy {
  align-self: center;
  max-width: 550px;
  padding: 72px 0;
}

.am-hero h1 {
    margin-bottom: 46px;
    font-family: var(--am-font-heading);
    font-weight: 600;
    font-size: var(--am-display-xl-size);
    line-height: .95;
    letter-spacing: -1px;
}

.am-hero .am-heading-pair {
  color: var(--am-black);
}

.am-hero h1 > span:not(.am-heading-pair),
.am-hero h1 .am-heading-pair > span,
.am-collector h2 span,
.am-story h2 span,
.am-newsletter h2 span {
  color: var(--am-red);
}

.am-hero__copy > div.am-rich-text {
  color: #000;
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 46px;
  max-width: 551px;
}

.am-brand-grid .am-rich-text {
    margin: 0 0 20px;
}

.am-stats {
  background: #f4f4f4;
  padding: var(--am-section-y) 0;
}

.am-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
}

.am-stat {
  align-items: center;
  border-right: 1px solid #E4E4E7;
  display: flex;
  gap: 22px;
  min-height: 66px;
  padding: 0 46px;
}

.am-stat:first-child {
  padding-left: 0;
}

.am-stat:last-child {
  border-right: 0;
}

.am-stat > span {
  align-items: center;
  background: #fff;
  border-radius: 8px;
  color: var(--am-red);
  display: inline-flex;
  flex: 0 0 58px;
  font-size: 25px;
  height: 58px;
  justify-content: center;
}

.am-stat strong {
    color: #111112;
    display: block;
    font-family: var(--am-font-body);
    font-weight: 600;
    font-size: 38px;
    line-height: 1;
    letter-spacing: 0;
}

.am-stat p {
    color: #000000;
    margin: 4px 0 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0;
    white-space: nowrap;
}

.am-scale-grid {
  display: grid;
  gap: 26px;
  --am-card-grid-columns: 4;
}

.am-scale-card {
    /* 429 / 411 = the size of the scale-category images, so they show whole
       (no cropping). Was 430 / 444, which cropped them and put the label over
       the model. */
    aspect-ratio: 429 / 411;
    background: #111;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 0 28px 28px;
    position: relative;
    border-radius: 10px;
}

.am-scale-card:after,
.am-brand-card:after {
  background: linear-gradient(0deg, #000000 13.72%, rgba(0, 0, 0, 0.25) 49.95%, rgba(0, 0, 0, 0.1) 79.59%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

/* Scale cards: a soft shadow only behind the label (bottom 40%) instead of
   the shared half-card gradient, which dimmed the whole photo. */
.am-scale-card:after {
  background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .45) 20%, rgba(0, 0, 0, 0) 40%);
}

.am-scale-card img,
.am-brand-card > img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

.am-scale-card span,
.am-scale-card strong {
  position: relative;
  z-index: 2;
}

.am-scale-card span {
  color: rgba(255,255,255,.8);
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  margin-bottom: 12px;
}

.am-scale-card strong {
  color: #fff;
  font-family: "Fraunces";
  font-size: 48px;
  font-weight: 600;
  line-height: 42px;
}

/* The label (count + "1:18") used fixed 16px/48px sizes, so in a narrow card
   it took a much bigger share of the picture and ended up on top of the
   model. These scale with the card's own width instead (cqw), so the label
   always occupies the bottom ~24% of the card — at 429px wide they come out
   at exactly the sizes above (16px / 48px / 28px padding). Browsers without
   container units skip this block and keep the fixed sizes. The selectors are
   one class more specific so they also beat the per-breakpoint font-size
   overrides in automania-home-responsive.css. */
@supports (width: 1cqw) {
  .am-scale-grid .am-scale-card {
    container-type: inline-size;
    padding: 0;
  }

  .am-scale-grid .am-scale-card span {
    font-size: clamp(10px, 3.73cqw, 16px);
    line-height: 1;
    margin: 0 clamp(10px, 6.5cqw, 28px) clamp(4px, 2.8cqw, 12px);
  }

  .am-scale-grid .am-scale-card strong {
    font-size: clamp(18px, 11.2cqw, 48px);
    line-height: .875;
    margin: 0 clamp(10px, 6.5cqw, 28px) clamp(10px, 6.5cqw, 28px);
  }
}

.am-product-tools {
  display: flex;
  gap: 11px;
}

.am-product-tools button {
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 30%;
    color: #787272;
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}

/* Now a <ul> (see homepage_template.php) so it can hold the shared
   .am-shop-product-card <li> markup — reset list styling on top of the
   existing rail layout. */
.am-product-rail {
  display: grid;
  gap: 24px;
  /* Exactly 3 full cards + a 20% peek of the 4th, on any viewport — a
     fixed/minmax px width was showing 4-5 cramped cards on wide screens
     instead (confirmed live: 300px floor won on a 1920px container).
     3 gaps between 3.2 visible cards is the standard approximation. */
  grid-auto-columns: calc((100% - 3 * 24px) / 3.2);
  grid-auto-flow: column;
  list-style: none;
  margin: 0;
  overflow-x: auto;
  padding: 0 0 10px;
  scrollbar-width: none;
}

.am-product-rail::-webkit-scrollbar {
  display: none;
}

/* WooCommerce's own default stylesheet applies its classic float-based
   grid (ul.products li.product { width: ...%; float: left; margin: ... })
   to every <li> here too — same conflict already found and fixed for the
   Shop archive (shop.css) and the product page's Related Products rail
   (product.css), just not yet for this rail. */
.am-product-rail li.product {
  clear: none;
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
}

.am-empty {
  background: #fff;
  border-radius: 8px;
  margin: 0;
  padding: 24px;
}

.am-collector {
  aspect-ratio: 1920 / 1086;
  background-color: #fff;
  background-image: var(--am-collector-bg, none);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 60px 0;
  min-height: 620px;
  padding: 0;
}

.am-collector__inner {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 620px;
}

.am-collector__copy {
  /* The banner art has a rev-counter gauge down its left edge (~7% of the
     width) and the car on the right (its roof starts ~55% across). Both
     scale with the section, so the text block is positioned and capped in
     vw too (160px / 700px / 662px at the 1920 design size, shrinking
     proportionally below ~1450px) instead of fixed px, which let it run
     into the gauge and the car at narrower desktop widths. .am-fluid adds
     60px of its own left padding, hence the - 60px. */
  margin-left: calc(min(160px, 11vw) - 60px);
  max-width: min(700px, 46vw);
  min-width: 0;
  position: relative;
}

.am-collector__social {
  align-items: center;
  color: #000;
  display: flex;
  font-size: 16px;
  font-weight: 400;
  gap: 10px;
  line-height: 23px;
  margin: 0 0 22px;
}

.am-collector__avatars {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
}

.am-collector__avatars img {
  border: 2px solid #fff;
  object-fit: cover;
}

.am-collector__avatars img + img {
  margin-left: -8px;
}

.am-collector__avatars img:nth-child(2) {
  height: 34px;
  position: relative;
  width: 34px;
  z-index: 2;
}

.am-collector h2 {
  font-size: var(--am-display-l-size);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  margin-bottom: 26px;
}

.am-collector .am-rich-text {
  color: #000;
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 36px;
  max-width: min(662px, 40vw);
}

.am-makers {
  background: #f4f4f4;
}

.am-maker-grid {
  display: grid;
  gap: 28px;
  --am-card-grid-columns: 4;
}

.am-maker-card {
  background: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.am-maker-card > img {
  aspect-ratio: 430 / 300;
  display: block;
  object-fit: cover;
  width: 100%;
}

.am-maker-card__body {
  align-items: start;
  display: grid;
  flex: 1 1 auto;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 60px;
  min-height: 118px;
  padding: 17px 20px 22px;
}

.am-maker-card__count {
    display: block;
    margin-bottom: 6px;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0px;
    color: #000000BF;
}

.am-maker-card strong {
    color: #000000;
    display: block;
    font-family: "Fraunces";
    font-weight: 600;
    font-size: 25px;
    line-height: 25px;
    margin: 5px 0;
}

.am-maker-card em {
    align-items: center;
    color: var(--am-red);
    display: inline-flex;
    font-style: normal;
    gap: 5px;
    margin-top: 8px;
    font-weight: 600;
    font-size: 18px;
    line-height: 16px;
    letter-spacing: 0px;
}

.am-maker-card__logo {
  align-self: start;
  color: #111;
  display: flex;
  font-size: 18px;
  font-style: italic;
  font-weight: 900;
  justify-content: flex-end;
  line-height: 1;
  margin-top: 0px;
  max-width: 100px;
  text-align: right;
  text-transform: uppercase;
}

.am-maker-card__logo img {
  display: block;
  max-height: 46px;
  max-width: 78px;
  object-fit: contain;
  width: auto;
}

.am-promo {
  background: #fff;
}

.am-promo__card {
    background-color: #111;
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    color: #fff;
    padding: 88px 64px;
}

.am-promo__card p {
    margin: 0 0 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 23.57px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FDD246;
}

.am-promo__card h2 {
  color: #fff;
  font-size: var(--am-display-m-size);
  font-weight: 600;
  letter-spacing: -1.53px;
  line-height: 1.21;
  margin-bottom: 42px;
}

.am-brand-grid {
  display: grid;
  gap: 20px 20px;
  grid-auto-rows: 334px;
  --am-card-grid-columns: 3;
}

.am-brand-card {
  background: #101010;
  border-radius: 7px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0 28px 28px;
  position: relative;
}

.am-brand-card--large {
  grid-column: span 2;
}

.am-brand-card div,
.am-brand-logo {
  position: relative;
  z-index: 2;
}

.am-brand-logo {
  border-radius: 3px;
  display: flex;
  height: 58px;
  justify-content: center;
  position: absolute;
  right: 18px;
  top: 18px;
  width: 58px;
}

.am-brand-logo img {
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  width: 100%;
}

/* Figma insets this badge ~19px/16px from the card's corner, same as the
   regular cards' 18px/18px — the previous right:0/top:0 sat it exactly on
   the card's rounded corner (border-radius + overflow:hidden), clipping
   it. Confirmed live: the badge was flush against the card edge and
   visibly cut by the corner curve. */
.am-brand-card--large .am-brand-logo {
  height: 74px;
  right: 19px;
  top: 16px;
}

.am-brand-card h3 {
    color: #fff;
    margin-bottom: 0px;
    font-family: Fraunces;
    font-weight: 600;
    font-size: 34px;
    line-height: 34px;
    letter-spacing: 0px;
}

.am-brand-card--large h3 {
    margin-bottom: 10px;
    color: #fff;
    font-family: Fraunces;
    font-weight: 600;
    font-size: 34px;
    line-height: 34px;
    letter-spacing: 0px;
}

.am-brand-card:not(.am-brand-card--large) .am-rich-text {
  display: none;
}

.am-brand-card .am-rich-text {
    color: #ffffff;
    margin: 0 0 18px;
    max-width: 590px;
    font-family: Instrument Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0px;
}

.am-brand-card span {
    font-weight: 400;
    font-size: 18px;
    line-height: 28.8px;
    letter-spacing: 0px;
    color: #FFFFFF;
}

.am-brand-card em {
  align-items: center;
  background: var(--am-red);
  border-radius: 10px;
  color: #fff;
  display: inline-flex;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  gap: 12px;
  justify-content: center;
  line-height: 28px;
  min-height: 52px;
  padding: 0 22px;
}

.am-community {
  background: #fff;
}

.am-instagram-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 34px;
}

.am-instagram-head p {
  align-items: center;
  color: #0d0d0f;
  display: flex;
  font-size: 20px;
  font-weight: 600;
  gap: 15px;
  margin: 0;
}

.am-instagram-head i {
  color: var(--am-red);
  font-size: 28px;
}

.am-instagram-grid {
  display: grid;
  gap: 25px;
  --am-card-grid-columns: 6;
}

.am-scale-grid,
.am-maker-grid,
.am-brand-grid,
.am-instagram-grid {
  grid-template-columns: repeat(var(--am-card-grid-columns), minmax(0, 1fr));
}

.am-instagram-grid a {
  aspect-ratio: 1 / 1;
  background: #eee;
  border-radius: 10px;
  display: block;
  overflow: hidden;
}

.am-instagram-grid img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}