/* ==========================================================================
   Layout: banner, header, footer, page wrappers
   ========================================================================== */

.wrap { width: min(100% - 3rem, var(--wrap)); margin-inline: auto; }
.page-narrow { max-width: 46rem; }
.site-main { min-height: 60vh; padding-block: var(--s6) var(--s8); }

/* Hairline-flanked caption: the brand's "EMBROIDERY & WORKWEAR" device */
.caption { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 var(--s4); }
.caption__rule { width: 34px; height: 1px; background: var(--gold); flex: none; }
.caption__label {
  font-size: var(--step--1); font-weight: 300;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-deep);
}
.caption--left { justify-content: flex-start; }
.caption--left .caption__rule:first-child { display: none; }

/* Top banner --------------------------------------------------------------- */
.banner {
  margin: 0; max-width: none;
  background: var(--ink); color: var(--cream);
  text-align: center; padding: 9px var(--s4);
  font-size: 0.75rem; letter-spacing: 0.08em;
}
.banner strong { color: var(--gold-bright); font-weight: 500; }
.banner a { color: var(--cream); text-decoration-color: var(--gold-bright); }

/* Header ------------------------------------------------------------------ */
.site-header { background: var(--cream); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s6);
  padding-block: var(--s3);
}

.brand { display: block; text-decoration: none; color: var(--ink); line-height: 1; }
.brand__logo { height: 64px; width: auto; }
.brand__text { display: grid; justify-items: center; gap: 4px; }
.brand__name { font-family: var(--serif); font-size: 1.6rem; letter-spacing: 0.04em; }
.brand__sub { white-space: nowrap; font-size: 0.625rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep); }

.site-nav { display: flex; align-items: center; gap: var(--s5); }
.site-nav__link, .site-nav__basket {
  color: var(--ink); text-decoration: none; white-space: nowrap;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.site-nav__link:hover, .site-nav__basket:hover { color: var(--gold-deep); }
.site-nav__basket { display: inline-flex; align-items: center; gap: var(--s2); }

.basket-count {
  min-width: 1.5rem; height: 1.5rem; padding-inline: 0.35rem;
  display: inline-grid; place-items: center;
  background: var(--ink); color: var(--cream);
  border-radius: 999px; font-size: 0.7rem; letter-spacing: 0; font-weight: 500;
}
.basket-count.is-bumped { animation: bump 0.4s ease-out; background: var(--gold); }
@keyframes bump { 40% { transform: scale(1.25); } }

/* Search (lives in the header) --------------------------------------------- */
.search { position: relative; display: flex; max-width: 26rem; width: 100%; justify-self: center; }
.search__input {
  flex: 1; min-width: 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--panel); color: var(--ink); font-size: var(--step--1);
}
.search__input::placeholder { color: var(--ink-soft); }
.search__input:focus { outline: none; border-color: var(--gold); }
.search__btn {
  border: 1px solid var(--ink); padding-inline: var(--s4);
  background: var(--ink); color: var(--cream);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.search__btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.search__suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  list-style: none; margin: 0; padding: var(--s1) 0;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(43, 42, 38, 0.12);
}
.search__option a { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); text-decoration: none; }
.search__option img { width: 40px; height: 45px; object-fit: contain; background: var(--white); border-radius: var(--radius); }
.search__option[aria-selected="true"] a, .search__option a:hover { background: var(--cream); color: var(--ink); }
.search__option-name { font-family: var(--serif); font-size: 1rem; }
.search__option-code { color: var(--ink-soft); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; }
.search__empty { padding: var(--s2) var(--s3); color: var(--ink-soft); font-size: var(--step--1); }

/* Footer ------------------------------------------------------------------ */
.site-footer {
  text-align: center; padding-block: var(--s7) var(--s6);
  border-top: 1px solid var(--line);
}
.site-footer__divider { width: 26px; height: 1px; background: var(--line-strong); margin: var(--s5) auto var(--s4); }
.site-footer__links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-bottom: var(--s5); }
.site-footer__links a, .site-footer__small {
  font-size: 0.6875rem; font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
}
.site-footer__links a:hover { color: var(--gold-deep); }
.site-footer__tag { font-family: var(--serif); font-size: 1.05rem; margin: 0 auto var(--s4); }
.site-footer__small { margin: 0 auto; max-width: none; }
.site-footer .patches { margin-top: 0; }

/* Page-level headings ----------------------------------------------------- */
.page-title { font-size: var(--step-3); }
.page-intro { color: var(--ink-soft); margin-top: calc(var(--s3) * -1); }
.section-title { font-size: var(--step-2); }
.section-title--small { font-size: var(--step-1); }

.crumbs { font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s4); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); }

@media (max-width: 800px) {
  .site-header__inner { grid-template-columns: 1fr auto; row-gap: var(--s3); gap: var(--s4); }
  .search { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .site-nav { gap: var(--s4); }
  .brand__logo { height: 48px; }
  .banner { font-size: 0.7rem; }
}
@media (max-width: 480px) {
  .caption__label { letter-spacing: 0.2em; font-size: 0.72rem; white-space: nowrap; }
  .caption__rule { width: 22px; }
}