/* Převodník barev ve vzhledu Art Scale Kit (colors.artscale.eu, v iframe na artscale.eu).
   Přebarvuje proměnné a pár prvků — rozvržení zůstává ze style.css.
   Review grafik + UX 22. 10. 2026: zelená ASK, písmo Jost a hranatá tlačítka jako šablona Jupiter,
   bez krabice v krabici, mobilní nabídky a CTA uvnitř rámečku (fixed/sticky v iframe nefunguje). */

@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/jost-latin-ext.7f44f6fd229b.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/jost-latin.928f4210aa48.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root, html[data-theme="light"],
/* style.css má `:root:not([data-theme="dark"]) .kit-paints {--accent-dark:#9a5600}` (specificita 0,3,0) → ještě vyšší */
:root:not([data-theme="dark"]) body.ask-colors .pc,
:root:not([data-theme="dark"]) body.ask-colors .kit-paints {
  /* style.css přepisuje --accent-dark uvnitř .pc/.kit-paints na hnědou CM → přebít i tam */
  --ink: #2a2f2a;
  --ink-deep: #1b1f1b;
  --ink-soft: #485048;
  --muted: #5c615c;
  --accent: #6cb92b;
  --accent-dark: #3f7613;      /* text/odkazy: kontrast 5,5:1 na bílé */
  --accent-soft: #eef7e4;
  --brand-900: #1b1f1b;
  --brand-800: #2a2f2a;
  --brand-700: #485048;
  --bg: #ffffff;
  --panel: #f7f9f5;
}

html:has(body.ask-frame) { overflow-y: hidden; }  /* rámeček nemá mít vlastní posuvník */
body.ask-colors { background: #fff; font-family: Jost, "Helvetica Neue", Arial, sans-serif; }
body.ask-colors main.container { padding-top: 8px; padding-bottom: 24px; min-height: 0; }

/* odkazy: názvy černé jako na artscale, zelené jen „akční“ odkazy */
body.ask-colors a { color: inherit; }
body.ask-colors .kp-t-name, body.ask-colors .pc-row-name, body.ask-colors .pc-set-name,
body.ask-colors .pc-group-head h3 a, body.ask-colors .pc-suggest li a { color: var(--ink); }
body.ask-colors .kit-codes a, body.ask-colors .kp-mine a, body.ask-colors .pc-hero-siblings a,
body.ask-colors .pc-note a, body.ask-colors .kp-miss a, body.ask-colors .pc-levels-legend a,
body.ask-colors .pc-std, body.ask-colors .link-button { color: var(--accent-dark); }

/* tlačítka jako Jupiter: zelená výplň, hranatá */
body.ask-colors .button, body.ask-colors button.button {
  background: #6cb92b; border-color: #6cb92b; color: #fff; font-weight: 600; border-radius: 0;
}
body.ask-colors .button:hover, body.ask-colors button.button:hover { background: #5ea224; border-color: #5ea224; }
body.ask-colors .button:disabled { background: #b9c4b3; border-color: #b9c4b3; }
body.ask-colors .kp-chip { border-radius: 0; }
body.ask-colors .kp-chip.is-on { background: #3f7613; border-color: #3f7613; color: #fff; }
body.ask-colors .pc-search input { border-radius: 0; }
body.ask-colors .pc-search input:focus { box-shadow: 0 0 0 4px rgba(108, 185, 43, 0.22); border-color: #6cb92b; }

/* sémantika: zelená = odpovídá, jantarová = porovnejte / pozor */
body.ask-colors .kp-dot.is-near { background: #e0a100; }
body.ask-colors .pc-warn { background: #fff6e0; border-left-color: #e0a100; }
body.ask-colors .kp-tile:has(input:checked) { border-color: #6cb92b; }
body.ask-colors .kp-tile:has(input:checked) .kp-tick { background: #6cb92b; border-color: #6cb92b; }
body.ask-colors .pc-stock.order { color: #8a6d00; }
body.ask-colors .kp-t-order { display: block; color: #8a6d00; font-size: 0.9rem; }

/* čitelnost pro starší modeláře: nic pod 14 px */
body.ask-colors .pc-stock, body.ask-colors .kp-t-for, body.ask-colors .kp-t-lv,
body.ask-colors .pc-level-badge, body.ask-colors .pc-level-note, body.ask-colors .kit-buy-note { font-size: 0.875rem; }
body.ask-colors .kp-t-for { white-space: normal; overflow: visible; text-overflow: clip; }
/* vzorky v „nekoupíte“ kulaté, ať nevypadají jako zaškrtávátka */
body.ask-colors .kp-miss i { border-radius: 50%; }

/* v rámečku na detailu produktu: bez okrajů stránky */
body.ask-frame main.container { padding: 0 0 8px; max-width: none; }
body.ask-frame .kit-paints { margin: 0; }
body.ask-frame .kit-paints h2 { font-size: 1.4rem; margin-top: 0; }
body.ask-frame .breadcrumb { display: none; }
body.ask-frame .kit-more > summary { margin: 12px 0 4px; display: inline-block; cursor: pointer; }

/* stránka převodníku na artscale: Shoptet už má H1 i drobečky */
body.ask-colors:not(.ask-frame) main.container { padding: 0 0 24px; max-width: none; }
body.ask-colors .pc { max-width: none; }
body.ask-colors .pc > .breadcrumb { display: none; }
body.ask-colors .pc-intro > h1 { display: none; }

/* mobil: position fixed/sticky se v iframe vztahuje k celému vysokému rámečku → vše „ve toku“ */
@media (max-width: 640px) {
  body.ask-frame .kp-brands { flex-wrap: wrap; overflow: visible; margin: 0 0 14px; padding: 0; position: relative; }
  body.ask-frame .kp-more { position: static; }
  body.ask-frame .kp-more ul { position: absolute; left: 0; right: 0; top: calc(100% + 6px); bottom: auto; min-width: 0; z-index: 20; }
  body.ask-frame .kp-sum .kp-cta { display: block; width: 100%; margin-top: 10px; }
  body.ask-frame .kp-bar { position: static; margin: 16px 0 0; padding: 12px 0; box-shadow: none; }
  body.ask-frame .kit-codes a:not(.is-buy), body.ask-frame .kit-codes small, body.ask-frame .kit-codes .sep { display: none; }
}

.ask-cart-msg { position: sticky; top: 0; z-index: 30; }

/* ===== Barevné schéma artscale.eu 1:1 (změřeno ze živého webu 22. 10., session ask-hp.js) =====
   zelená #6CB92B (tlačítka, aktivní prvky), text zelených odkazů #3F7A14, nadpisy #252729,
   tělo #555658, popisky #5d666c, skladem #009901 14px/700, linky #e1e1e2, zelený box #f5fbf0/#cfe8bb */
:root:not([data-theme="dark"]) body.ask-colors .pc,
:root:not([data-theme="dark"]) body.ask-colors .kit-paints,
body.ask-colors {
  --ink: #252729;
  --ink-deep: #1b1f23;
  --ink-soft: #555658;
  --muted: #5d666c;
  --accent: #6cb92b;
  --accent-dark: #3f7a14;
  --accent-soft: #f5fbf0;
  --border: #e1e1e2;
  --panel: #f7f8f9;
  --pc-ok-ink: #009901;
}
body.ask-colors { color: #555658; font-size: 16px; line-height: 1.5; }
body.ask-colors h1, body.ask-colors h2, body.ask-colors h3 { color: #252729; font-weight: 600; }
body.ask-frame .kit-paints h2, body.ask-colors .pc-answer h2, body.ask-colors .pc-how h2 { font-size: 28px; line-height: 1.25; margin: 0 0 20px; }
body.ask-colors .kp-group h3, body.ask-colors .kp-group summary, body.ask-colors .pc-sets-title { color: #252729; font-weight: 600; }

/* tlačítka jako Shoptet Jupiter: zelená, verzálky, prostrkané, hranaté, hover beze změny odstínu */
body.ask-colors .button, body.ask-colors button.button {
  background: #6cb92b; border-color: #6cb92b; color: #fff; border-radius: 0; box-shadow: none;
  font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;
}
body.ask-colors .button:hover, body.ask-colors button.button:hover { background: #6cb92b; border-color: #6cb92b; filter: brightness(0.95); }
body.ask-colors .button.small { font-size: 12px; letter-spacing: 1.5px; padding: 8px 12px; }
body.ask-colors .link-button { text-transform: none; letter-spacing: 0; }

/* přepínače řad: hranaté, aktivní = zelená výplň (jako tlačítka), text tmavý → bílý */
body.ask-colors .kp-chip { border-radius: 0; border: 1px solid #e1e1e2; color: #252729; font-weight: 600; }
body.ask-colors .kp-chip:hover { border-color: #6cb92b; }
body.ask-colors .kp-chip.is-on { background: #6cb92b; border-color: #6cb92b; color: #fff; }

/* ceny a dostupnost jako karty artscale */
body.ask-colors .pc-price, body.ask-colors .kp-price { color: #252729; font-weight: 600; font-size: 18px; }
body.ask-colors .pc-stock { font-size: 14px; font-weight: 700; }
body.ask-colors .pc-stock.in { color: #009901; }

/* dlaždice a seznamy: linky #e1e1e2, naše boxy radius 10px jako #ask-fit / #ask-pubs */
body.ask-colors .pc-rows, body.ask-colors .kp-tile, body.ask-colors .pc-set { border-color: #e1e1e2; }
body.ask-colors .kp-tile { border-radius: 10px; }
body.ask-colors .kp-tile:has(input:checked) { background: #f5fbf0; border-color: #cfe8bb; }
body.ask-colors .kp-sum { background: #f5fbf0; border: 1px solid #cfe8bb; border-radius: 10px; }
body.ask-colors .pc-level.is-a .pc-level-badge, body.ask-colors .pc-level.is-b .pc-level-badge { background: #f5fbf0; color: #2f6f12; }

/* ===== Kolo 2 grafika (22. 10.): ne „cizí widget" ===== */
/* 1. bez karty v kartě — sekce otevřená jako Popis a Parametry nad ní */
body.ask-frame .kit-paints { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
@media (max-width: 640px) { body.ask-frame .kit-paints { padding: 0 10px; } }

/* 2. „Do košíku" v řádcích a u sad obrysové; plné zelené jen hlavní akce (Do košíku N barev) */
body.ask-colors .pc-row .pc-shop .button, body.ask-colors .pc-set-buy .button, body.ask-colors .kit-set-actions .button {
  background: #fff; color: #252729; border: 1px solid #6cb92b; border-radius: 0; filter: none;
}
body.ask-colors .pc-row .pc-shop .button:hover, body.ask-colors .pc-set-buy .button:hover,
body.ask-colors .kit-set-actions .button:hover { background: #6cb92b; color: #fff; }
body.ask-frame .kit-more > summary.button {
  display: block; list-style: none; text-align: center; background: #fff; color: #252729;
  border: 1px solid #e1e1e2; margin: 12px 0 16px;
}
body.ask-frame .kit-more > summary::-webkit-details-marker { display: none; }
body.ask-frame .kit-more[open] > summary { display: none; }
body.ask-colors .kit-set-actions { display: block; border-top: 1px solid #e1e1e2; margin: 8px 0 0; }
body.ask-colors .kit-set-actions form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0;
  border-bottom: 1px solid #e1e1e2; width: auto;
}
body.ask-colors .kit-set-label { flex: 1 1 220px; color: #555658; }
body.ask-colors .kit-set-label strong { color: #252729; }
body.ask-frame .kit-set-actions .button { width: auto; }

/* 3. nadpis jako sousední „Popis produktu" / „Parametry" */
body.ask-frame .kit-paints h2 { font-size: 32px; line-height: 1.2; margin: 0 0 24px; }
@media (max-width: 640px) { body.ask-frame .kit-paints h2 { font-size: 24px; margin-bottom: 16px; } }

/* 4. úroveň A (Odpovídá) plná, B (Stejná dobová / Běžný odstín) světlá */
body.ask-colors .pc-level.is-a .pc-level-badge { background: #3f7a14; color: #fff; box-shadow: none; }
body.ask-colors .pc-level.is-b .pc-level-badge { background: #f5fbf0; color: #3f7a14; box-shadow: inset 0 0 0 1px #cfe8bb; }

/* 5. kódy z návodu šedé, nakupovaný tmavý — zelená jen na akce */
body.ask-colors .kit-codes a { color: #5d666c; border-bottom-color: #e1e1e2; }
body.ask-colors .kit-codes a.is-buy { color: #252729; }

/* 6. převodník: jednotné tvary — hranaté čipy, boxy radius 10 */
body.ask-colors .pc-popular a, body.ask-colors .pc-ranges a, body.ask-colors .pc-chip { border-radius: 0; }
body.ask-colors .pc, body.ask-colors .kit-paints { --pc-radius: 10px; }
body.ask-colors .pc-more, body.ask-colors .pc-std-list, body.ask-colors .pc-rows { border-radius: 10px; }

/* 7. mobil: přepínače řad v mřížce 2 sloupců */
@media (max-width: 640px) {
  body.ask-frame .kp-brands { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.ask-frame .kp-chip { text-align: center; white-space: normal; }
}

/* detaily: bez posuvníku i na stránce převodníku, nic pod 14 px, ceny sad tmavé */
html:has(body.ask-colors) { overflow-y: hidden; }
body.ask-colors .kit-codes, body.ask-colors .kp-hint, body.ask-colors .pc-note,
body.ask-colors .kp-miss a, body.ask-colors .pc-row-kind { font-size: 0.875rem; }
body.ask-colors .pc-set-buy .pc-price, body.ask-colors .pc-set-buy strong { color: #252729; }