/* KOVO VD - e-shop (Shoptet Disco) - ZÁKLAD: proměnné, typografie, tlačítka, formuláře */

:root {
  --kv-navy-900: #00226a;
  --kv-navy: #003087;
  --kv-navy-hover: #00266c;
  --kv-blue: #5b8def;
  --kv-blue-50: #e6efff;
  --kv-blue-25: #f4f8ff;
  --kv-border: #cdd9f0;
  --kv-ink: #101a30;
  --kv-ink-2: #2b3344;
  --kv-text: #4a5468;
  --kv-dark: #0c1424;
  --kv-on-dark: #cdd9f0;
  --kv-on-dark-muted: #b8c2d6;
  --kv-on-dark-soft: #9fb9cf;
  --kv-white: #fff;
  --kv-red: #c62828;
  --kv-green: #1e7d3c;

  --kv-r-btn: 10px;
  --kv-r-card: 20px;
  --kv-r-pill: 20px;
  --kv-shadow: 0 12px 20px -6px rgba(16, 26, 48, .14);
  --kv-shadow-lg: 0 18px 36px -12px rgba(16, 26, 48, .22);
  --kv-font: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
  --kv-ease: .2s ease;
}

/* ---------- Písmo a text ---------- */
body,
button,
input,
select,
textarea {
  font-family: var(--kv-font);
}

body {
  color: var(--kv-text);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--kv-font);
  color: var(--kv-ink);
  font-weight: 800;
  letter-spacing: -.02em;
}

h1, .h1 { line-height: 1.1; }
h2, .h2, h3, .h3 { line-height: 1.2; }

a {
  color: var(--kv-navy);
  transition: color var(--kv-ease);
}

a:hover,
a:focus {
  color: var(--kv-blue);
}

::selection {
  background: var(--kv-blue-50);
  color: var(--kv-ink);
}

.content-wrapper,
#content-wrapper {
  background-color: #fff;
}

/* ---------- Tlačítka ---------- */
.btn,
a.btn,
button.btn {
  font-family: var(--kv-font);
  font-weight: 700;
  border-radius: var(--kv-r-btn);
  border-width: 2px;
  transition: background-color var(--kv-ease), color var(--kv-ease), border-color var(--kv-ease), box-shadow var(--kv-ease);
}

/* Hlavní akce - plné tmavě modré */
.btn.btn-conversion,
.btn.btn-cart,
.btn.add-to-cart-button,
a.btn.btn-conversion,
.btn.btn-default,
.btn.btn-secondary,
#continue-order-button,
.next-step-back + .btn,
.cart-content .btn-conversion,
.search-button {
  background-color: var(--kv-navy);
  border-color: var(--kv-navy);
  color: #fff;
}

.btn.btn-conversion:hover,
.btn.btn-cart:hover,
.btn.add-to-cart-button:hover,
a.btn.btn-conversion:hover,
.btn.btn-default:hover,
.btn.btn-secondary:hover,
#continue-order-button:hover,
.search-button:hover,
.btn.btn-conversion:focus,
.btn.btn-cart:focus,
.btn.add-to-cart-button:focus,
.btn.btn-default:focus,
.btn.btn-secondary:focus {
  background-color: var(--kv-navy-900);
  border-color: var(--kv-navy-900);
  color: #fff;
  box-shadow: var(--kv-shadow);
}

/* Vedlejší akce - obrysové (jako "Nezávazná poptávka" na webu) */
.btn.btn-primary,
a.btn.btn-primary {
  background-color: #fff;
  border-color: var(--kv-navy);
  color: var(--kv-navy);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
a.btn.btn-primary:hover {
  background-color: var(--kv-navy);
  border-color: var(--kv-navy);
  color: #fff;
}

/* ---------- Formuláře ---------- */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  border-color: var(--kv-border);
  border-radius: var(--kv-r-btn);
  color: var(--kv-ink);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--kv-blue);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, .18);
  outline: none;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--kv-navy);
}

/* ---------- Drobečková navigace ---------- */
.breadcrumbs,
.breadcrumbs a {
  color: var(--kv-text);
  font-size: 14px;
}

.breadcrumbs a:hover {
  color: var(--kv-navy);
}

/* ---------- Štítky (flags) ---------- */
.flag {
  border-radius: var(--kv-r-pill);
  font-weight: 700;
  padding: 3px 10px;
}

.flag.flag-new { background-color: var(--kv-blue); }
.flag.flag-tip { background-color: var(--kv-navy); }
.flag.flag-action,
.flag.flag-discount { background-color: var(--kv-navy-900); }

/* ---------- Výhody (benefit bannery) - jako "Proč nakoupit u nás" ---------- */
.benefitBanner {
  gap: 16px;
}

.benefitBanner__item {
  background: #fff;
  border: 1px solid var(--kv-border);
  border-radius: var(--kv-r-card);
  padding: 18px 20px;
  transition: box-shadow var(--kv-ease), border-color var(--kv-ease);
}

.benefitBanner__item:hover {
  box-shadow: var(--kv-shadow);
  border-color: var(--kv-blue);
}

.benefitBanner__title {
  color: var(--kv-ink);
  font-weight: 800;
}

.benefitBanner__data {
  color: var(--kv-text);
}

/* ---------- Úvodní stránka ---------- */
.banners-row .banner-wrapper,
.banners-row .carousel,
.banners-row .carousel-inner,
.banners-row img {
  border-radius: var(--kv-r-card);
}

.banners-row .carousel,
.banners-row .banner-wrapper {
  overflow: hidden;
}

.welcome h1,
.welcome h2 {
  font-weight: 800;
}

.homepage-group-title,
.products-related-header,
.products-alternative-header,
#content h2.homepage-group-title {
  font-weight: 800;
  color: var(--kv-ink);
  letter-spacing: -.02em;
}

/* ---------- Hlášky ---------- */
.msg,
.messages .msg {
  border-radius: var(--kv-r-btn);
}

/* ---------- Typografické sirotky - nezlomitelná mezera se vkládá v kovo-typografie.js ---------- */

.benefitBanner__item {
  flex: 1 1 0;
  min-width: 220px;
}

.benefitBanner__title {
  line-height: 1.25;
}

.benefitBanner__data {
  line-height: 1.4;
}

/* ---------- Odsazení obsahu od záhlaví (kategorie, detail, stránky...) ---------- */
body:not(.in-index) #content-wrapper {
  padding-top: 28px;
}

@media (max-width: 767px) {
  body:not(.in-index) #content-wrapper {
    padding-top: 16px;
  }
}

/* ---------- Carousel na úvodní stránce ---------- */
#content-wrapper .banners-row,
.banners-row.row {
  margin-top: 28px !important;
}

#carousel .item > a {
  position: relative;
  display: block;
}

/* Modrý přechod zleva doprava + texty: Název banneru, Text banneru, Text odkazu (tlačítko) */
#carousel .extended-banner-texts {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  padding: 40px 48px 40px 112px !important;
  margin: 0 !important;
  background: linear-gradient(90deg, rgba(0, 34, 106, .94) 0%, rgba(0, 48, 135, .82) 32%, rgba(0, 48, 135, .35) 58%, rgba(0, 48, 135, 0) 78%) !important;
  transform: none !important;
  text-align: left;
}

#carousel .extended-banner-texts > span {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0;
  width: auto !important;
  max-width: 560px;
  text-align: left;
  background: none;
  text-shadow: none;
}

#carousel .extended-banner-title {
  order: 1;
  font-size: clamp(26px, 3.2vw, 46px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em;
  color: #fff !important;
}

#carousel .extended-banner-text {
  order: 2;
  font-size: clamp(15px, 1.35vw, 19px) !important;
  font-weight: 500;
  line-height: 1.5 !important;
  color: var(--kv-blue-50) !important;
  max-width: 500px !important;
}

#carousel .extended-banner-texts > .extended-banner-link {
  order: 3;
  display: inline-flex !important;
  align-items: center;
  margin-top: 8px !important;
  padding: 11px 22px !important;
  background: #fff !important;
  border: 2px solid #fff;
  border-radius: var(--kv-r-btn);
  color: var(--kv-navy) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  transition: background-color var(--kv-ease), color var(--kv-ease), border-color var(--kv-ease);
}

#carousel .item > a:hover .extended-banner-link {
  background: var(--kv-navy) !important;
  border-color: var(--kv-navy);
  color: #fff !important;
}

#carousel .carousel-control {
  width: 56px;
}

.position--benefitHomepage {
  margin-top: 20px;
}

@media (max-width: 767px) {
  #content-wrapper .banners-row,
  .banners-row.row {
    margin-top: 16px !important;
  }

  #carousel .carousel-inner {
    min-height: 0 !important;
  }

  #carousel .item img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: 70% center;
  }

  #carousel .extended-banner-texts {
    justify-content: flex-end;
    gap: 10px;
    padding: 24px 20px 28px !important;
    background: linear-gradient(90deg, rgba(0, 34, 106, .94) 0%, rgba(0, 48, 135, .8) 55%, rgba(0, 48, 135, .25) 100%) !important;
  }

  #carousel .extended-banner-title {
    font-size: 26px !important;
  }

  #carousel .extended-banner-text {
    font-size: 15px !important;
  }

  #carousel .extended-banner-texts > .extended-banner-link {
    font-size: 15px !important;
    padding: 9px 18px !important;
  }

  #carousel .carousel-control {
    display: none;
  }
}

/* ---------- Obsahové stránky: stejná šířka jako záhlaví (Disco je zužuje přes .container-narrow) ---------- */
@media (min-width: 992px) {
  .container.container-narrow {
    width: 972px;
    max-width: 100%;
  }
}

@media (min-width: 1200px) {
  .container.container-narrow {
    width: 1178px;
  }
}

@media (min-width: 1440px) {
  .container.container-narrow {
    width: 1418px;
  }
}