/* ═══════════════════════════════════════════════════════════════
   STORE.CSS — individual boutique pages (/locations/<slug>)
   ---------------------------------------------------------------
   Loads AFTER locations.css (which supplies .page-hero, .hours-band
   and the .store-detail-row / .store-eyebrow detail styles these
   pages borrow) and BEFORE chrome.css.

   Block separation is TONE ONLY — alternating ivory/cream planes plus
   whitespace. No hairline dividers, no depth shadows.

   NOTE: these pages live one level deep (/locations/<slug>), so every
   asset reference in _src/ must be root-relative (/assets/...).
   ═══════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ───────────────────────────────────────────────── */
.crumbs-band{background:var(--ivory);border-bottom:1px solid var(--warmgrey)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;list-style:none;margin:0;padding:.5rem 0;font-size:.78rem;letter-spacing:.06em;color:var(--mid-grey)}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li+li::before{content:'/';color:var(--warmgrey)}
.crumbs a{color:var(--mid-grey);display:inline-block;padding:.45rem 0;margin:-.45rem 0;transition:color .2s}
.crumbs a:hover{color:var(--sage)}
.crumbs li[aria-current]{color:var(--charcoal);font-weight:500}

/* ── Hero ─────────────────────────────────────────────────────── */
.sp-hero{min-height:0;padding:clamp(3rem,8vh,5.5rem) 0}
.sp-hero h1{max-width:20ch}
.sp-hero-note{margin-top:.875rem;font-size:.92rem;color:var(--sage-light);max-width:52ch;line-height:1.7}

/* ── Shared bands ─────────────────────────────────────────────── */
.sp-band{padding:clamp(3rem,8vh,5.5rem) 0}
.sp-band--ivory{background:var(--ivory)}
.sp-band--cream{background:var(--cream)}

.sp-h2{font-size:clamp(1.6rem,3vw,2.35rem);color:var(--charcoal);line-height:1.12;letter-spacing:-.01em;margin:0 0 1.25rem}
.sp-h3{font-size:clamp(1.15rem,2vw,1.4rem);color:var(--charcoal);line-height:1.2;margin:2rem 0 .75rem}
.sp-body{font-size:1rem;font-weight:300;color:var(--mid-grey);line-height:1.8;max-width:62ch;margin:0 0 1rem}
.sp-body a{color:var(--sage);text-decoration:underline;text-underline-offset:3px}
.sp-areas{color:var(--charcoal);font-weight:400}

.sp-list{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem;max-width:74ch}
.sp-list li{font-size:.95rem;font-weight:300;color:var(--mid-grey);line-height:1.7;padding-left:1rem;border-left:2px solid var(--warmgrey)}
.sp-list strong{display:block;font-weight:600;color:var(--charcoal);font-size:1rem;margin-bottom:.15rem}

.sp-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.sp-actions .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* ── Store card + map ─────────────────────────────────────────── */
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.sp-grid--card{gap:3rem}
.sp-card-info .store-details{margin-bottom:0}
.sp-map{position:relative;min-height:340px;border:1px solid var(--warmgrey)}
.sp-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ── Copy + photograph split ──────────────────────────────────── */
.sp-split{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;margin-top:2rem}
.sp-split-copy>:last-child{margin-bottom:0}
.sp-figure{margin:0}
.sp-figure img{display:block;width:100%;height:auto;border:1px solid var(--warmgrey)}
.sp-figcaption{margin-top:.65rem;font-size:.82rem;font-weight:300;color:var(--mid-grey);line-height:1.6;letter-spacing:.01em}

/* ── Reasons list (unique selling points per boutique) ────────── */
.sp-reasons{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.sp-reasons li{font-size:.95rem;font-weight:300;color:var(--mid-grey);line-height:1.7}
.sp-reasons strong{display:block;font-weight:600;color:var(--charcoal);font-size:.95rem;letter-spacing:.01em;margin-bottom:.35rem}

/* ── Other stores grid ────────────────────────────────────────── */
.os-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.os-card{display:flex;flex-direction:column;gap:.35rem;padding:1.5rem 1.375rem;background:var(--white);border:1px solid var(--warmgrey);min-height:44px;transition:border-color .2s,transform .2s}
.os-card:hover{border-color:var(--sage);transform:translateY(-2px)}
.os-eyebrow{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.os-name{font-size:1.1rem;color:var(--charcoal);line-height:1.2;margin:0}
.os-addr{font-size:.88rem;font-weight:300;color:var(--mid-grey);line-height:1.55}
.os-tel{font-size:.88rem;color:var(--charcoal);margin-top:.25rem}

/* ── Closing CTA band eyebrow (charcoal .contact-band) ────────── */
.sp-cta-eyebrow{display:block;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sage-light);margin-bottom:.75rem}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:900px){
  .sp-grid,.sp-grid--card,.sp-split{grid-template-columns:1fr;gap:2rem}
  .os-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-list{grid-template-columns:1fr}
  .sp-reasons{grid-template-columns:1fr;gap:1.25rem}
  .sp-map{min-height:280px}
}
@media(max-width:480px){
  .os-grid{grid-template-columns:1fr}
  .sp-actions{flex-direction:column;align-items:stretch}
  .sp-actions .btn{width:100%}
  .sp-map{min-height:240px}
}