/* AuraSpa – headerin pikahaku. Sijoittelu tulee Bricksin elementti-id:stä (#brxe-otxhcu desktop, #brxe-hfldjo mobiili). */
.brxe-ash{width:100%}
.ash,.ash *{box-sizing:border-box}
.ash{position:relative;--a-action:#02aee3;--a-action-hover:#0198c7;--a-dark:#043a52;--a-text:#161616;--a-muted:#5d6b72;--a-line:#dddedf;--a-soft:#f1f7fa;font-family:Outfit,system-ui,sans-serif}
.ash__form{position:relative;margin:0}
.ash__field{position:relative}
.ash__sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ash__input{width:100%;height:42px;margin:0;border:1px solid var(--a-line);border-radius:6px;background:#fff;color:var(--a-text);font:300 16px/1 Outfit,system-ui,sans-serif;padding:0 84px 0 42px;outline:none;box-shadow:none;-webkit-appearance:none;appearance:none}
.ash__input::placeholder{color:#7d868b;opacity:1}
.ash__input::-webkit-search-cancel-button,.ash__input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.ash .ash__input:focus,.ash .ash__input:focus-visible{border-color:var(--a-action);box-shadow:0 0 0 3px rgba(2,174,227,.22);outline:none!important} /* sivuston globaali fokuskehys korvataan sinisellä varjolla */
.ash__mag{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);pointer-events:none;display:flex}
.ash svg{width:18px;height:18px;fill:none;stroke-width:2.2;stroke-linecap:round}
.ash__mag svg{stroke:var(--a-dark)}
.ash__clear{position:absolute;right:46px;top:50%;transform:translateY(-50%);width:26px;height:26px;padding:0;border:0;border-radius:50%;background:#eef1f3;color:#444;cursor:pointer;display:none;font-size:16px;line-height:26px;text-align:center}
.ash.has-q .ash__clear{display:block}
.ash:not(.has-q) .ash__input{padding-right:50px}
.ash__go{position:absolute;right:4px;top:4px;height:34px;width:38px;padding:0;border:0;border-radius:4px;background:var(--a-action);cursor:pointer;display:grid;place-items:center}
.ash__go:hover{background:var(--a-action-hover)}
.ash__go svg{stroke:#fff;stroke-width:2.4}
.ash__cancel{display:none}

.ash__panel{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:min(560px,calc(100vw - 32px));background:#fff;color:var(--a-text);border-radius:10px;box-shadow:0 18px 48px rgba(4,58,82,.2),0 2px 6px rgba(0,0,0,.08);z-index:1000;overflow:hidden;text-align:left}
.ash__panel[hidden]{display:none}
.ash__body{max-height:min(560px,70vh);overflow:auto;overscroll-behavior:contain;padding:8px 0}
.ash__h{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--a-muted);padding:10px 18px 6px;display:flex;justify-content:space-between}
.ash__chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 18px 10px}
.ash__chip{font:400 14px/1.3 Outfit,system-ui,sans-serif;border:1px solid var(--a-line);background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer;color:var(--a-text);text-decoration:none}
.ash__chip:hover{border-color:var(--a-action);color:var(--a-dark)}
.ash__chip small{color:var(--a-muted);margin-left:5px;font-size:12px}
.ash__list{list-style:none;margin:0;padding:0}
.ash__list li{margin:0;padding:0}
.ash__list a{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:8px 18px;text-decoration:none;color:inherit}
.ash__list a.act,.ash__list a:hover{background:var(--a-soft)}
.ash__img{width:52px;height:52px;object-fit:contain;border-radius:6px;background:#f6f7f8;display:block}
.ash__t{font-size:15px;line-height:1.3;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ash__m{display:block;font-size:13px;line-height:1.4;color:var(--a-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ash__sku{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#3c474d}
.ash__p{font-size:15px;font-weight:600;color:var(--a-dark);white-space:nowrap;text-align:right;display:flex;flex-direction:column;line-height:1.25}
.ash__p del{font-size:12px;font-weight:400;color:var(--a-muted)}
.ash__p .ash__sale{color:#c8102e}
.ash mark{background:rgba(2,174,227,.22);color:inherit;border-radius:2px;padding:0 1px}
.ash__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--a-line);padding:12px 18px;font-size:15px}
.ash__foot a{color:var(--a-dark);font-weight:600;text-decoration:none}
.ash__foot a:hover{color:var(--a-action)}
.ash__note{font-size:13px;color:var(--a-muted)}
.ash__empty{padding:18px;font-size:15px;line-height:1.5;color:var(--a-muted)}
.ash__empty b{color:var(--a-text)}
.ash__empty a{color:var(--a-dark);text-decoration:underline}

/* Tabletti ja mobiili: headerin toisella rivillä sama 10px reunaväli kuin vanhalla haulla */
@media (max-width:991px){
  .brxe-ash>.ash:not(.open){padding:0 10px}
}
/* Mobiili: avattu haku koko näytölle */
@media (max-width:767px){
  .ash__input{font-size:16px} /* 16px: iOS ei zoomaa */
  .ash.open{position:fixed;inset:0;z-index:100000;background:#fff;padding:10px 12px;display:flex;flex-direction:column;height:100dvh}
  .ash.open .ash__form{display:flex;align-items:center;gap:8px}
  .ash.open .ash__field{flex:1}
  .ash.open .ash__cancel{display:block;font:500 15px Outfit,system-ui,sans-serif;background:none;border:0;color:var(--a-dark);padding:8px 2px;cursor:pointer}
  .ash.open .ash__panel{position:static;min-width:0;box-shadow:none;border-radius:0;margin:6px -12px 0;flex:1;min-height:0;display:flex;flex-direction:column}
  .ash.open .ash__body{max-height:none;flex:1}
  .ash__list a{padding:10px 14px;grid-template-columns:48px 1fr auto;gap:10px}
  .ash__img{width:48px;height:48px}
  .ash__p{font-size:14px}
  .ash__h,.ash__chips{padding-left:14px;padding-right:14px}
  .ash__foot{padding:12px 14px}
  html.ash-lukko,html.ash-lukko body{overflow:hidden}
}