/**
 * Norsan Meilisearch - front-end styles.
 *
 * Every value below is taken from the theme, measured on the live clone (computed styles on
 * .grid_elem / .prod_title / .price / .add_to_cart_udi), not invented:
 *   radius 10px | border #eef2f4 | title Dosis 600 #004272 | price #d95f23 600
 *   button #025188 on #fff, 1px #025188 border, radius 10px | body copy #094579 300, 17px/25px
 *   base font Roboto 14px #666 | breakpoints 989px / 768px / 500px
 *
 * The theme puts no shadow on cards, so neither do we - the single shadow here is on the
 * floating panel, which has to separate from the page behind it. It is tinted with the brand
 * navy rather than neutral black so it reads as part of the same design.
 *
 * Positioning: the panel is an absolute child of `.search_wrapper > div` (position:relative),
 * so nothing in the theme's own CSS is touched (plan, korekta #11). <header> is position:fixed
 * with z-index 99 and creates its own stacking context, so a low local z-index suffices.
 */

/* Tokens live on the shared .nms class, NOT on #norsan-search-results: the results page uses a
   second root (#norsan-search-page) and custom properties are resolved from the element they are
   declared on downwards. Declaring them on the panel id left every var() on the results page
   unresolved - buttons lost their border and fell back to the browser's default link blue.
   Caught in the browser. */
.nms {
  --nms-navy: #094579;
  --nms-navy-dark: #004272;
  --nms-blue: #025188;
  --nms-blue-soft: #6099c0;
  --nms-orange: #d95f23;
  --nms-line: #eef2f4;
  --nms-muted: #666;
  --nms-bg-soft: #f9f9f9;
  --nms-radius: 10px;
}

#norsan-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;

  box-sizing: border-box;
  margin-top: 8px;
  padding: 22px 26px 26px;

  background: #fff;
  border: 1px solid var(--nms-line);
  border-radius: var(--nms-radius);
  box-shadow: 0 14px 40px -12px rgba(9, 69, 121, 0.28);

  font-family: "Roboto", sans-serif;
  text-align: left;

  max-height: calc(100vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nms[hidden] {
  display: none;
}

.nms *,
.nms *::before,
.nms *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ layout -------------- */

.nms-columns {
  display: grid;
  /* Products get the wider column: the catalogue is the point of the shop, and product rows
     carry a price and a button while resource rows are text only. */
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 30px; /* same grid-gap the theme's product grid uses */
}

.nms-columns--single {
  grid-template-columns: minmax(0, 1fr);
}

.nms-section {
  min-width: 0;
}

.nms-section--resources {
  padding-left: 30px;
  border-left: 1px solid var(--nms-line);
}

.nms-columns--single .nms-section--resources {
  padding-left: 0;
  border-left: 0;
}

.nms-section__title {
  margin: 0 0 12px;
  font-family: "Dosis", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nms-blue-soft);
}

.nms-section__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ------------------------------------------------------------------ search bar ---------- */

/* The theme's overlay is a full-bleed white block: `.search_wrapper` fills the whole 123px
   header and the input is stretched to 1170x123 with no border and a white background on white.
   The result reads as a large empty white area with no visible field - reported by Kacper.
   Fixed entirely from the plugin's own stylesheet; the theme's files stay untouched, and with
   the plugin off the overlay returns to its original appearance.

   Scoped to html.nms-js so the styling only ever applies when our JS is actually running. */
html.nms-js .search_wrapper {
  /* Less dead white: the bar no longer has to be as tall as the whole header. The dropdown is
     positioned from `.search_wrapper > div`, so it follows this height automatically. */
  height: 84px;
  border-bottom: 1px solid var(--nms-line, #eef2f4);
}

html.nms-js .search_wrapper > div {
  height: 84px;
  align-items: center;
}

/* An actual, visibly delimited field: brand-tinted background, the same 10px radius and
   #eef2f4 border used by the theme's product cards, and a magnifier so the purpose is obvious
   without reading the placeholder. The icon is an inline SVG in the brand blue (#025188) -
   no extra HTTP request and no dependency on a theme image path. */
html.nms-js .search_wrapper input.search_input {
  box-sizing: border-box;
  width: 100%;
  /* Not max-width + centring: that left the field (170-1270) and the dropdown (135-1305)
     misaligned by ~35px on each side, which reads as two unrelated boxes. A right margin
     instead keeps the field flush with the container's left edge, and the dropdown is inset
     by the same amount below - so the two line up exactly. */
  margin-right: 40px;
  height: 48px;
  padding: 0 18px 0 48px;

  font-family: "Roboto", sans-serif;
  font-size: 17px;
  color: #094579;

  background-color: #f9f9f9;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23025188' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 17px center;

  border: 1px solid var(--nms-line, #eef2f4);
  border-radius: 10px;
  outline: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

html.nms-js .search_wrapper input.search_input:focus {
  background-color: #fff;
  border-color: #6099c0;
  box-shadow: 0 0 0 3px rgba(96, 153, 192, 0.18);
}

html.nms-js .search_wrapper input.search_input::placeholder {
  color: #8ea6b8;
  opacity: 1;
}

/* Directly under the field and inset to exactly the field's width, so the bar and the results
   read as one component rather than two stacked boxes. */
html.nms-js #norsan-search-results {
  margin-top: 0;
  right: 40px;
}

/* Between the mobile breakpoint and the container's own max-width the theme's inner container
   spans the full viewport with no padding, so the field and the dropdown sat flush against the
   screen edge. Above 1170px the container centres itself and provides that gap on its own. */
@media screen and (min-width: 769px) and (max-width: 1199px) {
  html.nms-js .search_wrapper input.search_input {
    margin-left: 15px;
  }

  html.nms-js #norsan-search-results {
    left: 15px;
  }
}

@media screen and (max-width: 768px) {
  html.nms-js .search_wrapper,
  html.nms-js .search_wrapper > div {
    height: 72px;
  }

  /* The theme's inner container runs edge to edge on phones, so the field and the dropdown
     need their own side spacing - without it both touch the screen edge. Applied as margins on
     the field and matching offsets on the dropdown, rather than padding on the theme's
     container, so the absolutely-positioned dropdown keeps lining up with the field. */
  html.nms-js #norsan-search-results {
    left: 12px;
    right: 40px;
  }

  html.nms-js .search_wrapper input.search_input {
    height: 42px;
    margin-left: 12px;
    /* Room for the theme's 16px close button plus breathing space. */
    margin-right: 40px;
    width: auto;
    flex: 1 1 auto;
    font-size: 16px;
    padding: 0 14px 0 42px;
    background-position: 14px center;
  }
}

/* ------------------------------------------------------------------ results page -------- */

/* The theme's server-rendered list is hidden only when JS is available (the .nms-js class is
   printed at wp_head priority 1, before this stylesheet is parsed, so there is no flash of the
   old page). Without JS - and for a crawler - the class never appears, the theme's list stays
   visible, and the page behaves exactly as it does today. On any engine failure the JS removes
   the class again and the list comes back, which is why this page needs no error state. */
html.nms-js body.norsan-meili-results .search_results_show {
  display: none;
}

/* On the page the panel is not a floating dropdown: no absolute positioning, no shadow, no
   scroll container - it is page content, sitting under the theme's own "Terme de recherche"
   heading and inheriting the width of .search_results_container. */
#norsan-search-page {
  position: static;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  overflow: visible;
}

#norsan-search-page .nms-columns {
  gap: 40px;
}

#norsan-search-page .nms-section__title {
  font-size: 17px;
  margin-bottom: 16px;
}

/* Full-page rows can breathe more than dropdown rows. */
#norsan-search-page .nms-card {
  padding: 12px 10px;
}

#norsan-search-page .nms-card__title {
  font-size: 21px;
}

#norsan-search-page .nms-card__thumb {
  flex-basis: 76px;
  width: 76px;
  height: 68px;
}

#norsan-search-page .nms-state {
  padding: 40px 4px;
  font-size: 17px;
}

@media screen and (max-width: 989px) {
  #norsan-search-page .nms-columns {
    gap: 24px;
  }
}

/* The page keeps a larger 76px thumbnail than the dropdown, but the mobile wrap rule below
   assumes the panel's 52px + 10px gap. At 76px + 14px the body no longer fitted beside it, so
   the thumbnail wrapped onto a line of its own and the card grew from ~110px to 194px.
   Matching the panel's size on mobile keeps one consistent card everywhere. */
@media screen and (max-width: 500px) {
  #norsan-search-page .nms-card {
    gap: 10px;
    padding: 8px;
  }

  #norsan-search-page .nms-card__thumb {
    flex-basis: 52px;
    width: 52px;
    height: 47px;
  }

  #norsan-search-page .nms-card__title {
    font-size: 17px;
  }
}

/* ------------------------------------------------------------------ history ------------- */

/* The recent-searches block spans the full panel width above the two result columns: it is a
   single compact row, and boxing it into one column would leave an odd gap beside it. */
.nms-section--recent {
  grid-column: 1 / -1;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--nms-line);
}

.nms-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.nms-section__head .nms-section__title {
  margin-bottom: 0;
}

.nms-clear {
  padding: 2px 4px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--nms-muted);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

.nms-clear:hover,
.nms-clear:focus-visible {
  color: var(--nms-blue);
}

.nms-clear:focus-visible {
  outline: 2px solid var(--nms-blue);
  outline-offset: 2px;
}

.nms-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Chips carry the same radius family and brand blues as the rest of the panel, just softer -
   they are recall aids, not the results themselves, and must not out-shout a product row. */
.nms-chip {
  display: inline-block;
  max-width: 100%;
  padding: 6px 12px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--nms-navy);
  background: var(--nms-bg-soft);
  border: 1px solid var(--nms-line);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nms-chip:hover {
  background: #fff;
  border-color: var(--nms-blue-soft);
}

/* Same virtual-cursor treatment as a result row, so arrowing from a chip into the bestseller
   list below looks like one continuous list - which, for the keyboard, it is. */
.nms-chip.nms-card--active {
  background: rgba(96, 153, 192, 0.16);
  border-color: var(--nms-blue);
  box-shadow: none;
}

/* ------------------------------------------------------------------ cards --------------- */

.nms-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--nms-radius);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nms-card:hover,
.nms-card:focus-visible {
  background: var(--nms-bg-soft);
  border-color: var(--nms-line);
  text-decoration: none;
}

.nms-card:focus-visible {
  outline: 2px solid var(--nms-blue);
  outline-offset: 1px;
}

/* Virtual cursor for arrow-key navigation. DOM focus never leaves the input (combobox pattern),
   so :focus cannot express this - the highlight has to be its own class. It needs to be clearly
   stronger than plain :hover, because with the keyboard it is the only thing telling the user
   what Enter will open. */
.nms-card--active {
  background: rgba(96, 153, 192, 0.12);
  border-color: var(--nms-blue-soft);
  box-shadow: inset 3px 0 0 var(--nms-blue);
}

.nms-card--active .nms-btn--cart {
  background: var(--nms-blue);
  color: #fff;
}

/* Screen-reader-only live region announcing the result count. Not display:none - that would
   remove it from the accessibility tree and it would never be read. */
.nms-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The theme's own trigger and close control become keyboard-operable in 6.4; without a visible
   focus ring that is only half the fix. */
.search:focus-visible,
#close_search_wrapper:focus-visible {
  outline: 2px solid #025188;
  outline-offset: 3px;
}

.nms-card__thumb {
  flex: 0 0 62px;
  width: 62px;
  height: 56px; /* 100/90 aspect ratio, matching the theme's product image */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nms-bg-soft);
  border-radius: 8px;
  overflow: hidden;
}

/* The theme styles EVERY descendant image of `.search_wrapper > div` as the close button:
   `position:absolute; top:50%; right:0; width:16px; height:16px; transform:translate(0,-50%)`
   (mobile.scss:580). It is a descendant selector, not a child one, so it captured these
   thumbnails and rendered them 16x16 in a 62x56 box. Caught in the browser - they looked like
   empty grey placeholders. Overridden here by ID specificity rather than by editing the
   theme's stylesheet, which this project touches in exactly one file and this is not it. */
.nms .nms-card__thumb img {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  cursor: inherit;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.nms-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nms-card__title {
  font-family: "Dosis", sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--nms-navy-dark);
  /* One line like the theme's .prod_title (-webkit-line-clamp: 1), so rows stay uniform. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* Meilisearch match highlight. A first version underlined the match as well, but in a Dosis
   600 title it read as a half-underlined hyperlink and broke the line visually - checked in a
   screenshot. Tint only, at an opacity strong enough to be unambiguous. Forced-colors mode is
   handled separately below, where a background tint alone would be dropped by the UA. */
.nms-card__title mark {
  background: rgba(96, 153, 192, 0.3);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -1px;
  text-decoration: none;
}

@media (forced-colors: active) {
  .nms-card__title mark {
    background: Mark;
    color: MarkText;
    forced-color-adjust: none;
  }
}

.nms-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--nms-muted);
}

.nms-card__date {
  white-space: nowrap;
}

.nms-card__desc {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  color: var(--nms-navy);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.nms-card__side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

.nms-card__price {
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  color: var(--nms-orange); /* #d95f23 - the theme's price colour */
  white-space: nowrap;
}

.nms-card--resource {
  align-items: flex-start;
}

/* ------------------------------------------------------------------ buttons/badges ------ */

/* Same palette and radius as the theme's .add_to_cart_udi, scaled down for a dropdown row
   (the theme's 17px/21px padding at 18px type would dominate a 76px-tall row). */
.nms-btn {
  display: inline-block;
  padding: 8px 14px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--nms-blue);
  background: #fff;
  border: 1px solid var(--nms-blue);
  border-radius: var(--nms-radius);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nms-card:hover .nms-btn--cart {
  background: var(--nms-blue);
  color: #fff;
}

/* In-flight state. The theme's global loader already covers the "something is happening"
   signal, so this only needs to make the button visibly inert - it exists mainly so a user
   who clicks twice can see why the second click did nothing. */
.nms-btn--busy {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* Variable products (only Omega-3 Total) reuse the theme's own trick: the label is inert and
   the click falls through to the card link, which leads to the product page where the variant
   is chosen. Option A - picking the variant inside the panel - was rejected by the client. */
.nms-btn--option {
  pointer-events: none;
  color: var(--nms-blue-soft);
  border-color: var(--nms-blue-soft);
}

.nms-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  white-space: nowrap;
}

.nms-badge--type {
  color: var(--nms-blue);
  background: rgba(96, 153, 192, 0.14);
}

.nms-badge--oos {
  color: #8a5a00;
  background: rgba(217, 95, 35, 0.12);
}

/* ------------------------------------------------------------------ states/footer ------- */

.nms-state {
  padding: 18px 4px;
  font-size: 15px;
  font-weight: 300;
  color: var(--nms-navy);
  text-align: center;
}

.nms-state--error {
  color: var(--nms-orange);
}

.nms-seeall {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--nms-blue);
  text-decoration: underline; /* the theme underlines its in-card "plus d'informations" link */
}

.nms-seeall:hover {
  color: var(--nms-navy-dark);
}

/* ------------------------------------------------------------------ responsive ---------- */

/* 989px is the theme's own mid breakpoint. Below it the two columns stack, and the resource
   section's dividing border becomes a top border so the sections stay visually separated. */
@media screen and (max-width: 989px) {
  #norsan-search-results {
    padding: 18px;
  }

  .nms-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .nms-section--resources {
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid var(--nms-line);
  }
}

@media screen and (max-width: 768px) {
  #norsan-search-results {
    margin-top: 4px;
    padding: 14px;
    /* The header is shorter on mobile; keep the panel inside the viewport regardless. */
    max-height: calc(100vh - 110px);
  }

  .nms-card {
    gap: 10px;
    padding: 8px;
  }

  .nms-card__thumb {
    flex-basis: 52px;
    width: 52px;
    height: 47px;
  }

  .nms-card__title {
    font-size: 17px;
  }

  .nms-card__price {
    font-size: 17px;
  }
}

/* Narrow phones: the price/button column would squeeze the title to nothing, so the row
   becomes two lines with the action aligned under the text. */
@media screen and (max-width: 500px) {
  .nms-card--product {
    flex-wrap: wrap;
  }

  /* "Sélectionnez une option" is far longer than "Ajouter au panier" and, with nowrap, ran 24px
     past the right edge at 320px. Allowed to wrap here only - at 500px and up every label still
     fits on one line, so wider screens keep the tidy single-line button. */
  .nms-btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .nms-card--product .nms-card__body {
    flex: 1 1 calc(100% - 62px);
  }

  .nms-card__side {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-left: 62px;
    justify-content: flex-start;
    text-align: left;
  }
}

/* ------------------------------------------------------------------ a11y/motion --------- */

@media (prefers-reduced-motion: reduce) {
  #norsan-search-results .nms-card,
  #norsan-search-results .nms-btn {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .nms-card__title mark {
    background: #ffec99;
  }

  .nms-card:hover,
  .nms-card:focus-visible {
    border-color: var(--nms-blue);
  }
}