/* Pink two-column layout: main left, nav right */
    :root{
      --bg:#fff7fb; --surface:#ffffff; --ink:#25262b; --muted:#6b6f76;
      --border:#f7c0db; --pink-50:#fff1f6; --pink-100:#ffd7e8; --pink-400:#f472b6; --pink-500:#ec4899; --pink-600:#db2777;
      --radius:16px; --shadow:0 10px 25px rgba(236,72,153,.10), 0 2px 8px rgba(0,0,0,.06);
      --shadow-soft:0 6px 18px rgba(236,72,153,.08), 0 1px 4px rgba(0,0,0,.05);
      --container:1200px; --gap:24px; --rail:300px;
    }
    body{ background: var(--bg); color:var(--ink); }
    a{ color:var(--pink-600); }
    .container{ max-width:var(--container); margin:0 auto; padding:24px; }
    .layout{ display:grid; grid-template-columns: 1fr var(--rail); gap:var(--gap); align-items:start; }
    .main{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(12px,2.2vw,28px); min-height:60vh; }
    .sidebar{ position:sticky; top:18px; background:var(--surface); border:1px solid var(--border); border-radius:calc(var(--radius) + 2px); box-shadow:var(--shadow-soft); padding:16px; }
    .side-title{ margin:6px 0 12px; font-size:.95rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
    .side-nav{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
    .side-nav a{ display:block; padding:10px 12px; border-radius:12px; font-weight:600; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,var(--pink-200,#ffb3d3),var(--pink-50)) border-box; border:1px solid transparent; text-decoration:none; }
    .side-nav a:hover{ background:var(--pink-50); }
    .card{ border:1px solid var(--border); border-radius:14px; padding:14px; background:#fff; box-shadow:var(--shadow-soft); }
    .lead{ font-size:1.05rem; color:var(--muted); margin-top:6px; }
    @media (max-width: 980px){ .layout{ grid-template-columns:1fr; } .sidebar{ position:static; order:2; } .main{ order:1; } }
    .main h1, .main h2{ margin: 1.2rem 0 .6rem; }
    .pill{ display:inline-block; padding:.3rem .6rem; border-radius:999px; background:var(--pink-50); border:1px solid var(--border); color:var(--pink-600); font-weight:600; }
/* ----- Top navigation (centred, pretty, responsive) ----- */
.topnav{
  margin: 12px auto 18px;
  max-width: var(--container);
  background: linear-gradient(135deg, var(--pink-50), #fff);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}

/* Style the UL that _nav-top.php outputs */
.topnav ul{
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;               /* wrap on small screens */
  justify-content: center;       /* center the items */
  align-items: center;
  gap: 10px 8px;                 /* row x column gap */
}

/* Pretty links */
.topnav a{
  display: inline-block;
  padding: 8px 14px;
  line-height: 1;
  border-radius: 999px;
  font-weight: 700;
  color: var(--pink-600);
  text-decoration: none;
  border: 1px solid transparent;
  transition: all .18s ease;
}

.topnav a:hover{
  background: var(--pink-100);
  border-color: var(--pink-200);
  text-decoration: none;
}

/* Active state (works if you add class="active" or aria-current="page") */
.topnav a.active,
.topnav a[aria-current="page"]{
  background: linear-gradient(135deg, var(--pink-100), #fff);
  border-color: var(--pink-200);
}
/* --- Pretty centered site title --- */
.site-title{
  margin: 10px auto 12px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.15;
  /* Solid pink fallback */
  color: var(--pink-600);
}

/* Gradient pink option (works in all modern browsers) */
.site-title.gradient{
  background: linear-gradient(90deg, var(--pink-600), var(--pink-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;                 /* hides solid color when gradient applies */
}

/* Soft underline accent bar */
.site-title::after{
  content: "";
  display: block;
  height: 4px;
  width: 90px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink-100), var(--pink-400));
  opacity: .7;
}
/* Category gradient buttons */
.category-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;                /* row x column gap */
  justify-content: center;       /* center the group */
  align-items: center;
  margin: 14px auto 18px;
  max-width: var(--container);
}

.category-pills .gbtn{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--pink-600), var(--pink-400));
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: var(--shadow-soft), inset 0 -2px 0 rgba(0,0,0,.08);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  line-height: 1;
}
.category-pills .gbtn:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  text-decoration: none;
}
.category-pills .gbtn:active{
  transform: translateY(0);
}
/* --- Section headings + intro --- */
.section-head {                 /* optional wrapper for Welcome block */
  margin: 10px 0 18px;
}

.section-title{
  margin: 0 0 6px;
  text-align: left;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.15;
  color: var(--pink-600);                      /* solid pink */
  scroll-margin-top: 80px;                     /* nicer anchor jump */
  position: relative;
}

/* subtle gradient accent underline */
.section-title::after{
  content: "";
  display: block;
  height: 4px;
  width: 88px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink-100), var(--pink-400));
  opacity: .85;
  box-shadow: 0 2px 8px rgba(236,72,153,.18);
}

/* optional gradient TEXT for titles – add class .is-gradient on the h2 to use */
.section-title.is-gradient{
  background: linear-gradient(90deg, var(--pink-600), var(--pink-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* lead/intro paragraph */
.intro{
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--pink-50), transparent 70%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

/* "See more" pill (outline style) */
.category-pills .gbtn.gbtn-more{
  background: linear-gradient(#fff, #fff);
  color: var(--pink-600);
  border-color: var(--pink-200);
}
.category-pills .gbtn.gbtn-more:hover{
  background: var(--pink-50);
}
.category-pills .gbtn.gbtn-more::after{
  content: "→";
  margin-left: 6px;
  font-weight: 800;
}
/* Optional: tweak holiday pill gradient only */
#holidays + .category-pills .gbtn{
  background: linear-gradient(135deg, var(--pink-500), var(--pink-400));
}
/* Optional: tweak gradient for Layouts/Backgrounds pills only */
#layouts + .category-pills .gbtn{
  background: linear-gradient(135deg, var(--pink-600), var(--pink-500));
}
/* ===== Pretty Footer (hardened) ===== */
.site-footer{
  margin-top: 28px;
  background:
    radial-gradient(1000px 400px at 50% -150px, var(--pink-50), transparent 60%),
    linear-gradient(180deg, rgba(236,72,153,.06), rgba(255,255,255,.95));
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(236,72,153,.07);
}
.site-footer .container{ padding: 18px 24px 30px; }

/* Intro card */
.foot-intro{
  text-align: center;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-soft);
  margin: 0 auto 14px;
  max-width: 900px;
}

/* Remove bullets & layout list horizontally */
.site-footer ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}

/* Pill links */
.foot-links a,
.foot-btn{
  display: inline-block;
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(#fff, #fff);
  color: var(--pink-600);
  border: 1px solid var(--pink-200);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), var(--shadow-soft);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.foot-links a:hover,
.foot-btn:hover{
  background: var(--pink-50);
  border-color: var(--pink-400);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Meta + back-to-top */
.foot-meta{ text-align: center; margin-top: 14px; color: var(--ink); }
.foot-meta .muted{ color: var(--muted); margin: 6px 0 0; }

.backtotop{
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--pink-600);
  text-decoration: none;
  border-bottom: 1px dashed var(--pink-400);
}
.backtotop:hover{ border-bottom-color: transparent; }



/* ===== Small polish: paste at end of /_pages/_style.css ===== */

/* 1) Smooth scroll for “Back to top” and in-page anchors */
html { scroll-behavior: smooth; }

/* 2) Accessible, pretty focus rings (keyboard users) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(236,72,153,.35);
  border-radius: 10px;
}

/* 3) Active state for the top nav (works with class="active" or aria-current="page") */
.topnav a.active,
.topnav a[aria-current="page"]{
  background: linear-gradient(135deg, var(--pink-100), #fff);
  border-color: var(--pink-200);
  color: var(--pink-600);
  text-decoration: none;
}

/* ===== Comments index grid ===== */
.cat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin: 10px 0 16px;
}

.cat-card{
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.cat-card img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.cat-name{
  display: block;
  text-align: center;
  font-weight: 800;
  padding: 10px 12px;
  color: var(--pink-600);
  line-height: 1.15;
}

.cat-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  text-decoration: none;
}

/* Pagination */
.pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 18px 0 6px;
}

.page-status{ color: var(--muted); font-weight: 600; }

.page-btn{
  display: inline-block;
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: var(--pink-600);
  background: linear-gradient(#fff, #fff);
  border: 1px solid var(--pink-200);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), var(--shadow-soft);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.page-btn:hover{
  background: var(--pink-50);
  border-color: var(--pink-400);
  transform: translateY(-1px);
  text-decoration: none;
}
/* ===== Category image grid ===== */
.img-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin: 10px 0 16px;
}

.img-card{
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.img-card img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.img-name{
  display: block;
  text-align: center;
  font-weight: 800;
  padding: 10px 12px;
  color: var(--pink-600);
  line-height: 1.15;
}

.img-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  text-decoration: none;
}

/* Pagination (reuses your button style) */
.pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 18px 0 6px;
}
.page-status{ color: var(--muted); font-weight: 600; }
.page-btn{
  display: inline-block;
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: var(--pink-600);
  background: linear-gradient(#fff, #fff);
  border: 1px solid var(--pink-200);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), var(--shadow-soft);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.page-btn:hover{
  background: var(--pink-50);
  border-color: var(--pink-400);
  transform: translateY(-1px);
  text-decoration: none;
}
/* Numbered pagination */
.pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 6px;
}

.page-status{ color: var(--muted); font-weight: 600; }

.page-list{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-num{
  display: inline-block;
  min-width: 36px;
  text-align: center;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: var(--pink-600);
  background: linear-gradient(#fff, #fff);
  border: 1px solid var(--pink-200);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), var(--shadow-soft);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.page-num:hover{
  background: var(--pink-50);
  border-color: var(--pink-400);
  transform: translateY(-1px);
  text-decoration: none;
}

.page-num.is-current{
  background: linear-gradient(135deg, var(--pink-600), var(--pink-400));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow);
  pointer-events: none;
}

.page-ellipsis{ color: var(--muted); padding: 0 4px; }

.page-btn{
  display: inline-block;
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: var(--pink-600);
  background: linear-gradient(#fff, #fff);
  border: 1px solid var(--pink-200);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), var(--shadow-soft);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.page-btn:hover{
  background: var(--pink-50);
  border-color: var(--pink-400);
  transform: translateY(-1px);
  text-decoration: none;
}

.page-btn.is-disabled{
  opacity: .55;
  pointer-events: none;
}
/* Breadcrumb */
.breadcrumbs{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin: 8px 0 12px; color: var(--muted);
}
.breadcrumbs a{ color: var(--pink-600); text-decoration:none; font-weight:700; }
.breadcrumbs a:hover{ text-decoration:underline; }

/* Image hero */
.image-hero{ text-align:center; }
.image-frame{
  display:inline-block; background:#fff; border:1px solid var(--border);
  border-radius:16px; padding:10px; box-shadow: var(--shadow);
  margin: 8px auto 12px;
}
.image-frame img{ max-width:100%; height:auto; display:block; border-radius:12px; }

/* Share buttons */
.share-bar{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px;
  margin: 8px 0 14px;
}
.share-btn{
  display:inline-block; padding:9px 14px; border-radius:999px; font-weight:700;
  text-decoration:none; color:#fff; background:linear-gradient(135deg,var(--pink-600),var(--pink-400));
  border:1px solid transparent; box-shadow: var(--shadow-soft), inset 0 -2px 0 rgba(0,0,0,.08);
  transition: transform .15s ease, filter .15s ease;
}
.share-btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.share-btn.is-outline{
  background:linear-gradient(#fff,#fff); color:var(--pink-600); border-color: var(--pink-200);
}
.backline{ margin: 6px 0 0; }

/* Similar block reuses .img-grid / .img-card / .img-name you already added */
.similar-block{ margin-top: 10px; }
/* Center the 3 similar images at the bottom of _image.php */
.similar-block { margin-top: 16px; }
.similar-block .section-title { text-align: center; }          /* optional, centers the heading */

.similar-block .img-grid{
  display: flex;                 /* override the default grid for this section */
  justify-content: center;       /* center the row */
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;               /* wrap on small screens */
}

.similar-block .img-card{
  width: 220px;                  /* consistent card width */
  max-width: 100%;
}

@media (max-width: 520px){
  .similar-block .img-card{ width: 100%; }  /* full-width on very small screens */
}
/* Privacy page polish */
.policy{
  padding: 16px 18px;
}
.policy h2{
  margin: 14px 0 8px;
  color: var(--pink-600);
  font-weight: 800;
}
.policy p{
  margin: 8px 0 10px;
}
.policy a{
  color: var(--pink-600);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed var(--pink-400);
}
.policy a:hover{
  text-decoration: none;
  border-bottom-color: transparent;
}
/* Hide-only visually (for screen readers) */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Pretty dropdown in the sidebar */
.side-select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--pink-200, #ffb3d3);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--pink-100, #ffd7e8), var(--pink-50, #fff1f6)) border-box;
  box-shadow: var(--shadow-soft);
  font-weight: 700;
  color: var(--ink);
  margin: 2px 0 12px;
  appearance: none;
  background-image:
    linear-gradient(135deg, var(--pink-500, #ec4899), var(--pink-400, #f472b6));
  background-clip: text, border-box;
  color: var(--ink);
}
.side-select:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(236,72,153,.25);
}

/* Scrollable list so very long category lists don’t overflow */
.side-list{
  max-height: 380px;            /* adjust as you like */
  overflow: auto;
  padding-right: 4px;           /* room for scrollbar */
}

/* Optional tighter pills for sidebar links */
.side-list a{
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 12px;
}

/* ===== Backgrounds grid (layouts) ===== */
.bg-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin: 10px 0 16px;
}

.bg-card{
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.bg-swatch{
  --bg-url: none;
  position: relative;
  width: 100%;
  height: 160px;
  background-image: var(--bg-url);
  background-repeat: repeat;
  background-size: auto; /* patterns repeat naturally */
  display: block;
}

.bg-overlay{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .25;            /* lets the pattern show through */
  pointer-events: none;
}

.bg-name{
  display: block;
  text-align: center;
  font-weight: 800;
  padding: 10px 12px;
  color: var(--pink-600);
  line-height: 1.15;
}

.bg-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  text-decoration: none;
}

/* Pagination styles are reused from earlier (page-btn, page-num, etc.) */

.bg-hero-swatch{
  position: relative;
  display: inline-block;
  width: min(100%, 980px);
  height: 260px;
  background-repeat: repeat;
  background-size: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--shadow);
  margin: 8px auto 12px;
}
.bg-overlay{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .25;
  pointer-events: none;
}

/* Search bar */
.search-bar{
  display:flex; gap:10px; align-items:center; margin: 6px 0 10px;
}
.search-input{
  flex:1; padding:10px 12px; border-radius:12px;
  border:1px solid var(--pink-200, #ffb3d3);
  box-shadow: var(--shadow-soft);
}

/* Results text */
.results-info{ margin: 6px 0 8px; }

/* Result grid/cards (reuses existing, but safe defaults if missing) */
.img-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap:14px;
}
.img-card{
  display:flex; flex-direction:column; text-decoration:none; background:#fff;
  border:1px solid var(--border,#f3e4eb); border-radius:16px; overflow:hidden;
  box-shadow: var(--shadow-soft);
}
.img-card img{ width:100%; height:160px; object-fit:cover; display:block; }
.img-caption{
  display:block; padding:8px 10px; text-align:center; font-weight:800; color:var(--pink-600,#c2185b);
}
.muted{ opacity:.65; font-weight:700; }

/* Pagination (matches your existing pagination styles if present) */
.page-btn.is-disabled{ opacity:.5; pointer-events:none; }
.page-num{ display:inline-block; padding:6px 10px; border-radius:10px; margin:0 2px; }
.page-num.is-current{ background:linear-gradient(135deg,#ec4899,#f472b6); color:#fff; }
.page-ellipsis{ padding:0 6px; }

/* Nav layout */
.nav-row{
  display:flex;
  align-items:center;
  gap:24px;
}
.nav-links{
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}

/* Top-nav search (compact) */
.nav-search{
  margin-left:auto;                 /* pushes it to the right */
  display:flex;
  align-items:center;
  gap:8px;
}
.nav-search__input{
  width:220px; max-width:38vw;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--pink-200, #ffb3d3);
  background:#fff;
  box-shadow: var(--shadow-soft, 0 6px 18px rgba(236,72,153,.08), 0 1px 4px rgba(0,0,0,.05));
}
.nav-search__input:focus{
  outline:none;
  border-color: var(--pink-400, #f472b6);
  box-shadow: 0 0 0 3px rgba(244,114,182,.25);
}
.nav-search__btn{ padding:8px 12px; white-space:nowrap; }

/* Small screens: stack neatly */
@media (max-width: 760px){
  .nav-row{ flex-wrap:wrap; gap:12px; }
  .nav-search{ width:100%; order:2; margin-left:0; }
  .nav-search__input{ flex:1; width:auto; }
}
/* polish the top-nav search */
.nav-search{
  margin-left: auto;
  gap: 10px;
  padding-right: 16px;      /* <-- space from the right edge */
}

.nav-search__input{
  min-width: 260px;         /* give it a bit more width */
  border-radius: 999px;
  border: 1px solid var(--pink-200, #ffb3d3);
  box-shadow: var(--shadow-soft, 0 6px 18px rgba(236,72,153,.08), 0 1px 4px rgba(0,0,0,.05));
}

/* responsive: full width when stacked */
@media (max-width: 760px){
  .nav-row{ flex-wrap: wrap; }
  .nav-search{ width: 100%; padding-right: 0; }
  .nav-search__input{ flex: 1; min-width: 0; }
}