/**
 * TVUJORIGINAL DESIGN SYSTEM V1.2.0
 *
 * Bezpečná vzhledová vrstva pro Shoptet Merkur.
 * Hlavičku nemění.
 * Nepoužívá samostatné globální selektory .btn, .content, .point ani .card.
 */

/* =========================================================
   1. ZÁKLADNÍ TYPOGRAFIE
   ========================================================= */

body.paxio-merkur {
  color: var(--to-color-text);
  font-family: var(--to-font-body);
  font-size: var(--to-text-md);
  line-height: var(--to-leading-body);
}

/* Nadpisy pouze v hlavním obsahu Shoptetu */
body.paxio-merkur #content h1,
body.paxio-merkur #content .h1 {
  margin-top: 0;
  margin-bottom: var(--to-space-6);
  color: var(--to-color-heading);
  font-family: var(--to-font-heading);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
  line-height: var(--to-leading-tight);
  letter-spacing: -.02em;
}

body.paxio-merkur #content h2 {
  margin-top: var(--to-space-10);
  margin-bottom: var(--to-space-5);
  color: var(--to-color-heading);
  font-family: var(--to-font-heading);
  font-size: clamp(25px, 2.2vw, 32px);
  font-weight: 700;
  line-height: var(--to-leading-heading);
  letter-spacing: -.015em;
}

body.paxio-merkur #content h3 {
  margin-top: var(--to-space-8);
  margin-bottom: var(--to-space-4);
  color: var(--to-color-heading);
  font-family: var(--to-font-heading);
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 700;
  line-height: var(--to-leading-heading);
}

body.paxio-merkur #content h4 {
  margin-top: var(--to-space-6);
  margin-bottom: var(--to-space-3);
  color: var(--to-color-heading);
  font-family: var(--to-font-heading);
  font-size: var(--to-text-xl);
  font-weight: 700;
  line-height: 1.35;
}

body.paxio-merkur #content h5,
body.paxio-merkur #content h6 {
  margin-top: var(--to-space-5);
  margin-bottom: var(--to-space-2);
  color: var(--to-color-heading);
  font-family: var(--to-font-heading);
  font-size: var(--to-text-lg);
  font-weight: 700;
  line-height: 1.4;
}

/* Texty pouze ve standardních obsahových blocích */
body.paxio-merkur #content .basic-description p,
body.paxio-merkur #content .extended-description p,
body.paxio-merkur #content .text p,
body.paxio-merkur #content .article-content p,
body.paxio-merkur #content .category-perex p {
  margin: 0 0 var(--to-space-4);
  color: var(--to-color-text);
  font-size: var(--to-text-md);
  line-height: var(--to-leading-body);
}

body.paxio-merkur #content .basic-description li,
body.paxio-merkur #content .extended-description li,
body.paxio-merkur #content .text li,
body.paxio-merkur #content .article-content li,
body.paxio-merkur #content .category-perex li {
  margin-bottom: var(--to-space-2);
  font-size: var(--to-text-md);
  line-height: 1.55;
}

body.paxio-merkur #content .basic-description a,
body.paxio-merkur #content .extended-description a,
body.paxio-merkur #content .text a,
body.paxio-merkur #content .article-content a,
body.paxio-merkur #content .category-perex a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* =========================================================
   2. DETAIL PRODUKTU – TEXTOVÁ HIERARCHIE
   ========================================================= */

body.paxio-merkur.type-product .p-info-wrapper > .p-detail-inner-header h1 {
  margin-bottom: var(--to-space-4);
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.18;
}

body.paxio-merkur.type-product .p-info-wrapper .product-appendix {
  font-size: .72em;
  font-weight: 400;
  line-height: 1.35;
}

body.paxio-merkur.type-product .p-short-description,
body.paxio-merkur.type-product .p-short-description p {
  color: var(--to-color-muted);
  font-size: var(--to-text-md);
  line-height: 1.58;
}

body.paxio-merkur.type-product .p-code,
body.paxio-merkur.type-product .stars-wrapper,
body.paxio-merkur.type-product .price-additional,
body.paxio-merkur.type-product .pr-list-unit {
  font-size: var(--to-text-sm);
  line-height: 1.4;
}

body.paxio-merkur.type-product .availability-value,
body.paxio-merkur.type-product .availability-label {
  font-size: var(--to-text-sm);
  line-height: 1.4;
}

body.paxio-merkur.type-product .price-final {
  font-size: clamp(29px, 2.6vw, 38px);
  line-height: 1.1;
}

body.paxio-merkur.type-product .buy-box {
  margin-top: var(--to-space-5);
}

/* Přesný selektor tlačítka detailu – neovlivní header ani jiné .btn */
body.paxio-merkur.type-product
#product-detail-form
.add-to-cart
button[data-testid="buttonAddToCart"] {
  min-height: var(--to-control-height-lg);
  padding: 0 26px;
  font-size: var(--to-text-md);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .01em;
}

/* Množství na detailu */
body.paxio-merkur.type-product
#product-detail-form
.add-to-cart .quantity {
  min-height: var(--to-control-height-lg);
}

body.paxio-merkur.type-product
#product-detail-form
.add-to-cart .amount {
  font-size: var(--to-text-md);
  line-height: 1;
}

/* =========================================================
   3. PRODUKTOVÉ KARTY
   ========================================================= */

body.paxio-merkur .products .product .name,
body.paxio-merkur .products .product [data-testid="productCardName"] {
  color: var(--to-color-heading);
  font-size: var(--to-text-md);
  font-weight: 700;
  line-height: 1.35;
}

body.paxio-merkur .products .product .product-appendix {
  color: var(--to-color-muted);
  font-size: var(--to-text-sm);
  line-height: 1.45;
}

body.paxio-merkur .products .product .p-desc {
  color: var(--to-color-muted);
  font-size: var(--to-text-sm);
  line-height: 1.5;
}

body.paxio-merkur .products .product .price-final {
  color: var(--to-color-heading);
  font-size: var(--to-text-xl);
  line-height: 1.15;
}

body.paxio-merkur .products .product .price-additional,
body.paxio-merkur .products .product .availability,
body.paxio-merkur .products .product .p-code {
  font-size: var(--to-text-xs);
  line-height: 1.4;
}

/* Přesné tlačítko košíku na produktové kartě */
body.paxio-merkur .products .product
button[data-testid="buttonAddToCart"] {
  min-height: 42px;
  padding: 0 18px;
  font-size: var(--to-text-sm);
  font-weight: 700;
  line-height: 1.15;
}

/* =========================================================
   4. FORMULÁŘE
   ========================================================= */

body.paxio-merkur #content
input.form-control:not([type="checkbox"]):not([type="radio"]),
body.paxio-merkur #content
select.form-control,
body.paxio-merkur #content
textarea.form-control {
  font-family: var(--to-font-body);
  font-size: var(--to-text-md);
  line-height: 1.4;
}

body.paxio-merkur #content
input.form-control:not([type="checkbox"]):not([type="radio"]),
body.paxio-merkur #content
select.form-control {
  min-height: var(--to-control-height);
}

body.paxio-merkur #content label,
body.paxio-merkur #content .label {
  font-size: var(--to-text-sm);
  line-height: 1.4;
}

/* =========================================================
   5. TABULKY A PARAMETRY
   ========================================================= */

body.paxio-merkur #content .detail-parameters th,
body.paxio-merkur #content .detail-parameters td,
body.paxio-merkur #content table.table th,
body.paxio-merkur #content table.table td {
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: var(--to-text-sm);
  line-height: 1.45;
}

body.paxio-merkur #content .detail-parameters th {
  color: var(--to-color-muted);
  font-weight: 600;
}

/* =========================================================
   6. ZÁLOŽKY A DROBNÁ NAVIGACE V OBSAHU
   ========================================================= */

body.paxio-merkur #content .shp-tab-link {
  font-size: var(--to-text-sm);
  font-weight: 700;
  line-height: 1.25;
}

body.paxio-merkur .breadcrumbs {
  font-size: var(--to-text-sm);
  line-height: 1.4;
}

/* =========================================================
   7. OPT-IN KOMPONENTY PRO NAŠE NOVÉ MODULY
   Tyto třídy se použijí pouze v HTML, které vytvoříme my.
   ========================================================= */

.to-ui-section {
  padding-block: clamp(40px, 6vw, 80px);
}

.to-ui-eyebrow {
  margin: 0 0 var(--to-space-3);
  color: var(--to-color-brand-600);
  font-size: var(--to-text-xs);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.to-ui-title {
  margin: 0 0 var(--to-space-5);
  color: var(--to-color-heading);
  font-family: var(--to-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  line-height: var(--to-leading-tight);
  letter-spacing: -.02em;
}

.to-ui-lead {
  max-width: var(--to-container-reading);
  margin: 0;
  color: var(--to-color-muted);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.65;
}

.to-ui-card {
  padding: clamp(20px, 3vw, 32px);
  background: var(--to-color-surface);
  border: 1px solid var(--to-color-line);
  border-radius: var(--to-radius-sm);
}

.to-ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--to-control-height);
  padding: 0 24px;
  color: #fff;
  background: var(--to-color-action);
  border: 0;
  border-radius: var(--to-radius-sm);
  font-family: var(--to-font-body);
  font-size: var(--to-text-md);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  transition: background-color var(--to-transition);
}

.to-ui-button:hover,
.to-ui-button:focus {
  color: #fff;
  background: var(--to-color-action-hover);
}

/* =========================================================
   8. MOBILNÍ STUPNICE
   ========================================================= */

@media (max-width: 767px) {
  body.paxio-merkur {
    font-size: 16px;
  }

  body.paxio-merkur #content h1,
  body.paxio-merkur #content .h1 {
    margin-bottom: var(--to-space-5);
    font-size: 30px;
    line-height: 1.2;
  }

  body.paxio-merkur #content h2 {
    margin-top: var(--to-space-8);
    font-size: 25px;
  }

  body.paxio-merkur #content h3 {
    margin-top: var(--to-space-6);
    font-size: 21px;
  }

  body.paxio-merkur #content h4 {
    font-size: 19px;
  }

  body.paxio-merkur.type-product .p-info-wrapper > .p-detail-inner-header h1 {
    font-size: 28px;
  }

  body.paxio-merkur.type-product .price-final {
    font-size: 31px;
  }

  body.paxio-merkur.type-product
  #product-detail-form
  .add-to-cart
  button[data-testid="buttonAddToCart"] {
    min-height: 52px;
    padding-inline: 20px;
    font-size: 16px;
  }

  body.paxio-merkur .products .product .name,
  body.paxio-merkur .products .product [data-testid="productCardName"] {
    font-size: 15px;
  }
}

/* =========================================================
   9. PŘÍSTUPNOST
   ========================================================= */

body.paxio-merkur #content a:focus-visible,
body.paxio-merkur #content button:focus-visible,
body.paxio-merkur #content input:focus-visible,
body.paxio-merkur #content select:focus-visible,
body.paxio-merkur #content textarea:focus-visible {
  outline: 2px solid var(--to-color-brand-700);
  outline-offset: 2px;
}