/* ===== Find Your Paver Color — interactive selector ===== */
.spc-eyebrow{font-family:'Lato',sans-serif;color:#ff6600;font-weight:700;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;text-align:center;margin:0 0 10px;}
.spc-picker{max-width:520px;margin:0 auto 34px;}
.spc-label{display:block;font-family:'Lato',sans-serif;font-weight:700;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:#2b2320;margin:0 0 8px;text-align:center;}
.spc-select-wrap{position:relative;}
.spc-select-wrap::after{content:'';position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid #851515;border-bottom:2px solid #851515;transform:rotate(45deg);pointer-events:none;}
.spc-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;box-sizing:border-box;background:#fff;border:2px solid rgba(0,0,0,.14);border-radius:4px;padding:15px 44px 15px 18px !important;height:auto;min-height:0;font-family:inherit;font-size:16px;font-weight:700;color:#2b2320 !important;-webkit-text-fill-color:#2b2320;line-height:1.2;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease;}
.spc-select option{color:#2b2320;background-color:#fff;}
.spc-select option:disabled,.spc-select option[value=""]{color:#6b6259;}
.spc-select:hover{border-color:#851515;}
.spc-select:focus{outline:none;border-color:#851515;box-shadow:0 0 0 3px rgba(133,21,21,.14);}

.spc-empty{max-width:620px;margin:0 auto;text-align:center;background:#fff;border:1px dashed rgba(0,0,0,.16);border-radius:8px;padding:38px 26px;color:#7a7168;font-size:15px;line-height:1.6;}
.spc-empty strong{display:block;color:#2b2320;font-family:'Lato',sans-serif;font-size:17px;margin-bottom:6px;}

.spc-result{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06);padding:30px 30px 34px;}
.spc-result-head{text-align:center;margin:0 0 26px;}
.spc-badge{display:inline-block;background:#851515;color:#fff !important;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:5px 10px;border-radius:3px;line-height:1;margin:0 0 12px;}
.spc-badge-order{background:#6b6259;}
.spc-style-name{font-family:'Lato',sans-serif;font-weight:700;font-size:27px;color:#2b2320;margin:0 0 4px;line-height:1.2;}
.spc-avail{font-family:'Lato',sans-serif;font-weight:700;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:#7a7168;margin:0;}
.spc-note{font-size:13.5px;color:#7a7168;font-style:italic;margin:12px auto 0;max-width:640px;line-height:1.55;}

.spc-group{margin:0 0 26px;}
.spc-group:last-child{margin-bottom:0;}
.spc-group-label{font-family:'Lato',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#2b2320;margin:0 0 4px;padding-bottom:9px;border-bottom:1px solid rgba(0,0,0,.09);}
.spc-group-note{font-size:12.5px;color:#7a7168;font-style:italic;margin:9px 0 0;}
.spc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin:16px 0 0;align-items:stretch;}

.spc-swatch{display:flex;flex-direction:column;height:100%;width:100%;text-align:left;padding:0;background:#fff;border:2px solid rgba(0,0,0,.1);border-radius:8px;overflow:hidden;cursor:pointer;font-family:inherit;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.spc-swatch:hover{border-color:rgba(133,21,21,.45);box-shadow:0 6px 18px rgba(0,0,0,.12);transform:translateY(-2px);}
.spc-swatch:focus-visible{outline:none;border-color:#851515;box-shadow:0 0 0 3px rgba(133,21,21,.18);}
.spc-swatch-media{position:relative;display:block;flex:0 0 auto;aspect-ratio:4/3;background:#e9e3d8;overflow:hidden;}
.spc-swatch-media img{display:block;width:100%;height:100%;object-fit:cover;}
.spc-swatch-chip{position:absolute;top:8px;left:8px;background:#851515;color:#fff !important;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:4px 7px;border-radius:3px;line-height:1;}
.spc-swatch-name{display:block;flex:1 1 auto;padding:11px 12px 13px;font-size:13.5px;font-weight:700;color:#2b2320;line-height:1.35;}
.spc-swatch.is-selected{border-color:#851515;box-shadow:0 6px 18px rgba(133,21,21,.18);}
.spc-swatch.is-selected .spc-swatch-name{color:#851515;}
.spc-swatch.is-selected .spc-swatch-media::after{content:'\2713';position:absolute;right:8px;bottom:8px;width:24px;height:24px;border-radius:50%;background:#851515;color:#fff;font-size:13px;line-height:24px;text-align:center;font-weight:700;}

.spc-preview{display:flex;gap:26px;align-items:center;margin:30px 0 0;padding:24px;background:#f7f3ec;border-radius:8px;}
.spc-preview-img{flex:0 0 190px;}
.spc-preview-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;box-shadow:0 3px 12px rgba(0,0,0,.15);}
.spc-preview-body{flex:1 1 auto;min-width:0;}
.spc-preview-style{font-family:'Lato',sans-serif;font-weight:700;font-size:20px;color:#2b2320;margin:0 0 2px;line-height:1.25;}
.spc-preview-color{font-size:16px;color:#4a4340;margin:0 0 10px;}
.spc-preview-color strong{color:#851515;}
.spc-preview-meta{font-size:12.5px;color:#7a7168;margin:0;}

.spc-cta{margin:26px 0 0;padding:26px;border:2px solid rgba(133,21,21,.18);border-radius:8px;text-align:center;}
.spc-cta-title{font-family:'Lato',sans-serif;font-weight:700;font-size:19px;color:#2b2320;margin:0 0 6px;}
.spc-cta-text{font-size:15px;color:#4a4340;line-height:1.6;margin:0 0 18px;}
.spc-cta-combo{display:block;font-weight:700;color:#2b2320;margin-top:4px;}

.spc-legend{max-width:760px;margin:30px auto 0;text-align:center;font-size:13px;color:#7a7168;line-height:1.7;}
.spc-legend b{color:#2b2320;}
.spc-disclaimer{max-width:760px;margin:14px auto 0;text-align:center;font-size:12.5px;color:#7a7168;font-style:italic;line-height:1.65;}
.spc-resource{text-align:center;margin:22px 0 0;}
.spc-resource a{font-family:'Lato',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;color:#851515;text-decoration:none;border-bottom:1px solid rgba(133,21,21,.35);padding-bottom:2px;transition:.2s;}
.spc-resource a:hover{color:#2b2320;border-bottom-color:#2b2320;}

.spc-card-btn{margin-top:8px;}

@media (max-width:760px){
  .spc-result{padding:22px 18px 26px;}
  .spc-style-name{font-size:23px;}
  .spc-preview{flex-direction:column;align-items:stretch;gap:16px;padding:18px;}
  .spc-preview-img{flex:0 0 auto;max-width:260px;margin:0 auto;width:100%;}
  .spc-preview-body{text-align:center;}
}
@media (max-width:600px){
  .spc-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .spc-swatch-name{padding:9px 9px 11px;font-size:12.5px;}
  .spc-cta{padding:20px 16px;}
  .spc-cta .fdl-btn{display:block;width:100%;}
}
/* ===== Page hero =====================================================
   Matches the Boulders & Cobble hero: full-bleed photo, white text
   sitting directly on it, no panel, site fdl-btn buttons.

   One deliberate difference. That page scrims .35 -> .60; this photo has
   near-white pixels in every horizontal band (sunset, stone wall, pale
   paving), so at those values white text measures 2.78:1 at worst - the
   boulders page itself measures 2.86:1, so that is the house standard,
   but it is under AA. At .50 -> .70 this reads as the same treatment and
   measures 4.21:1 worst / 9.43:1 average. Raise both stops if you ever
   swap in a brighter photo.

   To swap the photo, change the url() below - nothing else. ---------- */
.spc-hero{
  box-sizing:border-box;
  padding:96px 20px;margin:0 0 4px;
  text-align:center;
  background-color:#2b2320;
  background-image:linear-gradient(rgba(20,20,15,.50),rgba(20,20,15,.70)),
                   url('/wp-content/uploads/2026/09/4x12-light-sand-herringbone-web.jpg');
  background-size:cover;background-position:center 46%;background-repeat:no-repeat;
}
.spc-hero-inner{max-width:780px;margin:0 auto;color:#fff;}

/* The page's own rules are ID-scoped (#sp-pavers-276 h1, #content-holder p),
   so they outrank a plain class - hence !important on the colours/sizes. */
.spc-hero-title{
  color:#fff !important;
  font-family:'Lato',sans-serif;
  font-size:42px !important;font-weight:700;line-height:1.15;
  margin:0 0 16px !important;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.spc-hero-intro{
  color:#fff !important;
  font-size:18px;line-height:1.6;
  max-width:680px;margin:0 auto 30px !important;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.spc-hero-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}

@media (max-width:760px){
  .spc-hero{padding:64px 18px;background-position:center 50%;}
  .spc-hero-title{font-size:32px !important;}
  .spc-hero-intro{font-size:16px;}
}
@media (max-width:600px){
  .spc-hero{padding:52px 16px;}
  .spc-hero-title{font-size:28px !important;}
  .spc-hero-intro{margin-bottom:24px !important;}
  .spc-hero-buttons .fdl-btn{display:block;width:100%;}
}