﻿.products {
    --product-col: 3;
    display: grid; grid-template-columns: repeat(var(--product-col), 1fr); grid-gap: 24px; }
@media screen and (width < 576px) { .products { --product-col: 2; } }
.product { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.product-img img { max-width: 100%; }
.product-price { color: #000; font-size: 18px; font-weight: 500; }
.product-brand { color: #aaa; font-weight: 700; text-transform: uppercase; }
.product-name { font-weight: 400; }

.acat{
    /*padding: 0px 0px;*/
    color: #179296;
    font-size: 12px;
    font-weight: 400;
    text-transform: lowercase;
    /*border-bottom: 1px solid #179296;*/
}

/*
.breadcrumb li{
    color: #179296;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
*/
ul.breadcrumb { list-style: none; }
ul.breadcrumb li { display: inline-block; /*margin: 0; padding: 0;*/ color: #68707f; font-size: 14px; font-weight: 300; line-height: normal; text-transform: lowercase; }
ul.breadcrumb li.sp { padding: 0px 5px; font-size: 10px; }
ul.breadcrumb li a { color: #68707f; text-decoration: none; }
ul.breadcrumb li a:hover { color: #e995af; border-bottom: 1px solid #e995af; }


.brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 0px 16px; list-style: none; }
.brands li { margin: 0; padding: 4px 8px; }
.brands li a { display: block; text-decoration: none; }
.brands li:hover { background-color: var(--bg-color); }
.brands li:hover a { color: #008f82; }
.brands li a span { float: right; color: #000; font-size: 12px; font-weight: 300; }

.shop{ display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 24px; align-items: start; }
.shop > * { text-align: center; }
.shop img { display: block;max-width: 100%; margin-bottom: 4px; border-radius: 8px; aspect-ratio: 1/1; object-fit: cover; transition: filter 0.3s ease; }
.shop img:hover { filter: grayscale(0%); }
.shop span { color: #777; font-size: 12px; font-weight: 700; text-transform: uppercase; }