/* Bot Marley Pro Search — self-contained, theme-neutral. */
.bm-search { position: relative; max-width: 680px; margin: 0 auto; font-size: 15px; }
/* Full results widget: width from the option / shortcode width attr —
   always relative to the theme's own container, never the viewport.
   Side margins inset the content from the container edges. */
.bm-search--results { max-width: var(--bm-results-width, 680px); padding-inline: var(--bm-results-margin, 0px); box-sizing: border-box; }

/* One text size for the input AND the suggestion items, derived from the
   height option. Declared on the overlay too: the popup lives in <body>,
   outside the .bm-search cascade. */
.bm-search, .bm-search-overlay { --bm-search-font: clamp(12px, calc(var(--bm-search-height, 44px) * 0.36), 16px); }
.bm-search--bar { --bm-search-font: clamp(11px, calc(var(--bm-search-height, 44px) * 0.32), 14px); }

/*
 * The form is the visual field: white pill that encloses both the input and
 * the submit button. The input itself is chromeless — the !importants beat
 * theme input styling, which matters when the widget renders inside menus.
 */
.bm-search-form { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #d0d0d5; border-radius: var(--bm-search-radius, 10px); padding: 3px; min-height: var(--bm-search-height, 44px); box-sizing: border-box; }
.bm-search-form:focus-within { border-color: #1a7f5a; box-shadow: 0 0 0 3px rgba(26, 127, 90, 0.12); }
/* Text metrics derive from the height option (minus 3px form padding and
   1px border per side), with a proportional, clamped font. Fixed height and
   line-height — with !important — mean neither the text nor a theme's
   :focus styles can ever grow the box. */
.bm-search-input { flex: 1; min-width: 0; border: none !important; background: transparent !important; outline: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 14px !important; height: calc(var(--bm-search-height, 44px) - 8px) !important; min-height: 0 !important; line-height: calc(var(--bm-search-height, 44px) - 8px) !important; font-size: var(--bm-search-font, 16px) !important; }
.bm-search-submit { align-self: stretch; padding: 0 16px; border: none; border-radius: calc(var(--bm-search-radius, 10px) - 3px); background: var(--bm-search-color, #1a7f5a); color: #fff; cursor: pointer; display: inline-flex; align-items: center; }
.bm-search-submit:hover { opacity: 0.88; }

/* "powered by BigFive" under the bar — white on the popup backdrop,
   muted on a normal page; the Pro hide-credits switch removes it server-side. */
.bm-search-credit { margin: 6px 0 0; font-size: 11px; opacity: 0.8; text-align: center; }
.bm-search-credit a { color: #8e8e93; text-decoration: none; }
.bm-search-credit a:hover { text-decoration: underline; }
.bm-search-overlay .bm-search-credit a { color: #fff; }

/* Anchored 8px under the search box via an explicit top — with top:auto the
   absolute box would start below the credit line, far from the field. */
.bm-search-suggestions { position: absolute; z-index: 20; top: calc(var(--bm-search-height, 44px) + 8px); left: 0; right: 56px; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #e2e2e7; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); overflow: hidden; }
.bm-search-suggestions[hidden] { display: none !important; }
[dir="rtl"] .bm-search-suggestions { left: 56px; right: 0; }
.bm-search-suggestions li { margin: 0; padding: 0; list-style: none; }
.bm-search-suggestions li + li { border-top: 1px solid #ececf0; }
.bm-search-suggestions li a { display: block; padding: 9px 16px; color: #1d1d1f; text-decoration: none; font-size: var(--bm-search-font, 15px) !important; line-height: 1.4 !important; }
.bm-search-suggestions li:hover a, .bm-search-suggestions li.bm-active a { background: #f2f7f5; }
.bm-search-status { margin-top: 14px; color: #6e6e73; }
.bm-search-count { margin-top: 12px; color: #6e6e73; font-size: 13px; }

/* ---- Compact bar ---- */
.bm-search--bar { max-width: none; width: var(--bm-search-width, 220px); display: inline-block; margin: 0; vertical-align: middle; }
.bm-search--bar .bm-search-input { padding: 0 10px !important; }
.bm-search--bar .bm-search-submit { padding: 0 12px; }
.bm-search--bar .bm-search-suggestions { right: 0; width: max(100%, 260px); }
[dir="rtl"] .bm-search--bar .bm-search-suggestions { left: 0; }

/* ---- Icon trigger + popup overlay ---- */
.bm-search--icon { max-width: none; display: inline-block; margin: 0; vertical-align: middle; }
.bm-search-toggle { background: transparent; border: 0; padding: 6px; cursor: pointer; color: var(--bm-search-color, currentColor); display: inline-flex; align-items: center; }
.bm-search-toggle:hover { opacity: 0.7; }
/* No white box and no close button: the bar floats on the backdrop,
   clicking outside (or Esc) closes. */
.bm-search-overlay { position: fixed; inset: 0; z-index: 99998; background: rgba(0, 0, 0, 0.45); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; font-size: 15px; }
.bm-search-overlay[hidden] { display: none; }
.bm-search-overlay-box { width: min(680px, 92vw); }
.bm-search-overlay-box .bm-search-form { border-color: transparent; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.bm-search-overlay-box .bm-search-suggestions { position: static; top: auto; margin: 8px 0 0; width: auto; }

/* ---- Menu placement ---- */
/* Vertically centred against the other menu entries whatever the theme's
   menu model: align-self covers flex ULs, vertical-align covers inline
   ones, and inline-flex centres our own content either way. */
.bm-search-menu-item { display: inline-flex; align-items: center; align-self: center; vertical-align: middle; list-style: none; }

/* ---- Results: layouts ---- */
.bm-search-results { margin-top: 10px; }
.bm-search-results[data-layout] { display: grid; gap: 0 24px; align-items: start; }
.bm-search-results[data-layout="grid"] { gap: 16px; }
.bm-search-results[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.bm-search-results[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.bm-search-results[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.bm-search-results[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 782px) {
	.bm-search-results[data-cols="3"], .bm-search-results[data-cols="4"], .bm-search-results[data-cols="6"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.bm-search-results[data-layout] { grid-template-columns: 1fr; }
}

/* ---- Result cards ----
   The widget colour option (--bm-search-color, same as the search button)
   doubles as the accent: title colour, badge tint and card borders at 15%. */
.bm-search-result { padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--bm-search-color, #1a7f5a) 15%, transparent); }
.bm-search-result:last-child { border-bottom: none; }
.bm-search-result.bm-clickable { cursor: pointer; }
.bm-search-result-body { min-width: 0; }
.bm-search-result-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 8px; }
.bm-search-result-title { display: block; font-size: 17px; font-weight: 600; color: var(--bm-search-color, #1a7f5a); text-decoration: none; }
.bm-search-result-title:hover { text-decoration: underline; }
.bm-search-result-type { display: inline-block; padding: 1px 8px; border-radius: 9px; background: #f0f0f2; color: #6e6e73; font-size: 11px; }
.bm-search-result-term { padding: 1px 8px; border-radius: 9px; background: color-mix(in srgb, var(--bm-search-color, #1a7f5a) 15%, transparent); color: var(--bm-search-color, #1a7f5a); font-size: 11px; }
/* Categories stand out more than tags: 50% tint with white text. */
.bm-search-result-cat { background: color-mix(in srgb, var(--bm-search-color, #1a7f5a) 50%, transparent); color: #fff; }

/* Product rows: prices, availability and SKU each on their own line. */
.bm-search-result-price { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; }
.bm-search-result-price-old { color: #8e8e93; text-decoration: line-through; font-size: 13px; }
.bm-search-result-price-current { font-weight: 700; font-size: 15px; color: #1d1d1f; }
.bm-search-result-stock { margin-top: 4px; font-size: 12px; color: #2e7d32; }
.bm-search-result-stock.bm-stock-out { color: #b32d2e; }
.bm-search-result-sku { margin-top: 2px; font-size: 11px; color: #8e8e93; }
.bm-search-result-snippet { margin: 6px 0 0; color: #3a3a3c; line-height: 1.55; }
.bm-search-result-snippet mark { background: #fdf1c7; padding: 0 2px; border-radius: 3px; }
.bm-search-result-date { display: block; margin-top: 6px; color: #8e8e93; font-size: 12px; }

/* Rows layout: thumbnail beside the text. */
.bm-search-results[data-layout="rows"] .bm-search-result { display: flex; gap: 14px; }
.bm-search-results[data-layout="rows"] .bm-search-result-media { flex: 0 0 96px; }
.bm-search-results[data-layout="rows"] .bm-search-result-img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block; }

/* Grid layout: bordered card, image on top. */
.bm-search-results[data-layout="grid"] .bm-search-result { border: 1px solid color-mix(in srgb, var(--bm-search-color, #1a7f5a) 15%, transparent); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.bm-search-results[data-layout="grid"] .bm-search-result-media { margin-bottom: 6px; }
.bm-search-results[data-layout="grid"] .bm-search-result-img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; display: block; }
.bm-search-results[data-layout="grid"] .bm-search-result-title { font-size: 15px; }
.bm-search-results[data-layout="grid"] .bm-search-result-snippet { font-size: 13px; }