/* ==========================================================================
   ARCHETYPE "yellowpages" — bold business directory, yellow/cream listing rows
   Class prefix: yp-
   Accent via tokens: var(--one), var(--one-hover), var(--one-border),
   rgba(var(--one-shadow-rgb), …). Neutrals (yellow/cream/ink) are hardcoded.
   Type: Oswald (condensed headings) + Open Sans (body).
   ========================================================================== */

/* ----- Reset ----- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.yp-body {
  margin: 0;
  font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1c1c1c;
  background: #fbf7ec;
  -webkit-font-smoothing: antialiased;
}

.yp-body a { color: var(--one); text-decoration: none; }
.yp-body a:hover { color: var(--one-hover); }

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

h1, h2, h3 {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 600;
  letter-spacing: .3px;
  margin: 0;
  color: #1c1c1c;
}

/* ----- Container ----- */
.yp-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.yp-main { padding: 32px 0 64px; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.yp-header {
  background: #ffd200;
  border-bottom: 4px solid #1c1c1c;
  position: sticky;
  top: 0;
  z-index: 50;
}

.yp-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 16px;
}

.yp-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #1c1c1c !important;
}

.yp-brand-logo { max-height: 44px; width: auto; }

.yp-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #1c1c1c;
  color: #ffd200;
  border-radius: 6px;
  font-size: 18px;
}

.yp-brand-text {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1;
}

.yp-nav-toggle {
  display: none;
  background: #1c1c1c;
  color: #ffd200;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  font-size: 20px;
  cursor: pointer;
}

.yp-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.yp-nav-link {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .5px;
  color: #1c1c1c !important;
  padding: 8px 12px;
  border-radius: 5px;
  transition: background .15s ease;
}
.yp-nav-link:hover { background: rgba(28,28,28,.12); }

.yp-nav-link i { margin-right: 5px; }

.yp-nav-cta {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .5px;
  background: var(--one);
  color: #fff !important;
  padding: 9px 16px;
  border-radius: 5px;
  border: 2px solid var(--one-border);
  transition: background .15s ease, transform .1s ease;
}
.yp-nav-cta:hover { background: var(--one-hover); color: #fff !important; transform: translateY(-1px); }
.yp-nav-cta i { margin-right: 5px; }

.yp-nav-sep {
  width: 1px;
  height: 24px;
  background: rgba(28,28,28,.3);
  margin: 0 6px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.yp-hero {
  background: #1c1c1c;
  color: #fff;
  border-radius: 12px;
  padding: 56px 40px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
  border-bottom: 6px solid #ffd200;
}
.yp-hero::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 240px;
  height: 240px;
  background: rgba(255,210,0,.12);
  border-radius: 50%;
}

.yp-hero-inner { position: relative; max-width: 720px; }

.yp-hero-kicker {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  color: #ffd200;
  background: rgba(255,210,0,.12);
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 18px;
}
.yp-hero-kicker i { margin-right: 6px; }

.yp-hero-title {
  color: #fff;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.05;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
}

.yp-hero-sub {
  font-size: 18px;
  color: #dcdcdc;
  margin: 0 0 28px;
  max-width: 600px;
}

/* ----- Buttons ----- */
.yp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, color .15s ease;
  border: 2px solid transparent;
}
.yp-btn-primary { background: var(--one); color: #fff !important; border-color: var(--one-border); }
.yp-btn-primary:hover { background: var(--one-hover); color: #fff !important; transform: translateY(-2px); }

.yp-btn-ghost {
  background: transparent;
  color: #1c1c1c !important;
  border-color: #1c1c1c;
}
.yp-btn-ghost:hover { background: #1c1c1c; color: #ffd200 !important; }

.yp-btn-block { display: flex; width: 100%; justify-content: center; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.yp-sec { margin-bottom: 44px; }

.yp-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 3px solid #1c1c1c;
  padding-bottom: 10px;
  margin-bottom: 22px;
}

.yp-sec-title {
  font-size: 26px;
  text-transform: uppercase;
  font-weight: 700;
}
.yp-sec-title i { color: var(--one); margin-right: 8px; }

.yp-sec-count {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6a6a6a;
  white-space: nowrap;
}

/* ==========================================================================
   CATEGORIES GRID
   ========================================================================== */
.yp-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.yp-cat {
  background: #fff;
  border: 2px solid #1c1c1c;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 4px 4px 0 rgba(28,28,28,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
.yp-cat:hover { transform: translateY(-3px); box-shadow: 6px 8px 0 rgba(var(--one-shadow-rgb), .18); }

.yp-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #ffd200;
  border-bottom: 2px solid #1c1c1c;
  color: #1c1c1c !important;
}

.yp-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #1c1c1c;
  color: #ffd200;
  border-radius: 6px;
  font-size: 16px;
  flex: 0 0 auto;
}

.yp-cat-name {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 19px;
  text-transform: uppercase;
  flex: 1 1 auto;
  line-height: 1.1;
}

.yp-cat-count {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 14px;
  background: #1c1c1c;
  color: #ffd200;
  border-radius: 20px;
  padding: 2px 10px;
  flex: 0 0 auto;
}

.yp-cat-subs { list-style: none; margin: 0; padding: 10px 16px 14px; }
.yp-cat-subs li { padding: 3px 0; }
.yp-cat-subs a {
  color: #333;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.yp-cat-subs a:hover { color: var(--one); }
.yp-cat-subs i { color: var(--one); font-size: 11px; }
.yp-cat-more { font-weight: 600; color: var(--one) !important; }

/* ==========================================================================
   LISTINGS (website cards / phone-book rows)
   ========================================================================== */
.yp-listings {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.yp-listing {
  display: flex;
  gap: 18px;
  background: #fff;
  border: 1px solid #e3dcc4;
  border-left: 6px solid var(--one);
  border-radius: 8px;
  padding: 16px 18px;
  transition: box-shadow .12s ease, transform .1s ease;
}
.yp-listing:hover {
  box-shadow: 0 6px 18px rgba(var(--one-shadow-rgb), .12);
  transform: translateY(-1px);
}

.yp-listing-thumb {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #1c1c1c;
  background: #f3eed9;
}
.yp-listing-thumb img { width: 100%; height: 100%; object-fit: cover; }

.yp-listing-body { flex: 1 1 auto; min-width: 0; }

.yp-listing-titleline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.yp-listing-name {
  font-size: 22px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.1;
}
.yp-listing-name a { color: #1c1c1c; }
.yp-listing-name a:hover { color: var(--one); }

.yp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--one);
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
}

.yp-listing-url {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  margin: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yp-listing-url i { color: var(--one); }
.yp-listing-url a { color: #5a5a5a; }
.yp-listing-url a:hover { color: var(--one); }

.yp-listing-desc {
  margin: 6px 0 10px;
  color: #444;
  font-size: 15px;
}

.yp-listing-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.yp-listing-link {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .5px;
  color: var(--one) !important;
}
.yp-listing-link:hover { color: var(--one-hover) !important; }
.yp-listing-link i { margin-left: 3px; }

.yp-listing-edit {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .5px;
  color: #6a6a6a !important;
}
.yp-listing-edit:hover { color: #1c1c1c !important; }

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.yp-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.yp-pager-btn {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 14px;
  padding: 10px 18px;
  border: 2px solid #1c1c1c;
  border-radius: 6px;
  background: #fff;
  color: #1c1c1c !important;
  transition: background .15s ease, color .15s ease;
}
.yp-pager-btn:hover { background: #1c1c1c; color: #ffd200 !important; }

.yp-pager-disabled {
  opacity: .4;
  pointer-events: none;
  background: #f0ead4;
}

.yp-pager-status {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 14px;
  color: #6a6a6a;
}

/* ==========================================================================
   BREADCRUMB / PAGE HEAD
   ========================================================================== */
.yp-crumb {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 13px;
  margin-bottom: 22px;
  color: #6a6a6a;
}
.yp-crumb a { color: var(--one); }
.yp-crumb-sep { margin: 0 8px; color: #aaa; }
.yp-crumb-cur { color: #1c1c1c; font-weight: 600; }

.yp-page-head {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #ffd200;
  border: 2px solid #1c1c1c;
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 26px;
}

.yp-page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #1c1c1c;
  color: #ffd200;
  border-radius: 8px;
  font-size: 24px;
  flex: 0 0 auto;
}

.yp-page-title {
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.05;
}

.yp-page-desc {
  margin: 6px 0 0;
  color: #3a3a2c;
  font-size: 15px;
}

/* ----- Subnav (subcategory chips) ----- */
.yp-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.yp-subnav-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .4px;
  background: #fff;
  border: 2px solid #1c1c1c;
  border-radius: 30px;
  padding: 7px 16px;
  color: #1c1c1c !important;
  transition: background .15s ease, color .15s ease;
}
.yp-subnav-item:hover { background: #1c1c1c; color: #ffd200 !important; }
.yp-subnav-item i { color: var(--one); }
.yp-subnav-item:hover i { color: #ffd200; }

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.yp-empty {
  text-align: center;
  padding: 48px 20px;
  background: #fff;
  border: 2px dashed #c9c0a0;
  border-radius: 10px;
  color: #6a6a6a;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.yp-empty i { display: block; font-size: 32px; color: #c9c0a0; margin-bottom: 10px; }

/* ==========================================================================
   WEBSITE DETAIL
   ========================================================================== */
.yp-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}

.yp-detail-main {
  background: #fff;
  border: 1px solid #e3dcc4;
  border-top: 6px solid var(--one);
  border-radius: 10px;
  padding: 26px;
}

.yp-detail-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border-bottom: 2px solid #f0ead4;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.yp-detail-thumb {
  flex: 0 0 110px;
  width: 110px;
  height: 110px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #1c1c1c;
  background: #f3eed9;
}
.yp-detail-thumb img { width: 100%; height: 100%; object-fit: cover; }

.yp-detail-titlebox { min-width: 0; }

.yp-detail-title {
  font-size: 34px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 8px;
}

.yp-detail-url {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 15px;
  word-break: break-all;
}
.yp-detail-url i { color: var(--one); }
.yp-detail-url a { color: #5a5a5a; }
.yp-detail-url a:hover { color: var(--one); }

.yp-detail-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 15px;
  font-weight: 600;
  color: #1c1c1c;
  margin-bottom: 8px;
}

.yp-detail-desc {
  color: #3a3a3a;
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-line;
}

.yp-detail-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 92px;
}

.yp-detail-urlcard {
  background: #fff;
  border: 2px solid #1c1c1c;
  border-radius: 8px;
  padding: 14px 16px;
}
.yp-detail-urlcard-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 12px;
  color: #6a6a6a;
  margin-bottom: 4px;
}
.yp-detail-urlcard-value {
  display: block;
  font-weight: 700;
  word-break: break-all;
  color: #1c1c1c;
}

/* ==========================================================================
   LINK LIST (partner directories / my websites)
   ========================================================================== */
.yp-linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.yp-linklist li {
  background: #fff;
  border: 1px solid #e3dcc4;
  border-left: 5px solid #1c1c1c;
  border-radius: 8px;
  padding: 14px 16px;
}
.yp-ll-name {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 17px;
  color: #1c1c1c !important;
}
.yp-ll-name:hover { color: var(--one) !important; }
.yp-ll-url { display: block; font-size: 13px; color: #8a8a8a; margin-top: 2px; word-break: break-all; }
.yp-ll-desc { display: block; font-size: 14px; color: #555; margin-top: 6px; }

/* ==========================================================================
   MESSAGES
   ========================================================================== */
.yp-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 15px;
  border: 2px solid;
}
.yp-msg i { margin-top: 2px; }
.yp-msg-success { background: #eafaf0; border-color: #2e9e5b; color: #1d6b3d; }
.yp-msg-error { background: #fdecec; border-color: #d64545; color: #97282c; }
.yp-msg-list { margin: 6px 0 0; padding-left: 20px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.yp-footer {
  background: #1c1c1c;
  color: #cfcfcf;
  border-top: 6px solid #ffd200;
  padding: 44px 0 24px;
  margin-top: 40px;
}

.yp-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid #333;
}

.yp-footer-brand-col { max-width: 460px; }

.yp-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}
.yp-footer-brand .yp-brand-mark { background: #ffd200; color: #1c1c1c; }

.yp-footer-tag { margin: 0; font-size: 14.5px; color: #aaa; line-height: 1.6; }

.yp-footer-links { display: flex; flex-direction: column; gap: 8px; }
.yp-footer-heading {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 14px;
  color: #ffd200;
  margin-bottom: 4px;
}
.yp-footer-links a { color: #cfcfcf; font-size: 14.5px; }
.yp-footer-links a:hover { color: #ffd200; }

.yp-footer-copy {
  text-align: center;
  padding-top: 22px;
  font-size: 13px;
  color: #8a8a8a;
}

/* ==========================================================================
   SEARCH BAR
   ========================================================================== */
.yp-search {
  display: flex;
  align-items: center;
  position: relative;
  background: #fff;
  border: 2px solid #1c1c1c;
  border-radius: 6px;
  overflow: hidden;
  flex: 1 1 220px;
  max-width: 340px;
  min-width: 0;
}
.yp-search-icon {
  position: absolute;
  left: 12px;
  color: #6a6a6a;
  font-size: 14px;
  pointer-events: none;
}
.yp-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 9px 12px 9px 34px;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #1c1c1c;
}
.yp-search input[type="search"]::placeholder { color: #9a9a8a; }
.yp-search button {
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  background: var(--one);
  color: #fff;
  padding: 0 16px;
  align-self: stretch;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 14px;
  transition: background .15s ease;
}
.yp-search button:hover { background: var(--one-hover); }
.yp-search button i { margin-right: 4px; }

/* Bigger search on results page */
.yp-search-lg {
  max-width: 640px;
  margin-bottom: 30px;
  border-width: 3px;
}
.yp-search-lg input[type="search"] { padding: 13px 14px 13px 38px; font-size: 17px; }
.yp-search-lg button { padding: 0 22px; font-size: 15px; }

/* ==========================================================================
   FILTER CHIPS
   ========================================================================== */
.yp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.yp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 13.5px;
  letter-spacing: .4px;
  background: #fff;
  border: 2px solid #1c1c1c;
  border-radius: 30px;
  padding: 6px 15px;
  color: #1c1c1c !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.yp-chip:hover { background: #1c1c1c; color: #ffd200 !important; }
.yp-chip i { color: var(--one); }
.yp-chip:hover i { color: #ffd200; }
.yp-chip-active {
  background: var(--one);
  border-color: var(--one-border);
  color: #fff !important;
}
.yp-chip-active:hover { background: var(--one-hover); color: #fff !important; }
.yp-chip-active i { color: #fff; }
.yp-chip-active:hover i { color: #fff; }
.yp-chip-premium i { color: #f0a500; }
.yp-chip-premium:hover i,
.yp-chip-premium.yp-chip-active i { color: inherit; }

/* ==========================================================================
   TOOLBAR / SORT
   ========================================================================== */
.yp-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.yp-toolbar .yp-chips { margin-bottom: 0; margin-right: auto; }

.yp-sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.yp-sort label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 13px;
  color: #6a6a6a;
}
.yp-sort select {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 14px;
  color: #1c1c1c;
  background: #fff;
  border: 2px solid #1c1c1c;
  border-radius: 6px;
  padding: 8px 34px 8px 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20fill='%231c1c1c'%20d='M6%208L0%200h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.yp-sort select:hover { border-color: var(--one-border); }
.yp-sort select:focus { outline: 2px solid rgba(var(--one-shadow-rgb), .35); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .yp-detail { grid-template-columns: 1fr; }
  .yp-detail-aside { position: static; }
}

@media (max-width: 760px) {
  .yp-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  .yp-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px 0 16px;
  }
  .yp-nav.yp-open { display: flex; }
  .yp-header-bar { flex-wrap: wrap; }
  .yp-nav-link, .yp-nav-cta { text-align: center; }
  .yp-nav-sep { display: none; }

  .yp-hero { padding: 40px 24px; }

  .yp-search { order: 3; flex-basis: 100%; max-width: none; }

  .yp-toolbar { justify-content: space-between; }

  .yp-listing { flex-direction: column; }
  .yp-listing-thumb { width: 100%; height: 160px; flex-basis: auto; }

  .yp-detail-head { flex-direction: column; }
  .yp-detail-thumb { width: 100%; height: 180px; flex-basis: auto; }
}

@media (max-width: 480px) {
  body.yp-body { font-size: 15px; }
  .yp-sec-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .yp-page-head { flex-direction: column; align-items: flex-start; text-align: left; }
}