/*
 * TUKO x Shoptet Tango (template-09, generace 3, mobile-header-version-1)
 * Verze 4.12
 * ------------------------------------------------------------
 * Zasady:
 * - Shoptet vlastni mechaniku: mobilni navigace, galerie, kosik, AJAX filtrovani.
 *   Tento soubor je pouze vizualni vrstva.
 * - Selektory respektuji skutecne HTML Tanga vcetne Bootstrap gridu.
 *   Karta produktu: .product > .inner > .img + .descr > .prices.row > (.col-xs-8, .tools-wrap.col-xs-4)
 *   Detail: .p-detail-inner > .row > (.col-md-4 h1, .col-md-8.pull-right.p-image-wrapper, .col-md-4.pull-left)
 * - Obsah (hero, story, benefity, patickove odkazy) je v administraci, ne v JS.
 * - !important jen tam, kde se prebiji Shoptet. Vlastni .tuko-* vrstva ho nema.
 */

/* ==========================================================
   00 - TOKENY
   Shoptet nastavuje --color-* na :root. Tento soubor se nacita
   pozdeji, takze prepis nepotrebuje !important.
   ========================================================== */

:root {
  --tuko-bg: #f6efea;
  --tuko-bg-soft: #fbf7f4;
  --tuko-text: #62492a;
  --tuko-text-strong: #533d22;
  --tuko-muted: #7a6247;
  --tuko-accent: #a87312;
  --tuko-accent-hover: #8e600d;
  --tuko-green: #4e6340;
  --tuko-terracotta: #a65f45;
  --tuko-line: rgba(98,73,42,.14);
  --tuko-line-strong: rgba(98,73,42,.24);
  --tuko-shadow-soft: 0 16px 46px rgba(83,61,34,.065);
  --tuko-radius: 18px;
  --tuko-radius-lg: 28px;
  --tuko-content: 1180px;
  /* Oba fonty nacita Shoptet podle Editoru vzhledu, nepridavame vlastni webfont. */
  --tuko-serif: "PT Serif", Georgia, "Times New Roman", serif;
  --tuko-sans: "Source Sans 3", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --color-primary: #a87312;
  --color-primary-hover: #8e600d;
  --color-secondary: #a87312;
  --color-secondary-hover: #8e600d;
  --color-tertiary: #533d22;
  --color-tertiary-hover: #8e600d;
}

/* ==========================================================
   01 - ZAKLAD A TYPOGRAFIE
   ========================================================== */

html {
  background: var(--tuko-bg-soft);
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 8%, rgba(255,255,255,.62), transparent 23%),
    radial-gradient(circle at 90% 16%, rgba(255,255,255,.42), transparent 24%),
    linear-gradient(180deg, var(--tuko-bg-soft) 0%, var(--tuko-bg) 54%, #f2ebe5 100%);
  color: var(--tuko-text-strong);
  font-family: var(--tuko-sans);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font-family: var(--tuko-sans);
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  color: var(--tuko-text-strong);
  font-family: var(--tuko-serif);
  font-weight: 400;
  letter-spacing: -.022em;
}

h1, .h1 {
  font-size: clamp(34px, 3.2vw, 46px);
  line-height: 1.08;
}

a {
  color: var(--tuko-text);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

a:hover,
a:focus {
  color: var(--tuko-accent);
}

#content-wrapper,
.content-wrapper-in,
#content,
.content-inner,
.sidebar,
.sidebar-inner {
  background: transparent;
}

.container {
  max-width: var(--tuko-content);
}

.breadcrumbs {
  margin: 16px 0;
  color: var(--tuko-muted);
  font-size: 12px;
}

.breadcrumbs a {
  color: var(--tuko-muted);
}

/* ==========================================================
   02 - TLACITKA
   ========================================================== */

.btn,
a.btn,
.add-to-cart-button,
.btn-conversion,
.btn-primary {
  border-radius: 999px;
  font-family: var(--tuko-sans);
  font-weight: 700;
  letter-spacing: .02em;
}

.btn-conversion,
.add-to-cart-button,
.btn-primary,
.tuko-btn--primary {
  border-color: var(--tuko-accent) !important;
  background: var(--tuko-accent) !important;
  color: #fff !important;
}

.btn-conversion:hover,
.btn-conversion:focus,
.add-to-cart-button:hover,
.add-to-cart-button:focus,
.btn-primary:hover,
.btn-primary:focus,
.tuko-btn--primary:hover,
.tuko-btn--primary:focus {
  border-color: var(--tuko-accent-hover) !important;
  background: var(--tuko-accent-hover) !important;
  color: #fff !important;
}

.btn-default,
.tuko-btn--ghost {
  border: 1px solid var(--tuko-line-strong) !important;
  background: rgba(255,255,255,.42) !important;
  color: var(--tuko-text) !important;
}

.btn-default:hover,
.btn-default:focus,
.tuko-btn--ghost:hover,
.tuko-btn--ghost:focus {
  border-color: var(--tuko-accent) !important;
  color: var(--tuko-accent) !important;
}

/* ==========================================================
   03 - FORMULARE
   ========================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select,
.form-control {
  border-color: var(--tuko-line-strong);
  border-radius: 12px;
  background: rgba(255,255,255,.62);
  color: var(--tuko-text-strong);
  box-shadow: none;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--tuko-accent);
  box-shadow: 0 0 0 3px rgba(168,115,18,.14);
}

/* ==========================================================
   04 - HEADER
   Tango na mobilu drzi #header fixed a pri scrollu dolu ho
   schova (html.scrolled-down + translateY(-100%)). Velke logo
   a slogan z vizualni vrstvy z lišty pretekaji, takze pri
   schovani "cestuji" po obrazovce. Header na mobilu zustane
   nahoře, logo i slogan se vejdou do nizsi stale listy.
   ========================================================== */

#header {
  border: 0;
  background: rgba(251,247,244,.97);
  box-shadow: none;
}

html.scrolled #header {
  background: rgba(251,247,244,.99);
  box-shadow: 0 6px 24px rgba(83,61,34,.06);
}

#header .project-phone,
#header .project-email,
#header .top-nav a,
#header .top-nav button,
#header .navigation-buttons a,
#header .navigation-buttons button {
  color: var(--tuko-text);
}

#header .project-email {
  font-size: 13px;
  font-weight: 550;
  letter-spacing: .02em;
}

#header .site-name a {
  color: inherit;
  text-decoration: none;
}

#header .site-name a:hover,
#header .site-name a:focus {
  color: var(--tuko-accent);
  text-decoration: none;
}

#header .site-name img {
  display: block;
  object-fit: contain;
}

#header .btn-icon {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#header .cart-count [class*="count"],
#header .cart-count [class*="badge"] {
  border-color: var(--tuko-accent);
  background: var(--tuko-accent);
  color: #fff;
}

/* ==========================================================
   05 - DESKTOP NAVIGACE
   navigation_breakpoint Tanga je 767. Menu drzime uzke, aby si
   Tango nemuselo polozky odklapat do .menu-helper.
   ========================================================== */

@media (min-width: 768px) {
  #header > .navigation-wrapper {
    max-width: var(--tuko-content);
    margin: 0 auto;
    padding: 0 18px;
  }

  #header .top-nav {
    min-height: 42px;
    border-bottom: 1px solid var(--tuko-line);
  }

  /*
   * Shoptet podtitul v hlavicce ukaze jen kdyz neni nastavene logo.
   * Slogan proto sazi vizualni vrstva pod ciste wordmark logo.
   */
  #header .site-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 0 10px;
  }

  #header .site-name a {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }

  #header .site-name img {
    width: min(248px, 72vw);
    height: auto;
    max-width: none;
    max-height: none;
  }

  #header .site-name a::after {
    content: "S láskou pro nejmenší";
    margin-top: 6px;
    color: var(--tuko-accent);
    font-family: var(--tuko-sans);
    font-size: clamp(9px, 2.35vw, 10.5px);
    font-weight: 650;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /*
   * Tango meri polozky v pruhu .navigation-in { width: 9999em } a ty,
   * ktere pretecou pres .menu-helper, oznaci .splitted (visibility:hidden).
   * Pri hoveru je pak zobrazi display:none. Kdyz helper schovame pres
   * display:none, jQuery offset je 0 a Tango oznaci VSECHNY polozky —
   * menu pak pri najeti problikava. Helper proto nechavame v layoutu
   * (visibility:hidden), centrovani jen ve stavu .fitted a mereni
   * dokoncujeme v tuko-shoptet.js.
   */
  #navigation {
    overflow: visible;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 43px;
    border-top: 0;
    border-bottom: 1px solid var(--tuko-line);
    background: transparent;
    box-shadow: none;
    transition: none;
  }

  #navigation.fitted .navigation-in {
    width: 100%;
    max-width: 100%;
  }

  #navigation .navigation-in > ul.menu-level-1 {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 0;
  }

  #navigation.fitted .navigation-in > ul.menu-level-1 {
    justify-content: center;
    flex-wrap: wrap;
  }

  #header .menu-helper:not(.visible) {
    visibility: hidden !important;
    pointer-events: none;
  }

  #navigation .navigation-in > ul.menu-level-1 > li > a {
    position: relative;
    display: flex;
    min-height: 43px;
    align-items: center;
    padding: 0 13px;
    border: 0;
    background: transparent;
    color: var(--tuko-text);
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: none;
    white-space: nowrap;
  }

  #navigation .navigation-in > ul.menu-level-1 > li > a::after {
    content: "";
    position: absolute;
    right: 13px;
    bottom: 5px;
    left: 13px;
    height: 1px;
    background: var(--tuko-accent);
    transform: scaleX(0);
    transition: transform .18s ease;
  }

  #navigation .navigation-in > ul.menu-level-1 > li > a:hover,
  #navigation .navigation-in > ul.menu-level-1 > li.active > a,
  #navigation .navigation-in > ul.menu-level-1 > li.exp > a {
    background: transparent;
    color: var(--tuko-accent);
  }

  #navigation .navigation-in > ul.menu-level-1 > li > a:hover::after,
  #navigation .navigation-in > ul.menu-level-1 > li.active > a::after,
  #navigation .navigation-in > ul.menu-level-1 > li.exp > a::after {
    transform: scaleX(1);
  }

  #navigation .menu-level-2 {
    overflow: hidden;
    padding: 7px;
    border: 1px solid var(--tuko-line);
    border-radius: 14px;
    background: rgba(253,250,247,.99);
    box-shadow: var(--tuko-shadow-soft);
  }

  #navigation .menu-level-2 a {
    border-radius: 9px;
    background: transparent;
    color: var(--tuko-text);
    font-size: 13px;
    font-weight: 550;
  }

  #navigation .menu-level-2 a:hover {
    background: rgba(168,115,18,.06);
    color: var(--tuko-accent);
  }
}

/* ==========================================================
   06 - MOBILNI HEADER
   Zadne display / position / transform na #navigation.
   Drawer patri Tangu. Header zustane nahoře (bez schovani
   pri scrollu). Logo i slogan "S láskou pro nejmenší"
   se vejdou do nizsi stale listy.
   ========================================================== */

@media (max-width: 767px) {
  html.scrolled-down #header {
    transform: none;
  }

  #header {
    overflow: hidden;
    min-height: 66px;
    height: auto;
    background: rgba(251,247,244,.985);
  }

  #header .navigation-buttons {
    min-height: 66px;
    align-items: center;
  }

  #header .site-name {
    padding: 0;
  }

  #header .site-name a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: auto;
    min-height: 50px;
    padding: 7px 0;
  }

  #header .site-name img {
    width: auto;
    max-width: 118px;
    max-height: 32px;
    height: auto;
    padding: 0;
  }

  #header .site-name a::after {
    display: block;
    content: "S láskou pro nejmenší";
    margin-top: 3px;
    color: var(--tuko-accent);
    font-family: var(--tuko-sans);
    font-size: 8.5px;
    font-weight: 650;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  body.ums_mobile_header_v1--on .overall-wrapper,
  body.ums_mobile_header_v1--on.has-carousel .overall-wrapper {
    padding-top: 66px;
  }

  #header .cart-price {
    display: none;
  }

  #navigation a {
    color: var(--tuko-text-strong);
  }

  #navigation .menu-level-2 a {
    color: var(--tuko-muted);
  }
}

/* ==========================================================
   07 - HOMEPAGE
   Hero a story se vkladaji jako HTML v administraci
   (Vzhled a obsah -> texty uvodni stranky).
   ========================================================== */

.tuko-shell {
  width: min(var(--tuko-content), calc(100% - 40px));
  margin: 0 auto;
}

.tuko-hero {
  position: relative;
  overflow: hidden;
  padding: 42px 0 54px;
}

/*
 * Vychozi stav je jeden sloupec. Dva az od 992 px, protoze obsahovy
 * sloupec muze byt uzky i pri sirokem okne (napr. kdyz ma stranka sidebar).
 */
.tuko-hero__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

/* Dva sloupce jen kdyz hero opravdu ma obrazek. Bez nej by prava
 * polovina zustala prazdna a text by koncil v pulce stranky. */
@media (min-width: 992px) {
  .tuko-hero__grid:has(.tuko-hero__visual) {
    grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
  }
}

.tuko-kicker {
  margin-bottom: 16px;
  color: var(--tuko-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.tuko-hero h1 {
  max-width: 660px;
  margin: 0 0 21px;
  font-size: clamp(48px, 4.65vw, 64px);
  line-height: 1.015;
  letter-spacing: -.036em;
}

.tuko-hero__lead {
  max-width: 610px;
  margin: 0;
  color: var(--tuko-muted);
  font-size: 16px;
  line-height: 1.7;
}

.tuko-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 25px;
  padding: 0;
  list-style: none;
}

.tuko-proof li {
  padding: 7px 12px;
  border: 1px solid var(--tuko-line);
  border-radius: 999px;
  background: rgba(255,255,255,.4);
  color: var(--tuko-text);
  font-size: 12px;
}

.tuko-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

/*
 * Dvojice CTA v hero. Shoptet .btn je inline-block, 2px border a
 * line-height 12px; nas .btn-default ale pres !important zkracuje
 * border na 1px, takze text v tlacitkach nesedi na jedne ose.
 * Tady sjednocujeme box, vnitrni centrovani a hierarchii primary / ghost.
 */
.tuko-hero__actions .btn,
.tuko-hero__actions a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.15;
  white-space: nowrap;
  text-transform: none;
  vertical-align: middle;
}

.tuko-hero__actions .btn-conversion,
.tuko-hero__actions a.btn-conversion {
  border: 2px solid var(--tuko-accent) !important;
  background: var(--tuko-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(168, 115, 18, .18);
}

.tuko-hero__actions .btn-conversion:hover,
.tuko-hero__actions .btn-conversion:focus,
.tuko-hero__actions a.btn-conversion:hover,
.tuko-hero__actions a.btn-conversion:focus {
  border-color: var(--tuko-accent-hover) !important;
  background: var(--tuko-accent-hover) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(142, 96, 13, .22);
}

.tuko-hero__actions .btn-default,
.tuko-hero__actions a.btn-default {
  border: 2px solid rgba(168, 115, 18, .7) !important;
  background: rgba(255, 255, 255, .88) !important;
  color: var(--tuko-text-strong) !important;
  box-shadow: 0 6px 18px rgba(83, 61, 34, .06);
}

.tuko-hero__actions .btn-default:hover,
.tuko-hero__actions .btn-default:focus,
.tuko-hero__actions a.btn-default:hover,
.tuko-hero__actions a.btn-default:focus {
  border-color: var(--tuko-accent) !important;
  background: #fff !important;
  color: var(--tuko-accent) !important;
  box-shadow: 0 8px 20px rgba(83, 61, 34, .08);
}

.tuko-hero__visual {
  position: relative;
  display: flex;
  min-height: 365px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--tuko-line);
  border-radius: 34px;
  background:
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.78), transparent 31%),
    linear-gradient(145deg, rgba(255,255,255,.52), rgba(255,255,255,.18));
  box-shadow: var(--tuko-shadow-soft);
}

.tuko-hero__visual img {
  display: block;
  width: min(75%, 408px);
  height: auto;
}

/* Pod 992 px je hero v jednom sloupci, obrazek by jen tlacil obsah dolu. */
@media (max-width: 991px) {
  .tuko-hero__visual {
    display: none;
  }
}

.tuko-story {
  padding: 28px 0 58px;
}

.tuko-story__box {
  max-width: 850px;
  margin: 0 auto;
  padding: 46px 54px;
  border: 1px solid var(--tuko-line);
  border-radius: var(--tuko-radius-lg);
  background: rgba(255,255,255,.34);
  box-shadow: var(--tuko-shadow-soft);
  text-align: center;
}

.tuko-story h2 {
  max-width: 720px;
  margin: 0 auto 19px;
}

.tuko-story p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--tuko-muted);
  font-size: 15px;
  line-height: 1.7;
}

.tuko-story__quote {
  max-width: 720px;
  margin: 24px auto 0;
  color: var(--tuko-text-strong);
  font-family: var(--tuko-serif);
  font-size: 20px;
  line-height: 1.46;
}

/* Prazdny wide-carousel Tango vykresluje i bez nastavenych banneru. */
.wide-carousel:empty {
  display: none;
}

body.type-index #content-wrapper {
  padding-top: 12px;
  padding-bottom: 10px;
}

body.type-index .homepage-group-title,
body.type-index .products-top-header {
  margin: 0 0 27px;
  color: var(--tuko-text-strong);
  font-family: var(--tuko-serif);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 400;
  text-align: center;
}

/* ==========================================================
   08 - BENEFIT BANNERY
   Nativni Shoptet prvek, obsah se edituje v administraci
   (Marketing -> Bannery -> pozice Benefity).
   ========================================================== */

/*
 * Shoptet vykresluje benefity pred uvitacim textem, takze navstevnik
 * vidi "Garance doruceni" driv, nez se dozvi, co TUKO je. Z #content
 * proto na titulce delame flex sloupec a poradi urcime rucne.
 * Systemove zpravy musi zustat nahore, jinak by uzivatel prehledl
 * potvrzeni o pridani do kosiku.
 */
body.type-index #content {
  display: flex;
  flex-direction: column;
}

body.type-index #content > * {
  order: 3;
}

body.type-index #content > .messages {
  order: 0;
}

body.type-index #content > .welcome-wrapper {
  order: 1;
}

body.type-index #content > .benefitBanner {
  order: 2;
}

/*
 * auto-fit + minmax drzi kartu vzdy nad 220 px bez ohledu na to, jak uzky
 * je obsahovy sloupec. min(220px, 100%) zabrani preteceni v uzkem miste,
 * prazdne tracky auto-fit zahodi, takze pri plne sirce zustanou 4 v rade.
 */
.benefitBanner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 11px;
  max-width: var(--tuko-content);
  margin: 38px auto 44px;
  padding: 0;
  border: 0;
  background: transparent;
}

/*
 * Nativne je .benefitBanner flexbox a Shoptet dava polozkam width v procentech
 * a flex: 0 0 50%. Bez vynulovani sirky se grid item nerozpne do sveho tracku.
 */
.benefitBanner__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: auto;
  flex: 0 1 auto;
  min-height: 92px;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 15px 16px;
  border: 1px solid var(--tuko-line);
  border-radius: 17px;
  background: rgba(255,255,255,.36);
}

.benefitBanner__picture {
  display: flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 1px solid var(--tuko-line);
  border-radius: 50%;
  background: rgba(255,255,255,.56);
}

/* Ikony maji v HTML width/height 100, bez zmenseni by prekryly kolecko. */
.benefitBanner__img {
  width: 24px;
  height: 24px;
}

/* Bez min-width:0 muze grid textovy sloupec stlacit na nulu. */
.benefitBanner__content {
  min-width: 0;
}

.benefitBanner__title {
  display: block;
  margin-bottom: 3px;
  color: var(--tuko-text-strong);
  font-family: var(--tuko-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}

.benefitBanner__data {
  color: var(--tuko-muted);
  font-size: 11.5px;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .benefitBanner {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 8px;
    margin: 28px auto 36px;
  }

  .benefitBanner__item {
    grid-template-columns: 1fr;
    min-height: 120px;
    gap: 7px;
    padding: 14px 11px;
    border-radius: 16px;
    text-align: center;
  }

  .benefitBanner__picture {
    margin: 0 auto;
  }
}

/* ==========================================================
   09 - KARTY PRODUKTU
   Sloupce a floaty patri Bootstrapu. Menime jen vzhled.
   Rozmery karty se pri hoveru nemeni.
   ========================================================== */

.products-block .product {
  margin-bottom: 28px;
  border: 0;
  background: transparent;
}

.products-block .product .inner {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.products-block .product .img {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--tuko-line);
  border-radius: 15px;
  background: rgba(255,255,255,.58);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.products-block .product .img > a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.products-block .product .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .22s ease;
}

.products-block .product .descr {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 12px 2px 0;
  text-align: left;
}

.products-block .product .name {
  display: block;
  text-decoration: none;
}

.products-block .product .name span {
  display: -webkit-box;
  min-height: 2.7em;
  overflow: hidden;
  color: var(--tuko-text-strong);
  font-family: var(--tuko-sans);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  text-transform: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.products-block .product .price-final,
.products-block .product .price-final strong {
  color: var(--tuko-text-strong);
  font-family: var(--tuko-sans);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.3;
}

.products-block .product .price-standard-wrapper {
  color: var(--tuko-muted);
  font-size: 11px;
}

.products-block .product .availability {
  --product-availability-color: var(--tuko-green);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.products-block .product .product-link {
  display: none;
}

@media (min-width: 992px) {
  .products-block .product:hover .img,
  .products-block .product:focus-within .img {
    border-color: var(--tuko-line-strong);
    box-shadow: 0 15px 36px rgba(83,61,34,.07);
    transform: translateY(-2px);
  }

  .products-block .product:hover .img img {
    transform: scale(1.012);
  }

  /* Na lg jsou .col-xs-8 i .tools-wrap uz col-lg-12, tedy pod sebou. */
  .products-block .product .tools-wrap {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding-top: 8px;
  }

  .products-block .product .tools-wrap .availability {
    order: 1;
    margin-bottom: 8px;
  }

  .products-block .product .tools-wrap .tools {
    order: 2;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .products-block .product .tools form {
    flex: 1 1 auto;
    margin: 0;
  }

  .products-block .product .add-to-cart-button {
    display: inline-flex;
    width: 100%;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .035em;
    text-transform: uppercase;
  }

  .products-block .product .tools > a.btn {
    min-height: 39px;
    border: 1px solid var(--tuko-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--tuko-text);
    font-size: 11px;
  }
}

/*
 * Pod lg drzi Shoptet cenu v .col-xs-8 a .tools-wrap v .col-xs-4 vedle sebe.
 * Prepiname na flex, aby "Skladem" mohlo dostat vlastni radek a nemohlo
 * se prekryt s tlacitkem. Nativni ikonove tlacitko .btn-cart zustava.
 */
@media (max-width: 991px) {
  .products-block .product .prices.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 9px 0 0;
  }

  .products-block .product .prices.row > .col-xs-8 {
    width: auto;
    flex: 1 1 60%;
    padding: 0;
    float: none;
  }

  .products-block .product .tools-wrap {
    display: flex;
    width: auto;
    flex: 1 1 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding: 0;
    float: none;
  }

  .products-block .product .tools-wrap .availability {
    display: block;
    order: 1;
  }

  .products-block .product .tools-wrap .tools {
    order: 2;
    margin-left: auto;
  }

  .products-block .product .tools form {
    margin: 0;
  }

  .products-block .product .btn-cart {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tuko-accent);
    border-radius: 50%;
    background: var(--tuko-accent);
    color: #fff;
  }
}

@media (max-width: 767px) {
  .products-block .product {
    margin-bottom: 18px;
    padding: 0 5px;
  }

  .products-block .product .img {
    border-radius: 12px;
  }

  .products-block .product .descr {
    padding: 9px 1px 0;
  }

  .products-block .product .name span {
    min-height: 2.65em;
    font-size: 12.5px;
    line-height: 1.32;
  }

  .products-block .product .price-final,
  .products-block .product .price-final strong {
    font-size: 15px;
  }

  .products-block .product .availability {
    font-size: 11px;
  }
}

/* ==========================================================
   10 - VLAJKY
   ========================================================== */

.flag {
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: #fff;
  font-family: var(--tuko-sans);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.flag-tip {
  background: #8b6b39;
}

.flag-new {
  background: var(--tuko-green);
}

.flag-action,
.flag-discount,
.flag-sale,
.flag-custom1 {
  background: var(--tuko-terracotta);
}

/* ==========================================================
   11 - KATEGORIE
   Filtry se presouvaji nad vypis zmenou poradi ve flexu.
   DOM zustava nedotcen, aby AJAX filtrovani dal fungovalo.
   ========================================================== */

body.type-category .content-wrapper-in {
  display: flex;
  flex-direction: column;
}

body.type-category .content-wrapper-in > .sidebar {
  order: 1;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  float: none;
}

body.type-category .content-wrapper-in > .content {
  order: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  float: none;
}

/* Ze sidebaru zustava na kategorii jen filtr. */
body.type-category .sidebar-inner > *:not(.box-filters) {
  display: none;
}

body.type-category .box-filters {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--tuko-line);
  border-radius: var(--tuko-radius);
  background: rgba(255,255,255,.34);
  box-shadow: none;
}

body.type-category .box-filters h4 {
  margin: 0 0 6px;
  color: var(--tuko-text-strong);
  font-family: var(--tuko-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (min-width: 992px) {
  body.type-category #filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 26px;
  }

  body.type-category #filters > * {
    flex: 0 1 auto;
    min-width: 170px;
    margin: 0;
  }

  body.type-category .filters-unveil-button-wrapper {
    display: none;
  }
}

body.type-category h1 {
  margin-bottom: 24px;
}

body.type-category .subcategories {
  margin-bottom: 28px;
}

body.type-category .subcategories li a {
  border-color: var(--tuko-line);
  border-radius: 16px;
  background: rgba(255,255,255,.42);
  box-shadow: none;
}

body.type-category #category-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 20px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.type-category .listSorting {
  margin-left: auto;
  border-color: var(--tuko-line);
  background: transparent;
}

/* ==========================================================
   12 - DETAIL PRODUKTU
   Realna struktura Tanga:
   .p-detail-inner > .row > .col-md-4 (h1)
                          > .col-md-8.pull-right.detail-img.p-image-wrapper
                          > .col-md-4.pull-left (data)
   Bootstrap floaty zustavaji. Zadne presouvani DOM v JS.
   ========================================================== */

body.type-detail .content-wrapper-in > .content {
  width: 100%;
  max-width: none;
  margin: 0;
  float: none;
}

body.type-detail .p-detail-inner {
  margin-top: 6px;
  padding: 28px;
  border: 1px solid var(--tuko-line);
  border-radius: var(--tuko-radius-lg);
  background: rgba(255,255,255,.38);
  box-shadow: var(--tuko-shadow-soft);
}

body.type-detail .p-detail-inner h1 {
  max-width: 560px;
  margin: 0 0 16px;
  font-size: clamp(34px, 3.05vw, 44px);
  line-height: 1.055;
  letter-spacing: -.03em;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

body.type-detail .p-image-wrapper img {
  border-radius: 14px;
}

body.type-detail .p-thumbnails a,
body.type-detail .p-thumbnail {
  border-color: var(--tuko-line);
  border-radius: 12px;
  background: rgba(255,255,255,.52);
}

body.type-detail .p-thumbnails a.active,
body.type-detail .p-thumbnail.active {
  border-color: var(--tuko-accent);
}

body.type-detail .p-short-description {
  max-width: 530px;
  margin-bottom: 21px;
  color: var(--tuko-muted);
  font-size: 15px;
  line-height: 1.68;
}

body.type-detail .p-final-price-wrapper strong,
body.type-detail .price-final strong {
  color: var(--tuko-text-strong);
  font-family: var(--tuko-serif);
  font-size: 31px;
  font-weight: 400;
}

body.type-detail .availability,
body.type-detail .availability-value {
  --product-availability-color: var(--tuko-green);
}

body.type-detail .add-to-cart {
  margin-top: 20px;
  border-color: transparent;
  background: transparent;
}

body.type-detail .add-to-cart-button {
  min-width: 170px;
  min-height: 48px;
  padding: 0 22px;
}

body.type-detail .quantity input,
body.type-detail .amount {
  border-color: var(--tuko-line);
  background: rgba(255,255,255,.62);
  color: var(--tuko-text-strong);
}

body.type-detail .shp-tabs-wrapper,
body.type-detail .p-detail-tabs-wrapper {
  margin-top: 34px;
  padding: 24px 28px 28px;
  border: 1px solid var(--tuko-line);
  border-radius: 22px;
  background: rgba(255,255,255,.3);
  box-shadow: none;
}

body.type-detail .shp-tabs-row,
body.type-detail .p-detail-tabs {
  border-color: var(--tuko-line);
}

body.type-detail .shp-tab-link,
body.type-detail .p-detail-tabs a {
  color: var(--tuko-muted);
  font-family: var(--tuko-sans);
  font-size: 13px;
  font-weight: 650;
  text-transform: none;
}

body.type-detail .shp-tab.active .shp-tab-link,
body.type-detail .p-detail-tabs .active a {
  color: var(--tuko-accent);
}

body.type-detail .basic-description,
body.type-detail .extended-description,
body.type-detail .description-inner {
  max-width: 780px;
  color: var(--tuko-muted);
  font-size: 15px;
  line-height: 1.72;
}

body.type-detail .basic-description p,
body.type-detail .extended-description p {
  margin: 0 0 1em;
}

body.type-detail .detail-parameters {
  color: var(--tuko-text);
  font-size: 13px;
}

body.type-detail .detail-parameters td,
body.type-detail .detail-parameters th {
  padding: 7px 10px;
  border-color: var(--tuko-line);
}

@media (max-width: 767px) {
  body.type-detail .p-detail-inner {
    padding: 15px;
    border-radius: 22px;
  }

  body.type-detail .p-detail-inner h1 {
    margin-bottom: 13px;
    font-size: 30px;
    line-height: 1.07;
  }

  body.type-detail .p-short-description {
    font-size: 14px;
    line-height: 1.6;
  }

  body.type-detail .shp-tabs-wrapper,
  body.type-detail .p-detail-tabs-wrapper {
    margin-top: 24px;
    padding: 18px 15px 22px;
    border-radius: 18px;
  }
}

/* ==========================================================
   13 - SYSTEMOVE ZPRAVY
   ========================================================== */

.messages .msg,
.msg-success,
.alert-success,
.site-msg {
  border: 1px solid var(--tuko-line-strong);
  border-radius: 14px;
  background: rgba(253,250,247,.985);
  color: var(--tuko-text-strong);
  box-shadow: var(--tuko-shadow-soft);
}

.messages .msg a,
.msg-success a,
.site-msg a {
  color: var(--tuko-accent);
}

/* ==========================================================
   14 - TEXTOVE STRANKY
   VOP, GDPR, kontakty. Obsah je v administraci, tady jen sazba.
   ========================================================== */

body.type-text #content h1,
body.type-page #content h1 {
  max-width: 760px;
  margin: 8px auto 28px;
  text-align: left;
}

.tuko-legal {
  max-width: 760px;
  margin: 0 auto 72px;
  color: var(--tuko-text);
  font-size: 16px;
  line-height: 1.65;
}

.tuko-legal__note {
  margin: 0 0 36px;
  padding: 16px 18px;
  border: 1px solid var(--tuko-line);
  border-radius: var(--tuko-radius);
  background: rgba(255,255,255,.42);
  color: var(--tuko-muted);
  font-size: 14px;
}

.tuko-legal h2 {
  margin: 36px 0 12px;
  font-size: 22px;
  line-height: 1.25;
}

.tuko-legal h3 {
  margin: 22px 0 8px;
  font-family: var(--tuko-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
}

.tuko-legal p,
.tuko-legal ul,
.tuko-legal ol {
  margin: 0 0 12px;
}

.tuko-legal ul,
.tuko-legal ol {
  padding-left: 1.2em;
}

.tuko-legal li {
  margin: 0 0 6px;
}

.tuko-legal a {
  color: var(--tuko-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================
   15 - PATICKA
   Odkazy a ikony se nastavuji v administraci
   (Vzhled a obsah -> Zapati). #signature zustava viditelny.
   ========================================================== */

#footer {
  border-top: 1px solid var(--tuko-line);
  background: rgba(251,247,244,.55);
}

#footer .footer-bottom {
  border-color: var(--tuko-line);
  color: var(--tuko-muted);
  font-size: 12px;
}

#footer a {
  color: var(--tuko-muted);
}

#footer a:hover,
#footer a:focus {
  color: var(--tuko-accent);
}

#footer h3,
#footer h4,
#footer .footer-heading {
  color: var(--tuko-text-strong);
  font-family: var(--tuko-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Banner v pozici zapati, ktery Tango podporuje. */
#footer .extended-banner-title,
.extended-banner-title {
  color: var(--tuko-text-strong);
  font-family: var(--tuko-serif);
  font-weight: 400;
}

#footer .extended-banner-text,
.extended-banner-text {
  color: var(--tuko-muted);
  font-size: 12px;
  line-height: 1.65;
}

/* ==========================================================
   16 - MOBILNI OBSAH
   ========================================================== */

@media (max-width: 767px) {
  .tuko-shell {
    width: calc(100% - 30px);
  }

  .tuko-hero {
    padding: 39px 0 44px;
  }

  .tuko-kicker {
    margin-bottom: 13px;
    font-size: 10px;
    letter-spacing: .18em;
  }

  .tuko-hero h1 {
    max-width: 100%;
    margin-bottom: 18px;
    font-size: clamp(38px, 10.6vw, 45px);
    line-height: 1;
    letter-spacing: -.038em;
  }

  .tuko-hero__lead {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.62;
  }

  .tuko-proof {
    gap: 6px;
    margin-top: 21px;
  }

  .tuko-proof li {
    padding: 7px 9px;
    font-size: 11px;
  }

  .tuko-hero__actions {
    gap: 10px;
    margin-top: 26px;
  }

  .tuko-hero__actions .btn,
  .tuko-hero__actions a.btn {
    width: 100%;
    min-height: 50px;
    padding: 0 22px;
  }

  body.type-index .homepage-group-title {
    margin-bottom: 20px;
    font-size: 30px;
  }

  .tuko-story {
    padding: 24px 0 46px;
  }

  .tuko-story__box {
    padding: 31px 19px;
    border-radius: 22px;
  }

  .tuko-story h2 {
    font-size: 31px;
  }

  .tuko-story__quote {
    margin-top: 21px;
    font-size: 18px;
  }
}

/* ==========================================================
   17 - PRISTUPNOST A POHYB
   ========================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--tuko-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .products-block .product:hover .img,
  .products-block .product:hover .img img {
    transform: none;
  }
}

@media print {
  #header,
  #navigation,
  #footer,
  .benefitBanner,
  .tuko-hero,
  .tuko-story {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}