@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wdth,wght@0,50..125,100..900;1,50..125,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--font-size-xl: 40px;
	--font-size-l: 32px;
	--font-size-m: 24px;
	--font-size-s: 20px;
	--font-size-xs: 18px;
	}

/*** GENERAL ***/

.external-fonts-loaded, .blank-mode, body, html, .external-fonts-loaded body, body.blank-mode, .category-appendix, .empty-content-404 h1, .dropdown-menu > li > a, .header-top .btn.cart-count .cart-price, .news-item-widget h5, .header-top .oblibeneBtn em, .navigation-buttons > a[data-target="cart"] i, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navigation-in a, .price strong, .products-block.products .p .price span, .btn:not(.cart-count), a.btn:not(.cart-count), .fav-cat li a, .user-action-tabs li a, .cart-widget .popup-widget-inner::before, .cart-widget-product-name a, .quantity .increase::before, .quantity .decrease::before, .cart-widget-product > span, .search-whisperer ul::before, .search-whisperer .p-info span, .search-whisperer .price, .search-box::before, .search-whisperer-documents a, .box-bg-variant .categories a, .box-filters::before, .param-filter-top::before, .subcategories.with-image li a .text, .name, .category-header label, .pagination>a, .pagination>strong, .search-results-groups #search-group-categories .search-results-group-list ul li a, .availability-value, .price-final, .p-gifts-heading, .p-gift-name, .shp-tabs-holder ul.shp-tabs li a, .all-param span, #productsAlternative::before, .rate-average, .vote-form::before, #variants::before, .var-dostupnost, .variant-name, .vote-title, ol.cart-header li a, ol.cart-header li strong, .cart-table tr td.p-name a, .price-wrapper, a.cart-related-name, .empty-cart-boxes ul li a, .payment-info, .payment-shipping-price, .cart-item-name, .cart-item-price, .order-summary-item.helper, .recapitulation-single, .reca-number, .id--15 .cart-table .p-name, .id--15 .cart-table .p-price, #register-form > fieldset .form-group:not(.consents) label, a.login-btn.facebook, a.login-btn.google, a.login-btn.seznam, ul.manufacturers ul li, .search-whisperer-empty, .menu-helper > ul > li a, .filtrovat, .tab-mobil, .free-gift-name, .id--9 .free-product-gifts-wrapper::before, .vote-form > form::before, #footer .contact-box::before {
  font-family: Saira, sans-serif !important;
}

.content-wrapper #content a:not(.btn):not(.cart-count):not(.pagination-link) {
  text-decoration: none;
}

h1, h2, h3 {
  color: var(--color-secondary-hover);
  font-weight: 700;
}

address {
  font-style: normal;
}

.content-wrapper.welcome-wrapper {
  display: none;
}
.content-inner > article > header {
  display: none;
}
.container.breadcrumbs-wrapper {
  display: none;
}

.type-page .content-wrapper.container,
.type-post .content-wrapper.container {
  width: auto;
}

.type-page .content-inner {
  max-width: none;
  background-color: var(--color-tertiary);
  padding: 60px 0 46px;
}

.container {
  max-width: 100%;
}

/*** CONTACT PAGE ***/
.contact {
  display: flex;
  margin-bottom: 60px;
}
.contact ul {
  padding: 0;
  list-style: none;
  margin: 0;
}
.contact-details {
  width: 50%;
  padding-right: 150px;
}
.contact-details h1 {
  font-size: 60px;
}

.contact-details address > a {
  color: var(--color-secondary-hover);
  text-decoration: none;
  font-size: 25px;
  font-weight: bold;
  margin-right: 10px;
  vertical-align: middle;
}
.contact-icon {
  width: 25px;
  height: 25px;
  vertical-align: middle;
  margin-right: 15px;
  color: var(--color-primary);
}

.contact h3 {
  font-size: 16px;
  margin: 34px 0 14px;
}
.contact-details table tr td{
  padding-right: 30px;
}
.contact-details th {
  font-weight: normal;
  text-align:start;
  padding-right: 30px; 
}

.contact-details + div {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.form {
  background-color: white;
  border-radius: 10px;
  margin-top: 20px
}
.invoice-details {
  margin-left: 30px;
}
.invoice-details div {
  display: flex;
  gap: 80px;
}

.map {
  padding-bottom: 40%;
  position: relative;
}
.map iframe {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  border: 0;
  border-radius: 10px;
}

.collab {
  width: 800px;
  margin: auto;
  background-color: white;
  max-width: 100%;
  text-align: center;
  padding: 50px 90px 60px;
}
.collab h2 {
  font-size: 60px;
  margin: 0 0 20px;
}

/*** FORM ***/
.contact-form .form-group {
  margin-bottom: 10px;
}

.contact-form p {
  display: none;
}

.form {
  padding: 30px;
}
.form h2 {
  margin: 0 0 20px;
}

#formContact .form-group label {
  position: absolute;
  line-height: 46px;
  width: auto;
  padding: 0 15px;
  cursor: default;
  transition: .3s all;
  color: var(--color-primary-hover);
  font-weight: normal;
}

#formContact .form-group.focus label {
  font-size: 10px;
  line-height: 18px;
  padding-top: 2px
}

#formContact .form-group.consents input[type="checkbox"]+label::before, input[type="checkbox"]:checked+label::after {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 1px solid #475267;
  background-color: transparent;
  color: var(--color-primary-hover);
  line-height: 15px;
  font-size: 8px;
}
input[type="checkbox"]+label::before, input[type="checkbox"]:checked+label::after{
  top: 10px;
}

#formContact .form-group.consents label {
  position: static;
  padding: 0 0 0 20px;
  cursor: default;
  line-height: 1.5;
  margin-bottom: 5px;
  color: var(--color-tertiary-hover);
}

#formContact .form-group.consents label a {
  color: var(--color-primary-hover);
  font-weight: bold;
  text-decoration: underline !important;
}

#formContact .form-group label .required-asterisk:after {
  content: none;
}

#formContact .form-group .form-control {
  line-height: 2em;
  width: 100%;
  padding: 10px 15px 2px;
  height: auto;
  background: none;
  border: 1px solid var(--color-primary-hover);
  border-radius: 5px;
  font-size: 1em;
  color: var(--color-primary-hover);
  font-weight: bold;
}

#formContact .form-group textarea.form-control {
  height: 9em;
  resize: vertical;
}

#formContact .form-group .form-control:autofill {
  color: var(--color-primary-hover);
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-primary-hover);
  -webkit-box-shadow: 0 0 0px 40rem #ffff inset;
}
.form-group label.whole-width {
  font-size: 14px;
}
.form-group.submit-wrapper .btn.btn-primary {
  border-radius: 5px;
  text-transform: none;
  padding: 10px 30px 10px 30px;
}
.btn:not(.cart-count) {
  line-height: 0;
  font-size: 16px;
}

/* Sú doplnené štýly, ale táto šablóna je mierne iná, takže výpis článkov ma mierne iné CSS a rozbíja sa to oproti tomu, ktoré
fungovalo pre šablónu Classic. Skús tie veci pofixovať tak, aby zodpovedali návrhu. Návrh v sebe má aj odkazy na sociálne siete
v pravom stĺpci a nadpis Najnovší článok a ostatné články a pár vecí, ktoré nebude realizovať, iba grafik povymýšľal.

Takú istú stránku máš tu: https://www.kliq.sk/blog/ obsahovo môžeš vychádzať z nej. Čo nie je aj tam môžeš na grafickom návrhu
ignorovať. Mobilné štýly doplním neskôr, už som to dnes nestihol. Máš tu ale štýly pre blog listing, blog detail aj bežnú
obsahovú stránku. */

/* blog listing page */


.type-posts-listing .content-inner {
	position: relative;
}

.type-posts-listing .content-wrapper {
	background-color: var(--color-tertiary);
	width: auto;
	padding: 30px 0;
}

.type-posts-listing .news-wrapper {
	flex-direction: column;
}

.type-posts-listing .content-inner:before {
	content: '';
	position: absolute;
	right: 430px;
	top: 0;
	bottom: 0;
	width: 1px;
	background-color: #B7B7B7;
}

.type-posts-listing .content-inner:after {
	content: '';
	display: table;
	clear: both;
}

.type-posts-listing .content-inner > h1:first-child {
	float: left;
	margin-top: 0;
	margin-bottom: 16px;
	line-height: 48px;
}

.type-posts-listing .content-inner > h1:first-child,
.type-posts-listing .content-inner > p,
.type-posts-listing .content-inner > .news-wrapper,
.type-posts-listing .pagination-wrapper {
	clear: left;
	margin-right: 430px;
	padding-right: 25px;
}

.type-posts-listing .pagination-link {
	background-color: var(--color-secondary);
	color: var(--color-secondary-hover);
}

.type-posts-listing .pagination-link:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-secondary-hover);
}

.type-posts-listing .posts-listing-aside {
	float: right;
	width: 430px;
	padding-left: 25px;
	position: sticky;
	top: 20px;
	font-family: Montserrat;
}

.type-posts-listing .posts-listing-aside > h3 {
	margin-top: 0;
	color: var(--color-primary-hover);
	text-transform: none;
	font-weight: 400;
	font-family: Montserrat !important;
	font-size: var(--font-size-m);
}

.type-posts-listing .subcategories {
	/* display: block; */
	margin: 0 0 20px;
	gap: 25px;
	padding: 26px 0 20px;
}

.type-posts-listing .subcategories:before {
	content: 'Kategórie';
	display: block;
	font-size: var(--font-size-m);
	font-weight: 400;
	margin-bottom: 10px;
	height: 0;
	left: 0;
	line-height: 1;
	color: var(--color-primary-hover);
}

.type-posts-listing .subcategories:after {
	height: 0;
}

.type-posts-listing .subcategories li {
	padding: 0;
	display: block;
	width: auto;
	float: none;
	background-color: #d6d6d6;
	border-radius: 5px;
	margin-top: 15px;
}

	.type-posts-listing .subcategories li:hover {
	background-color: var(--color-primary-hover);
}

	.type-posts-listing .subcategories li a {
	background: none;
	border: 0;
	color: #092543;
	height: auto;
	padding: 4px 10px;
}

.type-posts-listing .subcategories.with-image li a .text {
	font-family: Montserrat !important;
	font-weight: 400;
}

.type-posts-listing .subcategories a[href*='favorite'] {
	display: none;
}

.type-posts-listing .subcategories li a .image {
	display: none;
}

.type-posts-listing .subcategories li a .text {
	padding-left: 0;
	width: auto;
	
}

.type-posts-listing .subcategories li a:hover {
	color: #fff;
	text-decoration: none;
}

.type-posts-listing .subcategories li a:hover {
	text-decoration: none !important;
}

.type-posts-listing .news-item {
	margin-bottom: 15px;
	display: flex;
	width: 100%;
	padding: 0;
}

.type-posts-listing .news-item .image {
	width: 140px;
	height: 140px;
	margin-right: 20px;
	margin-bottom: 0;
	position: relative;
	flex-shrink: 0;
	text-align: left;
}

.type-posts-listing .news-item .image img {
	position: absolute;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.type-posts-listing .news-item .text {
	display: flex;
	padding-right: 40px;
	flex-direction: column;
	width: 100%;
}

.type-posts-listing .news-item .text .title {
	font-size: var(--font-size-m);
	line-height: 1.5;
	font-weight: 600;
	text-decoration: none;
	color: var(--color-primary-hover);
	margin-bottom: 10px;
}

.type-posts-listing .news-item:first-child .text .title {
	font-size: var(--font-size-l)
}

.type-posts-listing .news-item .text .description {
	color: var(--color-tertiary-hover);
	font-size: 15px;
	line-height: 22px;
}

.type-posts-listing .news-item .text time {
	order: 2;
	margin: 12px 0 0;
	color: var(--color-primary-hover);
}

.type-posts-listing .content-inner > .news-wrapper .news-item:first-child {
	flex-direction: column;
	margin-bottom: 20px;
}

.type-posts-listing .content-inner > .news-wrapper .news-item:first-child + .news-item {
	padding-top: 30px;
	border-top: 1px solid #B7B7B7;
	align-items: center;
}

.type-posts-listing .content-inner > .news-wrapper .news-item:first-child .image {
	width: 100%;
	height: 0;
	padding-bottom: 55%;
	margin-bottom: 10px;
	margin-right: 0;
}

.type-posts-listing .pagination-wrapper {
	margin: 0
}

.favorite-articles .news-item {
	align-items: center;
	margin-bottom: 0;
}

.favorite-articles .news-item + .news-item {
	margin-top: 10px;
}

.favorite-articles .news-item .image {
	width: 110px;
	height: 110px
}

.favorite-articles .news-item .text .title {
	font-size: 16px;
	margin-bottom: 0;
}

.favorite-articles .news-item .text .description {
	display: none;
}

.cely-clanek {
	display: none;
}

.container:before {
	display: block;
}

body:not(.type-index):not(.type-product):not(.ordering-process) h1 {
	margin-bottom: 16px;
}



/* blog listing page end */

/* blog post and content pages */

.type-post .content-wrapper,
.in-obchodne-podmienky .content-wrapper,
.in-podmienky-ochrany-osobnych-udajov .content-wrapper {
	padding-left: 0;
	padding-right: 0;
	background-color: var(--color-tertiary);
    width: auto;
    padding: 50px 0;
}

.type-post .content-wrapper-in,
.in-obchodne-podmienky .content-wrapper-in,
.in-podmienky-ochrany-osobnych-udajov .content-wrapper-in,
.in-doprava-a-platba .content-wrapper-in {
	width: 940px;
	max-width: 100%;
	margin: auto;
	padding: 0 20px;
}

.type-post .content-wrapper-in > .content,
.in-obchodne-podmienky .content-wrapper-in > .content,
.in-podmienky-ochrany-osobnych-udajov .content-wrapper-in > .content,
.in-doprava-a-platba .content-wrapper-in > .content {
	background-color: #fff;
	color: black;
	padding: 60px 40px;
	margin-bottom: 40px;
	position: relative;
	font-size: 16px;
	line-height: 2;
}

.type-post .content-wrapper-in > .content {
	padding: 40px 85px;
}

.type-post .content p {
	line-height: 1.8;
}

.type-post .content time {
	color: var(--color-primary-hover);
}

.type-post .btn, a.btn {
	display: inline;
    padding: 10px 30px;
	border-radius: 5px;
}

/* blog post and content pages end */

.in-podmienky-ochrany-osobnych-udajov.type-page .content-inner,
.in-obchodne-podmienky.type-page .content-inner {
	background-color: #fff;	
	padding: 0;
}

.in-podmienky-ochrany-osobnych-udajov .content-inner > article > header,
.in-obchodne-podmienky .content-inner > article > header
{
	display: block;
}