/*
Theme Name: Tailor SpakSpak
Theme URI: https://tailor.spakspak.com
Author: SpakSpak
Author URI: https://spakspak.com
Description: A directory theme for finding trusted tailors, boutiques and stitching services near you. Custom-built to match the Tailor.SpakSpak homepage design.
Version: 3.9
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tailor-spakspak
*/

/* ===========================
   VARIABLES
=========================== */
:root{
  --maroon: #7a1f3d;
  --maroon-dark: #5e1730;
  --maroon-light: #a13a5c;
  --pink-bg: #f6e9e6;
  --pink-bg-2: #f3ddd8;
  --cream: #fdf9f7;
  --text-dark: #2b2320;
  --text-muted: #6b5f5b;
  --border: #ece0dc;
  --white: #ffffff;
  --star: #f0a72a;
  --radius: 10px;
  --max-width: 1200px;
  --font-heading: 'Georgia', 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; }

body.tailor-spakspak{
  margin:0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.5;
}

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight:600;
  font-size: 15px;
  border: none;
  transition: background .15s ease, transform .1s ease;
}
.btn-maroon{ background: var(--maroon); color: var(--white); }
.btn-maroon:hover{ background: var(--maroon-dark); }
.btn-outline{ background: var(--white); color: var(--maroon); border: 1px solid var(--maroon); }
.btn-outline:hover{ background: var(--pink-bg); }

/* ===========================
   HEADER
=========================== */
.site-header{
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top:0;
  z-index: 100;
}
.site-header .header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 24px;
  gap: 24px;
}
.site-branding{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.site-branding .custom-logo-link{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.site-branding .custom-logo-link img{
  height: 42px;
  width: 42px;
  max-height: 42px;
  max-width: 42px;
  object-fit: cover;
  border-radius: 50%;
  display:block;
}
.site-branding .brand-icon{
  width:34px;height:34px;
  background: var(--text-dark);
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  flex-shrink:0;
}
.site-branding .brand-text{ line-height:1.15; }
.site-branding .brand-name{
  font-weight:700;
  font-size: 19px;
  color: var(--text-dark);
}
.site-branding .brand-name span{ color: var(--maroon); }
.site-branding .brand-tagline{
  font-size: 11px;
  color: var(--text-muted);
}

.main-nav{ flex:1; }
.main-nav ul{
  display:flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content:center;
}
.main-nav a{
  font-size: 14.5px;
  font-weight:500;
  color: var(--text-dark);
}
.main-nav a:hover, .main-nav .current-menu-item a{ color: var(--maroon); }

.header-actions{
  display:flex;
  align-items:center;
  gap: 18px;
  flex-shrink:0;
}
.header-actions .list-business{
  display:none;
}
@media (min-width: 900px){
  .header-actions .list-business{ display:inline; font-size:14px; color:var(--text-muted); }
}
.header-actions .signin{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14.5px;
  font-weight:500;
}

/* ===========================
   HERO
=========================== */
.hero{
  background: linear-gradient(90deg, var(--pink-bg) 0%, var(--pink-bg) 45%, var(--pink-bg-2) 100%);
  padding: 40px 0 36px;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items:center;
}
.hero-copy h1{
  font-family: var(--font-heading);
  font-size: 46px;
  line-height:1.12;
  margin: 0 0 12px;
  font-weight:700;
}
.hero-copy h1 em{
  font-style:normal;
  color: var(--maroon);
}
.hero-copy p{
  font-size: 16px;
  color: var(--text-muted);
  max-width: 460px;
  margin: 0 0 20px;
}
.directorist-search-wrap{
  margin-top: -6px;
}
.directorist-search-wrap > *:first-child{
  margin-top: 0 !important;
}
.directorist-search-wrap h1,
.directorist-search-wrap h2,
.directorist-search-wrap h3,
.directorist-search-wrap h4{
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  font-size: 22px !important;
}
.directorist-search-wrap p{
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}
/* Widen search fields so labels like "Location" never get clipped */
.directorist-search-wrap input[type="text"],
.directorist-search-wrap input[type="search"],
.directorist-search-wrap select,
.directorist-search-wrap .select2-container,
.directorist-search-wrap .select2-selection,
.directorist-search-wrap .select2-selection__rendered{
  min-width: 170px !important;
  width: auto !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}
.directorist-search-wrap form,
.directorist-search-wrap .container,
.directorist-search-wrap > div{
  max-width: 100% !important;
  width: 100% !important;
}
.search-bar{
  background: var(--white);
  border-radius: var(--radius);
  padding: 10px;
  display:flex;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(122,31,61,.08);
  flex-wrap:wrap;
}
.search-bar .field{
  flex:1;
  min-width: 160px;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-right: 1px solid var(--border);
  font-size:14px;
  color: var(--text-muted);
}
.search-bar .field:last-of-type{ border-right:none; }
.search-bar input, .search-bar select{
  border:none;
  outline:none;
  font-size:14px;
  width:100%;
  background:transparent;
  font-family: inherit;
}
.search-bar .btn{ flex-shrink:0; }

.popular-searches{
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--text-muted);
  display:flex;
  flex-wrap:wrap;
  gap: 6px 14px;
}
.popular-searches strong{ color: var(--text-dark); font-weight:600; }
.popular-searches a{ color: var(--text-muted); }
.popular-searches a:hover{ color: var(--maroon); }

.hero-photo{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  min-height: 340px;
  background: linear-gradient(135deg, #d8b3a6, #efd6cc);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  color: rgba(255,255,255,.9);
  font-style: italic;
  font-family: var(--font-heading);
}
.hero-photo .photo-caption{
  position:absolute;
  top: 24px;
  right: 24px;
  font-size: 20px;
  line-height:1.3;
  text-align:right;
}
.hero-photo .photo-note{
  padding: 18px;
  font-size:13px;
  font-style: normal;
  font-family: var(--font-body);
}
.hero-photo .badge{
  position:absolute;
  bottom: 18px;
  right: 18px;
  background: var(--white);
  color: var(--text-dark);
  border-radius: 30px;
  padding: 10px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.hero-photo .badge .avatar{
  width:34px;height:34px;border-radius:50%;
  background: var(--maroon);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.hero-photo .badge b{ display:block; font-size:13px; }

/* ===========================
   SECTION HEADINGS
=========================== */
.section{ padding: 52px 0; }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom: 26px;
  gap: 16px;
  flex-wrap:wrap;
}
.section-head h2{
  font-family: var(--font-heading);
  font-size: 30px;
  margin: 0 0 6px;
}
.section-head p{
  margin:0;
  color: var(--text-muted);
  font-size: 14.5px;
}
.section-head .view-all{
  color: var(--maroon);
  font-weight:600;
  font-size:14.5px;
  white-space:nowrap;
}

/* ===========================
   CATEGORIES
=========================== */
.categories-grid{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 16px;
}
.category-card{
  background: var(--pink-bg);
  border-radius: var(--radius);
  padding: 22px 10px;
  text-align:center;
}
.category-card .icon{
  width:46px;height:46px;
  margin: 0 auto 12px;
  background: var(--white);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color: var(--maroon);
}
.category-card span{
  font-size:13px;
  font-weight:600;
}

/* ===========================
   TAILOR CARDS
=========================== */
.tailors-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.tailor-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
}
.tailor-card .photo{
  height: 130px;
  background: linear-gradient(135deg, var(--maroon-light), var(--maroon-dark));
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:15px;
  letter-spacing:.4px;
}
.tailor-card .photo .fav{
  position:absolute;
  top:10px;right:10px;
  width:26px;height:26px;
  background:rgba(255,255,255,.9);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color: var(--maroon);
  font-size:13px;
}
.tailor-card .body{ padding: 14px; }
.tailor-card h3{ margin:0 0 6px; font-size:15.5px; }
.tailor-card .rating{
  font-size:13px;
  color: var(--text-muted);
  margin-bottom:6px;
}
.tailor-card .rating b{ color: var(--star); }
.tailor-card .meta{
  font-size:12.5px;
  color: var(--text-muted);
  margin-bottom:4px;
  display:flex;
  align-items:center;
  gap:5px;
}
.tailor-card .btn{ width:100%; margin-top:10px; padding:9px; font-size:13.5px; }

/* ===========================
   HOW IT WORKS
=========================== */
.how-section{ background: var(--pink-bg); }
.how-inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items:center;
}
.how-steps{
  display:flex;
  gap: 28px;
  margin-top: 30px;
  flex-wrap:wrap;
}
.how-step{ max-width: 240px; }
.how-step .num{
  width:52px;height:52px;
  border-radius:50%;
  background: var(--maroon);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  margin-bottom: 14px;
  font-size:18px;
}
.how-step h3{ margin: 0 0 6px; font-size:16px; }
.how-step p{ margin:0; font-size:13.5px; color: var(--text-muted); }
.how-arrow{
  align-self:center;
  font-size:20px;
  color: var(--text-muted);
  padding-top: 40px;
}
.how-photo{
  border-radius: 18px;
  min-height: 300px;
  background: linear-gradient(135deg, #e7cfc4, #f3e3dc);
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding: 20px;
}
.how-photo span{
  font-family: var(--font-heading);
  font-style:italic;
  text-align:right;
  color: rgba(122,31,61,.65);
  font-size:19px;
  line-height:1.3;
}

/* ===========================
   CITIES
=========================== */
.cities-grid{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px;
}
.city-card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  height: 110px;
  background: linear-gradient(135deg, #c9a08e, #8a5a4a);
  display:flex;
  align-items:flex-end;
  padding: 10px;
}
.city-card span{
  color:#fff;
  font-weight:700;
  font-size:14px;
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
}

/* ===========================
   CTA BANNER
=========================== */
.cta-banner{
  background: var(--maroon);
  color: #fff;
  padding: 34px 0;
}
.cta-banner .container{
  display:grid;
  grid-template-columns: 220px 1fr auto;
  gap: 30px;
  align-items:center;
}
.cta-banner .cta-photo{
  height: 130px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f3ddd8, #e2b8ab);
}
.cta-banner h2{
  font-family: var(--font-heading);
  margin: 0 0 8px;
  font-size: 26px;
}
.cta-banner p{ margin: 0 0 14px; opacity:.9; font-size:14.5px; max-width:520px; }
.cta-checks{
  display:flex;
  gap: 18px;
  flex-wrap:wrap;
  font-size:13px;
}
.cta-checks span{ display:flex; align-items:center; gap:6px; }
.cta-banner .btn-outline{ background:#fff; color: var(--maroon); border:none; white-space:nowrap; }

/* ===========================
   FOOTER
=========================== */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 26px 0;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap: 16px;
}
.footer-links{
  display:flex;
  gap: 22px;
  flex-wrap:wrap;
  font-size: 13.5px;
  color: var(--text-muted);
}
.footer-copy{
  font-size: 12.5px;
  color: var(--text-muted);
}
.footer-social{
  display:flex;
  gap: 12px;
}
.footer-social a{
  width:30px;height:30px;
  border-radius:50%;
  background: var(--pink-bg);
  display:flex;align-items:center;justify-content:center;
  color: var(--maroon);
  font-size:13px;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 992px){
  .hero-inner, .how-inner{ grid-template-columns:1fr; }
  .categories-grid{ grid-template-columns: repeat(4,1fr); }
  .tailors-grid{ grid-template-columns: repeat(2,1fr); }
  .cities-grid{ grid-template-columns: repeat(4,1fr); }
  .cta-banner .container{ grid-template-columns: 1fr; text-align:center; }
  .cta-banner .cta-photo{ display:none; }
  .cta-checks{ justify-content:center; }
  .how-arrow{ display:none; }
}
@media (max-width: 700px){
  .main-nav{ display:none; }
  .hero-copy h1{ font-size: 34px; }
  .categories-grid{ grid-template-columns: repeat(3,1fr); }
  .cities-grid{ grid-template-columns: repeat(3,1fr); }
  .search-bar{ flex-direction:column; }
  .search-bar .field{ border-right:none; border-bottom:1px solid var(--border); }
}
@media (max-width: 480px){
  .tailors-grid{ grid-template-columns: 1fr; }
}

/* ===========================
   DIRECTORIST COMPATIBILITY
   These are light-touch resets so Directorist's own shortcode
   output (search form, listing cards, category/location grids)
   sits cleanly inside our sections instead of fighting our CSS.
   For deeper restyling of the listing cards themselves, use
   Directorist's own Directory Builder — it's the supported way
   to change that markup, and is more reliable than overriding
   plugin CSS from a separate theme stylesheet.
=========================== */
.directorist-search-wrap,
.directorist-categories-wrap,
.directorist-listings-wrap,
.directorist-locations-wrap{
  width: 100%;
}
.directorist-search-wrap .atbdp_search_wrapper,
.directorist-search-wrap form{
  max-width: 100%;
}
.directorist-categories-wrap,
.directorist-listings-wrap,
.directorist-locations-wrap{
  display:block; /* let Directorist's own internal grid/flex layout run */
}

/* =========================================================
   DIRECTORIST GRIDS (v1.1)
   Real Directorist markup (checked against the plugin source):
     categories -> .taxonomy-category-wrapper > .directorist-col-* > .directorist-categories__single
     locations  -> .taxonomy-location-wrapper > .directorist-col-* > .directorist-location__single
     listings   -> .directorist-archive-grid-view .directorist-row > .directorist-col-* > .directorist-listing-single
   The old rules used wrong class names (…categories_single /
   …locations_single), which is why the boxes stayed big.
   Desktop: categories 6 / listings 4 / cities 6 per row.
========================================================= */

/* ---------- shared grid reset ---------- */
.directorist-categories-wrap .taxonomy-category-wrapper,
.directorist-locations-wrap .taxonomy-location-wrapper,
.directorist-listings-wrap .directorist-archive-grid-view .directorist-row,
body.tailor-spakspak .directorist-archive-grid-view .directorist-row{
  display: grid !important;
  gap: 16px !important;
  margin: 0 !important;
}
.directorist-categories-wrap .taxonomy-category-wrapper{ grid-template-columns: repeat(6, minmax(0,1fr)) !important; }
.directorist-locations-wrap .taxonomy-location-wrapper{ grid-template-columns: repeat(6, minmax(0,1fr)) !important; }
.directorist-listings-wrap .directorist-archive-grid-view .directorist-row,
body.tailor-spakspak .directorist-archive-grid-view .directorist-row{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }

.directorist-categories-wrap .taxonomy-category-wrapper > [class*="directorist-col"],
.directorist-locations-wrap .taxonomy-location-wrapper > [class*="directorist-col"],
body.tailor-spakspak .directorist-archive-grid-view .directorist-row > [class*="directorist-col"]{
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.directorist-categories-wrap .directorist-pagination,
.directorist-locations-wrap .directorist-pagination,
body.tailor-spakspak .directorist-archive-grid-view .directorist-row > .directorist-pagination{
  grid-column: 1 / -1;
}
.directorist-categories-wrap .directorist-container-fluid,
.directorist-locations-wrap .directorist-container-fluid,
.directorist-listings-wrap .directorist-container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- Popular Categories: small coloured tiles ---------- */
.directorist-categories-wrap .directorist-categories__single{
  --tile-bg: #f6e1e6;
  --tile-fg: var(--maroon);
  height: 100%;
  min-height: 118px;
  background-color: var(--tile-bg) !important;
  border: 1px solid rgba(122,31,61,.08) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
/* six rotating colours so each box looks different */
.directorist-categories-wrap .taxonomy-category-wrapper > [class*="directorist-col"]:nth-child(6n+2) .directorist-categories__single{ --tile-bg:#fbe7d6; --tile-fg:#a0521d; }
.directorist-categories-wrap .taxonomy-category-wrapper > [class*="directorist-col"]:nth-child(6n+3) .directorist-categories__single{ --tile-bg:#e3f1e6; --tile-fg:#2f6b44; }
.directorist-categories-wrap .taxonomy-category-wrapper > [class*="directorist-col"]:nth-child(6n+4) .directorist-categories__single{ --tile-bg:#e2ecf8; --tile-fg:#2b5486; }
.directorist-categories-wrap .taxonomy-category-wrapper > [class*="directorist-col"]:nth-child(6n+5) .directorist-categories__single{ --tile-bg:#efe5f7; --tile-fg:#634089; }
.directorist-categories-wrap .taxonomy-category-wrapper > [class*="directorist-col"]:nth-child(6n+6) .directorist-categories__single{ --tile-bg:#fbf1d2; --tile-fg:#8a6a12; }

.directorist-categories-wrap .directorist-categories__single:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(122,31,61,.14) !important;
}
.directorist-categories-wrap .directorist-categories__single__content{
  padding: 18px 10px !important;
}
.directorist-categories-wrap .directorist-categories__single__icon{
  width: 46px; height: 46px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.directorist-categories-wrap .directorist-categories__single__icon .directorist-icon-mask::after{
  width: 24px !important;
  height: 24px !important;
  background-color: var(--tile-fg) !important;
}
.directorist-categories-wrap .directorist-categories__single__name{
  display: block;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  color: var(--text-dark) !important;
}
.directorist-categories-wrap .directorist-categories__single__total{
  margin-top: 4px;
  font-size: 12px !important;
  color: var(--tile-fg) !important;
}
/* category that has its own photo: keep photo, darker overlay, white text */
.directorist-categories-wrap .directorist-categories__single--image .directorist-categories__single__name,
.directorist-categories-wrap .directorist-categories__single--image .directorist-categories__single__total{
  color: #fff !important;
}

/* ---------- Featured Tailors: compact listing cards ---------- */
.directorist-listings-wrap .directorist-listing-single{
  border-radius: 12px !important;
  overflow: hidden;
  height: 100%;
  font-size: 13.5px;
}
.directorist-listings-wrap .directorist-listing-single__thumb .directorist-thumnail-card{
  height: 165px !important;
  padding-top: 0 !important;
}
.directorist-listings-wrap .directorist-listing-single__content,
.directorist-listings-wrap .directorist-listing-single__info{
  padding-left: 14px !important;
  padding-right: 14px !important;
}
.directorist-listings-wrap .directorist-listing-single__info .directorist-listing-title,
.directorist-listings-wrap .directorist-listing-single__info h4{
  font-size: 15px !important;
  line-height: 1.3 !important;
}
.directorist-listings-wrap .directorist-listing-single__info__list li,
.directorist-listings-wrap .directorist-listing-single__info__list{
  font-size: 12.5px !important;
}
.directorist-listings-wrap .directorist-listing-single__meta{
  padding: 10px 14px !important;
  font-size: 12.5px !important;
}

/* ---------- Browse by City: small coloured tiles ---------- */
.directorist-locations-wrap .directorist-location__single{
  height: 110px !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.directorist-locations-wrap .directorist-location__single:not(.directorist-location__single--img){
  --city-bg: linear-gradient(135deg, #a13a5c, #7a1f3d);
  background: var(--city-bg) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(122,31,61,.12) !important;
}
.directorist-locations-wrap .taxonomy-location-wrapper > [class*="directorist-col"]:nth-child(6n+2) .directorist-location__single{ --city-bg: linear-gradient(135deg, #d98545, #a0521d); }
.directorist-locations-wrap .taxonomy-location-wrapper > [class*="directorist-col"]:nth-child(6n+3) .directorist-location__single{ --city-bg: linear-gradient(135deg, #4c9a67, #2f6b44); }
.directorist-locations-wrap .taxonomy-location-wrapper > [class*="directorist-col"]:nth-child(6n+4) .directorist-location__single{ --city-bg: linear-gradient(135deg, #4d7fbf, #2b5486); }
.directorist-locations-wrap .taxonomy-location-wrapper > [class*="directorist-col"]:nth-child(6n+5) .directorist-location__single{ --city-bg: linear-gradient(135deg, #8a64b3, #634089); }
.directorist-locations-wrap .taxonomy-location-wrapper > [class*="directorist-col"]:nth-child(6n+6) .directorist-location__single{ --city-bg: linear-gradient(135deg, #c79a2a, #8a6a12); }

.directorist-locations-wrap .directorist-location__single:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(122,31,61,.2) !important;
}
.directorist-locations-wrap .directorist-location__content{
  padding: 12px !important;
}
.directorist-locations-wrap .directorist-location__content h3{
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25;
}
.directorist-locations-wrap .directorist-location__content a,
.directorist-locations-wrap .directorist-location__content h3,
.directorist-locations-wrap .directorist-location__count{
  color: #fff !important;
}
.directorist-locations-wrap .directorist-location__count{
  font-size: 12px;
  opacity: .9;
}

/* ---------- Footer social icons ---------- */
.footer-social a{ transition: background .15s ease, color .15s ease; }
.footer-social a:hover{ background: var(--maroon); color: #fff; }

/* ---------- How It Works (section added in v1.1) ---------- */
.how-step .num svg{ display:block; }
.how-photo span{ background: rgba(255,255,255,.85); padding: 6px 12px; border-radius: 8px; }
html{ scroll-behavior: smooth; }
#how-it-works, #categories, #locations{ scroll-margin-top: 80px; }

/* ---------- Responsive: fewer boxes on smaller screens ---------- */
@media (max-width: 1100px){
  .directorist-listings-wrap .directorist-archive-grid-view .directorist-row,
  body.tailor-spakspak .directorist-archive-grid-view .directorist-row{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 992px){
  .directorist-categories-wrap .taxonomy-category-wrapper,
  .directorist-locations-wrap .taxonomy-location-wrapper{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (max-width: 800px){
  .directorist-listings-wrap .directorist-archive-grid-view .directorist-row,
  body.tailor-spakspak .directorist-archive-grid-view .directorist-row{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 600px){
  .directorist-categories-wrap .taxonomy-category-wrapper,
  .directorist-locations-wrap .taxonomy-location-wrapper{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 10px !important; }
  .directorist-categories-wrap .directorist-categories__single{ min-height: 100px; }
  .directorist-categories-wrap .directorist-categories__single__content{ padding: 12px 6px !important; }
  .directorist-categories-wrap .directorist-categories__single__name{ font-size: 12.5px !important; }
  .directorist-locations-wrap .directorist-location__single{ height: 90px !important; }
}
@media (max-width: 420px){
  .directorist-categories-wrap .taxonomy-category-wrapper,
  .directorist-locations-wrap .taxonomy-location-wrapper{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .directorist-listings-wrap .directorist-archive-grid-view .directorist-row,
  body.tailor-spakspak .directorist-archive-grid-view .directorist-row{ grid-template-columns: 1fr !important; }
}

/* ---------- Hero search bar: pull it up into the first screen (v1.2) ----------
   Directorist adds 100px top / 120px bottom padding and its own
   "Search here" title around the search form. The hero already has a
   heading, so both are removed here. */
.directorist-search-wrap .directorist-search-contents{
  padding: 0 !important;
  background: none !important;
}
.directorist-search-wrap .directorist-search-contents > .directorist-container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.directorist-search-wrap .directorist-search-top{ display: none !important; }
.directorist-search-wrap .directorist-search-form{ margin: 0 !important; }
.directorist-search-wrap .directorist-search-form__wrap,
.directorist-search-wrap .directorist-search-form-wrap{
  box-shadow: 0 10px 28px rgba(122,31,61,.12) !important;
  border-radius: 12px !important;
}
.directorist-search-wrap .directorist-listing-category-top{ margin-top: 18px !important; }
@media (max-width: 700px){
  .hero{ padding: 28px 0 28px; }
  .hero-copy p{ margin-bottom: 16px; }
}

/* =========================================================
   v1.3 — PRICING PAGE
========================================================= */
.pricing-hero{
  background: linear-gradient(90deg, var(--pink-bg) 0%, var(--pink-bg-2) 100%);
  padding: 48px 0 40px;
  text-align: center;
}
.pricing-hero h1{
  font-family: var(--font-heading);
  font-size: 40px;
  margin: 0 0 10px;
}
.pricing-hero p{
  margin: 0 auto;
  max-width: 560px;
  color: var(--text-muted);
  font-size: 16px;
}
.pricing-section{ padding-top: 44px; }
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 360px));
  justify-content: center;
  gap: 28px;
}
.price-card{
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px rgba(122,31,61,.06);
}
.price-card.is-premium{
  border: 2px solid #c9a227;
  box-shadow: 0 14px 34px rgba(201,162,39,.22);
}
.price-card__ribbon{
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #e8c547, #b8860b);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.price-card__name{
  font-weight: 700;
  font-size: 17px;
  color: var(--maroon);
  margin-bottom: 8px;
}
.price-card.is-premium .price-card__name{ color: #9a7209; }
.price-card__price .amount{
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
}
.price-card__price .per{
  color: var(--text-muted);
  font-size: 15px;
}
.price-card__desc{
  color: var(--text-muted);
  font-size: 14px;
  margin: 12px 0 16px;
}
.price-card__list{
  margin: 0 0 22px;
  flex: 1;
}
.price-card__list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  padding: 6px 0;
}
.price-card__list svg{
  flex-shrink: 0;
  margin-top: 3px;
  color: #2f8a4c;
}
.price-card__btn{ width: 100%; }
.price-card__btn.is-disabled{
  background: #eee;
  color: #888;
  cursor: default;
}
.pricing-upgrade{
  text-align: center;
  margin: 24px 0 0;
  font-size: 14.5px;
}
.pricing-upgrade a{ color: var(--maroon); font-weight: 600; }

.listing-steps{
  max-width: 900px;
  margin: 56px auto 0;
  text-align: center;
}
.listing-steps h2{
  font-family: var(--font-heading);
  font-size: 28px;
  margin: 0 0 24px;
}
.listing-steps ol{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.listing-steps li{
  background: var(--pink-bg);
  border-radius: 14px;
  padding: 22px 18px;
}
.listing-steps .n{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.listing-steps h3{ margin: 0 0 6px; font-size: 16px; }
.listing-steps p{ margin: 0; font-size: 13.5px; color: var(--text-muted); }
.listing-steps p a, .listing-steps__note a{ color: var(--maroon); text-decoration: underline; }
.listing-steps .listing-steps__note{
  margin: 22px auto 0;
  max-width: 680px;
  font-size: 13px;
  color: var(--text-muted);
}
.pricing-extra{ max-width: 800px; margin: 40px auto 0; }

@media (max-width: 760px){
  .pricing-grid{ grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .pricing-grid .is-premium{ order: -1; margin-top: 12px; }
  .listing-steps ol{ grid-template-columns: 1fr; }
  .pricing-hero h1{ font-size: 32px; }
}

/* =========================================================
   v1.3 — POLICY / TEXT PAGES readability
========================================================= */
.page-content{
  max-width: 820px;
  font-size: 16px;
  line-height: 1.7;
}
.page-content h2{ font-family: var(--font-heading); font-size: 24px; margin: 32px 0 10px; }
.page-content h3{ font-size: 17px; margin: 22px 0 6px; }
.page-content ul, .page-content ol{ list-style: revert; padding-left: 22px; margin: 0 0 16px; }
.page-content li{ margin-bottom: 6px; }
.page-content a{ color: var(--maroon); text-decoration: underline; }

/* =========================================================
   v1.3 — PREMIUM BADGE (Directorist "featured")
========================================================= */
body.tailor-spakspak .directorist-badge-featured,
body.tailor-spakspak .directorist-badge.directorist-badge-featured{
  background: linear-gradient(135deg, #f1d36b, #c9a227 55%, #a8810f) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  border: none !important;
  box-shadow: 0 2px 8px rgba(168,129,15,.35);
}
body.tailor-spakspak .directorist-badge-featured svg,
body.tailor-spakspak .directorist-badge-featured .directorist-icon-mask::after{
  color: #fff !important;
  background-color: #fff !important;
}
/* gold outline around Premium cards in grids */
body.tailor-spakspak .directorist-listing-single:has(.directorist-badge-featured){
  outline: 2px solid #c9a227;
  outline-offset: -2px;
}

/* =========================================================
   v1.3 — CALL / WHATSAPP BUTTONS on single listing
========================================================= */
.tsp-contact-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 6px;
}
.tsp-contact-buttons a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14.5px;
  color: #fff !important;
  text-decoration: none !important;
  transition: transform .1s ease, filter .15s ease;
}
.tsp-contact-buttons a:hover{ filter: brightness(.93); transform: translateY(-1px); }
.tsp-btn-call{ background: var(--maroon); }
.tsp-btn-whatsapp{ background: #25d366; }
/* v2.8 — shop's own website.
   Selector must be at least as specific as ".tsp-contact-buttons a"
   above, which forces white text on the filled buttons. */
.tsp-contact-buttons a.tsp-btn-website{
  background: #fff;
  color: var(--maroon) !important;
  border: 1.5px solid var(--maroon);
  padding: 8.5px 16.5px;
}
.tsp-contact-buttons a.tsp-btn-website:hover{
  background: #faf7f2;
  filter: none;
}

/* =========================================================
   v2.8 — ADDRESS LINE on single listing
   Directorist's "Location" block only draws the map, so a
   listing without coordinates showed no address at all.
========================================================= */
.tsp-listing-address{
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #4a4440;
}
.tsp-listing-address svg{
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--maroon);
}
.tsp-listing-address > span{ flex: 1 1 200px; min-width: 0; }
.tsp-listing-address a{
  flex: 0 0 auto;
  color: var(--maroon);
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 600px){
  .tsp-listing-address{ font-size: 14.5px; }
  .tsp-listing-address > span{ flex: 1 1 100%; }
}

/* =========================================================
   v1.4 — MOBILE / TABLET HEADER (☰ menu)
========================================================= */
.menu-toggle,
.mobile-menu-cta{ display: none; }

@media (max-width: 1100px){
  .site-header .header-inner{
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 20px;
  }
  .site-branding{ flex: 1; min-width: 0; }
  .header-actions{ gap: 12px; }
  .header-actions .list-business{ display: none !important; }

  .menu-toggle{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
  }
  .menu-toggle span{
    display: block;
    height: 2px;
    width: 100%;
    background: var(--text-dark);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .menu-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2){ opacity: 0; }
  .menu-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* menu drops down under the header row */
  .site-header .main-nav{
    display: none;
    order: 10;
    flex-basis: 100%;
    border-top: 1px solid var(--border);
    padding: 6px 0 12px;
  }
  .site-header .main-nav.is-open{ display: block; }
  .site-header .main-nav ul{
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: flex-start;
  }
  .site-header .main-nav li a{
    display: block;
    padding: 12px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--border);
  }
  .site-header .main-nav .sub-menu{ padding-left: 16px; }
}

@media (max-width: 600px){
  .site-header .header-inner{ padding: 10px 16px; gap: 10px; }
  .site-branding{ gap: 8px; }
  .site-branding .custom-logo-link img{ width: 36px; height: 36px; max-width: 36px; max-height: 36px; }
  .site-branding .brand-name{ font-size: 16px; }
  .site-branding .brand-tagline{ display: none; }
  .header-actions .header-cta{ display: none; }   /* moved inside the ☰ menu */
  .site-header .main-nav.is-open .mobile-menu-cta{ display: block; margin-top: 14px; }
  .site-header .main-nav .mobile-menu-cta .btn{
    width: 100%;
    color: #fff;
    border-bottom: 0;
    padding: 13px;
    font-size: 15px;
  }
  .header-actions .signin-text{ display: none; }  /* icon only */
  .header-actions .signin{
    width: 42px; height: 42px;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .header-actions .signin svg{ width: 18px; height: 18px; }
}

/* never allow sideways scrolling on small screens */
html, body.tailor-spakspak{ overflow-x: clip; }

/* =========================================================
   v1.5 — Directorist buttons & accents in brand maroon
========================================================= */
body.tailor-spakspak{
  --directorist-color-primary: #7a1f3d;
  --directorist-color-primary-rgb: 122, 31, 61;
  --directorist-color-secondary: #a13a5c;
}
body.tailor-spakspak .directorist-btn-primary,
body.tailor-spakspak .directorist-btn.directorist-btn-primary{
  background-color: var(--maroon) !important;
  border-color: var(--maroon) !important;
  color: #fff !important;
}
body.tailor-spakspak .directorist-btn-primary:hover{
  background-color: var(--maroon-dark) !important;
  border-color: var(--maroon-dark) !important;
}
#featured-tailors{ scroll-margin-top: 80px; }

/* 404 page */
.tsp-404{ text-align:center; padding: 80px 0; }
.tsp-404 .code{ font-family: var(--font-heading); font-size: 96px; line-height:1; color: var(--maroon); margin:0; }
.tsp-404 h1{ font-family: var(--font-heading); font-size: 30px; margin: 10px 0; }
.tsp-404 p{ color: var(--text-muted); margin: 0 0 24px; }
.tsp-404 .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   v1.6 — Category cards with photos: soft blurred photo +
   light overlay (same feel as the homepage hero), bigger text
========================================================= */
.directorist-categories-wrap .directorist-categories__single--image{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 130px;
  background-size: 0 0 !important;   /* sharp original hidden; ::before shows blurred copy */
}
/* blurred copy of the card's own photo */
.directorist-categories-wrap .directorist-categories__single--image::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: inherit !important;
  background-color: var(--pink-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: blur(var(--tsp-cat-blur, 1px)) saturate(1.05);
  transform: scale(1.06);
  border-radius: 0 !important;
  z-index: 0 !important;
}
/* light hero-style overlay */
.directorist-categories-wrap .directorist-categories__single--image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(253,249,247,var(--tsp-cat-overlay, .5)) 0%, rgba(246,233,230,calc(var(--tsp-cat-overlay, .5) * .7)) 100%);
  z-index: 0;
  transition: background .2s ease;
}
.directorist-categories-wrap .directorist-categories__single--image:hover::after{
  background: linear-gradient(135deg, rgba(253,249,247,calc(var(--tsp-cat-overlay, .5) * .8)) 0%, rgba(246,233,230,calc(var(--tsp-cat-overlay, .5) * .55)) 100%);
}
.directorist-categories-wrap .directorist-categories__single--image .directorist-categories__single__content{
  position: relative;
  z-index: 1;
}
.directorist-categories-wrap .directorist-categories__single__name{
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}
.directorist-categories-wrap .directorist-categories__single--image .directorist-categories__single__name{
  color: var(--text-dark) !important;
  text-shadow: 0 0 6px rgba(255,255,255,.95), 0 0 2px rgba(255,255,255,.9);
}
.directorist-categories-wrap .directorist-categories__single__total{
  font-size: 13.5px !important;
  font-weight: 600;
  margin-top: 6px;
}
.directorist-categories-wrap .directorist-categories__single--image .directorist-categories__single__total{
  color: var(--maroon) !important;
  text-shadow: 0 0 6px rgba(255,255,255,.95), 0 0 2px rgba(255,255,255,.9);
}
@media (max-width: 600px){
  .directorist-categories-wrap .directorist-categories__single__name{ font-size: 14.5px !important; }
  .directorist-categories-wrap .directorist-categories__single__total{ font-size: 12.5px !important; }
  .directorist-categories-wrap .directorist-categories__single--image{ min-height: 108px; }
}

/* =========================================================
   v1.8 — Pages built from Starter Templates (Spectra / SureForms)
   Those blocks expect Astra's colour variables. Map them to
   our brand so buttons and accents never go invisible.
========================================================= */
:root, body.tailor-spakspak{
  --ast-global-color-0: #7a1f3d;  /* primary / buttons */
  --ast-global-color-1: #5e1730;  /* primary hover */
  --ast-global-color-2: #2b2320;  /* headings */
  --ast-global-color-3: #4a3f3b;  /* body text */
  --ast-global-color-4: #fdf9f7;  /* light background */
  --ast-global-color-5: #ffffff;  /* white */
  --ast-global-color-6: #f6e9e6;  /* soft pink */
  --ast-global-color-7: #ece0dc;  /* borders */
  --ast-global-color-8: #1a1412;  /* dark */
}

/* SureForms: visible fields + brand button */
body.tailor-spakspak .srfm-form-container input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.tailor-spakspak .srfm-form-container textarea,
body.tailor-spakspak .srfm-form-container select{
  background: #fff !important;
  border: 1px solid #d9c9c4 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  color: var(--text-dark) !important;
  width: 100%;
}
body.tailor-spakspak .srfm-form-container input:focus,
body.tailor-spakspak .srfm-form-container textarea:focus{
  outline: 2px solid rgba(122,31,61,.35) !important;
  border-color: var(--maroon) !important;
}
body.tailor-spakspak .srfm-form-container .srfm-submit-button,
body.tailor-spakspak .srfm-form-container button[type=submit]{
  background: var(--maroon) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 22px !important;
  font-weight: 600 !important;
  cursor: pointer;
}
body.tailor-spakspak .srfm-form-container .srfm-submit-button:hover,
body.tailor-spakspak .srfm-form-container button[type=submit]:hover{
  background: var(--maroon-dark) !important;
}

/* Spectra side-by-side containers stack on phones/tablets */
@media (max-width: 781px){
  body.tailor-spakspak .wp-block-spectra-container.is-horizontal{
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  body.tailor-spakspak .wp-block-spectra-container.is-horizontal > *{
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }
  body.tailor-spakspak .srfm-form-container{ width: 100% !important; }
}

/* =========================================================
   v1.9 — Add Listing form & other Directorist pages
   1) The 820px reading width (for policy pages) must not
      squeeze Directorist or Spectra pages.
   2) Directorist makes the step menu position:fixed on scroll
      and pads the form 300px, which squashed the form and hid
      the menu under our header. Use a sticky menu instead.
========================================================= */
.page-content:has([class*="directorist-"]),
.page-content:has(#directorist),
.page-content:has(.wp-block-spectra-container){
  max-width: none !important;
}
body.tailor-spakspak .directorist-add-listing-wrapper{
  max-width: 1100px !important;
  width: 100% !important;
  margin-left: auto;
  margin-right: auto;
}
body.tailor-spakspak .multistep-wizard{ align-items: flex-start; }
body.tailor-spakspak .multistep-wizard__nav,
body.tailor-spakspak .multistep-wizard__nav.sticky{
  position: sticky !important;
  top: 96px !important;
  align-self: flex-start;
  max-height: calc(100vh - 110px);
}
body.admin-bar.tailor-spakspak .multistep-wizard__nav,
body.admin-bar.tailor-spakspak .multistep-wizard__nav.sticky{
  top: 128px !important;
}
body.tailor-spakspak .multistep-wizard__content{
  padding-inline-start: 0 !important;
  min-width: 0;
}

/* v2.3 — keep side padding on normal pages (.container.section);
   the .section shorthand padding was zeroing it on screens < 1250px */
.container.section{
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 600px){
  .container.section{ padding-left: 16px; padding-right: 16px; }
}

/* =========================================================
   v2.5 — Contact page (built from a Starter Template)
   The Spectra root container came with 180px/100px padding,
   which left a big empty gap under the page title.
========================================================= */
body.tailor-spakspak .page-content .spectra-is-root-container{
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
@media (max-width: 781px){
  body.tailor-spakspak .page-content .spectra-is-root-container{
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}
/* That page has its own heading ("Get in Touch"), so hide the
   duplicate theme title. Other pages keep theirs. */
body.tailor-spakspak .container.section:has(.spectra-is-root-container) > h1{
  display: none;
}

/* =========================================================
   v2.7 — (1) classic grey category cards, (2) less empty
   space on phones, (3) keep the light design on phones whose
   browser forces its own dark mode.
========================================================= */

/* Phone browsers (Chrome's "auto dark theme") were repainting the
   site dark. Declaring the page as light-only stops that. */
:root{ color-scheme: only light; }
html{ background: var(--cream); }

/* ---------- Category cards: solid grey, black text ---------- */
body.tsp-cats-solid .directorist-categories-wrap .directorist-categories__single,
body.tsp-cats-solid .directorist-categories-wrap .directorist-categories__single--image{
  background-image: none !important;
  background-color: #e9e7e4 !important;
  border: 1px solid #d7d3cf !important;
  box-shadow: none !important;
}
body.tsp-cats-solid .directorist-categories-wrap .directorist-categories__single::before,
body.tsp-cats-solid .directorist-categories-wrap .directorist-categories__single::after{
  display: none !important;
  content: none !important;
}
body.tsp-cats-solid .directorist-categories-wrap .directorist-categories__single:hover{
  background-color: #e0ddd8 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.10) !important;
}
body.tsp-cats-solid .directorist-categories-wrap .directorist-categories__single__name{
  color: #1a1a1a !important;
  text-shadow: none !important;
}
body.tsp-cats-solid .directorist-categories-wrap .directorist-categories__single__total{
  color: #5c5651 !important;
  text-shadow: none !important;
  font-weight: 500;
}
body.tsp-cats-solid .directorist-categories-wrap .directorist-categories__single__icon{
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
body.tsp-cats-solid .directorist-categories-wrap .directorist-categories__single__icon .directorist-icon-mask::after{
  background-color: #3a3a3a !important;
}

/* ---------- Phones: trim the tall empty blocks ---------- */
@media (max-width: 700px){
  .hero-photo{
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 0 2px;
    border-radius: 14px;
  }
  .hero-photo .photo-caption{
    position: static;
    text-align: center;
    font-size: 18px;
    color: var(--maroon);
  }
  .hero-photo .badge{
    position: static;
    margin: 0 auto;
  }
  .how-photo{ min-height: 150px; }
  .section{ padding: 34px 0; }
  .how-steps{ gap: 18px; margin-top: 20px; }
}

/* =========================================================
   v2.9 — Contact page, rebuilt without Spectra
   The old version was a Spectra starter-template pattern.
   Spectra was printing 385 KB of utility CSS inline into
   EVERY page on the site to serve this one page, so the page
   was rebuilt with core blocks and styled here instead.
   Same content, same two-column shape, brand colours.
========================================================= */
.tsp-contact{
  background: linear-gradient(140deg, var(--white) 0%, var(--pink-bg) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 44px;
  margin: 0;
}
.tsp-contact .tsp-contact__cols{ gap: 48px; align-items: flex-start; }

.tsp-contact__title{
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1.15;
  color: var(--maroon);
  margin: 0 0 14px;
}
.tsp-contact__lead{
  font-size: 17px;
  color: var(--text-muted);
  margin: 0 0 28px;
  max-width: 42ch;
}

.tsp-contact__details{
  list-style: none;
  margin: 0;
  padding: 0;
}
.tsp-contact__details li{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.tsp-contact__details li:last-child{ border-bottom: 1px solid var(--border); }
.tsp-contact__icon{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--maroon);
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.tsp-contact__text{ font-size: 16px; color: var(--text-dark); }
.tsp-contact__text a{ color: var(--text-dark); text-decoration: none; }
.tsp-contact__text a:hover{ color: var(--maroon); text-decoration: underline; }

.tsp-contact__formcol{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 30px;
}
.tsp-contact__formtitle{
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--maroon);
  margin: 0 0 18px;
}

/* The page prints its own "Get in Touch" heading, so the theme's
   duplicate page title is hidden — same as the Spectra version did. */
body.tailor-spakspak .container.section:has(.tsp-contact) > h1{ display: none; }

/* Policy pages are capped at 820px for reading comfort; this one
   is a two-column layout and needs the full width. */
.page-content:has(.tsp-contact){ max-width: none !important; }

@media (max-width: 900px){
  .tsp-contact{ padding: 32px 22px; }
  .tsp-contact .tsp-contact__cols{ gap: 28px; }
  .tsp-contact__title{ font-size: 32px; }
  /* Core stacks columns at 781px; below 900 the form box can go full width. */
  .tsp-contact__formcol{ padding: 26px 20px; }
}
@media (max-width: 600px){
  .tsp-contact{ padding: 26px 16px; border-radius: 12px; }
  .tsp-contact__title{ font-size: 28px; }
  .tsp-contact__lead{ font-size: 16px; margin-bottom: 22px; }
}

/* =========================================================
   v3.1 — "Browse Tailors by City"
   Directorist already builds a page per location term, but
   the homepage only linked countries. People search by city
   ("tailor Zurich"), not by country. See inc/cities.php.

   v3.5 — one scrolling row instead of a grid. At 13 cities the
   grid already ran to four rows and pushed the rest of the page
   down; the list only grows from here.
========================================================= */
.tsp-citylinks__rail{
  position: relative;
  margin-top: 24px;
}
.tsp-citylinks__grid{
  list-style: none;
  margin: 0;
  padding: 4px 2px;              /* room for the hover lift and focus ring */
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;          /* the arrows are the control here */
  -ms-overflow-style: none;
}
.tsp-citylinks__grid::-webkit-scrollbar{ display: none; }

.tsp-citylinks__grid li{
  margin: 0;
  flex: 0 0 auto;
  width: 200px;
  scroll-snap-align: start;
}
.tsp-citylinks__grid a{
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tsp-citylinks__grid a:hover{
  border-color: var(--maroon-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(122,31,61,.08);
}
.tsp-citylinks__name{
  font-family: var(--font-heading);
  font-size: 19px;
  color: var(--maroon);
  line-height: 1.2;
}
.tsp-citylinks__country{
  font-size: 13px;
  color: var(--text-muted);
}
.tsp-citylinks__count{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}

/* ---------- the arrows ---------- */
.tsp-citylinks__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--maroon);
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  transition: background .15s, color .15s, border-color .15s;
}
.tsp-citylinks__arrow:hover{
  background: var(--maroon);
  color: var(--white);
  border-color: var(--maroon);
}
.tsp-citylinks__arrow[hidden]{ display: none; }
.tsp-citylinks__arrow--prev{ left: -14px; }
.tsp-citylinks__arrow--next{ right: -14px; }

@media (max-width: 700px){
  /* A swipe is the natural control on a phone, and the buttons would
     sit on top of the cards at this width. */
  .tsp-citylinks__arrow{ display: none !important; }
  .tsp-citylinks__grid{ gap: 10px; }
  .tsp-citylinks__grid li{ width: 168px; }
  .tsp-citylinks__grid a{ padding: 13px 14px; }
  .tsp-citylinks__name{ font-size: 17px; }
}

/* =========================================================
   v3.6 — FOUNDING MEMBER OFFER
   The banner on the Pricing and Add Listing pages, the "Free"
   price on the Standard card, and the badge on a listing.
   Deliberately not maroon: the page is already maroon
   throughout, so the offer would disappear into it. A green
   reads as "free" and separates the offer from the plans it
   is suspending.
   ========================================================= */
.tsp-founding{
  position: relative;
  margin: 0 0 34px;
  padding: 26px 28px 28px;
  border: 1px solid #bfe3cd;
  border-left: 5px solid #1f7a4d;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f2fbf6, #ffffff);
}
.tsp-founding__kicker{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #1f7a4d;
}
.tsp-founding__headline{
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 27px;
  line-height: 1.25;
  color: var(--text-dark);
}
.tsp-founding__text{
  margin: 0 0 18px;
  max-width: 62ch;
  color: var(--text-muted);
  line-height: 1.65;
}
.tsp-founding__meter{
  height: 8px;
  border-radius: 999px;
  background: #dff0e6;
  overflow: hidden;
}
.tsp-founding__meter span{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #1f7a4d;
}
.tsp-founding__count{
  margin: 9px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}
.tsp-founding__count strong{
  font-size: 17px;
  color: #1f7a4d;
}
.tsp-founding__renewal{
  margin: 16px 0 20px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}
.tsp-founding__btn{ display: inline-block; }

/* The short version above the Add Listing form. */
.tsp-founding--compact{
  margin-bottom: 24px;
  padding: 18px 20px;
}
.tsp-founding--compact .tsp-founding__headline{ font-size: 21px; margin-bottom: 12px; }

.tsp-founding--closed{
  border-left-color: var(--border);
  background: var(--cream);
}
.tsp-founding--closed p{ margin: 0; color: var(--text-muted); }

/* The old price, kept visible so "free" has something to mean. */
.price-card__price .was{
  margin-right: 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* The badge on a single listing. */
.tsp-founding-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px 11px 4px 9px;
  border: 1px solid #bfe3cd;
  border-radius: 999px;
  background: #f2fbf6;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #1f7a4d;
  vertical-align: middle;
}

@media (max-width: 700px){
  .tsp-founding{ padding: 20px 18px 22px; }
  .tsp-founding__headline{ font-size: 22px; }
  .tsp-founding__btn{ display: block; text-align: center; }
}