main[data-template=shops]{--pp: max(12px, 3.25rem);padding-block-start:calc(var(--header-height) + var(--pp))}main[data-template=shops] .top{margin-block-end:max(22px,2.5rem)}@media (max-width: 780px){main[data-template=shops] .top{margin-block-end:12px}}main[data-template=shops] .top .dropdown sl-button{min-width:220px}main[data-template=shops] .top .wrapper{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #d8d8d8;padding-bottom:24px}@media (max-width: 780px){main[data-template=shops] .top .wrapper{flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:12px}}main[data-template=shops] .top .wrapper .left h1{line-height:1.1}main[data-template=shops] .top .wrapper .right{display:flex;align-items:center;flex-wrap:wrap;gap:max(12px,1.375rem)}@media (min-width: 780px){main[data-template=shops] .top .wrapper .right{justify-content:flex-end}}@media (max-width: 780px){main[data-template=shops] .top .wrapper .right{width:100%;display:grid;grid-template-columns:auto auto;column-gap:8px;row-gap:8px}}main[data-template=shops] .top .wrapper .right a{border-radius:var(--border);padding-inline:max(22px,2.5rem);padding-block:max(8px,.75rem);background-color:var(--bg, #fff);display:flex;align-items:center;gap:12px;cursor:pointer;will-change:background-color;transition:background-color .68s ease}@media (max-width: 780px){main[data-template=shops] .top .wrapper .right a{padding-inline:18px}}main[data-template=shops] .top .wrapper .right a svg{width:18px;height:auto}main[data-template=shops] .top .wrapper .right a span{display:inline-flex;font-size:var(--font-size-18);line-height:1}main[data-template=shops] .top .wrapper .right a span.text{color:var(--text-primary)}main[data-template=shops] .top .wrapper .right a.active{--bg: var(--Timberwolf)}main[data-template=shops] .top .wrapper .right a:hover{--bg: var(--Timberwolf)}main[data-template=shops] .top .wrapper .right button{padding-block:12px;padding-inline:22px 15px;font-size:var(--font-size-18);line-height:1;text-align:left;will-change:background-color;transition:background-color .48s ease;cursor:pointer}main[data-template=shops] .top .wrapper .right button:hover{background-color:var(--Timberwolf)}main[data-template=shops] .top .wrapper .right button:focus-visible{background-color:var(--ascent);color:#fff}main[data-template=shops] .content{padding-bottom:80px}main[data-template=shops] .content .wrapper{display:grid;grid-template-columns:repeat(5,1fr);gap:30px}@media screen and (max-width: 1900px){main[data-template=shops] .content .wrapper{grid-template-columns:repeat(auto-fit,minmax(296px,1fr))}}@media (max-width: 780px){main[data-template=shops] .content .wrapper{grid-template-columns:1fr}}main[data-template=shops] .shop-item{border-radius:var(--border);width:100%;overflow:hidden;cursor:pointer}main[data-template=shops] .shop-item h3{font-weight:700;padding-bottom:8px}main[data-template=shops] .shop-item .wrap{width:100%;height:100%;display:flex;flex-direction:column}main[data-template=shops] .shop-item .img-wrapper{background-color:var(--background-secondary);height:172px;display:flex;align-items:center;justify-content:center;position:relative}main[data-template=shops] .shop-item .img-wrapper .status{position:absolute;bottom:18px;left:24px;display:inline-flex;gap:8px;align-items:center}main[data-template=shops] .shop-item .img-wrapper .status span.dot{display:inline-flex;width:8px;height:8px;border-radius:50%;background-color:var(--Silver, #A5A5A5)}main[data-template=shops] .shop-item .img-wrapper .status span.dot.active{background-color:var(--Japanese-Laurel, #397828)}main[data-template=shops] .shop-item .img-wrapper .status span.text{font-size:var(--font-size-14);line-height:1;color:var(--text-primary)}main[data-template=shops] .shop-item .img-wrapper img{max-width:140px;max-height:90px;width:100%;object-fit:contain;object-position:center;will-change:transform;transition:transform .48s ease;transform:scale(var(--sc, 1))}main[data-template=shops] .shop-item .info{padding:28px;flex-grow:1;border-radius:0 0 20px 20px;background:#f8f8f8fc;display:flex;flex-direction:column}main[data-template=shops] .shop-item .info .description{padding-bottom:24px}main[data-template=shops] .shop-item .info .description p{color:var(--text-secondary)}main[data-template=shops] .shop-item .info .dates{padding-bottom:40px;display:flex;flex-direction:column;gap:12px}main[data-template=shops] .shop-item .info .dates .date{display:grid;grid-template-columns:48px 1fr}main[data-template=shops] .shop-item .info .dates .date p{font-size:var(--font-size-16);line-height:1;color:var(--text-secondary)}main[data-template=shops] .shop-item .info .dates .date p.label{font-weight:700}main[data-template=shops] .shop-item .info .btn-group{margin-top:auto;width:100%;display:flex;align-items:center}main[data-template=shops] .shop-item .info .btn-group .right{display:flex;align-items:center;gap:12px}main[data-template=shops] .shop-item .info .btn-group .right span{display:flex;align-items:center}main[data-template=shops] .shop-item .info .btn-group .right>div{display:flex;align-items:center;gap:4px}main[data-template=shops] .shop-item .info .btn-group .right{margin-right:auto;padding-right:6px}@media (hover: hover) and (pointer: fine){main[data-template=shops] .shop-item:hover{--sc: 1.05}}
