/* =============================================================================
   NAVIGATION PRODUCT SEARCH  —  2 Sep 2026

   The journal had search from launch; the catalogue never did. This is the
   same shape as the journal control so the two behave alike.

   The panel is anchored to the trigger and constrained to the viewport, never
   sized in vw. A fixed or absolutely positioned overlay wider than the screen
   is exactly what put the white band down the side of the hero on iOS, and
   this is another overlay in the same position to make that mistake in.
   ============================================================================= */

.pps { position: relative; display: flex; align-items: center; }

.pps-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: inherit;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}
.pps-trigger svg { width: 16px; height: 16px; }
.pps-trigger:hover {
  border-color: rgba(232, 193, 106, 0.8);
  color: #E8C16A;
}
/* On a solid nav the control sits on cream, so it needs ink not white. */
.nav.is-solid .pps-trigger { border-color: rgba(26, 24, 20, 0.22); }
.nav.is-solid .pps-trigger:hover { border-color: #B08D4F; color: #8A6D34; }

.pps-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  /* Pinned to the viewport. min() keeps it inside a 360px phone as surely as
     it keeps it tidy on a desktop. */
  width: min(420px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  background: #FBFAF6;
  border: 1px solid rgba(176, 141, 79, 0.34);
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.55);
  z-index: 1200;
  overflow: hidden;
}

.pps-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(26, 24, 20, 0.12);
  background: #FFFFFF;
}
.pps-field svg { width: 15px; height: 15px; color: #9A8B72; flex: 0 0 auto; }
.pps-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #1A1814;
  /* 16px stops iOS Safari zooming the page when this takes focus. */
  font: 400 16px/1.4 var(--sans, Helvetica, Arial, sans-serif);
}
.pps-x {
  flex: 0 0 auto;
  background: none;
  border: 0;
  font-size: 1.2rem;
  line-height: 1;
  color: #9A8B72;
  cursor: pointer;
  padding: 2px 4px;
}
.pps-x:hover { color: #1A1814; }

.pps-rows { max-height: min(56vh, 420px); overflow-y: auto; }

.pps-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: #1A1814;
  border-bottom: 1px solid rgba(26, 24, 20, 0.07);
  transition: background .18s;
}
.pps-row:hover,
.pps-row.is-on { background: rgba(176, 141, 79, 0.12); }

.pps-thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  object-fit: cover;
  background: #F2F0EA;
  border: 1px solid rgba(26, 24, 20, 0.1);
}
.pps-thumb-none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(176, 141, 79, 0.7);
  font-size: 0.7rem;
}

.pps-meta { flex: 1 1 auto; min-width: 0; }
.pps-name {
  display: block;
  font-size: 0.85rem;
  line-height: 1.3;
  /* Two lines then ellipsis, so one long product name cannot stretch the row
     and push the price out of the panel. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pps-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A8275;
}
.pps-price {
  flex: 0 0 auto;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A6D34;
  text-align: right;
  max-width: 92px;
}

.pps-none {
  margin: 0;
  padding: 22px 16px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #6E665A;
  text-align: center;
}

.pps-foot { border-top: 1px solid rgba(26, 24, 20, 0.1); background: #FFFFFF; }
.pps-all {
  display: block;
  padding: 13px 14px;
  text-align: center;
  text-decoration: none;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8A6D34;
  transition: background .2s, color .2s;
}
.pps-all:hover { background: rgba(176, 141, 79, 0.1); color: #1A1814; }

/* ---- phone --------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* The desktop trigger lives in .nav-right beside the burger. Keep it, it is
     the only route to search on a phone once the menu closes. */
  .pps-trigger { width: 36px; height: 36px; margin-right: 4px; }
  .pps-panel {
    /* Anchored to the right edge of the nav rather than the trigger, so it
       cannot hang off the screen on a narrow handset. */
    position: fixed;
    top: 74px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
  .pps-rows { max-height: 60vh; }
}

/* The entry inside the phone menu. */
.pps-mobile {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.pps-mobile svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* -----------------------------------------------------------------------------
   ROOM FOR THE CONTROL IN A ROW THAT WAS ALREADY FULL

   Adding this trigger took 40px out of .nav-right, and at 375px that row had
   nothing spare: logo, wordmark, language flag and burger already filled it.
   Because .nav-brand carries flex-shrink:0, the brand would not give way, so
   .nav-brand-text simply overflowed its own box and the wordmark ran underneath
   the flag. Measured at 375px: the brand box ended at 215 while its text ran to
   249, and the flag began at 215.

   The brand gives way now, and below 430px the wordmark trades tracking rather
   than letters, which recovers the width the control needs while keeping the
   full name readable.
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav-brand { flex-shrink: 1 !important; min-width: 0 !important; }
  .nav-brand-text { min-width: 0 !important; overflow: hidden !important; }
  .nav-brand-name {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 430px) {
  .nav-brand-name {
    font-size: 0.86rem !important;
    letter-spacing: 0.1em !important;
  }
  .pps-trigger { width: 34px; height: 34px; margin-right: 2px; }
}