/* ==========================================================================
   SSP GLOBAL COMPONENTS
   Live search · VAT toggle · dual pricing · mobile bar

   These classes are emitted by the SSP plugin. The plugin's own stylesheet
   is FUNCTIONAL ONLY — display, position, overflow, z-index, show/hide —
   and every selector in it is wrapped in :where(), so it carries zero
   specificity. Everything visual is therefore this file's job, and a plain
   class selector here always wins without !important.

   The one place the plugin uses !important is its show/hide rules, which
   must hold. Where a design needs to reveal one of those elements, this
   file must match that weight. Each instance is commented.

   Tunables the plugin reads (set on :root below):
     --ssp-z-dropdown  --ssp-z-bar  --ssp-live-search-max-height
     --ssp-dialog-max-height  --ssp-focus-outline  --ssp-focus-offset
   ========================================================================== */

:root {
  /* Hand the plugin this theme's layer scale rather than its own defaults. */
  --ssp-z-dropdown: var(--ss-z-overlay);
  --ssp-z-bar: var(--ss-z-sticky);
  --ssp-live-search-max-height: min(70vh, 32rem);
  --ssp-dialog-max-height: min(90vh, 44rem);

  /* WCAG 2.4.13. The blue outline alone measures 2.95:1 against Suresafe
     Black, so the ring is two-tone: this outline plus a white halo, added
     per-component below because a box-shadow cannot travel in a custom
     property that the plugin applies as `outline`. */
  --ssp-focus-outline: 2px solid var(--ssp-focus);
  --ssp-focus-offset: 2px;
}

/* The halo half of the focus ring, for the controls the plugin lists. */
.ssp-swatch:focus-visible,
.ssp-swatch-set__clear:focus-visible,
.ssp-vat-toggle__btn:focus-visible,
.ssp-pill:focus-visible,
.ssp-chip:focus-visible,
.ssp-live-search__input:focus-visible,
.ssp-live-search__submit:focus-visible,
.ssp-live-search__item:focus-visible,
.ssp-size-chart__open:focus-visible,
.ssp-size-chart__close:focus-visible,
.ssp-mobile-bar__item:focus-visible,
.ssp-mobile-bar__close:focus-visible,
.ssp-documents__link:focus-visible,
.ssp-term-list__link:focus-visible,
.ssp-wmo__submit:focus-visible,
.ssp-account-creation__button:focus-visible {
  box-shadow: 0 0 0 4px var(--ssp-surface);
}

/* ==========================================================================
   LIVE SEARCH
   Replaces the theme's own search form in the header when the module is on,
   and appears again inside the mobile drawer. .ssp-live-search is already
   position:relative from the plugin; the results panel is absolute to it.
   ========================================================================== */

.ssp-live-search { width: 100%; }

.ssp-live-search__form {
  display: flex;
  gap: var(--ss-space-3xs);
  align-items: stretch;
}

.ssp-live-search__label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ssp-live-search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  padding: var(--ss-space-3xs) var(--ss-space-xs);
  /* An operable control's boundary must reach 3:1 (WCAG 1.4.11).
     --ssp-line is 1.39:1 and is for decorative rules only. */
  border: 2px solid var(--ssp-line-strong);
  border-radius: var(--ssp-radius);
  background: var(--ssp-surface);
  color: var(--ssp-ink);
  font-family: var(--ssp-font-body);
  font-size: var(--ss-step-0);
  line-height: 1.2;
}

.ssp-live-search__input::placeholder {
  color: var(--ssp-ink-muted);
  opacity: 1;
}

.ssp-live-search__input:focus { border-color: var(--ssp-focus); }

.ssp-live-search__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ss-space-3xs);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--ss-space-xs);
  border: 2px solid var(--ssp-accent);
  border-radius: var(--ssp-radius);
  background: var(--ssp-accent);
  color: var(--ssp-accent-contrast);
  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: var(--ss-step--2);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ss-duration-fast) var(--ss-ease),
              border-color var(--ss-duration-fast) var(--ss-ease);
}

.ssp-live-search__submit:hover {
  background: var(--ss-accent-hover);
  border-color: var(--ss-accent-hover);
}

.ssp-live-search__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  fill: currentColor;
}

/* The button carries an icon at header width and gains its word above it. */
.ssp-live-search__submit-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 60rem) {
  .ssp-live-search__submit-label {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
  }
}

/* ---- Results panel ------------------------------------------------------ */

.ssp-live-search__results {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 2px solid var(--ssp-ink);
  border-top-width: 0;
  background: var(--ssp-surface);
  box-shadow: var(--ss-shadow-2);
}

.ssp-live-search__item {
  gap: var(--ss-space-xs);
  align-items: center;
  width: 100%;
  padding: var(--ss-space-2xs) var(--ss-space-xs);
  border-block-end: 1px solid var(--ssp-line);
  color: var(--ssp-ink);
  text-decoration: none;
  text-align: start;
}

.ssp-live-search__results > :last-child .ssp-live-search__item,
.ssp-live-search__item:last-child { border-block-end: 0; }

.ssp-live-search__item:hover,
.ssp-live-search__item.is-active { background: var(--ssp-surface-alt); }

.ssp-live-search__thumb {
  flex: 0 0 auto;
  width: 3rem;
  object-fit: contain;
  background: var(--ssp-surface-alt);
}

.ssp-live-search__text { gap: 2px; min-width: 0; }

.ssp-live-search__title {
  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: var(--ss-step--1);
  line-height: var(--ss-leading-snug);
}

.ssp-live-search__sku,
.ssp-live-search__category {
  font-size: var(--ss-step--2);
  color: var(--ssp-ink-muted);
  letter-spacing: var(--ss-tracking-label);
  text-transform: uppercase;
}

.ssp-live-search__price {
  flex: 0 0 auto;
  margin-inline-start: auto;
  font-family: var(--ssp-font-display);
  font-size: var(--ss-step-0);
  letter-spacing: var(--ss-tracking-label);
  white-space: nowrap;
}

.ssp-live-search__message {
  padding: var(--ss-space-xs);
  color: var(--ssp-ink-muted);
  font-size: var(--ss-step--1);
  text-align: center;
}

.ssp-live-search__message--loading { color: var(--ssp-ink); }

/* ==========================================================================
   VAT TOGGLE
   A two-button segmented control. aria-pressed carries the state; is-active
   is the plugin's class for the same thing, so both are honoured.
   ========================================================================== */

.ssp-vat-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  border: 2px solid var(--ssp-line-strong);
  border-radius: var(--ssp-radius);
  background: var(--ssp-surface);
  overflow: hidden;
}

.ssp-vat-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding-inline: var(--ss-space-xs);
  border: 0;
  background: transparent;
  color: var(--ssp-ink-muted);
  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: var(--ss-step--3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ss-duration-fast) var(--ss-ease),
              color var(--ss-duration-fast) var(--ss-ease);
}

.ssp-vat-toggle__btn + .ssp-vat-toggle__btn {
  border-inline-start: 2px solid var(--ssp-line-strong);
}

.ssp-vat-toggle__btn:hover { color: var(--ssp-ink); }

.ssp-vat-toggle__btn.is-active,
.ssp-vat-toggle__btn[aria-pressed="true"] {
  background: var(--ssp-ink);
  color: var(--ssp-surface);
}

/* In the shop toolbar it sits to the right of the result count. */
.ssp-vat-toggle--archive { margin-inline-start: auto; }

/* On the product page it sits under the price, smaller. */
.ssp-vat-toggle--product .ssp-vat-toggle__btn {
  min-height: 2.25rem;
  font-size: var(--ss-step--2);
}

/* ---- Dual pricing ------------------------------------------------------- */
/* Both prices are always printed; the plugin hides one from :root state. */

.ssp-price__ex,
.ssp-price__inc { white-space: nowrap; }

/* ==========================================================================
   MOBILE BAR
   Fixed bottom navigation, small screens only. The plugin fixes it and
   hides it above 1025px; this file gives it surface, type and targets.
   ========================================================================== */

.ssp-mobile-bar__nav {
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 2px solid var(--ssp-ink);
  background: var(--ssp-surface);
  box-shadow: 0 -2px 12px rgb(0 0 0 / 12%);
  /* Clear of the iOS home indicator. */
  padding-block-end: env(safe-area-inset-bottom, 0);
}

.ssp-mobile-bar__item {
  gap: 2px;
  justify-content: center;
  min-height: 3.25rem;
  padding: var(--ss-space-3xs) var(--ss-space-3xs);
  border: 0;
  background: transparent;
  color: var(--ssp-ink);
  text-decoration: none;
  cursor: pointer;
}

.ssp-mobile-bar__item + .ssp-mobile-bar__item {
  border-inline-start: 1px solid var(--ssp-line);
}

.ssp-mobile-bar__item:hover,
.ssp-mobile-bar__item.is-active { color: var(--ssp-accent); }

/* The four items the plugin renders. Call is a tel: link and only makes
   sense on a phone; the others are always present. No per-item colour —
   a five-colour bottom bar reads as decoration, not navigation. */
.ssp-mobile-bar__item--call { order: 1; }
.ssp-mobile-bar__item--search { order: 2; }
.ssp-mobile-bar__item--account { order: 3; }
.ssp-mobile-bar__item--basket { order: 4; }

/* Basket is the one that carries a count, so it gets the room for it. */
.ssp-mobile-bar__item--basket .ssp-mobile-bar__icon { margin-inline-end: 0.25rem; }

.ssp-mobile-bar__icon { width: 1.375rem; height: 1.375rem; }
.ssp-mobile-bar__icon svg { width: 100%; height: 100%; fill: currentColor; }

.ssp-mobile-bar__label {
  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: var(--ss-step--3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}

.ssp-mobile-bar__count {
  inset-block-start: -0.375rem;
  inset-inline-end: -0.625rem;
  min-width: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--ssp-accent);
  color: var(--ssp-accent-contrast);
  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1.125rem;
  text-align: center;
}

/* ---- Search drawer ------------------------------------------------------ */

.ssp-mobile-bar__drawer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ssp-surface);
  color: var(--ssp-ink);
}

.ssp-mobile-bar__drawer::backdrop { background: rgb(0 0 0 / 55%); }

.ssp-mobile-bar__drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-space-xs);
  padding: var(--ss-space-xs);
  border-block-end: 2px solid var(--ssp-ink);
}

.ssp-mobile-bar__drawer-title {
  margin: 0;
  font-family: var(--ssp-font-display);
  font-size: var(--ss-step-1);
  letter-spacing: var(--ss-tracking-display);
  text-transform: uppercase;
}

.ssp-mobile-bar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 2px solid var(--ssp-line-strong);
  border-radius: var(--ssp-radius);
  background: var(--ssp-surface);
  color: var(--ssp-ink);
  font-size: var(--ss-step-0);
  cursor: pointer;
}

.ssp-mobile-bar__close:hover {
  border-color: var(--ssp-accent);
  color: var(--ssp-accent);
}

.ssp-mobile-bar__drawer-body { padding: var(--ss-space-xs); }

/* Inside the drawer the results are part of the flow, not a dropdown. */
.ssp-mobile-bar__drawer .ssp-live-search__results {
  margin-block-start: var(--ss-space-xs);
  border-top-width: 2px;
  box-shadow: none;
}

/* The bar overlaps page content, so the page needs room beneath it. */
@media (max-width: 64rem) {
  body:has(.ssp-mobile-bar) { padding-block-end: 4rem; }
}