/* Molydon custom theme (2026-08-07). Own CSS, not framework-themed — Bootstrap
   grid utility classes (row/col-*) are kept for responsive layout structure only;
   all visual design (color, type, components) is defined here. */

:root {
  --md-ink: #1C1B18;
  --md-ink-soft: #55534B;
  --md-paper: #FFFFFF;
  --md-paper-2: #F7F6F2;
  --md-line: #E4E1D6;
  --md-line-strong: #CFCBBC;
  --md-gold: #F0A400;
  --md-gold-dark: #B87A00;
  --md-gold-ink: #4A3300;
  --md-steel: #2B4A66;
  --md-steel-light: #E8EFF4;
  --md-success: #2E7D4F;
  --md-success-bg: #E7F4EC;
  --md-radius: 4px;
  --md-font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--md-font);
  color: var(--md-ink);
  background: var(--md-paper-2);
}

a { color: var(--md-steel); text-decoration: none; }
a:hover { color: var(--md-gold-dark); }

h1, h2, h3, h4, h5 { font-weight: 600; color: var(--md-ink); }
h1 { font-size: 28px; margin: 0 0 0.6rem; }
h2 { font-size: 20px; }

/* ---------- Top utility bar + header ---------- */
#top {
  background: var(--md-ink);
  color: #D9D6C9;
  font-size: 13px;
}
#top a { color: #D9D6C9; }
#top a:hover { color: var(--md-gold); }
#top .list-inline-item { margin-right: 1rem; }

header {
  background: var(--md-paper);
  border-bottom: 1px solid var(--md-line);
  padding: 0.9rem 0;
}
#logo img { max-height: 44px; }
.md-logo-text { font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.md-logo-text a { color: var(--md-ink); }
.md-logo-text a:hover { color: var(--md-gold-dark); }

/* ---------- Vehicle finder ---------- */
.vehicle-finder {
  background: var(--md-steel-light);
  border: 1px solid var(--md-line-strong);
  border-radius: var(--md-radius);
  padding: 0.75rem 1rem;
  margin: 0.75rem 0 0;
}
.vehicle-finder .vf-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--md-steel);
  margin-bottom: 0.5rem;
  display: block;
}
.vehicle-finder .vf-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.vehicle-finder select {
  flex: 1 1 140px;
  min-width: 120px;
  height: 44px;
  border: 1px solid var(--md-line-strong);
  border-radius: var(--md-radius);
  background: var(--md-paper);
  color: var(--md-ink);
  padding: 0 0.6rem;
  font-size: 14px;
}
.vehicle-finder .vf-submit {
  background: var(--md-gold);
  color: var(--md-gold-ink);
  border: none;
  border-radius: var(--md-radius);
  padding: 0 1.1rem;
  height: 44px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.vehicle-finder .vf-submit:hover { background: var(--md-gold-dark); color: #fff; }
.vehicle-finder .vf-note {
  font-size: 11.5px;
  color: var(--md-ink-soft);
  margin-top: 0.4rem;
}

/* ---------- Buttons (generic) ---------- */
.btn-primary, .btn.btn-primary {
  background: var(--md-gold);
  border-color: var(--md-gold-dark);
  color: var(--md-gold-ink);
  font-weight: 600;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--md-gold-dark);
  border-color: var(--md-gold-dark);
  color: #fff;
}

/* ---------- Hero (homepage) ---------- */
.md-hero {
  background: var(--md-ink);
  color: #F2F0E6;
  padding: 2.5rem 0;
  margin-bottom: 2rem;
}
.md-hero h1 { color: #fff; margin-bottom: 0.5rem; }
.md-hero p { color: #C9C6B9; font-size: 15px; max-width: 56ch; margin: 0 0 1.2rem; }
.md-hero .btn-primary { padding: 0.55rem 1.3rem; }

/* ---------- Featured category tiles ---------- */
.md-category-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.md-tile {
  background: var(--md-paper);
  border: 1px solid var(--md-line);
  border-radius: 8px;
  padding: 1.1rem 1rem;
  text-align: center;
  transition: border-color 0.15s ease;
}
.md-tile:hover { border-color: var(--md-gold-dark); }
.md-tile .md-tile-icon { font-size: 26px; color: var(--md-gold-dark); margin-bottom: 0.5rem; }
.md-tile .md-tile-name { font-weight: 600; font-size: 14px; color: var(--md-ink); }
@media (max-width: 767px) {
  .md-category-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Trust strip ---------- */
.md-trust { background: var(--md-paper); border: 1px solid var(--md-line); border-radius: 8px; padding: 1.1rem; margin-bottom: 2rem; }
.md-trust .row > div { display: flex; align-items: center; gap: 0.6rem; font-size: 13.5px; color: var(--md-ink-soft); padding: 0.4rem 0; }
.md-trust i { color: var(--md-success); font-size: 18px; flex: none; }

/* ---------- Category page ---------- */
#product-category h1 { margin-top: 1rem; }
.md-filter-bar {
  background: var(--md-paper);
  border: 1px solid var(--md-line);
  border-radius: var(--md-radius);
  padding: 0.75rem 1rem;
}
.md-filter-bar .form-select, .md-filter-bar .input-group-text {
  font-size: 13.5px;
  min-height: 44px;
}

/* ---------- Product card ---------- */
.product-thumb {
  background: var(--md-paper);
  border: 1px solid var(--md-line);
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-thumb .image { border-bottom: 1px solid var(--md-line); }
.product-thumb .image img { width: 100%; height: auto; display: block; }
.product-thumb .content { padding: 0.85rem 0.9rem 1rem; display: flex; flex-direction: column; flex: 1; }
.product-thumb h4 { font-size: 14px; margin: 0 0 0.4rem; line-height: 1.4; }
.product-thumb h4 a { color: var(--md-ink); }
.product-thumb .description { font-size: 12.5px; color: var(--md-ink-soft); flex: 1; }
.product-thumb .price { margin-top: 0.5rem; font-size: 16px; font-weight: 600; color: var(--md-ink); }
.product-thumb .price-old { font-size: 12.5px; color: var(--md-ink-soft); text-decoration: line-through; font-weight: 400; margin-left: 0.4rem; }
.product-thumb .button button {
  background: var(--md-steel);
  color: #fff;
  border: none;
  border-radius: var(--md-radius);
  padding: 0.4rem 0.6rem;
  margin-top: 0.6rem;
  margin-right: 0.3rem;
  cursor: pointer;
}
.product-thumb .button button:hover { background: var(--md-gold-dark); }

/* ---------- Product page ---------- */
.md-product h1 { margin-top: 1rem; }
.md-meta-row { font-size: 13px; color: var(--md-ink-soft); margin-bottom: 0.6rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.md-meta-row a { color: var(--md-steel); }

.md-gallery-main {
  display: block;
  border: 1px solid var(--md-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--md-paper);
}
.md-gallery-main img { width: 100%; height: auto; display: block; }
.md-gallery-strip { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.md-gallery-strip a {
  display: block;
  border: 1px solid var(--md-line);
  border-radius: var(--md-radius);
  overflow: hidden;
  width: 72px;
}
.md-gallery-strip img { width: 100%; height: auto; display: block; }

.md-buybox {
  background: var(--md-paper);
  border: 1px solid var(--md-line);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
  margin: 0.75rem 0 1rem;
}
.md-price-row { display: flex; align-items: baseline; gap: 0.6rem; }
.md-price { font-size: 28px; font-weight: 700; color: var(--md-ink); }
.md-price-old { font-size: 15px; color: var(--md-ink-soft); text-decoration: line-through; }
.md-price-sub { font-size: 12.5px; color: var(--md-ink-soft); margin-top: 0.15rem; }
.md-discount-list { font-size: 12.5px; color: var(--md-ink-soft); margin: 0.5rem 0 0; padding-left: 1.1rem; }
.md-stock { font-size: 13.5px; color: var(--md-success); font-weight: 600; margin: 0.6rem 0 0.8rem; }
.md-stock i { margin-right: 0.3rem; }
.md-cart-row .input-group-text { background: var(--md-paper-2); border-color: var(--md-line-strong); font-size: 13.5px; }
.md-cart-row #input-quantity { border-color: var(--md-line-strong); text-align: center; }

/* Wishlist/compare icon buttons - explicit 44px touch target (WCAG 2.5.5) */
.md-buybox .btn-light { min-width: 44px; min-height: 44px; }

.md-fitment { display: flex; flex-direction: column; gap: 0.7rem; }
.md-fitment-item { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 13px; }
.md-fitment-item i { color: var(--md-success); font-size: 17px; margin-top: 0.15rem; flex: none; width: 20px; text-align: center; }
.md-fitment-item strong { display: block; color: var(--md-ink); font-size: 13.5px; }
.md-fitment-item span { color: var(--md-ink-soft); }

.md-tabs { border-bottom-color: var(--md-line); margin-top: 1rem; }
.md-tabs .nav-link { color: var(--md-ink-soft); border: none; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 600; padding: 0.6rem 0.9rem; }
.md-tabs .nav-link.active { color: var(--md-steel); border-bottom-color: var(--md-gold); background: none; }
.md-tab-content { background: var(--md-paper); border: 1px solid var(--md-line); border-top: none; border-radius: 0 0 8px 8px; padding: 1.2rem; }
.md-spec-table td { font-size: 13.5px; }
.md-spec-table thead td { background: var(--md-paper-2); }

@media (max-width: 767px) {
  .md-price { font-size: 24px; }
}

/* ---------- Footer ---------- */
footer { background: var(--md-ink); color: #C9C6B9; padding: 2.5rem 0 1.5rem; margin-top: 2.5rem; }
footer h5 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.9rem; }
footer a { color: #C9C6B9; font-size: 13.5px; }
footer a:hover { color: var(--md-gold); }
footer hr { border-color: #3A392F; margin: 1.5rem 0 1rem; }
footer p { font-size: 12px; color: #8C8A7D; }

/* ---------- Blog article ---------- */
.md-blog-article { max-width: 880px; margin: 1.2rem auto 0; }
.md-blog-article h1 { font-size: 32px; line-height: 1.2; margin-bottom: 0.35rem; }
.md-blog-meta { font-size: 13px; color: var(--md-ink-soft); margin-bottom: 1.2rem; }
.md-blog-image { width: 100%; height: auto; border-radius: 6px; margin-bottom: 1.6rem; display: block; }
.md-blog-body { font-size: 17.5px; line-height: 1.72; color: var(--md-ink); }
.md-blog-body h2 { font-size: 24px; margin: 2rem 0 0.7rem; }
.md-blog-body h3, .md-blog-body h5 { font-size: 17px; margin: 1.4rem 0 0.6rem; font-weight: 600; color: var(--md-ink); }
.md-blog-body p { margin: 0 0 1.1rem; }
.md-blog-body ul, .md-blog-body ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.md-blog-body img { max-width: 100%; height: auto; border-radius: 6px; }
.md-blog-body a { color: var(--md-steel); text-decoration: underline; }
@media (max-width: 767px) {
  .md-blog-article h1 { font-size: 22px; }
  .md-blog-body { font-size: 15px; }
}

/* Tire size/season landing pages (M4 mega-menu build) */
.md-faq h3 { margin-top: 0; }
.md-season-tabs .btn { margin-right: .35rem; margin-bottom: .35rem; }
.md-intro { color: var(--md-ink-soft); }
.md-size-chip { border: 1px solid var(--md-line); border-radius: 8px; padding: .6rem .75rem; transition: border-color .15s, box-shadow .15s; }
.md-size-chip:hover { border-color: var(--md-success); box-shadow: 0 0 0 1px var(--md-success); }
.md-size-chip-label { display: block; font-weight: 600; color: var(--md-ink); }
.md-size-chip-count { display: block; font-size: .8rem; color: var(--md-ink-soft); }
.md-fitment { background: var(--md-steel-light); border-radius: 8px; padding: 1.1rem 1.25rem; }
.md-fitment-segment { font-weight: 600; color: var(--md-steel); margin-bottom: .6rem; }
.md-fitment-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.md-vehicle-chip { display: inline-block; background: var(--md-paper); border: 1px solid var(--md-line-strong); border-radius: 20px; padding: .3rem .85rem; font-size: 13.5px; color: var(--md-ink); }
.md-fitment-note { font-size: 13.5px; color: var(--md-ink-soft); margin-bottom: 0; }