/* Shared marketing-page component styles — reused as-is by the homepage,
   the About Us page, and (in part) the Shop page. Anything here must stay
   loaded together on every template that references these classes. */

/* Shared layout/component primitives -- used by the homepage and any
   future template (e.g. About Us) built with this design system. */
.am-homepage,
.am-homepage *,
.am-about,
.am-about * {
  box-sizing: border-box;
}

.am-homepage,
.am-about {
  background: #fff;
  color: var(--am-text);
  font-family: "Instrument Sans";
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.45;
  overflow: hidden;
}

.am-homepage h1,
.am-homepage h2,
.am-homepage h3,
.am-homepage h4,
.am-about h1,
.am-about h2,
.am-about h3,
.am-about h4 {
  color: var(--am-black);
  font-family: "Fraunces";
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
}

.am-homepage h2,
.am-about h2 {
  font-size: var(--am-h2-size);
  line-height: var(--am-h2-line-height);
}

.am-homepage h3,
.am-about h3 {
  font-size: var(--am-h3-size);
  line-height: var(--am-h3-line-height);
}

.am-homepage h4,
.am-about h4 {
  font-size: var(--am-h4-size);
  line-height: var(--am-h4-line-height);
}

.am-homepage h1,
.am-about h1 {
  line-height: .95;
}

.am-homepage a,
.am-about a {
  text-decoration: none;
}

.am-homepage img,
.am-about img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

.am-fluid {
  margin: 0 auto;
  max-width: 1800px;
  padding-left: 60px;
  padding-right: 60px;
  width: 100%;
}

.am-eyebrow,
.am-section-head .am-eyebrow {
  color: #000000BF;
  margin: 0 0 15px;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.am-section {
  padding: var(--am-section-y) 0;
}

/* Light-gray full-bleed background for the product-carousel section
   variant (New Arrivals on the homepage, Related Products on the single
   product page — both render <section class="am-section am-products">).
   Used to live only in automania-home.css, which the product page never
   loads, so "More For Your Collection" rendered on plain white instead
   of matching Figma's gray band — confirmed live. Consolidated here so
   every page using this section variant gets it. */
.am-products {
  background: #f4f4f4;
  position: relative;
}

.am-section-head {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: var(--am-section-head-y);
}

/* Figma's real section-heading spec is "Display M" (Fraunces SemiBold
   65px, -1.53px tracking) — bigger than the generic --am-h2-size
   (52px) these were inheriting, confirmed live on both the homepage
   and About Us page (computed 52px, should be 65px). Same
   var(--am-display-m-size)/weight/line-height pattern already used for
   the About hero h1. This also fixes the single product page's related
   products heading, which has no .am-homepage/.am-about ancestor and
   so previously fell back to the browser's default h2 size entirely. */
.am-section-head h2 {
  font-size: var(--am-display-m-size);
  font-weight: 600;
  letter-spacing: -1.53px;
  line-height: 1.21;
}

.am-section-head__right {
  align-items: center;
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.am-view-link {
  align-items: center;
  color: var(--am-red);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 600;
  gap: 8px;
  letter-spacing: 0;
  line-height: 18px;
}

.am-view-link:hover {
  color: var(--am-black);
}

.am-homepage .fa-solid,
.am-about .fa-solid {
  display: inline-block;
  flex: 0 0 auto;
  font-style: normal;
  line-height: 1;
}

.am-homepage .fa-solid.fa-arrow-right,
.am-about .fa-solid.fa-arrow-right {
  background-color: currentColor;
  height: 12px;
  margin-left: 5px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h306.8L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h306.8L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  vertical-align: -1px;
  width: 12px;
}

.am-homepage .fa-solid.fa-arrow-right:before,
.am-about .fa-solid.fa-arrow-right:before {
  content: "";
  display: none;
}

.am-view-link .fa-solid.fa-arrow-right {
  height: 15px;
  margin-left: 4px;
  width: 15px;
}

.am-button .fa-solid.fa-arrow-right {
  height: 16px;
  margin-left: 0px;
  width: 16px;
}

.am-button {
  align-items: center;
  border: 1px solid var(--am-red);
  display: inline-flex;
  font-size: 18px;
  font-weight: 600;
  gap: 12px;
  justify-content: center;
  line-height: 28px;
  min-height: 52px;
  padding: 0 22px;
  transition: box-shadow .18s ease, filter .18s ease;
  white-space: nowrap;
  opacity: 1;
  border-radius: 10px;
}

.am-button:hover,
.am-button:focus {
  box-shadow: 0 4px 12px rgba(203, 36, 46, .16);
  filter: brightness(1.03);
}

.am-button img {
  flex: 0 0 auto;
  height: 16px;
  object-fit: contain;
  width: 16px;
}

/* The uploaded "top-right" arrow (used on ghost/secondary buttons like the
   hero's "New Arrivals") has its glyph drawn much smaller inside its own
   30x30 canvas than "right-arrow" is inside its 21x21 canvas (confirmed by
   diffing the two SVGs directly: same ~16.8-unit arrow, same 1.75 stroke
   width, just a bigger canvas around it) — at the shared icon box that
   made it visibly smaller than the primary button's icon even though both
   render in an identical box. Scaled up to match the primary icon's actual
   visual size instead of its box size (same ratio as before, rescaled for
   the smaller 16px base icon). */
.am-button img[src*="top-right"] {
  height: 23px;
  width: 23px;
}

.am-button.am-button--primary,
.am-button.am-button--primary:visited,
.am-button.am-button--primary:hover,
.am-button.am-button--primary:focus {
  background: var(--am-red);
  border-color: var(--am-red);
  color: #ffffff;
}

.am-button.am-button--ghost,
.am-button.am-button--ghost:visited,
.am-button.am-button--ghost:hover,
.am-button.am-button--ghost:focus {
  background: transparent;
  border-color: var(--am-red);
  color: var(--am-red);
}

.am-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.am-hero__eyebrow {
  align-items: center;
  color: #000000;
  display: flex;
  gap: 8px;
  margin: 0 0 40px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
}

.am-hero__eyebrow span {
  color: var(--am-red);
}

.am-hero__eyebrow img {
  flex: 0 0 auto;
  height: 18px;
  object-fit: contain;
  width: 18px;
}

.am-rich-text {
  font-weight: 400;
  font-size: 19px;
  line-height: 32px;
  letter-spacing: 0;
  margin: 0 0 40px;
}

.am-rich-text p:last-child {
  margin-bottom: 0;
}

/* Shared "Promise" section (dark background, icon cards with a small
   badge label) -- reused as-is by the homepage and the About Us page. */
.am-promise {
  background: #000;
  color: #fff;
  padding: var(--am-section-y) 0;
}

.am-promise__grid {
  display: grid;
  gap: 120px;
  grid-template-columns: minmax(360px, .85fr) minmax(0, 1.15fr);
  justify-content: center;
  align-items: center;
}

.am-promise .am-eyebrow {
  color: #FFFBFBBF;
}

/* Self-contained font declaration (not relying on the generic
   .am-homepage h2 / .am-about h2 cascade — this section renders on the
   single product page too, which has neither ancestor class, so it was
   falling back to the browser's bare h2 default there). Matches the
   same "Display M" spec (65px Fraunces SemiBold) used by .am-section-head
   h2 for every other section heading. */
.am-promise h2 {
  color: #fff;
  font-family: var(--am-font-heading);
  font-size: var(--am-display-m-size);
  font-weight: 600;
  letter-spacing: -1.53px;
  line-height: 1.21;
  margin-bottom: 46px;
}

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

.am-promise-cards {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(var(--am-card-grid-columns, 2), minmax(0, 1fr));
}

.am-promise-cards article {
  border-radius: 10px;
  padding: 25px;
  background: #FFFFFF17;
}

.am-promise-cards article > div {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 28px;
}

.am-promise-cards em {
  color: var(--am-red);
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.am-promise-cards h3 {
  color: #fff;
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 18px;
  font-family: Fraunces;
  font-weight: 600;
}

.am-promise-cards p {
  color: #ffffff;
  margin: 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
}

/* Icon on the left / red label on the right needs ~245px of card content
   width (the 55px icon plus the longest label, "40K+ COLLECTORS"). The
   2-column section layout leaves the cards narrower than that between
   roughly 920px and 1300px (and again around 600px), where the label
   wrapped onto two lines or sat flush against the icon and the card
   titles wrapped too. So this is keyed to the card's own width rather than
   the screen's: when it gets that narrow the header stacks (icon, then the
   label underneath, both left-aligned) and the title steps down a size.
   Wider cards are unchanged. */
.am-promise-cards article {
  container-type: inline-size;
}

@container (max-width: 245px) {
  .am-promise-cards article > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
  }

  .am-promise-cards h3 {
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 12px;
  }
}

/* Narrowest cards (~920-1000px screens): the longest label still needs
   a smaller size to stay on one line, and titles like "Collector Packaging"
   wrap, so every title gets two lines of height — that keeps the
   paragraphs underneath starting at the same place across the row. */
@container (max-width: 190px) {
  .am-promise-cards em {
    font-size: 14px;
    letter-spacing: 1.2px;
  }

  .am-promise-cards h3 {
    min-height: 52px;
  }
}

/* Shared testimonial/author card and newsletter block -- reused as-is by
   the homepage and the About Us page. */
.am-testimonial-grid {
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(var(--am-card-grid-columns, 3), minmax(0, 1fr));
}

.am-testimonial-tools {
  display: flex;
  gap: 11px;
  justify-content: flex-end;
  margin-bottom: 24px;
}

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

.am-testimonial-tools button:hover {
  background: var(--am-red);
  border-color: var(--am-red);
  color: #fff;
}

.am-testimonial-rail {
  display: grid;
  gap: 25px;
  grid-auto-columns: minmax(300px, 360px);
  grid-auto-flow: column;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: none;
}

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

.am-testimonial-rail .am-testimonial {
  min-width: 0;
}

.am-testimonial {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 36px;
}

.am-stars {
  color: var(--am-gold);
  font-size: 22px;
  margin-bottom: 15px;
}

.am-testimonial blockquote {
  border: 0;
  color: #000000;
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid #e0e0e0;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
}

.am-author {
  align-items: center;
  display: flex;
  gap: 16px;
}

.am-author img {
  border-radius: 50%;
  flex: 0 0 54px;
  height: 54px;
  object-fit: cover;
  width: 54px;
}

.am-author span {
  align-items: center;
  background: var(--am-red);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 54px;
  font-size: 18px;
  font-weight: 700;
  height: 54px;
  justify-content: center;
}

.am-author p {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  letter-spacing: 0px;
  color: #000000BF;
}

.am-author strong {
  display: block;
  margin-bottom: 0px;
  font-weight: 600;
  font-size: 20px;
  line-height: 29.91px;
  letter-spacing: 0px;
  color: #0D0D0F;
}

.am-newsletter {
  background: #fff;
  padding: 0 0 80px;
}

.am-newsletter__box {
  align-items: center;
  background: #000;
  border-radius: 10px;
  color: #fff;
  display: grid;
  gap: 54px;
  grid-template-columns: minmax(0, .85fr) minmax(420px, 0.8fr);
  overflow: hidden;
  padding: 60px 40px;
}

.am-newsletter__form {
  align-self: center;
  justify-self: end;
  max-width: 720px;
  width: 100%;
}

.am-newsletter .am-eyebrow {
  color: #ffffff;
  font-weight: 400;
  text-transform: none;
}

.am-newsletter h2 {
  color: #fff;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 42px;
  margin-bottom: 24px;
}

.am-newsletter h2 span {
  color: var(--am-red);
}

.am-newsletter__title span {
  align-items: flex-end;
  color: var(--am-red);
  display: inline-flex;
  gap: 7px;
  line-height: inherit;
  vertical-align: baseline;
}

.am-newsletter__title img {
  display: inline-block;
  flex: 0 0 auto;
  height: 22px;
  margin-bottom: 6px;
  max-width: 58px;
  object-fit: contain;
  vertical-align: baseline;
  width: auto;
}

.am-newsletter__box > div:first-child p:not(.am-eyebrow) {
  color: #ffffff;
  margin: 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
}

.am-newsletter__form .wpcf7 {
  width: 100%;
}

.am-newsletter__form .wpcf7-form {
  margin: 0;
  min-height: 62px;
  position: relative;
}

.am-newsletter__form .subscribe-form-home {
  align-items: stretch;
  display: flex;
  width: 100%;
}

.am-newsletter__form .subscribe-form-home p {
  display: contents;
  margin: 0;
}

.am-newsletter__form .wpcf7-form-control-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.am-newsletter__form input[type="email"] {
  border: 0;
  border-radius: 10px 0 0 10px;
  color: #000;
  font-size: 18px;
  font-weight: 500;
  height: 56px;
  outline: 0;
  padding: 0 24px;
  width: 100%;
}

.am-newsletter__form input[type="submit"] {
  background: var(--am-red);
  border: 0;
  border-radius: 0 10px 10px 0;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 600;
  height: 56px;
  padding: 0 24px;
}

.am-newsletter__form input[type="submit"]:hover {
  background: #a91e26;
}

.am-newsletter__form .wpcf7-spinner {
  margin: 14px 0 0 10px;
}

.am-newsletter__form .wpcf7-not-valid-tip {
  display: none;
}

.am-newsletter__form .wpcf7-response-output {
  align-items: center;
  border: 1px solid #f0b400;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  font-size: 13px;
  left: 0;
  line-height: 18px;
  margin: 0 !important;
  min-height: 36px;
  padding: 8px 12px;
  position: absolute;
  right: 0;
  top: 66px;
}

.am-newsletter__form small {
  color: #ffffff;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  margin-top: 14px;
}

/* .wpcf7-response-output is absolutely positioned right over this small
   print (so a validation/success message doesn't shift the newsletter
   box's height) — but that means whenever CF7 actually has a message to
   show, the two sit on top of each other and both become readable at
   once. Hide the small print for as long as there's a real message. */
.am-newsletter__form:has(.wpcf7-response-output:not(:empty)) small {
  visibility: hidden;
}

/* "Our Story" — Home (.am-story__*) and About (.am-about-story__*) each
   have their own PHP markup and CMB2 fields for this section rather
   than one shared render function, but the two versions use identical
   values, so both class prefixes are just listed together here instead
   of duplicating the rule in automania-home.css and automania-about.css. */
.am-story,
.am-about-story {
  background: #f4f4f4;
  padding: var(--am-section-y) 0;
}

.am-story__grid,
.am-about-story__grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 0.9fr 1.1fr;
}

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

.am-story__copy > div.am-rich-text,
.am-about-story__copy > div.am-rich-text {
  color: #000;
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 58px;
  max-width: 630px;
}

.am-story__signature,
.am-about-story__signature {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
}

.am-story__signature img,
.am-about-story__signature img {
  height: auto;
  max-width: 205px;
  object-fit: contain;
}

.am-story__signature small,
.am-about-story__signature small {
  color: #000000;
  font-weight: 400;
  font-size: 18px;
  line-height: 29px;
  letter-spacing: 0px;
}

.am-story__image,
.am-about-story__image {
  align-self: center;
  margin: 0;
  width: 100%;
}

.am-story__image img,
.am-about-story__image img {
  height: auto;
  object-fit: contain;
  width: 100%;
}

.am-story__image figcaption,
.am-about-story__image figcaption {
  color: #303030;
  font-size: 18px;
  font-style: italic;
  line-height: 24px;
  margin-top: 12px;
  text-align: center;
}