/* ========== Peruslayout ========== */
.misu-haku{ border:0; }

/* Suodattimet */
.misu-controls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:end;
  margin-bottom:16px;
}
.misu-controls label{ display:flex; flex-direction:column; gap:6px; }
.misu-select{
  width:100%; height:42px; padding:10px 12px;
  border:1px solid #cfd6df; border-radius:6px; background:#fff; color:#0f172a;
}

/* Toiminnot */
.misu-actions{
  grid-column:1 / -1; display:flex; justify-content:center; align-items:center;
  gap:14px; flex-wrap:wrap; margin-top:6px;
}
.misu-btn{
  appearance:none; border-radius:999px; padding:10px 20px; height:42px;
  line-height:22px; font-size:14px; font-weight:700; cursor:pointer; border:1px solid;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.misu-btn.misu-clear{ background:#eef2f7; border-color:#9aa5b1; color:#0f172a; }
.misu-btn.misu-clear:hover{ background:#e2e8f0; border-color:#6b7280; }
.misu-btn.misu-submit{ background:#0b57d0; border-color:#0b57d0; color:#fff; }
.misu-btn.misu-submit:hover{ background:#0a4cc0; border-color:#0a4cc0; }
.misu-btn:disabled{ opacity:.6; cursor:not-allowed; }

@media (max-width:900px){ .misu-controls{ grid-template-columns:1fr; } }

/* ========== Tulokset ========== */
.misu-results .misu-meta{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 16px;
}
.misu-results .misu-count{ font-weight:600; }
.misu-results .misu-meta-right{ display:flex; gap:12px; flex-wrap:wrap; }
.misu-results .misu-inline{ display:flex; align-items:center; gap:6px; }
.misu-results .misu-meta-right select{ height:32px; max-width:200px; }
@media (max-width:680px){
  .misu-results .misu-meta{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* Grid */
.misu-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:1024px){ .misu-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .misu-grid{ grid-template-columns:1fr; } }

/* ========== Kortti ========== */
.misu-card{
  display:block; position:relative;
  background:#fff; border:1px solid #e5e5e5; border-radius:10px; padding:12px;
  color:inherit; text-decoration:none;
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
  /* jätetään alareunaan tilaa hinnalle joka on pinni-positiossa */
  padding-bottom:64px;
}
.misu-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); border-color:#d7dde6; }
.misu-card img{ width:100%; height:auto; display:block; border-radius:8px; object-fit:cover; }
.misu-card h3{ font-size:16px; line-height:1.25; margin:10px 0; min-height:42px; }

/* ========== Hinta: pin oikea alanurkka ========== */
/* Käytetään samaa sääntöä sekä .misu-price-html (price_html) että .misu-prices fallbackille */
.misu-price-html,
.misu-prices{
  position:absolute; right:12px; bottom:12px;
  display:flex; align-items:baseline; gap:10px;
  background:#ffffff; border:1px solid #dbe2ea; border-radius:12px;
  padding:6px 10px; box-shadow:0 2px 10px rgba(0,0,0,.05);
}

/* Hover-korostus */
.misu-card:hover .misu-price-html,
.misu-card:hover .misu-prices{
  border-color:#98b7ff; box-shadow:0 4px 16px rgba(0,0,0,.08);
}

/* Vanha normaali hinta (yliviivaus) */
.misu-price-html del,
.misu-prices .misu-price-regular{
  font-size:13px; color:#64748b; text-decoration:line-through; opacity:.9;
}

/* Alennettu hinta – korostus */
.misu-price-html ins,
.misu-prices .misu-price-sale{
  font-size:22px; font-weight:800; color:#0b57d0; text-decoration:none; line-height:1;
}
.misu-card:hover .misu-price-html ins,
.misu-card:hover .misu-prices .misu-price-sale{
  color:#e55300; transform:translateZ(0); /* pieni “snap” ilman layout-muutosta */
}

/* Jos tuote EI ole alessa ja WooCommerce tulostaa vain yhden summan .price:n sisään */
.misu-price-html .price > .woocommerce-Price-amount{
  font-size:20px; font-weight:800; color:#111827; white-space:nowrap;
}

/* Yleinen: pidä rahasummat yhdellä rivillä */
.misu-price-html .woocommerce-Price-amount{ white-space:nowrap; }

/* ========== Sivutus (kompakti pilleri) ========== */
.misu-pager{
  display:flex; justify-content:center; align-items:center;
  gap:10px; margin:18px auto 10px; max-width:480px; padding:6px 8px;
}
.misu-page{
  appearance:none; border:1px solid #b8c2d1; background:#eef2f7; color:#0f172a;
  padding:6px 12px; height:34px; line-height:20px; border-radius:999px;
  font-size:14px; font-weight:700; cursor:pointer;
  transition:background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.misu-page.is-nav{ padding:6px 14px; }
.misu-page:hover:not(.disabled):not(.active){ background:#e2e8f0; border-color:#94a3b8; }
.misu-page.active{ background:#0b57d0; border-color:#0b57d0; color:#fff; box-shadow:0 0 0 2px rgba(11,87,208,.22); }
.misu-page.disabled{ background:#f1f5f9; border-color:#d1d7df; color:#7a8087; cursor:not-allowed; }
.misu-ellipsis{ color:#475569; font-weight:700; padding:6px 4px; line-height:20px; }

/* === TYHJENNÄ-nappi selkeäksi (outlined) === */
.misu-btn.misu-clear{
  background:#ffffff !important;
  border-color:#c5ccd6 !important;
  color:#0f172a !important;
}
.misu-btn.misu-clear:hover{
  background:#f7faff !important;
  border-color:#0b57d0 !important;
  color:#0b57d0 !important;
}
.misu-btn.misu-clear:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(11,87,208,.25);
}

/* === Hinta oikeaan alanurkkaan – ilman laatikkoa === */
.misu-price-html,
.misu-prices{
  position:absolute; right:12px; bottom:12px;
  display:flex; align-items:baseline; gap:8px;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0;
  text-align:right;
}

/* Jätä korttiin hieman tilaa hinnalle */
.misu-card{ padding-bottom:56px; }

/* Vanha hinta */
.misu-price-html del,
.misu-prices .misu-price-regular{
  font-size:14px;
  color:#64748b;
  text-decoration:line-through;
  opacity:.9;
}

/* Alennettu hinta – isompi ja paksumpi */
.misu-price-html ins,
.misu-prices .misu-price-sale{
  font-size:26px;
  font-weight:900;
  color:#0b57d0;
  text-decoration:none;
  line-height:1;
}

/* Hover-korostus vain tekstivärillä */
.misu-card:hover .misu-price-html ins,
.misu-card:hover .misu-prices .misu-price-sale{
  color:#e55300;
}

/* Jos ei ole alennusta ja WooCommerce tulostaa vain yhden summan */
.misu-price-html .price > .woocommerce-Price-amount{
  font-size:24px;
  font-weight:900;
  color:#111827;
  white-space:nowrap;
}

/* --- Alennettu hinta: todella paksu & hieman suurempi --- */
.misu-price-html ins,
.misu-prices .misu-price-sale,
.misu-price-html .price > .woocommerce-Price-amount{
  font-size: 28px;
  font-weight: 900;                     /* maksimi-paksuus */
  letter-spacing: -0.01em;
  line-height: 1;
  font-family: var(--misu-price-font, system-ui, -apple-system, "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif);
}

/* Vanha hinta hillitymmäksi */
.misu-price-html del,
.misu-prices .misu-price-regular{
  font-size: 14px;
  color:#64748b;
  text-decoration: line-through;
  opacity: .9;
}

/* Hover: pelkkä värikorostus */
.misu-card:hover .misu-price-html ins,
.misu-card:hover .misu-prices .misu-price-sale{
  color:#e55300;
}

/* === Misu: sivutus – pilleri-tyyli (palautus) === */
.misu-results .misu-pager{
  display:flex; justify-content:center; align-items:center;
  gap:10px; margin:18px auto 10px;
}

.misu-results .misu-pager .misu-page{
  appearance:none;
  border:1px solid #d6deea !important;
  background:#f3f6fb !important;           /* vaalea “chip” */
  color:#0f172a !important;
  padding:6px 14px;
  height:34px; line-height:20px;
  border-radius:999px;                      /* pilleri */
  font-size:14px; font-weight:700;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.misu-results .misu-pager .misu-page.is-nav{
  padding:6px 16px;                         /* Edellinen/Seuraava hieman leveämpi */
}

.misu-results .misu-pager .misu-page:hover:not(.active):not(.disabled){
  background:#e8eef8 !important;
  border-color:#b8c6dc !important;
  color:#0b57d0 !important;
}

.misu-results .misu-pager .misu-page.active{
  background:#0b57d0 !important;           /* täytetty sininen */
  border-color:#0b57d0 !important;
  color:#ffffff !important;
  box-shadow:0 0 0 3px rgba(11,87,208,.18);
}

.misu-results .misu-pager .misu-page.disabled,
.misu-results .misu-pager .misu-page:disabled{
  background:#f5f7fb !important;
  border-color:#e2e7ef !important;
  color:#a3a9b3 !important;
  cursor:not-allowed;
  opacity:1 !important;
}

/* === Dropdownit: lataustila (disabled + spinner + shimmer) === */
.misu-controls label{ position:relative; }

/* visuaalinen lataus: sininen shimmer + progress-kursori */
.misu-select.is-loading,
.misu-select[aria-busy="true"]{
  cursor: progress;
  border-color:#0b57d0;
  background-image: linear-gradient(
    90deg,
    rgba(11,87,208,.06) 25%,
    rgba(11,87,208,.16) 50%,
    rgba(11,87,208,.06) 75%
  );
  background-size: 300% 100%;
  animation: misuShimmer 1.2s ease-in-out infinite;
  color:#0f172a;
  padding-right:36px; /* tilaa spinnerille */
}
@keyframes misuShimmer {
  0% { background-position: 100% 0; }
  100%{ background-position: 0 0; }
}

/* pieni pyörivä spinneri labelin oikeaan reunaan */
.misu-controls label.is-loading::after{
  content:'';
  position:absolute;
  right:10px; top:50%;
  width:14px; height:14px; margin-top:-7px;
  border:2px solid #9fb3d1; border-top-color:#0b57d0;
  border-radius:50%;
  animation: misuSpin .8s linear infinite;
  pointer-events:none;
}
@keyframes misuSpin { to { transform: rotate(360deg); } }

/* disabled-tila luettavammaksi */
.misu-select:disabled{
  background-color:#f5f7fb;
  color:#6b7280;
  border-color:#d1d7df;
  cursor:not-allowed;
}

/* Otsikkotekstit hakukenttien yläpuolelle lihavoiduksi */
.misu-controls label > span{
  font-weight: 700;
  color:#0f172a; /* (valinnainen, yhtenäinen sävy) */
}




/* --- Tuotehaun "laatikko" taustalle --- */
.misu-haku{
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid #e6edf6;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(16,24,40,.06);
  padding: clamp(14px, 2vw, 28px);
}

/* Hento jakoviiva: suodattimet vs. tulokset */
.misu-haku .misu-controls{
  padding-bottom: 10px;
  border-bottom: 1px solid #e9eef6;
  margin-bottom: 14px;
}

/* Pieni korostus kun kenttiin tulee fokus (näkyy hienovaraisesti) */
.misu-haku:focus-within{
  box-shadow:
    0 12px 36px rgba(11,87,208,.10),
    0 0 0 2px rgba(11,87,208,.06) inset;
}

/* Mobiilissa tiiviimpi */
@media (max-width: 680px){
  .misu-haku{ border-radius: 12px; padding: 14px; }
}