h1 { letter-spacing: 1px; font-weight: 500; }
button.button { background: linear-gradient(to top right, var(--red), var(--purple)); border: 0; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; margin: auto; color: #eee; border-radius: 60px; padding: 0px 60px; height: 60px; min-width: 210px; transition: 0.25s; }
button.button:hover { filter: brightness(105%); color: white; }
button.button:active { filter: brightness(95%); transform: scale(0.96); }

/*.color-line { height: 40px; background: linear-gradient(to right, var(--red), var(--purple)); box-shadow: 0 15px 5px rgba(0,0,0,0.08); transform: rotate(1deg); }
.color-line.reverse { transform: rotate(-1deg); }
.color-line.up { margin: 0px 0 30px 0; }*/

.color-line { border-bottom: 4px solid #f3e8ef; }
.categories-section { background: #f8eaff; background: linear-gradient(to top,#ff89c9,#f4c8f8); background: linear-gradient(to top,#f4c8f8,#fff); }

section#slider { overflow: hidden; background: white; margin-top: 70px; height: 660px; }
section#slider .slider-inner { display: none; }
section#slider .slide { width: 100%; display: flex; align-items: center; justify-content: center; transition: 0.1s; }
section#slider .slide .contents { position: absolute; }
section#slider .slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: 0.1s; }
section#slider .slide[data-id="1"] { }
section#slider .slide[data-id="2"] { background: linear-gradient(to bottom left, var(--red), var(--purple)); }
section#slider .slide[data-id="3"] { background: linear-gradient(to right, var(--red), var(--purple)); }
section#slider .slide h2 { color: white; font-size: 124px; }
section#slider .owl-dots { position: absolute; z-index: 2; width: 100%; bottom: 20px; display: flex; align-items: center; justify-content: center; }
section#slider .owl-dots button { width: 12px; height: 12px; background: transparent; border: 2px solid #fff !important; border-radius: 100%; margin: 0 4px; transition: 0.2s; }
section#slider .owl-dots button.active { background: #fff; transform: scale(1.25); }

section.block { padding: 50px 0; position: relative; z-index: 4; }
section.block .container { text-align: center; }
section.block p { padding: 0 10%; font-size: 18px; line-height: 150%; }

.categories { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 40px 0; }
.categories > div { min-width: 260px; width: calc(23% - 20px); aspect-ratio: 4 / 2; background: linear-gradient(to top right, var(--red), var(--purple)); margin: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 28px; padding: 0 40px; transition: 0.25s; cursor: pointer; border-radius: 4px; }
.categories > div:hover { margin-top: -20px; box-shadow: 0px 10px 7px rgba(0,0,0,0.15); filter: brightness(120%); }

.product-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 20px 0px; }
.product { max-width: 330px; width: calc(25% - 20px); aspect-ratio: 3.3 / 4.4; xheight: 440px; margin: 10px; position: relative; transition: 0.25s; border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,0.1); }
.product-wrapper { position: relative; overflow: hidden; height: 100%; border-radius: 3px; }
.product img { width: 100%; height: 100%; object-fit: cover; object-position: center 0%; position: relative; transition: 0.25s; border-radius: 4px; }
.product .contents { position: absolute; z-index: 2; width: 100%; height: 140px; bottom: 0; background: rgba(0,0,0,0.3); margin-bottom: -100px; transition: 0.2s; padding: 10px 15px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column;  }
.product h3 { width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: center; font-size: 14px; font-weight: 600; height: 40px; transition: 0.25s; color: white; }
.product .price { font-size: 16px; font-weight: 700; position: absolute; top: 0; left: 0; z-index: 2; background: rgba(240,42,93,0.7); padding: 8px 15px; color: white; border-bottom-right-radius: 4px; }
.product:hover { box-shadow: 4px 4px 8px rgba(0,0,0,0.4); margin-top: 0px; }
.product:hover img { object-position: center 100%; }
.product:hover .contents { margin: 0; background: rgba(0,0,0,0.5); padding-top: 15px; }
.product:hover h3 { overflow: initial; white-space: initial; height: initial; }

.product-badge:before { position: absolute; top: 34px; right: -16px; width: 120px; height: 20px; content: ""; z-index: -1; overflow: hidden; transform: rotate(-135deg); display: block; background: linear-gradient(#9BC90D 0%, #79A70A 100%); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px,  110px 30px); }
.product-badge:after { position: absolute; top: 20px; right: -30px; width: 120px; line-height: 20px; content: "ÚJ termék"; z-index: 1; overflow: hidden; font-size: 11px; font-weight: 600; color: #FFF; text-transform: uppercase; text-align: center; transform: rotate(45deg); display: block; background: linear-gradient(#9BC90D 0%, #79A70A 100%); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px, 110px 30px); }

.article-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 60px 0; }
.article-container a.article { max-width: 330px; width: calc(25% - 20px); margin: 10px; text-align: left; box-shadow: 0 0 5px rgba(0,0,0,0.1); transition: 0.25s; position: relative; display: block; overflow: hidden; border-radius: 4px; }
.article-container a.article:hover { text-decoration: none; box-shadow: 4px 4px 8px rgba(0,0,0,0.25); margin-top: 5px; }
.article-container .article img { width: 100%; height: 160px; object-fit: cover; object-position: center center; }
.article-container .article .contents { background: white; padding: 20px; }
.article-container .article h3 { font-size: 18px; padding-bottom: 10px; }
.article-container .article .lead { font-size: 15px; }


@media (max-width: 1680px) {
section#slider { height: 580px; }
.categories > div { font-size: 26px; }
}

@media (max-width: 1440px) {
section#slider { height: 495px; }
section.block { padding: 30px 0; }
section.block p { padding: 0 7%; font-size: 16px; }
.categories { padding: 30px 0; }
.categories > div { font-size: 22px; }
.product h3 { font-size: 12px; }
.product .price { font-size: 15px; padding: 6px 12px; }
button.button { font-size: 12px; letter-spacing: 1px; padding: 0px 40px; height: 50px; min-width: 180px; }

}

@media (max-width: 1280px) {
section#slider { height: 400px; }
section#slider .slide img { height: 400px; }
}

@media (max-width: 1024px) {
.product-container, .article-container { padding: 10px; }
.product, .article-container a.article { width: calc(50% - 10px); margin: 5px; }
.product h3 { font-size: 10px; }
.product .contents { padding: 10px; margin-bottom: -106px; }
.article-container .article .contents { padding: 10px; }
.article-container .article h3 { font-size: 15px; }
.article-container .article .lead { font-size: 13px; }
.categories { padding: 0; }
.categories > div { min-width: initial; max-width: 300px; width: calc(50% - 20px); font-size: 15px; line-height: 150%; margin: 5px; padding: 0 20px; }
}