/* directory css */
.drts-display-element {
	clear: both;
	border: 1px solid lightgrey;
	height: 200px;
	align-content: center;
	text-align: center;
	cursor: pointer;
}

.directory-category-title.drts-display-element:hover {
	background-color: #f9f8f4;
}

div.drts-form-field-radio-option-description{
	white-space:pre-line;
}
.page-id-97838 #top-banner, .page-id-99342 #top-banner, .drts-entity #top-banner{
	display:none;
}
.wc-block-components-text-input.is-active input, .wc-blocks-components-select .wc-blocks-components-select__select {
    padding: 20px 0 15px 7px !important;
}
.drts-display-element:not(.directory-category-title) {
    clear: both;
    border: unset!important;
    height: -webkit-fill-available!important;
    align-content: flex-start;
    text-align: start!important;
    cursor: pointer;
}
.drts .fa-brands, .drts .fab, .drts-fab, .drts .fa-solid, .drts .fas:not(.drts-icon), .drts-fas {
    font-size: 22px!important;
}
a.drts-entity-permalink {
    height: fit-content;
    display: flex;
    flex-direction: column;
}
.drts button {
    font-size: 15px !important;
    height: auto!important;
}
.drts .drts-bs-form-control
 {
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    color: #495057;
    display: block;
    font-size: 1rem;
    font-weight: 400;
    height: fit-content!important;
    line-height: 1.5;
    padding: .375rem .75rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%;
}
span.store-hours-status {
    display: inline-block;
    margin-right: 10px;
}
.store-info img {
    background-color: unset !important;
}
button.store-info-button {
    padding: 13px;
    background: #c5c4c4;
    width: fit-content;
    display: inline;
    margin-right: 10px;
}
button.store-info-button:hover {
    padding: 13px;
    background: #a89f9f;
    width: fit-content;
    display: inline;
    margin-right: 10px;
}
.drts-entity-permalink span, .directory-listing-title span, .directory-listing-title {
	display: block!important;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 0;
    color:black;
}

i.drts-icon.fas{
    width: 80px;
    height: 80px;
	align-self: center;
}

i.drts-icon {
	font-size: 46px !important;
	border: unset !important;
	box-shadow: unset !important;
	color: #fff !important;
	margin-bottom: 20px !important;
}

.blankslate-page--header-dropdown {
	display: none;
	border: 1px solid darkgrey;
	padding: 15px;
	position: absolute;
	background: white;
	z-index: 1000000;
	height: fit-content;
	line-height: 32px;
	border-top: unset;
}

.blankslate-page--header {
	order: 1;
	background-color: #f9f8f4;
	border: none;
    position: relative;
}


.blankslate-page--category-dropdown button {
	color: #AB4342;
	background: #fff;
}

.blankslate-page--container {
	display: flex;
	justify-content: space-between;
	align-items: center;
    padding:15px;
	margin-bottom: 30px!important;
}

.blankslate-page--category-dropdown button {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 100%;
	height: auto;
	padding: 10px 15px;
	gap: 10px;
	display: flex;
	justify-content: flex-start;
	position: relative;
}

.blankslate-landing--header {
	display: flex;
	justify-content: flex-start;
	position: relative;
}



.blankslate-landing--header {
	display: flex;
	justify-content: flex-start;
	position: relative;
}


.blankslate-page--header-dropdown ul {
	-moz-column-count: 3;
	column-count: 3;
	-moz-column-gap: 20px;
	column-gap: 20px;
	text-align: left;
}

.blankslate-page ul {
	list-style: none !important;
	margin: 0;
}

.blankslate-page--header-dropdown li {
	float: none;
	width: auto;
}

.button-requestpro {
    background-color: #cd3035;
    background: linear-gradient(90deg,#cd3035 0, #cd3035 calc(100% - 46px), #fff calc(100% - 46px), #cd3035 calc(100% - 44px), #cd3035 100%);
    color: #fff;
    margin-bottom: 15px;
}
.button-requestpro {
    border: 1px solid #cd3035;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1;
    height: 44px;
    padding-inline: 15px 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
    width: 100%;
}

.blankslate-page--container {
    max-width: 100% !important;
}
.blankslate-page {
    margin-bottom: 0px!important;
    padding: 0px!important;
}

#post-97842 .page-header{
    display:none;
}
.blankslate-directory .button-requestpro:hover, .blankslate-page--contact-form a:hover, .blankslate-page--overlay-heading__button a:hover {
	background: linear-gradient(90deg, var(--primary-color1) 0, var(--primary-color1) calc(100% - 46px), var(--secondary-color1) calc(100% - 46px), var(--secondary-color1) calc(100% - 44px), var(--secondary-color1) 100%);
	color: white;
}

.drts-listing {
    border: 1px solid #e8dbdb;
    padding: 15px 15px 0px 15px !important;
    flex: 1;
}

.blankslate--directory-category .business-list .business-item {
    border: unset!important;
	margin: 5px 0px!important;
    
}
.blankslate--directory-category .business-list .business-item h6{
	margin:5px 0px!important;
}
.text-holder{
	font-size:14px;
}

.blankslate--directory-category .business-list .business-item .image-holder {
    background-repeat: no-repeat;
    background-size: cover;
}

.blankslate--directory-category .business-list {
    margin-top: 3rem;
    gap: 20px;
    display: flex;
   
}
.form-row {
    display: block!important;
}
button.woocommerce-Button.button {
	margin-top:15px;
}
#ndic-main .entry-content ximg {
    height: auto!important;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 0 !important;
    width: 100%!important;
    max-width: 100px !important;
    
}
.drts img.drts-icon, i.drts-icon {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    padding: 0px !important;
    float: left;
}
.drts .drts-bs-navbar-nav {
   
    flex: none;
}
.single-directory_dir_ltg div#drts-content {
    max-width: 800px;
    margin: auto;
}
#ndic-main .entry-content .fitvidsignore.slick-slide figure img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    object-fit: cover!important;
}
.drts-slider-photos .slick-list {
   max-height: 300px !important;
}
.drts-slider-photos .slick-slide figure {
    min-height: 300px;
}
@media (max-width:768px){
	.drts-listing{
		width:100%!important;
		
	}
}

.single-directory_dir_ltg div#drts-content {
    max-width: 100%!important;
    margin: auto;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 20%;
}
.woocommerce-account .woocommerce-MyAccount-content {
    width: 80%;
}
  
  
  
  h1.page-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-align: center;
  }
  .page-intro {
    color: #666;
    font-size: 14px;
    margin: 0 0 32px 0;
    text-align: center;
  }

  .mockup {
    background: #ffffff;
    padding: 28px 28px 32px 28px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 28px;
  }

  .mockup-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #999;
    margin: 0 0 4px 0;
  }
  .mockup-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 24px 0;
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
  }

  /* ============================================
     SIDEBAR CONTENT — matched to live site
     - serif italic body copy
     - light gray rectangular search/email inputs
     ============================================ */

  .sidebar-block { margin-bottom: 22px; }
  .sidebar-block:last-child { margin-bottom: 0; }

  /* Directory intro copy — italic serif like the live site */
  .directory-copy {
    font-family: Georgia, 'Times New Roman', serif!important;
    font-style: italic!important;
    font-size: 16px!important;
    line-height: 1.55!important;
    color: #1a1a1a!important;
    text-align: center!important;
    margin: 0 0 18px 0!important;
  }

  /* Search box — matches live light-gray field */
  .search-block {
    display: flex;
    align-items: center;
    background: #e8e8e8;
    padding: 10px 14px;
  }
  .search-block input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    color: #1a1a1a;
  }
  .search-block input::placeholder { color: #6a6a6a; }
  .search-block .search-icon {
    width: 16px; height: 16px;
    background: #1a1a1a;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>") center / contain no-repeat;
    flex-shrink: 0;
  }

  /* Newsletter — matches live look */
  .newsletter h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #1a1a1a;
    text-align: center;
    letter-spacing: 0.5px;
  }
  .newsletter .email-row {
    display: flex;
    align-items: center;
    background: #e8e8e8;
    padding: 10px 14px;
  }
  .newsletter input[type="email"] {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: #1a1a1a;
    outline: none;
  }
  .newsletter input[type="email"]::placeholder { color: #6a6a6a; }
  .newsletter .submit-arrow {
    width: 0; height: 0;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent #1a1a1a;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px;
  }
  .newsletter .helper {
    font-size: 13px;
    color: #1a1a1a;
    margin: 10px 0 0 0;
    line-height: 1.4;
  }
  .newsletter .helper a { color: #1a1a1a; text-decoration: underline; }

  /* Divider rows */
  .divider {
    border-top: 1px dotted #999;
    margin: 18px 0;
  }

  /* ============================================
     REGISTER BUTTON — SHARED BASE
     ============================================ */
  .reg-btn-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
  }
  .reg-btn {
    border: none;
    padding: 12px 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    cursor: pointer;
    line-height: 1.3;
    text-align: center;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    border-radius: 6px;
  }
  .reg-btn span { display: block; }

  

/* ============================================
    SAMPLE 3 — Outline red → solid red, white text
    ============================================ */
.btn-3 {
    background: #ffffff;
    color: #bc3429!important;
    border: 2px solid #bc3429;
    padding: 10px 24px;
    transition: background 0.2s ease, color 0.2s ease;
}
.btn-3:hover {
    background: #bc3429;
    color: #ffffff!important;
}

.drts-search-form-field:first-child input[type=text],.drts-search-form-field .drts-form-type-textfield input[type=text]{
    
    font-size:16px!important;
}
.drts .drts-search-form-submit {
    cursor: pointer;
    height: 38px !important;
}
.tt-menu i.drts-icon-sm, .tt-menu img.drts-icon-sm {
    display: none !important;
}
.drts-search-search .drts-row{
    width:100%!important;
    display:block!important;
}
/* Task 2: the keyword field carries an 18px bottom margin and the empty
   submit column adds 1px — together they made the space below the search box
   40px instead of Siteline's 20. Form ends flush at the input, like Siteline. */
.sidebar .drts-search-form .drts-search-form-field-keyword{
    margin-bottom: 0 !important;
}
.sidebar .drts-search-form .drts-search-form-field.drts-col-md-2{
    display: none;
}
/* Task 2: magnifier = same artwork, size and position as Siteline's
   .searchsubmit (14px wide, right 12px, top 13px / 18px at >=1200px) */
.drts-search-form-field .drts-form-field-main>label {
    width: 14px !important;
    height: 14px !important;
    min-width: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    background: url(/wp-content/themes/ndic/library/images/search.svg) center / contain no-repeat !important;
    position: absolute;
    /* drts positions the label with top + translateY(-7px); these top values
       put the glyph at Siteline's .searchsubmit position (top 13px below
       1200px, 18px above — measured glyph-edge to glyph-edge) */
    top: 20px !important;
    right: 12px !important;
    left: unset!important;
}
@media (min-width: 1200px) {
  .drts-search-form-field .drts-form-field-main>label {
    top: 24.85px !important;
  }
}
/* Task 2: input matches Siteline's search widget exactly
   (48px tall, radius 7, #333 type color, padding 10/18) */
.drts-search-form-field:first-child input[type=text]{
    box-shadow: unset;
    background-color: #ebebeb !important;
    border: unset !important;
    height: 48px !important;
    border-radius: 7px!important;
    color: #333 !important;
    padding: 10px 18px !important;
}
/* J16-2 (June 16): kill the residual box-shadow "rule" that showed around the
   gray search box on landing/subcategory (absent on listing). Force flat on
   every state/clone so all directory pages match listing & Siteline. */
#sidebar1 .drts-search-form input,
#sidebar1 .drts-search-form input:focus,
#sidebar1 .drts-search-form .tt-input,
#sidebar1 .drts-search-form .tt-hint {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
/* drts bootstrap paints placeholders gray; Siteline's are #333 like the text */
.drts-search-form-field:first-child input[type=text]::placeholder{
    color: #333;
}

.drts-search-form-field .drts-form-field-main>label.fas-search:before{
    display:none!important;
    content:''!important;
}
.drts-search-form-submit,.drts-search-form-field .drts-bs-btn-group{
    display:none!important;
}
.drts-search-form-field{
    margin-bottom:0px!important;
}


/* category page */
/* ── MOCKUP NOTE ── */
.mockup-note {
  background: #fffbea;
  border-bottom: 1px solid #e8c840;
  padding: 7px 0;
  text-align: center;
  font-size: 12px;
  color: #665500;
  font-family: "Lato", sans-serif;
}

/* Recent Comments body matches Siteline (16px at all widths) — was 18px at
   desktop, which read larger than Siteline's box (R2-4) */
.ndic-comment-list{
    font-size: 16px;
}
@media (min-width: 1200px) {
	.ndic-comment-list{
        font-size: 16px;
    }
}



/* ── RIGHT COLUMN TYPOGRAPHY (Phase 2): match Siteline's widget styles ──
   On the landing page a wrapper bumps inherited font-size to 18px, which
   inflates the widget h2s to 24px (Siteline: 21px) and body text to 18px
   (Siteline: 16px). Pin the sidebar widgets to Siteline's computed values. */
#sidebar1 .widget {
  font-size: 16px;
}
#sidebar1 .widget h2 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  color: #000;
  margin-top: 0;
  margin-bottom: 0.375em; /* = Siteline's 7.875px at 21px */
}
#sidebar1 .widget p {
  letter-spacing: 0.4px; /* Siteline .widget p */
}

/* Space above the red "Local business?" box = space below it (17px) */
#sidebar1 .directory-copy {
  margin-bottom: 17px !important;
}

/* R2-7: the intro text's visible top aligns with the top of the MAIN CONTENT
   in the left column (not the date line): the HOME box's top border on the
   landing page, the "Food" headline on subcategory pages, the bordered image
   on listing pages — all of which begin at the row content top. The sidebar
   and main column share the same .row, so the natural offset is 0; the only
   adjustment is -4.4px to compensate the intro's own line-height leading so
   the glyph tops (not the line-box top) sit on the content-top line.
   Scoped with :has(.directory-copy) so it only ever matches the DIRECTORY
   sidebar — Siteline's #sidebar1 has no .directory-copy and is never touched.
   Desktop only; on mobile the column stacks. */
@media (min-width: 768px) {
  /* Landing + listing: the content top is a border LINE (HOME box border /
     bordered listing image). Align the intro's visible text to that line by
     compensating its leading (-4.4px). Measured with the real Georgia-metric
     font installed: intro glyph top lands 0.7px below the border = aligned. */
  #sidebar1:has(.directory-copy) .sidebar-inner {
    margin-top: -4.4px;
  }
  /* Subcategory pages: the headline ("Food"/"Coffee") is a large CENTERED
     title whose glyphs sit ~11px below its line-box top, so the vertical
     dotted line (the sidebar's border, drawn from the row content top at
     490.3) used to float ~11px above both the title glyphs (501) and the
     intro text (502). Drop the whole sidebar box — and therefore the line's
     top — by 10.7px so it starts at the title/intro glyph level, then pull
     the inner content back up the same amount so the intro, red box and
     Recent-Comments box keep their exact positions (intro glyph stays level
     with the headline glyph; line still ends at the Recent-Comments box).
     Net visible change: only the line's top moves down to meet the text. */
  #ndic-content:has(.subcat-title) #sidebar1:has(.directory-copy) {
    margin-top: 10.7px;
  }
  #ndic-content:has(.subcat-title) #sidebar1:has(.directory-copy) .sidebar-inner {
    margin-top: -4.2px;
  }
  /* Add-listing page (id 99321): align the intro glyph top to the "Add
     Listing" title glyph (measured intro 491 vs title 496 at -4.4px → +0.6px). */
  body.page-id-99321 #sidebar1:has(.directory-copy) .sidebar-inner {
    margin-top: 0.6px;
  }
}

/* The vertical dotted line should end at the bottom of the Recent Comments
   box — the last widget's 20px margin-bottom made it overhang. */
#sidebar1 .widget:last-child {
  margin-bottom: 0;
}
/* J16-9 (June 16): the .row is flex, so the sidebar stretches to match a
   taller main column — making the dotted line (the sidebar's border) overshoot
   the Recent Comments box on listing pages (Etty's, Cats Inc). Stop the
   DIRECTORY sidebar from stretching so its height = its content and the line
   always ends exactly at the Recent Comments box. Scoped via :has(.directory-
   copy) so Siteline's #sidebar1 is untouched. */
@media (min-width: 768px) {
  #sidebar1:has(.directory-copy) {
    align-self: flex-start;
  }
}

/* ── HEADER LOGO: same metrics as Siteline's logo ──
   The SVG is sized like Siteline's .logo img (250px cap below 768px =
   70.762px tall, 312px cap above = 88.31px tall); the global .logo a
   padding rules (16/20/25/31-28 per breakpoint) then produce the exact
   same black-bar height as Siteline at every viewport width. */
/* Directory tagline dimmed to Siteline's perceived tone (R2-1): Siteline's
   tagline is a thin font that anti-aliases to ~rgb(141,141,141); white at this
   opacity over the #221F1F bar lands at the same shade. */
.directory-logo-svg .dir-tagline {
  opacity: 0.5;
}
.logo .directory-logo-svg {
  height: 70.767px; /* = Siteline img: 250px cap x (265.8/939) aspect */
  width: auto;
  max-width: 100%;
  vertical-align: middle; /* same as Siteline's .logo img — kills the baseline gap */
  overflow: visible; /* desktop wordmark shifts past the viewBox; don't clip it */
}
/* J16-1 (June 16) + R5-1 (June 17): on DESKTOP/TABLET only, re-lay the logo so
   the wordmark + tagline are OPTICALLY CENTERED in the bar (circle to their
   left). R5-1 removed the earlier 0.66in right shift (client: it pushed the
   lockup too far right) — the wordmark/tagline centre now sits on the bar
   centre (719.5 @1440) instead of +63px, i.e. each element's translateX is
   63.5px less than the June-16 values. The SVG markup keeps the ORIGINAL
   transforms, so MOBILE (<768) is unchanged and the logo still fits the narrow
   bar. transform-box/origin make these CSS transforms match the SVG attribute
   coordinate space. */
@media (min-width: 768px) {
  .directory-logo-svg .dir-wordmark,
  .directory-logo-svg .dir-tagline,
  .directory-logo-svg #svg-siteline-link {
    transform-box: view-box;
    transform-origin: 0 0;
  }
  .directory-logo-svg .dir-tagline {
    transform: translate(-51.336px, -15.4744px) scale(0.325802);
  }
  .directory-logo-svg .dir-wordmark {
    transform: translate(-58.8044px, -19.1044px) scale(0.33376);
  }
  .directory-logo-svg #svg-siteline-link {
    transform: translate(-51.1445px, -14.6328px) scale(0.302576);
  }
}
@media (min-width: 768px) {
  .logo .directory-logo-svg {
    height: 88.31px;
  }
}

/* ── STRUCTURE: match Siteline Proper grid exactly ──
   Landing/subcategory pages render a second #inner-content.container nested
   inside the page template's own container, insetting the date line and both
   columns by 15px per side (vertical dotted divider lands at a different x
   than on Siteline). Neutralize the inner container so the row/columns compute
   from the same base width as Siteline. This selector only ever matches on
   directory pages (Siteline never nests #inner-content). */
#inner-content #inner-content {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ── PAGE WRAP ── */
/* No horizontal padding: #ndic-main's own padding (15/30, same as Siteline)
   already places the accordion boxes at exactly Siteline's photo width. */
.page-wrap {

  margin: 0 auto;
  padding: 0 0 60px;
}

/* Recent Comments box -> footer gap, halved per design notes.
   Landing/subcategory (page 104416): the gap was 35px (WPBakery raw-html
   margin) + 30px (footer margin) = 65 after the line fix; 12 + 30 = 42px,
   half the original 85. Listing pages: was 50 (20 widget margin + 30 footer);
   widget margin removal + 25px footer margin = 25, half the original. */
.page-id-104416 .wpb_raw_code.wpb_raw_html {
  margin-bottom: 12px;
}
.single-directory_dir_ltg #footer {
  margin-top: 25px;
}

/* ── DATELINE ── */
.date-wrapper {
  position: relative;
  text-align: center;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 20px;
  padding: 0;
  margin-top: 0px;
}
.date-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1px;
  display: block;
  width: 100%;
  border-top: 1px dotted #000;
}
.date-wrapper span {
  position: relative;
  display: inline-block;
  background: #fff;
  padding: 0 10px;
  letter-spacing: 1.25px;
  margin-top: 2px;
  margin-bottom: 3px;
}
/* js_composer.min.css (loaded on directory pages only, not on Siteline)
   zeroes the span margin via `.wpb_text_column :last-child` — restore it so
   the wrapper is 29px tall like Siteline's and the dotted line (drawn at the
   wrapper's vertical center) sits at the identical y. */
.date-wrapper p span:last-child {
  margin-bottom: 3px;
}

#post-104416 .page-header{
    display: none;
}
#post-104416  button:focus{
    background:inherit!important;
    color:inherit!important;
    outline:unset!important;
}

/* ── MOBILE: stack sidebar below accordion ── */
@media (max-width: 767px) {
  .page-wrap {
    padding-left: 0;
    padding-right: 0;
  }
  .date-wrapper {
    /* container already provides the 15px inset on mobile (matches Siteline) */
    padding: 0;
  }
  .main-content {
    flex-direction: column;
  }
  #ndic-main {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    /* keep Bootstrap's 15px right padding — same as Siteline at mobile */
  }
  .sidebar {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    border-left: none;
    border-top: 4px double #e5e5e5;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 24px;
    margin-top: 24px;
  }
}

/* ── ACCORDION / CATEGORY BLOCKS ── */
/* Each category is a self-contained bordered box.
   Borders do NOT collapse — each box is fully outlined at all times,
   including when expanded. Margin-bottom creates the gap between boxes. */
.acc-item {
  border: 1px solid #ccc;
  margin-bottom: 8px;
  position: relative;
}

.acc-trigger {
  width: 100%;
  background: #fff;
  border: none;
  cursor: pointer;
  padding: 28px 20px;
  text-align: center;
  display: block;
  /* padding-bottom animates in sync with the panel collapse — without it the
     box visibly grew for a beat when closing (design notes: "just close") */
  transition: background 0.2s, padding-bottom 0.32s ease;
}
.acc-trigger:hover { background: #fafafa; }
.acc-trigger.open  { background: #fff;padding-bottom:0px; }

.acc-label {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: #000;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  display: block;
  line-height: 1.1;
}

/* ── SUBCATEGORY PANEL ── */
/* Sits inside the same bordered box — no extra border, just padding */
.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
  background: #fff;
}
.acc-panel.open {
  max-height: 1200px;
}

/* Subcategory list — centered, inside the box */
.sub-list {
  padding: 0 20px 28px;
  text-align: center;
}
/* Larger and bolder, with less space between items (design notes, Att. 11) */
.sub-list a {
  display: block;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #000;
  text-decoration: none;
  padding: 2px 0;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}
.sub-list a:hover { color: #686868; }
/* No-listings message: plain weight, nothing bold */
.sub-list .sub-list-empty {
  font-weight: 400;
  font-size: 16px;
}
/* J16-4 (June 16): "click here" linked but NOT underlined; greys on hover.
   (The email is unlinked in the template — plain text now.) */
.sub-list .sub-list-empty a {
  display: inline;
  font-size: 16px;
  font-weight: 400;
  padding: 0;
  text-decoration: none;
  color: #000;
}
.sub-list .sub-list-empty a:hover { color: #888; }







.business-item {
    text-decoration: none;
}

.business-item img,
.business-item-placeholder {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.business-item-placeholder {
    background: #f3f3f3;
    border: 1px solid #ddd;
    color: #777;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
    padding: 10px;
}

.business-excerpt {
    line-height: 1.3;
    font-size: 12px;
    margin-top: 10px;
}

.drts img {
    
    object-fit: cover;
    aspect-ratio: 1.4;
}

/* grid */
.directory-grid {
    --grid-line-color: #312e2e;
    --grid-bg: #fff;
    --dot-on: 1px;
    --dot-off: 3px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    position: relative;
    background: var(--grid-bg);
}

/* full-height vertical dotted dividers for 3-col layout */
.directory-grid::before,
.directory-grid::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--grid-line-color) 0 var(--dot-on),
        transparent var(--dot-on) var(--dot-off)
    );
    background-repeat: repeat-y;
    z-index: 5;
}

.directory-grid::before {
    left: 33.333333%;
    transform: translateX(-0.5px);
}

.directory-grid::after {
    left: 66.666666%;
    transform: translateX(-0.5px);
}

.directory-grid-item {
    position: relative;
    min-width: 0;
    background: transparent;
}

.directory-grid-item-inner {
    padding: 28px 22px 30px;
    text-align: center;
    height: 100%;
    background: var(--grid-bg);
}


/* horizontal dotted dividers between rows only */
.directory-grid-item:nth-child(n+4)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to right,
        var(--grid-line-color) 0 var(--dot-on),
        transparent var(--dot-on) var(--dot-off)
    );
    background-repeat: repeat-x;
    z-index: 6;
}

/* images square */
.business-item {
    display: block;
    text-decoration: none;
}

.business-item:hover,
.business-item:focus {
    text-decoration: none;
}
/* June 16 follow-up: business-name links (grid on subcategory pages) grey on
   hover — same grey as the other link hovers. */
.business-item:hover h4,
.business-item:focus h4 {
    color: #686868 !important;
}

.business-item img,
.business-item-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 auto;
}

.business-item img.img-thumbnail,
.business-item-placeholder.img-thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    padding: 0;
    border: 1px solid #cfcfcf;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* FA-3: force square subcategory thumbnails. The aspect-ratio:1/1 above was
   being defeated (height resolved to the image's natural 180px) — likely a
   global img height rule from a plugin stylesheet. Win it with !important and
   clear any min/max-height. Applies to every subcategory grid page. */
.directory-grid .business-item img.img-thumbnail,
.directory-grid .business-item-placeholder.img-thumbnail {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
}

.business-item-placeholder {
    background: #efefef;
    display: flex;
    align-items: center;
    justify-content: center;
}

.business-item-placeholder .placeholder {
    width: 100%;
    height: 100%;
    background: #efefef;
}

.business-excerpt {
    line-height: 1.3;
    font-size: 12px;
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
}

/* filler cells stay visually empty but preserve the board */
.directory-grid-item-empty .business-item,
.directory-grid-item-empty .business-excerpt {
    display: none;
}

/* ── LISTING PAGE (Phase 5, design notes) ── */
/* J16-5 (June 16): business description centered (reverses the June-14
   flush-left, per client). Title/contact/testimonials already centered. */
.directory-listing-detail .listing-description,
.directory-listing-detail .listing-description p,
.directory-listing-detail .listing-description * {
    text-align: center;
}
/* The short blurb must never show on listing pages — some listings (e.g.
   Handlebar) have it pasted into their post content as a "page_subtitle" */
.directory-listing-detail .page_subtitle,
.directory-listing-detail #title_simple {
    display: none;
}
/* Dotted divider above the address: same 1px dotted style as the rest of the
   site (was 1px dashed top+bottom, reading heavier), with tighter spacing */
.listing-address-divider {
    width: 100px;
    border-top: 1px dotted #000;
}
.directory-listing-detail section.mb-4 {
    margin-bottom: 12px !important; /* less space above the divider */
}
.directory-listing-detail .listing-contact {
    margin-top: 12px !important;    /* less space below the divider */
}
/* Email, website and social links: plain black, not the site's red */
.directory-listing-detail .listing-contact a {
    color: #000;
}
/* J16-6 (June 16): all listing links (business-name, email, website, socials)
   grey on hover. Text links change colour; the icon links fade so they read
   grey too. */
.directory-listing-detail .listing-contact a:hover {
    color: #686868 !important;
}
/* business-name link WRAPS the <h1> (<a><h1>…</h1></a>); the heading inherits
   the link's inline black. Grey it on hover — both via the wrapping link and
   the heading's own :hover (the heading is the visible hover target). */
.directory-listing-detail a:hover > .single-title,
.directory-listing-detail a:hover .single-title,
.directory-listing-detail .single-title:hover {
    color: #686868 !important;
}
.directory-listing-detail .listing-contact a:hover .listing-social-icon {
    opacity: 0.55;
}
/* Social icons: Facebook square (no radius), both icons the same 16px size */
img.listing-social-icon {
    height: 16px !important;
    max-height: 16px !important;
    width: 16px !important; /* both PNGs are square; equal boxes guaranteed */
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    display: inline-block;
    vertical-align: -3px;
}
/* Testimonials: text column wider (side padding halved 48 -> 24), headline in
   the style of Siteline's Recent Comments box, less gray below the last quote */
/* J16-8 (June 16): on listings with NO testimonials (Handlebar, NDIC,
   Marisella) the space between the last contact line and the horizontal
   divider below should EXACTLY match the gap a listing WITH testimonials has
   between its last contact line and the top of the grey testimonials area
   (measured 24px). The site-wide footer rule sits 16px below the article, so
   8px of article padding-bottom gives 8+16 = 24px to the dotted line. Zero
   the contact's collapsing bottom margin so the gap is exact. */
.directory-listing-detail:not(:has(.listing-testimonials)) .listing-contact {
    margin-bottom: 0 !important;
}
.directory-listing-detail:not(:has(.listing-testimonials)) {
    padding-bottom: 8px;
}

/* J16-7 (June 16) + R5-3 (June 17): the three VISUAL (ink) gaps around the
   "OUR CLIENTS SAY…" headline must be equal — space above the headline = space
   below it = the gap between the last testimonial and the grey box's bottom
   edge. The bottom gap is the fixed reference (26px of ink). Headline line-
   height adds ~8px of empty space above its caps and the first quote adds ~15px
   below the headline, so to land all three at 26px ink: padding-top = 18 (top
   gap 26) and the title margin-bottom = 11 (below-headline gap 26). */
.listing-testimonials {
    padding: 18px 24px 12px !important;
}
.listing-testimonials .testimonials-title {
    font-size: 21px !important;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.25px;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 11px;
}
/* Testimonial quote body text matches the Recent Comments body text in the
   sidebar exactly: Lato 16px / 400 / normal / 24px / 0.4px / #000 (the only
   gaps were size 18->16 and letter-spacing 0.5->0.4; the rest already matched) */
.listing-testimonials blockquote {
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 24px;
    letter-spacing: 0.4px;
    color: #000;
    text-transform: none;
}

/* ── SUBCATEGORY PAGE (Phase 4, design notes) ── */
/* Headline 4pt (5.33px) larger than the previous 36px, with clearance below
   so descenders ("g", "p") never overlap the grid */
.subcat-title {
    font-size: 41.33px !important;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 18px;
}
/* Business name one point larger (18 -> 19.33px) */
.directory-grid .directory-grid-item h4 {
    font-size: 19.33px !important;
}
/* Blurb two points larger (12 -> 14.67px), and tied closer to the name */
.directory-grid-item .business-excerpt {
    font-size: 14.67px;
    line-height: 1.35;
}
.directory-grid-item .business-item .my-2:last-child,
.directory-grid-item .business-item > .my-2 {
    margin-bottom: 2px !important;
}

/* When a row holds a single listing, the divider to its right stays but the
   far divider does not (Att. 13): the second consecutive filler cell masks
   the column line running along its left edge. Desktop 3-col layout only. */
@media (min-width: 992px) {
    .directory-grid-item-empty + .directory-grid-item-empty {
        position: relative;
    }
    .directory-grid-item-empty + .directory-grid-item-empty::after {
        content: "";
        position: absolute;
        top: 1px;      /* spare the horizontal row divider above */
        bottom: 0;
        left: -2px;    /* covers the 1px line centered on the column edge */
        width: 4px;
        background: var(--grid-bg, #fff);
        z-index: 6;
    }
}



/* tablet: 2 columns */
@media (max-width: 991.98px) {
    .directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .directory-grid::before {
        left: 50%;
    }

    .directory-grid::after {
        display: none;
    }

    .directory-grid-item:nth-child(n+4)::before {
        display: none;
    }

    .directory-grid-item:nth-child(n+3)::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        pointer-events: none;
        background-image: repeating-linear-gradient(
            to right,
            var(--grid-line-color) 0 var(--dot-on),
            transparent var(--dot-on) var(--dot-off)
        );
        background-repeat: repeat-x;
        z-index: 6;
    }
}

/* mobile: 1 column */
@media (max-width: 767.98px) {
    .directory-grid {
        grid-template-columns: 1fr;
    }

    .directory-grid::before,
    .directory-grid::after {
        display: none;
    }

    .directory-grid-item:nth-child(n+3)::before {
        display: none;
    }

    .directory-grid-item:nth-child(n+2)::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        pointer-events: none;
        background-image: repeating-linear-gradient(
            to right,
            var(--grid-line-color) 0 0,
            transparent 0 0
        );
        background-repeat: repeat-x;
        z-index: 6;
    }
}

/* Default inner spacing */
.directory-grid-item .directory-grid-item-inner {
    padding-top: 28px;
    padding-bottom: 30px;
}

/* =========================
   3 columns (lg and up)
   first row: items 1-3
   last row: last 3 items
   ========================= */
@media (min-width: 992px) {
    .directory-grid-item:nth-child(-n+3) .directory-grid-item-inner {
        padding-top: 0;
    }

    .directory-grid-item:nth-last-child(-n+3) .directory-grid-item-inner {
        padding-bottom: 0;
    }
}

/* =========================
   2 columns (md to lg-1)
   first row: items 1-2
   last row: last 2 items
   ========================= */
@media (min-width: 768px) and (max-width: 991.98px) {
    .directory-grid-item:nth-child(-n+2) .directory-grid-item-inner {
        padding-top: 0;
    }

    .directory-grid-item:nth-last-child(-n+2) .directory-grid-item-inner {
        padding-bottom: 0;
    }
}

/* =========================
   1 column (below md)
   first row: item 1
   last row: last item
   ========================= */
@media (max-width: 767.98px) {
    .directory-grid-item:first-child .directory-grid-item-inner {
        padding-top: 0;
    }

    .directory-grid-item:last-child .directory-grid-item-inner {
        padding-bottom: 0;
    }
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .directory-grid::before {
        left: 50%;
    }

    .directory-grid::after {
        display: none;
    }

    /* clear any desktop row-line logic */
    .directory-grid-item::before {
        display: none;
    }

    /* every item in rows after the first gets a top dotted line */
    .directory-grid-item:nth-child(n+3)::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        pointer-events: none;
        background-image: repeating-linear-gradient(
            to right,
            var(--grid-line-color) 0 var(--dot-on),
            transparent var(--dot-on) var(--dot-off)
        );
        background-repeat: repeat-x;
        z-index: 6;
    }
}

/* end grid */
/* slideshow */
.listing-gallery {
    position: relative;
}

.listing-gallery-stage {
    position: relative;
    overflow: hidden;
    background: #f3f3f3;
}

.listing-gallery-item {
    display: none;
    margin: 0;
}

.listing-gallery-item.is-active {
    display: block;
}

.listing-gallery-image {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
}

.listing-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 0;
    width: 56px;
    height: 56px;
    line-height: 1;
    cursor: pointer;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.listing-gallery-arrow:focus,.listing-gallery-arrow:hover,button.listing-lightbox-close:focus,button.listing-lightbox-close:hover{
    background: unset!important;
    outline: unset;
}
button.listing-lightbox-close{
    font-size: 56px !important;
    padding: 0px;
}

.listing-gallery-arrow span {
    display: block;
    font-size: 72px;
    font-weight: 700;
    line-height: 56px;
}

.listing-gallery-arrow-prev {
    left: 12px;
}

.listing-gallery-arrow-next {
    right: 12px;
}

.listing-gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.listing-gallery-thumb {
    border: 2px solid transparent;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.listing-gallery-thumb.is-active {
    border-color: #000;
    overflow: hidden;
    border-radius: 0px;
    border-width: 1px;
}

.listing-gallery-thumb img {
    display: block;
    width: 88px;
    height: 88px;
    object-fit: cover;
}

.listing-lightbox[hidden] {
    display: none !important;
}

.listing-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.listing-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.85);
}

.listing-lightbox-dialog {
    position: absolute;
    z-index: 2;
    width: min(90vw, 1200px);
    margin: 4vh auto;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.listing-lightbox-stage {
    position: relative;
    width: fit-content;
    height: 100%;
}

.listing-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    object-fit: contain;
}

button.listing-lightbox-close {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 10;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 48px!important;
    line-height: 0;
    cursor: pointer;
}
/* end slideshow */
select#media-attachment-filters {
    width: 100%;
    max-width: 100%;
}
.fas::before,
.fa-solid::before {
    content: var(--fa);
}
.drts-search-form-field .fas:before {
    content: " " !important;
    width: 14px;
    height:14px;
    display:block;
}