/* ===== Celkový wrapper ===== */

.cm-wrap {

  --accent: #d10000;

  --border: rgba(255,255,255,0.1);



  max-width: 1200px;

  margin: 2.5rem auto;

  padding: 1.5rem;

  background: #000;

  border-radius: 18px;

  color: #f8f8f8;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

}



/* Nadpis nahoře */

.cm-title {

  text-align: center;

  font-size: 2.2rem;

  font-weight: 700;

  margin-bottom: 1.5rem;

  color: #fff;

}



/* ===== GRID ===== */

.cm-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 1.5rem;

}



/* ===== KARTA ===== */

.cm-card {

  background: #111;

  border: 1px solid var(--border);

  border-radius: 14px;

  padding: 1.2rem;

  text-align: center;

  transition: none;     /* žádný hover */

  box-shadow: none;

}

.cm-card:hover { transform: none; box-shadow: none; }



/* ===== SELECT uvnitř karty ===== */

.cm-card-select { margin-bottom: 0.9rem; }



/* Popisek nad selectem */

.cm-slot-label {

  display: block;

  margin: 0 0 .4rem 0;

  font-size: .92rem;

  font-weight: 600;

  color: #c7cbd1;

  text-align: left;

}



/* Styl selectu */

.cm-card-select select.cm-slot {

  width: 100%;

  padding: 10px 12px;

  border: 1px solid #2b2b2b;

  border-radius: 10px;

  background: #1a1a1a;

  color: #f3f4f6;

  outline: none;

  appearance: none;

  /* malá šipka vpravo */

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");

  background-repeat: no-repeat;

  background-position: right 12px center;

  background-size: 14px;

  padding-right: 36px;

}



/* Žádná vizuální změna na hover/focus */

.cm-card-select select.cm-slot {

  width: 100%;

  padding: 10px 12px;

  border: 1px solid #2b2b2b;

  border-radius: 10px;

  background-color: #1a1a1a;

  color: #f3f4f6;

  outline: none;

  appearance: none;



  /* šipka */

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");

  background-repeat: no-repeat;

  background-position: right 12px center;

  background-size: 14px;

  padding-right: 36px;

}



.cm-card-select select.cm-slot:hover,

.cm-card-select select.cm-slot:focus {

  border-color: #2b2b2b;

  background-color: #1a1a1a; /* ✅ jen barva */

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");

  background-repeat: no-repeat;

  background-position: right 12px center;

  background-size: 14px;

}





/* ===== OBSAH KARTY ===== */

.cm-title-sm {

  font-size: 1.2rem;

  font-weight: 700;

  color: #fff;

  margin: .8rem 0 1rem;

}



.cm-img {

  max-width: 240px;

  display: block;

  margin: 0 auto 1rem;

  border-radius: 8px;

}



/* ===== TABULKA ===== */

.cm-table {

  width: 100%;

  border-collapse: collapse;

  margin-top: .5rem;

  border: 1px solid var(--border);

}

.cm-table caption {

  caption-side: top;

  text-align: left;

  padding: .5rem 1rem;

  background: #111;

  color: #ccc;

  font-weight: 600;

  border-bottom: 1px solid var(--border);

}

.cm-table th,

.cm-table td {

  padding: .6rem 1rem;

  border: 1px solid var(--border);

  color: #ddd;

}

.cm-table th { text-align: left; color: #aaa; width: 45%; }

.cm-table td { text-align: right; font-weight: 600; color: #fff; }



/* Cena zvýrazněná */

.cm-table tr:last-child td {

  color: #ff4a4a;

  font-weight: 700;

}



/* Tlačítko Koupit */

.cm-buy {

  display: inline-block;

  margin-top: 1rem;

  padding: .7rem 1.3rem;

  background: var(--accent);

  color: #fff;

  font-weight: 700;

  border-radius: 10px;

  text-decoration: none;

  transition: background .2s ease;

}

.cm-buy:hover { background: #b10000; }



/* Responsivita */

@media (max-width: 640px) {

  .cm-wrap { padding: 1rem; }

  .cm-title { font-size: 1.8rem; }

  .cm-img { max-width: 180px; }

}



/* === Barva textu ve výběrovém menu (options) === */

.cm-card-select select.cm-slot option {

  background: #1a1a1a;

  color: #fff;           /* text bílý */

}



/* pro jistotu i pro optgroup label */

.cm-card-select select.cm-slot optgroup {

  color: #ff4a4a;        /* nadpis skupiny (např. SRAM, Shimano) červeně */

  font-weight: 600;

  background: #111;

}