/* LekkerResults shop search — the search box and the collection chips above a product grid (order basket slice D,
   2026-10-08), shipped as shop/shop.css beside shop/shop.js. It follows the site's design through the house theme's
   variables and carries its own fallback for each, so a host page without our theme (a WordPress site) still draws a
   usable box. Nothing here styles anything outside the box's own data-shop-* parts. */

/* above the next band's shaped top edge, which reaches up into this section (a collection page, 2026-11-03) */
section[data-shop-search] { padding-bottom: 0; position: relative; z-index: 2; }
/* The bar is as wide as the grid under it (a theme caps a band's words at reading width; the attribute is doubled to beat
   that), the box on the left and the sort level with it on the right (Tomek 2026-11-06). */
[data-shop-bar][data-shop-bar] { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px 18px; max-width: none; }
[data-shop-box] { position: relative; flex: 1 1 240px; max-width: 460px; display: block; }
/* A collection page's box and the result list under it (shop.js wraps the box in this holder, 2026-11-06). */
[data-shop-find] { position: relative; flex: 1 1 260px; max-width: 520px; }
[data-shop-find] > [data-shop-box] { max-width: none; }
[data-shop-results-list] {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  max-height: min(60vh, 440px); overflow-y: auto; box-sizing: border-box; text-align: left;
  background: var(--surface, var(--bg, #fff)); border: 1px solid var(--line, #d6d2c8); border-radius: var(--r-card, 8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}
[data-shop-results-list][hidden] { display: none; }
[data-shop-results-list] > li { margin: 0; padding: 0; }
[data-shop-results-list] > li > a, [data-shop-results-list] > li > button {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit;
  text-align: left; color: var(--heading, #111); text-decoration: none; background: none; border: 0; border-radius: var(--r-btn, 4px); cursor: pointer;
}
[data-shop-results-list] > li[aria-selected="true"] > *, [data-shop-results-list] > li > :hover { background: color-mix(in srgb, var(--primary, #8a6a1f) 10%, transparent); }
[data-shop-results-list] img, [data-shop-result-nopic] { flex: 0 0 44px; width: 44px; height: 44px; object-fit: cover; border-radius: 4px; }
[data-shop-result-nopic] { background: color-mix(in srgb, var(--muted, #777) 14%, transparent); }
/* a long name wraps (two lines at most), never pushing the price out */
[data-shop-result-name] {
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
[data-shop-result-price] { flex: 0 0 auto; white-space: nowrap; color: var(--muted, #777); font-size: .92em; }
/* a phone: the price under the name, so a long name keeps the width */
@media (max-width: 560px) {
  [data-shop-results-list] [data-shop-result-pic] { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
  [data-shop-results-list] [data-shop-result-pic] > :first-child { grid-row: span 2; }
  [data-shop-results-list] > li > :not([data-shop-result-pic]) { flex-direction: column; align-items: flex-start; gap: 2px; }
}
[data-shop-box] svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted, #777); pointer-events: none; }
[data-shop-q] {
  width: 100%; box-sizing: border-box; font: inherit; color: var(--heading, #111); background: var(--surface, var(--bg, #fff));
  border: 1px solid var(--line, #d6d2c8); border-radius: var(--r-btn, 4px); padding: 12px 14px 12px 40px;
}
[data-shop-q]:focus { outline: 2px solid var(--primary, #8a6a1f); outline-offset: 1px; }
[data-shop-chips] { display: flex; flex-wrap: wrap; gap: 8px; }
[data-shop-chip], [data-shop-more] {
  display: inline-block; font: inherit; font-size: .9em; cursor: pointer; text-decoration: none; color: var(--ink, #222);
  background: none; border: 1px solid var(--line, #d6d2c8); border-radius: 999px; padding: 6px 13px;
}
[data-shop-chip]:hover, [data-shop-more]:hover, [data-shop-chip][aria-pressed="true"] { border-color: var(--primary, #8a6a1f); color: var(--primary, #8a6a1f); }
/* A collection page's sort (2026-11-03): one select at the end of the bar. */
[data-shop-sort] {
  margin-left: auto; font: inherit; font-size: .9em; color: var(--ink, #222); background: var(--surface, var(--bg, #fff));
  border: 1px solid var(--line, #d6d2c8); border-radius: var(--r-btn, 4px); padding: 8px 12px; min-width: 12em; max-width: 100%;
}
/* The bar's sort stands as tall as the box beside it; the chips keep their own height. */
[data-shop-bar] > [data-shop-chips] { align-self: center; }
[data-shop-sort]:focus { outline: 2px solid var(--primary, #8a6a1f); outline-offset: 1px; }
[data-shop-empty] { margin: 14px 0 0; color: var(--muted, #777); }
[data-shop-empty][hidden], [data-shop-results][hidden], [data-block][hidden], [data-block="products"] > li[hidden] { display: none; }

/* ---------- THE SHOP PAGE AS A SHOP FRONT (2026-11-04) ----------
   Its bands carry `data-shop-band` (facts, ranges, picks, products, why, delivery, close) and its header holds the box
   (`data-shop-head`); everything below is scoped to those, in the theme's own variables. An attribute is doubled where a
   theme rule must be beaten. */
/* THE HEADER'S SEARCH sits where the hero's button would (Tomek 2026-11-04: "if the text is centered, so is the search
   bar"): the box and the range chips are laid out INLINE, so they follow the hero's own text alignment, whatever the
   hero layout, the theme's alignment or the screen size sets it to. Only the typed words stay left-aligned. */
[data-shop-head][data-shop-head] { margin-top: 1.4em; max-width: none; }
[data-shop-head] [data-shop-bar] { display: block; }
[data-shop-head] [data-shop-box] { display: inline-block; vertical-align: top; width: min(100%, 520px); max-width: none; }
[data-shop-head] [data-shop-q] { text-align: left; }
[data-shop-head] [data-shop-chips] { display: block; margin-top: 12px; }
[data-shop-head][data-shop-head] a[data-shop-chip][data-shop-chip] { margin: 0 4px 8px; color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
[data-shop-head][data-shop-head] a[data-shop-chip][data-shop-chip]:hover { color: inherit; border-color: currentColor; }
/* the buying facts: one row of short cells */
section[data-shop-band="facts"] ul[data-block="links"] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; }
section[data-shop-band="facts"] ul[data-block="links"] > li { margin: 0; color: var(--ink, #222); font-weight: 600; font-size: .95em; }
/* the range tiles: the count and price under the name. On a computer they follow every card band's rule, at most three
   across (Tomek, 2026-11-09: six in a row looked squashed); below that, short tiles fit as many as the width takes. */
@media (max-width: 899.98px) {
  section[data-shop-band="ranges"][data-section-type] ul[data-block="cards"][data-block] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); grid-auto-flow: row; }
}
section[data-shop-band="ranges"] ul[data-block="cards"] > li { display: flex; flex-direction: column; }
section[data-shop-band="ranges"] ul[data-block="cards"] > li > img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
section[data-shop-band="ranges"] ul[data-block="cards"] > li > h3 { order: 1; }
section[data-shop-band="ranges"] ul[data-block="cards"] > li > p[data-field="tag"] { order: 2; background: none; padding: 0; font-weight: 600; color: var(--muted, #777); }
section[data-shop-band="ranges"] ul[data-block="cards"] > li > :not(img):not(h3):not([data-field="tag"]) { order: 3; }
/* every product: the filters and the sort above the grid, "Show N more" under it */
[data-shop-tools] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 1em; }
[data-shop-filter] { display: flex; flex-wrap: wrap; gap: 8px; }
[data-shop-band="products"] [data-shop-more] { display: block; margin: 24px auto 0; }
[data-shop-more][hidden] { display: none; }
/* delivery and returns as questions that open */
[data-shop-qa] { border-bottom: 1px solid var(--line, #d6d2c8); padding: 12px 0; }
[data-shop-qa] > summary { cursor: pointer; font-weight: 600; color: var(--heading, #111); }
[data-shop-qa] > :not(summary) { margin: .6em 0 0; }
/* the basket and the main button, pinned at the bottom on a phone only */
[data-shop-dock] { display: none; }
@media (max-width: 700px) {
  [data-shop-head] [data-shop-chips] { display: flex; }
  [data-shop-head] [data-shop-chips], [data-shop-filter] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  [data-shop-head] [data-shop-chip], [data-shop-filter] [data-shop-chip] { flex: 0 0 auto; white-space: nowrap; }
  section[data-shop-band="facts"] ul[data-block="links"] { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  section[data-shop-band="facts"] ul[data-block="links"] > li { flex: 0 0 auto; white-space: nowrap; }
  section[data-shop-band="ranges"][data-section-type] ul[data-block="cards"][data-block],
  section[data-shop-band="picks"][data-section-type] ul[data-block="products"][data-block] {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
  }
  section[data-shop-band="ranges"] ul[data-block="cards"] > li, section[data-shop-band="picks"] ul[data-block="products"] > li { scroll-snap-align: start; }
  [data-shop-dock] {
    display: flex; gap: 10px; position: sticky; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg, #fff); border-top: 1px solid var(--line, #d6d2c8);
  }
  [data-shop-dock] > * { flex: 1 1 0; text-align: center; }
  [data-shop-dock-basket] { display: inline-block; padding: 10px 12px; border: 1px solid var(--line, #d6d2c8); border-radius: var(--r-btn, 4px); color: var(--heading, #111); text-decoration: none; font-weight: 600; }
}