/* =============================================================================
   KSM Directory — Main Stylesheet
   Mobile-first with CSS custom properties
   ============================================================================= */

/* 1. Reset / base
   ============================================================================= */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	font-size: var(--add-font-p, 1rem);
	line-height: 1.6;
	color: #333;
	background-color: #fff;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--add-primary, #2c5282);
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

ul, ol {
	list-style: none;
}

address {
	font-style: normal;
}

/* 2. CSS custom property definitions (fallback defaults)
   ============================================================================= */
:root {
	--add-primary:    #2c5282;
	--add-secondary:  #4a5568;
	--add-accent:     #ed8936;
	--add-font-h1:    2.5rem;
	--add-font-h2:    2rem;
	--add-font-h3:    1.75rem;
	--add-font-h4:    1.5rem;
	--add-font-p:     1rem;

	--add-bg-light:   #f7fafc;
	--add-bg-dark:    #1a202c;
	--add-border:     #e2e8f0;
	--add-radius:     6px;
	--add-shadow:     0 2px 8px rgba(0,0,0,0.1);
	--add-shadow-lg:  0 4px 20px rgba(0,0,0,0.15);
	--add-transition: 0.2s ease;
	--add-container:  1200px;
	--add-gap:        1.5rem;
}

/* 3. Layout utilities
   ============================================================================= */
.add-container {
	width: 100%;
	max-width: var(--add-container);
	margin-inline: auto;
	padding-inline: 1rem;
}

.add-main {
	min-height: 60vh;
	padding-block: 2rem;
}

/* Homepage: hero sits flush against the header — remove top padding */
.add-main--has-hero {
	padding-block-start: 0;
}

/* Headings */
h1, .h1 { font-size: var(--add-font-h1, 2.5rem); }
h2, .h2 { font-size: var(--add-font-h2, 2rem); }
h3, .h3 { font-size: var(--add-font-h3, 1.75rem); }
h4, .h4 { font-size: var(--add-font-h4, 1.5rem); }

h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
	color: #1a202c;
	margin-block-end: 0.75rem;
}

p {
	margin-block-end: 1rem;
}

/* Buttons */
.add-btn {
	display: inline-block;
	padding: 0.6rem 1.25rem;
	border-radius: var(--add-radius);
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background-color var(--add-transition), color var(--add-transition), border-color var(--add-transition);
	text-align: center;
	border: 2px solid transparent;
	text-decoration: none;
}

.add-btn-primary {
	background-color: var(--add-primary);
	color: #fff;
	border-color: var(--add-primary);
}

.add-btn-primary:hover,
.add-btn-primary:focus {
	background-color: transparent;
	color: var(--add-primary);
	text-decoration: none;
}

.add-btn-secondary {
	background-color: var(--add-secondary);
	color: #fff;
	border-color: var(--add-secondary);
}

.add-btn-secondary:hover,
.add-btn-secondary:focus {
	background-color: transparent;
	color: var(--add-secondary);
	text-decoration: none;
}

.add-btn-sm {
	padding: 0.4rem 0.875rem;
	font-size: 0.8rem;
}

/* Section title */
.add-section-title {
	font-size: var(--add-font-h2, 2rem);
	color: var(--add-primary);
	margin-block-end: 1.5rem;
	padding-block-end: 0.5rem;
	border-bottom: 3px solid var(--add-accent);
}

/* 4. Header + navigation
   ============================================================================= */
.add-site-header {
	background-color: #fff;
	border-bottom: 1px solid var(--add-border);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--add-shadow);
}

.add-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.875rem;
}

.add-site-branding {
	flex-shrink: 0;
}

.add-site-name {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--add-primary);
	text-decoration: none;
	display: block;
}

.add-site-name:hover {
	text-decoration: none;
	color: var(--add-accent);
}

.add-site-tagline {
	font-size: 0.75rem;
	color: var(--add-secondary);
	margin: 0;
}

/* Site logo (header) */
.add-site-logo-link {
	display: block;
	text-decoration: none;
}

.add-site-logo {
	max-height: 60px;
	width: auto;
	display: block;
}

/* Site logo (footer) */
.add-footer-logo-link {
	display: inline-block;
	text-decoration: none;
}

.add-footer-logo-img {
	max-height: 40px;
	width: auto;
	display: block;
	margin-bottom: 0.5rem;
	filter: brightness(0) invert(1); /* white logo in dark footer */
}

.add-footer-extra {
	font-size: 0.75rem;
	color: #718096;
	margin-top: 0.375rem;
}

/* Primary nav — hidden on mobile, shown on desktop */
.add-primary-nav {
	display: none;
}

.add-nav-menu {
	display: flex;
	gap: 0.25rem;
	list-style: none;
}

.add-nav-menu a {
	display: block;
	padding: 0.5rem 0.875rem;
	color: #333;
	font-weight: 500;
	border-radius: var(--add-radius);
	transition: background-color var(--add-transition), color var(--add-transition);
}

.add-nav-menu a:hover,
.add-nav-menu .current-menu-item > a {
	background-color: var(--add-primary);
	color: #fff;
	text-decoration: none;
}

/* Hamburger button */
.add-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 28px;
	height: 20px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.add-hamburger-bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--add-secondary);
	border-radius: 2px;
	transition: transform var(--add-transition), opacity var(--add-transition);
}

.add-hamburger[aria-expanded="true"] .add-hamburger-bar:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

.add-hamburger[aria-expanded="true"] .add-hamburger-bar:nth-child(2) {
	opacity: 0;
}

.add-hamburger[aria-expanded="true"] .add-hamburger-bar:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

/* Mobile nav drawer */
.add-primary-nav.add-nav-open {
	display: block;
	position: fixed;
	top: 60px;
	left: 0;
	right: 0;
	background: #fff;
	border-bottom: 1px solid var(--add-border);
	padding: 1rem;
	z-index: 99;
	box-shadow: var(--add-shadow-lg);
}

.add-primary-nav.add-nav-open .add-nav-menu {
	flex-direction: column;
	gap: 0.25rem;
}

/* 5. Breadcrumb
   ============================================================================= */
.add-breadcrumb {
	margin-block-end: 1.5rem;
}

.add-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	align-items: center;
	list-style: none;
}

.add-breadcrumb li {
	display: flex;
	align-items: center;
	font-size: 0.875rem;
	color: var(--add-secondary);
}

.add-breadcrumb li + li::before {
	content: '›';
	margin-inline-end: 0.25rem;
}

.add-breadcrumb a {
	color: var(--add-primary);
}

.add-breadcrumb [aria-current="page"] {
	color: #555;
}

/* 6. Hero section
   ============================================================================= */

/* Slide-up entrance animation */
@keyframes add-slide-up {
	from {
		opacity: 0;
		transform: translateY(32px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.add-animate-slide-up {
	animation: add-slide-up 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.add-animate-delay-1 { animation-delay: 0.15s; }
.add-animate-delay-2 { animation-delay: 0.3s;  }
.add-animate-delay-3 { animation-delay: 0.45s; }

/* Base hero — solid gradient fallback (no image set) */
.add-hero-search {
	background: linear-gradient(135deg, var(--add-primary) 0%, #1a365d 100%);
	color: #fff;
	text-align: center;
	position: relative;
	overflow: hidden;
}

/* Hero overlay wrapper — fills the whole section */
.add-hero-overlay-wrap {
	padding-block: 3rem;
	width: 100%;
}

/* When a hero image is set: full-width photo banner */
.add-hero-has-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 520px;
	display: flex;
	align-items: stretch;
}

.add-hero-has-image .add-hero-overlay-wrap {
	display: flex;
	align-items: center;
	width: 100%;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.38) 0%,
		rgba(0, 0, 0, 0.72) 100%
	);
}

/* Hero text block */
.add-hero-content {
	margin-block-end: 2rem;
}

.add-hero-title {
	font-size: clamp(2rem, 6vw, var(--add-font-h1, 2.5rem));
	color: #fff;
	margin-block-end: 0.5rem;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
	line-height: 1.2;
}

.add-hero-tagline {
	font-size: 1.15rem;
	color: rgba(255, 255, 255, 0.92);
	margin-block-end: 0.75rem;
}

.add-hero-intro {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.82);
	max-width: 640px;
	margin-inline: auto;
	margin-block-end: 0;
	line-height: 1.75;
}

/* Search form */
.add-search-form {
	max-width: 700px;
	margin-inline: auto;
}

.add-search-fields {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.add-search-input,
.add-trade-select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: none;
	border-radius: var(--add-radius);
	font-size: 1rem;
	background-color: #fff;
	color: #333;
}

/* Profile hero (single page) */
.add-profile-hero {
	position: relative;
	overflow: hidden;
	max-height: 400px;
}

.add-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.add-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 60%);
	display: flex;
	align-items: flex-end;
	padding-block-end: 1.5rem;
}

.add-profile-title {
	color: #fff;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
	font-size: clamp(1.5rem, 4vw, var(--add-font-h1, 2.5rem));
}

.add-profile-trades,
.add-profile-locations {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

/* 7a. Front page intro
   ============================================================================= */
.add-front-intro {
	padding-block: 2.5rem;
	border-bottom: 1px solid var(--add-border);
}

.add-front-intro-content {
	max-width: 800px;
	margin-inline: auto;
	font-size: var(--add-font-p, 1rem);
	line-height: 1.75;
	color: #444;
}

.add-front-intro-content h2 { font-size: var(--add-font-h2, 2rem); margin-block: 1.25rem 0.75rem; color: var(--add-primary); }
.add-front-intro-content h3 { font-size: var(--add-font-h3, 1.75rem); margin-block: 1rem 0.5rem; color: var(--add-primary); }
.add-front-intro-content p  { margin-block-end: 1rem; }
.add-front-intro-content a  { color: var(--add-primary); text-decoration: underline; }
.add-front-intro-content ul,
.add-front-intro-content ol { padding-inline-start: 1.5rem; margin-block-end: 1rem; }
.add-front-intro-content ul { list-style: disc; }
.add-front-intro-content ol { list-style: decimal; }
.add-front-intro-content li { margin-block-end: 0.375rem; }
.add-front-intro-content img { max-width: 100%; height: auto; border-radius: var(--add-radius); }

/* 7. Card grid
   ============================================================================= */
.add-featured-listings,
.add-latest-listings {
	padding-block: 3rem;
}

.add-featured-listings {
	background-color: var(--add-bg-light);
}

.add-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--add-gap);
}

.add-card {
	background: #fff;
	border-radius: var(--add-radius);
	box-shadow: var(--add-shadow);
	overflow: hidden;
	transition: box-shadow var(--add-transition), transform var(--add-transition);
	position: relative;
}

.add-card:hover {
	box-shadow: var(--add-shadow-lg);
	transform: translateY(-2px);
}

.add-card--featured {
	border: 2px solid var(--add-accent);
}

.add-featured-badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background-color: var(--add-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	z-index: 1;
}

.add-card-thumbnail {
	display: block;
	overflow: hidden;
	aspect-ratio: 3/2;
}

.add-card-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.add-card:hover .add-card-thumbnail img {
	transform: scale(1.03);
}

.add-card-body {
	padding: 1.25rem;
}

.add-card-trades,
.add-card-locations {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-block-end: 0.75rem;
}

.add-trade-badge,
.add-location-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background-color var(--add-transition);
}

.add-trade-badge {
	background-color: var(--add-primary);
	color: #fff;
}

.add-location-badge {
	background-color: var(--add-secondary);
	color: #fff;
}

.add-trade-badge:hover {
	background-color: var(--add-accent);
	text-decoration: none;
	color: #fff;
}

.add-location-badge:hover {
	background-color: var(--add-accent);
	text-decoration: none;
	color: #fff;
}

.add-card-title {
	font-size: 1.15rem;
	margin-block-end: 0.5rem;
}

.add-card-title a {
	color: #1a202c;
}

.add-card-title a:hover {
	color: var(--add-primary);
}

.add-card-location {
	font-size: 0.875rem;
	color: var(--add-secondary);
	margin-block-end: 0.5rem;
}

.add-card-phone {
	font-size: 0.875rem;
	margin-block-end: 0.75rem;
}

/* Archive header */
.add-archive-header {
	margin-block-end: 2rem;
}

.add-archive-title {
	color: var(--add-primary);
}

.add-archive-description {
	margin-top: 0.75rem;
	color: var(--add-secondary);
}

/* Child location CTA buttons */
.add-child-locations {
	margin-block: 1.75rem 2.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--add-bg-light);
	border: 1px solid var(--add-border);
	border-radius: var(--add-radius);
}

.add-child-locations-heading {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--add-secondary);
	margin-block-end: 0.875rem;
}

.add-child-locations-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.add-child-location-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4rem 0.9rem;
	background: #fff;
	border: 1.5px solid var(--add-primary);
	border-radius: 2rem;
	color: var(--add-primary);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: background var(--add-transition), color var(--add-transition), border-color var(--add-transition);
}

.add-child-location-btn:hover,
.add-child-location-btn:focus {
	background: var(--add-primary);
	color: #fff;
	text-decoration: none;
}

.add-child-location-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding-inline: 0.3rem;
	background: var(--add-accent);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 1rem;
	line-height: 1;
}

.add-child-location-btn:hover .add-child-location-count,
.add-child-location-btn:focus .add-child-location-count {
	background: rgba(255, 255, 255, 0.25);
}

/* Archive filter */
.add-archive-filter {
	margin-block-end: 2rem;
}

.add-filter-form .add-filter-fields {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Searchable select component
   ============================================================================= */
.add-custom-select {
	position: relative;
	display: block;
	min-width: 0;
}

.add-custom-select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	padding: 0.75rem 1rem;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: var(--add-radius);
	font-size: 1rem;
	color: #333;
	cursor: pointer;
	text-align: left;
	transition: border-color var(--add-transition), box-shadow var(--add-transition);
	white-space: nowrap;
	overflow: hidden;
}

.add-custom-select-trigger:hover,
.add-custom-select.is-open .add-custom-select-trigger {
	border-color: var(--add-primary);
	box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.15);
	outline: none;
}

.add-custom-select-trigger:focus-visible {
	outline: 2px solid var(--add-primary);
	outline-offset: 2px;
}

.add-custom-select-label {
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

/* Down-arrow via CSS — no icon font needed */
.add-custom-select-arrow {
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--add-secondary);
	transition: transform var(--add-transition);
}

.add-custom-select.is-open .add-custom-select-arrow {
	transform: rotate(180deg);
}

/* Dropdown panel */
.add-custom-select-panel {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	min-width: 220px;
	background: #fff;
	border: 1px solid var(--add-border);
	border-radius: var(--add-radius);
	box-shadow: var(--add-shadow-lg);
	z-index: 200;
	overflow: hidden;
}

.add-custom-select-panel[hidden] {
	display: none;
}

/* Search input inside the panel */
.add-custom-select-search {
	display: block;
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: none;
	border-bottom: 1px solid var(--add-border);
	font-size: 0.875rem;
	background: var(--add-bg-light);
	color: #333;
	outline: none;
	box-sizing: border-box;
}

.add-custom-select-search:focus {
	background: #fff;
	border-bottom-color: var(--add-primary);
}

/* Options list */
.add-custom-select-list {
	max-height: 220px;
	overflow-y: auto;
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
}

.add-custom-select-option {
	padding: 0.5rem 0.875rem;
	font-size: 0.9rem;
	cursor: pointer;
	color: #333;
	transition: background-color var(--add-transition), color var(--add-transition);
}

.add-custom-select-option:hover {
	background-color: var(--add-bg-light);
	color: var(--add-primary);
}

.add-custom-select-option.is-selected {
	background-color: var(--add-primary);
	color: #fff;
	font-weight: 600;
}

.add-custom-select-option[hidden] {
	display: none;
}

/* Empty-state message */
.add-custom-select-empty {
	padding: 0.5rem 0.875rem;
	font-size: 0.85rem;
	color: var(--add-secondary);
	font-style: italic;
	margin: 0;
}

/* Pagination */
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 2rem;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: 0.5rem;
	border-radius: var(--add-radius);
	border: 1px solid var(--add-border);
	color: var(--add-primary);
	font-weight: 500;
	font-size: 0.9rem;
	transition: background-color var(--add-transition), color var(--add-transition);
}

.page-numbers:hover {
	background-color: var(--add-primary);
	color: #fff;
	text-decoration: none;
}

.page-numbers.current {
	background-color: var(--add-primary);
	color: #fff;
	border-color: var(--add-primary);
}

/* 8. Single profile
   ============================================================================= */
.add-profile-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-top: 2rem;
}

.add-company-name-label {
	font-size: 1.1rem;
	color: var(--add-secondary);
	margin-block-end: 1rem;
}

.add-profile-description {
	color: #444;
	line-height: 1.7;
}

.add-profile-description p {
	margin-block-end: 1rem;
}

/* Sidebar */
.add-profile-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.add-contact-card,
.add-opening-hours,
.add-profiles,
.add-map-wrapper {
	background: var(--add-bg-light);
	border-radius: var(--add-radius);
	padding: 1.25rem;
	border: 1px solid var(--add-border);
}

.add-sidebar-title {
	font-size: 1.1rem;
	color: var(--add-primary);
	margin-block-end: 1rem;
	padding-block-end: 0.5rem;
	border-bottom: 2px solid var(--add-accent);
}

.add-contact-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: 0.75rem;
	font-size: 0.9rem;
}

.add-contact-label {
	font-weight: 600;
	color: #555;
	min-width: 80px;
}

.add-contact-address address {
	color: #444;
	line-height: 1.5;
}

/* 9. Opening hours table
   ============================================================================= */
.add-hours-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.add-hours-row {
	border-bottom: 1px solid var(--add-border);
}

.add-hours-row:last-child {
	border-bottom: none;
}

.add-hours-row:nth-child(even) {
	background-color: rgba(0,0,0,0.02);
}

.add-hours-today {
	background-color: rgba(237, 137, 54, 0.08) !important;
}

.add-hours-day {
	padding: 0.5rem 0.75rem 0.5rem 0;
	font-weight: 700;
	color: #333;
	text-align: left;
	width: 55%;
}

.add-hours-time {
	padding: 0.5rem 0;
	color: #555;
}

.add-closed-label {
	color: #c53030;
	font-weight: 600;
}

.add-today-label {
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--add-accent);
	margin-inline-start: 0.25rem;
}

/* 10. Gallery grid
   ============================================================================= */
.add-gallery {
	margin-top: 2rem;
}

.add-gallery-title {
	font-size: var(--add-font-h3, 1.75rem);
	margin-block-end: 1rem;
	color: var(--add-primary);
}

.add-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.75rem;
}

.add-gallery-item {
	display: block;
	overflow: hidden;
	border-radius: var(--add-radius);
	aspect-ratio: 1;
	cursor: pointer;
}

.add-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.add-gallery-item:hover img {
	transform: scale(1.05);
}

/* Lightbox */
.add-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.92);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.add-lightbox[hidden] {
	display: none;
}

.add-lightbox-content {
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.add-lightbox-image {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	border-radius: var(--add-radius);
}

.add-lightbox-close,
.add-lightbox-prev,
.add-lightbox-next {
	position: fixed;
	background: rgba(255,255,255,0.15);
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 2rem;
	line-height: 1;
	padding: 0.5rem 0.75rem;
	border-radius: var(--add-radius);
	transition: background-color var(--add-transition);
	z-index: 10000;
}

.add-lightbox-close:hover,
.add-lightbox-prev:hover,
.add-lightbox-next:hover {
	background: rgba(255,255,255,0.3);
}

.add-lightbox-close { top: 1rem; right: 1rem; }
.add-lightbox-prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.add-lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); }

/* 11. Profile links
   ============================================================================= */
.add-profiles-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.add-profile-link {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.75rem;
	background-color: #fff;
	border-radius: var(--add-radius);
	border: 1px solid var(--add-border);
	color: #333;
	font-size: 0.875rem;
	font-weight: 500;
	transition: background-color var(--add-transition), border-color var(--add-transition);
}

.add-profile-link:hover {
	background-color: var(--add-primary);
	border-color: var(--add-primary);
	color: #fff;
	text-decoration: none;
}

.add-profile-facebook  .add-profile-link:hover { background-color: #1877f2; border-color: #1877f2; }
.add-profile-youtube   .add-profile-link:hover { background-color: #ff0000; border-color: #ff0000; }
.add-profile-instagram .add-profile-link:hover { background-color: #c13584; border-color: #c13584; }
.add-profile-twitter   .add-profile-link:hover { background-color: #1da1f2; border-color: #1da1f2; }
.add-profile-linkedin  .add-profile-link:hover { background-color: #0a66c2; border-color: #0a66c2; }

.add-profile-icon {
	width: 18px;
	height: 18px;
	background-color: currentColor;
	border-radius: 3px;
	flex-shrink: 0;
	opacity: 0.7;
}

/* 12. Map
   ============================================================================= */
.add-map {
	width: 100%;
	height: 250px;
	border-radius: var(--add-radius);
	overflow: hidden;
	margin-top: 1rem;
}

/* 13. Footer
   ============================================================================= */
.add-site-footer {
	background-color: var(--add-bg-dark);
	color: #e2e8f0;
	padding-block-start: 3rem;
}

.add-footer-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding-block-end: 2rem;
}

.add-footer-logo {
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}

.add-footer-logo:hover {
	color: var(--add-accent);
}

.add-footer-tagline {
	font-size: 0.875rem;
	color: #a0aec0;
	margin-top: 0.375rem;
}

.add-footer-menu {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.add-footer-menu a {
	color: #a0aec0;
	font-size: 0.875rem;
	transition: color var(--add-transition);
}

.add-footer-menu a:hover {
	color: #fff;
	text-decoration: none;
}

.add-footer-bottom {
	border-top: 1px solid #2d3748;
	padding-block: 1.25rem;
	text-align: center;
	font-size: 0.8rem;
	color: #718096;
}

/* 14. 404 + search
   ============================================================================= */
.add-error-page,
.add-no-results {
	text-align: center;
	padding-block: 3rem;
}

.add-404-title {
	color: var(--add-primary);
	margin-block-end: 1rem;
}

.add-404-message {
	color: var(--add-secondary);
	font-size: 1.1rem;
	margin-block-end: 2rem;
}

.add-404-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-block-end: 2rem;
}

.add-404-search {
	max-width: 400px;
	margin-inline: auto;
}

.add-search-query {
	color: var(--add-primary);
}

/* Page */
.add-page-header {
	margin-block-end: 2rem;
	padding-block-end: 1rem;
	border-bottom: 3px solid var(--add-accent);
}

.add-page-title {
	color: var(--add-primary);
}

/* WP search form */
.search-form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.search-field {
	flex: 1;
	min-width: 200px;
	padding: 0.6rem 1rem;
	border: 1px solid var(--add-border);
	border-radius: var(--add-radius);
	font-size: 1rem;
}

.search-submit {
	padding: 0.6rem 1.25rem;
	background-color: var(--add-primary);
	color: #fff;
	border: none;
	border-radius: var(--add-radius);
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
}

/* No results */
.add-no-results {
	padding: 2rem;
	background: var(--add-bg-light);
	border-radius: var(--add-radius);
	text-align: center;
	color: var(--add-secondary);
}

/* 15. Media queries
   ============================================================================= */

/* Tablet — 768px */
@media (min-width: 768px) {

	.add-container {
		padding-inline: 2rem;
	}

	/* Nav */
	.add-primary-nav {
		display: block;
	}

	.add-hamburger {
		display: none;
	}

	/* Search */
	.add-search-fields,
	.add-filter-form .add-filter-fields {
		flex-direction: row;
		align-items: center;
	}

	.add-search-input {
		width: auto;
		flex: 1;
	}

	.add-trade-select {
		width: auto;
		flex-shrink: 0;
	}

	/* Card grid */
	.add-card-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}

	/* Gallery */
	.add-gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}

	/* Footer */
	.add-footer-inner {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	.add-footer-menu {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.75rem 1.5rem;
	}
}

/* Desktop — 1024px */
@media (min-width: 1024px) {

	.add-main {
		padding-block: 3rem;
	}

	/* Single profile layout */
	.add-profile-layout {
		grid-template-columns: 1fr 340px;
		gap: 3rem;
	}

	/* Map taller */
	.add-map {
		height: 300px;
	}

	/* Hero search */
	.add-hero-overlay-wrap {
		padding-block: 5rem;
	}

	.add-hero-has-image {
		min-height: 620px;
	}

	.add-search-fields {
		flex-direction: row;
		align-items: stretch;
	}

	.add-search-fields .add-search-input,
	.add-search-fields .add-custom-select {
		flex: 1;
	}
}

/* Wide — 1280px */
@media (min-width: 1280px) {

	.add-card-grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}

	.add-profile-layout {
		grid-template-columns: 1fr 380px;
	}
}

.add-company-name-label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--add-primary);
}