/**
 * Dealer Template - Layout & Styling
 *
 * Complete styling based on Figma design:
 * - Layout structure with max-width 1440px
 * - Background colors from Figma
 * - Typography and spacing
 */

/* ==================== GLOBAL RESET ==================== */
/* .dealer-page-wireframe * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
} */

.dealer-page-wireframe {
  width: 100%;
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.6;
  color: #000000;
}

/* Section headings in navy blue */
.dealer-page-wireframe .product-categories h2,
.dealer-page-wireframe .featured-products h2,
.dealer-page-wireframe .category-grid h2 {
  color: #093b66;
}

.dealer-page-wireframe .dealer-name {
  color: #fff;
  font-weight: bold;
}

.dealer-page-wireframe .dealer-name-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dealer-page-wireframe .dealer-logo {
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ==================== SECTION 1: HEADER ==================== */
.dealer-page-wireframe header {
  width: 100%;
}

/* Header Row 1: Full-width black background */
.dealer-page-wireframe .header-row-1 {
  width: 100%;
  background-color: #000000;
  color: #ffffff;
}

.dealer-page-wireframe .header-row-1 > div {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Header Row 2: Full-width navy background */
.dealer-page-wireframe .header-row-2 {
  width: 100%;
  background-color: #093b66;
  color: #ffffff;
}

.dealer-page-wireframe .header-row-2 > div {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dealer-page-wireframe .header-logo {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.dealer-page-wireframe .header-contact {
  display: flex;
  gap: 2rem;
}

.dealer-page-wireframe .main-nav {
  display: flex;
  gap: 2rem;
}

.dealer-page-wireframe .main-nav a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 600;
}

/* ==================== SECTION 2: HERO SLIDER ==================== */
.dealer-page-wireframe .hero-slider {
  width: 100%;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.dealer-page-wireframe .hero-slide {
  max-width: 1440px;
  margin: 0 auto;
}

.dealer-page-wireframe .hero-content {
  text-align: center;
}

.dealer-page-wireframe .slider-controls {
  display: flex;
  justify-content: space-between;
  max-width: 1440px;
  margin: 1rem auto 0;
}

/* ==================== SECTION 3: PRODUCT CATEGORIES ==================== */
.dealer-page-wireframe .product-categories {
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2rem;
  text-align: center;
}

.dealer-page-wireframe .product-categories > * {
  max-width: 1440px;
  margin: 0 auto;
}

.dealer-page-wireframe .category-icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.dealer-page-wireframe .category-icons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.dealer-page-wireframe .category-icons .icon {
  font-size: 2rem;
}

/* ==================== SECTION 4: FEATURED PRODUCTS (THREE TIERS) ==================== */
.dealer-page-wireframe .featured-products {
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2rem;
  text-align: center;
  background-color: #f0f0f0;
}

.dealer-page-wireframe .featured-products > h2,
.dealer-page-wireframe .featured-products > p,
.dealer-page-wireframe .featured-products > .disclaimer,
.dealer-page-wireframe .featured-products > button {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.dealer-page-wireframe .product-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1440px;
  margin: 2rem auto;
}

.dealer-page-wireframe .product-tier {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: #ffffff;
  padding: 2rem;
  border: 1px solid #c6c6c6;
  border-radius: 8px;
}

/* ==================== SECTION 5: REQUEST CATALOG (2-Column) ==================== */
.dealer-page-wireframe .request-catalog {
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2rem;
  position: relative;
}

.dealer-page-wireframe .catalog-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1440px;
  margin: 0 auto;
  align-items: center;
}

.dealer-page-wireframe .catalog-text {
  background-color: rgba(9, 59, 102, 0.9);
  color: #ffffff;
  padding: 2rem;
  border-radius: 8px;
}

/* ==================== SECTION 6: DEALER INFO (2-Column) ==================== */
.dealer-page-wireframe .dealer-info {
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2rem;
}

.dealer-page-wireframe .dealer-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1440px;
  margin: 0 auto;
  align-items: center;
}

.dealer-page-wireframe .dealer-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ==================== SECTION 7: PREFERRED CUSTOMER CTA ==================== */
.dealer-page-wireframe .preferred-customer {
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2rem;
  text-align: center;
  background-color: #093b66;
  color: #ffffff;
}

.dealer-page-wireframe .preferred-customer > h2,
.dealer-page-wireframe .preferred-customer > p,
.dealer-page-wireframe .preferred-customer > .disclaimer,
.dealer-page-wireframe .preferred-customer > button {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.dealer-page-wireframe .benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1440px;
  margin: 2rem auto;
}

.dealer-page-wireframe .benefit {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.dealer-page-wireframe .benefit-icon {
  font-size: 2.5rem;
}

/* ==================== SECTION 8: PICK A CATEGORY GRID ==================== */
.dealer-page-wireframe .category-grid {
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2rem;
  text-align: center;
  background-color: #ffffff;
}

.dealer-page-wireframe .category-grid > h2 {
  max-width: 1440px;
  margin: 0 auto 2rem;
}

.dealer-page-wireframe .categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1440px;
  margin: 0 auto;
}

.dealer-page-wireframe .category-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  background-color: #f0f0f0;
  border: 1px solid #c6c6c6;
  border-radius: 10px;
  padding: 1rem;
}

/* ==================== SECTION 9: FOOTER ==================== */
.dealer-page-wireframe footer {
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2rem;
  background-color: #000000;
  color: #ffffff;
}

.dealer-page-wireframe .footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  max-width: 1440px;
  margin: 0 auto;
}

.dealer-page-wireframe .footer-column ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dealer-page-wireframe .footer-column a {
  text-decoration: none;
  color: #ffffff;
}

.dealer-page-wireframe .footer-dealer-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dealer-page-wireframe .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1440px;
  margin: 2rem auto 0;
  padding-top: 2rem;
}

.dealer-page-wireframe .social-icons {
  display: flex;
  gap: 1rem;
}

/* ==================== RESPONSIVE: TABLET ==================== */
@media (max-width: 1024px) {
  .dealer-page-wireframe .product-tiers {
    grid-template-columns: 1fr;
  }

  .dealer-page-wireframe .catalog-content,
  .dealer-page-wireframe .dealer-content {
    grid-template-columns: 1fr;
  }

  .dealer-page-wireframe .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dealer-page-wireframe .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dealer-page-wireframe .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==================== RESPONSIVE: MOBILE ==================== */
@media (max-width: 640px) {
  .dealer-page-wireframe .header-row-1,
  .dealer-page-wireframe .header-row-2 {
    flex-direction: column;
    gap: 1rem;
  }

  .dealer-page-wireframe .main-nav {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .dealer-page-wireframe .category-icons {
    gap: 1rem;
  }

  .dealer-page-wireframe .benefits-grid,
  .dealer-page-wireframe .categories-grid,
  .dealer-page-wireframe .footer-content {
    grid-template-columns: 1fr;
  }

  .dealer-page-wireframe .footer-bottom {
    flex-direction: column;
    gap: 1rem;
  }
}

/* ==================== UTILITY CLASSES ==================== */
.dealer-page-wireframe .cta-button {
  padding: 0.75rem 2rem;
  cursor: pointer;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  background-color: #f8981d;
  color: #000000;
  border: none;
  border-radius: 32.5px;
}

.dealer-page-wireframe .wireframe-note {
  font-style: italic;
  margin-top: 1rem;
}

.dealer-page-wireframe .category-card button,
.dealer-page-wireframe .product-tier button {
  padding: 0.75rem 2rem;
  cursor: pointer;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  background-color: transparent;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 32.5px;
}

.dealer-page-wireframe .disclaimer {
  color: #757575;
  font-size: 0.875rem;
}