/* Table of Contents
----------------------------------
 

/*------------------------------ (00)-Global CSS ------------------------------*/
/*
0- Global CSS
1- Heading CSS  
2- Button CSS
3- Logo Area CSS
4- Page Title CSS
5- Header Area CSS 
6- Footer Area CSS
7- Scroll-Top Area CSS
8- Form CSS
9- Swiper Pagination
10- Sidebar Heading CSS
11- Sidebar CSS
*/



/*------------------------------ (01)-Home ------------------------------*/

/*--------------- SECTIONS ---------------*/
/*
1- Home Slider
2- Counter
3- Products Filter
4- Blog
*/



/*------------------------------ (02)-About ------------------------------*/

/*--------------- PAGES ---------------*/
/*
1- About Us
2- Team
3- Testimonials
4- Faqs
*/



/*------------------------------ (03)-Pages ------------------------------*/

/*--------------- COMPONENTS ---------------*/
/* 
01- Account-Form  
02- Address Details 
*/

/*--------------- PAGES ---------------*/
/*
1- Menu
2- Gallery
3- Reservation
4- Login
5- Register
6- Profile
7- Edit Address
*/



/*------------------------------ (04)-Blog ------------------------------*/

/*--------------- COMPONENTS ---------------*/
/* 
01- Blog-Item 
02- Pages-No
03- Comments
*/

/*--------------- PAGES ---------------*/
/*
1- Blog Grid
2- Blog List
3- Blog Single
*/



/*------------------------------ (05)-Shop ------------------------------*/

/*--------------- COMPONENTS ---------------*/
/* 
01- Filter 
02- Shop Header
03- Product-Item
05- Shop-Title
05- Cart-Summary
06- Quantity Box
*/

/*--------------- PAGES ---------------*/
/*
1- Shop Grid 
2- Shop Standard
3- Product Single
4- Wishlist
5- Cart
6- Checkout
7- Order List
8- Order Single
*/



/*------------------------------ (06)-Contact ------------------------------*/







/*------------------------------ (00)- Global CSS (Start) ------------------------------*/
/*
0- Global CSS
1- Heading CSS
2- Button CSS
3- Page Title CSS
4- Header Area CSS
5- Footer Area CSS
6- Scroll-Top Area CSS
7- Form CSS
8- Swiper Pagination CSS
*/


/*----- 0- Global CSS -----*/

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

/* Root Variables */
:root{
    --main-color: #b2a795; /*Khaki MT*/
    --secondary-color: #eb5e28; /*Flame bylo #A25B5B; MT*/
    --black: #252422; /*MT Eire Black*/
    --white: #fff; 
    --grey: #666;
	--floral: #fffcf2; /*MT*/
	--ebony: #6b654c; /*MT*/
    --red: #b22222; /*elegantni cervena*/	
    --border: 0.1rem solid rgba(0, 0, 0, 0.1);
    --border-radius: 1rem;
    --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1)
}

/* Global Styles */
*{
    font-family: 'Figtree', sans-serif;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
/*    text-transform: capitalize;*/
    border: none;
    outline: none;
}

*:not(.gallery-item){
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

/* Selection Styles */
*::-moz-selection{
    color: var(--white);
    background-color: var(--main-color);
}

*::selection{
    color: var(--white);
    background-color: var(--main-color);
}

/* Body Styles */
body{
    background-color: var(--white);
    overflow-x: hidden;
}

/* HTML Styles */
html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Section Styles */
section{
    padding: 3rem 5%;
}

/* Scrollbar Styles */
::-webkit-scrollbar{
    width: 0.8rem;
}

::-webkit-scrollbar-thumb{
    border-radius: 0.5rem;
    background: var(--main-color);
}

::-webkit-scrollbar-track{
    background: var(--black);
}

img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

p{
    color: var(--grey); 
    font-size: 1.6rem;
    line-height: 1.6;
}

/*----- 1- Heading CSS -----*/

/* Heading Container */
.heading{
    margin-bottom: 2rem;
    text-align: center;
}
    
/* Main Heading Title */ 
.heading h2 {
    text-transform: uppercase;
    text-align: center;
    position: relative;
    font-family: "Raleway", sans-serif;
    font-weight: 500; 
    font-size: 3.5rem;
    color: var(--secondary-color);
    padding-bottom: 1.5rem;
    word-spacing: 0.1rem; 
    letter-spacing: 0.2rem; 
}
    
/* Heading Line Style */
.heading h2:after, 
.heading h2:before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4.5rem;
    height: 0.4rem;
    content: "";
    right: 4.5rem; 
    margin: auto;
    background-color: #ccc;
}
  
.heading h2:before { 
    background-color: var(--secondary-color);
    left: 4.5rem; 
    width: 9rem;
}

/*----- 2- Button CSS -----*/
/* Upravený styl tlačítka */
.btn {
    display: inline-block;
    color: black; /* Černý text */
    background-color: var(--floral); /* Světlé pozadí */
    font-size: 1.8rem; /* Lehce menší písmo pro delší tlačítko */
    font-weight: 400; 
    padding: 1rem 4rem; /* Širší a nižší tlačítko */
    border: 2px solid var(--main-color); /* Orámování hlavní barvou */
    
    border-radius: 10px / 10px; /* Kulaté rohy – první hodnota X (šířka), druhá Y (výška) */

    position: relative;
    overflow: hidden;
    transition: all 0.3s linear;
    box-shadow: var(--box-shadow);
    text-align: center; /* Zarovnání textu */
    text-decoration: none; /* Odstranění podtržení */
    margin: 2rem 1rem; /* Mezera pod tlačítkem */
}

/* Hover efekt pro tlačítko */
.btn:hover {
    background-color: var(--black); /* Černé pozadí při hoveru */
    color: var(--white); /* Bílý text při hoveru */
    cursor: pointer;
    border-color: var(--black); /* Ujistí se, že i rámeček zůstane konzistentní */
}





/*----- 3- Logo Area CSS -----*/
/* Logo Styles */
.logo{
    display: -webkit-box;  
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; 
    gap: 1rem;
}

/* Logo Image */
.logo img{
    height: 7rem;
    width: auto;
}

/* Logo Text */
.logo h3{ 
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.2rem;
}

/*----- 4- Page Title CSS -----*/

/* Page Title */
.page-title .title {
    margin-top: 10rem;
	min-height: 400px; /* Nastavíme pevnou výšku headeru */
    width: 100%; /* Zajistíme plnou šířku */
    background-repeat: no-repeat;
    background-size: cover; /* Výška obrázku se přizpůsobí, šířka podle poměru */
    background-position: center center; /* Centrovaní obrázku */
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Page Title Heading */
.page-title .title h2{
    color: var(--white);
    font-size: 8rem;
    font-weight: 600;
    padding-top: 0rem;
	
	text-align: center; /* Zajistí, že více řádků bude vycentrováno */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vycentrování obsahu */
    align-items: center;
    width: 100%; /* Zajistí správné zarovnání u delších textů */
}

/* Page Title Line Section */
.page-title .link{
    padding: 1rem 0 1rem 10rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 2rem;
    font-weight: 400;
    gap: 1.5rem;
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

/* Page Title Home Link */
.page-title .link a{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--secondary-color);
}

/* Page Title Home Link, On Hover */
.page-title .link a:hover{
    text-decoration: underline;
}

/* Page Title Arrow  */
.page-title .link i{
    font-size: 1.2rem;
    color: var(--black);
}

/* Page Title Arrow Separator */
.page-title .link span{
    font-size: 1.5rem;
	font-weight: 400;
    color: var(--black);
}

/*----- 5- Header Area CSS -----*/
/* Header Styles */
.header{ 
    position: fixed;
    top: 0;
    left: 0;
    height: 10rem; 
    width: 100%;
    padding: 0rem 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-pack: justify; 
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 999;
    background: var(--black);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    border-bottom: 0.1rem solid var(--main-color);
}

/* Navbar Styles */
.header .navbar{
    list-style-type: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    gap: 2rem;
}

/* Header Dropdown Menu Styles */
.header .dropdown-menu{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header .dropdown-menu:hover button{
    color: var(--main-color);
}

.header .dropdown-menu:hover .dropdown-content{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: scale(1);
            transform: scale(1);
}

/* Navbar Button */
.header .navbar .nav-btn{
    display: inline-block;
    font-size: 1.8rem;
    color: var(--white);
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: none;
    gap: 0.5em;
}

/* Navbar Button, On Hover */
.header .navbar .nav-btn:hover{
    color: var(--main-color);
}

/* Dropdown Content Styles */
.header .dropdown-content{
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    padding: 0.5rem;
    width: 20rem; 
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    display: none;
    -webkit-transform: scale(0); 
            transform: scale(0);
    -webkit-transition:  all 0.5s;
    -moz-transition:  all 0.5s;
    -o-transition:  all 0.5s;
    transition:  all 0.5s;
    z-index: 1000;
}

/* Header Dropdown Content Link */
.header .dropdown-content a{
    display: block;
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--black);
    padding: 1rem;
    cursor: pointer;
}

/* Header Dropdown Content Link, On Hover */
.header .dropdown-content a:hover{
    color: var(--main-color);
}

/* Header Icons */
.header .icon-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.7rem;
}

/* Header Icon */
.header .icon-container .icon{
    font-size: 2rem;
    color: var(--white);
    padding: 0.5rem;
    cursor: pointer;
}

/* Header Icon, On Hover */
.header .icon-container .icon:hover{
    color: var(--main-color);
}

/* Hide the menu bar button */
.header #menu-btn{
    display: none;
}

/* Hide Mobile menu */
.mobile-menu{
    display: none;
}

/*----- 6- Footer Area CSS -----*/
.footer{
    background-color: var(--black);
    padding: 0rem 5%;
}

/* Footer Container */
.footer .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 3rem;
    padding: 2rem 0;
} 

/* Footer Autor Citatu */
.footer .author {
    font-style: italic;       /* Kurzíva */
    color: #eb5e28;          /* Barva textu */
}

/* Footer Items Paragraphs */
.footer-item p{
    color: var(--white); 
}

/* Footer Items direct child paragraphs */
.footer-item > p{
    padding-top: 2rem;
    font-size: 1.5rem;
} 

/* Footer Item Heading */
.footer-item h2{ 
    color: var(--white);
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: 0.2rem;
    padding-bottom: 2rem;
}

/* Timing Heading */
.footer-item .timing h3{
    color: var(--main-color);
    font-size: 2rem;
    font-weight: 450;
}

/* Timing Details */
.footer-item .timing p{
    margin: 0.5rem 0;
}

/* Footer Item Info Paragraph */
.footer-item .info p{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

/* Footer Item Info Icon */
.footer-item .info i{
    color: var(--main-color);
}

/* Footer Item Info Paragraph & Link */
.footer-item .info a,
.footer-item .info p{ 
    font-size: 1.6rem;
    color: var(--white);
}

/* Footer Item Info Link, On Paragraph Hover */
.footer-item .links p:hover a{
    padding-left: 1.5rem;
}

/* Footer Item Social Contact container */
.footer-item .social{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

/* Footer Item Social link */
.footer-item .social a{
    display: inline-block;
    height: 4rem;
    width: 4rem;
    background-color: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Footer Item Social Icon */
.footer-item .social a i{
    color: var(--main-color);
    font-size: 2rem;
}

/* Footer Item Social link, On Hover */
.footer-item .social a:hover{
    background-color: var(--main-color);
}

/* Footer Item Social Icon, On Social Link Hover */
.footer-item .social a:hover i{
    color: var(--white);
}

/* Footer Item Connect text with "gmail" class */
.footer-item .gmail{
    text-transform: none;
}

/* Designer credit and rights */
.footer .content{
    text-align: center;
    padding: 2rem 0;
    border-top: 0.2rem solid var(--white);
}

.footer .content p{
    font-size: 2rem;
    color: var(--white);
}

.footer .content p span{
    color: var(--main-color);
}

/*----- 7- Scroll-Top Area CSS -----*/
/* Scroll Top Button */
.scroll-top{
    position: fixed;
    bottom: 1rem;
    right:1rem;
    height: 5rem;
    width: 5rem;
    font-size: 2rem;
    font-weight: 600; 
    color: var(--main-color);
    background: var(--white);
    border: 0.2rem solid var(--main-color);
    border-radius: 50%; 
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s; 
    transition: all 0.2s;
    z-index: 900;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

/* Scroll Top Button, On Hover */
.scroll-top:hover{
    color: var(--white);
    background: var(--main-color);
    cursor: pointer;
}

/*----- 8- Form CSS -----*/
.form{
    background: var(--white);
}

/* Autofilled input fields */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    color: var(--black) !important;
    -webkit-transition: background-color 5000s ease-in-out 0s;
            transition: background-color 5000s ease-in-out 0s;
}

/* Form Heading */
.form h3{ 
    font-size: 2.5rem;
    font-weight: 500;
    padding-bottom: 1rem;
    color: var(--black);
    text-transform: uppercase;
    text-align: center;
}
  
/* Form input box container */
.form .input-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
  
/* Form Input Field inside input box */
.form .input-box .box{
    width: 49%;
}
  
/* Form Input Field */
.form .box{
    width: 100%;
    padding: 1.2rem 0.8rem;
    border-bottom: 0.15rem solid rgba(0, 0, 0, 0.2);
    font-size: 1.6rem;
    color: var(--black);
    text-transform: none;
    margin: 0.7rem 0;
}

/* Form Input box placeholder */
.form .box::-webkit-input-placeholder{
    /*text-transform: capitalize;*/
    color: var(--grey);
}

.form .box::-moz-placeholder{
    /*text-transform: capitalize;*/
    color: var(--grey);
}

.form .box:-ms-input-placeholder{
    /*text-transform: capitalize;*/
    color: var(--grey);
}

.form .box::placeholder{
    /*text-transform: capitalize;*/
    color: var(--grey);
}

/* Focused Input Field */
.form .box:focus{
    border-color: var(--main-color);
}

/* Form Textarea */
.form textarea{
    resize: none;
    height: 15rem;
}

/* Form Button */
.form .btn{
    width: 100%;
    border-radius: 5rem;
    overflow: hidden;
    margin: 1rem 0;
}

/*----- 9- Swiper Pagination CSS -----*/

/* Swiper pagination bullet */
.swiper-pagination-bullet{ 
    border-radius: 50rem;
    background: var(--white);
    opacity: 0.7;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

/* Active swiper pagination bullet */
.swiper-pagination-bullet-active{
    background: var(--main-color) !important;
    opacity: 0.9 !important;
}

/*----- 10- Sidebar Heading CSS -----*/

/* Sidebar Heading Container */
.sidebar-heading{
    margin-bottom: 2rem;
}

/* Sidebar Heading Title */
.sidebar-heading h2{
    font-size: 3rem;
    font-weight: 500;
    color: var(--black);
}   


/*----- 11- Sidebar CSS -----*/

/* sidebar container */
.sidebar{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 25rem;
        flex: 1 1 25rem;  
}

/* Sidebar item */
.sidebar .sidebar-item{
    margin-bottom: 1.5rem;
    padding: 0rem 1rem;
    padding-bottom: 3rem;
}

/*-- 1- Search --*/

/* Search input box */
.sidebar .search .input-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 2rem;
    overflow: hidden;
}

/* Search input */
.sidebar .search .input-box input{
    width: 100%;
    padding: 1.5rem;
    overflow: hidden;
    border: 0.1rem solid var(--secondary-color);
}

/* Focused search input */
.sidebar .search .input-box input:focus{
    border-color: var(--main-color);
}

/* Search button */
.sidebar .search .input-box label{
    color: var(--white);
    background-color: var(--secondary-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.5rem 2rem;
    font-size: 1.8rem;
    cursor: pointer;
}

/* Search button, Hover Effect */
.sidebar .search .input-box label:hover{
    background-color: var(--main-color);
}

/*-- 2- Category --*/

/* Category item */
.sidebar .category a{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem 0;
}

/* Category item text */
.sidebar .category a span{
    font-size: 2rem;
    color: var(--secondary-color);
    font-weight: 400;
    cursor: pointer;
}

/* Category item text, Hover Effect */
.sidebar .category a:hover span{
    color: var(--main-color);
}

/* Category item Quantity, Hover Effect */
.sidebar .category a:hover p{
    color: var(--main-color);
}

/*-- 3- Recent Post --*/

/* Post Item */
.sidebar .post-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Last Post Item */
.sidebar .post-item:last-child{
    margin-bottom: 0;
}

/* Post item Image */
.sidebar .post-item img{
    height: 8rem;
    width: 10rem;
    background-color: var(--grey);
}

/* Post item Link */
.sidebar .post-item a{
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--black);
}

.sidebar .recent-post .post-item a{
    font-size: 1.8rem;
    line-height: 1.4;
}

/* Post item Link, On Hover */
.sidebar .post-item a:hover{
    color: var(--main-color);
}

/* Post item Price */
.sidebar .post-item .price{
    padding-top: 0.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--main-color);
}

/* Post item Discounted Price */
.sidebar .post-item .price span{
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--grey);
    text-decoration: line-through;
    padding-left: 0.2rem;
}

/* Post item Rating */
.sidebar .post-item .rating{
    font-size: 1.4rem;
    color: var(--main-color);
    padding: 0.5rem 0;
}


/*-- 4- Tags --*/
/* Tag items Container */
.sidebar .tags .box-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1rem;
}

/* Individual Tag*/
.sidebar .tag-item{
    background-color: var(--secondary-color);
    color: var(--white);
    font-size: 1.6rem;
    padding: 1rem 1.5rem;
    border-radius: 5rem;
}

/* Individual Tag, On Hover */
.sidebar .tag-item:hover{
    background-color: var(--main-color);
    cursor: pointer;
}

  
/*------------------------------ (00)- Global CSS (End) ------------------------------*/



/*------------------------------ (01)-Home (Start) ------------------------------*/

/*--------------- SECTIONS ---------------*/

/*----- 1- Home-Slider -----*/

/* Home section Container */
.home{ 
    padding: 0;
    position: relative;
} 
  
/* Home slider */
.home-slider{ 
    position: relative; 
}
    
/* Home slider pagination bullet */
.home-slider .swiper-pagination-bullet{
    height: 1rem;
    width: 4rem;
    background: var(--white);
	z-index: 9999; /* Extrémně vysoká hodnota, aby byl nad vším */
}

.home-item{
    margin-top: 10rem;
    height: 400px;
}
  
/* Home Item Content */
.home-item .content{ 
    padding: 2rem 5%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
    background:         linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
  
}
  
/* Home Item Text Container */
.home-item .content .text{
    width: 150rem;
}
  
/* Home Item Heading */
.home-item .content h3{
    font-size: 5rem;
    font-weight: 600;
    color: var(--white);
}
  
/* Home Item Paragraph */
.home-item .content p{
    font-size: 2.5rem;
	letter-spacing: 2px;
    font-weight: 500;
    color: var(--white);
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.home-item .content h3,
.home-item .content p {
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8); /* Jemný stín */
}


/*----- 2- Counter -----*/

/* Statistic Section */
.counting{
    width: 100%;
    padding: 2rem 5%;
    margin: 6rem 0 0 0;
    min-height: 15rem;  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center; 
    justify-content: center; 
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 3rem;
    
	/*background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../../assets/images/background/review_icons.jpg");*/
    /*background:         linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../../assets/images/background/review_icons.jpg");*/
    /*background-position: center;*/
    /*background-size: cover;*/
    /*background-attachment: fixed;*/
	/*background-size: contain; /* Přizpůsobí obrázek tak, aby byl celý viditelný */	
	/*background-position: center;*/
	/*background-size: 100% 100%; /* Roztáhne obrázek přes celou oblast */
	/*background-repeat: no-repeat; /* Zabrání opakování */
}

/* Statistic Box */
.counting .box{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 25rem;
        flex: 1 1 25rem;
    text-align: center;
    padding: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

/* Statistic Box Icon */
.counting .box i{
    color: var(--floral);
    font-size: 6rem;
    width: 6rem;
    padding-bottom: 1rem;
    text-align: center;
}

/* Statistic Box Count */
.counting .box .count{
    font-size: 5rem;
    font-weight: 500;
    color: var(--floral);
    padding-bottom: 0.5rem;
}

/* Statistic Box Title */
.counting .box h3{
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--floral);
}

/* Kontejner pro číslo a suffix */
.count-container {
    display: flex;
    align-items: baseline; /* Zarovná číslo a suffix správně na řádku */
}

/* Styl pro suffix */
.count-suffix {
    display: none; /* Skryje extra suffix */
}


/*----- 3- Products Filter -----*/

/* Filter controls */
.products-filter .controls{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center; 
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; 
    list-style-type: none;
    gap: 1.5rem;
}

/* Buttons within the filter controls */
.products-filter .controls button{
	padding: 1.5rem 3rem;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-weight: 500; 
	font-size: 1.6rem; 
    color: var(--grey);
    background: none;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
 
/* Hover and active buttons within the filter controls */
.products-filter .controls button:hover,
.products-filter .controls button.active{
    cursor: pointer;
    color: var(--white);
	background-color: var(--main-color);
	-webkit-box-shadow: var(--box-shadow);
			box-shadow: var(--box-shadow);
}

/* Products filter gallery */
.products-filter-gallery{
    display: none;
    padding-top: 2rem; 
}

/* Active products filter gallery */
.products-filter-gallery.active{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1rem;
	align-items: stretch; /* Všechny produkty se natáhnou na výšku nejdelšího */
}

  
/*----- 4- Blog -----*/
.blog.main .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(33rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
    gap: 1rem;
}


/*------------------------------ (01)-Home (End) ------------------------------*/



/*------------------------------ (02)-About (Start) ------------------------------*/
.about-us{
    padding: 2rem 0;
}

/*--------------- PAGES ---------------*/

/*----- 1- About Us -----*/

/* Aligning About content in the center */
.about .box-container{
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    overflow: hidden;  
    gap: 1rem; 
}

/* About image container */
.about .image{ 
    height: 45rem;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 42rem; 
        flex: 1 1 42rem; 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center; 
    justify-content: center; 
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* About Content Section */
.about .content{
    background-color: #fff;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 42rem;
            flex: 1 1 42rem;
    padding: 2rem;
}

/* About Heading */
.about .content h3{
    font-size: 2.5rem;
    color: var(--black);
    padding-bottom: 1.5rem;
}

/* About Paragraph */
.about .content p{
    color: var(--black);
    padding-bottom: 1.5rem;
}

/* About Button */
.about .btn{
    margin-top: 1rem;
}

/*------------------------------ (02)-About (End) ------------------------------*/

/*------------------------------ (02)-About_adapt (Start) ------------------------------*/
.abouta-page{
    padding: 2rem 0;
}

/* Aligning About content in the center */
.abouta .box-container{
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    overflow: hidden;  
    gap: 1rem; 
}

/* About image container */
.abouta .image{ 
    height: 60rem;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 42rem; 
        flex: 1 1 42rem; 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center; 
    justify-content: center; 
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* About Content Section */
.abouta .content{
    background-color: #ggg;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 42rem;
            flex: 1 1 42rem;
    padding: 2rem;
}

/* About Heading */
.abouta .content h3{
    font-size: 3.5rem;
    color: var(--black);
    padding-bottom: 1.5rem;
}

/* About Paragraph */
.abouta .content p{
    color: var(--black);
    padding-bottom: 1.5rem;
	font-size:  1.8em; /* Nastaví velikost písma stejného jako u odstavců */	
}

/* About Button */
.abouta .btn{
    margin-top: 1rem;
}

/* Styl pro seznamy uvnitř .content MT */
.abouta .content ul {
    font-size:  1.5em; /* Nastaví velikost písma stejného jako u odstavců */
    padding-left: 20px; /* Přidá odsazení vlevo pro seznam */
    list-style-type: disc; /* Standardní odrážky */
    margin-top: 0.5em; /* Přidá menší mezeru nad seznamem */
	margin-bottom: 1rem; /* Přidá menší mezeru nad seznamem */
}

/* Styl pro jednotlivé položky seznamu */
.content ul li {
    margin-bottom: 0.5rem; /* Přidá mezeru pod každou položku seznamu */
}

/*------------------------------ (02)-About (End) ------------------------------*/

/* -------------------------- custom gallery ------------------ verze pro wine cellar ---*/

/* Overlay Container */
/* Main Container */

.custom-gallery-wrapper {
    max-width: 100%; /* Nebo hodnota šířky ostatních sekcí */
    padding: 0 5%;   /* Zachování mezer (pokud jsou potřeba) */
}

.custom-gallery-container {
	width: 100%; /* Šířka boxu na 100% rodiče */
    display: flex;
    justify-content: flex-start;
    padding: 20px;
    background-color: var(--floral);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Jemný stín */
}

/* Gallery Content */
.custom-gallery-content {
    display: flex;
    gap: 40px;
    /*max-width: 1200px;*/
    align-items: flex-start;
}

/* Images Section */
.custom-gallery-images {
    display: flex;
    gap: 10px;
}

/* Main Image */
.custom-gallery-main-image img {
    width: 400px;
    max-height: auto; /*250px;*/
    cursor: pointer;
}

/* Thumbnails */
.custom-gallery-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.custom-gallery-thumbnail img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s, transform 0.3s;
}

.custom-gallery-thumbnail img:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Overlay */
.custom-gallery-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.custom-gallery-overlay img {
    max-width: 60%; /* Obrázek zabírá 60 % šířky obrazovky */
    max-height: 80%; /* Zachování poměru stran bylo auto*/
    margin: 0 auto; /* Zarovná obrázek na střed */
    display: block; /* Aby byl blokově zarovnán */
	z-index: 1001; /* Vysoká priorita pro obrázek */
	object-fit: contain; /* Zachování poměru stran */
}

/* Custom Gallery Text Section */
.custom-gallery-text {
    margin-left: 30px; /* Odsazení od obrázků */
	margin-right: 30px; /* Odsazení od obrázků */
    color: #333; /* Barva textu */
	font-size: 1.8rem; /* Velikost nadpisu */
    font-weight: 400; /* Tučné písmo */
}

/* Zvýraznění (strong) */
.custom-gallery-text strong {
    color: #000; /* Černá barva pro zdůraznění */
    font-weight: 450; /* Tučné písmo */
	
}/* Custom Gallery Text Section */

/* Nadpis (h3) */
.custom-gallery-text h3 {
    font-size: 3rem; /* Velikost nadpisu */
    font-weight: 450; /* Tučné písmo */
    margin-bottom: 15px; /* Mezera pod nadpisem */
    color: #000; /* Barva nadpisu */
}

/* Odstavec (p) */
.custom-gallery-text p {
    font-size: 2rem; /* Velikost písma */
    line-height: 1.6; /* Výška řádku pro lepší čitelnost */
    margin-bottom: 15px; /* Mezery mezi odstavci */
    color: #666; /* Tmavší šedá barva textu */
}

.custom-gallery-text ul {
    list-style-type: disc; /* Bodové seznamy */
    margin-left: 20px; /* Odsazení seznamu */
	margin-bottom: 10px; /* Odsazení seznamu */
    padding-left: 0; /* Vnitřní odsazení seznamu */
}

.custom-gallery-text ul ul {
    list-style-type: circle; /* Podseznam s kruhy */
    margin-left: 20px; /* Větší odsazení pro podseznam */
}

.custom-gallery-text li {
    margin-bottom: 5px; /* Odstup mezi jednotlivými položkami seznamu */
}


/* Navigation Buttons Container */
.custom-gallery-navigation {
    position: fixed;
    bottom: 50px; /* 100 px odspodu */
    left: 50%; /* Zarovnání na střed */
    transform: translateX(-50%); /* Vycentrování horizontálně */
    display: flex;
    gap: 20px; /* Mezera mezi tlačítky */
}

/* Všechny tlačítka */
.custom-gallery-navigation button {
    background: rgba(0, 0, 0, 0.5); /* Poloprůhledné pozadí */
    border: none;
    font-size: 4rem; /* Velikost textu */
	font-weight: 450;
    color: white; /* Barva textu */
    cursor: pointer;
    padding: 10px 20px; /* Prostor uvnitř tlačítka */
    border-radius: 5px; /* Mírně zaoblené rohy */
    transition: background 0.3s ease;
}

/* Hover efekt pro tlačítka */
.custom-gallery-navigation button:hover {
    background: red; /* Změna barvy při najetí */
}


/* --------------------end of custom gallery ------------------ verze pro wine cellar ---*/

/*----- 2- Team -----*/

/* Team Container */
.team .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1rem;
}
  
/* Team member */
.team-item{ 
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}  
  
/* Team member Image */
.team-item .image{
    height: 35rem;
    position: relative;
    overflow: hidden;
}
  
/* Team member Image Before Style */
.team-item .image::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--black);
    opacity: 0.8;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
    -webkit-transition-delay: 0.25s;
            transition-delay: 0.25s;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
}
  
/* Team Member Social media container */
.team-item .icon-container{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
    -webkit-transform: translateY(-2rem);
            transform: translateY(-2rem);
    opacity: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}
  
/* Team Member Social media container, Team Member Hover */
.team-item:hover .icon-container{
    bottom: 0%;
}
  
/* Team Member Social media icons */
.team-item .icon-container a{
    display: inline-block;
    height: 4rem;
    width: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--main-color);
    border: 0.15rem solid var(--main-color);
    border-radius: 50%;
    text-decoration: none;
    font-size: 2rem;
}
  
/* Team Member Social media icons, On Hover */
.team-item .icon-container a:hover{
    color: var(--white);
    background-color: var(--main-color);
}
  
/* Team member content */
.team-item .content{
    padding: 2rem;
    text-align: center;
}

/* Team member name */
.team-item .content h3{
    font-size: 1.8rem;
    color: var(--black);
}
  
/* Team member title */
.team-item .content p{
    color: var(--main-color);
    padding: 0.5rem 0;
}
  
/* Team member Image, On Hover */
.team-item .image:hover:before{
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
}
  
.team-item .image:hover .icon-container{
    opacity: 1;
    -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
 
/*----- 2- Team / Tile ----- upraveny styl MT */

/* Tile Container */
.tile .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1rem;
}
  
/* Tile member */
.tile-item{ 
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
	position: relative; /* Umožňuje absolutní pozicování uvnitř  MT */
    overflow: hidden; /* Skryje obsah přesahující blok */
    transition: background-color 0.3s ease; /* Přechod pro ztmavení */
	display: flex;
    flex-direction: column;
	height: 100%; /* Aby se přizpůsobila nejvyšší kartě */
    min-height: 100%; /* Zajistí stejnou minimální výšku pro všechny */
	
}  

/* Ztmavení bloku při hover */
.tile-item:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Ztmavení bloku na tmavý odstín */
	color: var(--white);
}

/* Ikona ve středu bloku (skrytá ve výchozím stavu) */
.tile-item .hover-icon {
    position: absolute;
    top: 30%; /* Umístí ikonu vertikálně doprostřed */
    left: 50%; /* Umístí ikonu horizontálně doprostřed */
    transform: translate(-50%, -50%); /* Zajistí přesné vystředění */
    font-size: 5rem; /* Velikost ikony */
    color: var(--white); /* Barva ikony */
    opacity: 0; /* Výchozí stav: skryté */
    transition: opacity 0.3s ease; /* Přechod pro zobrazení ikony */
}

/* Zobrazení ikony při hover */
.tile-item:hover .hover-icon {
    opacity: 1; /* Zobrazení ikony */
}

/* Tile member Image */
.tile-item .image{
    height: 300px;
    position: relative;
    overflow: hidden;
}
  
/* Tile member Image Before Style */
.tile-item .image::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--black);
    opacity: 0.8;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
    -webkit-transition-delay: 0.25s;
            transition-delay: 0.25s;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
}
  
/* Tile Member Social media container */
.tile-item .icon-container{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
    -webkit-transform: translateY(-2rem);
            transform: translateY(-2rem);
    opacity: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}
  
/* Tile Member Social media container, Team Member Hover */
.tile-item:hover .icon-container{
    bottom: 0%;
}
  
/* Tile Member Social media icons */
.tile-item .icon-container a{
    display: inline-block;
    height: 4rem;
    width: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--main-color);
    border: 0.15rem solid var(--main-color);
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.8rem;
}
  
/* Tile Member Social media icons, On Hover */
.tile-item .icon-container a:hover{
    color: var(--white);
    background-color: var(--main-color);
}

/* Změna barvy textu v seznamu odkazu při hoveru na tile-item */
.tile-item:hover ul li a {
    color: var(--secondary-color); /* Orange text v seznamu */
}

/* Změna barvy textu v seznamu při hoveru na tile-item */
.tile-item:hover a {
    color: var(--secondary-color); /* Orange text v seznamu */
}

/* Tile member content */
.tile-item .content{
    padding: 2rem;
    text-align: left;
}

/* Tile member name */
.tile-item .content h3{
    font-size: 2.8rem;
    color: var(--ebony);
	text-align: center; /* Zarovnání na střed */
	font-weight: 450
}

/* Změna barvy h3 při hover na rodičovský .tile-item */
.tile-item:hover .content h3 {
    color: var(--white);
}
 
/* Tile member title */
.tile-item .content p{
    color: var(--black);
    padding: 1rem 0;
    font-size: 2rem; /* Zajistí, že písmo bude stejné jako základní velikost v .content */    
	font-weight: 400;
	line-height: 1.2; /* Sníží výšku řádku */
	/*line-height: 1.5rem;  Nastaví výšku řádku na 1,5násobek velikosti písma */
}

.center-text {
    text-align: center; /* Zarovnání textu na střed */
}

.center-text a {
    color: var(--main-color);
}

.center-text a:hover{
    color: var(--secondary-color); /* Změna barvy při najetí */
    text-decoration: underline; /* Zvýraznění při hoveru */
}

/* Styl pro seznamy uvnitř .content MT */
.tile-item .content ul {
    font-size:  1.8em; /* Nastaví velikost písma stejného jako u odstavců */
    padding-left: 3rem; /* Přidá odsazení vlevo pro seznam */
    list-style-type: disc; /* Standardní odrážky */
    margin-top: 0.5em; /* Přidá menší mezeru nad seznamem */
	margin-bottom: 2rem; /* Přidá menší mezeru nad seznamem */
	line-height: 1.5;
}

/* Styl pro jednotlivé položky seznamu */
.content ul li {
    margin-bottom: 0.5rem; /* Přidá mezeru pod každou položku seznamu */	
}

.tile-item ul li a {
    display: block; /* Celý řádek bude klikací */
    padding: 0.1rem 0; /* Lepší rozložení textu */
    color: var(--grey); /* Zvol si barvu odkazů */
    text-decoration: none; /* Bez podtržení */
}

.tile-item ul li a:hover {
    color: var(--secondary-color); /* Změna barvy při najetí */
    text-decoration: underline; /* Zvýraznění při hoveru */
}

/* Upravené stylování ceny */
.tile-item .price{
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Zarovnání doprava */
    justify-content: flex-end; /* Přichycení ke spodní části */
    /*height: 100%;  Zajištění správného umístění */
	margin-top: auto; /* Posune cenu dolů na dno nejdelšího kontejneru */
	padding-bottom: 2rem; /* Odstup 2rem od spodního okraje */
}

/*
.tile-item .standard_price {
    font-size: 2rem;
    font-weight: 400;
    text-decoration: line-through;
    color: var(--main-color);
    padding-right: 2rem;
}

Styl slevy 
.tile-item .discount {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--grey);
	padding-top: 0.5rem;
	padding-right: 2rem;
}
*/

/* Styl akční ceny */

.tile-item .sale_price {
    font-size: 4rem;
    font-weight: bold;
    color: var(--secondary-color);
    padding-top: 0.5rem;
	padding-right: 2rem;
    /*padding-bottom: 1rem;  Mezera pod cenou */
}

/* Styl jednotkove ceny */
.tile-item .unit_price {
    font-size: 1.5rem;
    font-weight: 200;
    color: var(--primary-color);
	padding-right: 2rem;
}




/* Tile member Image, On Hover */
.tile-item .image:hover:before{
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
}
  
.tile-item .image:hover .icon-container{
    opacity: 1;
    -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
    -webkit-transform: translateY(0);
            transform: translateY(0);
} 
 

 
/*----- 3- Testimonials -----*/

/* Testimonial slider */
.testimonial-slider{
    position: relative;
    padding: 2rem 10rem 4rem 10rem;
    overflow: hidden;
}

/* Testimonial slider pagination bullet */
.testimonial-slider .swiper-pagination-bullet{
    height: 1.7rem;
    width: 1.7rem;
    background: var(--grey);
    border-radius: 0.5rem;
}
  
/* Testimonial slider Navigation buttons */
.testimonial-slider .swiper-button-next,
.testimonial-slider .swiper-button-prev{
    background-color: var(--main-color);
    color: var(--white);
    font-size: 2rem;
    height: 5rem;
    width: 5rem;
    border-radius: var(--border-radius);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

/* Testimonial slider Navigation buttons Icon */
.testimonial-slider .swiper-button-prev:after, 
.testimonial-slider .swiper-button-next:after{
    font-size: 1rem;
    font-weight: bold;
    color: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center; 
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Testimonial slider Navigation buttons, On Hover */
.testimonial-slider .swiper-button-next:hover,
.testimonial-slider .swiper-button-prev:hover{
    background-color: var(--secondary-color);
}

/* Testimonial item */
.testi-item{
    text-align: left;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    background-color: var(--white);
    border: 0.1rem solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* Testimonial image */
.testi-item .image{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 30rem;
        flex: 1 1 30rem;
}

/* Star Rating Container */
.rating {
    display: flex; /* Zarovná hvězdičky do řádku */
    justify-content: left; /* Hvězdičky zarovnané na střed */
    gap: 0.5rem; /* Mezera mezi hvězdičkami */
    margin-bottom: 1rem; /* Vzdálenost mezi hvězdičkami a komentářem */
}

/* Individual Stars */
.rating i {
    font-size: 1.3rem; /* Velikost hvězdiček */
    color: var(--secondary-color); /* Barva hvězdiček */
}


/* Testimonial Content */
.testi-item .content{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 60rem;
            flex: 1 1 60rem;
    padding: 4rem;
}

/* Testimonial Comment */
.testi-item .comment{
    padding: 1rem;
    position: relative;
	display: inline-block; /* Zajišťuje, že text a odkaz budou považovány za stejný blok */
}

/* Testimonial Comment Text */
.testi-item .comment p {
    padding: 0rem;
    position: relative;
    font-size: 2rem;
	display: inline; /* Inline-flex zajistí, že obsah zůstane na stejné řádce */
    align-items: center; /* Vertikální zarovnání ikon a textu */
    font-style: italic;
    margin-top: 0.5rem;
	margin-bottom: 0.5rem; /* Vzdálenost mezi odstavci */	
}

comment .main, .comment .original {
    display: inline-block; /* Zajišťuje, že text a odkaz budou zarovnány správně */
    margin: 0; /* Odstraní výchozí mezery okolo odstavce */
    padding: 0; /* Odstraní výchozí odsazení okolo odstavce */
}

/* Originální text recenze */
.comment .original {
    display: none; /* Skryje originál ve výchozím stavu */
    font-style: italic; /* Volitelné: odlišení stylu originálu */
    /*color: var(--secondary-color); /* Sekundární barva */
    margin-top: 0.5rem;
}

/* Styl pro odkaz */
.comment a.toggle-original {
    margin-left: 0rem; /* Mezera mezi textem a odkazem */
    font-size: 2rem; /* Velikost písma odkazu */
    color: var(--secondary-color); /* Barva odkazu */
    text-decoration: underline; /* Podtržení odkazu */
    cursor: pointer; /* Ukazatel ruky při hover efektu */
	visibility: visible; /* Ujistí se, že je odkaz viditelný */
    opacity: 1; /* Zajistí plnou viditelnost odkazu */
    display: inline; /* Ujistí se, že je odkaz na stejné řádce */
    vertical-align: baseline; /* Zarovná odkaz na základní linii textu */
    text-decoration: underline; /* Zobrazí podtržení */
		
}

.comment a.toggle-original:hover {
    color: var(--secondary-color); /* Barva při hover efektu */
}


/* Testimonial Author Name */
.testi-item .content h3{
    padding: 0.5rem 0;
    padding-top: 0.5rem;
	margin: 0; /* Odstranění výchozích mezer kolem nadpisu */
    font-size: 1.8rem; /* Velikost textu autora */
    color: var(--black); /* Černá barva pro text */
    
}

/* Testimonial Author Title */
.testi-item .content h5{
    color: var(--grey);
    font-size: 1.4rem;
    font-weight: 400;
}

/* Kontejner tlačítka */
.testimonial .button-container {
    text-align: center; /* Horizontální zarovnání na střed */
    margin-top: 2rem; /* Přidá mezery mezi obsahem a tlačítkem */
}

/* Styl tlačítka */
.testimonial .button-container .btn {
    display: inline-block; /* Zajistí, že tlačítko má správnou šířku kolem textu */
    padding: 1rem 2rem; /* Přidá vnitřní mezery */
    font-size: 2rem; /* Velikost textu */
    color: #fff; /* Barva textu (bílá) */
    background-color: var(--main-color); /* Barva tlačítka */
    text-decoration: none; /* Odstraní podtržení odkazu */
    border-radius: 5px; /* Zaoblené rohy */
    transition: background-color 0.3s; /* Plynulý přechod při hover */
}

/* Hover efekt pro tlačítko */
.testimonial .button-container .btn:hover {
    background-color: var(--secondary-color); /* Barva při najetí myší */
}
/*----- 4- Faqs -----*/


/* FAQ section */
.faq{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center; 
    align-items: center; 
}

/* FAQ Accordion container */
.faq .accordion-container{
    width: 150rem;
}

/* Faq accordion */
.faq .accordion{
    background: var(--white);
    margin-bottom: 1.5rem;
    -webkit-box-shadow: var(--box-shadow); 
            box-shadow: var(--box-shadow);
    overflow: hidden;
    border-bottom: 0.1rem solid var(--main-color);/*(--secondary-color); MT*/
} 

/* Faq Accordion heading */
.faq .accordion .accordion-heading{
    padding: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center; 
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 1rem;
    background: var(--main-color); /*(--secondary-color); MT*/
    cursor: pointer;
}

/* Faq Active Accordion heading */
.faq .accordion.active .accordion-heading{
    background-color: var (--main-color) 
}

/* Faq Accordion heading Title */
.faq .accordion .accordion-heading h3{
    font-size: 2rem;
	font-weight: 500;
    color: var(--white);
}

/* Faq Accordion heading icon */
.faq .accordion .accordion-heading i{
    font-size: 2rem;
    color: var(--white);
}

/* Faq Active accordion content */
.faq .accordion.active .accordion-content{
    display: block;
}

/* Faq accordion content */
.faq .accordion-content{
    padding: 1rem;
    line-height: 1;
    color: var(--black);
    display: none;
}

/* Zvýraznění otázky */
.faq .accordion-content .question {
    font-weight: 500;
	font-size: 2rem;
    display: inline; /* Změní z block na inline pro přirozený tok textu */
    margin-right: 0.5rem; /* Přidá malou mezeru mezi otázkou a odpovědí */
}

/* Oprava mezer mezi odpověďmi */
.faq .accordion-content p {
    margin-bottom: 1rem; /* Rovnoměrná mezera mezi odpověďmi */
    position: relative; /* Připraví prostor pro čáru */
    padding-bottom: 1rem; /* Mezera mezi odpovědí a čárou */
	font-size: 1.6rem;
}

/* Horizontální čára oddělující odpovědi */
.faq .accordion-content p:not(:last-child)::after {
    content: ""; /* Přidá čáru */
    display: block;
    width: 100%;
    height: 0.5px;
    background-color: var(--main-color); /* Barva čáry, uprav dle potřeby */
    margin: 1rem auto 0 auto; /* Zarovná čáru na střed a dodá mezery */
}

/*------------------------------ (02)-About (End) ------------------------------*/



/*------------------------------ (03)-Pages (Start) ------------------------------*/

/*--------------- COMPONENTS ---------------*/

/*----- 01- Account-Form  -----*/
.form.account{
    max-width: 45rem;
    padding: 2rem;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    margin: 0rem auto;
    text-align: center;
    border: 0.1rem solid var(--main-color);
}

/* Account Form Paragraph */
.form.account p{
    padding-top: 2rem;
    text-align: center;
    padding-bottom: 1rem;
}

/* Account Form button */
.form.account .btn{
    width: 100%;
    border-radius: 5rem;
    overflow: hidden;
    margin: 1rem 0;
}

/* Account Form link */
.form.account .link{
    font-size: 1.5rem;
    color: var(--main-color);
}

/* Account Form link, On Hover */
.form.account .link:hover{
    text-decoration: underline;
}

/*----- 02- Address-Details -----*/

/* Address container */
.address-details .address-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1.5rem;
}

/* Individual address */
.address-details .address{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 25rem;
        flex: 1 1 25rem;
}

/* Address Title */
.address-details .title{
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 1rem 0.5rem;
    margin-bottom: 1rem;
}

/* Address Title Heading */
.address-details .title h3{
    font-size: 1.8rem;
}

/* Address info */
.address-details .info p{
    font-weight: 400;
    padding-bottom: 1rem;
}

/* Address info Label */
.address-details .info p span{
    font-weight: bold;
    color: var(--black);
    padding-right: 0.5rem;
}

/*--------------- PAGES ---------------*/

/*----- 1- Menu -----*/

/* Menu button tabs */
.menu-tabs{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1rem;
}

/* Menu button */
.menu-tabs button{
	padding: 1.5rem 3rem;
	position: relative; 
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-weight: 500; 
	font-size: 1.6rem; 
    color: var(--ebony);
    background: none;
	-webkit-transition:0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

/* Menu buttons, Active and hover style */
.menu-tabs button.active,
.menu-tabs button:hover{
    cursor: pointer;
    color: var(--white);
	background-color: var(--secondary-color);
	-webkit-box-shadow: var(--box-shadow);
			box-shadow: var(--box-shadow);
}


.note_general {
    text-align: left; /* Zarovnání textu doleva */
    margin-bottom: 0.5rem; /* Mezera pod odstavcem */
    font-size: 1.8rem; /* Velikost textu */
    color: var(--black); /* Barva textu */
    width: 60%; /* Přizpůsobení šířky menu items */
    margin: 0 auto; /* Vycentrování na střed */
	padding: 2rem;
}

/* Poznámka o měně (note_currency) */
.note_currency {
    text-align: right; /* Zarovnání textu doprava */
    font-size: 1.8rem; /* Velikost textu */
    color: var(--black); /* Barva textu */
    width: 60%; /* Přizpůsobení šířky menu items */
    margin: 0 auto; /* Vycentrování na střed */
	padding: 0rem 1rem 0rem;
}


/* Menu gallery */
.menu-gallery{
    display: none;
    padding-top: 2rem; 
    gap: 1rem;
	justify-content: center; /* Zarovnání na střed  MT */
}

/* Active Menu gallery */
.menu-gallery.active{
    /*display: -ms-grid; MT
    display: grid;
    -ms-grid-columns: (minmax(40rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));*/
		
	display: flex;
    flex-direction: column; /* Položky v jednom sloupci */
    align-items: center; /* Vycentrování obsahu */
    gap: 1rem; /* Mezera mezi položkami */
    width: 60%; /* Šířka obsahu */
    margin: 3rem auto; /* Horizontální vycentrování */
}

/* Menu item style */
.menu-item{
    width: 100%;
    padding: 1rem;
    background-color: var(--white); 
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: strech;
    gap: 1rem;
	box-sizing: border-box; /* Zajištění správného počítání paddingu a šířky MT */
    justify-content: space-between; /* Umožní, aby cena byla vždy dole */
	position: relative; /* Přidáno: Relativní pozice pro .price */
} 

/* Obal pro obrázek a text */
.menu-item .content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
	height: 100%; /* Přidáno: Zabere celou výšku .menu-item */
}
 
/* Menu item Image */
.menu-item .image{
    height: 15rem;
    width: 15rem;
	position: relative; /*MT*/
    overflow: hidden; /*MT*/
	flex-shrink: 0; /* Zabrání zmenšení obrázku */
}

.menu-item .image img{
    border-radius: 10%;
	display: block; /*MT*/
    width: 100%;/*MT*/
    height: 100%;/*MT*/
    transition: transform 0.3s ease, filter 0.3s ease;/*MT*/
}

/* Efekt při hoveru na obrázek MT */
.menu-item .image:hover img {
    transform: scale(1.1); /* Jemné zvětšení */
    filter: brightness(50%); /* Ztmavení obrázku */
}

/* Ikona lupy MT */
.menu-item .image::after {
    content: '\f00e'; /* Font Awesome lupa s + */
    font-family: "Font Awesome 5 Free"; /* Zajistěte, že máte Font Awesome nahrané */
    font-weight: 900;
    color: white;
    font-size: 3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Zobrazení ikony při hoveru MT */
.menu-item .image:hover::after {
    opacity: 1;
}


/* Menu item Content */
.menu-item .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Zarovná .intro a <p> nahoru */
    flex-grow: 1; /* Zajistí, že obsah vyplní výšku, pokud je potřeba */
    padding: 0rem 2rem 1rem; /* Odsazení textu */
}

.menu-item .intro {
    display: flex; /* Stačí moderní flex bez předpon */
    align-items: flex-start; /* Zarovná obsah uvnitř .intro nahoru */
    justify-content: space-between; /* Rozloží <h4> a další prvky (pokud tam něco přidáš) */
    padding-bottom: 0.5rem;
    border-bottom: 0.1rem dashed var(--black);
}

/* Menu Item Title */
.menu-item .intro h4{
    font-size: 2rem;
    margin-top: 0rem; /* Odsazení 1rem od horního okraje */
    margin-bottom: 0.5rem; /* Mezera pod názvem */
}

/* Menu Item Details */
.menu-item p{
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--black);
	margin: 0; /* Odstraní výchozí margin pro <p> */
}

.menu-item p a {
	color: #b22222; /* Barva odkazu */
    font-weight: 450; /* Tučné písmo */
    text-decoration: none; /* Odebrání podtržení */
    transition: color 0.3s ease-in-out, text-decoration 0.3s ease-in-out;
}

.menu-item p a:hover {
	color: var(--secondary-color);
    text-decoration: underline; /* Podtržení při hoveru */
}

/* Cena bude vždy v levém dolním rohu */
.menu-item .price {
    font-size: 3rem;
    font-weight: bold;
    color: var(--secondary-color);
	position: absolute; /* Absolutní pozice */
    bottom: 1rem; /* 1rem od spodního okraje */
    right: 1rem; /* 1rem od pravého okraje */
	text-align: right;
}


/* Styl pro kontejner cen */
.prices-container {
   position: absolute;
   bottom: 1rem; /* 1rem od spodního okraje */
   right: 1rem;  /* 1rem od pravého okraje */
   display: flex; /* Umožní zobrazení cen na stejném řádku */
   align-items: baseline; /* Zarovná ceny podle základní linie textu */
   gap: 4rem; /* Mezera mezi price-glass a Price */
}

/* Zajistíme vyšší specifitu přidáním `.menu-item .intro` */
.menu-item .price_bottle {
    font-size: 3rem;
    color: var(--secondary-color);
    font-weight: 550;
}
.menu-item .price_glass {
    font-size: 2rem;
    color: var(--ebony);
    font-weight: 500;
}



/* Styl pro seznam v menu-item */
.menu-item ul {
    list-style-type: disc; /* Použití tečky jako odrážky */
    padding-left: 2rem; /* Odsazení seznamu zleva */
    margin-top: 1rem; /* Mezera mezi textem a seznamem */
    margin-bottom: 1rem; /* Mezera pod seznamem */
}

/* Styl pro jednotlivé položky seznamu */
.menu-item ul li {
    font-size: 1.6rem; /* Velikost písma */
    text-align: left; /* Zarovnání textu doleva */
    margin-bottom: 0.5rem; /* Mezera mezi jednotlivými položkami seznamu */
    line-height: 1.4; /* Lepší čitelnost textu */
}


/* ==== menu - verze wine list ===== */

.note_country {
	text-align: center;  /* Zarovnání na střed */
	margin-top: 4rem;
	margin-bottom: 4rem;
	font-size: 2rem;
	font-weight: 400;
}

.country-list a {
	text-decoration: none;
	/* color: var(--ebony);*/
	color: #b22222; /*  Červenohnědá barva pro eleganci */
	font-size: 1.8rem;
	font-weight: 400;
	padding: 0 10px;
}

.country-list a:hover {
	color: var(--secondary-color);
	/* color: #8b0000;  Tmavší odstín při najetí myší */
	text-decoration: underline;
}



.country-list img {
    width: 2rem;  /* Adjust flag size */
    height: auto; /* Maintain aspect ratio */
    border-radius: 3px; /* Slight rounding */
}

.note_country {
    font-size: 1.6rem;
}
.country-list a {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center; /* Align text and flag */
    gap: 5px; /* Space between flag and text */
}

.country-header {
    display: flex;
    align-items: center;
    justify-content: center; /* Zarovnání na střed */
    font-size: 3rem;
    font-weight: 450;
    margin: 0 0 0 0;
    text-transform: uppercase;
	border-bottom: 0.2rem dashed var(--black);
	border-top: 0.2rem dashed var(--black);

}

.flag {
    margin:0.7rem 2rem;

}

.flag img{
	border-radius: 5px; /* Slight rounding */
	width: auto;  /* Adjust flag size */
    height: 3.5rem; /* Maintain aspect ratio */
}

/* Styl pro odkaz "Na začátek" */
.scroll-top-link {
    text-align: center; /* Zarovná text na střed */
	padding: 0 0 0 4rem;
}

.scroll-top-link i {
    font-size: 3rem; /* Menší font */
	font-weight: bold; /* Menší font */
	color: var(--main-color);
}

.scroll-top-link a {
    font-size: 1.5rem; /* Menší font */
    text-decoration: underline; /* Podtržení */
    color: var(--black);
    display: inline-block; /* Umožní lepší stylování */
}

.scroll-top-link a i:hover {
    color: var(--black); /* Lehce tmavší červená při hoveru */
}


html {
    scroll-behavior: smooth;
}

/* Region */
.region-header {
    text-align: center;
    font-size: 3rem; /* Menší než country */
    margin-bottom: 0rem;
	margin-top: 4rem;
	position: relative; /* Pro lepší kontrolu umístění */
}

.region-header a {
    text-decoration: none;
	color: #b22222; /*  Červenohnědá barva pro eleganci */
    font-weight: 450;
}

.region-header a:hover {
	color: var(--secondary-color);
	/* color: #8b0000; Lehce světlejší červená při najetí myší */
	text-decoration: underline;
}


/* ==== END menu - verze wine list ===== */

/*----- 2- Gallery -----*/

/* Gallery tabs */
.gallery .tab-buttons{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    list-style-type: none;
    gap: 1rem;
}

/* Gallery Tabs button style */
.gallery .tab-buttons .button{
	padding: 1.5rem 3rem;
	position: relative; 
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-weight: 500; 
	font-size: 1.6rem; 
    color: var(--grey);
	-webkit-transition:0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
 
/* Gallery Tabs buttons, Hover and Active style */
.gallery .tab-buttons .button:hover,
.gallery .tab-buttons .button.active{
    cursor: pointer;
    color: var(--white);
	background-color: var(--secondary-color);
	-webkit-box-shadow: var(--box-shadow);
			box-shadow: var(--box-shadow);
}

/* Gallery container */
.gallery .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(33rem, 1fr))[auto-fill];
        grid-template-columns: repeat(auto-fill, minmax(33rem, 1fr));
    gap: 1.5rem;
    padding-top: 2rem;
}

.gallery-item{
    width: 100%; /* MT bylo 33.3% */
    padding: 0.8rem;
}

.gallery-content{
    height: 30rem;
    position: relative; 
    overflow: hidden;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}  

/* Gallery item content */
.gallery-item .content{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7); 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
    -webkit-transform: translateY(-2rem);
            transform: translateY(-2rem);
    opacity: 0;
    z-index: 2;
}

/* Gallery item title */
.gallery-item .content h4{
    font-size: 2.5rem;
    font-weight: 450;
    color: var(--white);
    letter-spacing: 0.1rem;
    text-align: center; /* Správné zarovnání textu */
}

/* Gallery item Category */
.gallery-item .content p{
    font-size: 2rem;
    font-weight: 400;
    color: var(--white);
    padding: 1rem 0;
    text-align: center; /* Správné zarovnání textu */
}

/* Gallery item link/button */
.gallery-item .content a{
    display: inline-block;
    height: 4.5rem;
    width: 4.5rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 2rem;
	color: var(--white);
    background-color: var(--secondary-color);
}


/* Gallery item link/button, On Hover */
.gallery-item .content a:hover{
    background-color: var(--main-color);
}

/* Gallery item hover effect */
.gallery-item:hover:before{
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition-delay: 0s;
            transition-delay: 0s;

}

.gallery-item:hover .content{
    opacity: 1;
    -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

a.gallery-item {
    display: block;
    text-decoration: none; /* Odstraní podtržení odkazu */
    color: inherit; /* Zachová výchozí barvy textu */
}

a.gallery-item:hover .gallery-content {
    transform: scale(1.02); /* Jemné zvětšení */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Přidání stínu */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/*----- 3- Reservation -----*/

/* Reservation Container */
.reservation .box-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    border: 0.1rem solid var(--black);
}

/* Booking Information Section */
.reservation .booking-info{ 
    background-color: var(--black);
    -webkit-box-flex: 1;
    -ms-flex: 1 1 35rem;
        flex: 1 1 35rem;
    padding: 4rem 3rem;
    text-align: center;
    outline: 0.1rem dashed var(--main-color);
    outline-offset: -2rem;
}

/* Booking information section items */
.reservation .booking-info .item{
    padding: 1rem 0;
}

/* Timing within booking information section */
.reservation .booking-info .timing{
    padding-bottom: 1rem;
}

/* Booking information Heading */
.reservation .booking-info .item h3{
    color: var(--white);
    font-size: 2.5rem;
    text-transform: uppercase;
    font-weight: 500;
    padding-bottom: 1rem;
    letter-spacing: 0.1rem;
}

/* Booking information Subheading */
.reservation .booking-info .item h4{
    color: var(--main-color);
    font-size: 2rem;
    font-weight: 500;
    padding-bottom: 1rem;
}

/* Booking information Paragraph */
.reservation .booking-info .item p{
    color: var(--white);
}

/* Booking Contact section */
.reservation .booking-info .contact{
    border-top: 0.1rem solid var(--white);
    padding-top: 2rem;
    margin-top: 3rem;
}

/* Booking Contact information */
.reservation .booking-info .contact p{
    color: var(--white);
    padding-top: 1rem;
}

.reservation .booking-info span{
    display: inline-block;
    margin-left: 0.5rem;
}

/* Booking Social media links */
.reservation .booking-info .social a{
    color: var(--white);
    margin: 0 0.4rem;
}

/* Booking Social media links, On Hover */
.reservation .booking-info .social a:hover{
    color: var(--main-color);
}

/* Booking Table */
.reservation .booking-table{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50rem;
        flex: 1 1 50rem;
    background: var(--white);
    padding: 2rem;
}
 
/* Booking Table Heading */
.reservation .booking-table h2{
    text-align: center;
    color: var(--main-color);
    font-size: 3rem;
    font-weight: 500;
    padding-bottom: 1rem;
}

.reservation .btn{
    width: auto;
}

.reservation .alert{
    display: inline-block;
    font-size: 2rem;
    color: var(--main-color);
    padding-left: 1rem;
}


/* -------- Přidáno pro použití v review add --------*/
.reservation .photos {
    margin-top: 2rem;
    text-align: center;
}

.reservation .upload-area {
    border: 2px dashed #aaa;
    padding: 2rem;
    cursor: pointer;
    border-radius: 10px;
    background: #f8f8f8;
}

.reservation .upload-area p {
    font-size: 1.8rem;
    color: #333;
}

.reservation .upload-btn {
    background: #007BFF;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.8rem;
    margin-top: 1rem;
}

.reservation .upload-btn:hover {
    background: #0056b3;
}

/* Kontejner pro náhledy fotek */
.reservation .image-previews {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

/* Každý obrázek má svůj kontejner */
.reservation .image-container {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0.5rem;
    border-radius: 5px;
    overflow: hidden;
    border: 2px solid #ddd;
    transition: transform 0.3s ease;
}

/* Styl pro náhled fotky uvnitř kontejneru */
.reservation .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Zvýraznění obrázku při hover */
.reservation .image-container:hover {
    transform: scale(1.05);
}

/* Koš se zobrazí při hover nad obrázkem */
.reservation .image-container:hover .delete-icon {
    opacity: 1;
}

/* Ikona koše - 2rem, centrovaná a vždy kruhová */
.reservation .delete-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.5rem; /* Definujeme pevnou šířku */
    height: 3.5rem; /* Definujeme pevnou výšku */
    line-height: 3.5rem; /* Vycentrování textu vertikálně */
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 3rem;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}



.reservation .delete-icon:hover {
    background: red;
}

/* Kontejner pro hodnocení */
.reservation .rating-container {
    display: flex;
    flex-wrap: wrap; /* Pokud není dost místa, přesune řádky dolů */
    gap: 5rem;
    justify-content: center; /* Zarovnání doleva */
    margin-bottom: 2rem;
}

/* Každé kritérium */
.reservation .rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Název kritéria */
.reservation .rating-label {
    font-size: 1.8rem;
    font-weight: 500;
    min-width: 150px; /* Zajistí zarovnání textu */
}

/* Hvězdičky */
.reservation .stars {
    font-size: 2rem;
    color: #ccc;
    cursor: pointer;
    user-select: none;
}

/* Aktivní hvězdy */
.reservation .stars.active {
    color: var(--secondary-color);
}


/* Hvězdy jako jednotlivé elementy */
.reservation .star {
    transition: color 0.2s ease-in-out;
}


/* Nadpis sekce hodnocení */
.reservation .rating-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 3rem; /* Odstup od sekce hodnocení */
	margin-top: 3rem; /* Odstup od sekce hodnocení */
	color: var(--secondary-color);
}

/*----- 4- Login -----*/
.login form .forgot{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 1rem 0;
}
  
/*----- 5- Register -----*/
/* Register Terms container */
.register form .terms{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}
  
/* Register Terms label */
.register form .terms label{
    font-size: 1.5rem;
    color: var(--grey);
    cursor: pointer;
}
  
/* Register Terms label SubText */
.register form .terms label span{
    color: var(--main-color);
}

/*----- 6- Profile -----*/
/* Each Profile item */
.profile-item{
    width: 100%;
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow); 
    padding: 2rem;
    margin-bottom: 1rem;
}
  
/* Profile Details Content */
.profile .profile-details .content{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2rem;
}
  
/* User Profile Image */
.profile .image{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 30rem;
        flex: 1 1 30rem;
    text-align: center;
}

.profile .image img{
    height: 30rem;
    width: 30rem;
    border: 0.1rem solid var(--black);
    border-radius: 50%;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

/* Profile Information */
.profile .profile-details .info{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 40rem;
        flex: 1 1 40rem;
}

.profile .profile-details .info .container{
    width: 35rem;
}

/* Profile Information item */
.profile .profile-details .info .box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 2rem;
}

/* Profile Information item Heading */
.profile .profile-details .info .box span{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
    font-size: 2.2rem;
    font-weight: 500;
    color: var(--black);
}

/* Profile Information item Value */
.profile .profile-details .content p{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
    font-weight: 400;
}

/* Profile Information item Value, with 'gmail' class */
.profile .profile-details .content .gmail{
    text-transform: none;
}

/* Profile Button */
.profile .btn{
    margin-top: 1rem;
}

/*----- 7- Edit Address -----*/
.edit-address form{
    max-width: 80rem !important;
}


/*------------------------------ (03)-Pages (End) ------------------------------*/



/*------------------------------ (04)-Blog (Start) ------------------------------*/

/*--------------- COMPONENTS ---------------*/

/*----- 01- Blog-Item -----*/
.blog-item{
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    background-color: var(--white);
	position: relative; /* Potřebné pro absolutní umístění overlaye */
    overflow: hidden; /* Zabrání přesahu */
}


/* Overlay s datem */
.blog-date-overlay {
    position: absolute;
    top: 2rem; /* Odsazení od spodního okraje */
    right: 2rem; /* Odsazení od pravého okraje */
    width: 120px;
    height: 120px;
    background: var(--secondary-color); /* Použití sekundární barvy */
    color: white;
    font-size: 2.5rem;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Vytvoření kruhu */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); /* Jemný stín pro lepší vizuální efekt */
}

/* Hover efekt */
.blog-date-overlay:hover {
    transform: scale(1.2); /* Zvětší se o 20 % */
    background-color: black; /* Změní barvu na černou */
	animation: blinkEffect 0.8s ease-in-out; /* Zabliká dvakrát během 0.8 sekundy */
}

/* Definice animace */
@keyframes blinkEffect {
    0%, 100% { transform: scale(1); background-color: var(--secondary-color); }
    25% { transform: scale(1.2); background-color: black; }
    50% { transform: scale(1); background-color: var(--secondary-color); }
    75% { transform: scale(1.2); background-color: black; }
}

/* Blog Image */
.blog-item .image{ 
    height: 30rem;
}
  
/* Blog Content */
.blog-item .content{
    padding: 2rem;
}
  
/* Blog Main heading */
.blog-item .main-heading{
    display: inline-block;
    font-size: 3rem;
    font-weight: bold;
    color: var(--black);
}
  
/* Blog Main heading, On hover */
.blog-item .main-heading:hover{
    color: var(--main-color);
}
  
/* Blog Paragraph */
.blog-item p{
    padding-top: 1rem;
}
  
/* Blog Details */
.blog-item .details{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 2rem;
}
  
/* Blog Admin */
.blog-item .details .admin{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; 
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.7rem;
}
  
/* Blog Admin Image */
.blog-item .details .admin img{
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
}
  
/* Blog Admin Name */
.blog-item .details .admin span{
    font-size: 1.6rem;
    color: var(--grey);
}
  
/* Blog Date */
.blog-item .details .date{
    font-size: 1.4rem;
    color: var(--grey);
}
  
/*----- 02- Pages-No -----*/

/* page numbers */
.pages-no{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 2rem 0;
}

/* page number buttons Container */
.pages-no .container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
}

/* All page numbers container */
.pages-no .numbers{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
}

/* Page number individual button */
.pages-no .item{
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    height: 5rem;
    width: 5rem;
    font-size: 2rem;
    border-radius: 0.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Page number individual button, active and hover effect */
.pages-no .item.active,
.pages-no .item:hover{
    cursor: pointer;
    color: var(--white);
    background-color: var(--secondary-color);
}

/*----- 03- Comments -----*/
/* Comment container */
.comments .comment{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start;
    gap: 2rem;
    padding: 1rem 0;
}

/* Comment image */
.comment-item .image{
    height: 8rem;
    width: 8rem;
    border-radius: 50%;
    overflow: hidden;
}

/* Comment content */
.comment-item .content{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 40rem;
        flex: 1 1 40rem;
}

/* Comment introduction section */
.comment-item .content .intro{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
}

/* Comment Author Name */
.comment-item .content .intro h6{
    font-size: 1.8rem;
    color: var(--black);
}

/* Comment date */
.comment-item .content .intro p{
    padding: 0.5rem 0;
}

/* Comment Text */
.comment-item .content .text{
    font-size: 1.5rem;
    color: var(--grey);
    line-height: 1.5;
}

/* Comment Action Icons */
.comment-item .icon-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
}

/* Comment Button */
.comment-item .icon-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
}

/* Comment Button, On Hover */
.comment-item .icon-item:hover{
    color: var(--main-color);
    cursor: pointer;
}

/* Comment Button Icon */
.comment-item .icon-container i{
    color: var(--black);
    font-size: 1.5rem;
}

/* Comment Button Text */
.comment-item .icon-container span{
    color: var(--black);
    font-size: 1.5rem;
}

/* Comment Button, On Hover */
.comment-item .icon-item:hover i,
.comment-item .icon-item:hover span{
    color: var(--main-color);
}

/*--------------- PAGES ---------------*/

/*----- 1- Blog Grid -----*/
/* Blog Grid Container */
.blog.grid{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1.5rem;
}

/* Blog Container */
.blog-container{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 75rem;
        flex: 1 1 75rem;
}

/* Blog Grid items */
.blog-container.grid .blog-items{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(33rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
    gap: 1rem;
}

/* novy blog container */

.blog-container-list .blog-container {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Mezera mezi jednotlivými blog-itemy */
}

.blog-container-list .blog-item {
    display: flex;
    align-items: stretch; /* Všechny prvky budou mít stejnou výšku */
    gap: 2rem; /* Mezera mezi obrázkem a textem */
    padding: 2rem;
    background: var(--white); /* Pozadí blog-itemu */
    box-shadow: var(--box-shadow); /* Stín pro oddělení */
}

.blog-container-list .blog-item .image {
    flex: 0 0 40%; /* Obrázek zabírá max 30 % šířky */
    height: 25rem; /* Pevná výška */
    overflow: hidden; /* Skryje přesahující část obrázku */
}

.blog-container-list .blog-item .image img {
    width: 100%; /* Obrázek vyplní kontejner */
    height: 100%;
    object-fit: cover; /* Zachová poměr stran a vyplní prostor */
}

.blog-container-list .blog-item .content {
    flex: 1; /* Zabírá zbývajících 70 % šířky */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Posune details dolů */
    padding-right: 2rem; /* Mezera mezi textem a pravým okrajem */
}

.blog-container-list .blog-item .content .main-heading {
    font-size: 2.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}

.blog-container-list .blog-item .content p {
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--black);
    flex-grow: 1; /* Umožní roztažení obsahu */
}

/* Zarovnání details na spodek */
.blog-container-list .blog-item .content .details {
    display: flex;
    align-items: center;
    gap: 2rem; /* Mezera mezi admin a date */
    font-size: 1.6rem;
    margin-top: 10px; /* Posune na spodek */
}

.blog-container-list .blog-item .content .admin,
.blog-container-list .blog-item .content .date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-container-list .blog-item .content .admin img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}


/*----- 2- Blog List -----*/
/* Blog List Container */
.blog.list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1.5rem;
}

/* Blog List items */
.blog-container.list .blog-item{
    width: 100%;
    margin-bottom: 1rem;
}

/* Blog List items Image */
.blog-container.list .blog-item .image{
    height: 30rem;
}

/*----- 3- Blog Details -----*/
.blog-details{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2rem;
}

/* Blog Information Section */
.blog-info{
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}
   
/* Blog Image */
.blog-info .image{ 
    height: 40rem; 
}
  
/* Blog Content */
.blog-info .content{
    padding: 2rem 4rem 2rem 4rem;   
}
  
/* Blog Details */
.blog-info .content .details{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2.5rem;
    padding-bottom: 2rem;
} 
  
/* Blog Detail Item */
.blog-info .content .details h5{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--grey);
}
  
/* Blog Admin Image */
.blog-info .details .admin img{
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
}
  
/* Blog Detail Icon */
.blog-info .content .details h5 i{
    color: var(--secondary-color);
}
  
/* Blog Detail Text */
.blog-info .content .details h5 span{
    color: var(--grey);
}
  
/* Blog Main Heading */
.blog-info .content .main-heading{
    display: inline-block;
    font-size: 3rem;
    font-weight: bold;
    color: var(--black);
    padding-bottom: 2rem;
}
 
 /* prdano MT ---*/
 /* Kontejner pro náhledy */
.blog-info .content .news-thumbnails {
    display: flex;
    gap: 0.5rem; /* Mezera mezi náhledy */
    padding: 1rem 2rem; /* Vložení 2rem zleva a zprava */
    overflow-x: auto; /* Možnost horizontálního posouvání, pokud je hodně obrázků */
}

/* Styl pro jednotlivé náhledy */
.blog-info .content .news-thumbnails img {
    width: 200px;
    height: 200px;
    object-fit: cover; /* Zajistí správný poměr stran */
    border-radius: 5px; /* Lehce zaoblené rohy */
    cursor: pointer; /* Kurzor při najetí */
    transition: transform 0.3s ease;
}

/* Efekt zvětšení při hoveru */
.blog-info .content .news-thumbnails img:hover {
    transform: scale(1.1);
}

 /* prdano MT ---*/
 
/* Blog Paragraph */
.blog-info p{
    padding-bottom: 2rem;
}

/* Pokud po <p> následuje další <p>, nastavíme padding-bottom na 0 */
.blog-info p:has(+ p),
.blog-info p:has(+ div.important) {
    padding-bottom: 1;
}

/* Blog Important Container */
.blog-info .important{
    padding: 0rem 6rem;
    font-weight: 400;
    color: var(--black);
    font-style: italic;
    line-height: 1.5;
}

/* Styl pro seznamy uvnitř .content MT */
.blog-info .important ul {
    font-size:  1.6em; Nastaví velikost písma stejného jako u odstavců 
    list-style-type: disc; /* Standardní odrážky */
    margin-top: 0rem; /* Přidá menší mezeru nad seznamem */
	margin-bottom: 2rem; /* Přidá menší mezeru nad seznamem */
}

/* Styl pro jednotlivé položky seznamu */
.blog-info .important ul li {
    margin-bottom: 0.0rem; /* Přidá mezeru pod každou položku seznamu */
}
  
/* Blog End Details */
.blog-info .end-details{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 2rem;
}
  
/* Blog Tags and Share Container */
.blog-info .tags, 
.blog-info .share{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}
  
/* Blog Tags and Share Title */
.blog-info .share h3{
    color: var(--black);
    font-size: 1.8rem;
    padding-right: 1rem;
}
  
/* Blog Tags Link */
.blog-info .tags span{
    color: var(--grey);
    font-size: 1.4rem;
    padding: 0.8rem 1.5rem;
    border: 0.1rem solid rgba(0, 0, 0, 0.1);
}
  
/* Blog Share Icon */
.blog-info .share i{
    color: var(--grey);
    font-size: 1.6rem;
}
  
/* Blog Share Icon, On Hover */
.blog-info .share i:hover{
    color: var(--main-color);
    cursor: pointer;
}
   
/*-- 2- Comments --*/
.blog-details .comments{
    background-color: var(--white);
    padding: 2rem;
    margin: 1rem 0;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
} 

/* All Comments section Heading */
.blog-details .comments h4{  
    font-size: 2.5rem; 
    color: var(--black); 
    padding-bottom: 2rem;
} 

/* Blog Reply Comment */
.blog-details .comments .comment.reply{
    margin-left: 10rem;
}

/*-- 3- Leave A Reply --*/
.leave-reply{
    padding: 2rem;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
} 


/*------------------------------ (04)-Blog (End) ------------------------------*/



/*------------------------------ (05)-Shop (Start) ------------------------------*/
.shop{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2rem;
}

/*--------------- COMPONENTS ---------------*/

/*----- 01- Filter -----*/

/* Filter container */
.filter .box-container{
    padding: 2rem 0;
}

/* Filter slider */
.filter .slider{
    height: 5px;
    position: relative;
    background: #ddd;
    border-radius: var(--border-radius);
}

/* Slider progress */
.filter .slider .progress{
    height: 100%;
    left: 25%;
    right: 25%;
    position: absolute;
    border-radius: var(--border-radius);
    background: var(--secondary-color);
    -webkit-transition: none;
            transition: none;
}

/* Range input Container */
.range-input{
    position: relative;
    -webkit-transition: none;
            transition: none;
}

/* Range input */
.range-input input{
    position: absolute;
    width: 100%;
    height: 5px;
    top: -5px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Slider thumb in WebKit browsers */
input[type="range"]::-webkit-slider-thumb{
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background: var(--secondary-color);
    pointer-events: auto;
    -webkit-appearance: none;
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.05);
            box-shadow: 0 0 6px rgba(0,0,0,0.05);
}

/* Slider thumb in Firefox */
input[type="range"]::-moz-range-thumb{
    height: 17px;
    width: 17px;
    border: none;
    border-radius: 50%;
    background: var(--secondary-color);
    pointer-events: auto;
    -moz-appearance: none;
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.05);
            box-shadow: 0 0 6px rgba(0,0,0,0.05);
}

/* Price wrap container */
.price-wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 1rem;
    color: #242424;
    font-size: 14px;
    line-height: 1.2em;
    font-weight: 400;
    margin-bottom: 0px;
    margin-top: 3rem;
}

/* Price input container */
.filter .price-input{
    width: 15rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 0.1rem solid rgba(0, 0, 0, 0.2);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
}

/* Price input field Container */
.filter .price-input .field{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.2rem;
    width: 100%;
    height: 3rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Price input field */
.filter .field input{
    width: 100%;
    height: 100%;
    outline: none;
    font-size: 1.5rem;
    text-align: center;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
            appearance: textfield;
}

/* Rremove the spinner arrows in number inputs */
.filter input[type="number"]::-webkit-outer-spin-button,
.filter input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Separator within the price input container */
.filter .price-input .separator{
    width: 10rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.8rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
  
/* Filter button */
.filter-btn{
    display: inline-block;
    padding: 1rem 3rem;
    color: var(--white);
    background-color: var(--main-color);
    font-size: 1.8rem;
    letter-spacing: 0.1rem;
    border-radius: var(--border-radius);
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

/* Filter button, On Hover */
.filter-btn:hover{
    background-color: var(--secondary-color);
    cursor: pointer;
}

/*----- 02- Shop Header -----*/

/* Shop Header container */
.shop .intro{
    margin-bottom: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox; 
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify; 
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center; 
    align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; 
    gap: 1.5rem;
}

/* Showing products count */
.shop .intro .showing{
    font-size: 1.6rem;
    color: var(--grey);
}

/* Styles buttons */
.shop .intro .styles{
    list-style-type: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
}

/* Styles button links */
.shop .intro .styles a{
    font-size: 2rem;
    color: var(--black);
}

/* Styles button links, On Hover */
.shop .intro .styles a:hover{
    cursor: pointer;
    color: var(--main-color);
}

/* Sorting type Select Label */
.shop .intro .sorting-type label{
    font-size: 1.6rem;
    color: var(--black);
    margin-right: 0.5rem;
    padding-right: 0.5rem;
}

/* Sorting type Select dropdown */
.shop .intro .sorting-type select{
    font-size: 1.4rem;
    color: var(--grey);
    background-color: transparent;
    border: var(--border);
    border-radius: 0.5rem;
    padding: 1rem;
}

/*----- 03- Product-Item -----*/

/* Product Card */
.product-item{
    position: relative;
    overflow: hidden;
    -webkit-transition: all 1s ease;  
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease;  
    transition: all 1s ease; 
    background-color: var(--white);;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
	display: flex;
    flex-direction: column;
	height: 100%; /* Aby se přizpůsobila nejvyšší kartě */
    min-height: 100%; /* Zajistí stejnou minimální výšku pro všechny */

} 
  
/* Product Options */
.product-item .options{
    position: absolute;
    bottom: -20%;
    left: 0;
    right: 0;
    background: var(--white); 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; 
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    height: 4rem;
	border-top: 0.1rem solid var(--secondary-color);
    border-bottom: 0.1rem solid var(--secondary-color);
    border-right: 0.1rem solid var(--secondary-color);
    border-left: 0.1rem solid var(--secondary-color);
	z-index: 2; /* Zvýší vrstvení nad overlay */
}

/* Product Options Link */
.product-item .options a{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
    height: 4rem;
    border-right: 0.1rem solid var(--secondary-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; 
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	gap: 0.5rem; /* Mezera mezi ikonou a textem */
}

/* Product Options Last Link */
.product-item .options a:last-child{
    border: none;
}

/* Product Options Link Icon */
.product-item .options a i{ 
    height: 2rem;
    font-size: 2rem;
    color: var(--secondary-color);
    cursor: pointer;
}

.product-item .options span{ 
    font-size: 1.4rem;
    color: var(--secondary-color);
    cursor: pointer;
}

.product-item .options span:hover{ 
    font-size: 1.4rem;
    color: var(--white);
    cursor: pointer;
}

/* Product Options Link Icon, On Link Hover */
.product-item .options a:hover i{
    color: var(--white);
}

/* Product Options Link, On Hover */
.product-item .options a:hover{
    background-color: var(--secondary-color);
}

/* Product Image */
.product-item .image{
    position: relative;
    overflow: hidden;
	margin-bottom: 1rem; /* Mezera mezi obrázkem a obsahem */
}

/* Obrázek v produktu */
.product-item .image img{
    height: 25rem;
	transition: transform 0.3s ease, filter 0.3s ease; /* Přidáváme hladkou animaci */
	width: 100%; /* Zajistí, že obrázek pokryje celý kontejner */
    object-fit: cover; /* Zachová poměr stran, ale vyplní kontejner */
    object-position: bottom; /* Zarovná obrázek ke spodní hraně */
}


/* Efekt při hoveru na obrázek MT */
.product-item .image:hover img {
    transform: scale(1.1); /* Jemné zvětšení */
    filter: brightness(50%); /* Ztmavení obrázku */
}


/* Polo-transparentní overlay na 70 % obrázku */
.product-item .image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Overlay pokryje jen 70 % obrázku */
    background: rgba(0, 0, 0, 0.4); /* Poloprůhledný černý overlay */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1; /* Overlay bude pod tlačítky */
	pointer-events: none; /* Overlay neblokuje kliknutí */
}

/* Zobrazení overlay při hoveru */
.product-item .image:hover::before {
    opacity: 1;
}


/* Ikona lupy MT */
.product-item .image::after {
    content: '\f00e'; /* Font Awesome lupa s + */
    font-family: "Font Awesome 5 Free"; /* Zajistěte, že máte Font Awesome nahrané */
    font-weight: 900;
    color: white;
    font-size: 3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3; /* Lupa je nad overlayem i options */
    pointer-events: none; /* Umožňuje kliknutí na lupu */
}

/* Zobrazení lupy při hoveru */
.product-item .image:hover::after {
    opacity: 1; /* Lupa se zobrazí */
}

/* Product Content */
.product-item .content{
	padding: 1rem 2rem 3rem 2rem;
	flex-grow: 1; /* Umožní dynamické roztahování dle nejdelšího produktu */
}

/* Product name */
.product-item h3{
    font-size: 2rem;
    font-weight: 500;
    color: var(--black);
}

/* Product name, On Hover */
.product-item h3:hover{
    color: var(--secondary-color);
	transform: scale(1.05); /* Zvýšení velikosti o 5 % */
    transition: transform 0.3s ease, color 0.3s ease; /* Plynulý efekt */
}


/* Upravené stylování ceny */
.product-item .price{
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Zarovnání doprava */
    justify-content: flex-end; /* Přichycení ke spodní části */
    /*height: 100%;  Zajištění správného umístění */
	margin-top: auto; /* Posune cenu dolů na dno nejdelšího kontejneru */
	padding-bottom: 2rem; /* Odstup 2rem od spodního okraje */
}

.product-item .standard_price {
    font-size: 2rem;
    font-weight: 400;
    text-decoration: line-through;
    color: var(--main-color);
    padding-right: 2rem;
}

/* Styl slevy */
.product-item .discount {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--grey);
	padding-top: 0.5rem;
	padding-right: 2rem;
}

/* Styl akční ceny */

.product-item .sale_price {
    font-size: 3rem;
    font-weight: bold;
    color: var(--secondary-color);
    padding-top: 0.5rem;
	padding-right: 2rem;
    /*padding-bottom: 1rem;  Mezera pod cenou */
}

/* Styl jednotkove ceny */
.product-item .unit_price {
    font-size: 1.3rem;
    font-weight: 200;
    color: var(--primary-color);
	padding-right: 2rem;
}


/* -------- bude k vymazani --------
/* Product price 
.product-item .price p{
    font-size: 3rem;
    font-weight: bold;
    color: var(--secondary-color);
    padding: 0.5rem 0;
    text-align: right; /* Zarovná text doprava 
}

/* Product Discounted price 
.product-item .price span{ 
    font-size: 2rem;
    font-weight: 400;
    text-decoration: line-through;
    color: var(--main-color);
    padding-right: 0rem;
	padding-left: 2rem;
}

/*------ konec mazani ----- */

/* Product Rating */
.product-item .rating{
    font-size: 1.5rem;
    color: var(--main-color);
}

/* Show Product Options, On Product Card Hover  */
.product-item:hover .options{
    bottom: 0%;
}

/*----- 04- Shop-Title -----*/
.shoplist-title{
    background-color: var(--secondary-color);
    color: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    margin-bottom: 1rem;
}

/* Individual titles */
.shoplist-title h3{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
    font-size: 1.8rem;
    text-align: center;
}

/*----- 06- Cart-Summary -----*/
.cart-summary{
    background-color: var(--white);
    padding: 1rem;
}

/* Summary item */
.summary-item{
    display: -webkit-box;
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center; 
    -ms-flex-align: center;
    align-items: center;
    margin: 1rem 0;
    padding: 0.5rem 0; 
} 

/* Summary boxes */
.summary-item .box{
    font-size: 2rem;
    font-weight: bold;
    color: var(--black);
}

/* Summary Value */
.summary-item .value{
    font-weight: 500;
    color: var(--secondary-color);
}

/* Summary Btn */
.summary-list .btn{
    width: 100%;
    text-align: center;
    margin: 1rem 0;
}

/*----- 06- Quantity Box -----*/

/* Quantity box container */
.quantity.buttons_added {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 1px solid #ccc;
    height: 4rem;
    width: 11rem;
    margin: 0 auto;
}

/* Quantity box minus and plus buttons */
.quantity.buttons_added .minus,
.quantity.buttons_added .plus {
    width: 3rem;
    color: var(--black);
    cursor:pointer;
    background-color: var(--white);
}

/* Quantity box minus and plus buttons, On Hover */
.quantity.buttons_added .minus:hover,
.quantity.buttons_added .plus:hover {
    background: var(--main-color); 
    color: var(--white);
}

/* Quantity box input field  */
.quantity .input-text.qty {
    padding: 0 1rem;
    text-align: center;
    background-color: transparent;  
    border-right: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
} 
  
/* Quantity input field spin buttons */
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
  
/* Quantity box minus and plus buttons, On Focus */
.quantity.buttons_added .minus:focus,
.quantity.buttons_added .plus:focus {
    outline: none; 
}

/*--------------- PAGES ---------------*/
.shop .shop-container{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 75rem;
        flex: 1 1 75rem;
}

/*----- 1- Shop Grid -----*/
/* Product Container */
.shop .product-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* Product Container (Grid) */
.shop .product-container.grid{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(22rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1rem;
}


/*----- 2- Shop Standard -----*/
/* Product List Card */
.shop .product-container.list .product-item{
    width: 100%;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
}

/* Product List Image */
.shop .product-container.list .product-item .image{
    min-height: 25rem; 
    min-width: 25rem;
}

.shop .product-container.list .product-item .image img{
    width: 25rem;
}

/* Product List Content */
.shop .product-container.list .product-item .content{
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Product List Paragraph */
.shop .product-container.list .product-item .content > p{
    padding: 1rem 0;
}

/*----- 3- Product Details -----*/

/*-- Product Descriptions --*/
.product-details .product-des{
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap;
    -webkit-box-pack: center; 
    -ms-flex-pack: center;
    justify-content: center; 
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
    background-color: var(--white);
    padding: 2rem;
    margin-bottom: 3.5rem;
}

/*-- Product Image --*/
.product-details .product-des .image{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 40rem;
        flex: 1 1 40rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

/*-- Product Main Image Container --*/
.product-details .product-des .image-gallery-slide-wrapper .main{
    height: 40rem;
}

/*-- Product Image --*/
.product-details .product-des .image .image-gallery-slide-wrapper img.image-gallery-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Image Thumbnails Container */
.product-details .product-des .image .change-btns{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(8rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.7rem;
    margin-top: 1rem;
}

/* Product Image Thumbnail */
.product-details .product-des .image .change-btns img{
    border: 0.4rem solid var(--black);
    cursor: pointer;
}

/* Product Image Thumbnail, Active Effect */
.product-details .product-des .image .change-btns img.active{
    border-color: var(--main-color);
}

/* Product Content */
.product-details .product-des .content{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 40rem;
        flex: 1 1 40rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Product Title */
.product-details .product-des .content h3{
    font-size: 3rem;
    font-weight: 500;
    color: var(--black);
}

/* Product Introduction Section */
.product-details .product-des .content .intro{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0.5rem 0;
}

/* Product Rating */
.product-details .product-des .content .intro .rating{
    color: var(--main-color);
    font-size: 1.8rem;
}

/* Product Reviews */
.product-details .product-des .content .intro span{
    font-size: 2rem;
    padding-left: 1rem;
}

/* Product Price */
.product-details .product-des .content .price{
    font-size: 2rem;
    font-weight: bold;
    color: var(--secondary-color);
    padding-top: 1rem;
}

/* Product Discounted Price */
.product-details .product-des .content .price span{
    color: var(--grey);
    font-weight: lighter;
    text-decoration: line-through;
}

/* Product Paragraph */
.product-details .product-des .content p{
    padding-top: 1.5rem;
    font-weight: 400;
}

/* Product Cart Button */
.product-details .product-des .btn{
    margin-bottom: 1.5rem;
}

/* Product Quantity Section */
.product-details .qty{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 2rem 0;
    gap: 1rem;
    width: 20rem;
}

/* Product Quantity Text Section */
.product-details .qty .text{
    width: 15rem;
}

/* Product Quantity Section Heading */
.product-details .qty h4{
    font-size: 1.8rem;
    color: var(--black);
    font-weight: 500;
}

/* Product Categories and Tags Section */
.product-details .categories,
.product-details .tags{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 1rem;
}

/* Product Categories and Tags Title */
.product-details .categories h4,
.product-details .tags h4{
    font-size: 1.8rem;
    color: var(--black);
    font-weight: 500;
}

/* Product Categories and Tags Text */
.product-details .categories span,
.product-details .tags span{
    font-size: 1.6rem;
    color: var(--secondary-color);
    padding: 0 0.5rem;
}


/*-- 2- Related Products --*/
.related-items .box-container{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1rem;
}

/*----- 4- Wishlist -----*/

/* Wishlist Section */
.wishlist{
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    overflow-x: auto;
    overflow-y: hidden; 
}

/* Wishlist Section Scrollbar */
.wishlist::-webkit-scrollbar{ 
    height: 1rem;
}

/* Wishlist Container */
.wishlist .container{
    min-width: 90rem;
}

.wishlist .box-container{ 
    padding: 1rem;
}

/* Wishlist Item */
.wishlist-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 1rem;
    gap: 1rem;
}

/* Wishlist Item Box */
.wishlist-item .box{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
        flex: 1 1 20rem; 
    text-align: center; 
    font-size: 2rem;
    font-weight: 400;
    color: var(--black);
}

/* Wishlist Image */
.wishlist-item img{
    height: 15rem;
    width: 15rem;
    background-color:#f7f7f7;
}

/* Wishlist Name */
.wishlist-item .name{
    font-weight: 500;
}

/* Wishlist Price */
.wishlist-item .price{
    color: var(--grey);
    font-weight: 500;
}

/* Wishlist Actions */
.wishlist-item .action{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}

/* Wishlist icon */
.wishlist-item a{
    font-size: 2rem;
    cursor: pointer;
}

/* Wishlist Delete Icon */
.wishlist-item .fa-trash-alt{
    color: red;
}

/* Wishlist Cart Icon */
.wishlist-item .fa-shopping-cart{
    color: var(--main-color);
}

/* Wishlist icon, On Hover */
.wishlist-item a:hover{
    color: var(--black);
}


/*----- 5- Carts  ------*/

/* Shopping cart container */
.shopping-cart{
    background-color: var(--white);
    margin-bottom: 2rem;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    overflow-x:auto;
    overflow-y:hidden; 
}

/* Shopping cart container Scrollbar */
.cart .shopping-cart::-webkit-scrollbar{ 
    height: 1rem;
}

/* Shopping cart Container */
.cart .container{
    min-width: 90rem;
}

.cart .box-container{
    padding: 1rem;
}

/* Cart item */
.cart-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 1rem;
    gap: 1rem;
}

/* Cart item Box */
.cart-item .box{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 400;
    color: var(--black);
}

/* Cart Image */
.cart-item img{
    height: 15rem;
    width: 15rem;
    background-color:#f7f7f7;
}

/* Cart Name */
.cart-item .name{
    color: var(--black);
    font-weight: 500;
}

/* Cart icon */
.cart-item .icon{
    font-size: 2rem;
    cursor: pointer;
    color: red;
}

/* Cart icon, On Hover */
.cart-item .icon:hover{
    color: var(--black);
}

/* Cart Total */
.cart .cart-summary{
    width: 40rem;
    margin-left: auto;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    border-top: 0.3rem solid var(--secondary-color);
}


/*----- 6- Checkout -----*/

/*-- Checkout Section --*/
.checkout{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2rem;
}

/* Checkout item */
.checkout-item{
    padding: 2rem;
}

/* Checkout section, Box-1 container */
.checkout .box-1{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 66rem;
        flex: 1 1 66rem;
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

/* Checkout section, Box-2 container */
.checkout .box-2{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 33rem;
        flex: 1 1 33rem;
}

/*----- Payment Method -----*/
.payment-methods .payment{
    width: 100%;
    margin-bottom: 1.5rem;
}

/* Payment method label */
.payment-methods .payment label{
    cursor: pointer;
    font-size: 2rem;
    color: var(--black);
}

/* Payment method input */
.payment-methods .payment  input{
    margin-right: 0.5rem;
}

/* Selected/Highlighted payment method label */
.payment input:checked + label, 
.payment label:hover{ 
    color: var(--main-color);
}

/* Payment method body */
.payment .payment-body{ 
    display: none;
}

/* Payment method body paragraph */
.payment-methods .payment .payment-body p{
    line-height: 2;
}

/* Show payment method body when input is checked */
.payment > input:checked ~ .payment-body{ 
    display: block;
}

/* Active payment method body */
.payment-body.active{
    display: block;
}

/* Checkout Button */
.checkout .btn{
    width: 100%;
    text-align: center;
}

/*----- 7- Order List -----*/

/* Orderlist Section */
.order-list{
    background-color: var(--white);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    overflow-x: auto;
    overflow-y: hidden; 
}

/* Orderlist container Scrollbar */
.order-list::-webkit-scrollbar{ 
    height: 1rem;
}

/* Orderlist Container */
.order-list .container{
    min-width: 90rem;
}

/* Orderlist Item */
.orderlist-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 2rem 1rem;
    gap: 1rem;
}

/* Orderlist Item Box */
.orderlist-item .box{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    color: var(--black);
}

/* Orderlist Item "Cancelled" Status */
.orderlist-item .status.cancelled{
    color: red;
}

/* Orderlist Item "Processing" Status */
.orderlist-item .status.processing{
    color: var(--grey);
}

/* Orderlist Item "Completed" Status */
.orderlist-item .status.completed{
    color: green;
}

/* Orderlist icon */
.orderlist-item a{
    font-size: 2rem;
    cursor: pointer;
    color: var(--secondary-color);
}

/* Orderlist icon, On Hover */
.orderlist-item a:hover{
    color: var(--black);
}

/*----- 8- Order Details -----*/

/* Each Order Details Item */
.order-details .order-details-item{
    background-color: var(--white);
    padding: 2rem;
    margin-bottom: 1rem;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

/* Order Details Introduction */
.order-details-intro{
    display: -webkit-box; 
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1rem;  
}

/*-- 1- Order Summary --*/

/* Order Summary */
.order-details .order-summary{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 32rem;
        flex: 1 1 32rem;
}

/* Order Introduction */
.order-details .order-summary .order-intro{
    border-bottom: 0.2rem solid var(--grey);
}

/* Order ID */
.order-details .order-intro .order-id{
    font-size: 2rem;
    font-weight: bold;
    color: var(--black);
    padding-bottom: 1rem;
}

/* Delivery Date */
.order-details .order-intro .delivery{
    color: var(--grey);
    font-size: 1.8rem;
    padding-bottom: 1rem;
}

/*-- 2- Address Details --*/
.address-details{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 52rem;
        flex: 1 1 52rem;
}

/*-- 3-Order Items --*/
.order-items{
    overflow-x: auto;
    overflow-y: hidden; 
}

/* Order Items container Scrollbar */
.order-items::-webkit-scrollbar{ 
    height: 1rem;
}

/* Order Items Section */
.order-items .container{
    min-width: 90rem;
}

/* Order Item */
.order-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 1rem;
    gap: 1rem;
}

/* Order Item Box */
.order-item .box{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
        flex: 1 1 20rem; 
    text-align: center;
    font-size: 2rem;
    font-weight: 500; 
    color: var(--black);
}

/* Order Item Image */
.order-item img{
    height: 15rem;
    width: 15rem;
    background-color: #f7f7f7;
}

/*------------------------------ (05)-Shop (End) ------------------------------*/



/*------------------------------ (06)-Contact (Start) ------------------------------*/

/* Contact Container */
.contact .box-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 2rem;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    overflow: hidden;
} 
 
/*----- 1- Google Map -----*/
.contact iframe{ 
    -webkit-box-flex: 1;
    -ms-flex: 1 1 42rem;
        flex: 1 1 42rem;
}

/*----- 2- Contact Form -----*/
.contact-form{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 42rem;
        flex: 1 1 42rem;  
    padding: 2rem;
    background-color: var(--white);
}

/* Contact Form Input Field */
.contact-form .box{
    width: 100%;
    text-transform: none;
    color: var(--black);
    font-size: 1.6rem;
    border: 0.15rem solid rgba(0, 0, 0, 0.2);
    padding: 1.5rem 1rem;
    margin-bottom: 0.7rem;
}

/* Contact Form Input Field placeholder */
.contact-form .box::-webkit-input-placeholder{
    color: var(--grey);
    text-transform: capitalize;
}

.contact-form .box::-moz-placeholder{
    color: var(--grey);
    text-transform: capitalize;
}

.contact-form .box:-ms-input-placeholder{
    color: var(--grey);
    text-transform: capitalize;
}

.contact-form .box::placeholder{
    color: var(--grey);
    text-transform: capitalize;
}

/* Focused Contact Form Input Field */
.contact-form .box:focus{
    border-color: var(--main-color);
}

/* Contact Form Textarea */
.contact-form textarea{
    height: 15rem;
    resize: none;
}

/* Contact Form Textarea */
.contact-form .btn{
    margin-top: 1rem;
}

/* Contact form Alert Message */
.contact .alert{
    display: inline-block;
    font-size: 2rem;
    color: var(--main-color);
    padding-left: 1rem;
}

/*----- 3- Contact Info -----*/
.contact-info{
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    background-color: var(--white);
    padding: 2rem 0;
}

/* Contact info container */
.contact-info .info-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2rem;
    padding-top: 1rem;
}

/* Contact info item */
.contact-info .info-item{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 25rem;
        flex: 1 1 25rem;
    text-align: center;
}

/* Contact info item Icon */
.contact-info .info-item .icon-item{
    height: 6rem;
    width: 6rem;
    border-radius: 50%;
    background-color: var(--main-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0rem auto;
}

.contact-info .info-item i{
    font-size: 2.5rem;
    color: var(--white);
} 

/* Contact info item Heading */
.contact-info .info-item .content h4{
    font-size: 2.2rem;
    font-weight: 550;
    color: var(--black);
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}

/* Contact info item Details */
.contact-info .info-item .content p{
    text-transform: none;
}

/*------------------------------ (06)-Contact (End) ------------------------------*/



/*------------------------------ NEWS START---------------------------------------*/

.post-content ul {
	font-size: 1.6rem;
    	padding-bottom: 2rem;
	margin-left: 2rem;
}

/*------------------------------ NEWS END ----------------------------------------*/