/* stena.ee/skidki (skidki app, templates/skidki). Built on the site's variables, so every colour scheme works. */
.sk-page { width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.sk-hero { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.sk-hero h1 { margin: 0; font-size: 28px; line-height: 1.2; }
.sk-hero h1 a { color: var(--strong); }
.sk-hero h1 a:hover { text-decoration: none; }
.sk-hero p { margin: 0; }
.sk-search { display: flex; gap: 8px; }
.sk-search .field { flex: 1 1 auto; min-width: 0; height: 48px; font-size: 17px; }
.sk-search .btn { height: 48px; padding: 0 20px; }
.sk-try { font-size: 15px; line-height: 1.9; }
.sk-try a { margin-right: 8px; white-space: nowrap; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.af-chips .chip small { opacity: .7; font-weight: 500; }
.sk-section { display: flex; flex-direction: column; gap: 10px; }
.sk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.sk-head h2 { margin: 6px 0 0; font-size: 20px; }
.sk-sort { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.sk-sort .chip { white-space: nowrap; }
.sk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; }
.sk-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; position: relative; }
.sk-card:hover { border-color: var(--brand); }
.sk-best { border: 2px solid #16a34a; }
.sk-flag { margin: 0; font-size: 13px; font-weight: 700; color: #fff; background: #16a34a; align-self: flex-start; padding: 2px 10px; border-radius: 8px; }
.sk-row { display: flex; gap: 12px; align-items: flex-start; }
.sk-img { flex: none; width: 92px; height: 92px; border-radius: 10px; background: #fff; position: relative; display: grid; place-items: center; overflow: hidden; }
.sk-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sk-pct { position: absolute; left: 0; top: 0; background: #dc2626; color: #fff; font-weight: 800; font-size: 14px; padding: 2px 7px; border-radius: 10px 0 10px 0; }
.sk-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.sk-main h3 { margin: 0; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.sk-main h3 a { color: var(--strong); }
.sk-main h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sk-card:hover h3 a { color: var(--brand); }
.sk-et { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.3; }
.sk-price { margin: 4px 0 0; font-size: 15px; }
.sk-price b { font-size: 24px; color: #dc2626; font-variant-numeric: tabular-nums; }
.sk-price s { color: var(--muted); margin-left: 6px; }
.sk-unit { margin: 0; font-size: 14px; color: var(--text); }
.sk-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.sk-meta > span { padding: 2px 8px; border-radius: 8px; background: var(--chip); }
.sk-meta > span.muted { background: none; padding: 2px 0; }
.sk-store { font-weight: 700; color: #fff; }
.sk-meta .sk-maxima { background: #d7182a; }
.sk-meta .sk-barbora { background: #e3007a; }
.sk-meta .sk-rimi { background: #c8102e; }
.sk-meta .sk-lidl { background: #0050aa; }
.sk-meta .sk-selver { background: #e2001a; }
.sk-meta .sk-apotheka, .sk-others .sk-apotheka { background: #00843d; }
.sk-meta .sk-benu, .sk-others .sk-benu { background: #0097a9; }
.sk-meta .sk-cardtag { background: #facc15; color: #111; font-weight: 600; }
.sk-empty, .sk-about { padding: 16px 20px; margin: 0; }
.sk-about p { margin: 0; font-size: 14px; }
.sk-more, .sk-pages { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 4px 0 0; }
.sk-nocard { font-size: 15px; }
.sk-head h2.sk-landing { width: 100%; font-size: 24px; }
.sk-popular { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; }
.sk-popular a { color: var(--link); }
.sk-switch { display: inline-flex; align-items: center; gap: 10px; color: var(--text); cursor: pointer; }
.sk-switch:hover { text-decoration: none; color: var(--strong); }
.sk-knob { flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--line); position: relative; transition: background .15s; }
.sk-knob::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.sk-switch.on .sk-knob { background: #16a34a; }
.sk-switch.on .sk-knob::after { left: 19px; }
.sk-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sk-mylist { white-space: nowrap; }
.sk-links { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-count { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 11px; background: #16a34a; color: #fff; font-size: 13px; line-height: 22px; text-align: center; }
.sk-count[hidden] { display: none; }
.sk-addq { margin: 0; }
.sk-back { margin: 0; font-size: 15px; }
.sk-shared { padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sk-verdict { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.sk-verdict h2 { margin: 0; font-size: 20px; }
.sk-shops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sk-shops li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--chip); font-size: 15px; }
.sk-shops li.sk-win { outline: 2px solid #16a34a; }
.sk-shops .sk-store, .sk-others .sk-store { padding: 2px 8px; border-radius: 8px; font-size: 13px; }
.sk-shops li > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.sk-shops .sk-store { flex: none; }
.sk-shops .sk-sum { flex: none; margin-left: auto; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-note { margin: 0; font-size: 14px; }
.sk-actions { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sk-item { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
.sk-item .sk-head h2::first-letter { text-transform: uppercase; }
.sk-remove { font-size: 14px; color: var(--muted); }
.sk-item .sk-list { grid-template-columns: minmax(0, 560px); }
.sk-others { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.sk-others a { color: var(--text); }
.sk-more-link { margin: 0; font-size: 15px; }
.sk-shops .sk-maxima, .sk-others .sk-maxima { background: #d7182a; }
.sk-shops .sk-barbora, .sk-others .sk-barbora { background: #e3007a; }
.sk-shops .sk-rimi, .sk-others .sk-rimi { background: #c8102e; }
.sk-shops .sk-lidl, .sk-others .sk-lidl { background: #0050aa; }
.sk-shops .sk-selver, .sk-others .sk-selver { background: #e2001a; }
.sk-up { color: #dc2626; font-weight: 700; }
.sk-down { color: #16a34a; font-weight: 700; }
.sk-table-wrap { padding: 0; overflow-x: auto; }
.sk-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sk-table th, .sk-table td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.sk-table thead th { font-size: 14px; color: var(--muted); }
.sk-table th small, .sk-table td small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.25; }
.sk-table td a { white-space: nowrap; font-weight: 700; color: var(--strong); font-variant-numeric: tabular-nums; }
.sk-table td.sk-min { background: rgba(22, 163, 74, .12); }
.sk-table td.sk-min a { color: #15803d; }
.sk-table tr.sk-partial { opacity: .55; }
@media (max-width: 600px) {
  .sk-table { font-size: 14px; }
  .sk-table th, .sk-table td { padding: 7px 6px; }
  .sk-table td small { display: none; }
  .sk-shops li { font-size: 14px; gap: 8px; padding: 8px; }
  .sk-shops .sk-store { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sk-compact { gap: 10px; padding: 12px 14px; }
  .sk-compact h1 { font-size: 19px; }
  .sk-compact .sk-intro, .sk-compact .sk-try { display: none; }
  .sk-compact .af-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sk-hero { padding: 16px; }
  .sk-hero h1 { font-size: 23px; }
  .sk-img { width: 76px; height: 76px; }
  .sk-price b { font-size: 22px; }
}