.category-info {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
margin-bottom: 20px;
padding: 20px;
}
.category-header h1 {
font-size: 2em;
margin: 0;
color: #0DB0FF;
text-align: center;
font-family: inherit;
}
.category-header .category-description {
margin-top: 10px;
font-size: 1em;
font-family: inherit;
} .filter-by-specs {
padding: 0 10px;
text-align: left;
max-width: 100%; font-family: inherit;
box-sizing: border-box; }
.filter-by-specs h3 {
margin-bottom: 15px;
font-size: 1em;
text-align: center;
} #tne-filter-sidebar-form {
display: flex;
flex-direction: column;
gap: 15px; } .filter-group {
display: flex;
flex-direction: column; gap: 5px; } .filter-group select {
width: 50%;
padding: 5px;
font-size: 0.9em;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
} #tne-filter-sidebar-form button,
#tne-filter-sidebar-form .reset-filters-button {
margin-top: 10px;
padding: 8px 12px;
font-size: 1em;
cursor: pointer;
text-align: center;
border: 1px solid #111;
border-radius: 4px;
background-color: #f5f5f5;
color: #111;
transition: background-color 0.3s ease;
}
#tne-filter-sidebar-form button:hover,
#tne-filter-sidebar-form .reset-filters-button:hover {
background-color: #ddd;
} .reset-filters-button {
display: inline-block;
text-decoration: none;
}
.reset-filters-button svg {
width: 12px;
height: 12px;
vertical-align: middle;
margin-left: 4px;
} .product-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 10px;
margin: 10px;
min-height: 375px;
border: 1px solid transparent;
border-radius: 8px;
box-shadow: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
font-family: inherit;
} .product-image-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 350px; } .product-image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
border-radius: 5px;
transition: transform 0.2s ease;
} .product-card .title-container {
position: relative;
display: inline-block;
} .product-card .hover-bar {
position: absolute;
bottom: -5px; left: 50%;
transform: translateX(-50%);
width: 30%; height: 2px;
background-color: #0DB0FF; transition: all 0.3s ease-in-out;
opacity: 0;
} .product-card:hover .hover-bar {
width: 100%; opacity: 1; } .product-card h3.woocommerce-loop-product__title {
font-size: 1rem;
margin-top: auto;
color: #333;
font-weight: 500;
transition: all 0.2s ease-in-out;
} .product-carousel-container {
display: flex;
overflow: hidden;
width: 100%;
position: relative; padding: 2rem 0;
min-height: 400px;
margin: 0 auto;
}
.product-carousel {
flex: 0 0 100%;
display: flex;
justify-content: center;
transition: transform 0.3s ease-in-out;
}
.carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px; height: 40px; cursor: pointer;
color: #666; font-size: 2rem;
background-color: transparent;
border: none !important;
transition: all 0.3s ease-in-out;
z-index: 10;
} .carousel-nav.prev {
left: -10px;
}
.carousel-nav.next {
right: -10px;
} .carousel-nav:not(:disabled):hover {
color: #0DB0FF; } .carousel-nav:disabled {
opacity: 0.3;
cursor: not-allowed;
color: #ccc; } .related-products {
padding: 2rem 0 0 0;
}
.related-products .title {
font-size: 26px;
font-weight: bold;
} .product-page-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 10px;
margin: 0 auto;
max-width: 40vw;
box-sizing: border-box;
} .product-page-image-container {
width: 100%;
height: 82vh;
display: flex;
align-items: center;
justify-content: center;
} .product-page-image-container img {
width: 100%;
height: 100% !important;
object-fit: contain;
display: block;
margin: 0 auto;
} @media (max-width: 768px) { .product-card {
max-width: 90%; padding: 8px;
margin: 5px;
}
.product-page-card {
max-width: 90vw;
} .product-carousel {
flex-wrap: wrap; justify-content: center;
} .product-slide {
width: 50%; } .filter-by-specs {
padding: 10px;
font-size: 0.9em;
}
.filter-group select {
width: 100%; } .carousel-nav {
width: 30px;
height: 30px;
font-size: 1.5rem;
}
.carousel-nav.next,
.carousel-nav.prev {
top: 90%;
}
.carousel-nav.next {
right: 0;
}
.carousel-nav.prev {
left: 0;
}
.category-info {
display: flex;
flex-direction: column; gap: 1rem; text-align: center; }
.category-info .button {
align-self: center; }
}