@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
    color: #5d3500;
}

html body {
  min-height: auto !important;
}

html {
    background-color: #f3dfa9;

}

/* Barva šipky dolů */
.container-header .mod-menu button {
    color: #e0720b !important;
}

/* Barva hlavičky / horního pruhu */
.container-header {
  background-color: #faf2dc !important;
  background-image: none !important;
   padding: 0px 10px 0 10px; 
}

.container-header .container-nav {
    border-top: 1px solid rgba(0, 0, 0, 0.075);
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
  padding-bottom: 0;
}


/* Barva pozadí těla stránky */
body {
  background-color: #faf2dc;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}


h1, h2, h3, h4, h5, h6, .site-title {
        font-family: 'Open Sans', sans-serif;
}
h2 {
    line-height: 20px;
}
.blog h2 {
    font-size: 18px;
    font-weight: bold;
}


h1 {
    font-size: 22px;
    line-height: 24px;
    margin: 12px 0;
    word-wrap: break-word;
}

a:not([class]) {
    text-decoration: none;
}

.page-header {
    margin: 12px 0px 10px 0px;
    padding-bottom: 5px;
}

:root {
  --cassiopeia-color-primary: #e0720b;  /* hlavní barva – často barva linků, tlačítek, menu */
  --cassiopeia-color-hover: #174F4B;    /* barva hover/aktivních prvků */
  --cassiopeia-color-link: #1C5E5A;     /* barva odkazů */
  a {
    color: #e0720b;
}
  
  a:hover { color: navy; text-decoration: underline; }

  .container-header .mod-menu>li>a, .container-header .mod-menu>li>span {
    color: #e0720b;
        position: relative;
}
  
}


.footer {
    color: #5d3500;
    background-color: #faf2dc;
    background-image: none;
    margin: 0 0 0 0px;
}

.footer .grid-child {
       padding: 20px 0 25px 20px !important;
      border-top: 1px solid #f3dfa9;
}

/*****/

/* Přepsání pro horizontální menu jako nav-pills */
.nav.nav-pills {
  display: flex !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav.nav-pills li {
  margin-right: 0rem;
}

.nav.nav-pills li a {
  display: block;
  padding: 5px 10px 5px 10px;
  border-radius: 0.25rem;
  text-decoration: none;
  background-color: transparent;
}

.nav.nav-pills li.active > a,
.nav.nav-pills li a:hover {
  background-color: #e0720b; /* nebo jiná barva podle designu */
  color: #fff;
}

@media (width >= 992px) {
    .container-header .mod-menu>li+li {
      margin-left: 0m !important; 

}

  .container-header .grid-child {
    padding: 5px;
}

}

/* konec nav pills */

/* --- některé vnitřní kontejnery (obsah článku, modulů) --- */
.site-content, .container-component, .main-content {
  max-width: 100%;
  width: 100%;
}

/* --- Hlavička a patička zůstávají full-width (neovlivňovat je) --- */
header.container-header,
footer {
  width: 100%;
}

/* --- Pro menší obrazovky: box se přizpůsobí šířce --- */
@media (max-width: 768px) {
  .site-grid,
  .site {
    padding: 15px 10px;
  }
}

/* --- ohraničení hlavního boxu stránky --- */
.site-grid, .site-grid > .grid-row, .site {
  max-width: 940px;         /* maximální šířka boxu; upravte podle potřeby */
  width: 100%;
  background-color: #faf2dc; /* barva pozadí obsahu / boxu */
  margin: 0 auto 20px auto;        /* odsazení uvnitř boxu */
   padding: 0px 0px 0 5px;  
}

.site {
  box-shadow: 0 0 15px rgba(0,0,0,0.08); /* jemný stín kolem obsahu — optional */
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  margin-top: 40px
}

/*****/



/* corr lightbox from inline */
a[data-lightbox] {
    display: block;
  }

/* breadcrumb */
.breadcrumb {
    background-color: #faf2dc;
;
    font-size: 12px;
}

.body .container {
	background-color: #faf2dc;
  }

.body {
    font-size: 14px;
    line-height: 1.5;
   }


/* mezera mezi nadpisem a podtržítkem */
.page-header {
    padding-bottom: 0px;
  	border-bottom: 1px solid #fce1c7;
}

.navigation {
  	margin-bottom: 15px;
}

h1 {
    line-height: 22px;
    margin-bottom: 6px;
}
  
/* text eshop - produkt intro */
h3 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 16px;
    line-height: 22px;
}

/* podtržítko nadpisu - světle oranžové */
h2 {
	line-height: 20px;
}

.body.site {
    background-color: #f3dfa9;
}

/* čára podtrhovací */

hr {
	padding-bottom: 0px;
  	border-bottom: 1px solid #ecd0b4;
    margin: 14px 0;
}

/* Eshop */
.item-page .clearfix {
    font-size: 0;
    line-height: 5px;
}

.j2store-cart .cart-continue-shopping-button {
      display: none;
}

input[type="radio"] {
    margin: 0px 3px 0 0;
}

input[type="checkbox"] {
    margin: 0px 3px 0 0;
}


#button-payment-method {
    margin-top: 15px;
}

/* # shipping_estimate */
#j2store-cart-modules {
    display: none;
}

#bank-submit-button {
    margin-top: 25px;
}

#cash-submit-button {
    margin-top: 15px;
}

.margin-zero {
  	line-height: 1;
}

.payment p {
    margin: 0;
    line-height: 0.5;
}

.j2store-single-product .price-sku-brand-container {
    margin: 0;
    padding: 10px 0 0 5px;
}

.j2store-single-product .row-fluid .span6 {
    width: 31%;
}

.table {
   line-height: 1.4;
}

.video {
  float:right;
  width:45%; 
  margin-right: 2.5%;
  margin-bottom: 2%;
  margin-top: 22px;
  margin-left: 1%;
}
  
.videoWrapper {
	position: relative;
	padding-bottom: 50%; /* 16:9 */
	padding-top: 25px;
	height: 0;
  	overflow: hidden;
}
.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (max-width:620px) {
    .video {
        float:none;
        width:100%;
    }
}

.videoWrapper2 {
	position: relative;
	padding-bottom: 50%; /* 16:9 */
	padding-top: 25px;
	height: 0;
  	overflow: hidden;
}
.videoWrapper2 iframe,
.videoWrapper2 object,
.videoWrapper2 embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.videoWrapper2 {
	display: none;
}

@media (max-width:480px) {
  .video {
        display: none !important;
        visibility:hidden !important;
    }
  .videoWrapper {
        display: none !important;
        visibility:hidden !important;
    }
  .videoWrapper iframe,
  .videoWrapper object,
  .videoWrapper embed {
        display: none !important;
        visibility:hidden !important;
}

  .videoWrapper2 {
        display: block;
    }
}

/* .item-page .j2store-mainimage img {
    width: 200px;
} */

/* blog - velikost nadpisu, odstupy odstavce, nezobrazovat cenu */
.blog h2 {
  font-size: 18px;
  font-weight: bold;
}
div[itemprop="blogPost"] p {
   margin: 0 0 30px;
}

.blog .j2store-product {
	display: none;
}


/* featured - velikost nadpisu, odstupy odstavce */
.blog-featured {
  padding-top: 12px;
}

.blog-featured h2 {
  font-size: 18px;
  font-weight: bold;
}

.blog-featured .item-title {
	padding-bottom: 12px;
  	border-bottom: 1px solid #fce1c7;
    margin: 0px 0px 10px 0px;
}

div[itemprop="blogPost"] p {
   margin: 0 0 30px;
}


/* článek - odstupy odstavce, formát obrázků, button, citát */
div[itemprop="articleBody"] p {
   margin: 20px 0 15px;
}
.img-my { 
  margin: 0 0 0.5em 0.5em;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: 40%;
}
.img-horizontal { 
  margin: 0 0.5em 0.5em 0;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: 35%;
}
.img-my-vertical { 
  margin: 0 0.5em 0.5em 2em;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: 20%;
}
.img-my-vertical-left { 
  margin: 0 2em 0.5em 0.5em;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: 20%;
}
.img-book { 
  margin: 0 2em 0em 0em;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: 22%;
}

.img-small { 
  margin: 0 2em 0em 0em;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: 15%;
}


.img-book-row { 
  margin: 0 1% 0.5em 0;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: 18%;
}

.button {
  color: #3a2605;
  font-size: 110%;
  text-decoration: none;
  background-color: #fce1c7;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #8e8e8e;
  border-bottom: 1px solid #8e8e8e;
  border-left: 1px solid #CCCCCC;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.button:hover {
  color: #333333;
  font-weight:bold;
  text-decoration: none;
  background-color:  #DFDFDF;   
}
blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 40px 0;
  border-left: 3px solid #fce1c7;
}
blockquote p {
  font-size: 110%;
  line-height: 1.5;
  color: #4a2604;
}

/* Media query */

@media only screen and (max-width: 980px) {
.img-my-vertical { width: 28%; }
.img-my { width: 45%; }
}

@media (max-width: 767px) {
.row-fluid [class*="span"] { min-height: 1px; }
.j2store-single-product .row-fluid .span6 { width: 100%; }
}  

@media only screen and (max-width: 620px) {
.img-my-vertical { width: 25%; }
.img-my { width: 50%; }
}

@media only screen and (max-width: 540px) {
.img-my { width: 50%; }
.img-my-vertical { width: 40%; }
h2[itemprop="name"] { font-size: 18px; }
}


@media only screen and (max-width: 420px) {
.img-my { 
  margin: 0 auto 0.5em auto;
  width: 100%;
  float: none;
}
.img-my-vertical { 
  margin: 0 auto 0.5em auto;
  width: 80%;
  float: none;
}

/* Popup box 
.note-details {
  display: inline;
}

.note-details summary {
  cursor: pointer;
  display: inline;
  list-style: none;
}

.note-details summary::-webkit-details-marker {
  display: none;
}

.note-details[open] .note-box {
  background: #fff !important;
  padding: 15px 28px !important;
  margin-top: 10px;
  border-radius: 2px;
  box-shadow: 0px 0px 15px #555;
  display: inline-block;
}

#note-text .note-box {
  background: #fff !important;
}

  #note-text .note-box {
    background-color: #fff !important;
}

#note-text > div {
    background-color: #fff !important;
}

  .note-box {
    background-color: #fff;
    padding: 18px 28px;
    position: relative;
} */

/* Pop-up text */
.note-box {
  background: #efefe7;
  color: #2d2b2b;
  padding: 15px 28px;
  border-radius: 2px;
  box-shadow: 0 0 15px #555;
  position: relative;
  display: inline-block;
  line-height: 1.5;
}

.note-close {
  position: absolute;
  top: 2px;
  right: 8px;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}

.note-overlay {
  display: none;                 /* DŮLEŽITÉ – box je zavřený při načtení */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;

  /* centrování obsahu */
  align-items: center;
  justify-content: center;
}