/* Second Wind Run Co. — Brand Color Override */
:root { --red: #A6441A; }
.outofstock { color: #A6441A !important; }
.instoreonly { color: #A6441A !important; }
.red { color: #A6441A !important; }
input.error, select.error { border-color: #A6441A !important; }

/* ============================================================
   Product Page — Desktop Typography Scale
   Upper section scaled to match Description section
   ============================================================ */
@media (min-width: 992px) {

  /* Brand label (was ~13px) */
  .description > a.uppercase.mb0 {
    font-size: 15px !important;
  }

  /* Blurb short description (was 16px; Description body is ~22px) */
  .description > p.mt16.mb16 {
    font-size: clamp(17px, 1.4vw, 20px) !important;
    line-height: 1.65 !important;
  }

  /* Size & width selector buttons (was 15px) */
  .sizeBox,
  .widthBox {
    font-size: 17px !important;
  }

  /* SELECT A SIZE / STYLE / QUANTITY labels */
  .select-option > label,
  .select-option label.mt16 {
    font-size: 15px !important;
    letter-spacing: 0.04em !important;
  }

  /* Quantity dropdown (was 14px) */
  .select-option select {
    font-size: 15px !important;
  }

  /* ── Sizing tab — font size + type ── */
  ul.tabs li.bridaloff {
    font-family: 'Playfair Display', serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
  }

  /* Sizing tab content heading */
  .tab-content h4 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(18px, 1.4vw, 22px) !important;
    font-weight: 700 !important;
    color: #465A63 !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 0.5em !important;
  }

  /* Sizing + Reviews tab body text (was 16px) */
  .tab-content > p,
  .tab-content p {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(17px, 1.4vw, 20px) !important;
    line-height: 1.65 !important;
  }
}

/* ============================================================
   SW-DESC — Universal Product Description Template
   Gold standard: Brooks Men's Ghost 18
   Edit this block to restyle ALL brands at once.
   ============================================================ */

/* Wrapper */
.sw-desc {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  max-width: 640px;
  margin: 0 auto;
  color: #1C1C1C;
  line-height: 1.6;
}

/* Section wrapper */
.sw-section { margin-bottom: 28px; }

/* Section label — "BEST FOR", "REASONS YOU'LL LOVE IT", "PRODUCT SPECS" */
.sw-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A6441A;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid #A6441A;
}

/* Best For body — desktop sizing handled by .tab-content p rule above */
.sw-body {
  margin: 0;
  font-size: 15px;
  color: #1C1C1C;
  line-height: 1.65;
}

/* Reasons list */
.sw-reasons { margin: 0; padding: 0; list-style: none; }

.sw-reason {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #EAE6E1;
}
.sw-reason:last-child { border-bottom: none; }

.sw-check { color: #A6441A; font-weight: 700; flex-shrink: 0; margin-top: 1px; }

.sw-reason-text { font-size: 14px; color: #1C1C1C; }

/* Specs table */
.sw-specs {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #E0DBD5;
  border-radius: 8px;
  overflow: hidden;
}

.sw-spec-row { border-bottom: 1px solid #E0DBD5; }
.sw-spec-row:last-child { border-bottom: none; }

.sw-spec-cell {
  width: 38%;
  padding: 14px 16px;
  background: #FAF8F5;
  vertical-align: top;
}

.sw-pill-cell { padding: 14px 16px; vertical-align: middle; }

.sw-spec-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
}

.sw-spec-val { font-size: 15px; font-weight: 600; color: #1C1C1C; }

.sw-spec-sub { font-size: 12px; color: #888; }

/* Pills */
.sw-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 2px;
  background: #E8E4DF;
  color: #AAA;
}
.sw-pill.on { background: #A6441A; color: #FFF; }

/* Desktop — bump reason text and spec values to match scale */
@media (min-width: 992px) {
  .sw-reason-text { font-size: 15px; }
  .sw-spec-val { font-size: 16px; }
}

/* Mobile — stack spec table rows vertically */
@media (max-width: 600px) {
  .sw-specs, .sw-specs tbody, .sw-spec-row { display: block; }
  .sw-spec-cell { display: block; width: 100%; box-sizing: border-box; }
  .sw-pill-cell { display: block; padding-top: 4px; }
}

/* ============================================================
   .sw-desc — Product Description Component
   Class-based replacement for inline-style descriptions
   ============================================================ */

.sw-desc {
  font-family: 'Playfair Display', serif;
  color: #465A63;
  line-height: 1.6;
}
.sw-section {
  margin-bottom: 32px;
}
.sw-label {
  font-size: clamp(13px, 3.5vw, 20px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A6441A;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #A6441A;
}
.sw-body {
  margin: 0;
  font-size: clamp(15px, 4vw, 22px);
  color: #465A63;
  line-height: 1.7;
}
.sw-reasons {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sw-reason {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #EAE6E1;
}
.sw-reason:last-child {
  border-bottom: none;
}
.sw-check {
  color: #A6441A;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: clamp(13px, 3.2vw, 18px);
}
.sw-reason-text {
  font-size: clamp(14px, 3.8vw, 21px);
  color: #465A63;
}
.sw-specs {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
  border: 1px solid #E0DBD5;
  margin-top: 8px;
}
.sw-spec-row {
  border-bottom: 1px solid #E0DBD5;
}
.sw-spec-row:last-child {
  border-bottom: none;
}
.sw-spec-cell {
  width: 38%;
  padding: clamp(14px, 2.5vw, 28px) clamp(14px, 2vw, 24px);
  background: #FAF8F5;
  vertical-align: top;
}
.sw-pill-cell {
  padding: clamp(10px, 1.5vw, 20px) clamp(14px, 2vw, 24px);
  background: #FFFFFF;
  vertical-align: middle;
}
.sw-spec-lbl {
  font-size: clamp(10px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 6px;
}
.sw-spec-val {
  font-size: clamp(22px, 3.5vw, 44px);
  font-weight: 700;
  color: #465A63;
  line-height: 1.1;
}
.sw-spec-sub {
  font-size: clamp(12px, 1.5vw, 20px);
  color: #7B898C;
  margin-top: 4px;
}
.sw-pill {
  display: inline-block;
  background: #E8E4DF;
  color: #AAA;
  font-size: clamp(10px, 1.3vw, 18px);
  font-weight: 700;
  padding: clamp(4px, 0.5vw, 8px) clamp(10px, 1.2vw, 18px);
  border-radius: 100px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  margin: 2px 2px 2px 0;
}
.sw-pill.on {
  background: #A6441A;
  color: #FFF;
}

/* ============================================================
   PATCH v1.2 — Three fixes applied 2026-07-10
   ============================================================ */

/* Fix 1: Checkmarks — the stored HTML has "?" in .sw-check span.
   Hide the literal character and replace via ::before pseudo-element. */
.sw-check {
  font-size: 0 !important;
}
.sw-check::before {
  content: "\2713";
  font-size: clamp(13px, 3.2vw, 18px);
  color: #A6441A;
  font-weight: 700;
  display: inline-block;
}

/* Fix 2: Desktop width — remove the 640px cap so sw-desc fills its container */
.sw-desc {
  max-width: none;
}

/* Fix 3: Mobile spec layout — restore table layout so pills stay to the right;
   reduce sw-spec-val min size (was 22px, too large on phones) */
@media (max-width: 600px) {
  .sw-specs { display: table; width: 100%; }
  .sw-specs tbody { display: table-row-group; }
  .sw-spec-row { display: table-row; }
  .sw-spec-cell { display: table-cell; width: 42%; }
  .sw-pill-cell { display: table-cell; vertical-align: middle; padding: 8px 10px; }
  .sw-spec-val { font-size: clamp(16px, 4.5vw, 22px); }
}

/* ============================================================
   HOME NAV v1.0 — Text-hierarchy category navigation (2026-07-11)
   ============================================================ */
.sw-hnav {
  padding: 36px 20px 48px;
  background: #fff;
  max-width: 1100px;
  margin: 0 auto;
}
.sw-hnav-intro {
  text-align: center;
  margin-bottom: 28px;
}
.sw-hnav-tagline {
  font-size: 14px;
  color: #7B898C;
  margin: 0;
}
.sw-hnav-tagline a {
  color: #A6441A;
  font-weight: 600;
  text-decoration: none;
}
.sw-hnav-tagline a:hover { text-decoration: underline; }
.sw-hnav-cols {
  display: flex;
  gap: 0 40px;
  flex-wrap: wrap;
}
.sw-hnav-col {
  flex: 1 1 180px;
  min-width: 140px;
}
.sw-hnav-parent {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #465A63;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 2px solid #E6982B;
  margin-bottom: 10px;
  transition: color 0.15s;
}
.sw-hnav-parent:hover { color: #A6441A; }
.sw-hnav-parent--gap { margin-top: 24px; }
.sw-hnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sw-hnav-list li { margin-bottom: 1px; }
.sw-hnav-list a {
  display: block;
  font-size: 13px;
  color: #465A63;
  text-decoration: none;
  padding: 3px 0 3px 10px;
  border-left: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.sw-hnav-list a:hover {
  color: #A6441A;
  border-left-color: #A6441A;
}
.sw-hnav-soon {
  font-size: 13px;
  color: #7B898C;
  padding: 3px 0 3px 10px;
  border-left: 2px solid transparent;
  display: block;
}
.sw-hnav-soon em {
  font-size: 11px;
}
@media (max-width: 640px) {
  .sw-hnav-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
}
@media (max-width: 380px) {
  .sw-hnav-cols { grid-template-columns: 1fr; }
}