/* Wolf Auto Parts - Site layout styles
   Header, Footer, Homepage, Cart
   Shared tokens and base styles live in wolf-foundations.css */

/* ================================================================
   HEADER
   ================================================================ */

.wolf-header {
  position: relative;
  z-index: var(--wolf-z-header);
  width: 100%;
}

/* --- Topbar --- */
.wolf-header__topbar {
  background: var(--wolf-blue);
  color: var(--wolf-text-inverse);
  font-size: 1.2rem;
  text-align: center;
  padding: 0.45rem 1rem;
  letter-spacing: 0.02em;
}

.wolf-header__topbar a {
  color: var(--wolf-text-inverse);
  text-decoration: none;
  font-weight: 600;
}

.wolf-header__topbar a:hover,
.wolf-header__topbar a:focus-visible {
  text-decoration: underline;
}

.wolf-header__topbar-inner {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.wolf-header__promo {
  font-weight: 600;
}

/* When the topbar wraps to two lines, the separator is noise. */
@media (max-width: 640px) {
  .wolf-header__topbar-sep {
    display: none;
  }
}

/* --- Main bar --- */
.wolf-header__main {
  background: var(--wolf-bg);
  border-bottom: 1px solid var(--wolf-border);
}

.wolf-header__main-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
}

/* Logo */
.wolf-header__logo {
  flex-shrink: 0;
}

.wolf-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}

/* Search wrapper — positions relative for dropdown */
.wolf-header__search {
  flex: 1;
  min-width: 0;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

/* Pill-shaped search bar */
.wolf-header__search-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--wolf-bg);
  border: 1px solid var(--wolf-border-strong);
  border-radius: 24px;
  padding: 0.65rem 0.6rem 0.65rem 1.2rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wolf-header__search-bar:focus-within {
  border-color: var(--wolf-blue);
  box-shadow: var(--wolf-shadow-focus-blue);
}

.wolf-header__search-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--wolf-text-muted);
}

.wolf-header__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 1.6rem;
  color: var(--wolf-text);
  font-family: inherit;
}

.wolf-header__search-input:focus-visible {
  outline: none;
}

.wolf-header__search-input::placeholder {
  color: var(--wolf-text-muted);
}

/* Vehicle chip — pill button inside search bar */
.wolf-header__vehicle-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.8rem;
  background: var(--wolf-bg-muted);
  border: 1px solid var(--wolf-border-strong);
  border-radius: 16px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--wolf-blue);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, opacity 0.2s ease, max-width 0.25s ease;
  max-width: 200px;
  overflow: hidden;
}

.wolf-header__vehicle-chip:hover,
.wolf-header__vehicle-chip:focus-visible {
  background: var(--wolf-bg-muted-hover);
}

.wolf-header__vehicle-chip.is-active {
  background: var(--wolf-gold-light);
  border-color: var(--wolf-gold);
  color: var(--wolf-blue);
}

.wolf-header__chip-arrow {
  flex-shrink: 0;
}

.wolf-header__chip-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--wolf-text-muted, #888);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: -0.2rem;
  transition: background 0.12s ease;
}

.wolf-header__chip-clear[hidden] {
  display: none;
}

.wolf-header__chip-clear:hover,
.wolf-header__chip-clear:focus-visible {
  background: var(--wolf-text, #333);
}

/* Icon buttons — transparent style */
.wolf-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.wolf-header__icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--wolf-text);
  transition: color 0.12s ease, background 0.12s ease;
  text-decoration: none;
}

.wolf-header__icon-btn:hover,
.wolf-header__icon-btn:focus-visible {
  color: var(--wolf-blue);
  background: var(--wolf-bg-subtle);
}

.wolf-header__icon-btn svg {
  width: 22px;
  height: 22px;
}

/* Badge */
.wolf-header__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wolf-gold);
  color: var(--wolf-text-inverse);
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 50%;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
}

/* Instant search dropdown */
.wolf-instant-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--wolf-bg);
  border: 1px solid var(--wolf-border);
  border-radius: 12px;
  box-shadow: var(--wolf-shadow-popover);
  z-index: var(--wolf-z-dropdown);
  overflow: hidden;
}

.wolf-instant-dropdown__scope {
  padding: 0.6rem 1rem;
  font-size: 1.2rem;
  color: var(--wolf-blue);
  background: var(--wolf-gold-warm, #fef8ee);
  border-bottom: 1px solid var(--wolf-gold, #f7941d);
}

.wolf-instant-dropdown__scope a {
  color: var(--wolf-link);
  text-decoration: underline;
  margin-left: 0.2rem;
}

.wolf-instant-dropdown__header {
  padding: 0.75rem 1rem 0.5rem;
  font-size: 1.2rem;
  color: var(--wolf-text-muted);
  border-bottom: 1px solid var(--wolf-border);
}

.wolf-instant-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  text-decoration: none;
  color: var(--wolf-text);
  transition: background 0.1s ease;
  cursor: pointer;
}

.wolf-instant-dropdown__item:hover,
.wolf-instant-dropdown__item:focus-visible,
.wolf-instant-dropdown__item.is-highlighted {
  background: var(--wolf-bg-subtle);
}

.wolf-instant-dropdown__item-img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--wolf-bg-subtle);
  flex-shrink: 0;
}

.wolf-instant-dropdown__item-info {
  flex: 1;
  min-width: 0;
}

.wolf-instant-dropdown__item-title {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--wolf-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wolf-instant-dropdown__item-meta {
  font-size: 1.2rem;
  color: var(--wolf-text-muted);
}

.wolf-instant-dropdown__item-price {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--wolf-text-dark);
  flex-shrink: 0;
}

.wolf-instant-dropdown__footer {
  padding: 0.65rem 1rem;
  text-align: center;
  border-top: 1px solid var(--wolf-border);
}

.wolf-instant-dropdown__footer a {
  color: var(--wolf-blue);
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
}

.wolf-instant-dropdown__footer a:hover,
.wolf-instant-dropdown__footer a:focus-visible {
  text-decoration: underline;
}

.wolf-instant-dropdown__loading {
  padding: 1.5rem;
  text-align: center;
  color: var(--wolf-text-muted);
  font-size: 1.3rem;
}

/* Mobile search row */
.wolf-header__mobile-search {
  display: none;
}

/* Vehicle chip + clear button hide while typing (toggled by JS adding .is-typing to search bar) */
.wolf-header__search-bar.is-typing .wolf-header__vehicle-chip,
.wolf-header__search-bar.is-typing .wolf-header__chip-clear {
  max-width: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
}

/* --- Nav bar — white background, underline hover --- */
.wolf-header__nav {
  background: var(--wolf-bg);
  border-bottom: 1px solid var(--wolf-border);
}

.wolf-header__nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.wolf-header__nav-inner::-webkit-scrollbar {
  display: none;
}

.wolf-header__nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.2rem;
  color: var(--wolf-blue);
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
  border-bottom: 2px solid transparent;
}

.wolf-header__nav-link:hover,
.wolf-header__nav-link:focus-visible,
.wolf-header__nav-link.is-active {
  color: var(--wolf-gold);
  border-bottom-color: var(--wolf-gold);
}

/* Hamburger — hidden on desktop */
.wolf-header__hamburger {
  display: none;
}

/* Mobile menu — hidden by default */
.wolf-header__mobile-menu {
  display: none;
}

/* ================================================================
   HEADER - MOBILE (max-width: 768px)
   ================================================================ */

@media (max-width: 768px) {
  .wolf-header__main-inner {
    padding: 0.6rem 1rem;
    gap: 0.5rem;
  }

  .wolf-header__logo img {
    height: 32px;
  }

  /* Push login + cart icons to the far right */
  .wolf-header__actions {
    margin-left: auto;
  }

  /* Hide desktop search bar on mobile — it moves to mobile search row */
  .wolf-header__search {
    display: none;
  }

  /* Show mobile search row */
  .wolf-header__mobile-search {
    display: block;
    padding: 0 1rem 0.6rem;
  }

  .wolf-header__mobile-search .wolf-header__search {
    display: block;
    max-width: none;
  }

  .wolf-header__mobile-search .wolf-header__search-bar {
    border-radius: 20px;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
  }

  .wolf-header__mobile-search .wolf-header__search-input {
    font-size: 1.6rem;
  }

  .wolf-header__mobile-search .wolf-header__vehicle-chip {
    font-size: 1.2rem;
    padding: 0.3rem 0.6rem;
  }

  /* Hide horizontal nav bar on mobile — replaced by hamburger menu */
  .wolf-header__nav {
    display: none;
  }

  /* Show hamburger button */
  .wolf-header__hamburger {
    display: flex;
  }

  /* Mobile slide-down menu */
  .wolf-header__mobile-menu {
    display: none;
    background: var(--wolf-bg);
    border-bottom: 1px solid var(--wolf-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .wolf-header__mobile-menu.is-open {
    display: block;
  }

  .wolf-header__mobile-menu-inner {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
  }

  .wolf-header__mobile-menu-link {
    display: block;
    padding: 1.2rem 2rem;
    color: var(--wolf-blue);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--wolf-border-light, #f0f0f0);
    transition: background 0.12s ease;
  }

  .wolf-header__mobile-menu-link:last-child {
    border-bottom: none;
  }

  .wolf-header__mobile-menu-link:hover,
  .wolf-header__mobile-menu-link:active {
    background: var(--wolf-bg-subtle);
    color: var(--wolf-gold);
  }

  /* Instant dropdown on mobile */
  .wolf-instant-dropdown {
    border-radius: 0 0 12px 12px;
    left: -1rem;
    right: -1rem;
  }
}


/* ================================================================
   FOOTER
   ================================================================ */

.wolf-footer {
  background: var(--wolf-blue);
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 1.5rem 0;
  margin-top: 4rem;
}

.wolf-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.5rem;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 2.5rem;
}

.wolf-footer__brand p {
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.65);
}

.wolf-footer__logo img {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.wolf-footer__heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--wolf-text-inverse);
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wolf-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wolf-footer__links li {
  margin-bottom: 0.5rem;
}

.wolf-footer__links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 1.3rem;
  transition: color 0.12s ease;
}

.wolf-footer__links a:hover,
.wolf-footer__links a:focus-visible {
  color: var(--wolf-text-inverse);
}

.wolf-footer__col--popular {
  min-width: 0;
}

/* Footer phone */
.wolf-footer__phone {
  margin: 0;
}

.wolf-footer__phone a {
  color: var(--wolf-gold);
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 700;
}

.wolf-footer__phone a:hover,
.wolf-footer__phone a:focus-visible {
  text-decoration: underline;
}

/* Footer address + hours (Visit Us column) */
.wolf-footer__address {
  font-style: normal;
  margin: 0.75rem 0 0;
}

.wolf-footer__address a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 1.3rem;
  line-height: 1.6;
  transition: color 0.12s ease;
}

.wolf-footer__address a:hover,
.wolf-footer__address a:focus-visible {
  color: var(--wolf-text-inverse);
  text-decoration: underline;
}

.wolf-footer__hours {
  margin: 0.75rem 0 0;
  font-size: 1.3rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

/* Footer bottom bar */
.wolf-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.25rem 0;
  text-align: center;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Footer — Tablet */
@media (max-width: 1024px) {
  .wolf-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .wolf-footer__brand {
    grid-column: 1 / -1;
  }
}

/* Footer — Mobile */
@media (max-width: 768px) {
  .wolf-footer {
    padding: 2rem 1rem 0;
    margin-top: 3rem;
  }

  .wolf-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ================================================================
   HOMEPAGE
   ================================================================ */

.wolf-home__section {
  padding: 4.8rem 1.5rem;
}
.wolf-home__section-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.wolf-home__eyebrow {
  margin: 0 0 0.9rem;
  color: var(--wolf-amber);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

/* HERO */
.wolf-home__hero {
  padding: 5.6rem 1.5rem 4.8rem;
  text-align: center;
  background: linear-gradient(180deg, var(--wolf-bg) 0%, var(--wolf-bg-subtle) 100%);
  border-bottom: 1px solid var(--wolf-border);
}
.wolf-home__hero-inner {
  max-width: 820px;
  margin: 0 auto;
}
.wolf-home__hero-title {
  margin: 0;
  font-size: clamp(2.8rem, 4vw, 4rem);
  line-height: 1.1;
  color: var(--wolf-blue);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.wolf-home__hero-sub {
  margin: 1.4rem auto 0;
  max-width: 64ch;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--wolf-text-body);
}
.wolf-home__hero-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.4rem;
  flex-wrap: wrap;
}
.wolf-home__hero-actions .wolf-btn {
  min-width: 18rem;
  padding: 1.2rem 2rem;
  font-size: 1.6rem;
}

/* SECTION HEADINGS */
.wolf-home__section-title {
  margin: 0 auto 0.6rem;
  text-align: center;
  font-size: 2.6rem;
  color: var(--wolf-text-dark);
  font-weight: 700;
}
.wolf-home__section-desc {
  margin: 0 auto 2.8rem;
  max-width: 62ch;
  text-align: center;
  font-size: 1.5rem;
  color: var(--wolf-text-body);
  line-height: 1.55;
}

/* MAKES */
.wolf-home__makes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}
.wolf-home__make-card {
  display: flex;
  flex-direction: column;
  background: var(--wolf-bg);
  border: 1px solid var(--wolf-border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.wolf-home__make-card:hover,
.wolf-home__make-card:focus-visible {
  box-shadow: 0 8px 24px rgba(27, 58, 107, 0.12);
  transform: translateY(-2px);
  border-color: var(--wolf-border-strong);
  outline: none;
}
.wolf-home__make-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--wolf-bg-subtle);
}
.wolf-home__make-card-body {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.wolf-home__make-card-name {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--wolf-blue);
}
.wolf-home__make-card-copy {
  font-size: 1.4rem;
  color: var(--wolf-text-body);
  line-height: 1.5;
}

/* WHY (subtle bg band) */
.wolf-home__why {
  background: var(--wolf-bg-subtle);
  border-top: 1px solid var(--wolf-border);
  border-bottom: 1px solid var(--wolf-border);
}
.wolf-home__why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}
.wolf-home__why-item {
  padding: 1.8rem 1.8rem 2rem;
  background: var(--wolf-bg);
  border: 1px solid var(--wolf-border);
  border-radius: 8px;
}
.wolf-home__why-item h3 {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--wolf-blue);
}
.wolf-home__why-item p {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.55;
  color: var(--wolf-text-body);
}

/* FAQ */
.wolf-home__faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}
.wolf-home__faq-item {
  background: var(--wolf-bg);
  border: 1px solid var(--wolf-border);
  border-radius: 8px;
  overflow: hidden;
}
.wolf-home__faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--wolf-text-dark);
}
.wolf-home__faq-item summary::-webkit-details-marker { display: none; }
.wolf-home__faq-item summary::after {
  content: "+";
  font-size: 2rem;
  color: var(--wolf-text-muted);
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}
.wolf-home__faq-item[open] summary::after { transform: rotate(45deg); }
.wolf-home__faq-item-body {
  padding: 0 1.6rem 1.5rem;
  font-size: 1.45rem;
  line-height: 1.6;
  color: var(--wolf-text-body);
}

@media (max-width: 900px) {
  .wolf-home__makes-grid,
  .wolf-home__why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .wolf-home__hero { padding: 4rem 1rem 3.2rem; }
  .wolf-home__section { padding: 3.6rem 1rem; }
  .wolf-home__makes-grid,
  .wolf-home__why-grid {
    grid-template-columns: 1fr;
  }
  /* Make cards: compact horizontal rows — a small thumbnail beside the
     name/blurb instead of a full-width photo, so the list is short to scroll. */
  .wolf-home__makes-grid { gap: 1rem; }
  .wolf-home__make-card {
    flex-direction: row;
    align-items: center;
  }
  .wolf-home__make-card img {
    width: 9.2rem;
    height: 9.2rem;
    aspect-ratio: auto;
    flex-shrink: 0;
  }
  .wolf-home__make-card-body {
    padding: 1rem 1.4rem;
  }
  .wolf-home__hero-actions .wolf-btn {
    width: 100%;
    min-width: 0;
  }
  .wolf-home__section-title { font-size: 2.2rem; }
}


/* ================================================================
   INFO PAGES — about, contact, warranty
   ================================================================ */

.wolf-info-page {
  padding: 5rem 1.5rem;
  max-width: 1180px;
  margin: 0 auto;
}
.wolf-info-page__eyebrow {
  margin: 0 0 0.9rem;
  color: var(--wolf-amber);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wolf-info-page__hero {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.wolf-info-page__title {
  margin: 0;
  font-size: 4rem;
  line-height: 1.06;
  color: var(--wolf-blue);
}
.wolf-info-page__lede {
  margin: 1.3rem 0 0;
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--wolf-text-body);
}
.wolf-info-page__content {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.wolf-info-page__section {
  padding: 2rem;
  background: var(--wolf-bg);
  border: 1px solid rgba(27, 58, 107, 0.08);
  border-radius: 1.8rem;
  box-shadow: 0 12px 30px rgba(27, 58, 107, 0.05);
}
.wolf-info-page__section > :first-child { margin-top: 0; }
.wolf-info-page__section--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}
.wolf-info-page__section--cta { text-align: center; }
.wolf-info-page__section p,
.wolf-info-card p,
.wolf-info-list li {
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--wolf-text-body);
}
.wolf-info-page__section h2,
.wolf-info-page__section h3,
.wolf-info-card h2,
.wolf-info-card h3 {
  margin: 0 0 0.9rem;
  color: var(--wolf-text-dark);
}
.wolf-info-card {
  padding: 1.6rem;
  background: var(--wolf-bg);
  border: 1px solid rgba(27, 58, 107, 0.08);
  border-radius: 1.8rem;
}
.wolf-info-page__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}
.wolf-info-list {
  margin: 0;
  padding-left: 1.8rem;
}
.wolf-info-list li { margin-top: 0.8rem; }
.wolf-info-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.8rem;
}
.wolf-info-page__section--cta .wolf-info-page__actions { justify-content: center; }

@media (max-width: 768px) {
  .wolf-info-page { padding: 3.2rem 1rem; }
  .wolf-info-page__title { font-size: 3rem; }
  .wolf-info-page__section { padding: 1.8rem; }
  .wolf-info-page__section p, .wolf-info-card p, .wolf-info-list li, .wolf-info-page__lede { font-size: 1.5rem; }
  .wolf-info-page__actions { flex-direction: column; }
  .wolf-info-page__actions .wolf-btn { width: 100%; justify-content: center; }
  .wolf-info-page__section--grid, .wolf-info-page__columns { grid-template-columns: 1fr; }
}


/* ================================================================
   CART PAGE
   ================================================================ */

.wolf-cart-page {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.wolf-cart-page__title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--wolf-text-dark);
  margin: 0 0 1.5rem;
}

/* Cart items list */
.wolf-cart__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wolf-cart-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--wolf-border);
}

.wolf-cart-item:last-child {
  border-bottom: none;
}

/* Item image */
.wolf-cart-item__img {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--wolf-border);
  background: var(--wolf-bg-subtle);
}

.wolf-cart-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Item info */
.wolf-cart-item__info {
  flex: 1;
  min-width: 0;
}

.wolf-cart-item__name {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--wolf-text-dark);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}

.wolf-cart-item__sku {
  font-size: 1.2rem;
  color: var(--wolf-text-muted);
  margin: 0;
}

.wolf-cart-item__price {
  font-size: 1.3rem;
  color: var(--wolf-text);
  margin: 0.25rem 0 0;
  font-weight: 500;
}

/* Sold-out line: kept visible but dimmed and flagged. The remove button stays
   at full strength so the shopper can clear it. */
.wolf-cart-item--sold .wolf-cart-item__img,
.wolf-cart-item--sold .wolf-cart-item__price {
  opacity: 0.5;
}

.wolf-cart-item__sold-badge {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.6rem;
  border-radius: 4px;
  background: var(--wolf-bg-danger);
  color: var(--wolf-status-error-dark);
  border: 1px solid var(--wolf-border-danger);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Quantity controls */
.wolf-cart-item__qty {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  border: 1px solid var(--wolf-border);
  border-radius: 4px;
  overflow: hidden;
}

.wolf-cart-item__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--wolf-bg-subtle);
  border: none;
  cursor: pointer;
  color: var(--wolf-text);
  font-size: 1.4rem;
  font-weight: 600;
  transition: background 0.1s ease;
}

.wolf-cart-item__qty-btn:hover,
.wolf-cart-item__qty-btn:focus-visible {
  background: var(--wolf-bg-light);
}

.wolf-cart-item__qty-val {
  width: 36px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--wolf-text-dark);
  border-left: 1px solid var(--wolf-border);
  border-right: 1px solid var(--wolf-border);
  line-height: 32px;
  background: var(--wolf-bg);
}

/* Item total */
.wolf-cart-item__total {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wolf-text-dark);
  flex-shrink: 0;
  min-width: 60px;
  text-align: right;
}

/* Remove button */
.wolf-cart-item__remove {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wolf-status-error);
  font-size: 1.3rem;
  font-weight: 600;
  border-radius: 4px;
  transition: background 0.12s ease;
  flex-shrink: 0;
}

.wolf-cart-item__remove:hover,
.wolf-cart-item__remove:focus-visible {
  background: var(--wolf-bg-danger-soft);
}

.wolf-cart-item__remove svg {
  width: 18px;
  height: 18px;
}

.wolf-cart-item__remove-label {
  line-height: 1;
}

/* Cart summary */
.wolf-cart__summary {
  margin-top: 2rem;
  padding: 2rem;
  background: var(--wolf-bg-subtle);
  border-radius: 8px;
  border: 1px solid var(--wolf-border);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.wolf-cart__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  font-size: 1.4rem;
  color: var(--wolf-text);
}

.wolf-cart__summary-row--total {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--wolf-text-dark);
}

.wolf-cart__checkout-note {
  font-size: 1.3rem;
  color: var(--wolf-text-muted);
  margin: 0;
}

.wolf-cart__shipping-note {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--wolf-status-success-alt);
  background: var(--wolf-bg-success);
  border-radius: 6px;
  padding: 0.8rem 1.2rem;
  margin: 0;
}

/* Freight variant of the shipping note — shown instead of the free-shipping
   note when any cart line ships freight. Amber caution tone, matching
   .wolf-cart-item__freight and the .wolf-cart__freight-details block below. */
.wolf-cart__shipping-note--freight {
  color: var(--wolf-status-warning);
  background: var(--wolf-bg-warning);
}

/* Per-line freight flag in the cart — amber caution tone, matching the
   freight delivery disclaimer below. 1rem = 10px. */
.wolf-cart-item__freight {
  margin: 0.4rem 0 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--wolf-status-warning);
}

/* Freight delivery disclaimer — rendered once in the cart summary when any
   line ships freight. Moved here from the master part page. Amber caution
   family. */
.wolf-cart__freight-details {
  font-size: 1.3rem;
  color: var(--wolf-status-warning);
  background: var(--wolf-bg-warning);
  border: 1px solid var(--wolf-border-warning);
  border-radius: 6px;
  padding: 0.8rem 1.2rem;
  margin: 0;
}

.wolf-cart__freight-details strong {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.wolf-cart__freight-details ul {
  margin: 0;
  padding-left: 1.8rem;
}

.wolf-cart__freight-details li {
  margin-bottom: 0.3rem;
}

.wolf-cart__freight-details li:last-child {
  margin-bottom: 0;
}

/* Shown when a sold-out item blocks checkout until removed. */
.wolf-cart__sold-note {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--wolf-status-error-dark);
  background: var(--wolf-bg-danger-soft);
  border: 1px solid var(--wolf-border-danger);
  border-radius: 6px;
  padding: 0.8rem 1.2rem;
  margin: 0;
}

.wolf-cart__checkout-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.5em;
  margin-top: 0.5rem;
  padding: 1.1em 1.5em;
  background: var(--wolf-gold);
  color: var(--wolf-text-inverse);
  border: none;
  border-radius: 6px;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.wolf-cart__checkout-btn:hover,
.wolf-cart__checkout-btn:focus-visible {
  background: var(--wolf-gold-hover);
}

.wolf-cart__checkout-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Cart continue shopping */
.wolf-cart__continue {
  display: block;
  text-align: center;
  margin-top: 1rem;
  font-size: 1.3rem;
  color: var(--wolf-blue);
  text-decoration: none;
  font-weight: 500;
}

.wolf-cart__continue:hover,
.wolf-cart__continue:focus-visible {
  text-decoration: underline;
}

/* Empty cart */
.wolf-cart__empty {
  text-align: center;
  padding: 4rem 1.5rem;
}

.wolf-cart__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
  background: var(--wolf-bg-subtle);
  border-radius: 50%;
  color: var(--wolf-text-muted);
}

.wolf-cart__empty-icon svg {
  width: 36px;
  height: 36px;
}

.wolf-cart__empty-heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--wolf-text-dark);
  margin: 0 0 0.5rem;
}

.wolf-cart__empty-text {
  font-size: 1.4rem;
  color: var(--wolf-text-body);
  margin: 0 0 1.5rem;
}

.wolf-cart__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.8em;
  background: var(--wolf-gold);
  color: var(--wolf-text-inverse);
  border: none;
  border-radius: 6px;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.wolf-cart__empty-cta:hover,
.wolf-cart__empty-cta:focus-visible {
  background: var(--wolf-gold-hover);
}

/* Cart — Mobile */
@media (max-width: 768px) {
  .wolf-cart-page {
    padding: 0 1rem;
    margin: 1.5rem auto;
  }

  .wolf-cart-page__title {
    font-size: 2rem;
  }

  .wolf-cart-item {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 0;
  }

  .wolf-cart-item__img {
    width: 64px;
    height: 64px;
  }

  .wolf-cart-item__info {
    flex-basis: calc(100% - 80px);
  }

  .wolf-cart-item__qty {
    margin-left: 0;
  }

  .wolf-cart-item__total {
    margin-left: auto;
  }

  .wolf-cart__summary {
    padding: 1.25rem;
  }
}


/* ── Toast Notifications ──────────────────────────────────────── */
.wolf-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 6px;
  color: var(--wolf-text-inverse);
  font-size: 14px;
  z-index: var(--wolf-z-overlay);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  max-width: 360px;
}
.wolf-toast--visible { opacity: 1; transform: translateY(0); }
.wolf-toast--success { background: var(--wolf-status-success); }
.wolf-toast--error { background: var(--wolf-status-error); }
.wolf-toast--info { background: var(--wolf-status-info); }

/* Empty-state image fallback for cart items */
.wolf-cart-item__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.wolf-cart-item__img--empty::before {
  content: "";
  width: 32px;
  height: 32px;
  border: 2px dashed var(--wolf-border-strong);
  border-radius: 4px;
  opacity: 0.6;
}

/* ================================================================
   TRUST STRIP (site-wide buyer-confidence band, above footer)
   ================================================================ */
.wolf-trust-strip {
  background: var(--wolf-bg-subtle);
  border-top: 1px solid var(--wolf-border);
  border-bottom: 1px solid var(--wolf-border);
  padding: 1rem 1.6rem;
}

.wolf-trust-strip__inner {
  max-width: 120rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.4rem;
  font-size: 1.3rem;
  color: var(--wolf-text);
}

.wolf-trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  white-space: nowrap;
}

.wolf-trust-strip__star {
  color: var(--wolf-gold);
}

.wolf-trust-strip__sep {
  color: var(--wolf-border-light);
}

.wolf-trust-strip a {
  color: inherit;
  text-decoration: none;
}

.wolf-trust-strip a:hover,
.wolf-trust-strip a:focus-visible {
  text-decoration: underline;
}

/* Shipping/returns caveat tooltip on the strip. CSS-only: opens on hover
   (desktop) and on :focus-within (keyboard + mobile tap), so it needs no JS
   and stays within the CSP. */
.wolf-trust-tip {
  position: relative;
}

.wolf-trust-tip__btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0 0 0 0.4rem;
  font: inherit;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--wolf-text-muted);
  cursor: help;
}

.wolf-trust-tip__btn:hover,
.wolf-trust-tip__btn:focus-visible {
  color: var(--wolf-text);
}

.wolf-trust-tip__bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.9rem);
  transform: translateX(-50%);
  width: max-content;
  max-width: 26rem;
  padding: 0.9rem 1.1rem;
  background: var(--wolf-bg);
  color: var(--wolf-text);
  border: 1px solid var(--wolf-border);
  border-radius: 0.6rem;
  box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.14);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
  pointer-events: none;
}

/* Down-pointing caret */
.wolf-trust-tip__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 0.6rem solid transparent;
  border-top-color: var(--wolf-bg);
}

.wolf-trust-tip:hover .wolf-trust-tip__bubble,
.wolf-trust-tip:focus-within .wolf-trust-tip__bubble {
  opacity: 1;
  visibility: visible;
}

/* On narrow screens keep the three strongest items (Top Rated, Google,
   free shipping) and drop the secondary floors so it never wraps to 3 lines. */
@media (max-width: 640px) {
  .wolf-trust-strip__item--secondary {
    display: none;
  }

  /* The shipping/returns tip is the rightmost strip item, so center-anchoring
     its tooltip (left:50% + translateX(-50%)) pushes the bubble ~17px past the
     right viewport edge on ~430px-wide phones (large iPhones) — that overflow
     adds a sliver of horizontal page scroll site-wide, so the page drifts
     off-centre when you swipe right. Anchor the bubble to the full-width strip
     instead of the narrow trigger so it always stays on-screen at every width. */
  .wolf-trust-strip {
    position: relative;
  }
  .wolf-trust-tip {
    position: static;
  }
  .wolf-trust-tip__bubble {
    left: auto;
    right: 1.6rem;
    transform: none;
    max-width: min(26rem, calc(100vw - 3.2rem));
  }
  .wolf-trust-tip__bubble::after {
    left: auto;
    right: 1.6rem;
    transform: none;
  }
}

/* ================================================================
   TRUST BLOCK (reusable: compact on product page, full on home/About)
   ================================================================ */
.wolf-trust-block {
  max-width: 120rem;
  margin: 2.4rem auto;
  padding: 0 1.6rem;
}

.wolf-trust-block--compact {
  margin: 1.6rem 0 0;
  padding: 1.6rem;
  background: var(--wolf-bg-subtle);
  border: 1px solid var(--wolf-border);
  border-radius: 0.8rem;
}

/* Last child (the points list) carries its own bottom margin, which would
   stack on the container padding and make the bottom gap larger than the top.
   Drop it so the interior padding reads even top-to-bottom. */
.wolf-trust-block--compact > :last-child {
  margin-bottom: 0;
}

.wolf-trust-block__title {
  font-size: 2.4rem;
  color: var(--wolf-blue);
  text-align: center;
  margin: 0 0 1.6rem;
}

.wolf-trust-block__photo {
  width: 100%;
  max-height: 36rem;
  object-fit: cover;
  border-radius: 0.8rem;
  margin: 0 0 2rem;
}

.wolf-trust-block__points {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.8rem;
  font-size: 1.4rem;
  color: var(--wolf-text);
}

.wolf-trust-block__points strong {
  color: var(--wolf-blue);
}

/* Compact (product-page) trust list: green-check rows in a 2-column grid
   (matching the mockup), collapsing to one column on narrow screens. */
.wolf-trust-block__points--checks {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem 1.2rem;
}

@media (max-width: 600px) {
  .wolf-trust-block__points--checks {
    grid-template-columns: 1fr;
  }
}

.wolf-trust-block__points--checks li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.wolf-trust-block__check {
  flex: none;
  color: var(--wolf-status-success-alt);
  font-weight: 800;
  line-height: 1.5;
}

.wolf-trust-block__reviews {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1fr;
}

.wolf-trust-block--full .wolf-trust-block__reviews {
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
}

.wolf-trust-review {
  margin: 0;
  padding: 1.4rem 1.6rem;
  background: var(--wolf-bg);
  border: 1px solid var(--wolf-border);
  border-radius: 0.8rem;
}


.wolf-trust-review__stars {
  color: var(--wolf-gold);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}

.wolf-trust-review__quote {
  margin: 0 0 0.8rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--wolf-text);
}

.wolf-trust-review__author {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--wolf-text-muted);
}

.wolf-trust-block__cta {
  margin: 1.4rem 0 0;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
}

.wolf-trust-block__cta a {
  color: var(--wolf-link);
  text-decoration: none;
}

.wolf-trust-block__cta a:hover,
.wolf-trust-block__cta a:focus-visible {
  text-decoration: underline;
}

/* ---- About page facility gallery ---- */
.wolf-about__gallery {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  max-width: 120rem;
  margin: 0 auto 2.4rem;
}

.wolf-about__gallery img {
  width: 100%;
  height: 28rem;
  object-fit: cover;
  border-radius: 0.8rem;
  border: 1px solid var(--wolf-border);
}