body {
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;

}

/* Unified category-card artwork: show the complete product image without cropping. */
.catalog-category-card {
    overflow: hidden;
}

.catalog-category-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 220px;
    padding: 18px 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    border-bottom: 1px solid #eef2f6;
    overflow: hidden;
}

.catalog-category-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease;
}

.catalog-category-card:hover .catalog-category-image {
    transform: scale(1.025);
}

.catalog-category-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.catalog-category-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 112px;
    padding: 1.25rem 1rem;
}

.catalog-category-body .card-title {
    margin: 0;
    line-height: 1.28;
}

.catalog-category-body .card-title + small {
    margin-top: 0.45rem;
}

@media (max-width: 575px) {
    .catalog-category-media {
        height: 205px;
        padding: 16px 20px;
    }
}





/* Ensure the sidebar is positioned relative for correct subcategory positioning */


.container .row {
    display: flex; /* Ensure the row layout is flexible */
}





/* Sidebar Layout */
.sidebar {
    position: relative;

}
/* Style the subcategory block in sidebar */
.subcategory-list {
    display: block;
    position: static;
    width: auto;
    max-width: 100%;
    margin-top: 0.5rem;
    padding: 0.25rem 0 0.25rem 1rem;
    background-color: transparent;
    box-shadow: none;
    border-left: 2px solid #e5e7eb;
}

/* Style the links within the subcategory list */
.subcategory-list .nav-link {
    display: block;
    padding: 0.5rem 1rem; /* Adjust padding as needed */
    color: #333; /* Link color */
    text-decoration: none;
}

.subcategory-list .nav-link:hover {
    background-color: #e9ecef; /* Background color on hover */
}
/* Flex items for subcategories */
.subcategory-list > div {
    flex: 1 1 calc(33.333% - 10px); /* Three items per row, adjust for gap */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Ensure images and text are properly aligned */
.subcategory-list img {
    width: 25px;
    height: 25px;
    object-fit: cover; /* Cover the container */
}
/* Ensure consistent alignment of image and text */
.sidebar .nav-link {
    display: flex; /* Flexbox layout to align items horizontally */
    align-items: center; /* Align image and text vertically */
    gap: 10px; /* Space between image and text */
    text-decoration: none; /* Remove underline */
    color: #333; /* Text color */
}

.sidebar .nav-link img {
    flex-shrink: 0; /* Prevent image from resizing */
    width: 40px; /* Set fixed size for image */
    height: 40px;
    object-fit: cover; /* Maintain aspect ratio */
    border-radius: 5px; /* Optional for rounded corners */
}

.sidebar .nav-link .category-name {
    display: block; /* Ensure the text block behaves consistently */
    line-height: 1.5; /* Adjust line height for readability */
    word-wrap: break-word; /* Handle long words gracefully */
    flex-grow: 1; /* Allow the text to grow and wrap properly */
}
/* Sidebar Layout */




/* icons info */

.contact-icon {
    width: 24px;   /* Set width of the icon */
    height: 24px;  /* Set height of the icon */
    vertical-align: middle;  /* Align icons with text */
    margin-right: 5px;  /* Add space between icon and text */
}
/* Sidebar Layout */





/* icons info */

/* General Header Styling */
header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
}

.logo {
    max-width: 400px;
    height: auto;
}

.contact-info {
    font-size: 13px;
    color: #555;
}

.contact-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}


.beautiful-phrase {
        font-size: 1 rem; /* Increase the size slightly for emphasis */
        color: #333; /* Use a slightly darker color for better readability */
        font-weight: 500; /* Medium weight for emphasis */
        line-height: 1.5; /* Add line spacing for better readability */
        text-align: center; /* Center the text if applicable */
        margin-top: 10px;
    }

.beautiful-phrase .highlight {
        color: #007bff; /* Use a different color for emphasis (e.g., blue) */
        font-weight: bold; /* Bold for the highlighted part */
    }

    /* Optional: Add a subtle shadow or other visual effects */
.beautiful-phrase {
        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    }




.contact-description {
    font-size: 15px;
    color: #666;
}

.search-bar {
    width: 100%;
    max-width: 250px;
}

/* Navbar Styling */
.navbar {
    padding: 0;
}

.navbar-nav .nav-item .nav-link {
    color: #007bff; /* Blue color that stands out */
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-weight: 500; /* Make it slightly bold to grab attention */
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth color and underline transition */
}

/* Hover Effect to Make Links More Clickable */
.navbar-nav .nav-item .nav-link:hover {
    color: #000000; /* Darker blue to indicate it's clickable */
    text-decoration: underline; /* Add an underline when hovering to suggest it's clickable */
}

/* Optional: Active state to highlight the current page */
.navbar-nav .nav-item .nav-link.active {
    color: #004085; /* Even darker color for the active page link */
    font-weight: 700; /* Make it bold to show it's the current page */
    text-decoration: underline; /* Underline to indicate the active state */
}

/*
.navbar-nav .nav-item .nav-link {
    color: #007bff;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.navbar-nav .nav-item .nav-link:hover {
    color: #0056b3;
    text-decoration: underline;
}
*/



.btn-outline-success {
    font-size: 13px;
    padding: 0.3rem 0.6rem;
}






/* Search Bar */
.site-search-form {
    margin-bottom: 1rem; /* Space below the search bar */
    margin-right: 20px; /* Отступ справа для всех экранов */

}

/* Align search bar to the right */
.site-search-form {
    display: flex;
    justify-content: flex-end; /* Align search bar to the right */
}




/* Main Product Image - Adjust the size */
/* Main Product Image */
.main-product-img {
    max-width: 90%;  /* Smaller width for the main image */
    height: auto;
    display: block;
    margin: 0 auto;  /* Centers the main image */
/*    margin-top: 20px*/
}


/* Gallery Thumbnails */
.gallery-thumbnails-container {
    margin-top: 15px;
}

.gallery-thumbnails {
    display: flex;
    justify-content: space-between;
    gap: 10px;  /* Space between thumbnails */
}

.thumbnail-img {
    width: 100px;
    height: 100px;
    object-fit: contain;   /* ✅ fully fit image inside box without cutting */
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;  /* ✅ optional: keeps clean white background */
    padding: 5px;             /* ✅ optional: adds nice breathing space */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease-in-out;
}

.thumbnail-img:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
@media (max-width: 576px) {
    .main-product-img {
        width: 100%;
    }

    .thumbnail-img {
        width: 70px;
        height: 70px;
    }
}

/* Product Title and Description Smaller */
.product-title {
    font-size: 1.5rem;  /* Smaller font size for the title */
}

.product-description {
    font-size: 1rem;  /* Smaller font size for the description */
}

.product-characteristics-title {
    font-size: 1.25rem;  /* Smaller font size for the characteristics title */
}

.product-characteristics-list {
    font-size: 0.95rem;  /* Smaller font size for characteristics list */
}

/* Adjustments for mobile screens (max-width: 576px) */
@media (max-width: 576px) {
    .main-product-img {
        max-width: 50%;  /* Even smaller image on mobile */
    }

    .product-title {
        font-size: 1.25rem;  /* Smaller title on mobile */
    }

    .product-description {
        font-size: 0.875rem;  /* Smaller description on mobile */
    }

    .product-characteristics-title {
        font-size: 1rem;  /* Adjust characteristics title size */
    }

    .product-characteristics-list {
        font-size: 0.85rem;  /* Adjust characteristics list size */
    }
}

/* header bar the upper logo and contacts */


.header-section {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

.header-logo {
    max-width: 150px;
    height: auto;
}

.company-description {
    font-size: 14px;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

.contact-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.contact-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
}

.contact-icon {
    margin-right: 8px;
    color: #007bff;
}

.contact-link {
    text-decoration: none;
    color: #007bff;
}

.contact-link:hover {
    text-decoration: underline;
}


/* Navigation */
.navbar {
    padding: 0.5rem 1rem;
}

.navbar-nav {
    flex-direction: row;
}

.nav-item {
    margin-right: 1rem;
}

.nav-link {
    color: #343a40;
    font-size: 1rem;
}

.nav-link:hover {
    color: #007bff;
}

/* header bar the upper logo and contacts */





/* Responsive adjustments */
@media (max-width: 991px) {
    .navbar-contact-info {
        display: none;
    }

    .d-lg-none {
        display: flex;
    }
}

@media (max-width: 767px) {
    .navbar-nav {
        flex-direction: column;
    }

    .nav-item {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .navbar-toggler {
        margin-bottom: 0.5rem;
    }
}



/*  search bar is visible on small screens */
@media (max-width: 767px) {
    .search-bar {
        padding: 5px 0;  /* Reduce padding for smaller screens */
    }

    .d-inline-flex {
        flex-direction: column;  /* Stack input and button vertically */
    }

    .site-search-form .btn {
        margin-top: 5px;  /* Add space between input and button */
    }

    .justify-content-end {
        justify-content: center !important;  /* Center search bar on small screens */
    }
}

/* Large screens (min-width: 992px) */
@media (min-width: 992px) {
    .d-lg-none {
        display: none;
        justify-content: center;  /* Ensure proper alignment (if needed elsewhere) */
    }
}
/* Small screens (max-width: 767px) */
@media (max-width: 767px) {
    #searchForm {
        display: none;  /* Hide the search form on small screens */
    }

    #searchIcon {
        display: flex;  /* Show the search icon on small screens */
        cursor: pointer;  /* Add a pointer cursor for the clickable icon */
    }
}

/* Large screens (min-width: 768px) */
@media (min-width: 768px) {
    #searchForm {
        display: flex;  /* Show the search form on large screens */
    }

    #searchIcon {
        display: none;  /* Hide the search icon on large screens */
    }
}



/* Product Grid Section */
.product-grid {
    padding: 2rem 1rem;
    background-color: #f9f9f9;
}

.product-card {
    border: 1px solid #ddd;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.product-card .card-img-top {
    max-height: 200px;
    object-fit: cover;
}

.product-card .img-placeholder {
    height: 200px;
}

.card-price {
    font-size: 1.2rem;
}














.navbar-brand img {
  max-height: 50px;
  width: auto;
  transition: opacity 0.2s ease;
}


/* Button Hover Animation */
.btn-primary {
    transition: all 0.3s ease-in-out;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}






/* Sidebar responsiveness */
/* Adjust for mobile */
@media (max-width: 767px) {
    .sidebar {
        margin-top: 10px;
        padding: 0.5rem;
    }
    .subcategory-block {
        width: 100%;
        left: 0;
    }
}

/* Product cards */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: inherit;
    padding: 0;
    height: 100%; /* Ensures all cards have equal height */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card img {
    width: 100%;               /* Makes the image responsive */
    height: 150px;             /* Consistent height for images */
    object-fit: contain;       /* Preserve the aspect ratio of the image */
    border-radius: 5px;
    margin-bottom: 10px;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.card h3 {
    font-size: 1.1rem;
    margin: 10px 0;
    transition: color 0.3s ease;
}

.card:hover h3 {
    color: #007bff;
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}



/* Ensure the container uses full width and does not have extra padding */
.related-posts-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between items */
    margin-top: 20px;
    width: 100%; /* Full width */
    padding: 0; /* Remove padding if any */
    box-sizing: border-box; /* Ensure padding and border are included in width */
}

/* Ensure each item takes full width on mobile */
.related-post-item {
    width: calc(25% - 10px); /* Default for larger screens */
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px;
    background-color: #f9f9f9;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

/* Hover effect */
.related-post-item:hover {
    transform: scale(1.05);
}

/* Image styling */
.related-post-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 5px;
}

/* Title styling */
.related-post-title {
    font-size: 1rem;
    margin-top: 8px;
    color: #333;
    text-decoration: none;
}

/* Hover effect on title */
.related-post-title:hover {
    color: #007bff;
}

/* Responsive adjustments for small screens */
@media (max-width: 767px) {
    .related-posts-container .related-post-item {
        width: 100%;
        margin-bottom: 15px;
    }
}


/* Category container */
.category-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.category-image {
    flex: 1;
    max-width: 300px;
    margin-right: 20px;
}

.category-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.category-description {
    flex: 2;
}

.category-description p {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
}

/* Responsive settings for product cards */
@media (max-width: 1024px) {
    .col-md-4 {
        width: 33.33%;
    }
}

@media (max-width: 767px) {
    .col-md-4 {
        width: 50%;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .col-md-4 {
        width: 100%;
    }
}

@media (max-width: 991px) {
    .card {
        width: 100%;
        margin-bottom: 15px;
    }
}
/* Full width for product cards on small screens */
@media (max-width: 767px) {
    .card {
        width: 100%; /* Ensure card takes up full width on small screens */
        margin-bottom: 15px;
    }

    .col-md-12 {
        flex: 0 0 100%; /* Force column to be 100% width */
        max-width: 100%;
    }
}

/* Default width for larger screens */
@media (min-width: 768px) {
    .card {
        width: auto; /* Restore normal width for larger screens */
    }
}

/* Relative cards products in blog */
/* Full width for small screens */
@media (max-width: 767px) {
    .col-md-4 .row .col-md-12 {
        width: 100%; /* Full width for the product cards on small screens */
    }
}

/* For larger screens, let Bootstrap handle the layout */
@media (min-width: 768px) {
    .col-md-4 .row .col-md-12 {
        width: auto; /* Use the original width for larger screens */
    }
}
/* Relative cards products in blog */