/* Search: the drawer that opens from the header, and the results page. Scoped with sr-. */

/* ---------- the search drawer (shared header) ---------- */
body #ts-search-sidebar .ts-sidebar-content { background: var(--cg-paper) !important; border-bottom: 3px solid var(--cg-red); box-shadow: 0 24px 50px rgba(0,0,0,.25); padding: clamp(28px, 5vw, 56px) 0 clamp(26px, 4vw, 44px) !important; }
body #ts-search-sidebar .ts-search-normal { max-width: 760px; margin: 0 auto; text-align: left; font-family: var(--cg-font); }
body #ts-search-sidebar .ts-search-normal .title { margin: 0 0 6px; font-family: var(--cg-font-bold); font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-transform: none; text-align: left; color: var(--cg-ink); }
body #ts-search-sidebar .ts-search-normal .title::after { content: "Search brochures, brands, offers and answers."; display: block; margin-top: 8px; font-family: var(--cg-font); font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--cg-muted); }
body #ts-search-sidebar form .search-table { height: 62px !important; margin: 22px 0 0 !important; border: 2px solid var(--cg-ink); border-radius: 999px !important; background: #fff !important; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
body #ts-search-sidebar form .search-table:focus-within { border-color: var(--cg-red); box-shadow: 0 0 0 4px rgba(193,39,45,.15); }
body #ts-search-sidebar form .search-table input[type="text"] { height: 58px !important; line-height: 58px !important; padding: 0 70px 0 26px !important; background: transparent !important; font-size: 17px !important; color: var(--cg-ink) !important; }
body #ts-search-sidebar .search-table .search-button { right: 6px; top: 6px; width: 46px; height: 46px; border-radius: 50%; background: var(--cg-red) !important; }
body #ts-search-sidebar .search-table .search-button::before { width: 46px; height: 46px; background-size: 20px 20px; filter: brightness(0) invert(1); }
body #ts-search-sidebar .search-table .search-button input[type="submit"] { width: 46px !important; height: 46px !important; }
body #ts-search-sidebar .popular-searches { margin-top: 20px; text-align: left; }
body #ts-search-sidebar .popular-searches h6 { display: inline-block; margin: 0 8px 0 0; font-family: var(--cg-font-bold); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cg-red); }
body #ts-search-sidebar .popular-searches > div { display: inline-flex; flex-wrap: wrap; gap: 8px; vertical-align: middle; }
body #ts-search-sidebar .popular-searches a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 1.5px solid var(--cg-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--cg-ink) !important; text-decoration: none !important; transition: border-color .15s, color .15s; }
body #ts-search-sidebar .popular-searches a:hover { border-color: var(--cg-red); color: var(--cg-red) !important; }
body #ts-search-sidebar .close { background: var(--cg-ink) !important; border-radius: 50%; top: 14px !important; right: 16px !important; width: 42px !important; height: 42px !important; }
body #ts-search-sidebar .close:hover { background: var(--cg-red) !important; }
body #ts-search-sidebar .ts-sidebar-content > .container { max-width: none; padding: 0 20px; }
@media (min-width: 1200px) { body #ts-search-sidebar .ts-sidebar-content > .container { padding-left: var(--cg-pad, 50px); padding-right: var(--cg-pad, 50px); } body #ts-search-sidebar .ts-search-normal { margin: 0; } }

/* ---------- results page ---------- */
.sr-hero, .sr-body { font-family: var(--cg-font); color: var(--cg-ink); }
.sr-hero { background: var(--cg-paper); padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 52px); }
.sr-hero .cg-wrap { padding-top: 0; padding-bottom: 0; }
.sr-eyebrow { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cg-red); }
.sr-title { margin: 0 0 24px; font-family: var(--cg-font-bold); font-size: clamp(30px, 4.4vw, 54px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: var(--cg-ink); text-transform: none; overflow-wrap: anywhere; }
.sr-form { position: relative; display: flex; align-items: center; gap: 10px; max-width: 760px; padding: 6px 6px 6px 22px; border: 2px solid var(--cg-ink); border-radius: 999px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.sr-form:focus-within { border-color: var(--cg-red); box-shadow: 0 0 0 4px rgba(193,39,45,.15); }
.sr-form > svg { flex: none; color: var(--cg-muted); }
.sr-form input[type="search"] { flex: 1; min-width: 0; height: 48px; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; font: inherit; font-size: 17px; color: var(--cg-ink); -webkit-appearance: none; appearance: none; }
.sr-form .cg-btn { flex: none; min-height: 48px; }
.sr-form .cg-btn--red { color: #fff !important; }
.sr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.sr-chips span { margin-right: 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cg-red); }
.sr-chips a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 1.5px solid var(--cg-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--cg-ink) !important; text-decoration: none !important; transition: border-color .15s, color .15s; }
.sr-chips a:hover { border-color: var(--cg-red); color: var(--cg-red) !important; }

.sr-body { background: #fff; padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 7vw, 80px); }
.sr-body .cg-wrap { padding-top: 0; padding-bottom: 0; }
.sr-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.sr-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1.5px solid var(--cg-line); border-radius: 999px; background: #fff; font: inherit; font-family: var(--cg-font-bold); font-size: 15px; font-weight: 700; color: var(--cg-ink); cursor: pointer; transition: border-color .15s; }
.sr-tab small { padding: 2px 8px; border-radius: 999px; background: var(--cg-paper); font-size: 12px; }
.sr-tab:hover { border-color: var(--cg-ink); }
.sr-tab.is-active { background: var(--cg-ink); border-color: var(--cg-ink); color: #fff; }
.sr-tab.is-active small { background: rgba(255,255,255,.18); color: #fff; }
.sr-group { margin-bottom: 56px; }
.sr-group[hidden] { display: none; }
.sr-h { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1.5px solid var(--cg-line); font-family: var(--cg-font-bold); font-size: 26px; font-weight: 700; text-transform: none; color: var(--cg-ink); }
.sr-h small { padding: 2px 10px; border-radius: 999px; background: var(--cg-paper); font-size: 13px; font-weight: 700; color: var(--cg-muted); }
.sr mark, .sr-body mark { padding: 0 2px; border-radius: 3px; background: #fbe3e6; color: inherit; }
.sr-list { display: grid; gap: 10px; }
.sr-row { position: relative; display: grid; gap: 4px; padding: 20px 56px 20px 24px; border: 1px solid var(--cg-line); border-radius: var(--cg-radius); background: #fff; text-decoration: none !important; color: var(--cg-ink) !important; transition: border-color .2s, box-shadow .2s, transform .2s; }
.sr-row:hover { border-color: var(--cg-red); box-shadow: 0 10px 24px rgba(0,0,0,.07); transform: translateY(-2px); }
.sr-row__t { font-family: var(--cg-font-bold); font-size: 18px; font-weight: 700; }
.sr-row__d { font-size: 15px; line-height: 1.6; color: #4a4a4a; }
.sr-row i { position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid var(--cg-red); border-top: 2px solid var(--cg-red); transform: rotate(45deg); transition: transform .2s; }
.sr-row:hover i { transform: translateX(4px) rotate(45deg); }
.sr-ideas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
.sr-idea { display: flex; flex-direction: column; gap: 12px; text-decoration: none !important; color: var(--cg-ink) !important; }
.sr-idea__pic { display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--cg-radius); background: var(--cg-paper); }
.sr-idea__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sr-idea:hover .sr-idea__pic img { transform: scale(1.05); }
.sr-idea__t { font-family: var(--cg-font-bold); font-size: 16px; font-weight: 700; line-height: 1.35; }
.sr-idea:hover .sr-idea__t { color: var(--cg-red); }
.sr-empty { max-width: 640px; padding: 8px 0; }
.sr-empty h2 { margin: 0 0 10px; font-family: var(--cg-font-bold); font-size: 30px; font-weight: 700; text-transform: none; color: var(--cg-ink); }
.sr-empty p { margin: 0 0 24px; font-size: 17px; line-height: 1.65; color: #4a4a4a; }
.sr-empty p a { color: var(--cg-red); font-weight: 700; }
.sr-empty .cg-btn--red { color: #fff !important; }
.sr-empty .cg-btn--line, .sr-chips + * .cg-btn--line { color: var(--cg-ink) !important; border-color: var(--cg-ink); }
.sr-brands { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.sr-brands a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 104px; padding: 14px 10px 12px; border: 1px solid var(--cg-line); border-radius: var(--cg-radius); background: #fff; text-decoration: none !important; color: var(--cg-ink) !important; transition: border-color .2s, box-shadow .2s, transform .2s; }
.sr-brands a:hover { border-color: var(--cg-red); box-shadow: 0 10px 24px rgba(0,0,0,.07); transform: translateY(-2px); }
.sr-brands img { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; }
.sr-brands span { font-family: var(--cg-font-bold); font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.sr-brands small { font-size: 12px; font-weight: 600; color: var(--cg-muted); }

@media (max-width: 1120px) { .sr-brands { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sr-ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .sr-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sr-form { padding-left: 16px; } .sr-form .cg-btn { padding: 0 18px; }
  .sr-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sr-brands a { height: 92px; }
  .sr-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .sr-tabs { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-bottom: 6px; scrollbar-width: none; } .sr-tabs::-webkit-scrollbar { display: none; } .sr-tab { flex: none; }
  .sr-row { padding: 18px 44px 18px 18px; } .sr-row i { right: 18px; }
  .sr-empty .cg-btns { flex-direction: column; align-items: stretch; }
}
@media (min-width: 1200px) { :is(.sr-hero, .sr-body) .cg-wrap { max-width: none; margin: 0; padding-left: var(--cg-pad, 50px); padding-right: var(--cg-pad, 50px); } }
body #ts-search-sidebar .popular-searches a { border: 1.5px solid var(--cg-line) !important; background-image: none !important; box-shadow: none !important; text-decoration: none !important; }
body #ts-search-sidebar .popular-searches a:hover { border-color: var(--cg-red) !important; }
body #ts-search-sidebar .popular-searches h6 { display: block; margin: 0 0 10px; }
body #ts-search-sidebar .popular-searches > div { display: flex; }
.sr-h small { display: inline-block; line-height: 1.6; font-size: 13px; }
.sr-chips span { line-height: 1; }
body #ts-search-sidebar .popular-searches a::before, body #ts-search-sidebar .popular-searches a::after { content: none !important; display: none !important; }
body #ts-search-sidebar .popular-searches { display: block !important; } body #ts-search-sidebar .popular-searches h6 { float: none !important; width: auto !important; display: block !important; margin: 0 0 10px !important; text-align: left; }

/* ---------- live suggestions in the search panel ---------- */
body #ts-search-sidebar .ts-search-result-container { display: block !important; position: static !important; max-height: none !important; margin: 0; padding: 0; border: 0 !important; box-shadow: none !important; background: none !important; text-align: left; font-family: var(--cg-font); }
body #ts-search-sidebar .ts-search-result-container.is-on { margin-top: 18px; }
body #ts-search-sidebar .ts-search-result-container.is-waiting::before,
body #ts-search-sidebar .ts-search-result-container.is-loading::before { content: "Looking for matches…"; display: block; margin-top: 16px; font-size: 14px; color: var(--cg-muted); }
body #ts-search-sidebar .ts-search-result-container.is-on.is-loading::before { display: none; }
body #ts-search-sidebar .ts-search-result-container.is-loading .ss-list { opacity: .5; }
body #ts-search-sidebar .ss-words { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
body #ts-search-sidebar .ss-words span { margin-right: 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cg-red); }
body #ts-search-sidebar .ss-words a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1.5px solid var(--cg-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--cg-ink) !important; text-decoration: none !important; }
body #ts-search-sidebar .ss-words a:hover { border-color: var(--cg-red); color: var(--cg-red) !important; }
body #ts-search-sidebar .ss-list { display: grid; gap: 6px; max-height: min(52vh, 460px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: var(--cg-radius); box-shadow: 0 14px 34px -18px rgba(0,0,0,.3); }
body #ts-search-sidebar .ss-list li { margin: 0; padding: 0; list-style: none; }
body #ts-search-sidebar .ss-list li::before { content: none; }
body #ts-search-sidebar .ss-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; color: var(--cg-ink) !important; text-decoration: none !important; transition: background .15s; }
body #ts-search-sidebar .ss-item:hover, body #ts-search-sidebar .ss-item:focus-visible { background: var(--cg-paper); outline: none; }
body #ts-search-sidebar .ss-pic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 8px; background: var(--cg-paper); }
body #ts-search-sidebar .ss-item--brochure .ss-pic { height: 58px; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
body #ts-search-sidebar .ss-pic img { width: 100%; height: 100%; object-fit: cover; }
body #ts-search-sidebar .ss-ico { width: 18px; height: 18px; border: 2px solid var(--cg-red); border-radius: 3px; }
body #ts-search-sidebar .ss-ico--faq { border-radius: 50%; }
body #ts-search-sidebar .ss-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
body #ts-search-sidebar .ss-txt small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cg-red); }
body #ts-search-sidebar .ss-txt strong { font-family: var(--cg-font-bold); font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body #ts-search-sidebar .ss-txt em { font-style: normal; font-size: 13px; color: var(--cg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body #ts-search-sidebar .ss-all { display: inline-flex; align-items: center; min-height: 46px; margin-top: 14px; padding: 0 22px; border-radius: 999px; background: var(--cg-red); font-family: var(--cg-font-bold); font-size: 15px; font-weight: 700; color: #fff !important; text-decoration: none !important; }
body #ts-search-sidebar .ss-all:hover { background: var(--cg-red-dark); }
body #ts-search-sidebar .ss-none { margin: 0; font-size: 15px; line-height: 1.6; color: #4a4a4a; }
body #ts-search-sidebar .ss-none a { color: var(--cg-red) !important; font-weight: 700; }
body #ts-search-sidebar .popular-searches[hidden] { display: none !important; }
/* the theme paints every button red on hover; keep the result tabs calm */
.sr-body .sr-tab, .sr-body .sr-tab:hover, .sr-body .sr-tab:focus { background: #fff !important; color: var(--cg-ink) !important; border-color: var(--cg-line) !important; box-shadow: none !important; }
.sr-body .sr-tab:hover { border-color: var(--cg-ink) !important; }
.sr-body .sr-tab.is-active, .sr-body .sr-tab.is-active:hover, .sr-body .sr-tab.is-active:focus { background: var(--cg-ink) !important; border-color: var(--cg-ink) !important; color: #fff !important; }
.sr-body .sr-tab small { color: var(--cg-ink) !important; }
.sr-body .sr-tab.is-active small { background: rgba(255,255,255,.18) !important; color: #fff !important; }

/* search panel: everything centred */
body #ts-search-sidebar .ts-search-normal { text-align: center; }
body #ts-search-sidebar .ts-search-normal .title,
body #ts-search-sidebar .ts-search-normal .title::after { text-align: center; }
body #ts-search-sidebar .popular-searches { text-align: center; }
body #ts-search-sidebar .popular-searches > div { justify-content: center; }
body #ts-search-sidebar .ts-search-result-container { text-align: center; }
body #ts-search-sidebar .ss-words, body #ts-search-sidebar .ss-words { justify-content: center; }
body #ts-search-sidebar .ss-list { text-align: left; }
body #ts-search-sidebar .ts-sidebar-content > .container { padding-left: 20px !important; padding-right: 20px !important; }
body #ts-search-sidebar .ts-search-normal { margin: 0 auto !important; }
body #ts-search-sidebar .popular-searches h6 { display: block !important; margin: 0 0 10px !important; text-align: center; }
body #ts-search-sidebar .popular-searches > div { display: flex !important; }

/* ---- clear (x) button in the search boxes ---- */
.cg-clear { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--cg-paper); color: var(--cg-ink); cursor: pointer; transition: background .15s, color .15s; }
.cg-clear[hidden] { display: none !important; }
.cg-clear:hover, .cg-clear:focus-visible { background: var(--cg-ink); color: #fff; outline: none; }
/* header panel: sits inside the white pill, left of the red search button */
body #ts-search-sidebar .search-field.has-clear { position: relative; }
body #ts-search-sidebar .search-field .cg-clear { position: absolute; right: 62px; top: 50%; transform: translateY(-50%); z-index: 3; }
body #ts-search-sidebar .search-field.has-clear input[type="text"] { padding-right: 100px !important; }
/* results page */
.sr-form.has-clear .cg-clear { margin-right: 4px; }
/* clear button inside the pill, left of the red search button */
body #ts-search-sidebar .search-table { position: relative; }
body #ts-search-sidebar .search-table > .cg-clear { position: absolute; right: 62px; top: 50%; transform: translateY(-50%); z-index: 3; }
body #ts-search-sidebar .search-field.has-clear input[type="text"] { padding-right: 0 !important; }
body #ts-search-sidebar .search-table.has-clear .search-field input[type="text"] { padding-right: 96px !important; }
/* results page box: the theme gave the input a bottom margin, which pushed the text above the middle */
.sr-form input[type="search"] { margin: 0 !important; align-self: center; line-height: 48px !important; }
.sr-form > svg { align-self: center; }