/*
 * BEMA Modernizace 2.0
 * Lehká, vratná vizuální vrstva pro Shoptet.
 * Aktivace: jediný externí <link> v HTML záhlaví.
 * Deaktivace: odstranění tohoto <link>; URL a obsah webu zůstávají beze změny.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Rajdhani:wght@600;700&family=Teko:wght@500;600;700&display=swap');

:root {
  --bema-red: #9d1519;
  --bema-red-dark: #741014;
  --bema-red-soft: #f8e8e8;
  --bema-ink: #17191d;
  --bema-text: #34373d;
  --bema-muted: #69707a;
  --bema-line: #e3e6ea;
  --bema-surface: #ffffff;
  --bema-surface-soft: #f6f7f8;
  --bema-success: #16833a;
  --bema-radius-sm: 8px;
  --bema-radius: 12px;
  --bema-radius-lg: 18px;
  --bema-shadow-sm: 0 5px 18px rgba(23, 25, 29, 0.07);
  --bema-shadow: 0 14px 34px rgba(23, 25, 29, 0.11);
  --bema-transition: 180ms cubic-bezier(.2, .7, .2, 1);
}

html {
  scroll-behavior: smooth;
}

body,
input,
textarea,
select,
button {
  font-family: 'Inter', Arial, sans-serif;
}

body {
  color: var(--bema-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Teko zůstává pouze pro skutečně velké nadpisy. */
h1,
.h1,
.p-detail-inner h1,
.category-title {
  color: var(--bema-ink);
  font-family: 'Teko', 'Arial Narrow', sans-serif;
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.012em;
}

h1,
.h1,
.p-detail-inner h1 {
  font-size: clamp(36px, 4.2vw, 58px);
}

h2,
h3,
h4,
.h2,
.h3,
.h4 {
  color: var(--bema-ink);
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -.018em;
}

p,
li,
td,
th {
  line-height: 1.65;
}

a {
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

/* Horní informační lišta: vysoký kontrast bez změny rozvržení. */
.top-navigation-bar,
.top-navigation-bar .container {
  background: var(--bema-red-dark);
  color: #fff;
}

.top-navigation-bar a,
.top-navigation-bar .top-nav-button,
.top-navigation-bar .top-nav-button-login {
  color: #fff;
  font-weight: 600;
}

/* Navigace má technický, ale dobře čitelný charakter. */
.navigation-in > ul > li > a,
.menu-helper > span,
.menu-helper > a {
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: .025em;
}

.navigation-in > ul > li > a {
  transition: color var(--bema-transition), background-color var(--bema-transition);
}

/* Tlačítka a konverzní prvky. */
.btn,
button.btn,
input.btn,
.add-to-cart-button,
.btn-conversion,
.btn-primary {
  border-radius: var(--bema-radius-sm);
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform var(--bema-transition), box-shadow var(--bema-transition), background-color var(--bema-transition), border-color var(--bema-transition), color var(--bema-transition);
}

.btn-conversion,
.add-to-cart-button,
.btn.btn-conversion {
  border-color: var(--bema-red);
  background: linear-gradient(135deg, #b51b20 0%, var(--bema-red) 55%, var(--bema-red-dark) 100%);
  box-shadow: 0 8px 20px rgba(157, 21, 25, .22);
  color: #fff;
}

@media (hover: hover) {
  .btn:hover,
  button.btn:hover,
  .add-to-cart-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(23, 25, 29, .16);
  }

  .btn-conversion:hover,
  .add-to-cart-button:hover,
  .btn.btn-conversion:hover {
    border-color: var(--bema-red-dark);
    background: linear-gradient(135deg, #c01d23 0%, #9d1519 58%, #680d10 100%);
    color: #fff;
  }
}

.btn:active,
button.btn:active,
.add-to-cart-button:active {
  transform: translateY(0) scale(.985);
}

.form-control,
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='search'],
select,
textarea {
  border-radius: var(--bema-radius-sm);
  transition: border-color var(--bema-transition), box-shadow var(--bema-transition);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--bema-red);
  box-shadow: 0 0 0 3px rgba(157, 21, 25, .13);
  outline: 0;
}

/* Produktové výpisy: jemné karty bez změny jejich funkce. */
.products-block .product,
.products-inline .product {
  transition: transform var(--bema-transition), box-shadow var(--bema-transition), border-color var(--bema-transition);
}

.products-block .product .p-in,
.products-inline .product .p-in {
  border-radius: var(--bema-radius);
}

@media (hover: hover) {
  .products-block .product:hover,
  .products-inline .product:hover {
    transform: translateY(-3px);
  }

  .products-block .product:hover .p-in,
  .products-inline .product:hover .p-in {
    border-color: rgba(157, 21, 25, .2);
    box-shadow: var(--bema-shadow-sm);
  }
}

.products-block .name,
.products-inline .name,
.p-name {
  color: var(--bema-ink);
  font-weight: 750;
  line-height: 1.32;
}

.price-final,
.price.price-final,
.p-final-price-wrapper {
  color: var(--bema-red);
  font-weight: 800;
}

.availability-amount,
.availability-label,
.availability-value {
  font-weight: 700;
}

/* Detail produktu a univerzální zlepšení starých popisů. */
.p-detail-inner,
.description-inner,
.basic-description,
.extended-description {
  color: var(--bema-text);
}

.p-short-description,
.basic-description,
.description-inner,
.extended-description {
  font-size: 15.5px;
  line-height: 1.72;
}

.description-inner,
.extended-description {
  max-width: 1120px;
}

.description-inner > h2,
.extended-description > h2,
.description-inner section > h2,
.extended-description section > h2 {
  margin-top: 1.45em;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.14;
}

.description-inner h3,
.extended-description h3 {
  margin-top: 1.6em;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.22;
}

.description-inner img,
.extended-description img,
.basic-description img {
  height: auto;
  max-width: 100%;
  border-radius: var(--bema-radius);
}

.description-inner blockquote,
.extended-description blockquote {
  margin: 24px 0;
  padding: 18px 22px;
  border: 0;
  border-left: 4px solid var(--bema-red);
  border-radius: 0 var(--bema-radius) var(--bema-radius) 0;
  background: var(--bema-surface-soft);
  color: var(--bema-text);
}

.description-inner ul,
.extended-description ul,
.basic-description ul {
  padding-left: 1.25em;
}

.description-inner li::marker,
.extended-description li::marker,
.basic-description li::marker {
  color: var(--bema-red);
}

/* Technické tabulky jsou čitelné i bez produktového mikrodesignu. */
.description-inner table,
.extended-description table,
.detail-parameters,
.table.table-bordered {
  width: 100%;
  border: 1px solid var(--bema-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--bema-radius);
  background: var(--bema-surface);
  box-shadow: var(--bema-shadow-sm);
  overflow: hidden;
}

.description-inner th,
.extended-description th,
.detail-parameters th {
  background: var(--bema-ink);
  color: #fff;
  font-weight: 800;
}

.description-inner th,
.description-inner td,
.extended-description th,
.extended-description td,
.detail-parameters th,
.detail-parameters td {
  padding: 12px 14px;
  border-color: var(--bema-line);
  text-align: left;
  vertical-align: top;
}

.description-inner tr:nth-child(even) td,
.extended-description tr:nth-child(even) td,
.detail-parameters tr:nth-child(even) td {
  background: var(--bema-surface-soft);
}

/* Existující obohacené BEMA popisy: typografické sjednocení. */
[class^='bema-short-'],
[class*=' bema-short-'],
[class^='bema-detail-'],
[class*=' bema-detail-'] {
  font-family: 'Inter', Arial, sans-serif !important;
}

[class^='bema-short-'] h2,
[class*=' bema-short-'] h2,
[class^='bema-detail-'] > section:first-child h2,
[class*=' bema-detail-'] > section:first-child h2 {
  font-family: 'Teko', 'Arial Narrow', sans-serif !important;
  font-weight: 600 !important;
}

/* Drobečková navigace a postranní bloky. */
.breadcrumbs,
.breadcrumbs a {
  color: var(--bema-muted);
  font-size: 13px;
}

.sidebar-inner > div,
.sidebar-inner .box {
  border-radius: var(--bema-radius);
}

/* Patička pouze zpřehlednit; strukturu zatím neměníme. */
#footer {
  color: #e7e9ec;
}

#footer h4,
#footer .h4 {
  color: #fff;
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: .025em;
}

#footer a {
  transition: color var(--bema-transition), opacity var(--bema-transition);
}

@media (hover: hover) {
  #footer a:hover {
    color: #fff;
    opacity: 1;
  }
}

/* Telefon: bez horizontálního přetékání a s pohodlnými ovládacími prvky. */
@media (max-width: 767px) {
  h1,
  .h1,
  .p-detail-inner h1 {
    font-size: clamp(34px, 11vw, 45px);
    overflow-wrap: anywhere;
  }

  .btn,
  button.btn,
  .add-to-cart-button {
    min-height: 44px;
  }

  .p-short-description,
  .basic-description,
  .description-inner,
  .extended-description {
    font-size: 15px;
    line-height: 1.68;
  }

  .description-inner table,
  .extended-description table,
  .detail-parameters {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .description-inner th,
  .description-inner td,
  .extended-description th,
  .extended-description td,
  .detail-parameters th,
  .detail-parameters td {
    min-width: 130px;
    padding: 10px 11px;
  }

  [class^='bema-short-'],
  [class*=' bema-short-'],
  [class^='bema-detail-'],
  [class*=' bema-detail-'] {
    max-width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}