/* Weddings in Sussex. White pages, Merriweather headings, Nunito Sans text, plum accent,
   blush panels. Layout follows the big UK wedding directories (curved photo hero,
   joined search bar, photo cards with rating, town and price). */
:root {
  --ink: #222; --muted: #666; --line: #e6e3ea; --bg-soft: #f7f5fa;
  --plum: #6e4f9a; --plum-dk: #573c7d; --plum-lt: #f1ecf8;
  --blush: #fde9e3; --star: #e6a700;
  --r: 8px; --r-lg: 18px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font: 16px/1.6 "Nunito Sans", Arial, sans-serif; }
h1, h2, h3 { font-family: Merriweather, Georgia, serif; font-weight: 700; line-height: 1.25; color: var(--ink); }
h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: .3em 0 .3em; }
h2 { font-size: 1.6rem; margin: 0 0 .2em; }
h3 { font-size: 1.1rem; }
a { color: var(--plum); }
img { max-width: 100%; display: block; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }
.block { padding: 36px 24px; }
.sub { margin: 0 0 20px; color: var(--ink); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.lede { font-size: 1.15rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; color: var(--plum); margin: 0 0 6px; }

/* header */
.top { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.top-in { display: flex; align-items: center; gap: 24px; height: 72px; }
.logo { font: 400 2.1rem "Great Vibes", cursive; color: var(--plum); text-decoration: none; white-space: nowrap; margin: 0; line-height: 1; }
.main-nav { display: flex; gap: 20px; flex: 1; min-width: 0; }
.main-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .96rem; white-space: nowrap; }
.main-nav a:hover { color: var(--plum); }
.top-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.shortlist-link { display: flex; align-items: center; gap: 4px; text-decoration: none; color: var(--ink); font-weight: 700; }
.shortlist-link .hrt { font-size: 1.35rem; color: var(--plum); }
@media (max-width: 960px) { .main-nav { display: none; } .top-in { justify-content: space-between; } }

/* buttons */
.btn { display: inline-block; background: var(--plum); color: #fff; border: 0; border-radius: var(--r); padding: 12px 24px;
  font: 700 1rem "Nunito Sans", sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--plum-dk); }
.btn-line { background: #fff; color: var(--ink); border: 1px solid #cfc9d6; padding: 10px 18px; font-size: .95rem; }
.btn-line:hover { background: var(--bg-soft); }
.btn-pill { border-radius: 100px; padding: 14px 30px; }
.btn-ghost { background: #fff; color: var(--plum); border: 1.5px solid var(--plum); }
.btn-ghost:hover { background: var(--plum-lt); }
.more { color: var(--plum); font-weight: 700; }

/* hero: full-width photo with a curved bottom edge, text and search underneath */
.hero { text-align: center; }
.hero-img { position: relative; height: clamp(380px, 30vw, 560px); background: var(--plum-lt) center 60%/cover no-repeat;
  clip-path: ellipse(85% 100% at 50% 0%); }
.hero-img .credit { position: absolute; right: 14px; top: 12px; }
.hero-text { margin-top: 10px; }
.hero-text .lede { margin: 0 0 22px; }
@media (max-width: 700px) { .hero-img { height: 240px; clip-path: ellipse(120% 100% at 50% 0%); } }
.credit { font-size: .7rem; color: #fff; background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 3px; text-decoration: none; }

/* search: one bar, label + select, button joined on the right */
.search { display: flex; align-items: stretch; max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); text-align: left; }
.search label { display: flex; align-items: center; gap: 10px; padding: 0 18px; min-height: 58px; }
.search .s-what { flex: 1.3; border-right: 1px solid var(--line); }
.search .s-where { flex: 1; }
.search span { color: var(--muted); font-size: .95rem; white-space: nowrap; }
.search select { flex: 1; border: 0; background: none; font: 1.05rem "Nunito Sans", sans-serif; color: var(--ink); padding: 8px 0; cursor: pointer; }
.search select:focus { outline: none; }
.search .s-go { border-radius: 0 var(--r) var(--r) 0; padding: 0 36px; font-size: 1.1rem; }
.search-float { border-radius: var(--r-lg); padding: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.12); border: 0; }
.search-float .s-go { border-radius: 100px; }
@media (max-width: 700px) {
  .search { flex-direction: column; }
  .search .s-what { border-right: 0; border-bottom: 1px solid var(--line); }
  .search .s-go { border-radius: 0 0 var(--r) var(--r); min-height: 52px; }
  .search-float .s-go { border-radius: 100px; }
}

/* two big photo cards and three feature cards */
.big-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.big-card { display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); background: #fff; }
.big-card img { width: 100%; height: 260px; object-fit: cover; clip-path: ellipse(90% 100% at 50% 0%); }
.big-card div { padding: 6px 24px 22px; }
.big-card h3 { font-size: 1.35rem; margin: 6px 0; }
.big-card p { margin: 0 0 10px; }
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.feature { display: flex; gap: 12px; justify-content: space-between; padding: 22px; border-radius: var(--r); box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink); background: #fff; }
.feature h3 { margin: 0 0 8px; font-family: "Nunito Sans", sans-serif; font-size: 1.2rem; }
.feature p { margin: 0 0 12px; }
.f-ic { font-size: 1.9rem; color: var(--plum); line-height: 1; }
@media (max-width: 860px) { .big-cards, .feature-cards { grid-template-columns: 1fr; } }

/* section heads and card rails */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 4px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 285px; gap: 20px; overflow-x: auto;
  padding: 4px 4px 18px; scroll-snap-type: x mandatory; }
.rail .card { scroll-snap-align: start; }

/* supplier cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.card { display: flex; flex-direction: column; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink); transition: transform .15s; }
.card:hover { transform: translateY(-3px); }
.card-img { position: relative; aspect-ratio: 3/2; background: var(--bg-soft); flex: none; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-cat .card-img img { filter: saturate(.75) brightness(.97); }
.card-body { padding: 14px 16px 18px; }
.card h3 { margin: 0 0 6px; font: 700 1.1rem "Nunito Sans", sans-serif; }
.rating { margin: 0 0 6px; font-size: .92rem; color: var(--muted); }
.rating strong { color: var(--ink); }
.star { color: var(--star); }
.new { background: var(--plum-lt); color: var(--plum); font-weight: 700; font-size: .78rem; padding: 1px 8px; border-radius: 4px; }
.meta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 6px; font-size: .9rem; }
.meta-i { color: var(--ink); }
.short { margin: 0; font-size: .92rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tag { position: absolute; top: 10px; left: 10px; background: var(--plum); color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 4px; }
.tag-soft { background: rgba(255,255,255,.92); color: var(--muted); }
.heart { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; font-size: 1.2rem; color: var(--plum); box-shadow: var(--shadow); cursor: pointer; }
.heart.on { color: #d0315c; }
.ph { height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--plum-lt), var(--blush)); }
.ph span { font: 700 1.2rem Merriweather, serif; color: var(--plum); }

.mono { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.mono-i { width: 84px; height: 84px; border-radius: 50%; border: 1.5px solid var(--plum); display: grid; place-items: center;
  font: 400 2rem Merriweather, serif; color: var(--plum); background: rgba(255,255,255,.6); }
.mono-c { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gallery-empty { display: grid; place-items: center; }

/* category photo grid */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cat-tile { position: relative; display: block; aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; text-decoration: none; }
.cat-tile img, .cat-tile .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.cat-tile:hover img { transform: scale(1.04); }
.cat-name { position: absolute; inset: auto 0 0 0; padding: 40px 14px 12px; color: #fff; font: 700 1.15rem "Nunito Sans", sans-serif;
  background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.cat-name small { display: block; font-weight: 400; font-size: .82rem; opacity: .9; }
.ph-menswear, .ph-hair-makeup, .ph-decor-hire { background: linear-gradient(135deg, #e9e1f3, var(--blush)); }

/* blush panel (big rounded photo beside text) */
.blush-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--blush);
  border-radius: var(--r-lg); padding: 48px; }
.blush-panel h2 { font-size: 2rem; }
.bp-img { width: 100%; height: 380px; object-fit: cover; border-radius: var(--r-lg); }
@media (max-width: 860px) { .blush-panel { grid-template-columns: 1fr; padding: 28px; } .bp-img { height: 260px; } }

/* find band */
.find-band { background: var(--bg-soft); padding: 56px 0 44px; text-align: center; margin-top: 20px; }
.find-band h2 { max-width: 720px; margin: 0 auto 26px; font-size: 1.9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }
.chips a { background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px; text-decoration: none; color: var(--ink); font-size: .92rem; }
.chips a:hover { border-color: var(--plum); color: var(--plum); }

/* listing pages */
.crumbs { font-size: .85rem; color: var(--muted); margin: 0; }
.crumbs a { color: var(--muted); }
.count { margin: 18px 0 14px; }
.empty { background: var(--bg-soft); border-radius: var(--r); padding: 28px; text-align: center; }

/* supplier page */
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.meta { color: var(--muted); margin-top: 0; }
.save-btn.on { background: #fdeef2; border-color: #d0315c; color: #d0315c; }
.gallery { display: grid; gap: 6px; border-radius: var(--r-lg); overflow: hidden; height: 440px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery.g1 { grid-template-columns: 1fr; }
.gallery.g2 { grid-template-columns: 1fr 1fr; }
.gallery.g3, .gallery.g4, .gallery.g5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.gallery.g3 img:first-child, .gallery.g4 img:first-child, .gallery.g5 img:first-child { grid-row: span 2; }
.gallery.g3 img:nth-child(2), .gallery.g3 img:nth-child(3), .gallery.g4 img:nth-child(4) { grid-column: span 2; }
@media (max-width: 700px) { .gallery { height: 260px; grid-template-columns: 1fr !important; } .gallery img:not(:first-child) { display: none; } }
.gallery-one { position: relative; height: 380px; border-radius: var(--r-lg); overflow: hidden; }
.gallery-one img { width: 100%; height: 100%; object-fit: cover; }
.gallery-one .credit { position: absolute; right: 10px; bottom: 10px; }
.gallery-one .note { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.92); font-size: .8rem; padding: 3px 10px; border-radius: 4px; }
.gallery-empty { height: 200px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--plum-lt), var(--blush)); }
.claim { background: var(--plum-lt); border-left: 4px solid var(--plum); border-radius: var(--r); padding: 12px 16px; margin: 16px 0; }
.sup-grid { display: grid; grid-template-columns: 1fr 370px; gap: 44px; margin-top: 26px; }
@media (max-width: 920px) { .sup-grid { grid-template-columns: 1fr; } }
.sup-main h2 { margin-top: 1.4em; }
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 12px 0; text-decoration: none; color: var(--ink); font-weight: 700; border-bottom: 3px solid transparent; }
.tabs a:hover { border-color: var(--plum); }
details { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; margin-bottom: 8px; }
summary { font-weight: 700; cursor: pointer; }
.deal { background: var(--blush); border-radius: var(--r); padding: 12px 16px; margin: 10px 0; }
.review { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; margin-bottom: 10px; }
.reply { background: var(--bg-soft); padding: 8px 12px; border-radius: 6px; }
.stars { color: var(--star); letter-spacing: 1px; }
.box { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px; border: 1px solid var(--line); }
.sticky { position: sticky; top: 92px; }
.price-big { font: 700 1.6rem Merriweather, serif; margin: 0; }

/* forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.sup-side .form { grid-template-columns: 1fr; }
.form label { display: flex; flex-direction: column; font-size: .9rem; font-weight: 700; gap: 4px; }
.form .full, .form button, .form textarea { grid-column: 1 / -1; }
.form input, .form select, .form textarea { font: 1rem "Nunito Sans", sans-serif; padding: 11px 12px; border: 1px solid #cfc9d6; border-radius: var(--r); background: #fff; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--plum); border-color: transparent; }
.form .check { flex-direction: row; align-items: center; gap: 8px; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
.ticks { padding-left: 0; list-style: none; }
.ticks li::before { content: "✓ "; color: var(--plum); font-weight: 700; }

/* footer */
.foot { background: #2d2440; color: #ddd6e8; margin-top: 60px; padding: 44px 0 14px; }
.foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.foot a { display: block; color: #ddd6e8; text-decoration: none; margin: 5px 0; font-size: .93rem; }
.foot .logo { color: #fff; font-size: 2rem; }
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr 1fr; } }

/* planning tools */
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.tool { background: #fff; border-radius: var(--r); padding: 22px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 4px; }
.tool .ic { font-size: 1.6rem; color: var(--plum); font-weight: 700; }
.tool small { color: var(--muted); }
.budget { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); margin: 16px 0; }
.budget th, .budget td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.budget input, .budget select { width: 100%; max-width: 160px; padding: 7px 9px; border: 1px solid #cfc9d6; border-radius: 6px; font: 1rem "Nunito Sans", sans-serif; }
.budget-total { font: 700 1.2rem Merriweather, serif; display: flex; align-items: center; gap: 8px; }
.budget-total input { font: 700 1.2rem "Nunito Sans", sans-serif; padding: 9px 12px; border: 1px solid #cfc9d6; border-radius: var(--r); width: 180px; }
.checklist { list-style: none; padding: 0; }
.checklist li { border: 1px solid var(--line); border-radius: var(--r); padding: 11px 14px; margin-bottom: 6px; }
.checklist input { margin-right: 8px; accent-color: var(--plum); transform: scale(1.2); }
.checklist li:has(input:checked) { color: var(--muted); text-decoration: line-through; background: var(--bg-soft); }
.guest-add { grid-template-columns: 2fr 1fr 1fr 1fr auto; align-items: end; }
.guest-add button { grid-column: auto; }
@media (max-width: 760px) { .guest-add { grid-template-columns: 1fr; } }
.g-del { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; }
.g-totals { font-weight: 700; }

/* Header search (supplier type or name + location), as on the big directories */
.top-search { display: flex; flex-shrink: 0; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; background: #fff; height: 40px; }
.top-search input, .top-search select { border: 0; padding: 0 12px; font: .92rem "Nunito Sans", sans-serif; background: none; min-width: 0; }
.top-search input { width: 180px; }
.top-search select { width: 130px; }
.top-search button { border: 0; background: var(--plum); color: #fff; width: 44px; font-size: 1.1rem; cursor: pointer; }
@media (max-width: 1250px) { .main-nav a:nth-child(n+5) { display: none; } }
@media (max-width: 1100px) { .main-nav a:nth-child(n+4) { display: none; } }
@media (max-width: 980px) { .top-search { display: none; } }

/* Cards: whole card is no longer one link, so the heart and Request pricing sit on top */
.card { position: relative; }
.card > a { text-decoration: none; color: var(--ink); display: block; }
.card-body { flex: 1; }
.btn-ask { margin: 0 16px 16px; text-align: center; padding: 9px 12px; font-size: .92rem; }
.card[hidden] { display: none; }

/* Results: filters on the left, list / images / map on the right */
.results-wrap { display: grid; grid-template-columns: 250px 1fr; gap: 28px; margin-top: 26px; align-items: start; }
.filters { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; padding-right: 6px; }
.f-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.link-btn { border: 0; background: none; color: var(--plum); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.f-group { border-bottom: 1px solid var(--line); padding: 10px 0; }
.f-group summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.f-group summary::after { content: "+"; color: var(--muted); }
.f-group[open] summary::after { content: "–"; }
.f-group label { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: .92rem; cursor: pointer; }
.results-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.results-bar .count { margin: 0; flex: 1; }
.sort select { margin-left: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r); font: inherit; }
.views { display: flex; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; }
.views button { border: 0; background: #fff; padding: 7px 14px; font: 600 .9rem "Nunito Sans", sans-serif; cursor: pointer; color: var(--ink); }
.views button[aria-checked="true"] { background: var(--plum); color: #fff; }
.results-map { height: 560px; border-radius: var(--r); margin-bottom: 20px; }
/* List view: photo left, details right, one per row */
.cards.as-list { grid-template-columns: 1fr; }
.cards.as-list .card { display: grid; grid-template-columns: 300px 1fr auto; align-items: center; }
.cards.as-list .card-img { height: 100%; aspect-ratio: auto; min-height: 190px; }
.cards.as-list .btn-ask { margin: 0 20px; white-space: nowrap; }
.cards.as-list .short { -webkit-line-clamp: 3; }
.cards.as-list .heart { left: 254px; right: auto; }
/* Images view: big photo grid */
.cards.as-images { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.cards.as-images .short, .cards.as-images .btn-ask { display: none; }
@media (max-width: 860px) {
  .results-wrap { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; }
  .cards.as-list .card { grid-template-columns: 1fr; }
  .cards.as-list .heart { left: auto; right: 10px; }
  .cards.as-list .btn-ask { margin: 0 16px 16px; }
}

/* Supplier page: venue features, real weddings, map */
.feat-list { columns: 2; list-style: none; padding: 0; margin: 0 0 14px; }
.feat-list li { padding: 3px 0; }
.rw { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.rw img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); }
.sup-map { height: 320px; border-radius: var(--r); }
.feat-pick { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ex-tag { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; padding: 2px 7px; border-radius: 4px; }
.card-cat .card-img img { filter: none; }
.hero-credit { margin: 0 auto; padding: 8px 24px 20px; } .hero-credit a { color: inherit; }