@charset "UTF-8";
/* Algolia alpha (test and preview hosts only, AlgoliaAlphaHelper.php): the Algolia POC's search UI.
   Every rule is scoped to the alpha's own containers, so the shop's generic classes (.card, .row,
   .badge, .pill) and ours never meet. Colours: each shop's theme, as in the POC (cn: svensktkosttillskott.se, hw: svenskhalsokost.se). */
#algolia-autocomplete, .aa-Panel, .aa-DetachedContainer, .aa-DetachedOverlay, .algolia-results, .alg-popup-dialog {
  --surface: #ffffff; --ink: #333333; --muted: #6b6b6b; --rule: #e2e2e2; --title-ink: #1f2a37;
  --accent: #054798; --accent-ink: #ffffff; --sale: #d53c15;
  --aa-primary-color-rgb: 5, 71, 152; --aa-input-border-color-rgb: 226, 226, 226;
  --tint: #eef3fa; --tint-strong: #d5deeb; --focus: rgba(5, 71, 152, .35);
  /* Corners as the shop's own (live, 3 Nov 2026): Core shops 10px buttons (add to cart), 3px search field, 4px product boxes */
  --r-btn: 10px; --r-chip: 10px; --r-field: 3px; --r-card: 4px; --r-inner: 2px;
}
/* svenskhalsokost.se (Healthwell): the POC's "hw" look, read from the live site */
.algolia-theme-hw :is(#algolia-autocomplete, .algolia-results), .algolia-theme-hw :is(.aa-Panel, .aa-DetachedContainer, .aa-DetachedOverlay, .alg-popup-dialog) {
  --ink: #333333; --muted: #5f6b66; --rule: #e1ddd5; --title-ink: #053c2f;
  --accent: #053c2f; --accent-ink: #ffffff; --sale: #94054b;
  --aa-primary-color-rgb: 5, 60, 47; --aa-input-border-color-rgb: 225, 221, 213;
  --tint: #eef5ef; --tint-strong: #b6ddae; --focus: rgba(5, 60, 47, .3);
  /* Healthwell: pill buttons and search field, 4px product boxes as on the Core shops */
  --r-btn: 999px; --r-chip: 999px; --r-field: 999px;
}
/* The shop's style.min.css styles bare elements: header {position: fixed}, input[type=checkbox]
   {display: none}, button/select/input {width: 100%; height: 34px; margin: 3px 0} and button
   {border: 0 !important; font-size: 1.2rem !important}. Undone here inside our containers with
   :where() (no specificity, so every class rule below still wins). A button takes its border and
   font size from --btn-border and --btn-fs, the only way past the shop's !important. */
:where(.algolia-results, .alg-popup-dialog) :is(header, footer) { position: static; z-index: auto; min-height: 0; padding: 0; margin: 0; border: 0; max-width: none; background: none; }
:where(#algolia-autocomplete, .aa-Panel, .aa-DetachedContainer, .algolia-results, .alg-popup-dialog) input[type="checkbox"] { display: inline-block; }
:where(#algolia-autocomplete, .aa-Panel, .aa-DetachedContainer, .algolia-results, .alg-popup-dialog) :is(input, select) { margin: 0; }
:where(#algolia-autocomplete, .aa-Panel, .aa-DetachedContainer, .algolia-results, .alg-popup-dialog) button {
  width: auto; height: auto; margin: 0; padding: 0; line-height: normal; font-family: inherit;
  font-size: var(--btn-fs, inherit) !important; border: var(--btn-border, 0) !important; }
/* Our focus ring instead of the shop's orange one */
:where(#algolia-autocomplete, .aa-Panel, .aa-DetachedContainer, .algolia-results, .alg-popup-dialog) :is(button, a, select, input):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Phones: the shop's blue search band is 42px; the pill sits in it with 4px of blue around, like the shop's own field */
#algolia-autocomplete .aa-DetachedSearchButton { --btn-border: 0; --btn-fs: 16px; width: 100%; height: 34px; margin: 4px 0; border-radius: var(--r-field); padding: 0 12px; }

/* ── Header search box (Autocomplete) ── */
#algolia-autocomplete { width: 100%; }
#algolia-autocomplete .aa-Form { border-radius: var(--r-field); min-height: 44px; padding-left: 8px; border: 0; }
#algolia-autocomplete .aa-Form:focus-within { box-shadow: 0 0 0 3px var(--focus); }
/* Search icon (header box, the phone's search button and its full-screen form): a clean line magnifier in the accent
   colour instead of autocomplete-js's filled one, whose ring looked uneven and handle stubby (user, 3 Nov 2026).
   Drawn as a mask, so it follows currentColor. */
#algolia-autocomplete .aa-SubmitIcon, .aa-DetachedContainer .aa-SubmitIcon, #algolia-autocomplete .aa-DetachedSearchButtonIcon svg {
  width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.75'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.75'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
#algolia-autocomplete .aa-SubmitIcon path, .aa-DetachedContainer .aa-SubmitIcon path, #algolia-autocomplete .aa-DetachedSearchButtonIcon svg path { display: none; }
/* svenskhalsokost.se has a white header: a white pill with the shop's own beige edge, as its search field */
.algolia-theme-hw #algolia-autocomplete .aa-Form { box-shadow: inset 0 0 0 1px #f1e0d3; }
.algolia-theme-hw #algolia-autocomplete .aa-Form:focus-within { box-shadow: inset 0 0 0 1px #053c2f, 0 0 0 3px var(--focus); }
.algolia-theme-hw #algolia-autocomplete .aa-DetachedSearchButton { --btn-border: 1px solid #f1e0d3; }
/* The shop paints .search-container input grey (#eaecf2); the whole pill is white instead. */
#algolia-autocomplete .aa-Input { font-size: 16px; background: transparent; height: 44px; }
#algolia-autocomplete .ac-kbd { margin-right: 14px; padding: 2px 7px; border: 1px solid var(--rule); border-radius: 6px; background: #f6f7f9; color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; pointer-events: none; }
#algolia-autocomplete .aa-Form:has(.aa-Input:not(:placeholder-shown)) .ac-kbd { display: none; }
.aa-Panel { z-index: 1000; font-family: inherit; }
/* A light scrim over the page (under the shop's header, z-index 20) while the panel is open */
body:has(> .aa-Panel)::after { content: ""; position: fixed; inset: 0; z-index: 19; background: rgba(16, 24, 40, .28); pointer-events: none; }
.aa-Panel .ac-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.aa-Panel .ac-buy { flex: none; min-height: 30px; padding: 0 12px; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-ink); --btn-fs: 13px; font-weight: 700; cursor: pointer; }
.aa-Panel .ac-buy:hover { filter: brightness(1.1); }
.aa-Panel .ac-buy:disabled { opacity: .6; }
.aa-Panel .ac-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.aa-Panel .aa-SourceHeader { margin: 8px 4px 2px; }
.aa-Panel .ac-query { display: flex; align-items: center; gap: 8px; width: 100%; }
.aa-Panel .ac-icon { color: var(--muted); width: 16px; text-align: center; }
.aa-Panel .ac-q { flex: 1; }
.aa-Panel .ac-q b { font-weight: 800; }
.aa-Panel .ac-remove { background: none; color: var(--muted); --btn-fs: 16px; cursor: pointer; padding: 0 4px; }
.aa-Panel .ac-item { display: flex; gap: 10px; align-items: center; width: 100%; }
.aa-Panel .ac-item img { object-fit: contain; }
.aa-Panel .ac-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.aa-Panel .ac-brand { font-size: 11px; color: var(--muted); }
.aa-Panel .ac-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.aa-Panel .ac-price { font-weight: 700; white-space: nowrap; padding-right: 4px; color: var(--title-ink); }
.aa-Panel .ac-price.sale { color: var(--sale); }
.aa-Panel .ac-empty { padding: 12px; color: var(--muted); }
.aa-Panel .ac-browse { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.aa-Panel .ac-browse .ac-label { display: block; margin-bottom: 4px; }
.aa-Panel .ac-chip { display: inline-block; border: 1px solid var(--rule); background: #f3f6f4; border-radius: var(--r-chip); padding: 2px 9px; margin: 0 4px 4px 0; font-size: 13px; color: var(--ink); text-decoration: none; }
.aa-Panel .ac-chip:hover { border-color: var(--accent); }
.aa-Panel .ac-facets { display: flex; flex-direction: column; gap: 12px; padding: 12px 6px 4px; border-top: 1px solid var(--rule); margin-top: 6px; }
.aa-Panel .ac-facets .ac-label { display: block; margin-bottom: 4px; }
.aa-Panel .ac-facet { display: flex; justify-content: space-between; gap: 8px; min-height: 32px; align-items: center; padding: 0 6px; border-radius: 6px; font-size: 14px; color: var(--ink); text-decoration: none; }
.aa-Panel .ac-facet:hover { background: var(--tint); }
.aa-Panel .ac-products-head { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 4px 8px; }
.aa-Panel .ac-all-top { font-size: 14px; font-weight: 700; color: var(--accent); }
.aa-Panel .ac-fbt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; padding: 10px 14px; border-radius: var(--r-card); background: var(--tint); font-size: 14px; }
.aa-Panel .ac-fbt a { font-weight: 600; text-decoration: none; color: var(--accent); }
/* Popular searches as chips, trending as tiles (every width) */
.aa-Panel [data-autocomplete-source-id="popular"] .aa-List { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 4px; }
.aa-Panel [data-autocomplete-source-id="popular"] .aa-Item { width: auto; min-height: 36px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--r-chip); }
.aa-Panel [data-autocomplete-source-id="popular"] .ac-icon { display: none; }
.aa-Panel [data-autocomplete-source-id="trending"] .aa-List,
.aa-Panel [data-autocomplete-source-id="products"] .aa-List { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aa-Panel [data-autocomplete-source-id="trending"] .aa-Item,
.aa-Panel [data-autocomplete-source-id="products"] .aa-Item { border: 1px solid var(--rule); border-radius: var(--r-card); padding: 8px; }
.aa-Panel [data-autocomplete-source-id="trending"] .ac-item,
.aa-Panel [data-autocomplete-source-id="products"] .ac-item { flex-direction: column; align-items: flex-start; gap: 4px; }
.aa-Panel [data-autocomplete-source-id="trending"] .ac-item img,
.aa-Panel [data-autocomplete-source-id="products"] .ac-item img { width: 100%; height: 96px; }
.aa-Panel [data-autocomplete-source-id="trending"] .ac-text,
.aa-Panel [data-autocomplete-source-id="products"] .ac-text { width: 100%; }
.aa-Panel [data-autocomplete-source-id="trending"] .ac-name,
.aa-Panel [data-autocomplete-source-id="products"] .ac-name { white-space: normal; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; font-weight: 700; line-height: 1.2; }
@media (min-width: 900px) {
  .aa-Panel:has([data-autocomplete-source-id="products"]), .aa-Panel:has([data-autocomplete-source-id="trending"]) {
    right: auto !important; left: max(16px, calc((100vw - min(980px, calc(100vw - 32px))) / 2)) !important; width: min(980px, calc(100vw - 32px)) !important; max-width: none !important; }
  /* While typing: four product tiles on the left, suggestions with categories and brands on the right.
     A vague query has no suggestions: then the tiles use the full width. */
  .aa-Panel .aa-PanelLayout:has([data-autocomplete-source-id="products"]) { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 0 20px; padding: 14px 18px; }
  .aa-Panel .aa-PanelLayout:has([data-autocomplete-source-id="products"]):not(:has([data-autocomplete-source-id="suggestions"])) { grid-template-columns: minmax(0, 1fr); }
  .aa-PanelLayout [data-autocomplete-source-id="suggestions"] { grid-column: 2; grid-row: 1 / span 3; background: var(--tint); border-radius: var(--r-card); padding: 8px; margin: 0; }
  .aa-PanelLayout [data-autocomplete-source-id="products"] { grid-column: 1; grid-row: 1; margin: 0; }
  .aa-PanelLayout [data-autocomplete-source-id="products"] .aa-List { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .aa-PanelLayout [data-autocomplete-source-id="products"] .ac-item img { height: 110px; }
  /* Empty box: trending tiles on the left, recent and popular on the right, browse across the bottom */
  .aa-PanelLayout:has(> [data-autocomplete-source-id="trending"]) { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 4px 24px; padding: 14px 18px; align-items: start;
    grid-template-areas: "trending recent" "trending popular" "browse browse"; grid-template-rows: auto 1fr auto; }
  .aa-PanelLayout > [data-autocomplete-source-id="recent"] { grid-area: recent; margin: 0; }
  .aa-PanelLayout > [data-autocomplete-source-id="popular"] { grid-area: popular; margin: 0; }
  .aa-PanelLayout > [data-autocomplete-source-id="trending"] { grid-area: trending; margin: 0; }
  .aa-PanelLayout > [data-autocomplete-source-id="browse"] { grid-area: browse; margin: 8px 0 0; border-top: 1px solid var(--rule); padding-top: 10px; }
  .aa-PanelLayout > [data-autocomplete-source-id="browse"] .ac-browse { flex-direction: row; flex-wrap: wrap; gap: 6px 32px; }
  .aa-Panel [data-autocomplete-source-id="trending"] .aa-List { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* ── Phones (full-screen search): products first, everything that helps searching as one swipeable
   row of chips. Empty: recent searches, "Populärt just nu" as a strip of tiles, popular searches,
   categories and brands. Typing: suggestions, product rows, refine chips, "Visa alla" pinned. ── */
.aa-DetachedContainer .aa-PanelLayout { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 0; }
.aa-DetachedContainer .aa-Source { margin: 0 0 10px; }
.aa-DetachedContainer .aa-SourceHeader { margin: 4px 0 6px; }
.aa-DetachedContainer [data-autocomplete-source-id="recent"] { order: 1; }
.aa-DetachedContainer [data-autocomplete-source-id="trending"] { order: 2; }
.aa-DetachedContainer [data-autocomplete-source-id="popular"] { order: 3; }
.aa-DetachedContainer [data-autocomplete-source-id="browse"] { order: 4; }
/* Chip rows that scroll sideways (recent, popular, suggestions, categories, brands) */
.aa-DetachedContainer :is([data-autocomplete-source-id="recent"], [data-autocomplete-source-id="popular"], [data-autocomplete-source-id="suggestions"]) .aa-List,
.aa-DetachedContainer .ac-chip-row, .aa-DetachedContainer .ac-browse > div {
  display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px; }
.aa-DetachedContainer :is(.aa-List, .ac-chip-row, .ac-browse > div)::-webkit-scrollbar { display: none; }
.aa-DetachedContainer :is([data-autocomplete-source-id="recent"], [data-autocomplete-source-id="popular"], [data-autocomplete-source-id="suggestions"]) .aa-Item {
  flex: none; width: auto; min-height: 38px; padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--r-chip); background: var(--surface); }
.aa-DetachedContainer :is([data-autocomplete-source-id="recent"], [data-autocomplete-source-id="popular"], [data-autocomplete-source-id="suggestions"]) :is(.ac-icon, .ac-remove) { display: none; }
.aa-DetachedContainer .ac-query { white-space: nowrap; }
.aa-DetachedContainer .ac-chip { flex: none; margin: 0; min-height: 34px; display: inline-flex; align-items: center; padding: 0 12px; white-space: nowrap; }
.aa-DetachedContainer .ac-browse { gap: 10px; padding: 0; }
.aa-DetachedContainer .ac-browse .ac-label { margin-bottom: 4px; }
/* "Populärt just nu": a strip of tiles you swipe, the first two and a half on screen */
.aa-DetachedContainer [data-autocomplete-source-id="trending"] .aa-List { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px 4px; scroll-snap-type: x proximity; }
.aa-DetachedContainer [data-autocomplete-source-id="trending"] .aa-Item { flex: 0 0 40%; scroll-snap-align: start; }
.aa-DetachedContainer [data-autocomplete-source-id="trending"] .ac-item img { height: 88px; }
/* Typing: products as compact rows (picture, name, price, Köp) */
.aa-DetachedContainer [data-autocomplete-source-id="products"] .aa-List { display: flex; flex-direction: column; gap: 0; }
.aa-DetachedContainer [data-autocomplete-source-id="products"] .aa-Item { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 8px 0; }
.aa-DetachedContainer [data-autocomplete-source-id="products"] .ac-item { flex-direction: row; align-items: center; gap: 12px; }
.aa-DetachedContainer [data-autocomplete-source-id="products"] .ac-item img { width: 56px; height: 56px; flex: none; }
.aa-DetachedContainer [data-autocomplete-source-id="products"] .ac-text { flex: 1; width: auto; }
.aa-DetachedContainer [data-autocomplete-source-id="products"] .ac-name { font-size: 15px; }
.aa-DetachedContainer [data-autocomplete-source-id="products"] .ac-bottom { flex-direction: column; align-items: flex-end; width: auto; gap: 4px; }
.aa-DetachedContainer .ac-products-head { padding: 2px 0 4px; }
.aa-DetachedContainer .ac-all-top { display: none; }
.ac-mobile-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.ac-refine .ac-label { display: block; margin-bottom: 4px; }
.ac-all-bottom { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: 50px; margin: 0 -12px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: 0 -6px 16px rgba(16, 24, 40, .12); }
.ac-all-bottom:hover, .ac-all-bottom:focus { color: var(--accent-ink); text-decoration: none; }

/* ── Results page ── */
.algolia-results { color: var(--ink); padding-bottom: 32px; }
.algolia-results .search-page { display: flex; flex-direction: column; gap: 16px; max-width: 1360px; margin: 0 auto; padding: 20px 16px 0; }
.algolia-results h1 { margin: 0; font-size: 32px; line-height: 1.1; color: var(--title-ink); overflow-wrap: anywhere; }
.algolia-results .results-count { font-size: 17px; font-weight: 500; color: var(--muted); }
.algolia-results .results-related { margin: 6px 0 0; font-size: 14px; color: var(--muted); min-height: 1em; }
.algolia-results .results-related a { font-weight: 600; color: var(--accent); }
.algolia-results .muted { color: var(--muted); }
.algolia-results .small { font-size: 13px; }
/* Products | Articles switch (results.js setupArticles), on every device; the articles replace the product area. */
.algolia-results .results-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--rule); }
.algolia-results .results-tabs[hidden], .algolia-results .results-articles[hidden] { display: none; }
.algolia-results .results-tab { padding: 10px 4px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none;
  color: var(--muted); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.algolia-results .results-tab.on { color: var(--title-ink); border-bottom-color: var(--accent); }
.algolia-results .results-tab span { font-weight: 500; }
.algolia-results .search-page.show-articles :is(.type-tiles, #r-redirect, .results-bar, .active-filters, .search-layout, .bought-with) { display: none; }
.algolia-results .article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.algolia-results .article-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-card); background: var(--surface);
  color: var(--ink); text-decoration: none; }
.algolia-results .article-card img, .algolia-results .article-card-img { width: 100%; aspect-ratio: 286 / 104; object-fit: cover; background: var(--rule); }
.algolia-results .article-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.algolia-results .article-card-group { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.algolia-results .article-card strong { font-size: 17px; line-height: 1.25; color: var(--title-ink); }
.algolia-results .article-card-intro { font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.algolia-results .article-card .link { font-size: 14px; font-weight: 600; color: var(--accent); }
.algolia-results .article-card:hover strong, .algolia-results .article-card:focus-visible strong { text-decoration: underline; }
.algolia-results .type-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.algolia-results .type-tiles[hidden] { display: none; }
.algolia-results .type-tile { min-height: 68px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 14px;
  border-radius: var(--r-card); --btn-border: 2px solid transparent; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.algolia-results .type-tile b { font-size: 15px; color: var(--title-ink); }
.algolia-results .type-tile span { font-size: 13px; color: var(--muted); }
.algolia-results .type-tile.on { --btn-border: 2px solid var(--accent); background: var(--tint); }
.algolia-results .results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.algolia-results .quick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.algolia-results .chip { min-height: 40px; padding: 0 14px; border-radius: var(--r-chip); --btn-border: 1px solid var(--rule); border: var(--btn-border); background: var(--surface); color: var(--ink); font: inherit; --btn-fs: 14px; font-weight: 600; cursor: pointer; }
.algolia-results .chip span { opacity: .7; font-weight: 500; }
.algolia-results .chip.on { background: var(--accent); --btn-border: 1px solid var(--accent); color: var(--accent-ink); }
.algolia-results .results-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.algolia-results .sort-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.algolia-results .pill { --btn-border: 1px solid var(--rule); --btn-fs: 14px; border: var(--btn-border); background: var(--surface); border-radius: var(--r-chip); padding: 3px 12px; font-size: var(--btn-fs); cursor: pointer; font-family: inherit; color: var(--ink); }
.algolia-results .filters-open, .algolia-results .filters-head, .algolia-results .filters-apply, .algolia-results .link-btn { display: none; }
.algolia-results .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.algolia-results .active-filters:has(.ais-CurrentRefinements--noRefinement) { display: none; }
.algolia-results .ais-CurrentRefinements-list { display: flex; flex-wrap: wrap; gap: 6px; }
.algolia-results .ais-CurrentRefinements-item { border: 0; background: var(--tint); border-radius: var(--r-chip); padding: 4px 6px 4px 12px; min-height: 36px; box-sizing: border-box; font-size: 13px; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.algolia-results .ais-CurrentRefinements-item:hover { background: var(--tint-strong); }
.algolia-results .ais-CurrentRefinements-category { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.algolia-results .ais-CurrentRefinements-label { font-weight: 700; }
.algolia-results .ais-CurrentRefinements-delete { width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: var(--accent); cursor: pointer; }
.algolia-results .ais-ClearRefinements-button { background: none; border: 0; box-shadow: none; padding: 0; color: var(--accent); font: inherit; --btn-fs: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; height: auto; }
.algolia-results .ais-ClearRefinements-button--disabled { display: none; }
.algolia-results .search-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
/* Filter column */
.algolia-results .filters { display: flex; flex-direction: column; gap: 20px; background: var(--surface); border-radius: var(--r-card); padding: 18px; }
.algolia-results .filters .ais-Panel { border: 0; box-shadow: none; padding: 0; background: none; }
.algolia-results .filters .ais-Panel-header { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 0; padding: 0; margin: 0 0 8px; }
.algolia-results .filters .ais-HierarchicalMenu-link { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; color: var(--ink); text-decoration: none; }
.algolia-results .filters .ais-HierarchicalMenu-link::before, .algolia-results .filters .ais-HierarchicalMenu-link::after { content: none; display: none; }
.algolia-results .filters .ais-HierarchicalMenu-item--selected > .ais-HierarchicalMenu-link { font-weight: 700; color: var(--title-ink); }
.algolia-results .filters .ais-HierarchicalMenu-list--child { margin-left: 12px; padding-left: 10px; border-left: 1px solid var(--rule); }
.algolia-results .filters .ais-HierarchicalMenu-count, .algolia-results .filters .ais-RefinementList-count { background: none; border: 0; padding: 0; margin: 0; font-size: 13px; color: var(--muted); font-weight: 400; }
.algolia-results .filters .ais-RefinementList-label { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; }
.algolia-results .filters .ais-RefinementList-checkbox { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); box-shadow: none; }
.algolia-results .filters .ais-RefinementList-labelText { flex: 1; }
.algolia-results .filters .ais-RefinementList-searchBox { margin-bottom: 6px; }
.algolia-results .filters .ais-RefinementList-searchBox .ais-SearchBox-input { border-radius: var(--r-card); box-shadow: none; border: 1px solid var(--rule); font-size: 14px; }
.algolia-results .filters .ais-RefinementList-showMore { background: none; border: 0; box-shadow: none; padding: 4px 0 0; height: auto; color: var(--accent); font: inherit; --btn-fs: 14px; font-weight: 600; cursor: pointer; }
.algolia-results .filters .ais-RefinementList-showMore--disabled { display: none; }
.algolia-results .price-hist-wrap { margin-bottom: 10px; }
.algolia-results .price-hist { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin-bottom: 4px; }
.algolia-results .price-bar { flex: 1; min-width: 0; border: 0; padding: 0; border-radius: 2px 2px 0 0; background: var(--tint-strong); cursor: pointer; }
.algolia-results .price-bar.in { background: var(--accent); }
.algolia-results .price-bar:disabled { cursor: default; background: var(--rule); }
.algolia-results .price-hist-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.algolia-results .ais-RangeInput-form { display: flex; align-items: center; gap: 6px; }
.algolia-results .ais-RangeInput-label { flex: 1; min-width: 0; }
.algolia-results .ais-RangeInput-input { width: 100%; min-height: 40px; border: 1px solid var(--rule); border-radius: var(--r-card); padding: 0 6px; text-align: center; font: inherit; font-size: 14px; box-shadow: none; }
.algolia-results .ais-RangeInput-submit { min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; box-shadow: none; background-image: none; cursor: pointer; }
.algolia-results .filters-toggles { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--rule); padding-top: 14px; }
.algolia-results .ais-ToggleRefinement-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; cursor: pointer; flex-direction: row-reverse; }
.algolia-results .ais-ToggleRefinement-labelText { flex: 1; }
.algolia-results .ais-ToggleRefinement-checkbox { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: var(--rule); position: relative; cursor: pointer; box-shadow: none; }
.algolia-results .ais-ToggleRefinement-checkbox::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.algolia-results .ais-ToggleRefinement-checkbox:checked { background: var(--accent); }
.algolia-results .ais-ToggleRefinement-checkbox:checked::after { transform: translateX(16px); }
/* Tiles */
.algolia-results .ais-InfiniteHits-list, .algolia-results .alg-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.algolia-results .ais-InfiniteHits-item { padding: 0; box-shadow: none; background: none; border: 0; display: block; }
.algolia-results .ais-InfiniteHits-banner { grid-column: 1 / -1; margin-bottom: 14px; }
.algolia-results .card { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 12px; }
.algolia-results .card:hover { box-shadow: 0 6px 20px rgba(16, 24, 40, .1); }
.algolia-results .card-img { position: relative; height: 180px; background: var(--surface); border-radius: var(--r-inner); }
.algolia-results .card-img img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.algolia-results .card.oos .card-img img { opacity: .55; }
.algolia-results .tile-marks { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.algolia-results .badge { display: inline-block; font-size: 12px; font-weight: 700; line-height: 12px; padding: 4px 8px; color: #fff; border-radius: 6px; }
.algolia-results .badge.sale { background: var(--sale); }
.algolia-results .tile-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.algolia-results .tile-brand { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.algolia-results .card-link { color: var(--title-ink); text-decoration: none; font-weight: 700; font-size: 16px; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.algolia-results .card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.algolia-results .card-link mark { background: #fff1a8; color: inherit; }
.algolia-results .tile-sizes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.algolia-results .size-pill { border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.algolia-results .size-pill.more { color: var(--muted); }
.algolia-results .card-rating { display: block; font-size: 13px; padding-top: 2px; }
.algolia-results .stars5 { letter-spacing: 1px; background: linear-gradient(90deg, #b7791f var(--fill), var(--rule) var(--fill)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.algolia-results .card-bottom-wrap { margin-top: auto; }
.algolia-results .card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 4px; }
.algolia-results .tile-price { display: flex; flex-direction: column; line-height: 1.1; }
.algolia-results .tile-price b { font-size: 20px; color: var(--title-ink); }
.algolia-results .tile-price.sale b { color: var(--sale); }
.algolia-results .tile-price s { font-size: 13px; color: var(--muted); }
.algolia-results .oos-note { font-size: 12px; color: var(--muted); }
.algolia-results .tile-cta { position: relative; z-index: 2; flex: none; min-height: 40px; padding: 0 16px; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; --btn-fs: 14px; font-size: var(--btn-fs); display: inline-flex; align-items: center; border: 0; cursor: pointer; }
.algolia-results .tile-cta.choose { background: var(--surface); color: var(--accent); --btn-border: 1.5px solid var(--accent); border: var(--btn-border); cursor: pointer; }
.algolia-results .tile-cta.choose:hover { background: var(--tint); }
.algolia-results .merch-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--accent); color: var(--accent-ink); border-radius: var(--r-card); padding: 18px 24px; text-decoration: none; font-weight: 700; }
.algolia-results .merch-banner-text { display: flex; flex-direction: column; gap: 4px; }
.algolia-results .merch-banner-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.algolia-results .merch-banner-title { font-size: 21px; }
.algolia-results .merch-banner-cta { flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--accent-ink); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; }
/* Paging and the rows under the results */
.algolia-results .results-progress { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 22px 0 0; font-size: 14px; color: var(--muted); }
.algolia-results .results-progress[hidden] { display: none; }
.algolia-results .progress-bar { width: 220px; height: 4px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.algolia-results .progress-bar > span { display: block; height: 100%; background: var(--accent); }
.algolia-results .ais-InfiniteHits-loadMore { display: block; margin: 12px auto 0; min-height: 48px; padding: 0 28px; border-radius: var(--r-btn); --btn-border: 2px solid var(--accent); background: var(--surface); color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; background-image: none; box-shadow: none; }
.algolia-results .ais-InfiniteHits-loadMore--disabled { display: none; }
.algolia-results .bought-with { background: var(--surface); border-radius: var(--r-card); padding: 18px 20px; }
.algolia-results .bought-with[hidden] { display: none; }
.algolia-results .bought-with-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.algolia-results .bought-with-head h2 { margin: 0; font-size: 19px; }
.algolia-results .bought-with-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.algolia-results .mini-card { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--rule); border-radius: var(--r-card); text-decoration: none; color: var(--ink); }
.algolia-results .mini-card:hover { border-color: var(--accent); }
.algolia-results .mini-img { flex: none; width: 56px; height: 56px; border-radius: var(--r-inner); background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.algolia-results .mini-img img { max-width: 90%; max-height: 90%; object-fit: contain; }
.algolia-results .mini-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.algolia-results .zero-fallback { background: var(--surface); border-radius: var(--r-card); padding: 20px 22px; margin-top: 4px; }
.algolia-results .zero-fallback .zero-lead { font-size: 17px; color: var(--title-ink); margin-bottom: 14px; }
.algolia-results .zero-fallback h2 { margin: 18px 0 12px; font-size: 19px; color: var(--title-ink); }
.algolia-results.is-empty :is(.filters, .results-tools, .quick-chips, .type-tiles, .active-filters, .results-related, .ais-InfiniteHits--empty, .results-progress, .bought-with) { display: none; }
.algolia-results.is-empty .search-layout { grid-template-columns: minmax(0, 1fr); }
.algolia-results .zero-fallback[hidden] { display: none; }
.algolia-results .zero-fallback p { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.algolia-results .guide-chip { border: 1px solid var(--rule); border-radius: var(--r-chip); padding: 3px 12px; text-decoration: none; color: var(--accent); font-weight: 600; }
.algolia-results .filters-backdrop { display: none; }
/* Phones: filters as a sheet from the bottom */
@media (max-width: 800px) {
  .algolia-results h1 { font-size: 24px; }
  .algolia-results .type-tiles { display: flex; overflow-x: auto; }
  .algolia-results .type-tile { flex: none; min-height: 52px; }
  .algolia-results .quick-chips { display: none; }
  .algolia-results .results-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-left: 0; }
  .algolia-results .filters-open { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; font-weight: 700; --btn-fs: 15px; border-radius: var(--r-btn); white-space: nowrap; }
  .algolia-results .sort-label > span:first-child { display: none; }
  .algolia-results .sort-label, .algolia-results .sort-label #r-sort, .algolia-results .ais-SortBy-select { display: block; width: 100%; min-height: 44px; }
  .algolia-results .search-layout { grid-template-columns: minmax(0, 1fr); }
  .algolia-results .filters:not(.open) { display: none; }
  .algolia-results .filters.open { position: fixed; inset: auto 0 0 0; max-height: 82vh; max-height: 82dvh; overflow-y: auto; z-index: 1001; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(16, 24, 40, .3); padding: 14px 18px 88px; }
  .algolia-results .filters.open .filters-head { display: flex; justify-content: space-between; align-items: center; }
  .algolia-results .filters-head h2 { margin: 0; font-size: 19px; }
  .algolia-results .filters.open .link-btn { display: inline-flex; align-items: center; padding: 0 4px; background: none; border: 0; color: var(--accent); font: inherit; font-weight: 700; min-height: 44px; cursor: pointer; }
  .algolia-results .filters.open .filters-apply { display: block; position: fixed; left: 18px; right: 18px; bottom: 18px; min-height: 52px; border: 0; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-ink); font: inherit; --btn-fs: 16px; font-weight: 700; cursor: pointer; z-index: 1002; }
  .algolia-results .filters-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(16, 24, 40, .45); }
  body.alg-sheet-open { overflow: hidden; }
  /* The shop's fixed header sits above the results' stacking context: dim it with the backdrop */
  body.alg-sheet-open header:not(.results-head)::after { content: ""; position: absolute; inset: 0; background: rgba(16, 24, 40, .45); }
  .algolia-results .ais-InfiniteHits-list, .algolia-results .alg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .algolia-results .card { padding: 8px; }
  .algolia-results .card-img { height: 130px; }
  .algolia-results .card-link { font-size: 14px; }
  /* One tap to the cart on phones too; "Välj" goes away (the whole card links to the product) */
  .algolia-results .tile-cta { min-height: 36px; padding: 0 14px; --btn-fs: 13px; }
  .algolia-results .tile-price b { font-size: 17px; }
  .algolia-results .bought-with-list { grid-template-columns: 1fr; }
}

/* ── Add-to-cart popup (design canvas "Add-to-cart popup") ── */
.alg-popup-dialog { margin: auto; border: 0; padding: 0; border-radius: 20px; width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow: auto; box-shadow: 0 24px 64px rgba(16, 24, 40, .35); color: var(--ink); background: var(--surface); font-family: inherit; }
.alg-popup-dialog[open] { animation: alg-pop .18s ease-out; }
@keyframes alg-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.alg-popup-dialog::backdrop { background: rgba(16, 24, 40, .5); }
body.alg-popup-open { overflow: hidden; }
.alg-popup { display: flex; flex-direction: column; }
.alg-popup-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 0; }
.alg-popup-ok { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #e3f3e8; color: #1d6b3a; display: flex; align-items: center; justify-content: center; }
.alg-popup-head h2 { margin: 0; flex: 1; font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--title-ink); }
.alg-popup-close { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #f1f3f5; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.alg-popup-close:hover { background: #e6e9ed; }
.alg-popup-product { display: flex; align-items: center; gap: 16px; margin: 16px 24px 0; padding: 14px; border: 1px solid var(--rule); border-radius: var(--r-card); }
.alg-popup-img { flex: none; width: 72px; height: 72px; border-radius: var(--r-inner); background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.alg-popup-img img { max-width: 88%; max-height: 88%; object-fit: contain; }
.alg-popup-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.alg-popup-text b { font-size: 16px; line-height: 1.25; color: var(--title-ink); }
.alg-popup-brand { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.alg-popup-label { font-size: 13px; color: var(--muted); }
.alg-popup-variant { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alg-popup-amount { font-weight: 600; color: var(--title-ink); }
.alg-popup-img img { transition: opacity .15s; }
.alg-popup-price { flex: none; min-width: 64px; text-align: right; font-size: 17px; color: var(--title-ink); }
.alg-qty { flex: none; display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: var(--r-btn); }
.alg-qty button { width: 36px; height: 36px; border-radius: 50%; background: none; color: var(--accent); --btn-fs: 18px; font-weight: 700; cursor: pointer; }
.alg-qty button:disabled { color: #b8bfc9; cursor: default; }
.alg-qty output { min-width: 20px; text-align: center; font-weight: 700; }
/* The stepper a recommended item gets once added (cart.js recStepper), as tall as the button it replaces. */
.alg-fbt-card .alg-qty.small { width: 100%; justify-content: space-between; }
.alg-qty.small button { width: 38px; height: 38px; --btn-fs: 16px; }
/* One bigger-pack offer under the added product ("2-pack −10 % · Byt"), then what it saves + "Ångra" */
.alg-upsell { display: flex; align-items: center; gap: 10px; margin: 10px 24px 0; padding: 8px 8px 8px 12px; min-height: 52px; box-sizing: border-box; border-radius: var(--r-card); background: var(--tint); font-size: 14px; color: var(--title-ink); transition: background .2s, opacity .2s; }
.alg-upsell[hidden] { display: none; }
.alg-upsell { max-height: 140px; overflow: hidden; transition: background .2s, opacity .2s, max-height .25s ease, margin .25s ease, padding .25s ease; }
.alg-upsell.gone { max-height: 0; min-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .alg-upsell { transition: none; } }
.alg-upsell.loading { opacity: .65; }
.alg-upsell.done { background: #e3f3e8; color: #1d6b3a; }
.alg-upsell-pack { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--sale); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.alg-upsell-ok { flex: none; display: flex; }
.alg-upsell-text { flex: 1; min-width: 0; }
.alg-upsell .alg-btn.small { flex: none; min-height: 36px; padding: 0 18px; }
.alg-upsell-undo { flex: none; background: none; color: inherit; --btn-fs: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 6px 4px; }
.alg-upsell-error { flex-basis: 100%; font-size: 13px; color: var(--sale); }
.alg-upsell:has(.alg-upsell-error) { flex-wrap: wrap; }
/* Free shipping: progress until the limit, a green confirmation after */
.alg-ship { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; margin: 14px 24px 0; padding: 12px 14px; border-radius: var(--r-card); background: var(--tint); font-size: 14px; color: var(--title-ink); }
.alg-ship[hidden] { display: none; }
.alg-ship-limit { color: var(--muted); font-size: 13px; }
.alg-ship-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--tint-strong); overflow: hidden; }
.alg-ship-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s ease; }
.alg-ship.reached { display: flex; gap: 10px; background: #e3f3e8; color: #1d6b3a; font-weight: 600; }
/* Often bought with: three cards, one click each */
.alg-fbt { margin: 20px 24px 0; }
.alg-fbt[hidden] { display: none; }
/* Placeholder cards while "Köps ofta med" loads, the same size as the real ones */
.alg-fbt-card.skeleton { gap: 8px; }
.alg-sk { display: block; border-radius: 8px; background: linear-gradient(90deg, #eef0f3 25%, #f6f7f9 50%, #eef0f3 75%); background-size: 200% 100%; animation: alg-shimmer 1.2s ease-in-out infinite; }
.alg-sk-img { height: 92px; border-radius: var(--r-inner); }
.alg-sk-line { height: 12px; }
.alg-sk-line.short { width: 55%; }
.alg-sk-btn { height: 40px; margin-top: 6px; border-radius: var(--r-btn); }
@keyframes alg-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .alg-sk { animation: none; } }
.alg-fbt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.alg-fbt-head h3 { margin: 0; font-size: 16px; line-height: 1.25; font-weight: 700; color: var(--title-ink); }
.alg-fbt-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.alg-fbt-card { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid var(--rule); border-radius: var(--r-card); min-width: 0; }
.alg-fbt-ship { position: absolute; top: 6px; left: 6px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  background: #e3f3e8; color: #1d6b3a; font-size: 11px; font-weight: 700; }
.alg-fbt-ship[hidden] { display: none; }
.alg-fbt-ship svg { width: 13px; height: 13px; }
.alg-fbt-img { height: 92px; border-radius: var(--r-inner); background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.alg-fbt-img img { max-width: 86%; max-height: 86%; object-fit: contain; }
.alg-fbt-card .alg-popup-brand { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alg-fbt-name { font-size: 14px; font-weight: 700; line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; color: var(--title-ink); text-decoration: none; min-height: 34px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.alg-fbt-name:hover { color: var(--accent); }
/* The price sits right under the stars and lines up across the cards, with or without a variant list or reviews (user,
   4 Nov 2026): the rating row keeps its height when empty, and what follows the price goes to the bottom. */
.alg-fbt-card .card-rating { font-size: 12px; min-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alg-fbt-card .card-rating .muted { color: var(--muted); }
.alg-fbt-card .stars5 { letter-spacing: 1px; background: linear-gradient(90deg, #b7791f var(--fill), var(--rule) var(--fill)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.alg-fbt-price { display: flex; align-items: baseline; gap: 6px; }
.alg-fbt-price + * { margin-top: auto; }
.alg-fbt-price b { font-size: 16px; color: var(--title-ink); }
.alg-fbt-price.sale b { color: var(--sale); }
.alg-fbt-price s { font-size: 12px; color: var(--muted); }
.alg-fbt-card .alg-btn { width: 100%; gap: 6px; }
.alg-fbt-variant { width: 100%; height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none; text-overflow: ellipsis; }
/* Total, actions and the shop's own promises */
.alg-popup-foot { position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; padding: 18px 24px 20px; background: #fafbfc; border-top: 1px solid #eceef1; }
.alg-popup-sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--muted); }
.alg-popup-sum:empty { display: none; }
.alg-popup-sum b { font-size: 20px; color: var(--title-ink); }
.alg-popup-actions { display: flex; gap: 10px; }
.alg-popup-actions .alg-btn { flex: 1; min-height: 52px; --btn-fs: 16px; font-size: 16px; }
.alg-popup-actions .alg-btn.primary { flex: 1.4; gap: 8px; }
.alg-popup-cta-total { display: none; }
.alg-popup-usps { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 12px; color: var(--muted); }
.alg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.alg-btn:hover { filter: brightness(1.08); color: var(--accent-ink); }
.alg-popup-dialog .alg-btn, .alg-popup-dialog .alg-btn:hover, .alg-popup-dialog .alg-btn:focus { text-decoration: none; }
.alg-btn.small { min-height: 40px; padding: 0 12px; --btn-fs: 14px; font-size: var(--btn-fs); }
.alg-btn.ghost { background: var(--surface); color: var(--accent); --btn-border: 1.5px solid var(--accent); border: var(--btn-border); }
.alg-btn.ghost:hover { background: var(--tint); color: var(--accent); filter: none; }
.alg-btn.done { background: var(--accent); color: var(--accent-ink); --btn-border: 1.5px solid var(--accent); }
.alg-btn:disabled { cursor: default; }
.alg-btn:focus-visible, .alg-popup-close:focus-visible, .alg-qty button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Quick picker for size or flavour */
.alg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.alg-chooser .alg-popup-head h2 { font-size: 19px; }
.alg-chooser .card-rating { font-size: 12px; }
.alg-chooser .stars5 { letter-spacing: 1px; background: linear-gradient(90deg, #b7791f var(--fill), var(--rule) var(--fill)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.alg-variants { display: flex; flex-direction: column; gap: 8px; margin: 14px 24px 0; padding: 0; border: 0; max-height: 46vh; max-height: 46dvh; overflow-y: auto; }
.alg-variant { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--rule); border-radius: var(--r-card); cursor: pointer; }
.alg-variant:hover { border-color: var(--tint-strong); }
.alg-variant:has(input:checked) { border-color: var(--accent); background: var(--tint); }
.alg-variant input[type="radio"] { display: inline-block; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.alg-variant { padding-top: 8px; padding-bottom: 8px; }
.alg-variant-label { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 15px; color: var(--title-ink); }
.alg-variant-label small { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.alg-variant-label small:last-child { order: 3; }
.alg-best { order: 2; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #1d6b3a; background: #e3f3e8; border-radius: 999px; padding: 2px 8px; }
.alg-variant-price { display: flex; align-items: baseline; gap: 6px; }
.alg-variant-price b { font-size: 15px; color: var(--title-ink); }
.alg-variant-price.sale b { color: var(--sale); }
.alg-variant-price s { font-size: 12px; color: var(--muted); }
/* Short windows: smaller pictures, so the suggestions and the pinned checkout both fit */
@media (max-height: 760px) {
  .alg-popup-head { padding-top: 16px; }
  .alg-popup-product { margin-top: 12px; padding: 10px; }
  .alg-popup-img { width: 56px; height: 56px; }
  .alg-fbt { margin-top: 14px; }
  .alg-fbt-img { height: 64px; }
  .alg-popup-foot { margin-top: 14px; padding: 12px 24px 14px; gap: 8px; }
  .alg-popup-actions .alg-btn { min-height: 46px; }
}
/* Phones: a bottom sheet, checkout first with the total on it */
@media (max-width: 600px) {
  /* dvh: the visible height (iOS vh includes the space behind Safari's bars, so the top was cut off) */
  .alg-popup-dialog { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 90vh; max-height: 90dvh; border-radius: 20px 20px 0 0; }
  .alg-popup-dialog[open] { animation: alg-sheet .22s ease-out; }
  @keyframes alg-sheet { from { transform: translateY(40px); opacity: .6; } }
  .alg-popup-head { padding: 14px 16px 0; }
  .alg-popup-head h2 { font-size: 18px; }
  .alg-popup-product { margin: 12px 16px 0; padding: 10px; gap: 10px; flex-wrap: wrap; }
  .alg-popup-img { width: 56px; height: 56px; }
  .alg-popup-text { flex-basis: calc(100% - 66px); }
  .alg-qty { margin-left: 66px; }
  .alg-popup-price { margin-left: auto; }
  .alg-ship { margin: 12px 16px 0; }
  .alg-upsell { margin: 10px 16px 0; }
  .alg-variants { margin: 12px 16px 0; }
  .alg-fbt { margin: 16px 0 0; }
  .alg-fbt-head { padding: 0 16px; }
  .alg-fbt-list { display: flex; overflow-x: auto; padding: 0 16px 4px; scroll-snap-type: x mandatory; }
  .alg-fbt-card { flex: none; width: 150px; scroll-snap-align: start; }
  .alg-fbt-img { height: 76px; }
  .alg-popup-foot { margin-top: 14px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); }
  .alg-popup-sum { display: none; }
  .alg-popup-actions { flex-direction: column-reverse; gap: 4px; }
  .alg-popup-actions .alg-btn.ghost { --btn-border: 0; border: 0; min-height: 44px; }
  .alg-popup-cta-total { display: inline; font-weight: 600; }
  .alg-popup-usps { display: none; }
}

/* Fallback (AlgoliaAlphaHelper::footerScripts() watchdog): the shop's own search form, hidden while
   Algolia's search box mounts, shown in its place when Algolia doesn't load. */
.algolia-alpha .algolia-fallback-form { display: none; }
.algolia-alpha.algolia-box-failed .algolia-fallback-form { display: block; }
.algolia-alpha.algolia-box-failed #algolia-autocomplete { display: none; }