/* ============================================
   DecorHand – content.css
   Obsah: tělo stránky, produkty, kategorie
   ============================================ */

/* ============================================
   1. ŘAZENÍ PRODUKTŮ
   ============================================ */
.listSorting__controls {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

.listSorting__control {
  background-color: var(--dh-bg-main);
  color: var(--dh-text-muted);
  border: var(--dh-border-soft);
  border-radius: 0;
  padding: 8px 16px;
  font-family: var(--dh-font);
  font-size: 14px;
  cursor: pointer;
  transition: var(--dh-transition);
}

.listSorting__control:hover {
  color: var(--dh-gold);
  border-color: var(--dh-gold);
  background-color: rgba(218, 186, 91, 0.05);
}

.listSorting__control--current {
  background: var(--dh-gradient);
  color: var(--dh-text-dark);
  border: var(--dh-border-thick);
  font-weight: 700;
}

/* ============================================
   2. FILTR CEN – SLIDER
   ============================================ */
.ui-slider-handle {
  background-color: var(--dh-gold) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

.ui-slider-handle {
  background-color: var(--dh-gold);
  background-image: none;
  box-shadow: none;
  border-radius: 0;
  opacity: 1;
  position: absolute;
}

.ui-slider-handle::before,
.ui-slider-handle::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 12px;
  background-color: #1C1C1C;
  border-radius: 0;
}

.ui-slider-handle::before {
  left: 13px;
}

.ui-slider-handle::after {
  right: 13px;
}
/* ============================================
   3. TLAČÍTKO DO KOŠÍKU – Definitivní srovnání
   ============================================ */
html body .add-to-cart-button {
  background: var(--dh-gradient) !important;
  color: var(--dh-text-dark) !important;
  border: var(--dh-border-thick) !important;
  border-radius: 0 !important;
  padding: 0 10px !important;
  font-family: var(--dh-font) !important;
  font-weight: 700 !important;
  font-size: 13px !important; 
  text-transform: uppercase !important;
  height: 42px !important;
  width: 100% !important;
  max-width: 180px !important; 
  margin: 10px auto !important;
  
  /* Srovnání do jedné linky - Flexbox */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Oprava ikonky - aby nebyla obří a neposouvala text */
html body .add-to-cart-button i,
html body .add-to-cart-button .icon-cart {
  font-size: 18px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  position: static !important; /* Zrušíme případné Shoptet pozicování */
  transform: none !important;
}

/* Oprava textu a vnitřního spanu */
html body .add-to-cart-button span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
}

/* Odstranění zbytků starých Shoptet stylů */
html body .add-to-cart-button::before,
html body .add-to-cart-button::after {
  display: none !important;
}
/* ============================================
   4. ZÁLOŽKY PRODUKTOVÉ KARTY
   ============================================ */
.shp-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  border-bottom: var(--dh-border-soft);
}

.shp-tab a.shp-tab-link {
  display: block;
  padding: 12px 24px;
  color: var(--dh-text-muted);
  text-decoration: none;
  font-family: var(--dh-font);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid transparent;
  transition: var(--dh-transition);
}

.shp-tab a.shp-tab-link:hover {
  color: var(--dh-gold);
  border-bottom-color: var(--dh-gold);
}

.shp-tab.active a.shp-tab-link {
  color: var(--dh-gold);
  border-bottom: 2px solid var(--dh-gold);
  font-weight: 700;
}
.shp-tabs {
  background-color: var(--dh-bg-main);
}

.shp-tab a.shp-tab-link {
  background-color: var(--dh-bg-main);
}

/* ============================================
   5. OBSAH ZÁLOŽEK – tab-content
   ============================================ */
.tab-content,
.tab-pane,
.description-inner,
.basic-description,
.extended-description {
  background-color: var(--dh-bg-main);
  color: var(--dh-text-body);
}

.detail-parameters {
  width: 100%;
  border-collapse: collapse;
}

.detail-parameters th,
.detail-parameters td {
  background-color: var(--dh-bg-main);
  color: var(--dh-text-body);
  border-bottom: var(--dh-border-soft);
  padding: 10px 16px;
}

.detail-parameters th {
  color: var(--dh-gold);
}

.detail-parameters a {
  color: var(--dh-gold);
}

.detail-parameters a:hover {
  color: var(--dh-text-white);
}
.tab-content {
  background-color: var(--dh-bg-main) !important;
  border-radius: 0 !important;
  border: var(--dh-border-soft) !important;
}

.tab-pane {
  background-color: var(--dh-bg-main) !important;
  border-radius: 0 !important;
}
/* ============================================
   6. TLAČÍTKO DETAIL – produkt není skladem
   ============================================ */
a.btn.btn-primary {
  background: transparent;
  color: var(--dh-gold);
  border: var(--dh-border);
  border-radius: 0;
  padding: 10px 20px;
  font-family: var(--dh-font);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  transition: var(--dh-transition);
}

a.btn.btn-primary:hover {
  background: var(--dh-gradient);
  color: var(--dh-text-dark);
  box-shadow: var(--dh-glow-lg);
}
/* ============================================
  7. HOVER EFEKT NA PRODUKTU V GRIDU (Zvýšená priorita)
   ============================================ */

/* Základní stav karty v mřížce */
.products-block .product {
  transition: var(--dh-transition);
}

/* Stav po najetí myší */
.products-block .product:hover {
  border-color: var(--dh-gold);
  box-shadow: var(--dh-glow-lg);
  transform: translateY(-2px);
}
/* ============================================
  8. VÝBĚR VARIANTY PRODUKTU (Luxusní roletka)
   ============================================ */

/* Skrytí původní šipky a bílého pozadí, vložení vlastní zlaté šipky */
.p-detail-inner select.form-control,
.p-detail-inner .custom-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--dh-bg-main);
  color: var(--dh-text-white);
  border: var(--dh-border);
  border-radius: 0;
  padding: 10px 40px 10px 14px; /* Větší padding vpravo pro naši šipku */
  
  /* Vlastní zlatá šipka vygenerovaná přes SVG (používá barvu #fada73) */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fada73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  cursor: pointer;
  transition: var(--dh-transition);
}

/* Stav po kliknutí / najetí myší na samotnou roletku */
.p-detail-inner select.form-control:focus,
.p-detail-inner select.form-control:hover,
.p-detail-inner .custom-select:focus,
.p-detail-inner .custom-select:hover {
  background-color: var(--dh-bg-darker);
  border-color: var(--dh-gold-light);
  box-shadow: var(--dh-glow-sm);
  outline: none;
}

/* Vzhled rozbalených možností */
.p-detail-inner select.form-control option {
  background-color: var(--dh-bg-main);
  color: var(--dh-text-white);
  padding: 10px;
}

/* Pokus o přebarvení hover/checked stavu (funguje jen v některých prohlížečích) */
.p-detail-inner select.form-control option:checked,
.p-detail-inner select.form-control option:hover,
.p-detail-inner select.form-control option:focus {
  background-color: #2a2a2a; /* Ztmavené pozadí */
  color: var(--dh-gold);     /* Zlatý text */
}


/* ============================================
  10. NAČÍTÁNÍ MODÁLNÍHO OKNA (Definitivní fix)
   ============================================ */

/* 1. Temné pozadí při načítání */
#cboxLoadingOverlay {
    background: var(--dh-bg-main) !important;
    opacity: 1 !important; /* Vynutíme plnou neprůhlednost */
}

/* 2. Zlatý načítací kroužek a reset výchozího stavu */
#cboxLoadingGraphic {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    
    /* Rozměry a centrování naší animace */
    width: 48px !important;
    height: 48px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -24px !important;
    margin-left: -24px !important;
    
    /* Náš zlatý spinner */
    border: 4px solid transparent !important; 
    border-top-color: var(--dh-gold) !important; 
    border-radius: 50% !important;
    
    /* Animace */
    animation: dh-cbox-spin 0.8s linear infinite !important;
}

/* 3. LIKVIDACE bílých koleček ze Shoptet šablony */
#cboxLoadingGraphic::before,
#cboxLoadingGraphic::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    border: none !important;
}

/* Skryjeme i případné SVG nebo značky <img>, co by tam Shoptet poslal */
#cboxLoadingGraphic > * {
    display: none !important;
}

/* 4. Definice animace rotace */
@keyframes dh-cbox-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   PRODUKT – POČÍTADLO KUSŮ
   finální oprava: minus | číslo | plus
   ============================================ */

html body .p-detail .quantity,
html body .p-detail-inner .quantity,
html body .add-to-cart .quantity,
html body .product .quantity {
  display: inline-flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  width: 116px !important;
  min-width: 116px !important;
  max-width: 116px !important;
  height: 38px !important;
  min-height: 38px !important;

  padding: 0 !important;
  margin: 0 16px 0 0 !important;

  background: #000000 !important;
  border: 1px solid var(--dh-gold) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Vynulování všech vnitřních prvků */
html body .p-detail .quantity *,
html body .p-detail-inner .quantity *,
html body .add-to-cart .quantity *,
html body .product .quantity * {
  box-sizing: border-box !important;
}

/* Pokud Shoptet používá obaly tlačítek */
html body .p-detail .quantity .input-group-btn,
html body .p-detail-inner .quantity .input-group-btn,
html body .add-to-cart .quantity .input-group-btn,
html body .product .quantity .input-group-btn {
  display: flex !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  position: static !important;
}

/* MINUS – vždy vlevo */
html body .p-detail .quantity .decrease,
html body .p-detail .quantity .minus,
html body .p-detail .quantity [class*="decrease"],
html body .p-detail .quantity [class*="minus"],
html body .p-detail-inner .quantity .decrease,
html body .p-detail-inner .quantity .minus,
html body .p-detail-inner .quantity [class*="decrease"],
html body .p-detail-inner .quantity [class*="minus"],
html body .add-to-cart .quantity .decrease,
html body .add-to-cart .quantity .minus,
html body .add-to-cart .quantity [class*="decrease"],
html body .add-to-cart .quantity [class*="minus"],
html body .product .quantity .decrease,
html body .product .quantity .minus,
html body .product .quantity [class*="decrease"],
html body .product .quantity [class*="minus"] {
  order: 1 !important;
}

/* INPUT / ČÍSLO – vždy uprostřed */
html body .p-detail .quantity label,
html body .p-detail-inner .quantity label,
html body .add-to-cart .quantity label,
html body .product .quantity label,
html body .p-detail .quantity input,
html body .p-detail-inner .quantity input,
html body .add-to-cart .quantity input,
html body .product .quantity input {
  order: 2 !important;
}

/* PLUS – vždy vpravo */
html body .p-detail .quantity .increase,
html body .p-detail .quantity .plus,
html body .p-detail .quantity [class*="increase"],
html body .p-detail .quantity [class*="plus"],
html body .p-detail-inner .quantity .increase,
html body .p-detail-inner .quantity .plus,
html body .p-detail-inner .quantity [class*="increase"],
html body .p-detail-inner .quantity [class*="plus"],
html body .add-to-cart .quantity .increase,
html body .add-to-cart .quantity .plus,
html body .add-to-cart .quantity [class*="increase"],
html body .add-to-cart .quantity [class*="plus"],
html body .product .quantity .increase,
html body .product .quantity .plus,
html body .product .quantity [class*="increase"],
html body .product .quantity [class*="plus"] {
  order: 3 !important;
}

/* Tlačítka minus / plus */
html body .p-detail .quantity button,
html body .p-detail .quantity a,
html body .p-detail-inner .quantity button,
html body .p-detail-inner .quantity a,
html body .add-to-cart .quantity button,
html body .add-to-cart .quantity a,
html body .product .quantity button,
html body .product .quantity a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 100% !important;
  min-height: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  color: var(--dh-gold) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;

  position: static !important;
  float: none !important;
  transform: none !important;
}

/* Oddělovací linky */
html body .p-detail .quantity .decrease,
html body .p-detail .quantity .minus,
html body .p-detail .quantity [class*="decrease"],
html body .p-detail .quantity [class*="minus"],
html body .p-detail-inner .quantity .decrease,
html body .p-detail-inner .quantity .minus,
html body .p-detail-inner .quantity [class*="decrease"],
html body .p-detail-inner .quantity [class*="minus"],
html body .add-to-cart .quantity .decrease,
html body .add-to-cart .quantity .minus,
html body .add-to-cart .quantity [class*="decrease"],
html body .add-to-cart .quantity [class*="minus"],
html body .product .quantity .decrease,
html body .product .quantity .minus,
html body .product .quantity [class*="decrease"],
html body .product .quantity [class*="minus"] {
  border-right: 1px solid var(--dh-gold) !important;
}

html body .p-detail .quantity .increase,
html body .p-detail .quantity .plus,
html body .p-detail .quantity [class*="increase"],
html body .p-detail .quantity [class*="plus"],
html body .p-detail-inner .quantity .increase,
html body .p-detail-inner .quantity .plus,
html body .p-detail-inner .quantity [class*="increase"],
html body .p-detail-inner .quantity [class*="plus"],
html body .add-to-cart .quantity .increase,
html body .add-to-cart .quantity .plus,
html body .add-to-cart .quantity [class*="increase"],
html body .add-to-cart .quantity [class*="plus"],
html body .product .quantity .increase,
html body .product .quantity .plus,
html body .product .quantity [class*="increase"],
html body .product .quantity [class*="plus"] {
  border-left: 1px solid var(--dh-gold) !important;
}

/* Číslo */
html body .p-detail .quantity label,
html body .p-detail-inner .quantity label,
html body .add-to-cart .quantity label,
html body .product .quantity label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: none !important;
  font-size: 0 !important;
  line-height: 1 !important;

  position: static !important;
  float: none !important;
}

html body .p-detail .quantity input,
html body .p-detail .quantity input[type="number"],
html body .p-detail .quantity input[type="text"],
html body .p-detail-inner .quantity input,
html body .p-detail-inner .quantity input[type="number"],
html body .p-detail-inner .quantity input[type="text"],
html body .add-to-cart .quantity input,
html body .add-to-cart .quantity input[type="number"],
html body .add-to-cart .quantity input[type="text"],
html body .product .quantity input,
html body .product .quantity input[type="number"],
html body .product .quantity input[type="text"] {
  display: block !important;

  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 100% !important;
  min-height: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  text-align: center !important;
  text-indent: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 38px !important;

  position: static !important;
  float: none !important;
  transform: none !important;

  -moz-appearance: textfield !important;
}

/* Skrytí nativních šipek */
html body .quantity input::-webkit-inner-spin-button,
html body .quantity input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Hover */
html body .p-detail .quantity button:hover,
html body .p-detail .quantity a:hover,
html body .p-detail-inner .quantity button:hover,
html body .p-detail-inner .quantity a:hover,
html body .add-to-cart .quantity button:hover,
html body .add-to-cart .quantity a:hover,
html body .product .quantity button:hover,
html body .product .quantity a:hover {
  background: rgba(218, 186, 91, 0.14) !important;
  color: var(--dh-gold-light) !important;
}

/* MOBIL */
@media (max-width: 767px) {
  html body .p-detail .quantity,
  html body .p-detail-inner .quantity,
  html body .add-to-cart .quantity,
  html body .product .quantity {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin-right: 12px !important;
  }

  html body .p-detail .quantity .input-group-btn,
  html body .p-detail-inner .quantity .input-group-btn,
  html body .add-to-cart .quantity .input-group-btn,
  html body .product .quantity .input-group-btn,
  html body .p-detail .quantity button,
  html body .p-detail .quantity a,
  html body .p-detail-inner .quantity button,
  html body .p-detail-inner .quantity a,
  html body .add-to-cart .quantity button,
  html body .add-to-cart .quantity a,
  html body .product .quantity button,
  html body .product .quantity a {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    font-size: 15px !important;
  }

  html body .p-detail .quantity label,
  html body .p-detail-inner .quantity label,
  html body .add-to-cart .quantity label,
  html body .product .quantity label,
  html body .p-detail .quantity input,
  html body .p-detail .quantity input[type="number"],
  html body .p-detail .quantity input[type="text"],
  html body .p-detail-inner .quantity input,
  html body .p-detail-inner .quantity input[type="number"],
  html body .p-detail-inner .quantity input[type="text"],
  html body .add-to-cart .quantity input,
  html body .add-to-cart .quantity input[type="number"],
  html body .add-to-cart .quantity input[type="text"],
  html body .product .quantity input,
  html body .product .quantity input[type="number"],
  html body .product .quantity input[type="text"] {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    font-size: 15px !important;
    line-height: 32px !important;
  }
}
/* ============================================
   KOŠÍK - TABULKA POLOŽEK (OPRAVENÁ VERZE)
   ============================================ */

/* 1. Hlavní pozadí a barvy (Společné) */
#content .cart-wrapper,
#content .cart-inner,
#content .cart-table,
#content .cart-table tr,
#content .cart-table td {
    background-color: transparent;
    border: none;
    color: var(--dh-text-white);
}

/* 2. DESKTOP VERZE (Původní vzhled) */
@media (min-width: 992px) {
    #content .cart-table tr.removeable {
        background-color: var(--dh-bg-darker);
    }
    #content .cart-table td {
        border-bottom: 1px solid rgba(218, 186, 91, 0.2);
        padding: 15px;
    }
}

/* 3. MOBILNÍ VERZE (Fix přetékání a "rozbitého" zobrazení) */


/* 4. Společné styly pro texty a prvky */
#content .cart-table .p-name a.main-link {
    color: var(--dh-text-white);
    font-weight: 700;
    text-decoration: none;
    transition: var(--dh-transition);
    font-size: 16px;
}

#content .cart-table .p-name a.main-link:hover {
    color: var(--dh-gold);
}

#content .cart-table .price-final {
    color: var(--dh-gold);
    font-weight: 700;
}

#content .cart-table .p-label,
#content .cart-table .unit-value {
    color: #999999;
    font-size: 13px;
}

#content .cart-table .remove-item {
    background: transparent;
    border: none;
    color: var(--dh-text-muted);
    cursor: pointer;
    transition: var(--dh-transition);
    box-shadow: none;
}

#content .cart-table .remove-item:hover {
    color: var(--dh-gold);
}

#content .cart-table .availability-label {
    font-weight: 600;
}
/* ============================================
   KOŠÍK - TLAČÍTKO HLEDAT
   Sjednocení se stylem DecorHand
   ============================================ */

html body #content .js-try-search-button.btn.btn-primary {
    background: var(--dh-gradient) !important;
    color: var(--dh-text-dark) !important;
    border: var(--dh-border-thick) !important;
    border-radius: 0 !important;

    font-family: var(--dh-font) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;

    padding: 12px 28px !important;
    min-height: 44px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer !important;

    transition: var(--dh-transition) !important;
}

/* Text uvnitř, kdyby ho Shoptet obalil spanem */
html body #content .js-try-search-button.btn.btn-primary span {
    color: var(--dh-text-dark) !important;
    font-family: var(--dh-font) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Hover */
html body #content .js-try-search-button.btn.btn-primary:hover,
html body #content .js-try-search-button.btn.btn-primary:focus {
    background: var(--dh-gradient-hover) !important;
    color: var(--dh-text-dark) !important;
    border-color: var(--dh-gold) !important;
    box-shadow: var(--dh-glow-lg) !important;
    transform: translateY(-2px) !important;
    outline: none !important;
}

/* Aktivní kliknutí */
html body #content .js-try-search-button.btn.btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}
/* ============================================
   KOŠÍK - RESET ODSAZENÍ OBSAHU NA MOBILU
   Ruší příliš velké globální paddingy jen pro košík.
   ============================================ */

@media (max-width: 991px) {
    body.in-kosik .content-wrapper-in,
    body.in-kosik #content,
    body.in-kosik .cart-inner,
    body.ordering-process .content-wrapper-in,
    body.ordering-process #content,
    body.ordering-process .cart-inner {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: none !important;
        width: 100% !important;
    }
}
/* ============================================
   KOŠÍK - ČÍSELNÍK MNOŽSTVÍ V TABULCE
   ============================================ */

/* 1. Hlavní obal číselníku (Ostré hrany a zlato) */
#content .cart-table .quantity {
    display: inline-flex;
    align-items: center;
    background-color: var(--dh-bg-darker);
    border: 1px solid var(--dh-gold);
    border-radius: 0;
    height: 44px;
    width: 120px;
    padding: 0;
    margin: 0 auto; /* Vycentrování v buňce tabulky */
}

/* 2. Správné seřazení prvků (Minus, Číslo, Plus) */
#content .cart-table .quantity .decrease { order: 1; }
#content .cart-table .quantity label { order: 2; }
#content .cart-table .quantity .increase { order: 3; }

/* 3. Obal samotného čísla */
#content .cart-table .quantity label {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex: 1;
}

/* 4. Tlačítka + a - */
#content .cart-table .quantity button {
    background-color: transparent;
    color: var(--dh-gold);
    border: none;
    border-radius: 0;
    width: 36px;
    height: 100%;
    font-size: 20px;
    cursor: pointer;
    transition: var(--dh-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

#content .cart-table .quantity button.decrease {
    border-right: 1px solid var(--dh-gold);
}

#content .cart-table .quantity button.increase {
    border-left: 1px solid var(--dh-gold);
}

#content .cart-table .quantity button:hover {
    background-color: rgba(218, 186, 91, 0.15);
    color: var(--dh-gold-light);
}

/* 5. Vlastní textové pole pro číslo */
#content .cart-table .quantity input.amount {
    background-color: transparent;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    border: none;
    border-radius: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    padding: 0;
    margin: 0;
    line-height: 42px;
    box-shadow: none;
    -moz-appearance: textfield;
}

/* Skrytí šipeček prohlížeče v poli */
#content .cart-table .quantity input.amount::-webkit-inner-spin-button,
#content .cart-table .quantity input.amount::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* ============================================
   KOŠÍK - INDIKÁTOR KROKŮ (Oprava zacílení na vnitřní prvky)
   ============================================ */

/* 1. Hlavní pozadí celého pruhu */
html body .cart-header {
    background-color: transparent;
    border: none;
}

/* 2. Zacílení přímo na bubliny s čísly (Shoptet je dává na strong a a) */
html body .cart-header li.step strong::before,
html body .cart-header li.step a::before {
    background-color: var(--dh-bg-darker); /* Tmavé pozadí místo bílé */
    color: var(--dh-gold); /* Zlaté číslo */
    border: 1px solid var(--dh-gold);
    border-radius: 0; /* HRANATÝ DESIGN */
    font-weight: 700;
    transition: var(--dh-transition);
}

/* 3. Barva textů vedle čísel (Nákupní košík, Doprava...) */
html body .cart-header li.step strong span,
html body .cart-header li.step a span {
    color: var(--dh-text-white);
    transition: var(--dh-transition);
}

html body .cart-header li.step a {
    text-decoration: none;
}

html body .cart-header li.step a:hover span {
    color: var(--dh-gold);
}

/* 4. Aktivní krok (Kde zrovna jsem) - inverzní barvy */
html body .cart-header li.step.active strong::before {
    background-color: var(--dh-gold); /* Vyplněný zlatý čtverec */
    color: var(--dh-bg-main); /* Tmavé číslo uvnitř */
    border-color: var(--dh-gold);
}

html body .cart-header li.step.active strong span {
    color: var(--dh-gold);
    font-weight: 700;
}

/* 5. Spojovací linky mezi kroky */
html body .cart-header li.step::after {
    background-color: rgba(218, 186, 91, 0.2);
}

/* 6. Ztlumení budoucích kroků pro lepší přehlednost */
html body .cart-header li.step.active ~ li.step a::before,
html body .cart-header li.step.active ~ li.step a span {
    opacity: 0.6; 
}

/* ============================================
   KOŠÍK - TLAČÍTKO POKRAČOVAT
   ============================================ */

/* 1. Sjednocený základ tlačítka s ostatními (.add-to-cart-button) */
#content #continue-order-button {
    background: var(--dh-gradient);
    color: var(--dh-text-dark) !important; /* Natvrdo černý text */
    border: var(--dh-border-thick);
    border-radius: 0;
    padding: 14px 32px;
    font-family: var(--dh-font);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--dh-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

/* 2. Obarvení vnitřního textu (Shoptet sem rád vnucuje bílou) */
#content #continue-order-button span.order-button-text,
#content #continue-order-button span {
    color: var(--dh-text-dark) !important; 
    font-family: var(--dh-font);
    font-weight: 700;
    transition: var(--dh-transition);
}

/* 3. Efekt po najetí myší (Podsvícení a mírné zvednutí) */
#content #continue-order-button:hover {
    background: var(--dh-gradient-hover);
    transform: translateY(-2px);
    box-shadow: var(--dh-glow-lg);
    color: var(--dh-text-dark) !important;
}

#content #continue-order-button:hover span {
    color: var(--dh-text-dark) !important;
}
/* ============================================
   OBJEDNÁVKA - TLAČÍTKO POKRAČOVAT (Krok 2)
   ============================================ */

/* 1. Sjednocený vzhled tlačítka (Gradient a ostré rohy) */
html body #orderFormButton {
    background: var(--dh-gradient);
    color: var(--dh-text-dark) !important;
    border: var(--dh-border-thick);
    border-radius: 0;
    padding: 14px 32px;
    font-family: var(--dh-font);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    transition: var(--dh-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    cursor: pointer;
}

/* 2. Obarvení textu uvnitř tlačítka na tmavou */
html body #orderFormButton span.order-button-text,
html body #orderFormButton span {
    color: var(--dh-text-dark) !important;
    font-family: var(--dh-font);
    font-weight: 700;
    transition: var(--dh-transition);
}

/* 3. Efekt po najetí myší */
html body #orderFormButton:hover {
    background: var(--dh-gradient-hover);
    transform: translateY(-2px);
    box-shadow: var(--dh-glow-lg);
}

html body #orderFormButton:hover span {
    color: var(--dh-text-dark) !important;
}
/* ============================================
   OBJEDNÁVKA - FINÁLNÍ TLAČÍTKO OBJEDNAT
   kompaktnější výška + lepší typografie
   ============================================ */

html body #submit-order,
html body .btn-conversion.next-step-finish {
  background: var(--dh-gradient) !important;
  color: var(--dh-text-dark) !important;
  border: var(--dh-border-thick) !important;
  border-radius: 0 !important;

  padding: 10px 28px !important;
  min-width: 230px !important;
  min-height: 58px !important;

  font-family: var(--dh-font) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;

  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;

  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: var(--dh-transition) !important;

  line-height: 1.1 !important;
}

html body #submit-order span,
html body #submit-order .order-button-text,
html body #submit-order .order-button-suffix {
  color: var(--dh-text-dark) !important;
  font-family: var(--dh-font) !important;
  text-shadow: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

html body #submit-order .order-button-text {
  font-size: 21px !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px !important;
}

html body #submit-order .order-button-suffix {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 0.95 !important;
}

html body #submit-order:hover {
  background: var(--dh-gradient-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--dh-glow-lg) !important;
}

html body #submit-order:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Mobil – ať není obří přes celou obrazovku */
@media (max-width: 767px) {
  html body #submit-order,
  html body .btn-conversion.next-step-finish {
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 9px 22px !important;
  }

  html body #submit-order .order-button-text {
    font-size: 20px !important;
  }

  html body #submit-order .order-button-suffix {
    font-size: 11px !important;
  }
}
/* ============================================
   KONTAKTNÍ TLAČÍTKO - POTŘEBUJETE POMOC? (Oprava zobrazení)
   ============================================ */

/* 1. Hlavní vzhled tlačítka ve svinutém stavu */
html body .btn.toggle-contacts {
    background: transparent;
    color: var(--dh-gold);
    border: var(--dh-border);
    border-radius: 0;
    padding: 10px 20px;
    font-family: var(--dh-font);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    transition: var(--dh-transition);
    display: block;
    text-align: center;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: none;
}

/* 2. Skrytí čísla a kontaktu, dokud není tlačítko aktivní/rozbalené */
html body .btn.toggle-contacts span,
html body .btn.toggle-contacts br {
    display: none; /* Ve výchozím stavu číslo i odřádkování zmizí */
}

/* 3. Zobrazení obsahu po rozbalení (Shoptet obvykle přidává třídu nebo mění vnitřek) */
/* Cílíme na stav, kdy Shoptet zobrazuje detaily */
html body .btn.toggle-contacts.active span,
html body .btn.toggle-contacts:not([data-text="Skrýt kontakty"]) span {
    /* Pokud Shoptet používá data-atributy pro změnu textu, 
       ponecháme kontrolu zobrazení na jeho skriptech a pouze stylovaně upravíme */
}

/* 4. Hover efekt - sjednocení s designem webu */
html body .btn.toggle-contacts:hover {
    background: var(--dh-gradient);
    color: var(--dh-text-dark);
    box-shadow: var(--dh-glow-lg);
    border-color: transparent;
}

/* 5. Úprava vzhledu čísla, až ho Shoptet sám "vyklopí" */
html body .btn.toggle-contacts span {
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    margin-top: 5px;
}

/* ============================================
   OBJEDNÁVKA - OSOBNÍ ÚDAJE (Tmavé boxy a čitelná pole)
   ============================================ */

/* 1. Přepnutí bílých boxů na tmavé pozadí */
#content .co-box {
    background-color: var(--dh-bg-darker);
    border: 1px solid rgba(218, 186, 91, 0.2);
    color: var(--dh-text-white);
    border-radius: 0;
}

/* 2. Nadpisy v boxech (Osobní údaje, Dodací adresa atd.) */
#content .co-box h4 {
    color: var(--dh-gold);
    border-bottom: 1px solid var(--dh-gold);
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-family: var(--dh-font);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 3. Stylování vstupních polí (Inputy) */
#content .co-box .form-control {
    background-color: var(--dh-bg-main);
    border: 1px solid #444;
    border-radius: 0;
    color: #ffffff;
    font-family: var(--dh-font);
    height: 45px;
    transition: var(--dh-transition);
}

#content .co-box .form-control:focus {
    border-color: var(--dh-gold);
    box-shadow: 0 0 5px rgba(218, 186, 91, 0.3);
    outline: none;
}

/* 4. Stylování popisků (Label) */
#content .co-box label {
    color: var(--dh-text-body);
    font-weight: 600;
    margin-bottom: 5px;
}

/* 5. Povinná hvězdička */
#content .co-box .required-asterisk::after {
    color: var(--dh-gold);
}

/* 6. Oprava barvy odkazu "Přihlásit se" */
#content .co-box .login-from-cart {
    color: var(--dh-gold);
    text-decoration: underline;
}

#content .co-box .login-from-cart:hover {
    color: var(--dh-gold-light);
}

/* 7. Speciální úprava pro telefonní volbu (Flags/Prefix) */
#content .phone-combined-input .country-flags {
    background-color: var(--dh-bg-main);
    border: 1px solid #444;
    border-radius: 0;
    color: #ffffff;
}

#content .phone-combined-input .country-flag-label {
    color: #ffffff;
}

/* ============================================
   OBJEDNÁVKA - CHECKBOXY (Čistá verze bez !important)
   ============================================ */

/* 1. Likvidace Shoptetí náhrady checkboxu (bílé políčko) */
/* Cílíme velmi přesně na strukturu v obsahu, abychom měli přirozenou prioritu */
#content .form-group label::before,
#content .form-group label::after,
#content .co-box label::before,
#content .co-box label::after {
    content: none;
    display: none;
}

/* 2. Styl pro tvůj skutečný checkbox */
#content input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--dh-bg-main);
    border: 1px solid var(--dh-gold);
    border-radius: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-right: 12px;
    display: inline-block;
}

/* 3. Vzhled po zaškrtnutí - barva pozadí */
#content input[type="checkbox"]:checked {
    background-color: var(--dh-gold);
}

/* 4. Vykreslení ČERNÉ fajfky */
#content input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--dh-text-dark);
    font-size: 16px;
    font-weight: 900;
}

/* 5. Zarovnání labelu k políčku 
#content label.whole-width,
#content .form-group label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}*/
/* ============================================
   OBJEDNÁVKA - ZAROVNÁNÍ CHECKBOX LABELŮ
   Omezeno jen na objednávkový proces
   ============================================ */

.ordering-process #content label.whole-width,
.ordering-process #content .form-group label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
/* ============================================
   OBJEDNÁVKA - IKONA NÁPOVĚDY (Otazník)
   ============================================ */

/* 1. Základní vzhled čtverečku s otazníkem */
#content .question-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: var(--dh-bg-main);
    color: var(--dh-gold);
    border: 1px solid var(--dh-gold);
    border-radius: 0; /* Ostré hrany podle tvého standardu */
    font-family: var(--dh-font);
    font-size: 14px;
    font-weight: 700;
    cursor: help;
    margin-left: 8px;
    transition: var(--dh-transition);
    vertical-align: middle;
}

/* 2. Hover stav - inverze barev */
#content .question-tooltip:hover {
    background-color: var(--dh-gold);
    color: var(--dh-text-dark);
    box-shadow: var(--dh-glow-sm);
}

/* ============================================
   OBJEDNÁVKA - VÝBĚR ZEMĚ (Sjednoceno s variantami)
   ============================================ */

/* 1. Základní vzhled roletky s vlastní zlatou šipkou */
#content select#billCountryId.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--dh-bg-main);
    color: var(--dh-text-white);
    border: var(--dh-border);
    border-radius: 0;
    padding: 10px 40px 10px 14px;
    
    /* Použití stejné zlaté šipky jako u variant produktu */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fada73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    cursor: pointer;
    height: 45px; /* Sjednocení výšky s ostatními poli v košíku */
    transition: var(--dh-transition);
}

/* 2. Stav při najetí nebo kliknutí (focus) */
#content select#billCountryId.form-control:focus,
#content select#billCountryId.form-control:hover {
    background-color: var(--dh-bg-darker);
    border-color: var(--dh-gold-light);
    box-shadow: var(--dh-glow-sm);
    outline: none;
}

/* 3. Vzhled vyskakovacích možností (Options) */
#content select#billCountryId.form-control option {
    background-color: var(--dh-bg-main);
    color: var(--dh-text-white);
    padding: 10px;
}

/* ============================================
   OBJEDNÁVKA - FIX PRO AUTOMATICKÉ VYPLŇOVÁNÍ (Autofill)
   ============================================ */

/* 1. Zamezení bílé barvy po automatickém vyplnění prohlížečem */
#content .co-box input:-webkit-autofill,
#content .co-box input:-webkit-autofill:hover, 
#content .co-box input:-webkit-autofill:focus,
#content .co-box textarea:-webkit-autofill,
#content .co-box textarea:-webkit-autofill:hover,
#content .co-box textarea:-webkit-autofill:focus,
#content .co-box select:-webkit-autofill,
#content .co-box select:-webkit-autofill:hover,
#content .co-box select:-webkit-autofill:focus {
    /* Tento trik využívá vnitřní stín k "přebarvení" pole zpět na tmavo */
    -webkit-text-fill-color: #ffffff; /* Vynutí bílou barvu textu */
    transition: background-color 5000s ease-in-out 0s; /* Zpomalí změnu pozadí na nekonečno */
    box-shadow: 0 0 0px 1000px var(--dh-bg-main) inset; /* Vloží tvoje tmavé pozadí dovnitř pole */
}

/* 2. Sjednocení barev i pro běžně vyplněné pole */
#content .co-box .form-control {
    background-color: var(--dh-bg-main);
    color: #ffffff;
}

/* ============================================
   OBJEDNÁVKA ODESLÁNA – PLATBA A DORUČENÍ
   Zachování původního rozložení Shoptetu
   Pouze změna barev
   ============================================ */

/* Hlavní blok */
html body #content .co-box.co-payment-method:has(.recapitulation-table) {
    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Nadpis */
html body #content .co-box.co-payment-method:has(.recapitulation-table) h4.order-payment {
    color: var(--dh-gold, #fada73) !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Tabulka – rozložení ponechá Shoptet */
html body #content .co-box.co-payment-method:has(.recapitulation-table) .recapitulation-table,
html body #content .co-box.co-payment-method:has(.recapitulation-table) .recapitulation-table tbody,
html body #content .co-box.co-payment-method:has(.recapitulation-table) .recapitulation-table tr,
html body #content .co-box.co-payment-method:has(.recapitulation-table) .recapitulation-table th,
html body #content .co-box.co-payment-method:has(.recapitulation-table) .recapitulation-table td {
    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Názvy údajů */
html body #content .co-box.co-payment-method:has(.recapitulation-table) .recapitulation-table th {
    color: var(--dh-text-muted, #999999) !important;
}

/* Hodnoty */
html body #content .co-box.co-payment-method:has(.recapitulation-table) .recapitulation-table td {
    color: var(--dh-text-white, #ffffff) !important;
}

/* Zvýrazněné hodnoty */
html body #content .co-box.co-payment-method:has(.recapitulation-table) .recapitulation-table .price-final,
html body #content .co-box.co-payment-method:has(.recapitulation-table) .recapitulation-table td[data-testid="orderTotalPrice"],
html body #content .co-box.co-payment-method:has(.recapitulation-table) .recapitulation-table strong {
    color: var(--dh-gold, #fada73) !important;
}
/* ============================================
   STRÁNKA PO ODESLÁNÍ - PRÉMIOVÁ IKONA ÚSPĚCHU
   ============================================ */

/* 1. Hlavní kontejner pro ikonu (kroužek) */
#content .payment-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    background-color: transparent; /* Zrušíme to ošklivé šedé pozadí */
    border: 2px solid var(--dh-gold); /* Elegantní zlatý kroužek */
    border-radius: 50%;
    margin: 30px auto; /* Vycentrování na střed */
    box-shadow: var(--dh-glow-md); /* Jemná zlatá záře */
    transition: var(--dh-transition);
}

/* 2. Původní Shoptetí ikona (vypneme ji, aby nezavazela) */
#content .payment-success-icon i.icon-tick {
    display: none !important;
}

/* 3. Vložení naší VLASTNÍ zlaté fajfky (SVG) */
#content .payment-success-icon::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    
    /* Prémiová zlatá fajfka (SVG) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fada73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* ============================================
   STRÁNKA PO ODESLÁNÍ - TLAČÍTKO ZPĚT DO OBCHODU
   ============================================ */

/* 1. Sjednocení se stylem tvých sekundárních tlačítek (jako Detail) */
#content a.btn-conversion[href="/"] {
    background: transparent;
    color: var(--dh-gold);
    border: var(--dh-border);
    border-radius: 0;
    padding: 12px 32px;
    font-family: var(--dh-font);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    transition: var(--dh-transition);
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
}

/* 2. Hover efekt - plynulé vyplnění zlatem */
#content a.btn-conversion[href="/"]:hover {
    background: var(--dh-gradient);
    color: var(--dh-text-dark);
    box-shadow: var(--dh-glow-lg);
    border-color: transparent;
}

/* ============================================
   KOŠÍK - INDIKÁTOR KROKŮ (Oprava barev textu)
   ============================================ */

/* 1. Hlavní pozadí celého pruhu */
html body .cart-header {
    background-color: transparent;
    border: none;
}

/* 2. Čísla v bublinách (1, 2, 3) */
html body .cart-header li.step strong::before, 
html body .cart-header li.step a::before {
    background-color: var(--dh-bg-darker);
    color: var(--dh-gold);
    border: 1px solid var(--dh-gold);
    border-radius: 0;
    font-weight: 700;
    transition: var(--dh-transition);
}

/* 3. ZÁKLADNÍ BARVA TEXTŮ (Bílá pro všechny viditelné kroky) */
html body .cart-header li.step strong span, 
html body .cart-header li.step a span {
    color: var(--dh-text-white) !important; /* Vynutíme bílou */
    opacity: 1 !important; /* Zrušíme případné zprůhlednění */
    transition: var(--dh-transition);
}

/* 4. AKTIVNÍ KROK (Bod, kde se právě nacházíš) */
html body .cart-header li.step.active strong::before {
    background-color: var(--dh-gold); /* Zlaté pozadí čísla */
    color: var(--dh-bg-main);       /* Tmavé číslo uvnitř */
    border-color: var(--dh-gold);
}

html body .cart-header li.step.active strong span {
    color: var(--dh-gold) !important; /* Aktivní text bude ZLATÝ */
    font-weight: 700;
}

/* 5. SPOJOVACÍ LINKY */
html body .cart-header li.step::after {
    background-color: rgba(218, 186, 91, 0.2);
}

/* 6. ZEŠEDNUTÍ POUZE BUDOUCÍCH (neaktivních) KROKŮ */
/* Pokud chceš mít body 1 a 3 bílé, když jsi na dvojce, tohle raději smaž nebo uprav takto: */
html body .cart-header li.step.active ~ li.step a span,
html body .cart-header li.step.active ~ li.step a::before {
    opacity: 0.5; /* Jen kroky, co jsou před námi, budou trochu tmavší */
}
/* ============================================
   KOŠÍK - INDIKÁTOR KROKŮ (Fix jasu před kliknutím)
   ============================================ */

/* 1. Cílíme pouze na bubliny, které NEJSOU aktivní (před kliknutím) */
.cart-header li.step:not(.active) a::before,
.cart-header li.step:not(.active) strong::before {
    color: var(--dh-gold) !important; /* Jasná zlatá místo šedé */
    opacity: 1 !important;
    background-color: var(--dh-bg-darker) !important;
}

/* 2. Cílíme pouze na texty, které NEJSOU aktivní */
.cart-header li.step:not(.active) a span,
.cart-header li.step:not(.active) strong span {
    color: var(--dh-text-white) !important; /* Jasná bílá místo šedé */
    opacity: 1 !important;
}

/* 3. Zrušení Shoptet "závoje" (opacity) pro budoucí kroky */
.cart-header li.step {
    opacity: 1 !important;
}

/* 4. Spojovací čáry mezi kroky ponecháme jemné */
.cart-header li.step::after {
    background-color: rgba(218, 186, 91, 0.2) !important;
}

/* ============================================
   CONTENT WRAPPER & ODSAZENÍ (Fix "nalepení" zleva)
   ============================================ */

/* Hlavní obal webu - zajistí, že obsah nebude nalepený na okrajích */
.content-wrapper-in, 
#content,
.cart-inner {
    max-width: 1400px !important; /* Maximální šířka pro velká LCD */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;  /* Tady je to tvoje místo vlevo */
    padding-right: 40px !important; /* Symetrické místo vpravo */
}

/* Mobilní verze - tam stačí menší odsazení, aby zbyl prostor pro fotky */
@media (max-width: 768px) {
    .content-wrapper-in, 
    #content,
    .cart-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Fix pro hlavičku košíku (kroky 1-2-3), aby lícovaly s obsahem */
.cart-header {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

/* ============================================
   ÚPRAVA BARVY DOSTUPNOSTI (Skladem)
   ============================================ */
/* Překrytí zelené barvy tvou zlatou (#fada73) */
html body .availability-label,
html body .availability span,
html body .p-final-info .availability,
html body .product-detail-status .availability {
    color: var(--dh-gold) !important;
    font-weight: 700 !important; /* Aby to bylo dobře čitelné */
}

/* Pokud tam Shoptet dává tečku nebo ikonku, obarvíme ji taky */
html body .availability-label::before,
html body .availability i {
    color: var(--dh-gold) !important;
}

/* ============================================
   SYSTÉMOVÉ HLÁŠKY - KOŠÍK, KLIENTSKÁ ZÓNA, FORMULÁŘE
   Sjednocení msg-success a msg-info
   ============================================ */

/* Hlavní vzhled hlášky */
html body div.messages .msg-success,
html body div.messages .msg-info,
html body div.messages .msg-notice,
html body .messages div.msg.msg-success,
html body .messages div.msg.msg-info,
html body .messages div.msg.msg-notice {
    background: var(--dh-gradient) !important;
    color: var(--dh-text-dark) !important;

    border: var(--dh-border-thick) !important;
    border-radius: 0 !important;

    font-family: var(--dh-font) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;

    text-align: center !important;

    padding: 16px 20px !important;
    margin-top: 10px !important;

    box-shadow: var(--dh-glow-md) !important;
    text-shadow: none !important;
}

/* Odkazy uvnitř hlášky */
html body div.messages .msg-success a,
html body div.messages .msg-info a,
html body div.messages .msg-notice a,
html body .messages div.msg.msg-success a,
html body .messages div.msg.msg-info a,
html body .messages div.msg.msg-notice a {
    color: var(--dh-text-dark) !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

/* Text / ikony / pseudo prvky uvnitř hlášky */
html body div.messages .msg-success *,
html body div.messages .msg-info *,
html body div.messages .msg-notice *,
html body .messages div.msg.msg-success *,
html body .messages div.msg.msg-info *,
html body .messages div.msg.msg-notice * {
    color: var(--dh-text-dark) !important;
    text-shadow: none !important;
}

html body div.messages .msg-success::before,
html body div.messages .msg-info::before,
html body div.messages .msg-notice::before,
html body .messages div.msg.msg-success::before,
html body .messages div.msg.msg-info::before,
html body .messages div.msg.msg-notice::before {
    color: var(--dh-text-dark) !important;
}

/* Obal hlášek bez modrého/šedého pozadí */
html body div.messages,
html body .messages,
html body div.messages .msg-wrapper,
html body .messages .msg-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* ============================================
  TABULKA PARAMETRŮ – PŮVODNÍ FUNKČNÍ DESIGN (Finální vyladěná verze)
   ============================================ */

/* Hlavní obal tabulky - tlumený poloprůhledný rám */
.extended-description .detail-parameters {
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-collapse: collapse;
    width: 100%;
    background-color: transparent;
}

/* Nastavení buněk - velmi jemné ohraničení */
.detail-parameters th,
.detail-parameters td {
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Téměř neviditelná linka */
    padding: 12px 15px;
    background-color: transparent !important;
    height: auto;
}

/* Levý sloupec - Ztlumený šedý text bez zbytečné tučnosti */
.detail-parameters th,
.detail-parameters th .row-header-label {
    color: var(--dh-text-muted) !important; 
    font-weight: 400 !important; /* Zruší tučné písmo */
    text-align: left;
}

/* Pravý sloupec - bílé hodnoty */
.detail-parameters td,
.detail-parameters td a {
    color: var(--dh-text-white) !important;
    text-decoration: none;
}

/* Odstranění Shoptet prvků (dvojtečky, otazníky) */
.detail-parameters .row-header-label-colon,
.detail-parameters .question-tooltip {
    display: none !important;
}

/* Vypnutí řádkových stylů Shoptetu (Zebrování a hover efekty) */
.detail-parameters tr,
.detail-parameters tr:nth-child(odd),
.detail-parameters tr:nth-child(even),
.detail-parameters tr:hover {
    background-color: transparent !important;
    background: transparent !important;
    border: none;
}

/* Oprava pro mobilní zobrazení */
@media (max-width: 768px) {
    .detail-parameters th {
        width: 40%;
    }
}

/* ============================================
 . TLAČÍTKO FILTRU (Pouze barva - bezpečný kód)
   ============================================ */

/* 1. Tlačítko - beze změn oproti tvému funkčnímu základu */
html body .btn.btn-default.unveil-button {
    background-color: transparent !important;
    color: var(--dh-gold) !important;
    border: var(--dh-border) !important;
    border-radius: 0 !important;
    padding: 12px 50px 12px 24px !important; 
    font-family: var(--dh-font) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: var(--dh-transition) !important;
    display: inline-block !important;
}

/* 2. Hover stav tlačítka */
html body .btn.btn-default.unveil-button:hover {
    background: var(--dh-gradient) !important;
    color: var(--dh-text-dark) !important;
    border-color: transparent !important;
}

/* 3. BARVA IKONKY PŘI NAJETÍ - Bez manipulace s pozicí */
/* Tenhle kód říká: Když najedeš na wrapper, změň barvu ikonky i uvnitř na černo */
.filters-unveil-button-wrapper:hover i.icon-filter {
    color: var(--dh-text-dark) !important;
    transition: var(--dh-transition) !important;
}

/* Pojistka pro mobil, aby zůstala bílá v klidu */
html body i.icon-filter {
    color: #ffffff;
}
/* ============================================
 MOBILNÍ ROZLOŽENÍ: 1 PRODUKT NA ŘÁDEK
   ============================================ */

@media (max-width: 767px) {
    /* Změna šířky produktové karty na celý řádek */
    .products .product,
    .category-products .product,
    .product-category .products .product,
    .products-block .product {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        margin-bottom: 30px;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    /* Centrování obsahu v kartě produktu */
    .product {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Centrování obrázku a omezení jeho velikosti, aby nebyl obří */
    .product .image {
        margin: 0 auto 15px auto;
        max-width: 300px;
        display: block;
    }

    /* Zajištění, aby ceny a názvy byly pod sebou na středu */
    .product .p-info, 
    .product .p-bottom {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
/* ============================================
   14. ÚPRAVA KATEGORIÍ (Odstranění čáry a čištění)
   ============================================ */

/* 1. Odstranění čáry u celého bloku (PC i Mobil) */
.category-top {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Sjednocení nadpisu kategorie na mobilu */
@media (max-width: 767px) {
    .category-top h1.category-title {
        font-size: 1.5rem !important; /* Stejná velikost jako na homepage */
        color: var(--dh-gold) !important;
        font-family: var(--dh-font) !important;
        font-weight: bold !important;
        text-align: center !important;
        margin-top: 40px !important; /* Mezera od horního menu */
        margin-bottom: 10px !important;
    }
}

/* ============================================
   FIX PŘEKRÝVÁNÍ NÁZVU PRODUKTU (Mobil)
   ============================================ */
@media (max-width: 767px) {
    /* Zrušíme pevnou výšku názvu, aby se blok mohl natáhnout */
    html body .product .name {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 10px !important; /* Mezera mezi názvem a cenou */
        display: block !important;
        overflow: visible !important;
    }

    /* Zajistíme, aby info blok pod názvem nebyl fixně pozicovaný */
    html body .product .p-info {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    /* Odstranění případného ořezávání textu */
    html body .product .name a {
        white-space: normal !important;
        line-height: 1.3 !important;
        display: block !important;
    }
}
/* ============================================
   PATIČKA: Centrování a mezery (Low Priority)
   ============================================ */
@media (max-width: 767px) {
    /* Centrování textu v celém footeru */
    .footer {
        text-align: center;
    }

    /* Nadpisy v patičce */
    .footer-box h4 {
        margin-top: 25px;
        margin-bottom: 10px;
        text-align: center;
    }

    /* Seznamy - odstranění odrážek a centrování */
    .footer-box ul {
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
    }

    /* Řádky v seznamu - jemné mezery */
    .footer-box li {
        margin-bottom: 4px; /* Tady ovládáš mezeru mezi řádky */
        padding: 0;
        list-style-type: none;
    }

    /* Samotné odkazy - zmenšení výšky řádku */
    .footer-box a {
        line-height: 1.3;
        display: inline-block;
        font-size: 15px;
        padding: 2px 0;
    }

    /* Blok s kontaktem */
    .footer-box .contact-item {
        display: block;
        margin-bottom: 5px;
        text-align: center;
    }
}
/* ============================================
   PATIČKA: Nejsilnější možná cesta bez important
   ============================================ */
@media (max-width: 767px) {
    /* Cesta přes body a všechny nadřazené třídy */
    html body #footer .custom-footer__articles ul,
    html body .footer .custom-footer__articles ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    html body #footer .custom-footer__articles ul li,
    html body .footer .custom-footer__articles ul li {
        margin: 0;
        padding: 0;
        line-height: 1; /* Naprosté minimum */
    }

    html body #footer .custom-footer__articles ul li a,
    html body .footer .custom-footer__articles ul li a {
        padding: 1px 0; /* Tady to stáhneme na krev */
        margin: 0;
        line-height: 1.1;
        display: inline-block;
    }

    /* Nadpis h3 - zkusíme ho taky víc přitáhnout */
    html body #footer .custom-footer__articles h3.pageElement__heading {
        margin-bottom: 5px;
    }
}

/* ============================================
   COLORBOX GALERIE - DECENTNÍ ZLATÉ ŠIPKY
   ============================================ */

/* Společný základ pro šipky */
html body #cboxPrevious,
html body #cboxNext {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 46px !important;
    height: 72px !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;

    cursor: pointer !important;
    z-index: 9999 !important;
    opacity: 0.68 !important;

    transition: var(--dh-transition) !important;
}

/* Umístění */
html body #cboxPrevious {
    left: 10px !important;
}

html body #cboxNext {
    right: 10px !important;
}

/* Vlastní šipky */
html body #cboxPrevious::after,
html body #cboxNext::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 22px !important;
    height: 22px !important;

    border-top: 3px solid var(--dh-gold) !important;
    border-right: 3px solid var(--dh-gold) !important;

    opacity: 0.9 !important;
    transition: var(--dh-transition) !important;
}

/* Levá šipka */
html body #cboxPrevious::after {
    transform: translate(-35%, -50%) rotate(-135deg) !important;
}

/* Pravá šipka */
html body #cboxNext::after {
    transform: translate(-65%, -50%) rotate(45deg) !important;
}

/* Hover - jen jemné zvýraznění */
html body #cboxPrevious:hover,
html body #cboxNext:hover {
    opacity: 1 !important;
}

html body #cboxPrevious:hover::after,
html body #cboxNext:hover::after {
    border-color: var(--dh-gold-light) !important;
}

/* Schování textového popisku image 1 of 3, pokud ho nechceš */
html body #cboxCurrent {
    color: var(--dh-text-muted) !important;
    font-family: var(--dh-font) !important;
    font-size: 12px !important;
    opacity: 0.55 !important;
}
/* ============================================
   REGISTRACE - TLAČÍTKO REGISTROVAT
   Silnější zacílení pro Shoptet
   ============================================ */

input.btn.btn-secondary.btn-text.btn-login[type="submit"] {
    background: var(--dh-gradient) !important;
    color: var(--dh-text-dark) !important;
    border: var(--dh-border-thick) !important;
    border-radius: 0 !important;

    font-family: var(--dh-font) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;

    padding: 12px 32px !important;
    min-height: 44px !important;
    min-width: 180px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;

    cursor: pointer !important;
    transition: var(--dh-transition) !important;
}

input.btn.btn-secondary.btn-text.btn-login[type="submit"]:hover,
input.btn.btn-secondary.btn-text.btn-login[type="submit"]:focus {
    background: var(--dh-gradient-hover) !important;
    color: var(--dh-text-dark) !important;
    border-color: var(--dh-gold) !important;
    box-shadow: var(--dh-glow-lg) !important;
    transform: translateY(-2px) !important;
    outline: none !important;
}

input.btn.btn-secondary.btn-text.btn-login[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* ============================================
   FORMULÁŘ - OTÁZNÍK U DIČ / VAT
   Bez zásahu do checkboxů
   ============================================ */

/* obal pole s tooltipem */
.form-group {
    position: relative !important;
}

/* samotný otazník */
.show-tooltip.question-tooltip.form-group-tooltip {
    position: absolute !important;

    right: 8px !important;
    top: auto !important;
    bottom: 12px !important;
    transform: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--dh-bg-darker) !important;
    border: 1px solid var(--dh-gold) !important;
    border-radius: 0 !important;

    color: var(--dh-gold) !important;
    font-family: var(--dh-font) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-align: center !important;

    box-shadow: none !important;
    z-index: 5 !important;
    cursor: help !important;
}

/* hover */
.show-tooltip.question-tooltip.form-group-tooltip:hover {
    background: var(--dh-gradient) !important;
    color: var(--dh-text-dark) !important;
    border-color: var(--dh-gold) !important;
}

/* místo vpravo jen u textových inputů, ne u checkboxů */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input:not([type]) {
    padding-right: 34px !important;
}

/* ============================================
   FORMULÁŘE - CHECKBOXY DECORHAND
   Oprava po tooltipu, bez modrého nativního vzhledu
   ============================================ */

input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;

    margin: 0 12px 0 0 !important;
    padding: 0 !important;

    background: var(--dh-bg-darker) !important;
    border: 1px solid var(--dh-gold) !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    position: relative !important;
}

/* Zaškrtnutý stav */
input[type="checkbox"]:checked {
    background: var(--dh-gradient) !important;
    border-color: var(--dh-gold) !important;
}

/* Fajfka */
input[type="checkbox"]:checked::after {
    content: "✓" !important;

    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -52%) !important;

    color: var(--dh-text-dark) !important;
    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

/* Focus */
input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(250, 218, 115, 0.2) !important;
}

/* ============================================
   CHECKOUT – krok Informace o vás
   pozadí hlavního bloku podle DecorHand stylu
   bez zlatých ohraničení
   ============================================ */

html body #order-form #checkoutContent .cart-content {
  background: var(--dh-bg-main) !important;
  color: var(--dh-text-white) !important;
  border: none !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35) !important;
}

/* Vnitřní části formuláře – ať Shoptet netlačí bílé/černé pozadí */
html body #order-form #checkoutContent .cart-content > *,
html body #order-form #checkoutContent .cart-content .form-group,
html body #order-form #checkoutContent .cart-content .form-group-wrapper,
html body #order-form #checkoutContent .cart-content .form-group-wrapped,
html body #order-form #checkoutContent .cart-content fieldset {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Nadpisy a popisky ve formuláři */
html body #order-form #checkoutContent .cart-content h1,
html body #order-form #checkoutContent .cart-content h2,
html body #order-form #checkoutContent .cart-content h3,
html body #order-form #checkoutContent .cart-content h4,
html body #order-form #checkoutContent .cart-content label,
html body #order-form #checkoutContent .cart-content .form-group label {
  color: var(--dh-text-white) !important;
}

/* Zlatá zůstává jen na textech/ikonkách, ne na rámečcích */
html body #order-form #checkoutContent .cart-content .cart-content-title,
html body #order-form #checkoutContent .cart-content .co-box-title,
html body #order-form #checkoutContent .cart-content .order-summary-heading,
html body #order-form #checkoutContent .cart-content .icon,
html body #order-form #checkoutContent .cart-content .required-asterisk,
html body #order-form #checkoutContent .cart-content .form-group label .required {
  color: var(--dh-gold) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Textová pole – černá, hranatá, bílé písmo, zlatý rámeček */
html body #order-form #checkoutContent .cart-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html body #order-form #checkoutContent .cart-content textarea,
html body #order-form #checkoutContent .cart-content select {
  background: #000000 !important;
  background-color: #000000 !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;

  border: 1px solid var(--dh-gold) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  outline: none !important;

  font-family: var(--dh-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;

  min-height: 48px !important;
  padding: 11px 14px !important;

  box-sizing: border-box !important;
}

/* Textarea zvlášť */
html body #order-form #checkoutContent .cart-content textarea {
  min-height: 90px !important;
  resize: vertical !important;
}

/* Focus */
html body #order-form #checkoutContent .cart-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
html body #order-form #checkoutContent .cart-content textarea:focus,
html body #order-form #checkoutContent .cart-content select:focus {
  background: #000000 !important;
  background-color: #000000 !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border-color: var(--dh-gold-light) !important;
  box-shadow: 0 0 0 1px rgba(250, 218, 115, 0.18) !important;
  outline: none !important;
}

/* Placeholder */
html body #order-form #checkoutContent .cart-content input::placeholder,
html body #order-form #checkoutContent .cart-content textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.45) !important;
}

/* Autofill – Chrome jinak cpe světlé pozadí */
html body #order-form #checkoutContent .cart-content input:-webkit-autofill,
html body #order-form #checkoutContent .cart-content input:-webkit-autofill:hover,
html body #order-form #checkoutContent .cart-content input:-webkit-autofill:focus,
html body #order-form #checkoutContent .cart-content textarea:-webkit-autofill,
html body #order-form #checkoutContent .cart-content textarea:-webkit-autofill:hover,
html body #order-form #checkoutContent .cart-content textarea:-webkit-autofill:focus,
html body #order-form #checkoutContent .cart-content select:-webkit-autofill,
html body #order-form #checkoutContent .cart-content select:-webkit-autofill:hover,
html body #order-form #checkoutContent .cart-content select:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  box-shadow: 0 0 0 1000px #000000 inset !important;
  border: 1px solid var(--dh-gold) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* Checkboxy/radia necháváme systému – žádné rozbíjení fajfek */
html body #order-form #checkoutContent .cart-content input[type="checkbox"],
html body #order-form #checkoutContent .cart-content input[type="radio"] {
  border-radius: initial !important;
  box-shadow: none !important;
}

/* ============================================
   CHECKOUT – pravá rekapitulace objednávky
   odstranění čar + úprava spodního souhlasu
   ============================================ */

/* Odstranění bílých svislých čar v rekapitulaci */
html body #order-form .col-md-4 table,
html body #order-form .col-md-4 tr,
html body #order-form .col-md-4 td,
html body #order-form .col-md-4 th,
html body #order-form .col-md-4 .table,
html body #order-form .col-md-4 .table td,
html body #order-form .col-md-4 .table th {
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* Kdyby Shoptet dělal čáry přes pseudo-prvky */
html body #order-form .col-md-4 td::before,
html body #order-form .col-md-4 td::after,
html body #order-form .col-md-4 th::before,
html body #order-form .col-md-4 th::after {
  display: none !important;
  content: none !important;
}

/* Počet kusů a cena bez oddělovacích čar */
html body #order-form .col-md-4 .quantity,
html body #order-form .col-md-4 .amount,
html body #order-form .col-md-4 .price {
  border: none !important;
  box-shadow: none !important;
}

/* Spodní text se souhlasem – ať se neláme jak účtenka z devadesátek */
html body #order-form .col-md-4 .agreement,
html body #order-form .col-md-4 .site-agreement,
html body #order-form .col-md-4 .consents,
html body #order-form .col-md-4 .consent,
html body #order-form .col-md-4 .conditions,
html body #order-form .col-md-4 label[for*="agreement"],
html body #order-form .col-md-4 label[for*="consent"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 20px !important;
  padding-top: 10px !important;
  color: var(--dh-text-white) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  border: none !important;
  box-shadow: none !important;
}

/* Odkazy uvnitř souhlasu normálně v řádku */
html body #order-form .col-md-4 .agreement a,
html body #order-form .col-md-4 .site-agreement a,
html body #order-form .col-md-4 .consents a,
html body #order-form .col-md-4 .consent a,
html body #order-form .col-md-4 .conditions a,
html body #order-form .col-md-4 label[for*="agreement"] a,
html body #order-form .col-md-4 label[for*="consent"] a,
html body #order-form .col-md-4 .agreement span,
html body #order-form .col-md-4 .site-agreement span,
html body #order-form .col-md-4 .consents span,
html body #order-form .col-md-4 .consent span,
html body #order-form .col-md-4 .conditions span,
html body #order-form .col-md-4 label[for*="agreement"] span,
html body #order-form .col-md-4 label[for*="consent"] span {
  display: inline !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Zlaté odkazy v souhlasu */
html body #order-form .col-md-4 .agreement a,
html body #order-form .col-md-4 .site-agreement a,
html body #order-form .col-md-4 .consents a,
html body #order-form .col-md-4 .consent a,
html body #order-form .col-md-4 .conditions a,
html body #order-form .col-md-4 label[for*="agreement"] a,
html body #order-form .col-md-4 label[for*="consent"] a {
  color: var(--dh-gold) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

html body #order-form .col-md-4 .agreement a:hover,
html body #order-form .col-md-4 .site-agreement a:hover,
html body #order-form .col-md-4 .consents a:hover,
html body #order-form .col-md-4 .consent a:hover,
html body #order-form .col-md-4 .conditions a:hover,
html body #order-form .col-md-4 label[for*="agreement"] a:hover,
html body #order-form .col-md-4 label[for*="consent"] a:hover {
  text-decoration: underline !important;
}
/* ============================================
   CHECKOUT – rekapitulace: odstranění čar mezi názvem / množstvím / cenou
   podle reálného HTML .cart-item
   funguje ve všech krocích objednávky
   ============================================ */

html body.ordering-process .cart-item,
html body.ordering-process .cart-item-name,
html body.ordering-process .cart-item-amount,
html body.ordering-process .cart-item-price,
html body.ordering-process [data-testid="recapCartItem"],
html body.ordering-process [data-testid="recapItemName"],
html body.ordering-process [data-testid="recapItemAmount"],
html body.ordering-process [data-testid="recapItemPrice"] {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

/* Kdyby to Shoptet kreslil přes pseudoprvky */
html body.ordering-process .cart-item::before,
html body.ordering-process .cart-item::after,
html body.ordering-process .cart-item-name::before,
html body.ordering-process .cart-item-name::after,
html body.ordering-process .cart-item-amount::before,
html body.ordering-process .cart-item-amount::after,
html body.ordering-process .cart-item-price::before,
html body.ordering-process .cart-item-price::after,
html body.ordering-process [data-testid="recapCartItem"]::before,
html body.ordering-process [data-testid="recapCartItem"]::after,
html body.ordering-process [data-testid="recapItemName"]::before,
html body.ordering-process [data-testid="recapItemName"]::after,
html body.ordering-process [data-testid="recapItemAmount"]::before,
html body.ordering-process [data-testid="recapItemAmount"]::after,
html body.ordering-process [data-testid="recapItemPrice"]::before,
html body.ordering-process [data-testid="recapItemPrice"]::after {
  display: none !important;
  content: none !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}
/* ============================================
   FIX – PRODUKTOVÉ POČÍTADLO
   odstranění extra svislých čar u - a +
   ponechá jen čisté rozdělení přes prostřední číslo
   ============================================ */

/* Vynulování všech čar na minus/plus prvcích i jejich obalech */
html body .p-detail .quantity .decrease,
html body .p-detail .quantity .increase,
html body .p-detail .quantity .minus,
html body .p-detail .quantity .plus,
html body .p-detail .quantity [class*="decrease"],
html body .p-detail .quantity [class*="increase"],
html body .p-detail .quantity [class*="minus"],
html body .p-detail .quantity [class*="plus"],
html body .p-detail-inner .quantity .decrease,
html body .p-detail-inner .quantity .increase,
html body .p-detail-inner .quantity .minus,
html body .p-detail-inner .quantity .plus,
html body .p-detail-inner .quantity [class*="decrease"],
html body .p-detail-inner .quantity [class*="increase"],
html body .p-detail-inner .quantity [class*="minus"],
html body .p-detail-inner .quantity [class*="plus"],
html body .add-to-cart .quantity .decrease,
html body .add-to-cart .quantity .increase,
html body .add-to-cart .quantity .minus,
html body .add-to-cart .quantity .plus,
html body .add-to-cart .quantity [class*="decrease"],
html body .add-to-cart .quantity [class*="increase"],
html body .add-to-cart .quantity [class*="minus"],
html body .add-to-cart .quantity [class*="plus"],
html body .product .quantity .decrease,
html body .product .quantity .increase,
html body .product .quantity .minus,
html body .product .quantity .plus,
html body .product .quantity [class*="decrease"],
html body .product .quantity [class*="increase"],
html body .product .quantity [class*="minus"],
html body .product .quantity [class*="plus"] {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Vynulování borderů na všech přímých dětech počítadla */
html body .p-detail .quantity > *,
html body .p-detail-inner .quantity > *,
html body .add-to-cart .quantity > *,
html body .product .quantity > * {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Prostřední pole s číslem udělá jediné dvě čisté svislé čáry */
html body .p-detail .quantity label,
html body .p-detail-inner .quantity label,
html body .add-to-cart .quantity label,
html body .product .quantity label {
  border-left: 1px solid var(--dh-gold) !important;
  border-right: 1px solid var(--dh-gold) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Input uvnitř bez vlastní čáry */
html body .p-detail .quantity label input,
html body .p-detail-inner .quantity label input,
html body .add-to-cart .quantity label input,
html body .product .quantity label input {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* ============================================
   COLORBOX PRODUKTOVÁ GALERIE – jednotný 1:1 fix
   platí pro PC / tablet / mobil
   nezasahuje do Dotaz na prodejce
   ============================================ */

html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  transform: translate(-50%, -50%) !important;

  width: min(82vmin, calc(100vw - 32px)) !important;
  max-width: min(82vmin, calc(100vw - 32px)) !important;
  min-width: 0 !important;

  height: min(82vmin, calc(100vw - 32px)) !important;
  max-height: min(82vmin, calc(100vw - 32px)) !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
}

html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxWrapper,
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxContent,
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxLoadedContent {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: var(--dh-bg-main) !important;
  background-color: var(--dh-bg-main) !important;

  border: none !important;
  box-shadow: none !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxLoadedContent > img.cboxPhoto {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;

  object-fit: contain !important;

  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;

  background: transparent !important;
  box-sizing: border-box !important;
}

/* zavírací křížek */
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxClose {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 10001 !important;
}

/* šipky */
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxPrevious {
  left: 12px !important;
}

html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxNext {
  right: 12px !important;
}

/* mobil – trochu větší využití šířky */
@media (max-width: 767px) {
  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;

    height: calc(100vw - 24px) !important;
    max-height: calc(100vw - 24px) !important;
  }
}
/* ============================================
   COLORBOX PRODUKTOVÁ GALERIE – bezpečné velikosti podle zařízení
   přepisuje jednotný 1:1 blok
   ============================================ */

/* tablet – menší čtverec, aby neutekl nahoru a X zůstalo vidět */
@media (min-width: 768px) and (max-width: 1199px) {
  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) {
    width: min(72vmin, calc(100vw - 80px)) !important;
    max-width: min(72vmin, calc(100vw - 80px)) !important;

    height: min(72vmin, calc(100vw - 80px)) !important;
    max-height: min(72vmin, calc(100vw - 80px)) !important;

    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxWrapper,
  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxContent,
  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxLoadedContent {
    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    max-height: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxClose {
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 10001 !important;
  }
}

/* mobil – držet podle menší hodnoty, ne čistě podle šířky */
@media (max-width: 767px) {
  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) {
    width: min(calc(100vw - 24px), calc(100vh - 96px)) !important;
    max-width: min(calc(100vw - 24px), calc(100vh - 96px)) !important;

    height: min(calc(100vw - 24px), calc(100vh - 96px)) !important;
    max-height: min(calc(100vw - 24px), calc(100vh - 96px)) !important;

    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxWrapper,
  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxContent,
  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxLoadedContent {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxClose {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10001 !important;
  }
}

/* ============================================
   FORMULÁŘE – tlačítko Přihlásit se
   button.btn-login / input.btn-login
   ============================================ */

html body button.btn.btn-secondary.btn-text.btn-login[type="submit"],
html body input.btn.btn-secondary.btn-text.btn-login[type="submit"],
html body #content button.btn.btn-secondary.btn-text.btn-login[type="submit"],
html body #content input.btn.btn-secondary.btn-text.btn-login[type="submit"],
html body #colorbox button.btn.btn-secondary.btn-text.btn-login[type="submit"],
html body #colorbox input.btn.btn-secondary.btn-text.btn-login[type="submit"] {
  background: var(--dh-gradient) !important;
  background-color: var(--dh-gold) !important;
  color: var(--dh-text-dark) !important;
  -webkit-text-fill-color: var(--dh-text-dark) !important;
  border: var(--dh-border-thick) !important;
  border-radius: 0 !important;
  font-family: var(--dh-font) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  padding: 12px 32px !important;
  min-height: 46px !important;
  min-width: 180px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: var(--dh-transition) !important;
}

html body button.btn.btn-secondary.btn-text.btn-login[type="submit"]:hover,
html body button.btn.btn-secondary.btn-text.btn-login[type="submit"]:focus,
html body input.btn.btn-secondary.btn-text.btn-login[type="submit"]:hover,
html body input.btn.btn-secondary.btn-text.btn-login[type="submit"]:focus,
html body #content button.btn.btn-secondary.btn-text.btn-login[type="submit"]:hover,
html body #content button.btn.btn-secondary.btn-text.btn-login[type="submit"]:focus,
html body #content input.btn.btn-secondary.btn-text.btn-login[type="submit"]:hover,
html body #content input.btn.btn-secondary.btn-text.btn-login[type="submit"]:focus,
html body #colorbox button.btn.btn-secondary.btn-text.btn-login[type="submit"]:hover,
html body #colorbox button.btn.btn-secondary.btn-text.btn-login[type="submit"]:focus,
html body #colorbox input.btn.btn-secondary.btn-text.btn-login[type="submit"]:hover,
html body #colorbox input.btn.btn-secondary.btn-text.btn-login[type="submit"]:focus {
  background: var(--dh-gradient-hover) !important;
  color: var(--dh-text-dark) !important;
  -webkit-text-fill-color: var(--dh-text-dark) !important;
  border-color: var(--dh-gold-light) !important;
  box-shadow: var(--dh-glow-lg) !important;
  transform: translateY(-2px) !important;
}

html body button.btn.btn-secondary.btn-text.btn-login[type="submit"]:active,
html body input.btn.btn-secondary.btn-text.btn-login[type="submit"]:active,
html body #content button.btn.btn-secondary.btn-text.btn-login[type="submit"]:active,
html body #content input.btn.btn-secondary.btn-text.btn-login[type="submit"]:active,
html body #colorbox button.btn.btn-secondary.btn-text.btn-login[type="submit"]:active,
html body #colorbox input.btn.btn-secondary.btn-text.btn-login[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* ============================================
   PŘIHLÁŠENÍ – MOBIL
   centrování tlačítka + odkazů pod ním
   ============================================ */

@media (max-width: 767px) {
  html body #content form[action*="Login"],
  html body #content form[action*="login"],
  html body #content .login-form,
  html body #content .login-wrapper {
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 44px !important;
    padding-bottom: 22px !important;
  }

  /* tlačítko */
  html body #content button.btn.btn-secondary.btn-text.btn-login[type="submit"],
  html body #content input.btn.btn-secondary.btn-text.btn-login[type="submit"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 280px !important;
    max-width: calc(100vw - 120px) !important;
    min-width: 220px !important;
    margin: 28px auto 26px auto !important;
    padding: 12px 28px !important;
    float: none !important;
    clear: both !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  html body #content button.btn.btn-secondary.btn-text.btn-login[type="submit"]:hover,
  html body #content button.btn.btn-secondary.btn-text.btn-login[type="submit"]:focus,
  html body #content input.btn.btn-secondary.btn-text.btn-login[type="submit"]:hover,
  html body #content input.btn.btn-secondary.btn-text.btn-login[type="submit"]:focus {
    transform: translateY(-2px) !important;
  }

  html body #content button.btn.btn-secondary.btn-text.btn-login[type="submit"]:active,
  html body #content input.btn.btn-secondary.btn-text.btn-login[type="submit"]:active {
    transform: none !important;
  }

  /* odkazy a text pod tlačítkem */
  html body #content .login-form a,
  html body #content .login-wrapper a,
  html body #content form[action*="Login"] a,
  html body #content form[action*="login"] a,
  html body #content .login-form p,
  html body #content .login-wrapper p,
  html body #content form[action*="Login"] p,
  html body #content form[action*="login"] p {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    float: none !important;
    clear: both !important;
  }

  html body #content .login-form a,
  html body #content .login-wrapper a,
  html body #content form[action*="Login"] a,
  html body #content form[action*="login"] a {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    color: var(--dh-gold) !important;
  }

  /* pojistka přímo na odkazy registrace / zapomenuté heslo */
  html body #content a[href*="registr"],
  html body #content a[href*="registrace"],
  html body #content a[href*="zapomen"],
  html body #content a[href*="heslo"],
  html body #content a[href*="password"],
  html body #content a[href*="forgotten"] {
    display: block !important;
    width: fit-content !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 10px !important;
    margin-bottom: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    float: none !important;
    clear: both !important;
    color: var(--dh-gold) !important;
  }

  /* pojistka, kdyby odkazy seděly v odstavci nebo divu */
  html body #content p:has(a[href*="registr"]),
  html body #content p:has(a[href*="zapomen"]),
  html body #content p:has(a[href*="heslo"]),
  html body #content div:has(a[href*="registr"]),
  html body #content div:has(a[href*="zapomen"]),
  html body #content div:has(a[href*="heslo"]) {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ============================================
   DOTAZ NA PRODEJCE / ZEPTAT SE
   pojistka pro formulář v produktové kartě
   ============================================ */

/* Formulářový modal nesmí přebít zavírací X */
html body #colorbox:has(.content-modal) #cboxLoadedContent,
html body #colorbox:has(form) #cboxLoadedContent,
html body #colorbox:has(.form-group) #cboxLoadedContent {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

/* X u formulářového modalu musí zůstat viditelné i po načtení obsahu */
html body #colorbox:has(.content-modal) #cboxClose,
html body #colorbox:has(form) #cboxClose,
html body #colorbox:has(.form-group) #cboxClose {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute !important;
  z-index: 10090 !important;

  pointer-events: auto !important;
  cursor: pointer !important;

  color: var(--dh-gold, #fada73) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* ============================================
   CHECKOUT – potvrzení zakázkového výrobku
   box nad tlačítkem Objednat
   ============================================ */

html body .next-step .dh-custom-order-confirm,
html body .dh-custom-order-confirm {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;

  order: -1 !important;

  margin: 0 0 18px 0 !important;
  padding: 16px 18px !important;

  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(250, 218, 115, 0.35) !important;
  border-radius: 0 !important;

  color: var(--dh-text-white) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;

  clear: both !important;
}

/* label uvnitř */
html body .dh-custom-order-confirm__label {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  cursor: pointer !important;

  color: var(--dh-text-white) !important;
  font-family: var(--dh-font) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;

  text-align: left !important;
  white-space: normal !important;
}

/* text – nesmí se zúžit */
html body .dh-custom-order-confirm__label span {
  display: block !important;
  flex: 1 1 auto !important;

  width: auto !important;
  max-width: none !important;

  color: var(--dh-text-white) !important;
  text-align: left !important;
  white-space: normal !important;
}

/* checkbox */
html body .dh-custom-order-confirm__label input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;

  margin: 2px 0 0 0 !important;
  padding: 0 !important;

  background: #000000 !important;
  border: 1px solid var(--dh-gold) !important;
  border-radius: 0 !important;

  position: relative !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html body .dh-custom-order-confirm__label input[type="checkbox"]:checked {
  background: var(--dh-gradient) !important;
}

html body .dh-custom-order-confirm__label input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -54%);

  color: var(--dh-text-dark);
  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
}

/* chyba */
html body .dh-custom-order-confirm__error {
  display: none;

  margin-top: 12px;

  color: var(--dh-gold-light) !important;
  font-family: var(--dh-font) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  text-align: left !important;
}

html body .dh-custom-order-confirm--error {
  border-color: var(--dh-gold-light) !important;
  box-shadow: 0 0 0 1px rgba(250, 218, 115, 0.25) !important;
}

/* aby tlačítko zůstalo pod tím boxem */
html body .next-step {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* mobil */
@media (max-width: 767px) {
  html body .next-step .dh-custom-order-confirm,
  html body .dh-custom-order-confirm {
    margin: 0 0 16px 0 !important;
    padding: 14px 12px !important;
  }

  html body .dh-custom-order-confirm__label {
    font-size: 13px !important;
    line-height: 1.45 !important;
    gap: 10px !important;
  }
}



/* ============================================
   PRODUKT – šipky slideru miniatur
   bezpečná verze bez schování miniatur
   ============================================ */

/* obal miniatur */
html body .p-thumbnails,
html body .p-thumbnails-wrapper,
html body .p-thumbnails-container {
  position: relative !important;
}

/* cílení jen na skutečné ovládací šipky */
html body .p-thumbnails .p-thumbnail-prev,
html body .p-thumbnails .p-thumbnail-next,
html body .p-thumbnails .thumbnail-prev,
html body .p-thumbnails .thumbnail-next,
html body .p-thumbnails .thumbnails-prev,
html body .p-thumbnails .thumbnails-next,
html body .p-thumbnails-wrapper .p-thumbnail-prev,
html body .p-thumbnails-wrapper .p-thumbnail-next,
html body .p-thumbnails-wrapper .thumbnail-prev,
html body .p-thumbnails-wrapper .thumbnail-next,
html body .p-thumbnails-wrapper .thumbnails-prev,
html body .p-thumbnails-wrapper .thumbnails-next {
  position: absolute !important;

  top: calc(50% + 10px) !important;
  transform: translateY(-50%) !important;

  width: 42px !important;
  height: 64px !important;

  z-index: 30 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
  outline: none !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;

  overflow: visible !important;
  cursor: pointer !important;
}

/* pozice */
html body .p-thumbnails .p-thumbnail-prev,
html body .p-thumbnails .thumbnail-prev,
html body .p-thumbnails .thumbnails-prev,
html body .p-thumbnails-wrapper .p-thumbnail-prev,
html body .p-thumbnails-wrapper .thumbnail-prev,
html body .p-thumbnails-wrapper .thumbnails-prev {
  left: 0 !important;
  right: auto !important;
}

html body .p-thumbnails .p-thumbnail-next,
html body .p-thumbnails .thumbnail-next,
html body .p-thumbnails .thumbnails-next,
html body .p-thumbnails-wrapper .p-thumbnail-next,
html body .p-thumbnails-wrapper .thumbnail-next,
html body .p-thumbnails-wrapper .thumbnails-next {
  right: 0 !important;
  left: auto !important;
}

/* vypnutí původní bílé ikony jen na samotném prvku */
html body .p-thumbnails .p-thumbnail-prev::before,
html body .p-thumbnails .p-thumbnail-next::before,
html body .p-thumbnails .thumbnail-prev::before,
html body .p-thumbnails .thumbnail-next::before,
html body .p-thumbnails .thumbnails-prev::before,
html body .p-thumbnails .thumbnails-next::before,
html body .p-thumbnails-wrapper .p-thumbnail-prev::before,
html body .p-thumbnails-wrapper .p-thumbnail-next::before,
html body .p-thumbnails-wrapper .thumbnail-prev::before,
html body .p-thumbnails-wrapper .thumbnail-next::before,
html body .p-thumbnails-wrapper .thumbnails-prev::before,
html body .p-thumbnails-wrapper .thumbnails-next::before {
  display: none !important;
  content: none !important;
}

/* vlastní zlatá šipka */
html body .p-thumbnails .p-thumbnail-prev::after,
html body .p-thumbnails .p-thumbnail-next::after,
html body .p-thumbnails .thumbnail-prev::after,
html body .p-thumbnails .thumbnail-next::after,
html body .p-thumbnails .thumbnails-prev::after,
html body .p-thumbnails .thumbnails-next::after,
html body .p-thumbnails-wrapper .p-thumbnail-prev::after,
html body .p-thumbnails-wrapper .p-thumbnail-next::after,
html body .p-thumbnails-wrapper .thumbnail-prev::after,
html body .p-thumbnails-wrapper .thumbnail-next::after,
html body .p-thumbnails-wrapper .thumbnails-prev::after,
html body .p-thumbnails-wrapper .thumbnails-next::after {
  content: "" !important;

  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  width: 20px !important;
  height: 20px !important;

  border-top: 3px solid var(--dh-gold, #fada73) !important;
  border-right: 3px solid var(--dh-gold, #fada73) !important;

  background: transparent !important;
  box-shadow: none !important;
}

/* levá šipka */
html body .p-thumbnails .p-thumbnail-prev::after,
html body .p-thumbnails .thumbnail-prev::after,
html body .p-thumbnails .thumbnails-prev::after,
html body .p-thumbnails-wrapper .p-thumbnail-prev::after,
html body .p-thumbnails-wrapper .thumbnail-prev::after,
html body .p-thumbnails-wrapper .thumbnails-prev::after {
  transform: translate(-35%, -50%) rotate(-135deg) !important;
}

/* pravá šipka */
html body .p-thumbnails .p-thumbnail-next::after,
html body .p-thumbnails .thumbnail-next::after,
html body .p-thumbnails .thumbnails-next::after,
html body .p-thumbnails-wrapper .p-thumbnail-next::after,
html body .p-thumbnails-wrapper .thumbnail-next::after,
html body .p-thumbnails-wrapper .thumbnails-next::after {
  transform: translate(-65%, -50%) rotate(45deg) !important;
}

/* hover */
html body .p-thumbnails .p-thumbnail-prev:hover::after,
html body .p-thumbnails .p-thumbnail-next:hover::after,
html body .p-thumbnails .thumbnail-prev:hover::after,
html body .p-thumbnails .thumbnail-next:hover::after,
html body .p-thumbnails .thumbnails-prev:hover::after,
html body .p-thumbnails .thumbnails-next:hover::after,
html body .p-thumbnails-wrapper .p-thumbnail-prev:hover::after,
html body .p-thumbnails-wrapper .p-thumbnail-next:hover::after,
html body .p-thumbnails-wrapper .thumbnail-prev:hover::after,
html body .p-thumbnails-wrapper .thumbnail-next:hover::after,
html body .p-thumbnails-wrapper .thumbnails-prev:hover::after,
html body .p-thumbnails-wrapper .thumbnails-next:hover::after {
  border-color: var(--dh-gold-light, #fada73) !important;
}

/* ============================================
   PRODUKT – odstranění bílého gradientu/podkladu u šipek miniatur
   ============================================ */

html body .p-thumbnails::before,
html body .p-thumbnails::after,
html body .p-thumbnails-wrapper::before,
html body .p-thumbnails-wrapper::after,
html body .p-thumbnails-container::before,
html body .p-thumbnails-container::after,
html body .p-thumbnails-inner::before,
html body .p-thumbnails-inner::after,
html body .p-thumbnails-inner > div::before,
html body .p-thumbnails-inner > div::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}
/* ============================================
   PRODUKT – Tisk / Zeptat se
   bezpečná verze pouze pro produktové ikonky
   ============================================ */

/* obal ikon jen na produktové stránce */
html body .p-detail .link-icons,
html body .p-detail-inner .link-icons,
html body .product-top .link-icons,
html body .product .link-icons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

/* samotné odkazy jen uvnitř .link-icons */
html body .p-detail .link-icons a,
html body .p-detail-inner .link-icons a,
html body .product-top .link-icons a,
html body .product .link-icons a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  min-height: 42px !important;
  padding: 10px 18px !important;

  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12)), #1c1c1c !important;
  border: 1px solid rgba(250, 218, 115, 0.22) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: var(--dh-gold, #fada73) !important;
  font-family: var(--dh-font, "PT Serif", serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;

  transition: all 0.25s ease !important;
}

/* hover jen na produktových ikonkách */
html body .p-detail .link-icons a:hover,
html body .p-detail-inner .link-icons a:hover,
html body .product-top .link-icons a:hover,
html body .product .link-icons a:hover {
  color: var(--dh-gold-light, #fbe294) !important;
  border-color: rgba(250, 218, 115, 0.45) !important;
  background: linear-gradient(180deg, rgba(250,218,115,0.06), rgba(0,0,0,0.16)), #1c1c1c !important;
  transform: translateY(-1px) !important;
}

/* skrytí default ikon jen v .link-icons */
html body .p-detail .link-icons a::after,
html body .p-detail-inner .link-icons a::after,
html body .product-top .link-icons a::after,
html body .product .link-icons a::after {
  display: none !important;
  content: none !important;
}

html body .p-detail .link-icons a i,
html body .p-detail .link-icons a .icon,
html body .p-detail .link-icons a svg,
html body .p-detail-inner .link-icons a i,
html body .p-detail-inner .link-icons a .icon,
html body .p-detail-inner .link-icons a svg,
html body .product-top .link-icons a i,
html body .product-top .link-icons a .icon,
html body .product-top .link-icons a svg,
html body .product .link-icons a i,
html body .product .link-icons a .icon,
html body .product .link-icons a svg {
  display: none !important;
}

/* reset pseudo ikon jen v .link-icons */
html body .p-detail .link-icons a::before,
html body .p-detail-inner .link-icons a::before,
html body .product-top .link-icons a::before,
html body .product .link-icons a::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;

  color: var(--dh-gold, #fada73) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  background: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* TISK – jen uvnitř produktových .link-icons */
html body .p-detail .link-icons a[href*="print"]::before,
html body .p-detail-inner .link-icons a[href*="print"]::before,
html body .product-top .link-icons a[href*="print"]::before,
html body .product .link-icons a[href*="print"]::before {
  content: "⎙" !important;
}

/* ZEPTAT SE – jen uvnitř produktových .link-icons */
html body .p-detail .link-icons a[href*="dotaz"]::before,
html body .p-detail .link-icons a[href*="question"]::before,
html body .p-detail-inner .link-icons a[href*="dotaz"]::before,
html body .p-detail-inner .link-icons a[href*="question"]::before,
html body .product-top .link-icons a[href*="dotaz"]::before,
html body .product-top .link-icons a[href*="question"]::before,
html body .product .link-icons a[href*="dotaz"]::before,
html body .product .link-icons a[href*="question"]::before {
  content: "✦" !important;
}

/* mobil */
@media (max-width: 768px) {
  html body .p-detail .link-icons,
  html body .p-detail-inner .link-icons,
  html body .product-top .link-icons,
  html body .product .link-icons {
    gap: 8px !important;
    margin-top: 14px !important;
  }

  html body .p-detail .link-icons a,
  html body .p-detail-inner .link-icons a,
  html body .product-top .link-icons a,
  html body .product .link-icons a {
    min-height: 38px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
  }
}
/* ============================================
   PRODUKTOVÁ KARTA – skrýt nadpis "Detailní popis produktu"
   ============================================ */

/* Skryje úvodní h4 nadpis v detailním popisu produktu */
html body.type-product .description-inner > h4:first-child,
html body.type-product .basic-description > h4:first-child,
html body.type-product .extended-description > h4:first-child,
html body.type-detail .description-inner > h4:first-child,
html body.type-detail .basic-description > h4:first-child,
html body.type-detail .extended-description > h4:first-child,
html body .p-detail .description-inner > h4:first-child,
html body .p-detail .basic-description > h4:first-child,
html body .p-detail .extended-description > h4:first-child,
html body .p-detail-inner .description-inner > h4:first-child,
html body .p-detail-inner .basic-description > h4:first-child,
html body .p-detail-inner .extended-description > h4:first-child {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* ============================================
   PRODUKTOVÁ KARTA – MOBILNÍ POPIS PRODUKTU
   finální oprava šířky Shoptet wrapperu
   bez vytváření duplicitní záložky POPIS
   ============================================ */

/* Skrytí nadpisu "Detailní popis produktu" */
html body .description-inner .basic-description > h4:first-child {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Skrytí prázdného odstavce hned pod nadpisem */
html body .description-inner .basic-description > h4:first-child + p {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Pojistka proti starému pseudo prvku, který dělal duplicitní POPIS */
html body #tab-content::before,
html body #tab-content.tab-content::before {
  display: none !important;
  content: none !important;
}

/* ============================================
   MOBIL – roztáhnout celý Shoptet blok popisu
   ============================================ */

@media (max-width: 767px) {

  /* HLAVNÍ PROBLÉM:
     tento wrapper měl cca 282 px, proto byl celý popis úzký */
  html body .full-width.p-detail-full-width {
    display: block !important;

    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    min-width: 0 !important;

    margin-left: calc(50% - 50vw + 6px) !important;
    margin-right: 0 !important;
    margin-top: 34px !important;
    margin-bottom: 0 !important;

    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Vnitřní Shoptet kontejnery nesmí vracet úzkou šířku */
  html body .full-width.p-detail-full-width .container-full-width,
  html body .full-width.p-detail-full-width .p-detail-tabs-wrapper,
  html body .full-width.p-detail-full-width .shp-tabs-wrapper,
  html body .full-width.p-detail-full-width .row,
  html body .full-width.p-detail-full-width .col-sm-12,
  html body .full-width.p-detail-full-width .shp-tabs-row,
  html body .full-width.p-detail-full-width .shp-tabs-holder {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    float: none !important;
  }

  /* Zrušení bootstrapového row odsazení jen v produktovém popisu */
  html body .full-width.p-detail-full-width .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ============================================
   PRODUKTOVÁ KARTA – ZÁLOŽKA POPIS
   tablet + mobil jako PC verze
   tab sedí NAD linkou, nic ji nepřekrývá
   ============================================ */

@media (max-width: 1199px) {

  /* Obal záložek – linka je pod tabem jako na PC */
  html body .full-width.p-detail-full-width #p-detail-tabs,
  html body .full-width.p-detail-full-width .shp-tabs,
  html body .full-width.p-detail-full-width .p-detail-tabs {
    list-style: none !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #1c1c1c !important;
    background-color: #1c1c1c !important;

    border: none !important;
    border-bottom: 1px solid rgba(250, 218, 115, 0.35) !important;

    box-shadow: none !important;
    outline: none !important;

    position: relative !important;
    z-index: 1 !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Vypnout pseudo vrstvy na obalu záložek */
  html body .full-width.p-detail-full-width #p-detail-tabs::before,
  html body .full-width.p-detail-full-width #p-detail-tabs::after,
  html body .full-width.p-detail-full-width .shp-tabs::before,
  html body .full-width.p-detail-full-width .shp-tabs::after,
  html body .full-width.p-detail-full-width .p-detail-tabs::before,
  html body .full-width.p-detail-full-width .p-detail-tabs::after {
    display: none !important;
    content: none !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Položka záložky */
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab,
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab.active,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab.active,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab.active {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    outline: none !important;

    position: relative !important;
    z-index: 2 !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Samotný tab POPIS – bez rámečku, bez podtržení uvnitř */
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab a.shp-tab-link,
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab.active a.shp-tab-link,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab a.shp-tab-link,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab.active a.shp-tab-link,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab a.shp-tab-link,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab.active a.shp-tab-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 132px !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 16px 30px !important;

    background: #1c1c1c !important;
    background-color: #1c1c1c !important;

    color: var(--dh-gold, #fada73) !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    outline: none !important;

    font-family: var(--dh-font, "PT Serif", serif) !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    text-decoration: none !important;

    transition: none !important;

    position: relative !important;
    z-index: 3 !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Hover – jen změna barvy textu, žádná spodní linka */
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab a.shp-tab-link:hover,
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab.active a.shp-tab-link:hover,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab a.shp-tab-link:hover,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab.active a.shp-tab-link:hover,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab a.shp-tab-link:hover,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab.active a.shp-tab-link:hover {
    color: var(--dh-gold-light, #fbe294) !important;

    background: #1c1c1c !important;
    background-color: #1c1c1c !important;

    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Aktivní stav – žádná zlatá spodní čára uvnitř tabu */
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab.active a.shp-tab-link,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab.active a.shp-tab-link,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab.active a.shp-tab-link {
    color: var(--dh-gold, #fada73) !important;

    background: #1c1c1c !important;
    background-color: #1c1c1c !important;

    border: none !important;
    box-shadow: none !important;

    font-weight: 800 !important;
  }

  /* Důležité: žádné překrývání linky pod tabem */
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab a.shp-tab-link::before,
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab a.shp-tab-link::after,
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab.active a.shp-tab-link::before,
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab.active a.shp-tab-link::after,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab a.shp-tab-link::before,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab a.shp-tab-link::after,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab.active a.shp-tab-link::before,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab.active a.shp-tab-link::after,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab a.shp-tab-link::before,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab a.shp-tab-link::after,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab.active a.shp-tab-link::before,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab.active a.shp-tab-link::after {
    display: none !important;
    content: none !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Obsah pod tabem – nesmí se posouvat nahoru */
  html body .full-width.p-detail-full-width #tab-content.tab-content {
    margin-top: 0 !important;
  }

  /* Vypnout mobilní hamburger u tabů, pokud ho Shoptet vytáhne */
  html body .full-width.p-detail-full-width .navigation-btn,
  html body .full-width.p-detail-full-width .hidden-links {
    display: none !important;
  }
}

/* ============================================
   MOBIL – pouze velikost tabu
   pořád stejný princip jako PC
   ============================================ */

@media (max-width: 767px) {

  html body .full-width.p-detail-full-width .shp-tabs .shp-tab a.shp-tab-link,
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab.active a.shp-tab-link,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab a.shp-tab-link,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab.active a.shp-tab-link,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab a.shp-tab-link,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab.active a.shp-tab-link {
    min-width: 126px !important;
    min-height: 54px !important;

    padding: 15px 28px !important;

    font-size: 17px !important;
  }
}

/* ============================================
   MALÉ MOBILY
   ============================================ */

@media (max-width: 480px) {

  html body .full-width.p-detail-full-width .shp-tabs .shp-tab a.shp-tab-link,
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab.active a.shp-tab-link,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab a.shp-tab-link,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab.active a.shp-tab-link,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab a.shp-tab-link,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab.active a.shp-tab-link {
    min-width: 112px !important;
    min-height: 50px !important;

    padding: 14px 24px !important;

    font-size: 16px !important;
  }
}
  /* ============================================
     OBSAH ZÁLOŽKY
     ============================================ */

  html body .full-width.p-detail-full-width #tab-content.tab-content {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #1c1c1c !important;
    color: #ffffff !important;

    border: 1px solid rgba(250, 218, 115, 0.35) !important;
    border-radius: 0 !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    position: relative !important;
    z-index: 1 !important;
  }

  html body .full-width.p-detail-full-width #description.tab-pane,
  html body .full-width.p-detail-full-width #description.tab-pane.fade,
  html body .full-width.p-detail-full-width #description.tab-pane.fade.in.active {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body .full-width.p-detail-full-width .description-inner,
  html body .full-width.p-detail-full-width .basic-description {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Samotný obsah z editoru */
  html body .full-width.p-detail-full-width .basic-description .editor-bg {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 52px 20px 38px 20px !important;

    transform: none !important;

    background: #1c1c1c !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Odstranění zbytečných prázdných odstavců na začátku */
  html body .full-width.p-detail-full-width .basic-description .editor-bg > p:first-child,
  html body .full-width.p-detail-full-width .basic-description .editor-bg > p:first-child + p {
    display: none !important;
    visibility: hidden !important;

    height: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
  }

  /* Texty uvnitř popisu */
  html body .full-width.p-detail-full-width .basic-description .editor-bg p {
    max-width: 100% !important;

    font-size: 17px !important;
    line-height: 1.62 !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  html body .full-width.p-detail-full-width .basic-description .editor-bg span,
  html body .full-width.p-detail-full-width .basic-description .editor-bg em,
  html body .full-width.p-detail-full-width .basic-description .editor-bg strong,
  html body .full-width.p-detail-full-width .basic-description .editor-bg i {
    max-width: 100% !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Linka uvnitř popisu */
  html body .full-width.p-detail-full-width .basic-description .editor-bg hr {
    width: 100% !important;
    max-width: 100% !important;

    margin: 32px 0 !important;

    border: none !important;
    border-top: 1px solid rgba(250, 218, 115, 0.28) !important;

    background: transparent !important;
  }

  /* ============================================
     DOPLŇKOVÉ PARAMETRY
     ============================================ */

  html body .full-width.p-detail-full-width .extended-description {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 32px 16px 22px 16px !important;

    background: #1c1c1c !important;
    border-top: 1px solid rgba(250, 218, 115, 0.22) !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body .full-width.p-detail-full-width .extended-description > h4 {
    margin: 0 0 18px 0 !important;
    padding: 0 !important;

    color: var(--dh-gold, #fada73) !important;

    font-family: var(--dh-font, 'PT Serif', serif) !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;

    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
  }

  html body .full-width.p-detail-full-width .detail-parameters {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    background: transparent !important;
    border: 1px solid rgba(250, 218, 115, 0.25) !important;

    box-sizing: border-box !important;
  }

  html body .full-width.p-detail-full-width .detail-parameters th,
  html body .full-width.p-detail-full-width .detail-parameters td {
    padding: 12px 10px !important;

    font-size: 14px !important;
    line-height: 1.35 !important;

    background: transparent !important;
    border-color: rgba(250, 218, 115, 0.12) !important;

    box-sizing: border-box !important;
  }
}

/* ============================================
   MALÉ MOBILY
   ============================================ */

@media (max-width: 480px) {

  html body .full-width.p-detail-full-width {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    margin-left: calc(50% - 50vw + 4px) !important;
  }

  html body .full-width.p-detail-full-width .shp-tabs .shp-tab a.shp-tab-link,
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab.active a.shp-tab-link {
    min-width: 112px !important;
    min-height: 50px !important;

    padding: 14px 24px !important;

    font-size: 16px !important;
  }

  html body .full-width.p-detail-full-width .basic-description .editor-bg {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 48px !important;
  }

  html body .full-width.p-detail-full-width .basic-description .editor-bg p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  html body .full-width.p-detail-full-width .extended-description {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* ============================================
   CHECKOUT – barvy nevybrané / vybrané dopravy a platby
   nevybraná položka: bílý text
   vybraná položka: zelený text
   ============================================ */

/* Výchozí barvy pro všechny volby dopravy a platby */
html body.ordering-process #content .shipping-billing-table .radio-wrapper label,
html body.ordering-process #content #order-shipping-methods .radio-wrapper label,
html body.ordering-process #content #order-billing-methods .radio-wrapper label {
  color: #ffffff !important;
}

/* Nevybrané položky – název dopravy / platby bíle */
html body.ordering-process #content .shipping-billing-table .radio-wrapper:not(.active) .shipping-billing-name,
html body.ordering-process #content #order-shipping-methods .radio-wrapper:not(.active) .shipping-billing-name,
html body.ordering-process #content #order-billing-methods .radio-wrapper:not(.active) .shipping-billing-name {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Nevybrané položky – cena / ZDARMA bíle */
html body.ordering-process #content .shipping-billing-table .radio-wrapper:not(.active) .payment-shipping-price,
html body.ordering-process #content #order-shipping-methods .radio-wrapper:not(.active) .payment-shipping-price,
html body.ordering-process #content #order-billing-methods .radio-wrapper:not(.active) .payment-shipping-price,
html body.ordering-process #content .shipping-billing-table .radio-wrapper:not(.active) .for-free,
html body.ordering-process #content #order-shipping-methods .radio-wrapper:not(.active) .for-free,
html body.ordering-process #content #order-billing-methods .radio-wrapper:not(.active) .for-free {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Nevybrané položky – všechny vnitřní texty bíle, kromě obrázků */
html body.ordering-process #content .shipping-billing-table .radio-wrapper:not(.active) label span,
html body.ordering-process #content .shipping-billing-table .radio-wrapper:not(.active) label b,
html body.ordering-process #content .shipping-billing-table .radio-wrapper:not(.active) label strong,
html body.ordering-process #content .shipping-billing-table .radio-wrapper:not(.active) label em,
html body.ordering-process #content #order-shipping-methods .radio-wrapper:not(.active) label span,
html body.ordering-process #content #order-shipping-methods .radio-wrapper:not(.active) label b,
html body.ordering-process #content #order-shipping-methods .radio-wrapper:not(.active) label strong,
html body.ordering-process #content #order-shipping-methods .radio-wrapper:not(.active) label em,
html body.ordering-process #content #order-billing-methods .radio-wrapper:not(.active) label span,
html body.ordering-process #content #order-billing-methods .radio-wrapper:not(.active) label b,
html body.ordering-process #content #order-billing-methods .radio-wrapper:not(.active) label strong,
html body.ordering-process #content #order-billing-methods .radio-wrapper:not(.active) label em {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Vybrané položky – zelený text */
html body.ordering-process #content .shipping-billing-table .radio-wrapper.active .shipping-billing-name,
html body.ordering-process #content #order-shipping-methods .radio-wrapper.active .shipping-billing-name,
html body.ordering-process #content #order-billing-methods .radio-wrapper.active .shipping-billing-name {
  color: #4caf50 !important;
  -webkit-text-fill-color: #4caf50 !important;
}

/* Vybrané položky – cena / ZDARMA zeleně */
html body.ordering-process #content .shipping-billing-table .radio-wrapper.active .payment-shipping-price,
html body.ordering-process #content #order-shipping-methods .radio-wrapper.active .payment-shipping-price,
html body.ordering-process #content #order-billing-methods .radio-wrapper.active .payment-shipping-price,
html body.ordering-process #content .shipping-billing-table .radio-wrapper.active .for-free,
html body.ordering-process #content #order-shipping-methods .radio-wrapper.active .for-free,
html body.ordering-process #content #order-billing-methods .radio-wrapper.active .for-free {
  color: #4caf50 !important;
  -webkit-text-fill-color: #4caf50 !important;
}

/* Vybrané položky – všechny důležité texty zeleně */
html body.ordering-process #content .shipping-billing-table .radio-wrapper.active label span,
html body.ordering-process #content .shipping-billing-table .radio-wrapper.active label b,
html body.ordering-process #content .shipping-billing-table .radio-wrapper.active label strong,
html body.ordering-process #content #order-shipping-methods .radio-wrapper.active label span,
html body.ordering-process #content #order-shipping-methods .radio-wrapper.active label b,
html body.ordering-process #content #order-shipping-methods .radio-wrapper.active label strong,
html body.ordering-process #content #order-billing-methods .radio-wrapper.active label span,
html body.ordering-process #content #order-billing-methods .radio-wrapper.active label b,
html body.ordering-process #content #order-billing-methods .radio-wrapper.active label strong {
  color: #4caf50 !important;
  -webkit-text-fill-color: #4caf50 !important;
}

/* Pojistka podle skutečně zaškrtnutého inputu.
   Kdyby Shoptet někde nestihl přidat .active, input:checked to jistí. */
html body.ordering-process #content .shipping-billing-table .radio-wrapper:has(input[type="radio"]:checked) .shipping-billing-name,
html body.ordering-process #content .shipping-billing-table .radio-wrapper:has(input[type="radio"]:checked) .payment-shipping-price,
html body.ordering-process #content .shipping-billing-table .radio-wrapper:has(input[type="radio"]:checked) .for-free,
html body.ordering-process #content #order-shipping-methods .radio-wrapper:has(input[type="radio"]:checked) .shipping-billing-name,
html body.ordering-process #content #order-shipping-methods .radio-wrapper:has(input[type="radio"]:checked) .payment-shipping-price,
html body.ordering-process #content #order-shipping-methods .radio-wrapper:has(input[type="radio"]:checked) .for-free,
html body.ordering-process #content #order-billing-methods .radio-wrapper:has(input[type="radio"]:checked) .shipping-billing-name,
html body.ordering-process #content #order-billing-methods .radio-wrapper:has(input[type="radio"]:checked) .payment-shipping-price,
html body.ordering-process #content #order-billing-methods .radio-wrapper:has(input[type="radio"]:checked) .for-free {
  color: #4caf50 !important;
  -webkit-text-fill-color: #4caf50 !important;
}

/* Not possible info necháme nenápadně, pokud by se někdy zobrazilo */
html body.ordering-process #content .shipping-billing-table .not-possible-info,
html body.ordering-process #content #order-shipping-methods .not-possible-info,
html body.ordering-process #content #order-billing-methods .not-possible-info {
  color: rgba(255, 255, 255, 0.55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
}
/* ============================================
   CHECKOUT – SELECT ZEMĚ DORUČENÍ
   oprava ujíždějící šipky u #deliveryCountryId
   šipka je součástí selectu, ne pseudo-prvek vedle něj
   ============================================ */

/* Obal selectu */
html body #order-form #checkoutContent .form-group:has(#deliveryCountryId),
html body.ordering-process #content .form-group:has(#deliveryCountryId),
html body #content .form-group:has(#deliveryCountryId),
html body .content-wrapper-in .form-group:has(#deliveryCountryId) {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  box-sizing: border-box !important;
}

/* VYPNOUT starou šipku, která byla přes ::after a ujížděla */
html body #order-form #checkoutContent .form-group:has(#deliveryCountryId)::after,
html body.ordering-process #content .form-group:has(#deliveryCountryId)::after,
html body #content .form-group:has(#deliveryCountryId)::after,
html body .content-wrapper-in .form-group:has(#deliveryCountryId)::after {
  display: none !important;
  content: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0 !important;
  visibility: hidden !important;

  pointer-events: none !important;
}

/* Label "Země doručení" */
html body #order-form #checkoutContent label[for="deliveryCountryId"],
html body.ordering-process #content label[for="deliveryCountryId"],
html body #content label[for="deliveryCountryId"],
html body .content-wrapper-in label[for="deliveryCountryId"] {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 0 8px 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-family: var(--dh-font, "PT Serif", serif) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;

  text-transform: uppercase !important;
  letter-spacing: 0.25px !important;

  text-align: left !important;

  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Samotný select */
html body #order-form #checkoutContent select#deliveryCountryId.form-control,
html body.ordering-process #content select#deliveryCountryId.form-control,
html body #content select#deliveryCountryId.form-control,
html body .content-wrapper-in select#deliveryCountryId.form-control {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;

  margin: 0 !important;
  padding: 0 56px 0 24px !important;

  background-color: #000000 !important;

  /* Nová šipka – vycentrovaná přímo v selectu */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fada73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 20px 20px !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border: 1px solid var(--dh-gold, #fada73) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  outline: none !important;

  font-family: var(--dh-font, "PT Serif", serif) !important;
  font-size: 22px !important;
  line-height: 62px !important;
  font-weight: 800 !important;

  text-align: left !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  cursor: pointer !important;

  box-sizing: border-box !important;
}

/* Starší systémová šipka */
html body #order-form #checkoutContent select#deliveryCountryId.form-control::-ms-expand,
html body.ordering-process #content select#deliveryCountryId.form-control::-ms-expand,
html body #content select#deliveryCountryId.form-control::-ms-expand,
html body .content-wrapper-in select#deliveryCountryId.form-control::-ms-expand {
  display: none !important;
}

/* Hover / focus – bez pohybu šipky */
html body #order-form #checkoutContent select#deliveryCountryId.form-control:hover,
html body #order-form #checkoutContent select#deliveryCountryId.form-control:focus,
html body.ordering-process #content select#deliveryCountryId.form-control:hover,
html body.ordering-process #content select#deliveryCountryId.form-control:focus,
html body #content select#deliveryCountryId.form-control:hover,
html body #content select#deliveryCountryId.form-control:focus,
html body .content-wrapper-in select#deliveryCountryId.form-control:hover,
html body .content-wrapper-in select#deliveryCountryId.form-control:focus {
  background-color: #000000 !important;
  background-position: right 18px center !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border-color: var(--dh-gold, #fada73) !important;

  box-shadow: none !important;
  outline: none !important;
}

/* Options */
html body #order-form #checkoutContent select#deliveryCountryId.form-control option,
html body.ordering-process #content select#deliveryCountryId.form-control option,
html body #content select#deliveryCountryId.form-control option,
html body .content-wrapper-in select#deliveryCountryId.form-control option {
  background: #000000 !important;
  background-color: #000000 !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-family: var(--dh-font, "PT Serif", serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* ============================================
   TABLET
   ============================================ */

@media (min-width: 768px) and (max-width: 991px) {
  html body #order-form #checkoutContent select#deliveryCountryId.form-control,
  html body.ordering-process #content select#deliveryCountryId.form-control,
  html body #content select#deliveryCountryId.form-control,
  html body .content-wrapper-in select#deliveryCountryId.form-control {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;

    padding-left: 24px !important;
    padding-right: 56px !important;

    background-position: right 18px center !important;
    background-size: 20px 20px !important;

    font-size: 21px !important;
    line-height: 60px !important;
  }
}

/* ============================================
   MOBIL
   ============================================ */

@media (max-width: 767px) {
  html body #order-form #checkoutContent select#deliveryCountryId.form-control,
  html body.ordering-process #content select#deliveryCountryId.form-control,
  html body #content select#deliveryCountryId.form-control,
  html body .content-wrapper-in select#deliveryCountryId.form-control {
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;

    padding-left: 24px !important;
    padding-right: 54px !important;

    background-position: right 18px center !important;
    background-size: 20px 20px !important;

    font-size: 22px !important;
    line-height: 62px !important;
  }
}

/* Extra malé mobily */
@media (max-width: 420px) {
  html body #order-form #checkoutContent select#deliveryCountryId.form-control,
  html body.ordering-process #content select#deliveryCountryId.form-control,
  html body #content select#deliveryCountryId.form-control,
  html body .content-wrapper-in select#deliveryCountryId.form-control {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;

    padding-left: 20px !important;
    padding-right: 50px !important;

    background-position: right 16px center !important;
    background-size: 19px 19px !important;

    font-size: 20px !important;
    line-height: 60px !important;
  }
}
/* ============================================
   COLORBOX – oprava X pouze pro formulář "Zeptat se"
   bez zásahu do produktové fotogalerie
   ============================================ */

/* DŮLEŽITÉ:
   Tento blok nesahá na:
   - #cboxOverlay
   - #cboxWrapper
   - #cboxContent
   - #cboxLoadedContent
   - #cboxPrevious
   - #cboxNext

   Tím se neovlivní produktová galerie.
*/

/* Zavírací X pouze u formulářového modalu */
html body #colorbox:has(.content-modal) #cboxClose {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute !important;
  z-index: 99999 !important;

  pointer-events: auto !important;
  cursor: pointer !important;

  color: var(--dh-gold, #fada73) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-shadow: none !important;
}

/* Hover / focus X pouze u formulářového modalu */
html body #colorbox:has(.content-modal) #cboxClose:hover,
html body #colorbox:has(.content-modal) #cboxClose:focus {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  color: var(--dh-gold-light, #fbe294) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Pojistka: pokud formulářový modal obsahuje pseudo vrstvy,
   nesmí blokovat klik na X */
html body #colorbox:has(.content-modal) #cboxContent::before,
html body #colorbox:has(.content-modal) #cboxContent::after,
html body #colorbox:has(.content-modal) #cboxLoadedContent::before,
html body #colorbox:has(.content-modal) #cboxLoadedContent::after {
  pointer-events: none !important;
}

/* Loading prvky u formulářového modalu nesmí blokovat klikání */
html body #colorbox:has(.content-modal) #cboxLoadingOverlay,
html body #colorbox:has(.content-modal) #cboxLoadingGraphic {
  pointer-events: none !important;
}
/* ============================================
   COLORBOX – čisté zavírací X bez pozadí a rámečku
   platí pro Zeptat se i produktovou fotku
   nezasahuje do vrstev, overlaye ani galerie
   ============================================ */

/* Samotné zavírací tlačítko – žádný box, žádné pozadí, žádný rámeček */
html body #colorbox #cboxClose,
html body #cboxClose {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute !important;
  z-index: 99999 !important;

  width: 42px !important;
  height: 42px !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  outline: none !important;
  text-shadow: none !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;

  cursor: pointer !important;
  pointer-events: auto !important;

  overflow: visible !important;
}

/* Zrušení všech starších pozadí/rámečků při hoveru/focusu */
html body #colorbox #cboxClose:hover,
html body #colorbox #cboxClose:focus,
html body #cboxClose:hover,
html body #cboxClose:focus {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  outline: none !important;

  opacity: 1 !important;
}

/* Vlastní zlaté X – první čára */
html body #colorbox #cboxClose::before,
html body #cboxClose::before {
  content: "" !important;

  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  width: 30px !important;
  height: 3px !important;

  background: var(--dh-gold, #fada73) !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  outline: none !important;

  transform: translate(-50%, -50%) rotate(45deg) !important;
  transform-origin: center !important;

  pointer-events: none !important;
}

/* Vlastní zlaté X – druhá čára */
html body #colorbox #cboxClose::after,
html body #cboxClose::after {
  content: "" !important;

  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  width: 30px !important;
  height: 3px !important;

  background: var(--dh-gold, #fada73) !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  outline: none !important;

  transform: translate(-50%, -50%) rotate(-45deg) !important;
  transform-origin: center !important;

  pointer-events: none !important;
}

/* Hover jen zesvětlí samotné čáry X, žádný box */
html body #colorbox #cboxClose:hover::before,
html body #colorbox #cboxClose:hover::after,
html body #colorbox #cboxClose:focus::before,
html body #colorbox #cboxClose:focus::after,
html body #cboxClose:hover::before,
html body #cboxClose:hover::after,
html body #cboxClose:focus::before,
html body #cboxClose:focus::after {
  background: var(--dh-gold-light, #fbe294) !important;

  border: none !important;
  box-shadow: none !important;
}

/* Mobil – trochu větší klikací plocha, ale pořád bez viditelného boxu */
@media (max-width: 767px) {
  html body #colorbox #cboxClose,
  html body #cboxClose {
    width: 46px !important;
    height: 46px !important;
  }

  html body #colorbox #cboxClose::before,
  html body #colorbox #cboxClose::after,
  html body #cboxClose::before,
  html body #cboxClose::after {
    width: 31px !important;
    height: 3px !important;
  }
}
/* ============================================
   DECORHAND – COLORBOX ČISTÁ VERZE
   Site agreement / Dotaz na prodejce / Produktová fotka
   bez globálního rozbíjení všech modalů
   ============================================ */

/* ============================================
   1. ZÁKLADNÍ VRSTVENÍ – pouze bezpečné minimum
   ============================================ */

/* Overlay držíme pod samotným oknem */
html body #cboxOverlay.siteAgreement,
html body #cboxOverlay.shoptet-modal-md.siteAgreement,
html body #cboxOverlay.productDetail,
html body #cboxOverlay.shoptet-modal-lg.productDetail {
  z-index: 10000 !important;
}

/* Samotné okno nad overlayem – jen když poznáme konkrétní typ obsahu */
html body #colorbox:has(.site-agreement-inner),
html body #colorbox:has(.content-modal),
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto),
html body #colorbox:has(img.cboxPhoto) {
  z-index: 10050 !important;
  pointer-events: auto !important;
}

/* ============================================
   2. SPOLEČNÉ ČISTÉ X
   bez pozadí, bez rámečku, bez boxu
   ============================================ */

html body #colorbox:has(.site-agreement-inner) #cboxClose,
html body #colorbox:has(.content-modal) #cboxClose,
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxClose,
html body #colorbox:has(img.cboxPhoto) #cboxClose {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 10100 !important;

  width: 42px !important;
  height: 42px !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  outline: none !important;
  text-shadow: none !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;

  cursor: pointer !important;
  pointer-events: auto !important;

  overflow: visible !important;
}

/* čára X 1 */
html body #colorbox:has(.site-agreement-inner) #cboxClose::before,
html body #colorbox:has(.content-modal) #cboxClose::before,
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxClose::before,
html body #colorbox:has(img.cboxPhoto) #cboxClose::before {
  content: "" !important;

  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  width: 30px !important;
  height: 3px !important;

  background: var(--dh-gold, #fada73) !important;

  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  transform: translate(-50%, -50%) rotate(45deg) !important;
  transform-origin: center !important;

  pointer-events: none !important;
}

/* čára X 2 */
html body #colorbox:has(.site-agreement-inner) #cboxClose::after,
html body #colorbox:has(.content-modal) #cboxClose::after,
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxClose::after,
html body #colorbox:has(img.cboxPhoto) #cboxClose::after {
  content: "" !important;

  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  width: 30px !important;
  height: 3px !important;

  background: var(--dh-gold, #fada73) !important;

  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  transform: translate(-50%, -50%) rotate(-45deg) !important;
  transform-origin: center !important;

  pointer-events: none !important;
}

/* Hover X – jen zesvětlení čar, žádné tlačítko */
html body #colorbox:has(.site-agreement-inner) #cboxClose:hover,
html body #colorbox:has(.content-modal) #cboxClose:hover,
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxClose:hover,
html body #colorbox:has(img.cboxPhoto) #cboxClose:hover,
html body #colorbox:has(.site-agreement-inner) #cboxClose:focus,
html body #colorbox:has(.content-modal) #cboxClose:focus,
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxClose:focus,
html body #colorbox:has(img.cboxPhoto) #cboxClose:focus {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

html body #colorbox:has(.site-agreement-inner) #cboxClose:hover::before,
html body #colorbox:has(.site-agreement-inner) #cboxClose:hover::after,
html body #colorbox:has(.content-modal) #cboxClose:hover::before,
html body #colorbox:has(.content-modal) #cboxClose:hover::after,
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxClose:hover::before,
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxClose:hover::after,
html body #colorbox:has(img.cboxPhoto) #cboxClose:hover::before,
html body #colorbox:has(img.cboxPhoto) #cboxClose:hover::after {
  background: var(--dh-gold-light, #fbe294) !important;
}

/* ============================================
   3. SITE AGREEMENT – vstup na web
   ============================================ */

/* Overlay site agreement – jen tmavé pozadí pod oknem */
html body #cboxOverlay.siteAgreement,
html body #cboxOverlay.shoptet-modal-md.siteAgreement {
  position: fixed !important;

  z-index: 10000 !important;

  display: block !important;
  visibility: visible !important;

  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Celý Colorbox jen pro site agreement */
html body #colorbox:has(.site-agreement-inner) {
  position: fixed !important;

  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  transform: translate(-50%, -50%) !important;

  width: 520px !important;
  max-width: calc(100vw - 40px) !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 40px) !important;

  margin: 0 !important;
  padding: 0 !important;

  background: var(--dh-bg-main, #1c1c1c) !important;
  background-color: var(--dh-bg-main, #1c1c1c) !important;

  color: var(--dh-text-white, #ffffff) !important;

  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
  box-sizing: border-box !important;

  z-index: 10050 !important;
  pointer-events: auto !important;
}

/* Vnitřní vrstvy site agreement */
html body #colorbox:has(.site-agreement-inner) #cboxWrapper,
html body #colorbox:has(.site-agreement-inner) #cboxContent,
html body #colorbox:has(.site-agreement-inner) #cboxLoadedContent {
  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 40px) !important;

  margin: 0 !important;
  padding: 0 !important;

  background: var(--dh-bg-main, #1c1c1c) !important;
  background-color: var(--dh-bg-main, #1c1c1c) !important;

  color: var(--dh-text-white, #ffffff) !important;

  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
  box-sizing: border-box !important;

  pointer-events: auto !important;
}

/* Obsah site agreement */
html body #colorbox:has(.site-agreement-inner) #cboxLoadedContent {
  padding: 34px 32px 30px 32px !important;
  overflow: hidden !important;
}

/* Konstrukční bílé části Colorboxu pryč pouze zde */
html body #colorbox:has(.site-agreement-inner) #cboxTopLeft,
html body #colorbox:has(.site-agreement-inner) #cboxTopCenter,
html body #colorbox:has(.site-agreement-inner) #cboxTopRight,
html body #colorbox:has(.site-agreement-inner) #cboxMiddleLeft,
html body #colorbox:has(.site-agreement-inner) #cboxMiddleRight,
html body #colorbox:has(.site-agreement-inner) #cboxBottomLeft,
html body #colorbox:has(.site-agreement-inner) #cboxBottomCenter,
html body #colorbox:has(.site-agreement-inner) #cboxBottomRight {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Vnitřní HTML obsah */
html body #colorbox:has(.site-agreement-inner) .colorbox-html-content,
html body #colorbox:has(.site-agreement-inner) .site-agreement-inner {
  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;

  color: var(--dh-text-white, #ffffff) !important;

  border: none !important;
  box-shadow: none !important;

  box-sizing: border-box !important;
  pointer-events: auto !important;
}

/* Text upozornění */
html body #colorbox:has(.site-agreement-inner) .site-agreement-inner p,
html body #colorbox:has(.site-agreement-inner) .site-agreement-inner span {
  color: var(--dh-gold-light, #fada73) !important;

  font-family: var(--dh-font-heading, var(--dh-font, "PT Serif", serif)) !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;

  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;

  margin: 0 0 26px 0 !important;
}

/* Tlačítka */
html body #colorbox:has(.site-agreement-inner) .site-agreement-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  pointer-events: auto !important;
}

/* Souhlasím */
html body #colorbox:has(.site-agreement-inner) #site-agree-button,
html body #colorbox:has(.site-agreement-inner) .site-agreement-buttons .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 150px !important;
  min-height: 44px !important;

  padding: 12px 24px !important;

  background: var(--dh-gradient, linear-gradient(135deg, #fada73 0%, #fada73 45%, #b8860b 100%)) !important;
  background-color: var(--dh-gold, #fada73) !important;

  color: var(--dh-text-dark, #111111) !important;
  -webkit-text-fill-color: var(--dh-text-dark, #111111) !important;

  border: var(--dh-border-thick, 1px solid #fada73) !important;
  border-radius: 0 !important;

  font-family: var(--dh-font, "PT Serif", serif) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;

  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;

  box-shadow: none !important;
  text-shadow: none !important;

  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Odejít */
html body #colorbox:has(.site-agreement-inner) .site-agreement-buttons .btn-default {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 130px !important;
  min-height: 44px !important;

  padding: 12px 24px !important;

  background: transparent !important;

  color: var(--dh-gold, #fada73) !important;
  -webkit-text-fill-color: var(--dh-gold, #fada73) !important;

  border: 1px solid var(--dh-gold, #fada73) !important;
  border-radius: 0 !important;

  font-family: var(--dh-font, "PT Serif", serif) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;

  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;

  box-shadow: none !important;
  text-shadow: none !important;

  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Hover tlačítek */
html body #colorbox:has(.site-agreement-inner) #site-agree-button:hover,
html body #colorbox:has(.site-agreement-inner) .site-agreement-buttons .btn-primary:hover {
  background: var(--dh-gradient-hover, linear-gradient(135deg, #fff0a3 0%, #fada73 55%, #9f7608 100%)) !important;
  color: var(--dh-text-dark, #111111) !important;
  -webkit-text-fill-color: var(--dh-text-dark, #111111) !important;
  box-shadow: none !important;
}

html body #colorbox:has(.site-agreement-inner) .site-agreement-buttons .btn-default:hover {
  background: var(--dh-gradient, linear-gradient(135deg, #fada73 0%, #fada73 45%, #b8860b 100%)) !important;
  color: var(--dh-text-dark, #111111) !important;
  -webkit-text-fill-color: var(--dh-text-dark, #111111) !important;
  box-shadow: none !important;
}

/* Loading vrstvy nesmí blokovat site agreement */
html body #colorbox:has(.site-agreement-inner) #cboxLoadingOverlay,
html body #colorbox:has(.site-agreement-inner) #cboxLoadingGraphic {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  pointer-events: none !important;

  background: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
}

/* ============================================
   4. DOTAZ NA PRODEJCE / ZEPTAT SE
   pouze .content-modal
   ============================================ */

/* Okno dotazu */
html body #colorbox:has(.content-modal) {
  background: var(--dh-bg-main, #1c1c1c) !important;
  color: var(--dh-text-white, #ffffff) !important;

  border: none !important;
  box-shadow: none !important;

  box-sizing: border-box !important;

  z-index: 10050 !important;
}

/* Vnitřní vrstvy dotazu */
html body #colorbox:has(.content-modal) #cboxWrapper,
html body #colorbox:has(.content-modal) #cboxContent,
html body #colorbox:has(.content-modal) #cboxLoadedContent {
  background: var(--dh-bg-main, #1c1c1c) !important;
  color: var(--dh-text-white, #ffffff) !important;

  border: none !important;
  box-shadow: none !important;

  box-sizing: border-box !important;
}

/* Vnitřní odsazení jen pro dotaz */
html body #colorbox:has(.content-modal) #cboxLoadedContent {
  width: 100% !important;
  max-width: 760px !important;

  padding: 42px 56px 48px 56px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Šířka jen pro dotaz */
html body #colorbox:has(.content-modal),
html body #colorbox:has(.content-modal) #cboxWrapper,
html body #colorbox:has(.content-modal) #cboxContent {
  max-width: 760px !important;
}

/* Vnitřní formulář */
html body #colorbox .content-modal,
html body #colorbox .content-modal form,
html body #colorbox .content-modal .form-group,
html body #colorbox .content-modal .form-group-wrapper,
html body #colorbox .content-modal .form-group-wrapped {
  width: 100% !important;
  max-width: 100% !important;

  box-sizing: border-box !important;
}

/* Nadpis dotazu */
html body #colorbox .content-modal h1 {
  color: var(--dh-gold, #fada73) !important;

  font-family: var(--dh-font, "PT Serif", serif) !important;
  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;

  margin: 0 0 26px 0 !important;
  letter-spacing: 0.3px !important;
}

/* Text pod nadpisem */
html body #colorbox .content-modal p {
  color: var(--dh-text-white, #ffffff) !important;

  font-family: var(--dh-font, "PT Serif", serif) !important;
  font-size: 18px !important;
  line-height: 1.45 !important;

  margin-bottom: 20px !important;
}

/* Labely */
html body #colorbox .content-modal label {
  display: block !important;

  color: var(--dh-gold, #fada73) !important;

  font-family: var(--dh-font, "PT Serif", serif) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;

  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;

  margin-bottom: 8px !important;
}

/* Required */
html body #colorbox .content-modal .red,
html body #colorbox .content-modal .required-asterisk {
  color: var(--dh-gold-light, #fbe294) !important;
}

/* Inputy */
html body #colorbox .content-modal input.form-control,
html body #colorbox .content-modal textarea.form-control,
html body #colorbox .content-modal input[type="text"],
html body #colorbox .content-modal input[type="email"],
html body #colorbox .content-modal input[type="tel"],
html body #colorbox .content-modal textarea {
  width: 100% !important;
  max-width: 100% !important;

  background: #000000 !important;
  background-color: #000000 !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;

  border: 1px solid var(--dh-gold, #fada73) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  outline: none !important;

  padding: 12px 15px !important;

  font-family: var(--dh-font, "PT Serif", serif) !important;
  font-size: 17px !important;
  line-height: 1.4 !important;

  box-sizing: border-box !important;
}

/* Focus inputů */
html body #colorbox .content-modal input.form-control:focus,
html body #colorbox .content-modal textarea.form-control:focus,
html body #colorbox .content-modal input:focus,
html body #colorbox .content-modal textarea:focus {
  background: #000000 !important;
  background-color: #000000 !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border-color: var(--dh-gold-light, #fbe294) !important;

  box-shadow: none !important;
  outline: none !important;
}

/* Textarea */
html body #colorbox .content-modal textarea {
  min-height: 160px !important;
  resize: vertical !important;
}

/* Souhlas */
html body #colorbox .content-modal label.whole-width {
  color: var(--dh-text-white, #ffffff) !important;

  text-transform: none !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;

  margin: 20px 0 26px 0 !important;

  max-width: 100% !important;
}

/* Odkazy v dotazu */
html body #colorbox .content-modal a {
  color: var(--dh-gold-light, #fbe294) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

html body #colorbox .content-modal a:hover {
  color: var(--dh-gold, #fada73) !important;
  text-decoration: underline !important;
}

/* Odeslat */
html body #colorbox .content-modal input[type="submit"].btn,
html body #colorbox .content-modal button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 190px !important;
  min-height: 48px !important;

  padding: 13px 36px !important;

  background: var(--dh-gradient, linear-gradient(135deg, #fada73 0%, #fada73 45%, #b8860b 100%)) !important;

  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;

  border: 1px solid var(--dh-gold, #fada73) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  outline: none !important;

  font-family: var(--dh-font, "PT Serif", serif) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;

  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;

  cursor: pointer !important;
}

html body #colorbox .content-modal input[type="submit"].btn:hover,
html body #colorbox .content-modal button[type="submit"]:hover {
  background: var(--dh-gradient-hover, linear-gradient(135deg, #fff0a3 0%, #fada73 55%, #9f7608 100%)) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Mobil dotaz */
@media (max-width: 767px) {
  html body #colorbox:has(.content-modal) #cboxLoadedContent {
    padding: 22px 18px !important;
  }

  html body #colorbox .content-modal h1 {
    font-size: 28px !important;
  }

  html body #colorbox .content-modal p {
    font-size: 16px !important;
  }

  html body #colorbox .content-modal input.form-control,
  html body #colorbox .content-modal textarea.form-control {
    font-size: 16px !important;
  }
}

/* ============================================
   5. PRODUKTOVÁ GALERIE
   pouze šipky a X, žádná změna velikosti fotky
   ============================================ */

/* Šipky galerie */
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxPrevious,
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxNext,
html body #colorbox:has(img.cboxPhoto) #cboxPrevious,
html body #colorbox:has(img.cboxPhoto) #cboxNext {
  position: absolute !important;
  top: 50% !important;

  width: 46px !important;
  height: 72px !important;

  background: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
  outline: none !important;

  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;

  cursor: pointer !important;
  pointer-events: auto !important;

  z-index: 10100 !important;
  opacity: 0.75 !important;
}

/* pozice šipek */
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxPrevious,
html body #colorbox:has(img.cboxPhoto) #cboxPrevious {
  left: 10px !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}

html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxNext,
html body #colorbox:has(img.cboxPhoto) #cboxNext {
  right: 10px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}

/* vlastní šipky */
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxPrevious::after,
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxNext::after,
html body #colorbox:has(img.cboxPhoto) #cboxPrevious::after,
html body #colorbox:has(img.cboxPhoto) #cboxNext::after {
  content: "" !important;

  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  width: 22px !important;
  height: 22px !important;

  border-top: 3px solid var(--dh-gold, #fada73) !important;
  border-right: 3px solid var(--dh-gold, #fada73) !important;

  background: transparent !important;
  box-shadow: none !important;

  pointer-events: none !important;
}

html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxPrevious::after,
html body #colorbox:has(img.cboxPhoto) #cboxPrevious::after {
  transform: translate(-35%, -50%) rotate(-135deg) !important;
}

html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxNext::after,
html body #colorbox:has(img.cboxPhoto) #cboxNext::after {
  transform: translate(-65%, -50%) rotate(45deg) !important;
}

html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxPrevious:hover,
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxNext:hover,
html body #colorbox:has(img.cboxPhoto) #cboxPrevious:hover,
html body #colorbox:has(img.cboxPhoto) #cboxNext:hover {
  opacity: 1 !important;
}

html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxPrevious:hover::after,
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxNext:hover::after,
html body #colorbox:has(img.cboxPhoto) #cboxPrevious:hover::after,
html body #colorbox:has(img.cboxPhoto) #cboxNext:hover::after {
  border-color: var(--dh-gold-light, #fbe294) !important;
}

/* Popisek galerie */
html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxCurrent,
html body #colorbox:has(img.cboxPhoto) #cboxCurrent {
  color: var(--dh-text-muted, rgba(255, 255, 255, 0.55)) !important;

  font-family: var(--dh-font, "PT Serif", serif) !important;
  font-size: 12px !important;

  opacity: 0.55 !important;
}

/* Mobil X */
@media (max-width: 767px) {
  html body #colorbox:has(.site-agreement-inner) #cboxClose,
  html body #colorbox:has(.content-modal) #cboxClose,
  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxClose,
  html body #colorbox:has(img.cboxPhoto) #cboxClose {
    width: 46px !important;
    height: 46px !important;
  }

  html body #colorbox:has(.site-agreement-inner) #cboxClose::before,
  html body #colorbox:has(.site-agreement-inner) #cboxClose::after,
  html body #colorbox:has(.content-modal) #cboxClose::before,
  html body #colorbox:has(.content-modal) #cboxClose::after,
  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxClose::before,
  html body #colorbox:has(#cboxLoadedContent > img.cboxPhoto) #cboxClose::after,
  html body #colorbox:has(img.cboxPhoto) #cboxClose::before,
  html body #colorbox:has(img.cboxPhoto) #cboxClose::after {
    width: 31px !important;
    height: 3px !important;
  }
}
/* ============================================
   COLORBOX – Dotaz na prodejce
   oprava bílého / modrého pozadí po vyplnění e-mailu
   pouze formulář .content-modal
   ============================================ */

/* Základní stav všech polí v Dotazu na prodejce */
html body #colorbox:has(.content-modal) .content-modal input.form-control,
html body #colorbox:has(.content-modal) .content-modal textarea.form-control,
html body #colorbox:has(.content-modal) .content-modal input[type="text"],
html body #colorbox:has(.content-modal) .content-modal input[type="email"],
html body #colorbox:has(.content-modal) .content-modal input[type="tel"],
html body #colorbox:has(.content-modal) .content-modal textarea {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;

  border: 1px solid var(--dh-gold, #fada73) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  outline: none !important;

  font-family: var(--dh-font, "PT Serif", serif) !important;
}

/* Focus – po kliknutí do pole */
html body #colorbox:has(.content-modal) .content-modal input.form-control:focus,
html body #colorbox:has(.content-modal) .content-modal textarea.form-control:focus,
html body #colorbox:has(.content-modal) .content-modal input[type="text"]:focus,
html body #colorbox:has(.content-modal) .content-modal input[type="email"]:focus,
html body #colorbox:has(.content-modal) .content-modal input[type="tel"]:focus,
html body #colorbox:has(.content-modal) .content-modal textarea:focus {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;

  border-color: var(--dh-gold-light, #fbe294) !important;

  box-shadow: none !important;
  outline: none !important;
}

/* Vyplněný validní stav – některé šablony/prohlížeče mění barvu po zadání hodnoty */
html body #colorbox:has(.content-modal) .content-modal input.form-control:valid,
html body #colorbox:has(.content-modal) .content-modal input[type="email"]:valid,
html body #colorbox:has(.content-modal) .content-modal input[type="text"]:valid,
html body #colorbox:has(.content-modal) .content-modal input[type="tel"]:valid,
html body #colorbox:has(.content-modal) .content-modal textarea:valid {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border-color: var(--dh-gold, #fada73) !important;

  box-shadow: none !important;
  outline: none !important;
}

/* Chrome / Edge autofill – hlavní oprava toho světlého pozadí */
html body #colorbox:has(.content-modal) .content-modal input.form-control:-webkit-autofill,
html body #colorbox:has(.content-modal) .content-modal input.form-control:-webkit-autofill:hover,
html body #colorbox:has(.content-modal) .content-modal input.form-control:-webkit-autofill:focus,
html body #colorbox:has(.content-modal) .content-modal input.form-control:-webkit-autofill:active,
html body #colorbox:has(.content-modal) .content-modal input[type="email"]:-webkit-autofill,
html body #colorbox:has(.content-modal) .content-modal input[type="email"]:-webkit-autofill:hover,
html body #colorbox:has(.content-modal) .content-modal input[type="email"]:-webkit-autofill:focus,
html body #colorbox:has(.content-modal) .content-modal input[type="email"]:-webkit-autofill:active,
html body #colorbox:has(.content-modal) .content-modal input[type="text"]:-webkit-autofill,
html body #colorbox:has(.content-modal) .content-modal input[type="text"]:-webkit-autofill:hover,
html body #colorbox:has(.content-modal) .content-modal input[type="text"]:-webkit-autofill:focus,
html body #colorbox:has(.content-modal) .content-modal input[type="text"]:-webkit-autofill:active,
html body #colorbox:has(.content-modal) .content-modal input[type="tel"]:-webkit-autofill,
html body #colorbox:has(.content-modal) .content-modal input[type="tel"]:-webkit-autofill:hover,
html body #colorbox:has(.content-modal) .content-modal input[type="tel"]:-webkit-autofill:focus,
html body #colorbox:has(.content-modal) .content-modal input[type="tel"]:-webkit-autofill:active {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;

  border: 1px solid var(--dh-gold, #fada73) !important;
  border-radius: 0 !important;

  box-shadow: 0 0 0 1000px #000000 inset !important;
  -webkit-box-shadow: 0 0 0 1000px #000000 inset !important;

  outline: none !important;

  transition: background-color 9999s ease-in-out 0s !important;
}

/* Konkrétní pojistka přímo pro e-mailové pole */
html body #colorbox:has(.content-modal) .content-modal input#email,
html body #colorbox:has(.content-modal) .content-modal input[name="email"],
html body #colorbox:has(.content-modal) .content-modal input#email:focus,
html body #colorbox:has(.content-modal) .content-modal input[name="email"]:focus,
html body #colorbox:has(.content-modal) .content-modal input#email:valid,
html body #colorbox:has(.content-modal) .content-modal input[name="email"]:valid {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;

  border: 1px solid var(--dh-gold, #fada73) !important;

  box-shadow: none !important;
  outline: none !important;
}

/* Autofill pojistka přímo pro e-mail */
html body #colorbox:has(.content-modal) .content-modal input#email:-webkit-autofill,
html body #colorbox:has(.content-modal) .content-modal input#email:-webkit-autofill:hover,
html body #colorbox:has(.content-modal) .content-modal input#email:-webkit-autofill:focus,
html body #colorbox:has(.content-modal) .content-modal input#email:-webkit-autofill:active,
html body #colorbox:has(.content-modal) .content-modal input[name="email"]:-webkit-autofill,
html body #colorbox:has(.content-modal) .content-modal input[name="email"]:-webkit-autofill:hover,
html body #colorbox:has(.content-modal) .content-modal input[name="email"]:-webkit-autofill:focus,
html body #colorbox:has(.content-modal) .content-modal input[name="email"]:-webkit-autofill:active {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;

  border: 1px solid var(--dh-gold, #fada73) !important;

  box-shadow: 0 0 0 1000px #000000 inset !important;
  -webkit-box-shadow: 0 0 0 1000px #000000 inset !important;

  outline: none !important;

  transition: background-color 9999s ease-in-out 0s !important;
}

/* ============================================
   STATICKÉ STRÁNKY – název stránky
   O nás, Doprava a platba, Obchodní podmínky apod.
   změna zlatého H1 na šedou jako v tabulce parametrů
   ============================================ */

html body article.pageArticleDetail > header h1,
html body .pageArticleDetail > header h1,
html body .pageArticleDetail header[itemprop="headline"] h1 {
  color: var(--dh-text-muted, #999999) !important;
  -webkit-text-fill-color: var(--dh-text-muted, #999999) !important;

  font-family: var(--dh-font, "PT Serif", serif) !important;
  text-shadow: none !important;
}
/* ============================================
   PRODUKTOVÁ KARTA – barva textu záložky POPIS
   změna ze zlaté na šedou jako v tabulce parametrů
   ============================================ */

/* PC + obecný Shoptet tab */
html body .shp-tabs .shp-tab a.shp-tab-link,
html body .shp-tabs .shp-tab.active a.shp-tab-link,
html body #p-detail-tabs .shp-tab a.shp-tab-link,
html body #p-detail-tabs .shp-tab.active a.shp-tab-link,
html body .p-detail-tabs .shp-tab a.shp-tab-link,
html body .p-detail-tabs .shp-tab.active a.shp-tab-link {
  color: var(--dh-text-muted, #999999) !important;
  -webkit-text-fill-color: var(--dh-text-muted, #999999) !important;
}

/* Hover – ať se při najetí nevrací zlatá */
html body .shp-tabs .shp-tab a.shp-tab-link:hover,
html body .shp-tabs .shp-tab.active a.shp-tab-link:hover,
html body #p-detail-tabs .shp-tab a.shp-tab-link:hover,
html body #p-detail-tabs .shp-tab.active a.shp-tab-link:hover,
html body .p-detail-tabs .shp-tab a.shp-tab-link:hover,
html body .p-detail-tabs .shp-tab.active a.shp-tab-link:hover {
  color: var(--dh-text-muted, #999999) !important;
  -webkit-text-fill-color: var(--dh-text-muted, #999999) !important;
}

/* Tablet + mobil – přebití našeho silného přepisu u .full-width.p-detail-full-width */
@media (max-width: 1199px) {
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab a.shp-tab-link,
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab.active a.shp-tab-link,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab a.shp-tab-link,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab.active a.shp-tab-link,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab a.shp-tab-link,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab.active a.shp-tab-link,
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab a.shp-tab-link:hover,
  html body .full-width.p-detail-full-width .shp-tabs .shp-tab.active a.shp-tab-link:hover,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab a.shp-tab-link:hover,
  html body .full-width.p-detail-full-width #p-detail-tabs .shp-tab.active a.shp-tab-link:hover,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab a.shp-tab-link:hover,
  html body .full-width.p-detail-full-width .p-detail-tabs .shp-tab.active a.shp-tab-link:hover {
    color: var(--dh-text-muted, #999999) !important;
    -webkit-text-fill-color: var(--dh-text-muted, #999999) !important;
  }
}
/* ============================================
   KATEGORIE – skrytí počtu položek ve výpisu
   odstraní text typu "1 položek celkem"
   ============================================ */

/* Samotný počet položek */
html body .listingControls .itemsTotal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}

/* Pokud listingControls obsahuje jen skrytý nadpis + itemsTotal,
   schováme celý prázdný obal, aby nezůstala mezera */
html body .listingControls:has(.itemsTotal):not(:has(select)):not(:has(button)):not(:has(.listSorting)):not(:has(.listSorting__controls)) {
  display: none !important;

  margin: 0 !important;
  padding: 0 !important;

  height: 0 !important;
  min-height: 0 !important;

  border: none !important;
  box-shadow: none !important;
}

/* ============================================
   PRODUKTOVÉ KARTY – CENTROVÁNÍ NÁKUPNÍCH PRVKŮ
   Pouze výpis produktů, PC i mobil
   ============================================ */

/* Počítadlo množství */
html body .products-block .product .quantity {
    display: flex !important;

    margin-top: 0 !important;
    margin-right: auto !important;
    margin-bottom: 12px !important;
    margin-left: auto !important;

    float: none !important;
}

/* Tlačítko Do košíku */
html body .products-block .product .add-to-cart-button {
    display: flex !important;

    margin-top: 0 !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;

    float: none !important;

    align-items: center !important;
    justify-content: center !important;
}

/* Obsah tlačítka */
html body .products-block .product .add-to-cart-button span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    margin: 0 !important;
}

/* Mobil */
@media (max-width: 767px) {
    html body .products-block .product .quantity {
        margin-right: auto !important;
        margin-left: auto !important;
        margin-bottom: 12px !important;
    }

    html body .products-block .product .add-to-cart-button {
        margin-right: auto !important;
        margin-left: auto !important;
    }
}