/* Styles for the product page content block (.sfp).
   Kept in its own file rather than inline so 142 pages share one download and
   the block can be restyled without touching the pages again. */

.sfp {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 20px 56px;
  font-size: 16px;
  line-height: 1.72;
  color: #34383d;
  -webkit-font-smoothing: antialiased;
}

.sfp-lede {
  font-size: 18.5px;
  line-height: 1.62;
  color: #1b1e21;
  margin: 0 0 34px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid #a9714b;
}

.sfp h2 {
  font-size: 21px;
  line-height: 1.32;
  font-weight: 600;
  color: #16181a;
  margin: 38px 0 12px;
  letter-spacing: -0.01em;
}

.sfp h2:first-of-type { margin-top: 8px; }

.sfp p { margin: 0 0 15px; }

.sfp ul {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}

.sfp ul li {
  position: relative;
  padding-left: 20px;
  margin: 0 0 9px;
}

.sfp ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a9714b;
}

.sfp a { color: #8a5a3a; }

.sfp-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 26px 0 6px;
}

.sfp-cta a {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

.sfp-cta a.primary {
  background: #a9714b;
  color: #fff;
}

.sfp-cta a.primary:hover { background: #91603e; }

.sfp-cta a.secondary {
  border: 1px solid #a9714b;
  color: #8a5a3a;
}

.sfp-cta a.secondary:hover {
  background: #a9714b;
  color: #fff;
}

.sfp-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 4px;
}

.sfp-more li {
  padding-left: 0;
  margin: 0;
}

.sfp-more li::before { display: none; }

.sfp-more-link { margin-top: 18px; }

/* Elementor's product gallery lays its slides out in a track several times
   wider than the viewport, which leaves a few pixels of horizontal overflow and
   puts a scrollbar on every product page. `clip` contains it without creating a
   scroll container, so the sticky header and the zoom behaviour are unaffected. */
html,
body {
  overflow-x: clip;
}

@media (max-width: 767px) {
  .sfp { padding: 28px 18px 40px; font-size: 15.5px; }
  .sfp-lede { font-size: 17px; padding-left: 14px; }
  .sfp h2 { font-size: 19px; margin-top: 32px; }
  .sfp-cta a { flex: 1 1 100%; text-align: center; padding: 15px 20px; }
}