/* The directory (M270, M271, M275): its first page with the category tiles, a category's page, search, a business's page, and the
   builder's Directory section. Drawn in the site's tokens, so it follows the theme, light and dark. Class prefix dr-. */
.dr-page{background:var(--surface);color:var(--ink);min-height:62vh;padding-bottom:40px}
.dr-w{max-width:1180px;margin:0 auto;padding:0 20px;color:var(--ink);font-family:var(--font-body,inherit)}
.dr-w *,.dr-sectionbody *{box-sizing:border-box}
.dr-w h1,.dr-w h2,.dr-w p{margin:0}
.dr-w svg,.dr-sectionbody svg{width:16px;height:16px;flex:none}
.tpl-main .dr-w,.tpl-side .dr-w{padding:0;max-width:none}
.dr-top{padding-top:34px;padding-bottom:26px}
.tpl-cols:has(.dr-w)>.tpl-side{padding-top:0;gap:16px}
.tpl-side .dr-box,.tpl-side .dr-map,.tpl-side .sd-ban{margin-bottom:0}
.dr-sec{padding-top:28px}
.dr-sec--list{padding-top:4px}
.dr-sec h2{font:800 20px/1.2 var(--font-display,inherit);margin-bottom:14px}
.dr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:0;border-radius:var(--r-btn,10px);background:var(--gold-grad,var(--gold));color:var(--on-gold);font:700 14px var(--font-body,inherit);text-decoration:none;white-space:nowrap;cursor:pointer}
.dr-btn--line{background:var(--card);color:var(--ink);border:1px solid var(--border)}
.dr-btn:hover{filter:brightness(1.04)}
.dr-btn--line:hover{border-color:color-mix(in oklab,var(--ink) 35%,var(--border))}

/* ── The heading and search ── */
.dr-intro h1{font:800 clamp(26px,3.6vw,34px)/1.15 var(--font-display,inherit);margin-bottom:6px}
.dr-intro p{color:var(--muted);font-size:15.5px;margin-bottom:18px}
.dr-intro .dr-search{margin-top:6px}
.dr-search{display:flex;align-items:center;gap:10px;max-width:560px;padding:5px 5px 5px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-field,10px);box-shadow:var(--lift)}
.dr-search>svg{color:var(--muted)}
.dr-search input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:15px var(--font-body,inherit);outline:0;padding:7px 0}
.dr-search input::-webkit-search-cancel-button{display:none}
.dr-search button{padding:9px 16px;border:0;border-radius:var(--r-btn,10px);background:var(--gold-grad,var(--gold));color:var(--on-gold);font:700 14px var(--font-body,inherit);cursor:pointer}
.dr-search:focus-within{border-color:var(--ink)}
.dr-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:16px;font-size:14px;color:var(--muted)}
.dr-crumb a{color:var(--muted);font-weight:600;text-decoration:none}
.dr-crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.dr-crumb b{color:var(--ink);font-weight:700}
.dr-crumb svg{width:13px!important;height:13px!important}
.dr-cathead{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.dr-cathead h1{font:800 clamp(24px,3.2vw,30px)/1.15 var(--font-display,inherit)}
.dr-cathead p{color:var(--muted)}
.dr-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dr-tools .dr-search{flex:1;min-width:240px}
.dr-pick{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--muted)}
.dr-pick select{padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-field,10px);color:var(--ink);font:600 14px var(--font-body,inherit);min-width:200px}
.dr-pick button{padding:9px 14px;border:1px solid var(--border);border-radius:var(--r-btn,10px);background:var(--card);color:var(--ink);font:700 14px var(--font-body,inherit)}
.dr-count{margin-bottom:12px!important;color:var(--muted);font-size:14px;font-weight:600}

/* ── Category tiles ── */
.dr-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.dr-cat{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card,14px);color:var(--ink);text-decoration:none;box-shadow:var(--lift);transition:border-color .15s,transform .15s}
.dr-cat:hover{border-color:color-mix(in oklab,var(--ink) 35%,var(--border));transform:translateY(-1px)}
.dr-cat__ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:color-mix(in oklab,var(--gold) 16%,var(--card));color:color-mix(in oklab,var(--gold) 55%,var(--ink));margin-bottom:8px;font:800 17px var(--font-display,inherit)}
.dr-cat__ic svg{width:24px!important;height:24px!important}
.dr-cat__ic--lg{width:58px;height:58px;border-radius:15px;margin:0;flex:none}
.dr-cat__ic--lg svg{width:30px!important;height:30px!important}
.dr-cat b{font:800 15.5px/1.25 var(--font-display,inherit)}
.dr-cat small{color:var(--muted);font-size:13px}

/* ── Business cards ── */
.dr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dr-card{display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card,14px);color:var(--ink);text-decoration:none;box-shadow:var(--lift);transition:border-color .15s,transform .15s}
.dr-card:hover{border-color:color-mix(in oklab,var(--ink) 35%,var(--border));transform:translateY(-1px)}
.dr-logo{width:52px;height:52px;flex:none;border-radius:14px;display:grid;place-items:center;overflow:hidden;background:hsl(var(--dr-h,40) 60% 50% / .18);color:color-mix(in oklab,hsl(var(--dr-h,40) 55% 45%) 65%,var(--ink));font:800 17px/1 var(--font-display,inherit);letter-spacing:.02em}
.dr-logo--pic{background:var(--card);border:1px solid var(--border)}
.dr-logo img{width:100%;height:100%;object-fit:contain}
.dr-logo--lg{width:84px;height:84px;border-radius:20px;font-size:26px}
.dr-card__b{display:flex;flex-direction:column;gap:4px;min-width:0}
.dr-card__cat{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.dr-feat{font-style:normal;text-transform:none;letter-spacing:0;padding:1px 8px;border-radius:99px;background:color-mix(in oklab,var(--gold) 20%,var(--card));color:var(--ink);font-size:11.5px}
.dr-card__b>b{font:800 18px/1.25 var(--font-display,inherit)}
.dr-card__b>small{color:var(--muted);font-size:14px;line-height:1.45}
.dr-card__town{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:700;color:var(--muted)}
.dr-card__town svg{width:14px!important;height:14px!important}
.dr-none{margin-top:6px;padding:44px 20px;text-align:center;background:var(--card);border:1px dashed var(--border);border-radius:var(--r-card,14px)}
.dr-none b{font:800 18px var(--font-display,inherit)}
.dr-none p{color:var(--muted);margin:6px 0 18px!important}
.dr-cats--few{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin:0 auto 18px;max-width:720px;text-align:left}

/* ── A business's page ── */
.dr-hero{display:flex;gap:22px;align-items:flex-start;margin-bottom:6px}
.dr-hero h1{font:800 clamp(26px,3.6vw,34px)/1.15 var(--font-display,inherit);margin:4px 0 6px}
.dr-hero__w p{color:var(--muted);font-size:15.5px}
.dr-hero__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.dr-hero--cover{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card,14px);overflow:hidden;box-shadow:var(--lift)}
.dr-coverpic{height:240px;background:var(--surface)}
.dr-coverpic img{width:100%;height:100%;object-fit:cover;display:block}
.dr-hero__row{display:flex;gap:22px;align-items:flex-start;padding:0 24px 24px}
.dr-hero__row .dr-hero__w{padding-top:16px;min-width:0}
.dr-logo--over{margin-top:-42px;border:4px solid var(--card);box-sizing:content-box!important}
.dr-box{padding:22px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card,14px);box-shadow:var(--lift);margin-bottom:16px}
.dr-box h2{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font:800 18px/1.25 var(--font-display,inherit);margin-bottom:10px}
.dr-box>p{color:var(--muted);font-size:15px;line-height:1.6}
.dr-box>p+p{margin-top:10px}
.dr-open{font:700 12px var(--font-body,inherit);padding:2px 9px;border-radius:99px;background:color-mix(in oklab,var(--ok) 16%,var(--card));color:var(--ok)}
.dr-open--shut{background:var(--surface);color:var(--muted)}
.dr-hours{margin:0;display:flex;flex-direction:column}
.dr-hours>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--border);font-size:14.5px}
.dr-hours>div:first-child{border-top:0}
.dr-hours dt{color:var(--muted)}
.dr-hours dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.dr-hours .on dt,.dr-hours .on dd{color:var(--ink);font-weight:800}
.dr-fine{margin-top:10px!important;font-size:13px!important;color:var(--muted)}
.dr-links{display:flex;flex-direction:column;gap:10px}
.dr-links h2{margin-bottom:2px}
.dr-links>a,.dr-town{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none;word-break:break-word}
.dr-links>a:hover{text-decoration:underline;text-underline-offset:3px}
.dr-links>a svg,.dr-town svg{color:var(--muted)}
.dr-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.dr-social a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--border);color:var(--ink)}
.dr-social a:hover{border-color:var(--ink)}
.dr-social svg{width:18px!important;height:18px!important}
.dr-map{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card,14px);overflow:hidden;box-shadow:var(--lift);margin-bottom:16px}
.dr-map__pic{position:relative;height:180px;background:var(--surface)}
.dr-map__pic img,.dr-map__pic>svg:first-child{width:100%!important;height:100%!important;display:block;object-fit:cover}
.dr-map .e-land{fill:color-mix(in oklab,var(--ink) 6%,var(--card))}
.dr-map .e-water{fill:color-mix(in oklab,var(--blue) 26%,var(--card))}
.dr-map .e-park{fill:color-mix(in oklab,var(--ok) 22%,var(--card))}
.dr-map .e-road{stroke:color-mix(in oklab,var(--ink) 16%,var(--card));stroke-width:7;fill:none}
.dr-pin{position:absolute;left:50%;top:50%;width:28px!important;height:40px!important;transform:translate(-50%,-90%);fill:var(--gold)}
.dr-map__b{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:14px 16px;font-size:14px;font-weight:600}
.dr-map__b .dr-btn{padding:7px 12px;font-size:13px}
.dr-form{display:flex;flex-direction:column;gap:14px}
.dr-form h2{margin-bottom:0}
.dr-form>p{margin-top:-8px!important}
.dr-alert{margin:0!important;padding:10px 12px;border-radius:10px;background:color-mix(in oklab,var(--bad) 12%,var(--card));color:var(--bad)!important;font-weight:600}
.dr-f{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:700}
.dr-f i{color:var(--bad);font-style:normal}
.dr-in{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-field,10px);background:var(--card);color:var(--ink);font:15px/1.4 var(--font-body,inherit);resize:vertical}
.dr-in:focus{outline:2px solid color-mix(in oklab,var(--gold) 60%,transparent);outline-offset:1px;border-color:var(--ink)}
.dr-in[aria-invalid="true"]{border-color:var(--bad)}
.dr-err{color:var(--bad);font-weight:600;font-size:12.5px}
.dr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dr-acts{display:flex;justify-content:flex-end}
.dr-sent{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:36px 22px}
.dr-sent__ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklab,var(--ok) 16%,var(--card));color:var(--ok)}
.dr-sent__ic svg{width:22px!important;height:22px!important}
.dr-sent b{font:800 18px var(--font-display,inherit)}
.dr-sent p{color:var(--muted);max-width:420px}

/* ── The builder's Directory section ── */
.dr-sectionbody{margin-top:22px;color:var(--ink);text-align:left}
.dr-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 28px}
.dr-logoitem{display:flex;flex-direction:column;align-items:center;gap:8px;width:110px;text-align:center;color:var(--ink);text-decoration:none}
.dr-logoitem b{font-size:13px;font-weight:700;line-height:1.25}
.dr-logoitem:hover b{text-decoration:underline;text-underline-offset:3px}
.dr-more{text-align:center;margin:18px 0 0}
.dr-more a{font-weight:700;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--gold)}

@media (max-width:860px){
  .dr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .dr-top{padding-top:22px}
  .dr-w{padding-left:16px;padding-right:16px}
  .tpl-cols:has(.dr-w){padding-left:16px;padding-right:16px}
  .dr-grid{grid-template-columns:minmax(0,1fr)}
  .dr-card{flex-direction:row;align-items:flex-start;padding:16px}
  .dr-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dr-hero{flex-direction:column;gap:14px}
  .dr-logo--lg{width:64px;height:64px;font-size:20px;border-radius:16px}
  .dr-hero__acts .dr-btn{flex:1}
  .dr-coverpic{height:150px}
  .dr-hero__row{flex-direction:column;gap:6px;padding:0 18px 20px}
  .dr-hero__row .dr-hero__w{padding-top:0}
  .dr-pick{width:100%}
  .dr-pick select{flex:1;min-width:0}
  .dr-box{padding:18px}
}