/* =====================================================================
   bm-company · panel pretrage (M2) – X1 §10.3–10.5, Hyper H1 §7
   Računar: panel ispod reda sa poljem, bez pokreta (samo opacity/visibility), tamni sloj .5 s; proizvodi 5/4 kolone + desno 350 px.
   Mobitel: ispod headera do dna ekrana (polje u headeru), lista sa sličicom 64 px; bez polja u headeru panel je preko cijelog ekrana.
   Header (z 95 dok je pretraga otvorena) i forma su od agenta HEADER (header.css); ovdje samo stanje „otvoreno“ i spinner.
   ===================================================================== */

/* ---------- sloj ---------- */
.bmc-sp{position:fixed;left:0;right:0;top:0;bottom:0;z-index:96;display:flex;flex-direction:column;background:rgb(var(--color-background));opacity:0;visibility:hidden}
.bmc-sp.is-open{opacity:1;visibility:visible}
.bmc-sp.is-hmode{top:var(--bmc-sp-top,0px);border-top:1px solid rgb(var(--color-border))}
.bmc-sp.is-hmode .bmc-sp__bar{display:none}
.bmc-sp__body{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html[data-bmc-layer="search-panel"] .bmc-overlay{transition:opacity .5s cubic-bezier(.7,0,.2,1),visibility 0s}

/* forma u headeru dok je panel otvoren: bijela sa prstenom i kad je fokus u panelu (Hyper) */
html.bmc-search-open .bmc-search{background:rgb(var(--color-background));box-shadow:0 0 0 1px rgb(var(--color-foreground))}
.bmc-search__spin,.bmc-sp__form .bmc-search__spin{position:absolute;right:1.8rem;top:50%;width:1.6rem;height:1.6rem;margin-top:-.8rem;border:2px solid rgb(var(--color-foreground));border-right-color:transparent;border-radius:50%;opacity:0;visibility:hidden;pointer-events:none}
.bmc-search.is-loading>.bmc-search__spin,.bmc-sp__form.is-loading>.bmc-search__spin{opacity:1;visibility:visible;animation:bmc-spin .7s linear infinite}
.bmc-search.is-loading [data-bmc-search-clear],.bmc-sp__form.is-loading [data-bmc-search-clear]{visibility:hidden}
.bmc-search.is-loading [type="submit"],.bmc-sp__form.is-loading [type="submit"]{opacity:0}

/* ---------- traka sa poljem (samo kad header nema vidljivo polje) ---------- */
.bmc-sp__bar{display:flex;align-items:center;gap:1.2rem;flex:none;padding:1.2rem var(--page-padding);border-bottom:1px solid rgb(var(--color-border))}
.bmc-sp__form{position:relative;flex:1 1 auto;min-width:0;height:var(--buttons-height);border-radius:var(--inputs-radius);background:rgb(var(--color-background));box-shadow:0 0 0 1px rgb(var(--color-foreground))}
.bmc-sp__input{width:100%;height:100%;padding:0 6.4rem 0 2rem;border:0;border-radius:inherit;background:transparent;font-size:1.6rem;color:rgb(var(--color-foreground));appearance:none;-webkit-appearance:none}
.bmc-sp__input::placeholder{color:rgb(var(--color-subtext));opacity:1}
.bmc-sp__input::-webkit-search-cancel-button,.bmc-sp__input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.bmc-sp__input:focus{outline:0}
.bmc-sp__submit{position:absolute;right:.4rem;top:50%;display:grid;place-content:center;width:4rem;height:4rem;margin-top:-2rem;padding:0;border:0;background:none;color:rgb(var(--color-foreground));transition:opacity .2s}
.bmc-sp__clear{position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);padding:.4rem;border:0;background:none;font-size:1.2rem;font-weight:700;color:rgb(var(--color-foreground))}
.bmc-sp__clear:not([hidden])~.bmc-sp__submit{opacity:0;pointer-events:none}
.bmc-sp__x{display:grid;place-content:center;flex:none;width:4rem;height:4rem;padding:0;border:0;background:none;color:rgb(var(--color-foreground))}

/* ---------- raspored ---------- */
.bmc-sp__grid{display:flex;flex-direction:column}
.bmc-sp__main{padding:2rem 0 3.2rem}
.bmc-sp__aside{order:-1;padding-top:2rem}
.bmc-sp__block+.bmc-sp__block{margin-top:2.4rem}
.bmc-sp__title{margin:0 0 1.6rem;font-family:var(--font-heading);font-size:1.8rem;font-weight:600;line-height:2.6rem;color:rgb(var(--color-text-heading))}
.bmc-sp__total{font-weight:600}
.bmc-sp__label{margin:0 0 1.2rem;font-family:var(--font-body);font-size:1.6rem;font-weight:700;line-height:2.6rem;color:rgb(var(--color-text-heading))}
.bmc-sp__intro{margin-bottom:2.4rem;font-size:1.4rem;line-height:2rem;color:rgb(var(--color-subtext))}
.bmc-sp__intro p{margin:0}
.bmc-sp__note{margin:-.8rem 0 1.6rem;font-size:1.4rem;color:rgb(var(--color-subtext))}
.bmc-sp__error{margin:0;font-size:1.5rem;color:rgb(var(--color-subtext))}
.bmc-sp__none p{max-width:56rem;font-size:1.5rem;color:rgb(var(--color-subtext))}
.bmc-sp__help{color:rgb(var(--color-foreground));text-decoration:underline;text-underline-offset:.3rem}

/* ---------- liste desno: prijedlozi i kategorije ---------- */
.bmc-sp__list{display:flex;flex-direction:column;gap:.8rem;margin:0;padding:0;list-style:none}
.bmc-sp__sug,.bmc-sp__cat{display:inline-flex;align-items:center;gap:.8rem;font-size:1.5rem;line-height:2.4rem;color:rgb(var(--color-subtext))}
.bmc-sp__sug .icon{--icon-size:1.6rem;flex:none}
.bmc-sp__sug mark,.bmc-sp__name mark{background:none;color:inherit;font-weight:600}
.bmc-sp__sug mark{color:rgb(var(--color-foreground))}
@media (hover:hover){
	.bmc-sp__sug:hover,.bmc-sp__cat:hover{color:rgb(var(--color-foreground))}
	.bmc-sp__cat:hover>span{text-decoration:underline;text-underline-offset:.3rem}
}
.bmc-sp__count{color:rgb(var(--color-subtext))}
.bmc-sp__cat-img{display:none}

/* ---------- kartice: mobitel = lista sa sličicom 64 px ---------- */
.bmc-sp__cards{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem}
.bmc-sp__card{position:relative;display:grid;grid-template-columns:6.4rem minmax(0,1fr);align-items:start;gap:1.2rem;color:rgb(var(--color-foreground))}
.bmc-sp__card:hover{color:rgb(var(--color-foreground))}
.bmc-sp__media{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:.6rem;overflow:hidden;background:rgb(var(--color-secondary-background))}
.bmc-sp__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform var(--animation-long)}
.bmc-sp__media .badges{display:none}
.bmc-sp__info{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.bmc-sp__hit{font-size:1.2rem;font-weight:700;line-height:1.6rem;color:rgb(var(--color-primary))}
.bmc-sp__name{font-family:var(--font-heading);font-size:1.4rem;font-weight:500;line-height:2rem;color:rgb(var(--color-text-heading));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bmc-sp__sku{font-size:1.3rem;line-height:2rem;color:rgb(var(--color-subtext))}
.bmc-sp__price{font-size:1.5rem;line-height:2.2rem}
.bmc-sp__price del{font-size:1.4rem}
.bmc-sp__price .woocommerce-price-suffix,.bmc-sp__price small{font-size:1.3rem;font-weight:400;color:rgb(var(--color-subtext))}
@media (hover:hover){.bmc-sp__card:hover .bmc-sp__media img{transform:scale(1.03)}.bmc-sp__card:hover .bmc-sp__name{text-decoration:underline;text-underline-offset:.3rem}}

/* kostur dok stižu „Najprodavanije“ */
.bmc-sp__card--skel .bmc-sp__media,.bmc-sp__skl{background:linear-gradient(90deg,rgb(var(--color-secondary-background)) 0%,#efefef 50%,rgb(var(--color-secondary-background)) 100%);background-size:200% 100%;animation:bmc-sp-shimmer 1.2s linear infinite}
.bmc-sp__skl{display:block;height:1.4rem;border-radius:.4rem;margin-top:.6rem}
.bmc-sp__skl--s{width:50%}
@keyframes bmc-sp-shimmer{to{background-position:-200% 0}}

/* dugmad ispod liste */
.bmc-sp__actions{display:flex;flex-direction:column;gap:1.2rem;margin-top:2.4rem}
.bmc-sp__all{width:100%;gap:.8rem}
.bmc-sp__all .icon{--icon-size:1.8rem}
@media (hover:hover){.bmc-sp__all:hover .icon{transform:translateX(.3rem)}}

/* mobitel: popularne pretrage kao čipovi, kategorije u 2 kolone sa slikom */
@media (max-width:1024px){
	.bmc-sp__list--chips{flex-direction:row;flex-wrap:wrap;gap:.8rem}
	.bmc-sp__list--chips .bmc-sp__sug{min-height:3.8rem;padding:0 1.6rem;border-radius:var(--buttons-radius);background:rgb(var(--color-field));font-size:1.4rem;color:rgb(var(--color-foreground))}
	.bmc-sp__list--chips .icon{display:none}
	.bmc-sp__list--cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1.2rem}
	.bmc-sp__list--cats .bmc-sp__cat{display:flex;gap:1rem;font-size:1.4rem;line-height:1.8rem;color:rgb(var(--color-foreground))}
	.bmc-sp__cat-img{display:block;flex:none;width:4rem;height:4rem;border-radius:.6rem;object-fit:contain;background:rgb(var(--color-secondary-background))}
	/* „Najprodavanije“ u praznom stanju ide ispod kategorija */
	.bmc-sp.is-empty-state .bmc-sp__main{padding-top:2.4rem}
	.bmc-sp.is-empty-state .bmc-sp__intro{display:none}
}
@media (min-width:640px) and (max-width:1024px){
	.bmc-sp__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 2.4rem}
	.bmc-sp__actions{flex-direction:row}
	.bmc-sp__actions>*{flex:1 1 0}
}

/* ---------- računar (≥1025): Hyper panel ---------- */
@media (min-width:1025px){
	.bmc-sp{bottom:auto;max-height:calc(100vh - var(--bmc-sp-top,0px));max-height:calc(100dvh - var(--bmc-sp-top,0px))}
	.bmc-sp__bar,.bmc-sp__close-m{display:none}
	.bmc-sp__grid{display:grid;grid-template-columns:minmax(0,1fr) 35rem}
	.bmc-sp__main{padding:2rem 5rem 4rem 0}
	.bmc-sp__aside{order:0;padding:2rem 0 4rem 2.4rem;border-left:1px solid rgb(var(--color-border))}
	.bmc-sp__title{font-size:2.2rem;line-height:3.2rem;margin-bottom:2rem}
	.bmc-sp__cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:3rem}
	.bmc-sp__card{display:flex;flex-direction:column;align-items:stretch;gap:0}
	.bmc-sp__media{border-radius:1rem}
	.bmc-sp__media .badges{display:flex}
	.bmc-sp__info{gap:.4rem;padding-top:1.2rem}
	.bmc-sp__name{font-size:1.5rem;line-height:2.2rem}
	.bmc-sp__actions{margin-top:3.2rem;flex-direction:row}
	.bmc-sp__all{width:auto}
	.bmc-sp__none .bmc-sp__title{margin-bottom:.8rem}
	/* prazno stanje: 17 glavnih u 2 kolone, da panel ostane nizak kao kod Hypera i da se ispod vidi tamni sloj (QA M2) */
	.bmc-sp__list--cats,.bmc-sp__list--chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 2rem}
	.bmc-sp__list--cats .bmc-sp__cat{font-size:1.4rem;line-height:2rem}
}
@media (min-width:1280px){.bmc-sp__cards{grid-template-columns:repeat(5,minmax(0,1fr))}}