/* --- 1. GLOBAL BACKGROUND --- */
body {
    /* Linear Gradient 0.7 */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
        url('https://www.sojkovie.cz/user/documents/upload/Helper/Background_v1.jpg') !important;
        
    background-attachment: fixed !important;
    background-repeat: repeat !important;
    background-size: 100% auto !important;
    background-position: center 0px;
    
    font-family: 'Montserrat', sans-serif !important;
    color: #4a4a4a; 
}

/* Make content wrappers transparent */
.content-wrapper, 
.site-wrapper, 
#content, 
.content-inner, 
.container, 
.box {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* --- 2. HEADINGS --- */
h1, h2, h3, .p .name, .categories-overview h3 {
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 600;
}

/* --- 3. ROUNDED UI --- */
.btn, 
.form-control, 
.navigation-in ul li a,
.add-to-cart-button,    
.quantity,              
.quantity input,        
.quantity .increase,    
.quantity .decrease     
{
    border-radius: 30px !important;
    border-width: 2px !important;
}

.quantity
{
    border-color: #C4B79C !important;
}

.quantity .increase,    
.quantity .decrease   
{
    color: #C4B79C !important;
}


/* --- 4. PRODUCT GRID --- */
.p {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center !important; 
    padding: 0 !important; 
    
    /* NO border radius for the main panel */
    border-radius: 0 !important; 
}

.p .image {
    overflow: hidden !important; 
/*    border-radius: 20px; */
    transform: translateZ(0); 
    -webkit-mask-image: -webkit-radial-gradient(white, black);
/*    margin-bottom: 10px;*/
    background: #ffffff; 
}

.p .image img {
    transition: transform 1s ease-in-out !important; 
    transform-origin: center center;
    width: 100%;
}

/* ZOOM EFFECT */
.p:hover .image img {
    transform: scale(1.08); 
}

/* --- 5. TEXT STYLING (CENTERED) --- */
.p .name {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    margin-top: 10px;
}

.p .price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #4a4a4a; 
}

/* --- 6. BUTTON STYLING --- */

/* Group A: Beige Buttons (Grid & Detail Page Main Button) */
.btn-cart, 
.add-to-cart-button {
    background-color: #C4B79C !important;
    border-color: #C4B79C !important;
    color: #fff !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 25px;
}

.btn-cart:hover, 
.add-to-cart-button:hover {
    background-color: #A89B82 !important; 
    border-color: #A89B82 !important;
}

.p .btn-cart {
    margin-top: 15px;
}

/* Group B: The ".add-to-cart" class (NO BACKGROUND) */
.add-to-cart {
    background-color: transparent !important; /* Removed background */
    box-shadow: none !important;
    
    /* Since background is gone, we need Dark Text to see it */
    color: #4a4a4a !important; 
    
    /* Optional: Keep a thin border so it still looks clickable */
/*    border: 1px solid #C4B79C !important;*/
    
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 25px;
    border-radius: 30px !important;
}

.add-to-cart:hover {
    color: #C4B79C !important; /* Text turns beige on hover */
    background-color: #fff !important; /* Optional: Slight white bg on hover */
}

/* --- 7. HEADER & FOOTER --- */
#header {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border-bottom: none !important;
}

#footer {
    background: rgba(255, 255, 255, 0.9) !important;
}