/*
Theme Name: eMarket Directory
Theme URI: https://emarket.ie
Template: classipress
Author: eMarket.ie
Author URI: https://emarket.ie
Description: Child theme of ClassiPress for emarket.ie — an Irish business directory. Adds eMarket branding, a restructured front page (typed hero, dual calls to action, A–Z browse, live directory stats), and a professional navy-and-gold visual identity. All listing, membership, and payment functionality is inherited from ClassiPress.
Version: 11.18.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: emarket
*/

/* ==================================================
   1. Design tokens
   ================================================== */
:root{
  --emkt-navy:        #17324B;
  --emkt-navy-dark:   #0F2436;
  --emkt-navy-soft:   #234563;
  --emkt-gold:        #C8963E;
  --emkt-gold-dark:   #A87A2E;
  --emkt-paper:       #E9E4D6;
  --emkt-paper-light: #F4F1E8;
  --emkt-ink:         #20242A;
  --emkt-ink-soft:    #4A5158;
  --emkt-line:        #D8D2C0;
  --emkt-white:       #FFFFFF;
  --emkt-green:       #3C6E47;
  --emkt-radius:      3px;
  --emkt-font-display: "Zilla Slab", Georgia, serif;
  --emkt-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==================================================
   2. Base typography
   ================================================== */
body,
.site-content,
p, li, td, input, textarea, select, button{
  font-family: var(--emkt-font-body);
  color: var(--emkt-ink);
}
body{ background: var(--emkt-paper-light); }

h1, h2, h3, h4, h5,
.entry-title,
.page-title,
.widget-title{
  font-family: var(--emkt-font-display);
  color: var(--emkt-navy);
  font-weight: 600;
  line-height: 1.18;
}

a{ color: var(--emkt-navy); }
a:hover, a:focus{ color: var(--emkt-gold-dark); }

:focus-visible{ outline: 3px solid var(--emkt-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==================================================
   3. Buttons
   ================================================== */
/*
 * ClassiPress puts a colour-scheme class on <body> (.theme-red,
 * .theme-blue, .theme-custom …) and styles buttons as
 * `.theme-red .button` — specificity 0,2,0. Plain `.button` here
 * would lose, so colour rules are prefixed with
 * `body[class*="theme-"]` (0,2,1) to win against every scheme
 * without hardcoding which one is active.
 */
.button,
button.button,
input[type="submit"],
.btn{
  font-family: var(--emkt-font-body);
  font-weight: 600;
  border-radius: var(--emkt-radius);
  transition: background 0.15s ease, color 0.15s ease;
}

body[class*="theme-"] .button,
body[class*="theme-"] button.button,
body[class*="theme-"] input[type="submit"],
body[class*="theme-"] .btn{
  background-color: var(--emkt-navy);
  border-color: var(--emkt-navy);
  color: var(--emkt-white);
}
body[class*="theme-"] .button:hover,
body[class*="theme-"] .button:focus,
body[class*="theme-"] input[type="submit"]:hover{
  background-color: var(--emkt-navy-dark);
  border-color: var(--emkt-navy-dark);
  color: var(--emkt-white);
}

body[class*="theme-"] .button.primary{
  background-color: var(--emkt-navy);
  border-color: var(--emkt-navy);
  color: var(--emkt-white);
}
body[class*="theme-"] .button.primary:hover{
  background-color: var(--emkt-navy-dark);
  border-color: var(--emkt-navy-dark);
}

body[class*="theme-"] .button.hollow{
  background-color: transparent;
  border-color: var(--emkt-navy);
  color: var(--emkt-navy);
}
body[class*="theme-"] .button.hollow:hover{
  background-color: var(--emkt-navy);
  color: var(--emkt-white);
}

/* Gold primary call to action. */
body[class*="theme-"] .button.emkt-btn-primary,
.emkt-btn-primary,
.button.emkt-btn-primary{
  background-color: var(--emkt-gold);
  border-color: var(--emkt-gold);
  color: var(--emkt-navy-dark);
}
body[class*="theme-"] .button.emkt-btn-primary:hover,
.emkt-btn-primary:hover,
.button.emkt-btn-primary:hover{
  background-color: var(--emkt-gold-dark);
  border-color: var(--emkt-gold-dark);
  color: var(--emkt-white);
}

/* Outlined secondary CTA, used on the dark hero. */
body[class*="theme-"] .button.hollow.emkt-btn-secondary,
.emkt-btn-secondary,
.button.hollow.emkt-btn-secondary{
  background-color: transparent;
  border-color: var(--emkt-white);
  color: var(--emkt-white);
}
body[class*="theme-"] .button.hollow.emkt-btn-secondary:hover,
.emkt-btn-secondary:hover,
.button.hollow.emkt-btn-secondary:hover{
  background-color: var(--emkt-white);
  color: var(--emkt-navy);
}

/* Remaining scheme-coloured accents. */
body[class*="theme-"] a{ color: var(--emkt-navy); }
body[class*="theme-"] a:hover,
body[class*="theme-"] a:focus{ color: var(--emkt-gold-dark); }
body[class*="theme-"] .badge,
body[class*="theme-"] .button-group.primary .button{
  background-color: var(--emkt-navy);
  border-color: var(--emkt-navy);
  color: var(--emkt-white);
}
body[class*="theme-"] .breadcrumbs a{ color: var(--emkt-ink-soft); }
body[class*="theme-"] .breadcrumbs a:hover{ color: var(--emkt-gold-dark); }
body[class*="theme-"] .menu .active > a{
  background-color: transparent;
  color: var(--emkt-gold);
}
body[class*="theme-"] .accordion-title{ color: var(--emkt-navy); }

/* Header links must stay light on the navy bars. */
body[class*="theme-"] #top-bar-first a,
body[class*="theme-"] #top-bar-primary a{ color: var(--emkt-paper-light); }
body[class*="theme-"] #top-bar-first a:hover,
body[class*="theme-"] #top-bar-primary a:hover{ color: var(--emkt-gold); }
body[class*="theme-"] .site-footer a{ color: var(--emkt-paper-light); }
body[class*="theme-"] .site-footer a:hover{ color: var(--emkt-gold); }

/* ==================================================
   4. Header & navigation
   ================================================== */
#top-bar-first,
.top-bar#top-bar-first{
  background: var(--emkt-navy-dark);
  color: var(--emkt-paper-light);
  font-size: 0.85rem;
}
#top-bar-first a{ color: var(--emkt-paper-light); }
#top-bar-first a:hover{ color: var(--emkt-gold); }

#top-bar-primary,
.top-bar#top-bar-primary{
  background: var(--emkt-navy);
  border-bottom: 3px solid var(--emkt-gold);
}
#top-bar-primary a,
#top-bar-primary .menu > li > a{
  color: var(--emkt-paper-light);
  font-weight: 500;
}
#top-bar-primary a:hover,
#top-bar-primary .menu > li > a:hover{ color: var(--emkt-gold); }

#top-bar-secondary,
.top-bar#top-bar-secondary{
  background: var(--emkt-paper);
  border-bottom: 1px solid var(--emkt-line);
}
#top-bar-secondary a{ color: var(--emkt-ink); font-weight: 500; }
#top-bar-secondary a:hover{ color: var(--emkt-gold-dark); }

.site-title a,
.site-branding a{ color: var(--emkt-white); font-family: var(--emkt-font-display); }

.title-bar,
.mobile-title-bar{ background: var(--emkt-navy); }

/* ==================================================
   5. Front page hero
   ================================================== */
.home-cover.emkt-hero,
.home-cover{
  background-color: var(--emkt-navy);
  position: relative;
  padding: 64px 0 56px;
}
/*
 * Darkening for the hero.
 *
 * Deliberately NOT a ::before overlay. An absolutely positioned
 * overlay sits in the stacking order above the buttons, search
 * fields and A–Z row, which made them unclickable and untypeable.
 * An inset box-shadow paints the same darkening inside the element
 * itself, so there is no overlay element at all and nothing that can
 * intercept a click.
 */
.home-cover.emkt-hero{
  box-shadow: inset 0 0 0 9999px rgba(15,36,54,0.88);
}

.emkt-hero-title,
.home-cover .entry-title{
  color: var(--emkt-white);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  margin-bottom: 0.3em;
}
.home-cover .entry-title .element{
  color: var(--emkt-gold);
  border-right: 2px solid var(--emkt-gold);
  padding-right: 4px;
}

.emkt-hero-summary,
.home-cover .summary{
  color: var(--emkt-paper-light);
  font-size: 1.1rem;
  max-width: 60ch;
  margin: 0 auto 1.4em;
}
.emkt-hero-summary p{ color: var(--emkt-paper-light); }

.emkt-hero-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 28px;
}

.emkt-hero-search{ max-width: 720px; margin: 0 auto 8px; }
.emkt-hero-search input[type="text"],
.emkt-hero-search input[type="search"],
.emkt-hero-search select{
  border-radius: var(--emkt-radius);
  border: 1px solid var(--emkt-line);
}

/* ==================================================
   6. A–Z browse row
   ================================================== */
.emkt-az-row{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin: 22px auto 4px;
  max-width: 860px;
}
.emkt-az-row a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #F4F1E8;
  color: var(--emkt-paper-light);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 3px;
  border-radius: var(--emkt-radius);
}
.emkt-az-row a:hover{
  background: rgba(255,255,255,0.18);
  border-color: #C8963E;
  border-color: var(--emkt-gold);
  color: #FFFFFF;
}
.emkt-az-row a.is-active{
  background: #C8963E;
  background: var(--emkt-gold);
  border-color: #C8963E;
  border-color: var(--emkt-gold);
  color: #0F2436;
  color: var(--emkt-navy-dark);
}

/* A–Z on light archive pages rather than the dark hero. */
.archive .emkt-az-row a,
.tax-ad_cat .emkt-az-row a{
  color: var(--emkt-ink-soft);
  background: var(--emkt-white);
  border-color: var(--emkt-line);
}
.archive .emkt-az-row a:hover,
.tax-ad_cat .emkt-az-row a:hover{
  color: var(--emkt-navy);
  border-color: var(--emkt-gold);
}
.archive .emkt-az-row a.is-active,
.tax-ad_cat .emkt-az-row a.is-active{
  background: var(--emkt-navy);
  border-color: var(--emkt-navy);
  color: var(--emkt-white);
}

/* ==================================================
   Trust stats band
   ================================================== */
/*
 * A white card of figures sitting across the boundary between the
 * page background and the navy band beneath it, so it reads as
 * floating over both.
 */
.emkt-stats{
  position: relative;
  padding: 46px 0 0;
  background: #F4F1E8;
  background: var(--emkt-paper-light);
}
.emkt-stats::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 96px;
  background: #17324B;
  background: var(--emkt-navy);
  z-index: 0;
}
.emkt-stats > .row{ position: relative; z-index: 1; }

.emkt-stats-heading{
  text-align: center;
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  color: #17324B;
  color: var(--emkt-navy);
  margin: 0 0 26px;
}

.emkt-stats-card{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: #FFFFFF;
  background: var(--emkt-white);
  border: 1px solid #17324B;
  border: 1px solid var(--emkt-navy);
  border-radius: 20px;
  padding: 30px 18px;
  box-shadow: 0 4px 18px rgba(15,36,54,0.10);
}

.emkt-stats-card .emkt-stat{
  flex: 1 1 150px;
  max-width: 230px;
  text-align: center;
  padding: 10px 12px;
}

.emkt-stat-icon{
  display: block;
  margin: 0 auto 10px;
  /*
   * No colour here. The icon takes its colour from the disc around
   * it via currentColor. Forcing green meant the icon on the green
   * disc was green on green and disappeared completely.
   */
}

.emkt-stat-number{
  display: block;
  font-family: var(--emkt-font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 700;
  color: #20242A;
  color: var(--emkt-ink);
  line-height: 1.1;
}

.emkt-stat-label{
  display: block;
  font-size: 0.85rem;
  color: #4A5158;
  color: var(--emkt-ink-soft);
  margin-top: 6px;
  line-height: 1.35;
}

@media screen and (max-width: 640px){
  .emkt-stats{ padding-top: 34px; }
  .emkt-stats::after{ height: 60px; }
  .emkt-stats-card{ padding: 18px 8px; border-radius: 14px; }
  .emkt-stats-card .emkt-stat{ flex: 1 1 45%; max-width: 50%; }
}

/* ==================================================
   9. Section headings
   ================================================== */
.home-widget-head-wrap{ text-align: center; margin-bottom: 26px; }
.home-widget-head-wrap h2,
.home-widget-head-wrap .widget-title{
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  color: #17324B;
  color: var(--emkt-navy);
  margin: 0 0 6px;
}
.home-widget-description{
  color: #4A5158;
  color: var(--emkt-ink-soft);
  margin: 0;
  max-width: none;
}

/* ==================================================
   10. Category tiles
   ================================================== */
.cat-item,
.category-item,
.tiles .tile{
  background: #FFFFFF;
  background: var(--emkt-white);
  border: 1px solid #D8D2C0;
  border: 1px solid var(--emkt-line);
  border-left: 4px solid #17324B;
  border-left: 4px solid var(--emkt-navy);
  border-radius: 3px;
}
.cat-item:hover,
.tiles .tile:hover{
  border-left-color: #C8963E;
  border-left-color: var(--emkt-gold);
}
.cat-item a,
.tiles .tile a{
  color: #17324B;
  color: var(--emkt-navy);
  font-weight: 600;
}

/* ==================================================
   11. Sidebar & widgets
   ================================================== */
.widget{
  background: #FFFFFF;
  background: var(--emkt-white);
  border: 1px solid #D8D2C0;
  border: 1px solid var(--emkt-line);
  border-radius: 3px;
}
.widget .widget-title{
  font-family: var(--emkt-font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #4A5158;
  color: var(--emkt-ink-soft);
  border-bottom: 1px solid #D8D2C0;
  border-bottom: 1px solid var(--emkt-line);
  padding-bottom: 8px;
  margin-bottom: 12px;
  text-transform: none;
}

/* ==================================================
   12. Page covers & breadcrumbs
   ================================================== */
.page-cover,
.entry-cover:not(.home-cover):not(.item-cover):not(.emkt-fcard-cover){
  background-color: #E9E4D6;
  background-color: var(--emkt-paper);
  border-bottom: 1px solid #D8D2C0;
  border-bottom: 1px solid var(--emkt-line);
}
.page-cover .page-title,
.page-cover .entry-title{
  color: #17324B;
  color: var(--emkt-navy);
}
.breadcrumb,
.breadcrumbs{
  font-size: 0.85rem;
  color: #4A5158;
  color: var(--emkt-ink-soft);
  background: transparent;
}
.breadcrumb a{ color: var(--emkt-ink-soft); }
.breadcrumb a:hover{ color: var(--emkt-gold-dark); }

/* ==================================================
   13. Forms
   ================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea{
  border: 1px solid #D8D2C0;
  border: 1px solid var(--emkt-line);
  border-radius: 3px;
  background: #F4F1E8;
  background: var(--emkt-paper-light);
  font-family: var(--emkt-font-body);
  box-shadow: none;
}
input:focus, select:focus, textarea:focus{
  border-color: #C8963E;
  border-color: var(--emkt-gold);
  background: #FFFFFF;
  box-shadow: none;
}
label{
  font-weight: 600;
  color: #20242A;
  color: var(--emkt-ink);
}

/* ==================================================
   14. Footer
   ================================================== */
/*
 * The parent sets `#footer { background-color: #313131 }`. An ID
 * selector outranks a class, so the background must be set via
 * `#footer` here or the footer stays charcoal.
 */
#footer.site-footer,
.site-footer{
  background-color: #0F2436;
  background-color: var(--emkt-navy-dark);
  color: #F4F1E8;
  color: var(--emkt-paper-light);
  border-top: 3px solid #C8963E;
  border-top: 3px solid var(--emkt-gold);
  padding: 44px 0 20px;
}
.site-footer a,
.site-footer .widget a,
.site-footer .widget-footer a{ color: var(--emkt-paper-light); }
.site-footer a:hover{ color: var(--emkt-gold); }

/*
 * ClassiPress wraps footer widgets in .widget-footer (not .widget),
 * so both are targeted here.
 */
.site-footer .widget,
.site-footer .widget-footer{
  background: transparent;
  border: 0;
  padding: 0 12px 22px;
  color: var(--emkt-paper-light);
}
.site-footer .widget p,
.site-footer .widget-footer p,
.site-footer .widget-footer li{
  color: var(--emkt-paper-light);
  font-size: 0.92rem;
}
.site-footer .widget-footer ul{ list-style: none; margin: 0; padding: 0; }
.site-footer .widget-footer li{ margin-bottom: 7px; }
.site-footer .widget-title{
  font-family: var(--emkt-font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 8px;
  margin-bottom: 12px;
  text-transform: none;
}
.emkt-footer-hint{
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.45) !important;
  margin-top: 14px;
  font-style: italic;
}
.site-footer .divider{
  border-color: rgba(255,255,255,0.12);
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 18px 0;
}
.site-footer .copyright{
  color: rgba(255,255,255,0.6);
  font-size: 0.82rem;
}
.site-footer .footer-bottom a{ color: rgba(255,255,255,0.75); }
.site-footer .footer-bottom a:hover{ color: var(--emkt-gold); }


/* ==================================================
   15. Listing cards (shared by featured + latest)
   ================================================== */
.emkt-fcard{
  position: relative;
  background: #FFFFFF;
  background: var(--emkt-white);
  border: 1px solid #D8D2C0;
  border: 1px solid var(--emkt-line);
  border-radius: 14px;
  overflow: hidden;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(23,50,75,0.07);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.emkt-fcard:hover{
  box-shadow: 0 6px 18px rgba(23,50,75,0.14);
  transform: translateY(-3px);
}

/* Cover image */
.emkt-fcard-cover-link{ display: block; }
.emkt-fcard-cover{
  height: 170px;
  background-size: cover;
  background-position: center;
  background-color: #E9E4D6;
  background-color: var(--emkt-paper);
}

/* Circular logo badge, centred and overlapping the cover */
.emkt-fcard-logo{
  position: relative;
  width: 96px;
  height: 96px;
  margin: -48px auto 0;
  border-radius: 50%;
  overflow: hidden;
  background: #FFFFFF;
  border: 4px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(23,50,75,0.18);
  z-index: 2;
}
.emkt-fcard-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #FFFFFF;
}

.emkt-fcard-body{
  padding: 14px 20px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.emkt-fcard-body.has-logo{ padding-top: 10px; }

.emkt-fcard-title{
  font-size: 1.15rem;
  margin: 0 0 12px;
  line-height: 1.25;
}
.emkt-fcard-title a{
  color: #17324B;
  color: var(--emkt-navy);
}
.emkt-fcard-title a:hover{
  color: #A87A2E;
  color: var(--emkt-gold-dark);
}

/* Category chips */
.emkt-fcard-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
.emkt-fcard-tags .emkt-fcard-tag{
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 4px;
  background: #17324B;
  background: var(--emkt-navy);
  color: #FFFFFF !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emkt-fcard-tags .emkt-fcard-tag:hover{
  background: #0F2436;
  background: var(--emkt-navy-dark);
  color: #FFFFFF !important;
}

/* Address */
.emkt-fcard-address{
  font-size: 0.86rem;
  line-height: 1.45;
  color: #4A5158;
  color: var(--emkt-ink-soft);
  margin: 0 0 16px;
  max-width: none;
}
.emkt-fcard-address .fa{
  color: #3C6E47;
  color: var(--emkt-green);
  margin-right: 5px;
}

/* Stacked action buttons */
.emkt-fcard-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.emkt-fcard-actions .emkt-fcard-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid #C9D3DD;
  background: #FFFFFF;
  font-size: 0.92rem;
  font-weight: 600;
  color: #17324B;
  color: var(--emkt-navy);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.emkt-fcard-actions .emkt-fcard-btn .fa{
  position: absolute;
  left: 16px;
  color: #17324B;
  color: var(--emkt-navy);
  font-size: 1rem;
}
.emkt-fcard-actions .emkt-fcard-btn:hover{
  background: #F4F1E8;
  background: var(--emkt-paper-light);
  border-color: #17324B;
  border-color: var(--emkt-navy);
  color: #17324B;
  color: var(--emkt-navy);
}

/* Primary "Shop now" button */
.emkt-fcard-actions .emkt-fcard-btn--solid{
  background: #17324B;
  background: var(--emkt-navy);
  border-color: #17324B;
  border-color: var(--emkt-navy);
  color: #FFFFFF !important;
}
.emkt-fcard-actions .emkt-fcard-btn--solid .fa{ color: #FFFFFF; }
.emkt-fcard-actions .emkt-fcard-btn--solid:hover{
  background: #C8963E;
  background: var(--emkt-gold);
  border-color: #C8963E;
  border-color: var(--emkt-gold);
  color: #0F2436 !important;
}
.emkt-fcard-actions .emkt-fcard-btn--solid:hover .fa{ color: #0F2436; }

/* Slider spacing so cards don't touch and shadows aren't clipped */
.featured-listings-slider .slick-slide{ padding: 10px; }
.featured-listings-slider .items-featured{ margin: 0 -10px; }
.featured-listings-slider .slick-track{ display: flex; align-items: stretch; }
.featured-listings-slider .slick-slide > div{ height: 100%; }

@media screen and (max-width: 640px){
  .emkt-fcard-cover{ height: 150px; }
  .emkt-fcard-logo{ width: 82px; height: 82px; margin-top: -41px; }
  .emkt-fcard-title{ font-size: 1.05rem; }
}

/*
 * ClassiPress renders the featured slider with inline `opacity: 0`
 * and fades it in with JavaScript after Slick initialises. If that
 * script fails to run the whole featured section stays invisible,
 * so visibility is forced here. The fade-in is purely decorative.
 */
.featured-listings-slider .items-featured{ opacity: 1 !important; }

/* Featured ribbon, price and excerpt on the shared listing card */
.emkt-fcard-ribbon{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 5px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  background: #C8963E;
  background: var(--emkt-gold);
  color: #0F2436;
  color: var(--emkt-navy-dark);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.emkt-fcard .emkt-fcard-price{
  margin: 0 0 12px;
  text-align: center;
}
.emkt-fcard .emkt-fcard-price .tag-head,
.emkt-fcard .emkt-fcard-price .post-price{
  display: inline-block;
  background: none;
  padding: 0;
  font-family: var(--emkt-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #17324B;
  color: var(--emkt-navy);
}
.emkt-fcard .emkt-fcard-price .tag-head::before,
.emkt-fcard .emkt-fcard-price .tag-head::after{ display: none; }

.emkt-fcard-excerpt{
  font-size: 0.88rem;
  line-height: 1.5;
  color: #4A5158;
  color: var(--emkt-ink-soft);
  margin: 0 0 16px;
  max-width: none;
}

/* Equal-height cards in the Foundation grid used by Latest Listings */
.listing-wrap > .column{ display: flex; }
.listing-wrap > .column > .emkt-fcard{ width: 100%; }

/* Neutralise parent list-view rules so the card keeps its own layout */
.emkt-fcard.display-list .row,
.emkt-fcard.display-grid .row{ display: block; margin: 0; }

/*
 * ClassiPress renders the featured slider with inline `opacity: 0`
 * and fades it in with JavaScript after Slick initialises. If that
 * script fails to run the whole featured section stays invisible,
 * so visibility is forced here. The fade-in is purely decorative.
 */
.featured-listings-slider .items-featured{ opacity: 1 !important; }

/* ==================================================
   16. Responsive
   ================================================== */
@media screen and (max-width: 640px){
  .home-cover.emkt-hero{ padding: 44px 0 38px; }
  .emkt-hero-ctas{ flex-direction: column; align-items: stretch; }
  .emkt-hero-ctas .button{ width: 100%; }
  .emkt-az-row{ gap: 3px; }
  .emkt-az-row a{ min-width: 27px; height: 27px; font-size: 0.78rem; }
}

/* ==================================================
   17. Listing card fixes over ClassiPress defaults
   ================================================== */
/*
 * The cover div also carries ClassiPress's .entry-cover class, which
 * applies `padding: 2em 0`. That is added on top of our fixed height
 * and makes the image band far taller than intended, so it is reset.
 */
.emkt-fcard .emkt-fcard-cover,
.emkt-fcard .emkt-fcard-cover.entry-cover{
  padding: 0;
  height: 170px;
  min-height: 0;
}

/*
 * Graceful fallback for the featured slider.
 *
 * Slick adds .slick-initialized once it has run. If it never runs
 * (a JavaScript error, a conflicting plugin, scripts deferred too
 * aggressively) the slides would otherwise stack at full width, one
 * enormous card per row. Laying them out as a plain responsive grid
 * means the section still looks correct without any JavaScript.
 */
.featured-listings-slider .items-featured:not(.slick-initialized){
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: stretch;
}
.featured-listings-slider .items-featured:not(.slick-initialized) > .item-single-featured,
.featured-listings-slider .items-featured:not(.slick-initialized) > div{
  flex: 1 1 280px;
  max-width: 340px;
  margin: 0;
}

/*
 * Cap the card width and centre it.
 *
 * Slick sizes each slide to fill the track, so when there is only
 * one featured listing that single card would otherwise stretch the
 * full page width. Capping it keeps a lone card the same size as one
 * in a full row, and does no harm when the track is busy since each
 * slide is already narrower than the cap.
 */
.emkt-fcard{
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

/* In the Foundation grid the column already sets the width. */
.listing-wrap > .column > .emkt-fcard{ max-width: 100%; }

/* ==================================================
   18. Hero contrast fixes
   ================================================== */
/*
 * The broad `body[class*="theme-"] a` rule in section 3 (needed to
 * beat ClassiPress's colour-scheme classes) also caught the A–Z
 * links, painting navy letters onto the navy hero. These rules carry
 * the same theme prefix so they win it back.
 */
body[class*="theme-"] .emkt-az-row a{
  color: #F4F1E8;
  color: var(--emkt-paper-light);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
}
body[class*="theme-"] .emkt-az-row a:hover,
body[class*="theme-"] .emkt-az-row a:focus{
  color: #FFFFFF;
  background: rgba(255,255,255,0.22);
  border-color: #C8963E;
  border-color: var(--emkt-gold);
}
body[class*="theme-"] .emkt-az-row a.is-active{
  color: #0F2436;
  color: var(--emkt-navy-dark);
  background: #C8963E;
  background: var(--emkt-gold);
  border-color: #C8963E;
  border-color: var(--emkt-gold);
}

/* On light archive pages the row sits on paper, not navy. */
body[class*="theme-"].archive .emkt-az-row a,
body[class*="theme-"].tax-ad_cat .emkt-az-row a{
  color: #4A5158;
  color: var(--emkt-ink-soft);
  background: #FFFFFF;
  border-color: #D8D2C0;
  border-color: var(--emkt-line);
}
body[class*="theme-"].archive .emkt-az-row a.is-active,
body[class*="theme-"].tax-ad_cat .emkt-az-row a.is-active{
  color: #FFFFFF;
  background: #17324B;
  background: var(--emkt-navy);
  border-color: #17324B;
}

/*
 * Search bar. The hero has an absolutely positioned scrim behind its
 * content; giving the search wrapper its own stacking position makes
 * certain nothing can sit over the inputs and swallow clicks.
 */
.emkt-hero-search{
  position: relative;
  z-index: 3;
}
.emkt-hero-search .search-form input[type="search"],
.emkt-hero-search .search-form input[type="text"],
.emkt-hero-search .search-form select{
  background-color: #FFFFFF;
  color: #20242A;
  color: var(--emkt-ink);
  border: 1px solid #D8D2C0;
  border: 1px solid var(--emkt-line);
  height: auto;
  padding: 12px 14px;
  margin-bottom: 0;
}
.emkt-hero-search .search-form input::placeholder{
  color: #737B84;
  opacity: 1;
}
.emkt-hero-search .search-form input:focus,
.emkt-hero-search .search-form select:focus{
  border-color: #C8963E;
  border-color: var(--emkt-gold);
  background-color: #FFFFFF;
}
.emkt-hero-search .search-form .button{
  padding: 12px 18px;
  margin-bottom: 0;
}
.emkt-hero-search .searchbar-shortcode{
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 14px 12px;
}

/* ==================================================
   19. Hero content must always be interactive
   ================================================== */
/*
 * ROOT CAUSE of the unclickable hero.
 *
 * ClassiPress applies its own full-size overlay to any cover that
 * has a background image:
 *
 *   .entry-cover.has-image:after {
 *     position: absolute; top:0; right:0; bottom:0; left:0;
 *     background: rgba(0,0,0,0.35);
 *     z-index: 5;
 *   }
 *
 * Our hero element carries `entry-cover has-image`, so that overlay
 * covers the buttons, search fields and A-Z row at z-index 5 and
 * swallows every click and keystroke.
 *
 * Two defences, because either alone is enough but both are cheap:
 *   1. Make every such overlay inert to input.
 *   2. Lift the hero's own content above z-index 5.
 */
.home-cover.emkt-hero::before,
.home-cover.emkt-hero::after,
.home-cover.emkt-hero.has-image::after,
.home-cover.emkt-hero .entry-cover::before,
.home-cover.emkt-hero .entry-cover::after,
.entry-cover.has-image::after{
  pointer-events: none !important;
}

/* Content must clear the parent's z-index: 5 overlay. */
.home-cover.emkt-hero > .row,
.home-cover.emkt-hero .entry-header,
.home-cover.emkt-hero .emkt-hero-ctas,
.home-cover.emkt-hero .emkt-hero-search,
.home-cover.emkt-hero .emkt-az-row,
.home-cover.emkt-hero .search-form,
.home-cover.emkt-hero .searchbar-shortcode{
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* Make sure the controls themselves are reachable and enabled. */
.home-cover.emkt-hero a,
.home-cover.emkt-hero button,
.home-cover.emkt-hero input,
.home-cover.emkt-hero select{
  position: relative;
  z-index: 11;
  pointer-events: auto;
}

/* County dropdown in the search bar */
.emkt-hero-search .search-form select.emkt-county-select,
.search-form select.emkt-county-select{
  background-color: #FFFFFF;
  color: #20242A;
  color: var(--emkt-ink);
}

/* ==================================================
   20. Footer widget alignment
   ================================================== */
/*
 * THE ACTUAL STRUCTURE.
 *
 * ClassiPress's footer is a "tiled" sidebar. Widgets are not direct
 * children of .footer-top — parts/tiles.php wraps them:
 *
 *   <div class="footer-top row">
 *     <div class="tiled-row row">
 *       <div class="column medium-N">     <- width lives HERE
 *         <aside class="widget-footer column">…</aside>
 *
 * The medium-N value comes from each widget's own "Size" setting in
 * Appearance > Widgets. A small size produces a narrow column and the
 * text wraps a word (or a character) per line.
 *
 * Earlier revisions of this section targeted
 * `.footer-top > .widget-footer`, which never matched anything
 * because of the two wrapper divs. Everything below uses descendant
 * selectors so it works with the tiled markup and with a plain
 * sidebar.
 */

/* The tile row itself is a normal Foundation row. */
.site-footer .footer-top .tiled-row{
  display: block;
  margin-left: -0.625rem;
  margin-right: -0.625rem;
}
.site-footer .footer-top .tiled-row::after{
  content: "";
  display: table;
  clear: both;
}

/*
 * Force an even four-across layout regardless of the per-widget Size
 * setting, so the footer cannot collapse into slivers.
 */
.site-footer .footer-top .tiled-row > .column,
.site-footer .footer-top .tiled-row > .columns{
  float: left !important;
  display: block !important;
  width: 25% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 0.625rem !important;
  box-sizing: border-box;
}

/* The widget itself fills its tile. */
.site-footer .footer-top .widget-footer{
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 0 26px !important;
  box-sizing: border-box;
}

/* Never break words mid-way. */
.site-footer .footer-top,
.site-footer .footer-top *{
  word-break: normal !important;
  overflow-wrap: normal;
  hyphens: none;
}

.site-footer .widget-footer .widget-title{
  font-size: 0.95rem;
  margin-bottom: 12px;
  white-space: normal;
}

/* Two across on tablets, one on phones. */
@media screen and (max-width: 900px){
  .site-footer .footer-top .tiled-row > .column,
  .site-footer .footer-top .tiled-row > .columns{
    width: 50% !important;
  }
}
@media screen and (max-width: 560px){
  .site-footer .footer-top .tiled-row > .column,
  .site-footer .footer-top .tiled-row > .columns{
    width: 100% !important;
    float: none !important;
  }
}

/* ==================================================
   21. Listing contact icons
   ================================================== */
.emkt-fcard-contacts{
  display: block;
  margin: 0 0 14px;
  text-align: center;
}
.emkt-fcard-contacts .emkt-fcard-contact{
  display: inline-block;
  vertical-align: middle;
  width: 36px;
  height: 36px;
  line-height: 34px;
  margin: 0 3px;
  border: 1px solid #D8D2C0;
  border: 1px solid var(--emkt-line);
  border-radius: 50%;
  color: #17324B;
  color: var(--emkt-navy);
  text-align: center;
}
.emkt-fcard-contacts .emkt-fcard-contact svg{
  vertical-align: middle;
}
.emkt-fcard-contacts .emkt-fcard-contact:hover{
  background: #17324B;
  background: var(--emkt-navy);
  border-color: #17324B;
  color: #FFFFFF;
}
.emkt-fcard-contacts .emkt-contact-facebook:hover{ background:#1877F2; border-color:#1877F2; color:#fff; }
.emkt-fcard-contacts .emkt-contact-instagram:hover{ background:#C13584; border-color:#C13584; color:#fff; }
.emkt-fcard-contacts .emkt-contact-phone:hover,
.emkt-fcard-contacts .emkt-contact-email:hover{
  background: #3C6E47;
  background: var(--emkt-green);
  border-color: #3C6E47;
  color: #FFFFFF;
}

/* ==================================================
   22. Single listing photo gallery slider
   ================================================== */
.emkt-gallery{
  position: relative;
  margin-bottom: 8px;
}

.emkt-gallery-main{
  background: #0F2436;
  background: var(--emkt-navy-dark);
  border-radius: 6px;
  overflow: hidden;
}
/*
 * Fill the full width of the box.
 *
 * height:auto rather than a fixed height with object-fit, so the
 * image spans the whole width and the box grows to match its aspect
 * ratio. No letterbox bars at the sides and no cropping, which
 * matters for listing photos that are really banners with a logo or
 * phone number near the edge.
 */
.emkt-gallery-main .emkt-gallery-slide img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  background: #0F2436;
}
.emkt-gallery-caption{
  margin: 0;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: #F4F1E8;
  color: var(--emkt-paper-light);
  background: rgba(0,0,0,0.35);
  text-align: center;
  max-width: none;
}

/* Thumbnail strip */
.emkt-gallery-thumbs{
  margin: 10px -5px 0;
}
.emkt-gallery-thumbs .emkt-gallery-thumb{
  padding: 0 5px;
  cursor: pointer;
}
.emkt-gallery-thumbs .emkt-gallery-thumb img{
  display: block;
  width: 100%;
  height: 74px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid transparent;
  opacity: 0.65;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.emkt-gallery-thumbs .slick-current .emkt-gallery-thumb img,
.emkt-gallery-thumbs .emkt-gallery-thumb img:hover{
  opacity: 1;
  border-color: #C8963E;
  border-color: var(--emkt-gold);
}

.emkt-gallery-count{
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: #4A5158;
  color: var(--emkt-ink-soft);
  text-align: right;
}
.emkt-gallery-count .fa{ margin-right: 5px; }

/* Arrows on the main slider */
.emkt-gallery-main .slick-prev,
.emkt-gallery-main .slick-next{
  z-index: 3;
  width: 40px;
  height: 40px;
}
.emkt-gallery-main .slick-prev{ left: 12px; }
.emkt-gallery-main .slick-next{ right: 12px; }
/*
 * The arrow mark itself is drawn in section 69 for every slider on
 * the site. This block used to set a font-size and colour for a glyph
 * that came from slick-theme.css — which the theme dequeues — so
 * there was never anything here to colour.
 */

/* A single photo needs no slider chrome. */
.emkt-gallery.is-single .slick-prev,
.emkt-gallery.is-single .slick-next,
.emkt-gallery.is-single .slick-dots{ display: none !important; }

/* Before Slick runs, show only the first slide so the page does not
   flash a tall stack of images. */
.emkt-gallery-main:not(.slick-initialized) .emkt-gallery-slide:not(:first-child),
.emkt-gallery-thumbs:not(.slick-initialized) .emkt-gallery-thumb:nth-child(n+6){
  display: none;
}
.emkt-gallery-thumbs:not(.slick-initialized){
  display: flex;
  gap: 10px;
}
.emkt-gallery-thumbs:not(.slick-initialized) .emkt-gallery-thumb{
  flex: 1 1 0;
}

@media screen and (max-width: 640px){
  .emkt-gallery-thumbs .emkt-gallery-thumb img{ height: 56px; }
}

/* Slick's own wrappers must not constrain the image width. */
.emkt-gallery-main .slick-list,
.emkt-gallery-main .slick-track{ width: 100%; }
.emkt-gallery-main .slick-slide{ height: auto; }
.emkt-gallery-main .slick-slide > div{ width: 100%; }
.emkt-gallery-main .emkt-gallery-slide,
.emkt-gallery-main .emkt-gallery-slide a{
  display: block;
  width: 100%;
}

/* ==================================================
   23. Mobile title bar
   ================================================== */
/*
 * The mobile bar shows the site name as a text link. ClassiPress
 * styles it with `.title-bar-title a { color: #FFF }` (specificity
 * 0,1,1), but the broad `body[class*="theme-"] a` rule in section 3
 * is 0,1,2 and was overriding it with navy — dark text on a dark bar,
 * which reads as greyed out. Same root cause as the A–Z row.
 */
body[class*="theme-"] .title-bar,
.title-bar{
  background: #17324B;
  background: var(--emkt-navy);
  color: #FFFFFF;
  border-bottom: 2px solid #C8963E;
  border-bottom: 2px solid var(--emkt-gold);
}

body[class*="theme-"] .title-bar-title a,
body[class*="theme-"] .title-bar-title a:hover,
body[class*="theme-"] .title-bar-title a:focus,
body[class*="theme-"] .title-bar a,
.title-bar-title a{
  color: #FFFFFF !important;
  font-family: var(--emkt-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

/* A custom logo image, if one is set, must not be dimmed either. */
body[class*="theme-"] .title-bar .custom-logo-link img,
body[class*="theme-"] .title-bar img{
  opacity: 1 !important;
  filter: none !important;
  max-height: 40px;
  width: auto;
}

/* Hamburger icons need to be visible on the navy bar. */
body[class*="theme-"] .title-bar .menu-icon::after,
.title-bar .menu-icon::after{
  background: #FFFFFF;
  box-shadow: 0 7px 0 #FFFFFF, 0 14px 0 #FFFFFF;
}
body[class*="theme-"] .title-bar .menu-icon:hover::after{
  background: #C8963E;
  background: var(--emkt-gold);
  box-shadow: 0 7px 0 #C8963E, 0 14px 0 #C8963E;
}

/* Off-canvas drawer should match the brand, not default grey. */
body[class*="theme-"] .off-canvas{
  background: #0F2436;
  background: var(--emkt-navy-dark);
}
body[class*="theme-"] .off-canvas a,
body[class*="theme-"] .off-canvas .menu > li > a{
  color: #F4F1E8;
  color: var(--emkt-paper-light);
}
body[class*="theme-"] .off-canvas a:hover{
  color: #C8963E;
  color: var(--emkt-gold);
}

/* ==================================================
   24. Listing video embed
   ================================================== */
/*
 * Responsive 16:9 frame. aspect-ratio with a padding-top fallback so
 * older browsers still size it correctly rather than collapsing the
 * iframe to zero height.
 */
.emkt-video{
  position: relative;
  width: 100%;
  padding-top: 56.25%;          /* 16:9 fallback */
  background: #0F2436;
  background: var(--emkt-navy-dark);
  border-radius: 6px;
  overflow: hidden;
}
@supports (aspect-ratio: 16 / 9){
  .emkt-video{
    padding-top: 0;
    aspect-ratio: 16 / 9;
  }
}
.emkt-video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@supports (aspect-ratio: 16 / 9){
  .emkt-video iframe{ position: absolute; }
}

/*
 * Instagram embeds are portrait and include the caption/header chrome,
 * so a 16:9 frame would crop them badly. They also render on a white
 * card of their own, so no dark backdrop here.
 */
.emkt-video--instagram{
  padding-top: 125%;                 /* 4:5 fallback */
  background: #FFFFFF;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
@supports (aspect-ratio: 4 / 5){
  .emkt-video--instagram{
    padding-top: 0;
    aspect-ratio: 4 / 5;
  }
}

@media screen and (max-width: 560px){
  .emkt-video--instagram{
    padding-top: 150%;
    max-width: 100%;
  }
  @supports (aspect-ratio: 2 / 3){
    .emkt-video--instagram{
      padding-top: 0;
      aspect-ratio: 2 / 3;
    }
  }
}

/* ==================================================
   25. Video embed — mobile safeguards
   ================================================== */
/*
 * An aspect-ratio box collapses to zero height if anything upstream
 * leaves it without a resolved width, which is easy to hit inside
 * narrow mobile containers. These rules guarantee the frame always
 * has real dimensions.
 */
.emkt-video{
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 200px;      /* never collapse to nothing */
  max-width: 100%;
  box-sizing: border-box;
}
.emkt-video--instagram{
  min-height: 420px;
}

/* The widget wrapper must not clip or squeeze the embed. */
.emkt-listing-video-widget{
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}
.emkt-listing-video-widget .emkt-video iframe{
  max-width: 100%;
}

@media screen and (max-width: 640px){
  .emkt-video{
    min-height: 190px;
  }
  .emkt-video--instagram{
    min-height: 480px;
  }
  /* Some mobile browsers mis-size absolutely positioned iframes
     inside aspect-ratio boxes; pin all four edges explicitly. */
  .emkt-video iframe{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ==================================================
   26. Cookie consent banner
   ================================================== */
.emkt-cookie{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: #2B2B2B;
  color: #F0F0F0;
  border-top: 3px solid #C8963E;
  border-top: 3px solid var(--emkt-gold);
  box-shadow: 0 -2px 18px rgba(0,0,0,0.3);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.emkt-cookie.is-visible{ transform: translateY(0); }
.emkt-cookie[hidden]{ display: none; }
@media (prefers-reduced-motion: reduce){
  .emkt-cookie{ transition: none; }
}

/* Three columns: heading, explanation, actions. */
.emkt-cookie-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px 34px;
  flex-wrap: wrap;
}

.emkt-cookie-heading{
  margin: 0;
  flex: 0 0 auto;
  max-width: 260px;
  font-family: var(--emkt-font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  color: #FFFFFF;
}

.emkt-cookie-body{ flex: 1 1 320px; min-width: 0; }
.emkt-cookie-text{
  margin: 0;
  max-width: 70ch;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #DEDEDE;
}
.emkt-cookie-more{ margin: 4px 0 0; }
.emkt-cookie .emkt-cookie-more a{
  color: #E0A63F !important;
  font-size: 0.88rem;
  text-decoration: underline;
}

/* Actions as plain links, stacked, as in the reference design. */
.emkt-cookie-actions{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.emkt-cookie .emkt-cookie-link{
  background: none;
  border: 0;
  padding: 2px 0;
  font-family: var(--emkt-font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: #E0A63F;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.emkt-cookie .emkt-cookie-link:hover,
.emkt-cookie .emkt-cookie-link:focus{
  color: #FFFFFF;
  text-decoration: underline;
}

/* Settings panel */
.emkt-cookie-panel{
  max-width: 820px;
  margin: 0 auto;
  padding: 20px 22px 24px;
}
.emkt-cookie-panel[hidden]{ display: none; }
.emkt-cookie-panel .emkt-cookie-heading{
  max-width: none;
  margin-bottom: 14px;
}

.emkt-cookie-option{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.emkt-cookie-option strong{
  display: block;
  color: #FFFFFF;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.emkt-cookie-option span{
  display: block;
  color: #C9C9C9;
  font-size: 0.85rem;
  line-height: 1.45;
  max-width: 62ch;
}
.emkt-cookie-always{
  flex: 0 0 auto;
  color: #9FB0A4 !important;
  font-size: 0.8rem !important;
  font-weight: 700;
  white-space: nowrap;
  padding-top: 3px;
}

/* Toggle switch */
.emkt-cookie-switch{
  flex: 0 0 auto;
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  margin-top: 2px;
  cursor: pointer;
}
.emkt-cookie-switch input{
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.emkt-cookie-switch span[aria-hidden]{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #5A5A5A;
  border-radius: 28px;
  transition: background 0.18s ease;
  pointer-events: none;
}
.emkt-cookie-switch span[aria-hidden]::after{
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.18s ease;
}
.emkt-cookie-switch input:checked + span[aria-hidden]{
  background: #3C6E47;
  background: var(--emkt-green);
}
.emkt-cookie-switch input:checked + span[aria-hidden]::after{
  transform: translateX(24px);
}
.emkt-cookie-switch input:focus-visible + span[aria-hidden]{
  outline: 3px solid var(--emkt-gold);
  outline-offset: 2px;
}

.emkt-cookie-panel-actions{ margin-top: 18px; }
.emkt-cookie .emkt-cookie-btn{
  background: #C8963E;
  background: var(--emkt-gold);
  border: 0;
  border-radius: 5px;
  padding: 11px 24px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #201704;
  cursor: pointer;
}
.emkt-cookie .emkt-cookie-btn:hover{ background: #FFFFFF; }

/* Footer "Cookie settings" link */
.emkt-cookie-reopen{
  margin: 10px 0 0;
  text-align: center;
}
.emkt-cookie-reopen-btn{
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  text-decoration: underline;
  cursor: pointer;
  font-family: var(--emkt-font-body);
}
.emkt-cookie-reopen-btn:hover{ color: #C8963E; }

@media screen and (max-width: 860px){
  .emkt-cookie-inner{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 18px;
  }
  .emkt-cookie-heading{ max-width: none; }
  .emkt-cookie-actions{
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
  }
  .emkt-cookie-option{
    flex-direction: row;
    align-items: center;
  }
}

/* Placeholder shown over a video that has not been allowed yet. */
.emkt-video-hold{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  background: #0F2436;
  background: var(--emkt-navy-dark);
  color: #F4F1E8;
  color: var(--emkt-paper-light);
}
.emkt-video-hold p{
  margin: 0;
  max-width: 34ch;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #F4F1E8;
}
.emkt-video-hold .emkt-video-load{
  background: #C8963E;
  background: var(--emkt-gold);
  color: #0F2436;
  border: 0;
  border-radius: 4px;
  padding: 9px 20px;
  font-weight: 600;
  cursor: pointer;
}
.emkt-video-hold .emkt-video-load:hover{
  background: #A87A2E;
  color: #FFFFFF;
}

/* ==================================================
   27. Additional Info table on small screens
   ================================================== */
/*
 * Field values are often long URLs with no spaces in them, so there
 * is nowhere for the browser to wrap and the text runs off the edge
 * on a phone. `overflow-wrap: anywhere` lets it break mid-string, but
 * only when it has to — ordinary words still wrap normally.
 */
.listing-custom-field-value,
.listing-custom-field-value a,
.listing-custom-field-title{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: none;
}

/* Keep the label column narrow so values get the room. */
.listing-custom-field-title{
  width: 34%;
  vertical-align: top;
}
.listing-custom-field-value{
  vertical-align: top;
}

/*
 * Long descriptions were hyphenating mid-word ("cof-fee"), which
 * comes from justified text. Left-aligned reads better and removes
 * the broken words.
 */
.widget-listing .entry-content,
.listing-content,
.single-ad_listing .entry-content{
  text-align: left;
  hyphens: none;
}

@media screen and (max-width: 640px){
  /*
   * Stack each row: label above value. A two-column table at phone
   * width leaves roughly 150px for a full URL, which cannot look
   * right however it wraps.
   */
  /*
   * ClassiPress names this table .listing-custom-fields. Targeting it
   * by class is far more reliable than going through whatever section
   * or widget happens to wrap it.
   */
  table.listing-custom-fields,
  .listing-custom-fields,
  .widget-listing table{
    display: block !important;
    width: 100% !important;
  }
  .listing-custom-fields tbody,
  .widget-listing table tbody{
    display: block !important;
    width: 100% !important;
  }
  .listing-custom-fields tr,
  .widget-listing table tr{
    display: block !important;
    width: 100% !important;
    padding: 10px 0;
    border-bottom: 1px solid #D8D2C0;
    border-bottom: 1px solid var(--emkt-line);
  }
  .listing-custom-fields tr:last-child,
  .widget-listing table tr:last-child{ border-bottom: 0; }

  .listing-custom-fields .listing-custom-field-title,
  .listing-custom-fields .listing-custom-field-value,
  .listing-custom-field-title,
  .listing-custom-field-value{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0;
    padding: 0;
    text-align: left;
  }
  .listing-custom-field-title{
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4A5158;
    color: var(--emkt-ink-soft);
    margin-bottom: 3px;
  }
  .listing-custom-field-value{
    font-size: 0.95rem;
    line-height: 1.45;
  }
}

/* ==================================================
   28. Featured slider — multiple tiles
   ================================================== */
/*
 * With several tiles visible the cards need gutters and equal
 * heights. Slick sets an inline width on each slide, so the spacing
 * has to come from padding inside the slide rather than a margin.
 */
.featured-listings-slider .slick-list{ margin: 0 -11px; }
.featured-listings-slider .slick-slide{
  padding: 6px 11px 14px;
  height: auto;            /* let the flex track equalise heights */
  box-sizing: border-box;
}
.featured-listings-slider .slick-track{
  display: flex;
  align-items: stretch;
}
.featured-listings-slider .slick-slide > div{ height: 100%; }

/* Cards fill their tile rather than sitting at the 360px cap. */
.featured-listings-slider .slick-slide .emkt-fcard{
  max-width: 100%;
  height: 100%;
}

/* Arrows clear of the tiles. */
.featured-listings-slider .slick-prev{ left: -34px; }
.featured-listings-slider .slick-next{ right: -34px; }
@media screen and (max-width: 1240px){
  .featured-listings-slider{ padding: 0 30px; }
  .featured-listings-slider .slick-prev{ left: -4px; }
  .featured-listings-slider .slick-next{ right: -4px; }
}

/* ==================================================
   29. Footer advertising line
   ================================================== */
.emkt-footer-cta{
  margin: 6px 0 0;
  padding: 16px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
}
.emkt-footer-cta p{
  margin: 0;
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #F4F1E8;
  color: var(--emkt-paper-light);
}
.emkt-footer-cta .emkt-footer-cta-text{
  display: inline;
  margin-right: 6px;
}
.emkt-footer-cta .emkt-footer-cta-action{
  display: inline-block;
  white-space: nowrap;
}

/* The address itself — gold so it reads as the call to action. */
.site-footer .emkt-footer-cta a,
body[class*="theme-"] .site-footer .emkt-footer-cta a{
  color: #C8963E !important;
  color: var(--emkt-gold) !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(200,150,62,0.5);
  padding-bottom: 1px;
  overflow-wrap: anywhere;
}
.site-footer .emkt-footer-cta a:hover,
body[class*="theme-"] .site-footer .emkt-footer-cta a:hover{
  color: #FFFFFF !important;
  border-bottom-color: #FFFFFF;
}

@media screen and (max-width: 560px){
  .emkt-footer-cta{ padding: 14px 0 2px; }
  .emkt-footer-cta p{ font-size: 0.9rem; }
  .emkt-footer-cta .emkt-footer-cta-text{
    display: block;
    margin: 0 0 4px;
  }
  .emkt-footer-cta .emkt-footer-cta-action{ white-space: normal; }
}

/* ==================================================
   30. Advertise call-to-action band
   ================================================== */
/*
 * Sized to be noticed without dominating: a horizontal band that sits
 * between content blocks, text on the left, button on the right. The
 * gold rule down the leading edge gives it presence at a glance
 * without needing to be large.
 */
/*
 * Stacked by default, horizontal only when there is proven room.
 *
 * This is deliberately the safe way round. An earlier version was
 * horizontal by default and relied on a query to stack it; when that
 * query did not apply the text column was crushed to roughly 130px
 * and words broke mid-way. Defaulting to stacked means the worst case
 * is a perfectly readable stacked band rather than a broken one.
 */
.emkt-cta{
  display: block;
  padding: 22px 26px;
  margin: 26px 0;
  border-radius: 8px;
  border-left: 5px solid #C8963E;
  border-left: 5px solid var(--emkt-gold);
  box-shadow: 0 2px 12px rgba(15,36,54,0.12);
}

.emkt-cta-body{ min-width: 0; margin-bottom: 16px; }

.emkt-cta-eyebrow{
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.emkt-cta-heading{
  font-family: var(--emkt-font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.22;
  margin: 0 0 6px;
}

.emkt-cta-text{
  margin: 0;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.5;
}

.emkt-cta-action{
  text-align: center;
}
.emkt-cta .emkt-cta-btn{ white-space: normal; }

.emkt-cta .emkt-cta-btn{
  display: inline-block;
  padding: 13px 30px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.emkt-cta .emkt-cta-btn:hover{ transform: translateY(-1px); }

.emkt-cta-small{
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  opacity: 0.75;
  overflow-wrap: anywhere;
}

/* --- Navy band, gold button --- */
.emkt-cta--navy{
  background: #17324B;
  background: linear-gradient(135deg, #17324B 0%, #0F2436 100%);
  color: #F4F1E8;
}
.emkt-cta--navy .emkt-cta-eyebrow{ color: #C8963E; color: var(--emkt-gold); }
.emkt-cta--navy .emkt-cta-heading{ color: #FFFFFF; }
.emkt-cta--navy .emkt-cta-text,
.emkt-cta--navy .emkt-cta-small{ color: #F4F1E8; }
.emkt-cta--navy .emkt-cta-btn,
body[class*="theme-"] .emkt-cta--navy .emkt-cta-btn{
  background: #C8963E;
  background: var(--emkt-gold);
  color: #0F2436 !important;
  border-color: #C8963E;
}
.emkt-cta--navy .emkt-cta-btn:hover,
body[class*="theme-"] .emkt-cta--navy .emkt-cta-btn:hover{
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #0F2436 !important;
}

/* --- Gold band, navy button --- */
.emkt-cta--gold{
  background: #C8963E;
  background: linear-gradient(135deg, #D7A852 0%, #C8963E 100%);
  color: #2A1F0C;
  border-left-color: #0F2436;
}
.emkt-cta--gold .emkt-cta-eyebrow{ color: #4A3410; }
.emkt-cta--gold .emkt-cta-heading{ color: #17324B; color: var(--emkt-navy); }
.emkt-cta--gold .emkt-cta-text,
.emkt-cta--gold .emkt-cta-small{ color: #3A2C10; }
.emkt-cta--gold .emkt-cta-btn,
body[class*="theme-"] .emkt-cta--gold .emkt-cta-btn{
  background: #17324B;
  background: var(--emkt-navy);
  color: #FFFFFF !important;
  border-color: #17324B;
}
.emkt-cta--gold .emkt-cta-btn:hover,
body[class*="theme-"] .emkt-cta--gold .emkt-cta-btn:hover{
  background: #0F2436;
  border-color: #0F2436;
  color: #FFFFFF !important;
}

/* The widget wrapper should add no panel of its own around the band. */
.emkt-cta-widget{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.emkt-cta-widget .widget-title{ display: none; }

@media screen and (max-width: 640px){
  .emkt-cta{
    padding: 20px;
    gap: 14px;
    text-align: center;
    justify-content: center;
  }
  .emkt-cta-body{ flex: 1 1 100%; }
  .emkt-cta-action{ width: 100%; }
  .emkt-cta .emkt-cta-btn{ display: block; width: 100%; }
  .emkt-cta-text{ margin-left: auto; margin-right: auto; }
}

/* ==================================================
   31. Advertise CTA — go horizontal only when it fits
   ================================================== */
/*
 * The band is stacked by default (section 30). It becomes horizontal
 * only where there is demonstrably room, using two independent tests.
 * If neither applies the band simply stays stacked, which always
 * looks correct.
 *
 * Test 1 — container query: measures the widget's own box, so it
 * works in a half-width column on a wide screen. Preferred.
 *
 * Test 2 — media query fallback: for browsers or optimisation
 * plugins that drop container queries. Deliberately requires a very
 * wide viewport AND that the widget sits in a known full-width area,
 * so a narrow column is never mistaken for a wide one.
 */

.emkt-cta-widget,
.widget.emkt-cta-widget,
section.emkt-cta-widget{
  container-type: inline-size;
  container-name: emktcta;
}
/* (All three selectors above are plain classes, so this group is safe.) */

/* Nothing may force the band wider than its box. */
.emkt-cta,
.emkt-cta-body,
.emkt-cta-action{
  min-width: 0;
  max-width: 100%;
}
.emkt-cta{ overflow-wrap: break-word; }
.emkt-cta-heading,
.emkt-cta-text,
.emkt-cta-eyebrow{
  overflow-wrap: break-word;
  word-break: normal;      /* never split a word mid-way */
  hyphens: none;
}
.emkt-cta .emkt-cta-btn{
  max-width: 100%;
  box-sizing: border-box;
}

/* Test 1: the container itself is wide enough. */
@container emktcta (min-width: 620px){
  .emkt-cta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
  }
  .emkt-cta-body{
    flex: 1 1 340px;
    margin-bottom: 0;
  }
  .emkt-cta-action{ flex: 0 1 auto; }
  .emkt-cta .emkt-cta-btn{ white-space: nowrap; }
}

/* Test 2: full-width homepage and listing areas on a wide screen. */
@media screen and (min-width: 1100px){
  .home-bottom-area .emkt-cta,
  .home-top-area .emkt-cta,
  .widget-listing .emkt-cta,
  .emkt-cta-fullwidth .emkt-cta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
  }
  .home-bottom-area .emkt-cta-body,
  .home-top-area .emkt-cta-body,
  .widget-listing .emkt-cta-body,
  .emkt-cta-fullwidth .emkt-cta-body{
    flex: 1 1 340px;
    margin-bottom: 0;
  }
  .home-bottom-area .emkt-cta-action,
  .home-top-area .emkt-cta-action,
  .widget-listing .emkt-cta-action,
  .emkt-cta-fullwidth .emkt-cta-action{ flex: 0 1 auto; }
}

/* Tighten padding in genuinely small boxes. */
@container emktcta (max-width: 340px){
  .emkt-cta{
    padding: 16px 14px;
    border-left-width: 4px;
  }
  .emkt-cta-heading{ font-size: 1.05rem; line-height: 1.25; }
  .emkt-cta-eyebrow{ font-size: 0.66rem; letter-spacing: 0.06em; }
  .emkt-cta-text{ font-size: 0.85rem; }
  .emkt-cta .emkt-cta-btn{ padding: 11px 14px; font-size: 0.9rem; }
}

/* The button is full width whenever the band is stacked. */
.emkt-cta-action .emkt-cta-btn{ display: block; width: 100%; }
@container emktcta (min-width: 620px){
  .emkt-cta-action .emkt-cta-btn{ display: inline-block; width: auto; }
}
@media screen and (min-width: 1100px){
  .home-bottom-area .emkt-cta-action .emkt-cta-btn,
  .home-top-area .emkt-cta-action .emkt-cta-btn,
  .widget-listing .emkt-cta-action .emkt-cta-btn,
  .emkt-cta-fullwidth .emkt-cta-action .emkt-cta-btn{
    display: inline-block;
    width: auto;
    white-space: nowrap;
  }
}

/* ==================================================
   32. CTA inside a tiled sidebar
   ================================================== */
/*
 * ClassiPress tiled sidebars (Homepage - Bottom, Footer) wrap each
 * widget in <div class="column medium-N">, where N comes from the
 * widget's Size setting. A small N leaves the CTA in a thin strip.
 * These rules give that wrapper the full row.
 *
 * Two routes to the same result: :has() for browsers that support it,
 * and a class added by a tiny script for those that do not.
 */
/*
 * IMPORTANT: these are two separate rules, not one grouped selector.
 *
 * If any selector in a comma-separated group is unsupported, the
 * browser discards the whole rule. Grouping .emkt-cta-tile together
 * with :has() meant that in any browser without :has() support the
 * entire rule vanished — including the class the script relies on,
 * which is the one that actually has to work everywhere.
 */
.emkt-cta-tile{
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  float: none !important;
  /*
   * Keep Foundation's gutter. Zeroing it made the band sit flush
   * against the viewport edge instead of lining up with the rest of
   * the page content.
   */
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
}

/*
 * Centre the band and hold it to the same width as the site's other
 * content, so its edges line up with the listings and headings above.
 */
.emkt-cta-tile .emkt-cta,
.home-bottom-area .emkt-cta,
.home-top-area .emkt-cta{
  max-width: 75rem;      /* matches Foundation's .row max-width */
  margin-left: auto;
  margin-right: auto;
}

/* Progressive enhancement only; safe to be dropped on its own. */
.tiled-row > .column:has(.emkt-cta-widget){
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  float: none !important;
}

.emkt-cta-tile-row{
  display: block !important;
  width: 100% !important;
}

/* Now that the tile is full width, go horizontal on a wide screen. */
@media screen and (min-width: 1000px){
  .emkt-cta-tile .emkt-cta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
  }
  .emkt-cta-tile .emkt-cta-body{
    flex: 1 1 340px;
    margin-bottom: 0;
  }
  .emkt-cta-tile .emkt-cta-action{ flex: 0 1 auto; }
  .emkt-cta-tile .emkt-cta-action .emkt-cta-btn{
    display: inline-block;
    width: auto;
    white-space: nowrap;
  }
}

/* Facebook embeds: reels are portrait, ordinary videos landscape. */
.emkt-video--facebookreel{
  padding-top: 177.78%;              /* 9:16 fallback */
  background: #FFFFFF;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
@supports (aspect-ratio: 9 / 16){
  .emkt-video--facebookreel{
    padding-top: 0;
    aspect-ratio: 9 / 16;
  }
}
.emkt-video--facebook{
  background: #FFFFFF;
}
.emkt-video--facebookreel{ min-height: 480px; }

/* ==================================================
   33. Tappable phone numbers
   ================================================== */
.listing-custom-fields a.emkt-tel,
a.emkt-tel{
  color: #17324B;
  color: var(--emkt-navy);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #C8963E;
  border-bottom: 1px solid var(--emkt-gold);
  white-space: nowrap;
}
.listing-custom-fields a.emkt-tel:hover,
a.emkt-tel:hover{
  color: #A87A2E;
  color: var(--emkt-gold-dark);
}

/* On phones give it a proper tap target. */
@media screen and (max-width: 640px){
  .listing-custom-fields a.emkt-tel{
    display: inline-block;
    padding: 8px 14px;
    margin-top: 2px;
    border: 1px solid #C8963E;
    border: 1px solid var(--emkt-gold);
    border-radius: 6px;
    background: #FBF4E4;
    font-size: 1.02rem;
    min-height: 40px;      /* comfortable touch size */
    line-height: 24px;
  }
}

/* ==================================================
   34. Address links to directions
   ================================================== */
.listing-custom-fields a.emkt-map,
a.emkt-map{
  color: #17324B;
  color: var(--emkt-navy);
  text-decoration: none;
  border-bottom: 1px dotted #C8963E;
  border-bottom: 1px dotted var(--emkt-gold);
}
.listing-custom-fields a.emkt-map:hover,
a.emkt-map:hover{
  color: #A87A2E;
  color: var(--emkt-gold-dark);
  border-bottom-style: solid;
}

/* ==================================================
   Tap cues: arrow + "click here" prompt
   ================================================== */
/*
 * Shown on its own line under the value so it reads as a prompt
 * rather than part of the address or number.
 */
.emkt-cue{
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.emkt-cue .emkt-cue-arrow{
  display: inline-block;
  vertical-align: -3px;
  margin-right: 5px;
}
.emkt-cue--map{
  color: #3C6E47;
  color: var(--emkt-green);
}
.emkt-cue--call{
  color: #A87A2E;
  color: var(--emkt-gold-dark);
}
a:hover > .emkt-cue--map{ color: #2E5636; }
a:hover > .emkt-cue--call{ color: #17324B; }

@media screen and (max-width: 640px){
  .listing-custom-fields a.emkt-map{
    display: inline-block;
    padding: 6px 0;
    min-height: 40px;      /* comfortable tap target */
  }
  .emkt-cue{
    font-size: 0.82rem;
    margin-top: 5px;
  }
}

/* ==================================================
   35. Archive / category / search grid
   ================================================== */
/*
 * ClassiPress renders archives with `list-view`, a layout built for
 * wide horizontal rows (thumbnail left, details right) one per row.
 * Our card replaced that item template, so each card was stretching
 * the full width of the page.
 *
 * These rules turn those containers into the same three-across grid
 * the homepage widget uses, so listings look identical wherever they
 * appear.
 */
.listing-wrap.list-view,
.list-view.listing-wrap{
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -11px !important;
  margin-right: -11px !important;
}

.listing-wrap.list-view > .column,
.listing-wrap.list-view > .columns{
  width: 33.3333% !important;
  max-width: 33.3333% !important;
  flex: 0 0 33.3333% !important;
  padding: 0 11px 22px !important;
  float: none !important;
  display: flex !important;
  box-sizing: border-box;
}

.listing-wrap.list-view > .column > .emkt-fcard{
  width: 100%;
  max-width: 100%;
}

/* Two across on tablets, one on phones. */
@media screen and (max-width: 1024px){
  .listing-wrap.list-view > .column,
  .listing-wrap.list-view > .columns{
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
}
@media screen and (max-width: 640px){
  .listing-wrap.list-view > .column,
  .listing-wrap.list-view > .columns{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/*
 * Three across even with a sidebar.
 *
 * An earlier rule dropped to two columns whenever a sidebar was
 * present. The main column is comfortably wide enough for three
 * (roughly 260px per card), and three matches the homepage, so the
 * site reads consistently. Two rows then give six tiles on screen.
 */
@media screen and (min-width: 1025px){
  .has-sidebar .listing-wrap.list-view > .column,
  #main.columns .listing-wrap.list-view > .column{
    width: 33.3333% !important;
    max-width: 33.3333% !important;
    flex: 0 0 33.3333% !important;
  }
}

/* Slightly tighter card padding on archives so three fit comfortably. */
@media screen and (min-width: 1025px){
  .listing-wrap.list-view .emkt-fcard-body{ padding: 16px 14px 18px; }
  .listing-wrap.list-view .emkt-fcard-title{ font-size: 1.05rem; }
  .listing-wrap.list-view .emkt-fcard-cover{ height: 150px; }
}

/* ==================================================
   36. Full-width directory grid (five across)
   ================================================== */
/*
 * With the sidebar hidden the listing grid gets the whole page, so it
 * steps up from three cards per row to five. Each card still lands
 * around 250px wide, the same as three across in the narrower column,
 * so nothing is squashed — there are simply more of them.
 */
.emkt-full-width .listing-wrap.list-view > .column,
.emkt-full-width .listing-wrap.list-view > .columns{
  width: 20% !important;
  max-width: 20% !important;
  flex: 0 0 20% !important;
}

@media screen and (max-width: 1400px){
  .emkt-full-width .listing-wrap.list-view > .column,
  .emkt-full-width .listing-wrap.list-view > .columns{
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
  }
}
@media screen and (max-width: 1100px){
  .emkt-full-width .listing-wrap.list-view > .column,
  .emkt-full-width .listing-wrap.list-view > .columns{
    width: 33.3333% !important;
    max-width: 33.3333% !important;
    flex: 0 0 33.3333% !important;
  }
}
@media screen and (max-width: 820px){
  .emkt-full-width .listing-wrap.list-view > .column,
  .emkt-full-width .listing-wrap.list-view > .columns{
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
}
@media screen and (max-width: 560px){
  .emkt-full-width .listing-wrap.list-view > .column,
  .emkt-full-width .listing-wrap.list-view > .columns{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Slightly more compact cards at five across. */
@media screen and (min-width: 1401px){
  .emkt-full-width .listing-wrap.list-view .emkt-fcard-cover{ height: 140px; }
  .emkt-full-width .listing-wrap.list-view .emkt-fcard-title{ font-size: 1rem; line-height: 1.2; }
  .emkt-full-width .listing-wrap.list-view .emkt-fcard-body{ padding: 14px 12px 16px; }
}

/* ==================================================
   37. Back link on single listings
   ================================================== */
.emkt-back{
  margin: 0 0 14px;
  max-width: none;
}
.emkt-back a{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 9px 12px;
  border: 1px solid #D8D2C0;
  border: 1px solid var(--emkt-line);
  border-radius: 6px;
  background: #FFFFFF;
  font-size: 0.92rem;
  font-weight: 600;
  color: #17324B;
  color: var(--emkt-navy);
  text-decoration: none;
}
body[class*="theme-"] .emkt-back a{ color: var(--emkt-navy); }
.emkt-back a:hover,
body[class*="theme-"] .emkt-back a:hover{
  background: #17324B;
  background: var(--emkt-navy);
  border-color: #17324B;
  color: #FFFFFF;
}

@media screen and (max-width: 640px){
  .emkt-back a{
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: 1rem;
  }
}

/* ==================================================
   38. Footer widget legibility
   ================================================== */
/*
 * Widgets dropped into the footer bring their own light-background
 * styling: dark labels, dark placeholder text and a dark submit
 * button, all of which vanish against the navy. These rules make
 * every part of a footer widget readable.
 */
.site-footer .widget-footer label,
.site-footer .widget-footer .widget-title,
.site-footer .widget-footer h2,
.site-footer .widget-footer h3,
.site-footer .widget-footer p,
.site-footer .widget-footer li,
.site-footer .widget-footer td,
.site-footer .widget-footer .post-date,
.site-footer .widget-footer .rss-date{
  color: #F4F1E8 !important;
  color: var(--emkt-paper-light) !important;
}

/* "No comments to show", "No archives to show" and similar notices. */
.site-footer .widget-footer .no-items,
.site-footer .widget-footer em,
.site-footer .widget-footer .textwidget{
  color: rgba(244,241,232,0.85) !important;
}

/* Search and other inputs inside the footer. */
.site-footer .widget-footer input[type="text"],
.site-footer .widget-footer input[type="search"],
.site-footer .widget-footer input[type="email"],
.site-footer .widget-footer select,
.site-footer .widget-footer textarea{
  background: #FFFFFF;
  color: #20242A;
  color: var(--emkt-ink);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  padding: 10px 12px;
}
.site-footer .widget-footer input::placeholder{
  color: #737B84;
  opacity: 1;
}

.site-footer .widget-footer input[type="submit"],
.site-footer .widget-footer button,
.site-footer .widget-footer .button,
body[class*="theme-"] .site-footer .widget-footer input[type="submit"],
body[class*="theme-"] .site-footer .widget-footer button{
  background: #C8963E !important;
  background: var(--emkt-gold) !important;
  border-color: #C8963E !important;
  color: #0F2436 !important;
  font-weight: 700;
  border-radius: 4px;
  padding: 10px 18px;
}
.site-footer .widget-footer input[type="submit"]:hover,
.site-footer .widget-footer button:hover{
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #0F2436 !important;
}

/* Centre the footer search and give the field room. */
.site-footer .widget-footer .search-form,
.site-footer .widget_search form{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 420px;
  margin: 0 auto;
}
.site-footer .widget-footer .search-form label,
.site-footer .widget_search form label{
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
}
.site-footer .widget-footer .search-form input[type="search"],
.site-footer .widget_search form input[type="search"]{
  width: 100%;
}
.site-footer .widget-footer .search-form input[type="submit"],
.site-footer .widget_search form input[type="submit"]{
  flex: 0 0 auto;
}

/* Centre the whole footer widget on narrow screens. */
@media screen and (max-width: 560px){
  .site-footer .widget-footer{ text-align: center; }
  .site-footer .widget-footer ul{ padding-left: 0; }
}

/* ==================================================
   39. Header widget area
   ================================================== */
/*
 * The Header widget area sits on the navy bar beside the logo, but
 * widgets dropped there arrive styled for a light background: dark
 * labels, dark placeholder text and a dark button, all of which
 * disappear against the navy. These rules make them legible and
 * centre the search neatly between the logo and the menu.
 */
.widget-header{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 6px 0;
  max-width: 520px;
}

.widget-header .widget-title,
.widget-header label{
  color: #F4F1E8 !important;
  color: var(--emkt-paper-light) !important;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

/* The "Search for:" label is noise once there is a placeholder. */
.widget-header .search-form label .screen-reader-text,
.widget-header .widget_search label > span{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

.widget-header form{
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  flex-wrap: nowrap;
}
.widget-header form label{
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.widget-header input[type="search"],
.widget-header input[type="text"]{
  width: 100%;
  background: #FFFFFF;
  color: #20242A;
  color: var(--emkt-ink);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 5px;
  padding: 9px 12px;
  margin: 0;
  height: auto;
  box-shadow: none;
}
.widget-header input::placeholder{
  color: #737B84;
  opacity: 1;
}
.widget-header input[type="search"]:focus{
  border-color: #C8963E;
  border-color: var(--emkt-gold);
  background: #FFFFFF;
}

.widget-header input[type="submit"],
.widget-header button,
body[class*="theme-"] .widget-header input[type="submit"],
body[class*="theme-"] .widget-header button{
  flex: 0 0 auto;
  background: #C8963E !important;
  background: var(--emkt-gold) !important;
  border: 1px solid #C8963E !important;
  color: #0F2436 !important;
  font-weight: 700;
  border-radius: 5px;
  padding: 9px 18px;
  margin: 0;
  height: auto;
  white-space: nowrap;
}
.widget-header input[type="submit"]:hover,
.widget-header button:hover{
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #0F2436 !important;
}

/* Any other text a header widget prints. */
.widget-header p,
.widget-header li,
.widget-header a{
  color: #F4F1E8;
  color: var(--emkt-paper-light);
}

@media screen and (max-width: 860px){
  .widget-header{
    max-width: 100%;
    padding: 8px 0 10px;
  }
  .widget-header input[type="submit"],
  .widget-header button{ padding: 9px 14px; }
}

/*
 * ClassiPress renders the header search with Foundation's input-group
 * markup, not a plain label and input:
 *
 *   .input-group > span.screen-reader-text
 *                > input.input-group-field
 *                > .input-group-button > input[type=submit]
 *
 * Styling it needs to target those classes; rules aimed at `form
 * label` never matched anything.
 */
.widget-header .input-group{
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.widget-header .input-group .input-group-field{
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  background: #FFFFFF;
  color: #20242A;
  color: var(--emkt-ink);
  border: 1px solid rgba(255,255,255,0.3);
  border-right: 0;
  border-radius: 5px 0 0 5px;
  padding: 9px 12px;
  margin: 0;
  height: auto;
  box-shadow: none;
}

.widget-header .input-group .input-group-button{
  flex: 0 0 auto;
  width: auto;
  display: flex;
}

.widget-header .input-group .input-group-button .button,
.widget-header .input-group .input-group-button input[type="submit"],
body[class*="theme-"] .widget-header .input-group .input-group-button .button{
  background: #C8963E !important;
  background: var(--emkt-gold) !important;
  border: 1px solid #C8963E !important;
  color: #0F2436 !important;
  font-weight: 700;
  border-radius: 0 5px 5px 0;
  padding: 9px 18px;
  margin: 0;
  height: auto;
  white-space: nowrap;
}
.widget-header .input-group .input-group-button .button:hover,
.widget-header .input-group .input-group-button input[type="submit"]:hover{
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #0F2436 !important;
}

/* The widget title above the box is redundant next to a placeholder. */
.widget-header.widget_search .widget-title{
  display: none;
}

/* Belt and braces: nothing in the header may render as dark on navy. */
.widget-header,
.widget-header h3,
.widget-header span:not(.screen-reader-text),
.widget-header p{
  color: #F4F1E8;
  color: var(--emkt-paper-light);
}

/* ==================================================
   40. Card images: full brightness
   ================================================== */
/*
 * ClassiPress dims every cover that has a photo:
 *
 *   .entry-cover.has-image:after { background: rgba(0,0,0,0.35); }
 *
 * That exists so white hero text stays readable over a photo. On a
 * listing card there is no text over the image — the photo is the
 * content — so the overlay just makes every listing look muted and
 * grey. It is removed here for cards only; the hero keeps its own
 * darkening so its text stays legible.
 */
.emkt-fcard .emkt-fcard-cover::after,
.emkt-fcard .emkt-fcard-cover.entry-cover::after,
.emkt-fcard .entry-cover.has-image::after{
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Nothing else may fade the image either. */
.emkt-fcard .emkt-fcard-cover,
.emkt-fcard .emkt-fcard-cover img{
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal;
}

/*
 * Photos are scaled down into a small card, which softens them.
 * Rendering hints keep the detail crisp rather than blurry.
 */
.emkt-fcard .emkt-fcard-cover{
  background-size: cover;
  background-position: center;
  image-rendering: auto;
}
.emkt-fcard .emkt-fcard-cover img{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  object-fit: cover;
}

/* A gentle lift on hover, so cards feel live without being garish. */
.emkt-fcard .emkt-fcard-cover{
  transition: transform 0.25s ease;
}
.emkt-fcard:hover .emkt-fcard-cover{
  transform: scale(1.02);
}
@media (prefers-reduced-motion: reduce){
  .emkt-fcard .emkt-fcard-cover{ transition: none; }
  .emkt-fcard:hover .emkt-fcard-cover{ transform: none; }
}

/* ==================================================
   41. Header: logo, tagline and layout
   ================================================== */
/*
 * Logo sizing. Capped by height rather than width so any shape of
 * logo stays in proportion, and kept small enough on a phone that it
 * does not crowd out the menu button.
 */
.top-bar-left .site-title img,
.site-branding img,
.custom-logo,
#top-bar-primary img.custom-logo{
  max-height: 52px;
  width: auto;
  height: auto;
  display: block;
}

@media screen and (max-width: 860px){
  .top-bar-left .site-title img,
  .site-branding img,
  .custom-logo{
    max-height: 38px;
  }
}

/*
 * The tagline sits on the navy bar but inherits dark body text, so it
 * reads as a grey smudge. Made legible and toned down so it supports
 * the logo instead of competing with it.
 */
.site-description,
#top-bar-primary .site-description,
body[class*="theme-"] .site-description{
  color: rgba(244,241,232,0.78) !important;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 2px 0 0;
  line-height: 1.3;
}

/* Hide the tagline on small screens, where space is tight. */
@media screen and (max-width: 640px){
  .site-description{ display: none; }
}

.site-title a,
body[class*="theme-"] .site-title a{
  color: #FFFFFF;
  font-family: var(--emkt-font-display);
}

/* ==================================================
   42. Header search: wider and centred
   ================================================== */
/*
 * The search needs real room. It is given a generous share of the bar
 * and centred, with the logo on one side and the menu on the other.
 */
#top-bar-primary .top-bar-left,
.primary-header-wrap .top-bar-left{
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
}

.widget-header{
  flex: 1 1 auto;
  max-width: 560px;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
}

.widget-header .input-group{
  max-width: 560px;
}

.widget-header .input-group .input-group-field{
  min-width: 140px;
  font-size: 0.95rem;
}

@media screen and (max-width: 860px){
  #top-bar-primary .top-bar-left,
  .primary-header-wrap .top-bar-left{
    flex-wrap: wrap;
  }
  .widget-header{
    flex: 1 1 100%;
    max-width: 100%;
    margin-top: 6px;
  }
}

/*
 * Only a search belongs in the Header widget area.
 *
 * Widgets such as Recent Comments or Archives print stray lines like
 * "No comments to show." across the header. They are better deleted
 * in Appearance > Widgets, but they are hidden here so the header
 * cannot be broken by one being dropped in by mistake.
 */
.widget-header.widget_recent_comments,
.widget-header.widget_recent_entries,
.widget-header.widget_archive,
.widget-header.widget_categories,
.widget-header.widget_meta,
.widget-header.widget_calendar,
.widget-header.widget_rss,
.widget-header.widget_tag_cloud{
  display: none !important;
}

/* Logo: never stretched, never boxed, crisp when scaled down. */
.custom-logo,
.site-title img,
.site-branding img{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* ==================================================
   43. Listing banner: bright image, readable text
   ================================================== */
/*
 * The listing hero carries the same rgba(0,0,0,0.35) sheet that dulls
 * the card covers. Simply deleting it would leave white text sitting
 * on a bright photo, which is worse. So the flat dim is removed and
 * legibility is handled where it is actually needed: a soft shadow on
 * the text itself, plus a gentle gradient behind the text band only.
 * The image stays bright; the words stay readable.
 */
.listing-cover.has-image::after,
.item-cover.has-image::after,
.single-ad_listing .entry-cover.has-image::after{
  background: none !important;
  opacity: 0 !important;
  content: none !important;
  display: none !important;
}

/*
 * No overlay at all.
 *
 * An earlier version put a soft gradient behind the text band, but it
 * spanned most of the banner height and still read as grey. The image
 * is now left completely untouched and legibility comes entirely from
 * the text: a heavy multi-layer shadow, which darkens only the pixels
 * immediately around each letter.
 */
.listing-cover.has-image::before,
.item-cover.has-image::before,
.single-ad_listing .entry-cover.has-image::before{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Text above the gradient, with its own shadow for busy photos. */
.hero-listing-wrap{
  position: relative;
  z-index: 2;
}
.hero-listing-wrap .entry-title,
.hero-listing-wrap .entry-title a{
  color: #FFFFFF !important;
  /* Layered shadows hug the letterforms, so the photo behind stays
     fully bright while the text still reads on any background. */
  text-shadow:
    0 0 2px rgba(0,0,0,0.95),
    0 1px 2px rgba(0,0,0,0.95),
    0 2px 6px rgba(0,0,0,0.85),
    0 3px 14px rgba(0,0,0,0.75);
  paint-order: stroke fill;
  -webkit-text-stroke: 0.4px rgba(0,0,0,0.35);
}

/*
 * Category and view count were rendering as dark grey italics on the
 * photo — effectively invisible on a dark or busy image.
 */
.hero-listing-wrap .entry-meta-sub,
.hero-listing-wrap .entry-meta-sub *,
.hero-listing-wrap .entry-category,
.hero-listing-wrap .entry-category a,
.hero-listing-wrap .entry-comments,
body[class*="theme-"] .hero-listing-wrap .entry-category a{
  color: #FFFFFF !important;
  font-style: normal;
  font-weight: 600;
  text-shadow:
    0 0 2px rgba(0,0,0,0.95),
    0 1px 3px rgba(0,0,0,0.95),
    0 2px 8px rgba(0,0,0,0.8);
}
.hero-listing-wrap .entry-category a:hover,
body[class*="theme-"] .hero-listing-wrap .entry-category a:hover{
  color: #C8963E !important;
}

/* Make sure nothing else fades the banner image itself. */
.listing-cover,
.item-cover,
.single-ad_listing .entry-cover{
  filter: none !important;
  opacity: 1 !important;
}

/* Final sweep: nothing may sit over a listing banner image. */
.single-ad_listing .listing-cover::before,
.single-ad_listing .listing-cover::after,
.single-ad_listing .hero-listing::before,
.single-ad_listing .hero-listing::after{
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}
.single-ad_listing .listing-cover,
.single-ad_listing .hero-listing{
  background-color: transparent;
  filter: none !important;
  opacity: 1 !important;
}

/* ==================================================
   44. Listing action bar — no band across the image
   ================================================== */
/*
 * ClassiPress paints a strip across the bottom of every banner to sit
 * the edit/flag icons on:
 *
 *   .hero-listing-bar { background-color: rgba(0,0,0,0.3); }
 *
 * That is the grey band cutting across the photo. The strip is made
 * transparent and each icon is given its own circular backing, so the
 * controls stay visible without a band over the image.
 */
.hero-listing-bar,
.listing-cover .hero-listing-bar,
.single-ad_listing .hero-listing-bar{
  background-color: transparent !important;
  background: none !important;
}

.hero-listing-bar .listing-icon{
  background: rgba(15,36,54,0.55) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.hero-listing-bar .listing-icon i,
.hero-listing-bar .listing-icon .fa,
.hero-listing-bar .listing-icon svg{
  color: #FFFFFF !important;
}
.hero-listing-bar .listing-icon:hover{
  background: #C8963E !important;
  background: var(--emkt-gold) !important;
  border-color: #C8963E !important;
}
.hero-listing-bar .listing-icon:hover i,
.hero-listing-bar .listing-icon:hover .fa{
  color: #0F2436 !important;
}

/*
 * Category chips in the banner carry their own dark pill background.
 * Kept, but lightened so they read as chips rather than smudges.
 */
.hero-listing .entry-categories a{
  background: rgba(15,36,54,0.6) !important;
  border: 1px solid rgba(255,255,255,0.35);
  color: #FFFFFF !important;
}
.hero-listing .entry-categories a:hover{
  background: #C8963E !important;
  color: #0F2436 !important;
}

/*
 * The parent also sets a grey placeholder colour on covers
 * (background-color: #CCC). Harmless behind a photo, but it shows as
 * a grey block while the image loads.
 */
.listing-cover.has-image,
.entry-cover.has-image{
  background-color: transparent;
}

/* ==================================================
   45. Layout stability (CLS)
   ================================================== */
/*
 * Reserving height for the hero and banners stops the page jumping as
 * the background image arrives. Cumulative Layout Shift rose when the
 * first image started loading eagerly, because nothing was holding
 * its space until it appeared.
 */
.home-cover.emkt-hero{
  min-height: 420px;
}
@media screen and (max-width: 860px){
  .home-cover.emkt-hero{ min-height: 340px; }
}
@media screen and (max-width: 560px){
  .home-cover.emkt-hero{ min-height: 300px; }
}

.listing-cover.has-image,
.hero-listing.listing-cover{
  min-height: 300px;
}
@media screen and (max-width: 560px){
  .listing-cover.has-image,
  .hero-listing.listing-cover{ min-height: 200px; }
}

/* Card covers already have a fixed height; make sure nothing resizes
   them once the photo loads. */
.emkt-fcard .emkt-fcard-cover{
  min-height: 150px;
}

/*
 * The cookie banner is fixed to the bottom, so it cannot push content
 * around — but declaring its own containment keeps it out of the
 * page's layout calculations entirely.
 */
.emkt-cookie{
  contain: layout;
}

/* ==================================================
   46. Plain hero background
   ================================================== */
/*
 * A painted hero: no image request at all, so nothing to download and
 * nothing to wait for. The subtle pattern is drawn with gradients,
 * which cost no bandwidth, so the hero paints as soon as the CSS
 * arrives rather than after a large photo downloads.
 */
.home-cover.emkt-hero--plain{
  background-color: #17324B;
  background-color: var(--emkt-navy);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(200,150,62,0.16) 0%, rgba(200,150,62,0) 42%),
    radial-gradient(circle at 82% 78%, rgba(60,110,71,0.20) 0%, rgba(60,110,71,0) 45%),
    linear-gradient(135deg, #1B3A57 0%, #17324B 45%, #0F2436 100%);
  box-shadow: none;
  position: relative;
}

/* No scrim needed without a photo, so the colours stay clean. */
.home-cover.emkt-hero--plain::before,
.home-cover.emkt-hero--plain::after{
  content: none !important;
  display: none !important;
}

/* A thin gold rule at the base ties it to the rest of the site. */
.home-cover.emkt-hero--plain{
  border-bottom: 3px solid #C8963E;
  border-bottom: 3px solid var(--emkt-gold);
}

/* Without an image the hero can be a little shorter. */
.home-cover.emkt-hero--plain{ min-height: 0; padding: 56px 0 48px; }
@media screen and (max-width: 860px){
  .home-cover.emkt-hero--plain{ padding: 40px 0 36px; }
}

/* ==================================================
   47. Partners / sponsors band
   ================================================== */
.emkt-partners{
  padding: 52px 0 56px;
}
.emkt-partners--navy{
  background: #17324B;
  background: linear-gradient(135deg, #1B3A57 0%, #17324B 55%, #0F2436 100%);
  color: #F4F1E8;
}
.emkt-partners--light{
  background: #E9E4D6;
  background: var(--emkt-paper);
  color: #20242A;
  border-top: 1px solid #D8D2C0;
  border-bottom: 1px solid #D8D2C0;
}

.emkt-partners-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.emkt-partners-heading{
  font-family: var(--emkt-font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 0 0 10px;
}
.emkt-partners--navy .emkt-partners-heading{ color: #FFFFFF; }
.emkt-partners--light .emkt-partners-heading{ color: var(--emkt-navy); }

.emkt-partners-text{
  margin: 0 auto 30px;
  max-width: 70ch;
  font-size: 0.95rem;
  line-height: 1.55;
}
.emkt-partners--navy .emkt-partners-text{ color: rgba(244,241,232,0.88); }
.emkt-partners--light .emkt-partners-text{ color: var(--emkt-ink-soft); }

/* Logo cards */
.emkt-partners-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

/*
 * Six across on a wide screen, stepping down as space runs out.
 * Sized by percentage rather than a fixed width so the row always
 * fills evenly, whatever the container.
 */
.emkt-partners-grid .emkt-partner{
  flex: 0 0 calc((100% - 5 * 18px) / 6);
  max-width: calc((100% - 5 * 18px) / 6);
  margin: 0;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.emkt-partners-grid .emkt-partner:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

.emkt-partners-grid .emkt-partner:has(a){ cursor: pointer; }
.emkt-partners-grid .emkt-partner a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/*
 * contain, not cover: a logo must never be cropped, and partners send
 * logos in every shape imaginable.
 */
.emkt-partners-grid .emkt-partner img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media screen and (max-width: 1180px){
  .emkt-partners-grid .emkt-partner{
    flex: 0 0 calc((100% - 3 * 18px) / 4);
    max-width: calc((100% - 3 * 18px) / 4);
  }
}
@media screen and (max-width: 900px){
  .emkt-partners-grid .emkt-partner{
    flex: 0 0 calc((100% - 2 * 18px) / 3);
    max-width: calc((100% - 2 * 18px) / 3);
  }
}
@media screen and (max-width: 760px){
  .emkt-partners{ padding: 38px 0 40px; }
  .emkt-partners-grid{ gap: 12px; }
  .emkt-partners-grid .emkt-partner{
    flex: 0 0 calc((100% - 12px) / 2);
    max-width: calc((100% - 12px) / 2);
    height: 96px;
    padding: 14px;
  }
}
@media screen and (max-width: 420px){
  .emkt-partners-grid .emkt-partner{
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* The widget wrapper adds no panel of its own around the band. */
.emkt-partners-widget{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.emkt-partners-widget .widget-title{ display: none; }

/* The partners band must fill its tile, like the CTA band. */
.emkt-cta-tile .emkt-partners,
.emkt-partners-widget .emkt-partners{
  width: 100%;
}
.emkt-partners-widget{
  width: 100%;
  max-width: 100%;
}

/* Progressive enhancement for browsers with :has(). */
.tiled-row > .column:has(.emkt-partners-widget){
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* Partner name under the logo */
.emkt-partners--named .emkt-partner{
  flex-direction: column;
  gap: 8px;
  height: 140px;
  padding: 16px 12px 14px;
}
.emkt-partners-grid .emkt-partner a{
  flex-direction: column;
  gap: 8px;
}
.emkt-partner .emkt-partner-logo{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}
.emkt-partner .emkt-partner-logo img{
  max-height: 100%;
}
.emkt-partner .emkt-partner-name{
  display: block;
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  color: #17324B;
  color: var(--emkt-navy);
  text-align: center;
  overflow-wrap: break-word;
}
.emkt-partner a:hover .emkt-partner-name{
  color: #A87A2E;
  color: var(--emkt-gold-dark);
}

@media screen and (max-width: 760px){
  .emkt-partners--named .emkt-partner{ height: 118px; }
  .emkt-partner .emkt-partner-name{ font-size: 0.78rem; }
}

/* Sliding partners band */
.emkt-partners-slider{
  display: block;
}
.emkt-partners-slider .slick-track{
  display: flex;
  align-items: stretch;
}
.emkt-partners-slider .slick-slide{
  height: auto;
  padding: 0 9px;
  box-sizing: border-box;
}
.emkt-partners-slider .slick-slide .emkt-partner,
.emkt-partners-slider.slick-initialized .emkt-partner{
  flex: 0 0 auto;
  max-width: 100%;
  width: 100%;
}
/* Before Slick runs, keep it looking like the normal grid. */
.emkt-partners-slider:not(.slick-initialized){
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

/* ==================================================
   48. Partner names on small screens
   ================================================== */
/*
 * The mobile rules set a shorter fixed card height, which left no
 * room for the name once the logo had taken its share — so it was
 * being clipped rather than hidden. Heights become minimums here, so
 * a card grows to fit whatever it contains instead of cutting it off.
 */
.emkt-partners-grid .emkt-partner{
  height: auto;
  min-height: 120px;
  overflow: visible;
}
.emkt-partners--named .emkt-partner{
  height: auto;
  min-height: 150px;
}

.emkt-partner .emkt-partner-logo{
  /* A minimum so the logo never collapses, but it can give up space
     to the name rather than squeezing it out. */
  min-height: 52px;
}

.emkt-partner .emkt-partner-name{
  flex: 0 0 auto;
  display: block !important;
  width: 100%;
  min-height: 1.2em;
  white-space: normal;
  visibility: visible !important;
}

@media screen and (max-width: 760px){
  .emkt-partners-grid .emkt-partner{
    height: auto;
    min-height: 104px;
    padding: 14px 10px 12px;
  }
  .emkt-partners--named .emkt-partner{
    height: auto;
    min-height: 132px;
  }
  .emkt-partner .emkt-partner-logo{ min-height: 46px; }
  .emkt-partner .emkt-partner-name{
    font-size: 0.8rem;
    line-height: 1.3;
  }
}

@media screen and (max-width: 420px){
  .emkt-partners--named .emkt-partner{ min-height: 124px; }
}

/* ==================================================
   49. Equal-height partner cards
   ================================================== */
/*
 * Cards grow to fit their content, so a partner with a long name ends
 * up taller than one with a short name and the row looks ragged.
 * Stretching them makes every card in a row match the tallest.
 */
.emkt-partners-grid{
  align-items: stretch;
}
.emkt-partners-grid .emkt-partner{
  align-self: stretch;
}

/*
 * The name sits on its own line at the foot of the card, so names
 * line up across the row even when logos differ in height.
 */
.emkt-partners-grid .emkt-partner,
.emkt-partners-grid .emkt-partner a{
  justify-content: space-between;
}
.emkt-partner .emkt-partner-logo{
  flex: 1 1 auto;
}
.emkt-partner .emkt-partner-name{
  margin-top: auto;
  padding-top: 6px;
}

/* Same in slider mode, where Slick sets its own slide heights. */
.emkt-partners-slider.slick-initialized .slick-track{
  align-items: stretch;
}
.emkt-partners-slider.slick-initialized .slick-slide{
  height: auto;
}
.emkt-partners-slider.slick-initialized .slick-slide > div,
.emkt-partners-slider.slick-initialized .emkt-partner{
  height: 100%;
}

/* ==================================================
   50. "Get listed" email panel
   ================================================== */
.emkt-listme{
  max-width: 660px;
  margin: 0 auto;
  padding: 36px 32px 32px;
  text-align: center;
  background: #17324B;
  background: linear-gradient(135deg, #1B3A57 0%, #17324B 55%, #0F2436 100%);
  border-left: 5px solid #C8963E;
  border-left: 5px solid var(--emkt-gold);
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(15,36,54,0.14);
}

.emkt-listme-heading{
  font-family: var(--emkt-font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  margin: 0 0 12px;
  color: #FFFFFF;
}

.emkt-listme-text{
  margin: 0 auto 22px;
  max-width: 52ch;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #F4F1E8;
  color: var(--emkt-paper-light);
}

.emkt-listme .emkt-listme-btn,
body[class*="theme-"] .emkt-listme .emkt-listme-btn{
  display: inline-block;
  padding: 15px 34px;
  border-radius: 6px;
  background: #C8963E;
  background: var(--emkt-gold);
  color: #0F2436 !important;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  text-decoration: none;
  word-break: break-word;
  max-width: 100%;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.emkt-listme .emkt-listme-btn:hover,
body[class*="theme-"] .emkt-listme .emkt-listme-btn:hover{
  background: #FFFFFF;
  color: #0F2436 !important;
  transform: translateY(-1px);
}

.emkt-listme-note{
  margin: 18px auto 0;
  max-width: 48ch;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(244,241,232,0.8);
}

@media screen and (max-width: 560px){
  .emkt-listme{ padding: 26px 18px 24px; }
  .emkt-listme .emkt-listme-btn{
    display: block;
    padding: 14px 16px;
    font-size: 0.95rem;
  }
}

/* The standalone get-listed page needs breathing room. */
.emkt-getlisted-page{
  padding: 48px 0 60px;
}
@media screen and (max-width: 640px){
  .emkt-getlisted-page{ padding: 30px 0 40px; }
}

/* ==================================================
   51. Clickable stats
   ================================================== */
/*
 * The linked figures keep exactly the same appearance as the plain
 * ones; only the hover state and cursor reveal that they are
 * clickable, so the band still reads as a row of facts rather than a
 * row of buttons.
 */
.emkt-stats-card .emkt-stat--link,
body[class*="theme-"] .emkt-stats-card a.emkt-stat--link{
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 10px 8px;
  margin: -10px -8px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.emkt-stats-card .emkt-stat--link:hover,
body[class*="theme-"] .emkt-stats-card a.emkt-stat--link:hover{
  background: #F4F1E8;
  background: var(--emkt-paper-light);
  transform: translateY(-2px);
  color: inherit;
}
.emkt-stats-card .emkt-stat--link:hover .emkt-stat-number{
  color: #A87A2E;
  color: var(--emkt-gold-dark);
}
.emkt-stats-card .emkt-stat--link:hover .emkt-stat-icon{
  color: #17324B;
  color: var(--emkt-navy);
}

.emkt-stats-card .emkt-stat--link:focus-visible{
  outline: 3px solid #C8963E;
  outline: 3px solid var(--emkt-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .emkt-stats-card .emkt-stat--link{ transition: none; }
  .emkt-stats-card .emkt-stat--link:hover{ transform: none; }
}

/* ==================================================
   52. Stats band — richer treatment
   ================================================== */
/*
 * Each figure gets a coloured disc behind its icon and a divider
 * between columns. The colour does the work here: four quiet tints
 * read as considered rather than decorated, which is what makes a
 * figures panel look credible rather than clip-art.
 */
.emkt-stat-disc{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--disc-bg, #E3EAF2);
  color: var(--disc-fg, #17324B);
  flex: 0 0 auto;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.emkt-stat-disc .emkt-stat-icon{ display: block; }

.emkt-stat--link:hover .emkt-stat-disc{
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(15,36,54,0.18);
}

/* Bigger, more confident figures. */
.emkt-stats-card .emkt-stat-number{
  font-family: var(--emkt-font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #17324B;
  color: var(--emkt-navy);
  display: block;
  margin-bottom: 4px;
}
.emkt-stats-card .emkt-stat-label{
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4A5158;
  color: var(--emkt-ink-soft);
}

/* Hairline dividers between columns, not around the outside. */
.emkt-stats-card .emkt-stat + .emkt-stat{
  border-left: 1px solid #E4DFD1;
}

/*
 * A gold accent rule across the top of the card.
 *
 * No overflow:hidden here. It was clipping the accent bar to the
 * rounded corners neatly, but it also cut off the pointer cue that
 * sits just below a figure, so the cue was invisible. The bar gets
 * matching corner radii instead, which achieves the same thing
 * without clipping anything else.
 */
.emkt-stats-card{
  position: relative;
  overflow: visible;
}
.emkt-stats-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: linear-gradient(90deg, #3C6E47 0%, #C8963E 45%, #17324B 100%);
}

@media screen and (max-width: 860px){
  .emkt-stat-disc{ width: 46px; height: 46px; margin-bottom: 9px; }
  .emkt-stats-card .emkt-stat-label{ font-size: 0.74rem; letter-spacing: 0.03em; }
}
@media screen and (max-width: 640px){
  /* Two per row on a phone, so the dividers only split pairs. */
  .emkt-stats-card .emkt-stat + .emkt-stat{ border-left: 0; }
  .emkt-stats-card .emkt-stat{ padding: 14px 6px; }
}

/* ==================================================
   53. Stats band — force the row layout
   ================================================== */
/*
 * The figures were stacking vertically. The card is declared as a
 * flex row earlier in this file, but the value was being lost, so it
 * is restated here with the layout pinned explicitly. Stating it once
 * more costs nothing and removes the failure mode entirely.
 */
.emkt-stats .emkt-stats-card,
.emkt-stats-card{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch;
  justify-content: space-around;
  gap: 0;
}

.emkt-stats .emkt-stats-card > .emkt-stat,
.emkt-stats-card > a.emkt-stat,
.emkt-stats-card > div.emkt-stat{
  flex: 1 1 0 !important;
  min-width: 150px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 20px 12px;
  box-sizing: border-box;
  float: none !important;
  width: auto !important;
}

/* Bolder discs, white icons. */
.emkt-stat-disc{
  box-shadow: 0 3px 10px rgba(15,36,54,0.18);
}

@media screen and (max-width: 720px){
  /* Two per row rather than one long column. */
  .emkt-stats .emkt-stats-card > .emkt-stat,
  .emkt-stats-card > a.emkt-stat,
  .emkt-stats-card > div.emkt-stat{
    flex: 0 0 50% !important;
    min-width: 0;
    padding: 16px 8px;
  }
}

/* ==================================================
   54. Icon colour and the "clickable" cue
   ================================================== */
/* The icon must always take the disc's foreground colour. */
.emkt-stat-disc .emkt-stat-icon,
.emkt-stats-card .emkt-stat-disc .emkt-stat-icon{
  color: inherit !important;
  stroke: currentColor !important;
  margin: 0 !important;
}
.emkt-stat-disc{ color: var(--disc-fg, #FFFFFF); }

/* Hover no longer needs to recolour the icon. */
.emkt-stats-card .emkt-stat--link:hover .emkt-stat-icon{
  color: inherit !important;
}

/*
 * A one-off nudge under the first figure.
 *
 * Placed below the card rather than beside the figure: the columns
 * are only a fifth of the card wide, so anything sitting alongside
 * overlaps the next figure and covers its number. It is offset far
 * enough below the card that the card's border no longer runs
 * through the text.
 */
.emkt-stat--hinted{ position: relative; }

.emkt-stats-hint{
  position: absolute;
  top: calc(100% + 26px);
  left: 50%;
  transform: translateX(-34%);
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
  color: #C1352A;
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
  /* Inherited link styling would underline or strike the text. */
  text-decoration: none !important;
}
.emkt-stats-hint span{
  text-decoration: none !important;
  border: 0 !important;
}
.emkt-stats-hint[hidden]{ display: none; }

/*
 * Before the script moves it into the first figure, the cue sits in
 * normal flow under the card. If the script never runs it simply
 * stays there, which still reads correctly.
 */
.emkt-stats .emkt-stats-hint:not(.emkt-stat--hinted .emkt-stats-hint){
  position: static;
  transform: none;
  justify-content: center;
  margin: 10px auto 0;
}
.emkt-stat--hinted .emkt-stats-hint{
  position: absolute;
  top: calc(100% + 26px);
  left: 50%;
  transform: translateX(-34%);
  margin: 0;
}

/* Arrow curves up toward the figure above it. */
.emkt-stats-hint .emkt-hint-arrow{
  color: #C1352A;
  transform: rotate(-6deg);
  animation: emkt-hint-nudge 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}

@keyframes emkt-hint-nudge{
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(-5px); }
}

/*
 * No room beside a figure on a phone, where the columns are half the
 * screen wide. It drops below the whole card instead, clear of the
 * border, and stays horizontal.
 */
@media screen and (max-width: 720px){
  .emkt-stats-hint{
    position: static;
    transform: none;
    justify-content: center;
    margin: 6px auto 0;
    font-size: 0.76rem;
  }
  .emkt-stats-hint .emkt-hint-arrow{
    width: 34px;
    height: 27px;
    transform: rotate(-8deg);
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .emkt-stats-hint .emkt-hint-arrow{ animation: none; }
}

/* Notice shown on a date-filtered listings archive. */
.emkt-filter-notice{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 12px 18px;
  background: #E9E4D6;
  background: var(--emkt-paper);
  border-left: 4px solid #C8963E;
  border-left: 4px solid var(--emkt-gold);
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #17324B;
  color: var(--emkt-navy);
}
.emkt-filter-notice a,
body[class*="theme-"] .emkt-filter-notice a{
  color: #A87A2E !important;
  color: var(--emkt-gold-dark) !important;
  text-decoration: underline;
  font-weight: 700;
  white-space: nowrap;
}

/* ==================================================
   55. Secondary header bar (decorative)
   ================================================== */
/*
 * The bar no longer holds a menu, so it has no content to give it
 * height. It keeps its band of colour at a set height instead.
 */
#top-bar-secondary.emkt-accent-bar,
.emkt-accent-bar{
  display: block !important;
  height: 22px;
  min-height: 22px;
  padding: 0 !important;
  margin: 0;
  background: #E9E4D6;
  background: var(--emkt-paper);
  border: 0;
  border-bottom: 1px solid #D8D2C0;
  border-bottom: 1px solid var(--emkt-line);
}

/* The empty band has no purpose on a phone; the ticker does. */
@media screen and (max-width: 640px){
  #top-bar-secondary.emkt-accent-bar:not(.emkt-accent-bar--ticker){ display: none !important; }
}

/* ==================================================
   56. "Just listed" ticker
   ================================================== */
#top-bar-secondary.emkt-accent-bar--ticker{
  height: auto;
  min-height: 0;
  padding: 0 !important;
}

.emkt-ticker-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  box-sizing: border-box;
}

.emkt-ticker-label{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #17324B;
  background: var(--emkt-navy);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.emkt-ticker-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6FCF7F;
  box-shadow: 0 0 0 0 rgba(111,207,127,0.6);
  animation: emkt-ticker-pulse 2s ease-out infinite;
}
@keyframes emkt-ticker-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(111,207,127,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(111,207,127,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,207,127,0); }
}

/*
 * The items are stacked on top of each other and only the active one
 * is shown, so switching between them does not move anything else on
 * the page.
 */
.emkt-ticker-list{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  overflow: hidden;
}
.emkt-ticker-item{
  position: absolute;
  top: 0; left: 0; right: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.emkt-ticker-item.is-active{
  opacity: 1;
  visibility: visible;
}

.emkt-ticker-item a,
body[class*="theme-"] .emkt-ticker-item a{
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  color: #17324B;
  color: var(--emkt-navy);
}
.emkt-ticker-name{
  font-weight: 700;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.emkt-ticker-town{
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: #4A5158;
  color: var(--emkt-ink-soft);
}
.emkt-ticker-town::before{
  content: "·";
  margin-right: 8px;
  color: #C8963E;
}
.emkt-ticker-when{
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-style: italic;
  color: #A87A2E;
  color: var(--emkt-gold-dark);
}
.emkt-ticker-item a:hover .emkt-ticker-name{
  color: #A87A2E;
  color: var(--emkt-gold-dark);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce){
  .emkt-ticker-item{ transition: none; }
  .emkt-ticker-dot{ animation: none; }
}

/*
 * Phone: one compact line, and the whole strip is the tap target
 * rather than just the business name. Not sticky, so it scrolls away
 * with the header instead of permanently taking up screen space.
 */
@media screen and (max-width: 640px){
  .emkt-ticker-inner{
    padding: 6px 12px;
    gap: 10px;
    min-height: 44px;
  }
  .emkt-ticker-label{
    padding: 3px 8px;
    font-size: 0.66rem;
  }
  .emkt-ticker-list{ height: 32px; }
  .emkt-ticker-item a,
  body[class*="theme-"] .emkt-ticker-item a{
    line-height: 32px;
    min-height: 32px;
  }
  .emkt-ticker-name{ font-size: 0.84rem; }
  .emkt-ticker-town{ font-size: 0.78rem; }
  /* The timing is the first thing to go on a narrow screen. */
  .emkt-ticker-when{ display: none; }
}

/* ==================================================
   57. Service promotion arrow
   ================================================== */
.emkt-menu-promo{ position: relative; }

.emkt-promo-cue{
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  color: #F2B33D;
  pointer-events: none;
  line-height: 1;
}
.emkt-promo-label{
  font-family: var(--emkt-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #F2B33D;
  padding-bottom: 14px;
}
.emkt-promo-arrow{
  display: block;
  flex: 0 0 auto;
  color: #F2B33D;
  animation: emkt-promo-bob 1.8s ease-in-out infinite;
}
@keyframes emkt-promo-bob{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/*
 * Desktop header: lifted into the space above the menu, sitting to
 * the left of the item so the arrow curves down onto its label.
 */
#top-bar-primary .emkt-promo-cue,
.top-bar .emkt-menu-promo > .emkt-promo-cue{
  position: absolute;
  bottom: calc(100% - 6px);
  right: 58%;
  z-index: 5;
}

/*
 * Mobile menu: a stacked list, so the cue sits in the flow directly
 * above the item rather than floating.
 */
.off-canvas .emkt-menu-promo > .emkt-promo-cue,
.mobile-ofc .emkt-menu-promo > .emkt-promo-cue{
  position: static;
  display: flex;
  justify-content: flex-start;
  padding: 8px 16px 0;
}
.off-canvas .emkt-menu-promo .emkt-promo-arrow{
  transform: rotate(18deg);
  animation: none;
}
.off-canvas .emkt-menu-promo > a{
  color: #F2B33D !important;
  font-weight: 700;
}

/* Dot on the hamburger when there is something to find inside. */
.title-bar .menu-icon.emkt-has-promo{ position: relative; }
.title-bar .menu-icon.emkt-has-promo::before{
  content: "";
  position: absolute;
  top: -3px;
  right: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #F2B33D;
  box-shadow: 0 0 0 2px #17324B;
  animation: emkt-promo-dot 2s ease-out infinite;
}
@keyframes emkt-promo-dot{
  0%   { box-shadow: 0 0 0 2px #17324B, 0 0 0 2px rgba(242,179,61,0.6); }
  70%  { box-shadow: 0 0 0 2px #17324B, 0 0 0 9px rgba(242,179,61,0); }
  100% { box-shadow: 0 0 0 2px #17324B, 0 0 0 2px rgba(242,179,61,0); }
}

@media (prefers-reduced-motion: reduce){
  .emkt-promo-arrow,
  .title-bar .menu-icon.emkt-has-promo::before{ animation: none; }
}

/* Laptop widths: the menu is tight, so shrink the label. */
@media screen and (max-width: 1100px){
  .emkt-promo-label{ font-size: 0.74rem; }
  .emkt-promo-arrow{ width: 30px; height: 25px; }
}

/* ==================================================
   58. Card covers as images (retina)
   ================================================== */
/*
 * The cover is now an <img> so it can carry srcset. object-fit makes
 * it behave exactly like the background version did — filling the
 * area and cropping the overflow — while letting the browser pick a
 * sharper file on a high-density screen.
 */
.emkt-fcard .emkt-fcard-cover--img{
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: center;
  margin: 0;
  padding: 0 !important;
  border: 0;
  background: #E9E4D6;
  background: var(--emkt-paper);
}

/* Match the tighter heights used in the denser grids. */
.listing-wrap.list-view .emkt-fcard .emkt-fcard-cover--img{ height: 150px; }
@media screen and (min-width: 1401px){
  .emkt-full-width .listing-wrap.list-view .emkt-fcard-cover--img{ height: 140px; }
}

/* The hover lift applies to the image version too. */
.emkt-fcard:hover .emkt-fcard-cover--img{ transform: scale(1.02); }
.emkt-fcard .emkt-fcard-cover--img{ transition: transform 0.25s ease; }
@media (prefers-reduced-motion: reduce){
  .emkt-fcard .emkt-fcard-cover--img{ transition: none; }
  .emkt-fcard:hover .emkt-fcard-cover--img{ transform: none; }
}

/* ==================================================
   59. Social links
   ================================================== */
.emkt-social{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.emkt-social-label{
  font-size: 0.86rem;
  font-weight: 600;
  color: #F4F1E8;
  color: var(--emkt-paper-light);
}

.emkt-social-list{
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.emkt-social-item{ margin: 0; }

.site-footer .emkt-social-item a,
body[class*="theme-"] .site-footer .emkt-social-item a{
  display: flex;
  align-items: center;
  justify-content: center;
  /* 40px keeps it a comfortable tap target on a phone. */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #F4F1E8 !important;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.site-footer .emkt-social-item a:hover,
body[class*="theme-"] .site-footer .emkt-social-item a:hover{
  transform: translateY(-2px);
  color: #FFFFFF !important;
}

/* Each network in its own colour on hover. */
.emkt-social-item--facebook a:hover{ background: #1877F2; border-color: #1877F2; }
.emkt-social-item--x a:hover{ background: #000000; border-color: #000000; }
.emkt-social-item--instagram a:hover{
  background: linear-gradient(45deg, #F09433, #DC2743, #BC1888);
  border-color: #DC2743;
}
.emkt-social-item--linkedin a:hover{ background: #0A66C2; border-color: #0A66C2; }
.emkt-social-item--youtube a:hover{ background: #FF0000; border-color: #FF0000; }

@media (prefers-reduced-motion: reduce){
  .site-footer .emkt-social-item a{ transition: none; }
  .site-footer .emkt-social-item a:hover{ transform: none; }
}

@media screen and (max-width: 560px){
  .emkt-social{ gap: 10px; }
  .emkt-social-label{ flex: 1 1 100%; text-align: center; }
}

/* ==================================================
   60. Ticker — full name on desktop, name only on mobile
   ================================================== */
/*
 * Desktop: the name takes whatever room it needs, and only shortens
 * with an ellipsis if the line genuinely runs out of space.
 */
.emkt-ticker-item a,
body[class*="theme-"] .emkt-ticker-item a{
  min-width: 0;
}
.emkt-ticker-name{
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Phone: the business name only. Town and timing are dropped so the
 * name gets the entire line rather than being squeezed into a third
 * of it.
 */
@media screen and (max-width: 640px){
  .emkt-ticker-town,
  .emkt-ticker-when{ display: none !important; }
  .emkt-ticker-name{ max-width: 100%; }
}

/* Explicit spacing so the town and timing never run together
   ("Naastoday") if the flex gap is not applied. */
.emkt-ticker-when{ margin-left: 8px; }
.emkt-ticker-town{ margin-left: 2px; }

/* ==================================================
   61. Article template — .vf-* (feature articles)
   ================================================== */
/*
 * These styles live here rather than in a <style> block inside the
 * post. WordPress strips <style> tags on save for users without the
 * unfiltered_html capability and keeps the CSS as plain text, which
 * is why the stylesheet was appearing as the article's opening
 * paragraph. Keeping it in the theme also means every article using
 * these classes is styled consistently and the CSS is cached once.
 */
.vf-wrap{
  max-width: 780px;
  margin: 0 auto;
  padding: 0 16px 60px;
  font-size: 17px;
  line-height: 1.8;
  color: #1a1d29;
  background: #fff;
}
.vf-wrap *{ box-sizing: border-box; }
.vf-wrap p{ margin: 0 0 18px; max-width: none; }
.vf-wrap p:last-child{ margin: 0; }

/* Hero */
.vf-hero{
  background: linear-gradient(135deg,#e20074 0%,#9b0050 60%,#3B5BDB 100%);
  border-radius: 14px;
  padding: 40px 32px;
  margin-bottom: 32px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.vf-hero::before{
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
}
.vf-hero-badge{
  display: inline-block;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  position: relative;
}
/*
 * The hero headline is a <p>, not an <h1>: the post title is already
 * the page's h1, and two of them on one page is an SEO problem.
 */
.vf-hero-title{
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 12px !important;
  color: #fff;
  position: relative;
}
.vf-hero p{
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  color: #fff;
  opacity: .95;
  position: relative;
}

/* Disclosure */
.vf-disclosure{
  background: #fff8e1;
  border-left: 4px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 0 0 28px;
  font-size: 14px;
  color: #78350f;
  line-height: 1.65;
}
.vf-disclosure strong{ color: #92400e; }

/* Section headings */
.vf-wrap .vf-h2{
  font-size: 22px;
  font-weight: 800;
  color: #1a1d29;
  margin: 36px 0 14px;
  padding: 10px 16px;
  background: #eef1fc;
  border-left: 4px solid #3B5BDB;
  border-radius: 0 6px 6px 0;
}

/* Stat pills */
.vf-stats{ display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.vf-stat{ flex: 1; min-width: 140px; border-radius: 10px; padding: 16px 14px; text-align: center; }
.vf-stat.red{ background: #fff0f5; border: 1px solid #ffc9d9; }
.vf-stat.blue{ background: #eef1fc; border: 1px solid #c5d0f5; }
.vf-stat.green{ background: #e7f7f1; border: 1px solid #b2e8d5; }
.vf-stat.orange{ background: #fff4e6; border: 1px solid #ffd8a8; }
.vf-stat .sv{ font-size: 26px; font-weight: 800; margin-bottom: 4px; color: #1a1d29; }
.vf-stat .sl{ font-size: 13px; color: #4a5568; line-height: 1.4; }

/* Highlight box */
.vf-highlight{
  background: #e7f7f1;
  border-left: 5px solid #00a878;
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin: 24px 0;
  font-size: 16px;
  color: #1a1d29;
  line-height: 1.75;
}

/* Experience cards */
.vf-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.vf-card{ border-radius: 10px; padding: 20px 18px; }
.vf-card.red{ background: #fff0f5; border: 1px solid #ffc9d9; }
.vf-card.blue{ background: #eef1fc; border: 1px solid #c5d0f5; }
.vf-card.green{ background: #e7f7f1; border: 1px solid #b2e8d5; }
.vf-card.purple{ background: #f3f0ff; border: 1px solid #d0c8f5; }
.vf-card-icon{ font-size: 26px; margin-bottom: 8px; }
.vf-wrap .vf-card h3{ font-size: 15px; font-weight: 700; margin: 0 0 6px; color: #1a1d29; }
.vf-card p{ font-size: 14px; margin: 0 !important; color: #4a5568; line-height: 1.6; }

/* Pull quote */
.vf-quote{ background: #fff0f5; border-radius: 12px; padding: 24px 28px; margin: 32px 0; text-align: center; }
.vf-quote p{ font-size: 20px; font-weight: 700; color: #9b0050; line-height: 1.5; margin: 0 !important; font-style: italic; }

/* Body text */
.vf-body{ color: #1a1d29; margin: 0 0 18px; line-height: 1.8; }

@media (max-width: 540px){
  .vf-hero{ padding: 28px 18px; }
  .vf-hero-title{ font-size: 24px; }
  .vf-stats{ flex-direction: column; }
}

/* ==================================================
   62. Blog cards
   ================================================== */
/*
 * ClassiPress forces the post title onto a single line:
 *
 *   .post-item .entry-title { white-space: nowrap; text-overflow: ellipsis }
 *
 * On a phone that cuts almost every headline to a few words. The
 * title is allowed to wrap here, capped at three lines so cards stay
 * a similar height.
 */
.post-item .entry-title,
.post-search .entry-title,
.listing-item .entry-title{
  white-space: normal !important;
  text-overflow: clip !important;
  /*
   * Clamped by height, NOT by display:-webkit-box.
   *
   * The -webkit-box approach needs -webkit-box-orient:vertical to
   * work, and that property is routinely stripped by CSS minifiers
   * and "remove unused CSS" tools because it is non-standard. When
   * it goes, the box falls back to HORIZONTAL layout and, with
   * overflow hidden on a narrow screen, the text collapses to
   * nothing — the card renders blank on mobile while still looking
   * fine on a wide desktop.
   *
   * A max-height fails the safe way instead: if anything goes wrong
   * the worst case is that more text shows, never less.
   */
  max-height: calc(1.3em * 3);
  overflow: hidden !important;
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

/*
 * The summary has a fixed max-height of 10.5rem — over 400px when a
 * post has no thumbnail — which left a large blank gap under short
 * excerpts. A line clamp sizes it to the text instead, and the fade
 * that cut the last line mid-word is removed.
 */
.post-item .subheader{
  /* Height clamp, for the same fail-safe reason as the title. */
  max-height: calc(1.55em * 3) !important;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.post-item.no-thumbnail .subheader{ max-height: none !important; }

/* The excerpt wraps a paragraph; its margins would otherwise push the
   clamp off a clean line boundary and leave a sliver of the next line. */
.post-item .subheader > p{
  margin: 0;
  max-width: none;
}
.post-item .subheader > p + p{ margin-top: 0.5em; }

/* Remove the gradient that faded the text out mid-sentence. */
.post-item .subheader:after,
.item-single-featured .subheader:after{
  content: none !important;
  display: none !important;
  background: none !important;
}

/*
 * The featured image is shown in a fixed-height box, which crops wide
 * banners through the middle. object-fit keeps the centre of the
 * image and a shorter box on phones stops it dominating the card.
 */
.post-item .entry-cover,
.post-item .item-cover{
  height: 190px;
  padding: 0 !important;
  background-size: cover;
  background-position: center;
}
.post-item .entry-cover img,
.post-item .item-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media screen and (max-width: 640px){
  .post-item .entry-cover,
  .post-item .item-cover{ height: 150px; }
  .post-item .entry-title,
  .post-search .entry-title{ font-size: 1.05rem; }
  .post-item .subheader{ max-height: calc(1.55em * 4) !important; }
  .post-item .content-inner{ padding: 1em; }
}

/* ==================================================
   63. Single post layout
   ================================================== */
/*
 * The blog sidebar pushes the article off to one side, and the
 * remaining column is narrow. Articles read better centred with a
 * comfortable measure, so on a single post the main column takes the
 * full row and the sidebar is dropped.
 */
.single-post #main.site-main,
.single-post main#main,
.single .site-main{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
  margin: 0 auto !important;
}

/*
 * Named sidebar elements only. A bare ".sidebar" was also listed
 * here, which is far too generic to hide with !important — any
 * wrapper that happened to carry it would take the article with it.
 */
.single-post #secondary,
.single-post .sidebar-blog,
.single-post aside.widget-area{
  display: none !important;
}

/* Centre the article and give it a wider measure. */
.single-post .entry-content,
.single-post .content-inner{
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.vf-wrap{
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/*
 * The hero badge is a pill sitting above the headline. If the markup
 * ever loses its closing tag the pill would swallow the rest of the
 * hero, so its size is capped and the uppercase styling is confined
 * to the badge itself — the headline and body keep normal casing
 * whatever happens around them.
 */
.vf-hero-badge{
  max-width: 100%;
  width: auto;
  text-transform: uppercase;
}
.vf-hero-title,
.vf-hero p,
.vf-wrap p,
.vf-wrap h2,
.vf-wrap h3{
  text-transform: none !important;
  letter-spacing: normal;
}

@media screen and (max-width: 900px){
  .vf-wrap{ max-width: 100%; padding: 0 14px 44px; }
}

/* ==================================================
   64. Content safety net
   ================================================== */
/*
 * A guard against the whole class of bug that made the blog render
 * blank on phones: a clamped element collapsing to zero height.
 *
 * Any element that clamps text keeps a floor height of one line, so
 * the worst possible outcome is a single visible line rather than an
 * empty card. These use min-height, which cannot fight the max-height
 * clamps above — it only stops them reaching zero.
 */
.post-item .entry-title,
.post-search .entry-title,
.listing-item .entry-title,
.post-item .subheader{
  min-height: 1.2em;
}

/*
 * The article body must always be visible and laid out normally,
 * whatever a caching or CSS-optimisation layer does to the rules
 * above it.
 */
.single-post .entry-content,
.single-post .content-inner,
.single-post .vf-wrap,
.vf-wrap{
  display: block !important;
  visibility: visible !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Never let the main column collapse on a narrow screen. */
@media screen and (max-width: 640px){
  .single-post #main.site-main,
  .single-post main#main,
  .blog #main.site-main{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    display: block !important;
    overflow: visible !important;
  }
  .post-item .content-inner,
  .post-item .content-wrap{
    display: block !important;
    overflow: visible !important;
  }
}

/* ==================================================
   65. Single post cover (blog articles)
   ================================================== */
/*
 * The cover above a blog article was left running on ClassiPress's
 * raw rules, and two of them combine badly on a phone:
 *
 *   .fixed-cover { background-attachment: fixed }
 *   .entry-cover.has-image:after { position:absolute; inset:0;
 *                                  background:rgba(0,0,0,.35);
 *                                  z-index:5 }
 *
 * Mobile browsers handle background-attachment:fixed poorly — the
 * background is painted against the viewport rather than the element,
 * which stretches the cover and leaves the article pushed far down
 * an apparently empty screen. The dark overlay is the same element
 * that made the home page hero unclickable in v2.1.0.
 *
 * The background is set to scroll, the cover is given a bounded
 * height, and the overlay is stopped from intercepting anything.
 */
.fixed-cover,
.single-post .fixed-cover,
.single .entry-cover.fixed-cover{
  background-attachment: scroll !important;
}

/*
 * Scoped to blog posts only. This previously also read
 * ".single .entry-cover.fixed-cover", which matched business listings
 * as well and quietly capped their cover height — a change that was
 * never asked for. Listings keep their own cover untouched.
 */
.single-post .entry-cover{
  height: auto;
  min-height: 0;
  max-height: 46vh;
  overflow: hidden;
}

/* The overlay must never sit over anything but its own image. */
.single-post .entry-cover.has-image::after,
.single .entry-cover.fixed-cover::after{
  pointer-events: none !important;
  z-index: 1 !important;
}

/* The article must always paint above any cover artefact. */
.single-post #primary,
.single-post #main.site-main,
.single-post .content-inner,
.single-post .entry-content{
  position: relative;
  z-index: 10;
  background: transparent;
}

@media screen and (max-width: 640px){
  /*
   * A short, predictable banner on a phone. Without a cap the cover
   * can take the whole screen and the article looks blank until you
   * scroll past it.
   */
  .single-post .entry-cover,
  .single .entry-cover.fixed-cover{
    max-height: 30vh;
    min-height: 120px;
  }

  /* Belt and braces: the article body is never hidden or collapsed. */
  .single-post #main.site-main,
  .single-post .content-inner,
  .single-post .entry-content,
  .single-post .vf-wrap{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }
}

/* ==================================================
   66. Blog article (child single.php)
   ================================================== */
/*
 * The article layout no longer borrows anything from ClassiPress.
 * Its wrapper, cover and body all use emkt- class names that appear
 * nowhere in the parent theme, so no parent rule can clip, clamp or
 * hide them. The layout is plain block flow: if this stylesheet is
 * ever stripped by an optimiser the article still reads as a normal
 * column of text instead of collapsing to an empty screen.
 */
/*
 * border-box inside the article subtree only. Foundation sets this
 * globally, but this layout is deliberately independent of the parent
 * theme's CSS — without it, width:100% plus padding overflows the
 * viewport and the page scrolls sideways on a phone.
 */
.emkt-article-main,
.emkt-article-main *{
  box-sizing: border-box;
}

.emkt-article-main,
.emkt-article{
  display: block;
  width: 100%;
}

.emkt-article-cover{
  display: block;
  position: relative;
  text-align: center;
  background-color: #1a1d29;
}

/*
 * The banner photo.
 *
 * Full width of the window, at the photo's own proportions, so the
 * whole picture is visible. It used to be a background image cropped
 * by background-size:cover to whatever height the title needed, which
 * sliced a band out of the middle and cut off whatever the photo was
 * actually of.
 *
 * A very tall photo makes a very tall banner — that is the trade: a
 * portrait image cannot both fill the width and be shown complete.
 * Landscape images, which is what a blog header normally uses, come
 * out edge to edge at a sensible height.
 */
.emkt-article-cover-img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  /* Shows through for a moment while the photo loads. */
  background-color: #1a1d29;
}

/*
 * Title block. It sits below the photo rather than on top of it, so
 * nothing covers the subject and no darkening scrim is needed.
 */
.emkt-article-cover-inner{
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 20px;
}

.emkt-article-title{
  margin: 0 0 10px;
  color: #fff;
  font-size: 2rem;
  line-height: 1.25;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
}

.emkt-article-meta{
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}
.emkt-article-sep{ margin: 0 6px; }

.emkt-article-body{
  display: block;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 16px 56px;
  background: #fff;
  color: #1a1d29;
  font-size: 17px;
  line-height: 1.8;
}
.emkt-article-body p{ max-width: none; }

/* The article HTML brings its own wrapper; don't double the gutters. */
.emkt-article-body .vf-wrap{
  max-width: none;
  padding: 0;
}

.emkt-article-back{ margin: 36px 0 0; }
.emkt-article-back a{ font-weight: 700; }

@media screen and (max-width: 640px){
  .emkt-article-cover-inner{ padding: 26px 16px; }
  .emkt-article-title{ font-size: 1.5rem; }
  .emkt-article-body{
    padding: 22px 14px 44px;
    font-size: 16px;
  }
}

/* ==================================================
   67. Cookie banner on phones (11.9.2)
   ================================================== */
/*
 * The banner was 428px tall on a 390px-wide phone — just over half
 * the screen, and two thirds of it inside an app's built-in browser
 * (X, Facebook, LinkedIn), where the app's own toolbars take a slice
 * off the bottom. The Accept button sat 16px from the bottom edge,
 * which is exactly where those toolbars land, so it could not be
 * tapped and the banner appeared stuck.
 *
 * This makes it roughly a quarter of the screen, turns the two
 * choices into real buttons rather than text links, and keeps a
 * generous gap below them so an overlaying toolbar cannot cover them.
 */
@media screen and (max-width: 640px){

  /*
   * No max-height and no scrolling on the banner itself. Capping it
   * was the first thing tried here and it made matters worse: the
   * banner became a scroll container and the buttons ended up below
   * its visible edge, so they were harder to reach than before. The
   * height is controlled by trimming the message instead, which keeps
   * the buttons in normal flow where they can always be seen.
   */
  .emkt-cookie-inner{
    padding: 12px 16px;
    /*
     * Clearance below the buttons. env() covers the iPhone home
     * indicator; the 26px covers an in-app browser's toolbar, which
     * has no CSS equivalent and has to be allowed for by hand.
     */
    padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }

  /*
   * THE actual cause of the oversized banner.
   *
   * .emkt-cookie-body carries "flex: 1 1 320px" for the desktop
   * layout, where the row direction makes 320px a width. On a phone
   * the container becomes a column, and that same basis turns into a
   * 320px minimum HEIGHT — a box that tall holding about 57px of
   * text. That empty space, not the wording, was over two thirds of
   * the banner's height, and it pushed the buttons to the very bottom
   * edge where an app's toolbar covers them.
   */
  .emkt-cookie-body{
    flex: 0 1 auto;
  }

  .emkt-cookie-heading{
    font-size: 1rem;
    line-height: 1.3;
  }

  /*
   * Four lines at most. A safety net for a long message typed into
   * the Customizer — the point of the notice is in its first line,
   * and the policy link below carries the detail. max-height rather
   * than -webkit-line-clamp: minifiers strip -webkit-box-orient, and
   * a clamp without it collapses the text entirely.
   */
  .emkt-cookie-text{
    font-size: 0.85rem;
    line-height: 1.45;
    max-height: calc(1.45em * 4);
    overflow: hidden;
  }

  .emkt-cookie-more{ margin-top: 2px; }
  .emkt-cookie .emkt-cookie-more a{ font-size: 0.82rem; }

  /* Two real buttons, side by side, each half the width. */
  .emkt-cookie-actions{
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    margin-top: 2px;
  }

  .emkt-cookie .emkt-cookie-link{
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;          /* a comfortable thumb target */
    padding: 11px 10px;
    border-radius: 8px;
    font-size: 0.95rem;
    text-align: center;
    white-space: nowrap;
  }

  .emkt-cookie .emkt-cookie-yes{
    background: #C8963E;
    background: var(--emkt-gold, #C8963E);
    color: #1A1A1A;
  }

  .emkt-cookie .emkt-cookie-settings{
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #F0F0F0;
  }

  .emkt-cookie .emkt-cookie-link:hover,
  .emkt-cookie .emkt-cookie-link:focus{
    opacity: 0.92;
  }
}

/* ==================================================
   68. Gallery: one fixed shape for every photo (11.9.3)
   ================================================== */
/*
 * The gallery used to size itself to each photo — height:auto on the
 * image plus Slick's adaptiveHeight. A listing mixing portrait and
 * landscape shots therefore grew and shrank on every slide, which is
 * distracting to watch and shoves the content below it up and down.
 *
 * Every slide is now the same 4:3 box and the photo fills it, so the
 * gallery never changes height no matter what is uploaded.
 *
 * To show whole photos instead of filling the box, change
 * object-fit below from "cover" to "contain". Nothing is cropped
 * then, but tall or wide photos get bars at the sides on the dark
 * background. Cropping is the default because it looks tidier and
 * the thumbnail strip still shows each photo in full.
 */
.emkt-gallery-main .emkt-gallery-slide{
  position: relative;
  display: block;
  width: 100%;
  /* Fallback for browsers without aspect-ratio. */
  height: 360px;
}

@supports (aspect-ratio: 4 / 3){
  .emkt-gallery-main .emkt-gallery-slide{
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

.emkt-gallery-main .emkt-gallery-slide > a{
  display: block;
  width: 100%;
  height: 100%;
}

.emkt-gallery-main .emkt-gallery-slide img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
  background: #0F2436;
  background: var(--emkt-navy-dark, #0F2436);
}

/*
 * The caption sits over the photo rather than under it. Only some
 * images have one, and a caption in the flow made those slides taller
 * than the rest — the same jumping the fixed shape above is meant to
 * remove.
 */
.emkt-gallery-main .emkt-gallery-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 26px 14px 10px;
  background: linear-gradient(to top, rgba(15, 36, 54, 0.88), rgba(15, 36, 54, 0));
  color: #FFFFFF;
  font-size: 0.85rem;
  line-height: 1.45;
  /* Two lines at most, so a long caption cannot cover the photo. */
  max-height: calc(1.45em * 2 + 36px);
  overflow: hidden;
  pointer-events: none;
}

@media screen and (max-width: 480px){
  .emkt-gallery-main .emkt-gallery-slide{ height: 260px; }
  @supports (aspect-ratio: 4 / 3){
    .emkt-gallery-main .emkt-gallery-slide{ height: auto; }
  }
  .emkt-gallery-main .emkt-gallery-caption{ font-size: 0.8rem; }
}

/* ==================================================
   69. Slider arrows (11.9.4)
   ================================================== */
/*
 * Every carousel arrow on the site was showing as a blank square.
 *
 * Slick draws its arrows as a glyph: slick-theme.css sets
 * content:'←' on .slick-prev:before in a webfont called "slick".
 * This theme dequeues Slick's stylesheets (they were dropped in 7.6.0,
 * while keeping the script, because removing the script broke the
 * Create Listing flow), so neither the rule nor the font ever loads
 * and the button renders as an empty box.
 *
 * The arrow is drawn here with two borders instead — no font, nothing
 * to download, and nothing that can fail to load. This covers the
 * listings carousel, the partners band and the listing photo gallery
 * in one place.
 */
.slick-prev,
.slick-next{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(23, 50, 75, 0.88);
  background: rgba(23, 50, 75, 0.88);
  cursor: pointer;
  z-index: 3;
  /* Slick's markup puts the words "Previous"/"Next" inside the
     button; without Slick's own CSS they would otherwise show. */
  font-size: 0;
  line-height: 0;
  color: transparent;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  transition: background 0.18s ease;
}

.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus,
.slick-next:focus{
  background: rgba(200, 150, 62, 0.95);
  background: rgba(200, 150, 62, 0.95);
}

/* The chevron: a square with two sides, turned 45 degrees. */
.slick-prev::before,
.slick-next::before{
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  opacity: 1;
  font-size: 0;
}

.slick-prev::before{
  transform: rotate(-135deg);
  margin-left: 3px;   /* optical centring for the turned square */
}

.slick-next::before{
  transform: rotate(45deg);
  margin-right: 3px;
}

/* Greyed out rather than invisible when there is nowhere to go. */
.slick-prev.slick-disabled,
.slick-next.slick-disabled{
  opacity: 0.35;
  cursor: default;
}

/* Over a photo the arrows sit inside the frame, so they are darker. */
.emkt-gallery-main .slick-prev,
.emkt-gallery-main .slick-next{
  background: rgba(15, 36, 54, 0.6);
}
.emkt-gallery-main .slick-prev:hover,
.emkt-gallery-main .slick-next:hover{
  background: rgba(15, 36, 54, 0.9);
}

@media screen and (max-width: 640px){
  .slick-prev,
  .slick-next{
    width: 34px;
    height: 34px;
  }
}

/* ==================================================
   70. Web design service CTA (11.9.5)
   ================================================== */
/*
 * A band selling the web design service. The artwork on the right is
 * a browser window and a phone drawn entirely with boxes and
 * background colours — no image is requested, so the band cannot slow
 * the home page or show a broken picture.
 */
.emkt-web{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #17324B;
  background:
    radial-gradient(circle at 88% 18%, rgba(200,150,62,0.20) 0%, rgba(200,150,62,0) 45%),
    linear-gradient(135deg, #17324B 0%, #102538 55%, #0C1C2B 100%);
  color: #F4F1E8;
}
.emkt-web *{ box-sizing: border-box; }

/* A thin gold rule along the top edge. */
.emkt-web::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #C8963E, #E0A63F 45%, rgba(200,150,62,0));
}

.emkt-web-inner{
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 38px;
}

.emkt-web-copy{ flex: 1 1 460px; min-width: 0; }
.emkt-web--noart .emkt-web-copy{ flex: 1 1 100%; text-align: center; }

.emkt-web-eyebrow{
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 13px;
  border: 1px solid rgba(200,150,62,0.5);
  border-radius: 20px;
  color: #E0A63F;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.3;
}

.emkt-web-heading{
  margin: 0 0 12px;
  color: #FFFFFF;
  font-family: var(--emkt-font-display, Georgia, serif);
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.18;
  text-transform: none;
  letter-spacing: normal;
}

.emkt-web-text{
  margin: 0 0 18px;
  max-width: 54ch;
  color: rgba(244,241,232,0.86);
  font-size: 1rem;
  line-height: 1.62;
}
.emkt-web--noart .emkt-web-text{ margin-left: auto; margin-right: auto; }

/* Selling points: two columns on a wide screen, one on a phone. */
.emkt-web-points{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 22px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.emkt-web-points li{
  position: relative;
  margin: 0;
  padding-left: 27px;
  color: #F4F1E8;
  font-size: 0.93rem;
  line-height: 1.45;
}
/* A gold tick, drawn rather than typed, so no icon font is needed. */
.emkt-web-points li::before{
  content: "";
  position: absolute;
  left: 2px;
  top: 0.32em;
  width: 6px;
  height: 11px;
  border-right: 2px solid #E0A63F;
  border-bottom: 2px solid #E0A63F;
  transform: rotate(45deg);
}

.emkt-web-action{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.emkt-web--noart .emkt-web-action{ justify-content: center; }

.emkt-web .emkt-web-btn{
  display: inline-block;
  padding: 14px 32px;
  border-radius: 8px;
  background: linear-gradient(180deg, #E0A63F 0%, #C8963E 100%);
  color: #10243A !important;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(200,150,62,0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.emkt-web .emkt-web-btn:hover,
.emkt-web .emkt-web-btn:focus{
  transform: translateY(-1px);
  box-shadow: 0 9px 24px rgba(200,150,62,0.38);
  color: #10243A !important;
}

.emkt-web-small{
  color: rgba(244,241,232,0.78);
  font-size: 0.9rem;
}

.emkt-web-note{
  margin: 14px 0 0;
  color: rgba(244,241,232,0.6);
  font-size: 0.83rem;
}

/* ---------- the drawn mockup ---------- */
.emkt-web-art{
  position: relative;
  flex: 0 0 340px;
  align-self: center;
}

.emkt-web-browser{
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 18px 44px rgba(0,0,0,0.42);
}

.emkt-web-bar{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: #E8EBF0;
}
.emkt-web-bar span{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #C6CBD4;
}
.emkt-web-bar span:first-child{ background: #E88B7D; }
.emkt-web-bar span:nth-child(2){ background: #E8C57D; }
.emkt-web-bar span:nth-child(3){ background: #8FC79A; }

.emkt-web-screen{ padding: 0 0 14px; background: #FFFFFF; }

.emkt-web-nav{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #17324B;
}
.emkt-web-nav b{
  width: 54px;
  height: 8px;
  border-radius: 3px;
  background: #E0A63F;
}
.emkt-web-nav i{
  width: 24px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.45);
}
.emkt-web-nav i:first-of-type{ margin-left: auto; }

.emkt-web-hero{ padding: 18px 14px 14px; }
.emkt-web-h1{
  width: 78%;
  height: 13px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #1A2B3D;
}
.emkt-web-h2{
  width: 56%;
  height: 8px;
  margin-bottom: 14px;
  border-radius: 4px;
  background: #AEB7C2;
}
.emkt-web-pill{
  width: 92px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(180deg, #E0A63F, #C8963E);
}

.emkt-web-tiles{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 14px;
}
.emkt-web-tiles div{
  height: 42px;
  border-radius: 6px;
  background: #EDF0F5;
  border: 1px solid #E0E4EB;
}

/* The phone overlaps the browser's bottom-left corner. */
.emkt-web-phone{
  position: absolute;
  left: -26px;
  bottom: -22px;
  width: 92px;
  padding: 7px 5px;
  border-radius: 13px;
  background: #0C1C2B;
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.emkt-web-phone-screen{
  padding: 9px 7px;
  border-radius: 8px;
  background: #FFFFFF;
}
.emkt-web-pnav{
  height: 14px;
  margin-bottom: 8px;
  border-radius: 3px;
  background: #17324B;
}
.emkt-web-pline{
  height: 6px;
  margin-bottom: 5px;
  border-radius: 3px;
  background: #C9D0DA;
}
.emkt-web-pline.is-short{ width: 62%; }
.emkt-web-pbtn{
  height: 15px;
  margin-top: 9px;
  border-radius: 4px;
  background: linear-gradient(180deg, #E0A63F, #C8963E);
}

/* ---------- narrower screens ---------- */
@media screen and (max-width: 900px){
  .emkt-web-inner{
    flex-direction: column;
    gap: 32px;
    padding: 34px 24px;
    text-align: center;
  }
  .emkt-web-copy{ flex: 1 1 100%; }
  .emkt-web-text{ margin-left: auto; margin-right: auto; }
  .emkt-web-points{ text-align: left; max-width: 430px; margin-left: auto; margin-right: auto; }
  .emkt-web-action{ justify-content: center; }
  .emkt-web-art{ flex: 0 0 auto; width: 300px; margin: 0 auto; }
}

@media screen and (max-width: 560px){
  .emkt-web-inner{ padding: 28px 18px; gap: 26px; }
  .emkt-web-heading{ font-size: 1.55rem; }
  .emkt-web-text{ font-size: 0.95rem; }
  .emkt-web-points{
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: 320px;
  }
  .emkt-web .emkt-web-btn{ display: block; width: 100%; text-align: center; }
  .emkt-web-action{ width: 100%; }
  .emkt-web-small{ width: 100%; text-align: center; }
  /* The mockup is decoration; below this width the copy matters more. */
  .emkt-web-art{ display: none; }
}

/* ==================================================
   71. Web design CTA — price badge (11.9.6)
   ================================================== */
/*
 * A price is the first thing a tradesman looks for, so it gets its
 * own block rather than a mention inside a sentence. The lead-in
 * stays quiet and the amount is large and gold, so the eye lands on
 * the number and then on the button directly beneath it.
 */
.emkt-web-price{
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 20px;
  padding: 10px 20px;
  border: 1px solid rgba(200, 150, 62, 0.4);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.emkt-web-price-label{
  color: rgba(244, 241, 232, 0.82);
  font-size: 0.92rem;
  line-height: 1.4;
}

.emkt-web-price-value{
  color: #E0A63F;
  font-family: var(--emkt-font-display, Georgia, serif);
  font-size: 1.62rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 900px){
  /* Centred with the rest of the stacked layout. */
  .emkt-web-price{ margin-left: auto; margin-right: auto; }
}

@media screen and (max-width: 560px){
  .emkt-web-price{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
  }
  .emkt-web-price-value{ font-size: 1.5rem; }
}

/* ==================================================
   72. Town & category directory pages (11.10.0)
   ================================================== */
.emkt-local{ display: block; width: 100%; }
.emkt-local *{ box-sizing: border-box; }

.emkt-local-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 20px 60px;
}

.emkt-local-crumbs{
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: #5a6272;
}
.emkt-local-crumbs a{ text-decoration: none; }
.emkt-local-crumbs span{ margin: 0 6px; color: #9aa3b0; }

.emkt-local-title{
  margin: 0 0 10px;
  font-size: 2rem;
  line-height: 1.2;
  text-transform: none;
}

.emkt-local-intro{
  margin: 0 0 26px;
  max-width: 70ch;
  color: #4a5568;
  font-size: 1rem;
  line-height: 1.65;
}

/* ---- the index of towns ---- */
.emkt-local-towns{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.emkt-local-towns a{
  display: block;
  padding: 16px 18px;
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.emkt-local-towns a:hover{
  border-color: #C8963E;
  transform: translateY(-1px);
}
.emkt-local-town-name{
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #17324B;
}
.emkt-local-town-count{
  display: block;
  margin-top: 3px;
  font-size: 0.85rem;
  color: #6b7280;
}

/* ---- category chips ---- */
.emkt-local-cats{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
.emkt-local-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid #dfe3ea;
  border-radius: 20px;
  background: #fff;
  color: #17324B;
  font-size: 0.88rem;
  text-decoration: none;
  line-height: 1.3;
}
.emkt-local-chip:hover{ border-color: #C8963E; color: #17324B; }
.emkt-local-chip.is-on{
  background: #17324B;
  border-color: #17324B;
  color: #fff;
}
.emkt-local-chip-n{
  font-size: 0.76rem;
  opacity: 0.7;
}

/* ---- listing cards ---- */
.emkt-local-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
  margin: 0 0 30px;
}

.emkt-local-card{
  display: flex;
  flex-direction: column;
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* A fixed shape, so a tall photo cannot make one card taller than
   its neighbours and leave the grid ragged. */
.emkt-local-card-media{
  display: block;
  width: 100%;
  height: 160px;
  background: #eef1f5;
}
.emkt-local-card-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.emkt-local-card-blank{
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8ecf2, #dfe4ec);
}

.emkt-local-card-body{ padding: 14px 16px 16px; }

.emkt-local-card-title{
  margin: 0 0 4px;
  font-size: 1.02rem;
  line-height: 1.32;
  text-transform: none;
  white-space: normal;
}
.emkt-local-card-title a{ text-decoration: none; }

.emkt-local-card-cat{
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #C8963E;
}
.emkt-local-card-addr{
  margin: 0 0 6px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #5a6272;
}
.emkt-local-card-phone{ margin: 0; font-size: 0.9rem; font-weight: 700; }

.emkt-local-empty{
  padding: 26px;
  border: 1px dashed #d4d9e2;
  border-radius: 10px;
  color: #5a6272;
  text-align: center;
}

/* ---- pager ---- */
.emkt-local-pager{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}
.emkt-local-pager .page-numbers{
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid #dfe3ea;
  border-radius: 7px;
  background: #fff;
  text-decoration: none;
  font-size: 0.9rem;
}
.emkt-local-pager .page-numbers.current{
  background: #17324B;
  border-color: #17324B;
  color: #fff;
}

/* ---- other towns ---- */
.emkt-local-other{
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid #e4e8ee;
}
.emkt-local-other-title{
  margin: 0 0 10px;
  font-size: 1.05rem;
  text-transform: none;
}
.emkt-local-other-links a{
  display: inline-block;
  margin: 0 14px 6px 0;
  font-size: 0.92rem;
}

.emkt-local-btn{
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  background: #C8963E;
  color: #10243A !important;
  font-weight: 700;
  text-decoration: none;
}

@media screen and (max-width: 640px){
  .emkt-local-inner{ padding: 22px 14px 44px; }
  .emkt-local-title{ font-size: 1.5rem; }
  .emkt-local-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .emkt-local-card-media{ height: 110px; }
  .emkt-local-card-body{ padding: 11px 12px 13px; }
  .emkt-local-card-title{ font-size: 0.94rem; }
  .emkt-local-towns{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ==================================================
   73. Related listings widget (11.10.0)
   ================================================== */
.emkt-related{ display: block; }

.emkt-related-heading{
  margin: 0 0 12px;
  font-size: 1.1rem;
  line-height: 1.3;
  text-transform: none;
}

.emkt-related-list{
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.emkt-related-item{ margin: 0; border-bottom: 1px solid #e8ebf0; }
.emkt-related-item:last-child{ border-bottom: 0; }

.emkt-related-link{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  text-decoration: none;
}
.emkt-related-link:hover .emkt-related-name{ text-decoration: underline; }

.emkt-related-name{
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}
.emkt-related-town{
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: #6b7280;
}

.emkt-related-more{
  margin: 0;
  font-size: 0.88rem;
}
.emkt-related-more span{ margin: 0 6px; color: #9aa3b0; }

/* ==================================================
   74. Popular searches widget (11.11.0)
   ================================================== */
/*
 * Links to the town and category pages, as pills. Two colour
 * treatments: dark for the footer, light for a page. The widget
 * chooses between them with a setting rather than guessing from its
 * surroundings, which cannot be done reliably in CSS.
 */
.emkt-pop{ display: block; }
.emkt-pop *{ box-sizing: border-box; }

.emkt-pop-heading{
  margin: 0 0 5px;
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
}

.emkt-pop-sub{
  margin: 0 0 14px;
  max-width: 60ch;
  font-size: 0.9rem;
  line-height: 1.55;
}

.emkt-pop-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.emkt-pop-item{ margin: 0; }

.emkt-pop .emkt-pop-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 40px keeps it a comfortable tap target on a phone. */
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 22px;
  font-size: 0.88rem;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.emkt-pop-n{
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 7px;
}

.emkt-pop-all{
  display: inline-block;
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

/* ---- on the dark footer ---- */
.emkt-pop--dark .emkt-pop-heading{ color: #FFFFFF; }
.emkt-pop--dark .emkt-pop-sub{ color: rgba(226, 232, 240, 0.68); }

.emkt-pop--dark .emkt-pop-link{
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: #EEF2F7;
}
.emkt-pop--dark .emkt-pop-link:hover,
.emkt-pop--dark .emkt-pop-link:focus{
  border-color: #C8963E;
  background: rgba(200, 150, 62, 0.12);
  color: #FFFFFF;
}
.emkt-pop--dark .emkt-pop-n{
  color: #F0D8A8;
  background: rgba(200, 150, 62, 0.22);
}
.emkt-pop--dark .emkt-pop-all{ color: #E0A63F; }
.emkt-pop--dark .emkt-pop-all:hover{ color: #FFFFFF; }

/* ---- on a light page ---- */
.emkt-pop--light .emkt-pop-heading{ color: #17324B; }
.emkt-pop--light .emkt-pop-sub{ color: #5a6272; }

.emkt-pop--light .emkt-pop-link{
  border: 1px solid #cfd6e2;
  background: #FFFFFF;
  color: #17324B;
}
.emkt-pop--light .emkt-pop-link:hover,
.emkt-pop--light .emkt-pop-link:focus{
  border-color: #C8963E;
  background: #fffdf8;
  color: #17324B;
}
.emkt-pop--light .emkt-pop-n{
  color: #5d6676;
  background: #EEF1F6;
}
.emkt-pop--light .emkt-pop-all{ color: #17324B; }

@media screen and (max-width: 640px){
  /*
   * Past the mobile limit the extras are hidden, not removed — they
   * stay in the HTML so a search engine still follows them, while a
   * phone gets a short list instead of a wall of links.
   */
  .emkt-pop-item.is-extra{ display: none; }

  .emkt-pop-heading{ font-size: 1.05rem; }
  .emkt-pop-sub{ font-size: 0.86rem; margin-bottom: 12px; }
  .emkt-pop-list{ gap: 7px; }
  .emkt-pop .emkt-pop-link{
    font-size: 0.85rem;
    padding: 8px 12px;
    /* Long labels wrap inside the pill rather than overflow. */
    max-width: 100%;
  }
  .emkt-pop-label{ min-width: 0; }
}

/* ==================================================
   75. (removed in 11.12.4)
   ==================================================
   The four-across grid rules lived here. They never produced four
   tiles on this site, and they did real damage: nothing in them
   excluded the Featured Listings carousel, so its container became a
   four-column grid and the whole slider was squeezed into one cell —
   about a quarter of the width, with the cards crushed to roughly
   70px and their titles and buttons overlapping.

   Removed rather than patched. The listing areas go back to the
   layout ClassiPress produces on its own, which is what the site had
   before any of this.
   ================================================== */

/* ==================================================
   76. Listing tiles on a phone (11.12.8)
   ================================================== */
/*
 * The two-across layout itself is set by assets/js/listing-grid.js,
 * as inline styles — the CSS optimiser on this site strips rules
 * whose selectors it cannot find in the page's HTML, and classes
 * added by a script are never in the HTML.
 *
 * What is left here is only the tile's own proportions, which use
 * class names that DO appear in the markup and therefore survive.
 * If they are ever stripped the layout still works; the tiles are
 * just less uniform.
 *
 * Nothing here touches a carousel.
 */
@media screen and (max-width: 768px){
  .emkt-fcard-cover,
  .emkt-fcard-cover--img{ height: 104px !important; }

  .emkt-fcard-title{
    font-size: 0.88rem;
    line-height: 1.25;
    /* Three lines at most, so neighbouring tiles stay level. */
    max-height: calc(1.25em * 3);
    overflow: hidden;
  }

  /* Unreadable in a 175px tile, and it pushed the button off screen. */
  .emkt-fcard-excerpt,
  .emkt-fcard-address{ display: none; }

  .emkt-fcard-body{ padding: 10px 10px 12px; }

  .emkt-fcard-logo{
    width: 54px; height: 54px; margin: -27px auto 0; border-width: 3px;
  }

  .emkt-fcard-tags .emkt-fcard-tag{ font-size: 0.66rem; padding: 3px 7px; }

  .emkt-fcard-actions{ display: flex; flex-direction: column; gap: 6px; }
  .emkt-fcard-actions .emkt-fcard-btn{
    width: 100%; min-height: 38px; padding: 8px 6px;
    font-size: 0.76rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
}

/* ==================================================
   77. Floating WhatsApp button (11.16.0)
   ==================================================

   Bottom left by default, because the back-to-top arrow
   sits in the bottom right corner.

   The cookie banner is a full-width bar fixed to the bottom
   with z-index 9999, so while it is showing it would sit on
   top of this button. The sibling rule below lifts the button
   clear of it, and it drops back once the banner is dismissed.
   This works because the button is printed at wp_footer
   priority 25, after the banner at 20.
   -------------------------------------------------- */

.emkt-wa{
  position: fixed;
  bottom: 20px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.emkt-wa--left{ left: 20px; }
.emkt-wa--right{ right: 20px; }

.emkt-wa-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}

/* Icon only by default: the label is there for screen readers. */
.emkt-wa-text{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.emkt-wa:hover,
.emkt-wa:focus{
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
}

/* Keyboard users need to see where they are. */
.emkt-wa:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.55);
}

@media (prefers-reduced-motion: reduce){
  .emkt-wa{ transition: none; }
  .emkt-wa:hover, .emkt-wa:focus{ transform: none; }
}

/* Optional text label, desktop only — a phone has no room. */
@media screen and (min-width: 900px){
  .emkt-wa--labelled{
    width: auto;
    padding-right: 22px;
  }
  .emkt-wa--labelled .emkt-wa-text{
    position: static;
    width: auto; height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    font-size: 0.95rem;
    font-weight: 700;
  }
}

/* Out from behind the cookie banner while it is showing. */
.emkt-cookie.is-visible ~ .emkt-wa{ bottom: 140px; }

@media screen and (max-width: 768px){
  .emkt-wa{
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .emkt-wa--left{ left: 14px; }
  .emkt-wa--right{ right: 14px; }
  .emkt-wa-icon{ width: 52px; height: 52px; flex-basis: 52px; }
  .emkt-cookie.is-visible ~ .emkt-wa{ bottom: 200px; }
}

/* ==================================================
   78. Address row wrapping on a phone (11.17.4)
   ==================================================

   The address is now one joined line rather than five short
   rows, which makes it long enough to run off the side of a
   phone screen. These cells were not wrapping it.

   Scoped to .emkt-map-row and .emkt-map, both of which this
   theme puts into the markup itself — rules written against
   class names that appear in the served HTML survive the
   CSS optimiser, which strips ones it cannot find.
   -------------------------------------------------- */

@media screen and (max-width: 768px){

  /*
   * Wrapping only. Deliberately no word-break or overflow-wrap
   * here: "anywhere" changes how narrow a cell is allowed to
   * get, and the table then squeezed the label column until
   * "Address" broke into "Add / ress".
   */
  .emkt-map-row td,
  .emkt-map-row th{
    white-space: normal !important;
  }

  /* The link holding the address text. */
  .emkt-map{
    display: inline-block;
    max-width: 100%;
    white-space: normal !important;
    /* Breaks a long unbroken run, such as a URL, but not words. */
    overflow-wrap: break-word;
  }

  /* "Click here for directions" onto its own line under it. */
  .emkt-cue--map{
    display: block;
  }
}

/* ==================================================
   79. Folded location rows (11.18.0)
   ==================================================

   The town, county, Eircode and country are shown inside the
   address line, so their own rows are not shown again. The
   class is written into the HTML by functions.php, which is
   what keeps this working on a cached page.
   -------------------------------------------------- */

.emkt-row-folded{
  display: none !important;
}