section.categories { margin: 0; padding: 0 0 20px; background: var(--bgr-main); border-top: 1px solid rgba(var(--overlay),0.08); border-bottom: 1px solid rgba(var(--overlay),0.08); } section.categories > ul { pointer-events: none; } section.categories > section { padding: 0 10px; width: 100%; max-width: 430px; margin: 0 auto; box-sizing: border-box; } section.categories > section > .selected label { display: block; line-height: 36px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 0 0 12px; box-sizing: border-box; cursor: pointer; color: var(--clr-link); } @media (hover: hover) { section.categories > section > .selected label:hover { background: rgba(var(--overlay), 0.07); } } section.categories > section > .selected label:active { background: rgba(var(--overlay), 0.15); } section.categories > section > .selected label .icon { background: var(--clr-link); margin: -2px 2px 0 0; border-radius: 5px; border: 4px solid var(--clr-link); transform: scale(0.9); transform-origin: left center; color: #fff; } section.categories > section > .available a { display: block; line-height: 36px; text-align: left; position: relative; padding: 0 50px 0 44px; box-sizing: border-box; } section.categories > section > .available.noIcons a { padding-left: 12px; } section.categories > section > .available a.on { color: var(--clr-link); } section.categories > section.hasSelCat > .available a { margin-left: 24px; } @media (hover: hover) { section.categories > section > .available a:hover { background: rgba(var(--overlay), 0.07); } } section.categories > section > .available a:active { background: rgba(var(--overlay), 0.15); } section.categories > section > .available a .icon { position: absolute; left: 12px; top: 7px; } section.categories > section > .available.noIcons a .icon { display: none; } section.categories > section > .available a strong { display: block; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } section.categories > section > .available a small { position: absolute; right: 8px; top: 0; bottom: 0; font-size: 0.75em; } section.tabs.stores-results.noTabs { border-top: 1px solid rgba(var(--overlay),0.08); } section.storesList { display: inline-grid; gap: 35px; margin: 5px auto 10px; position: relative; } section.tabs > section.storesList.on { display: inline-grid; } section.storesList.loading { cursor: wait; } section.storesList.loading::after { content: ""; display: block; min-width: 60px; min-height: 60px; background: var(--loadingSVG) no-repeat center / 50px; opacity: 0.8; cursor: wait; grid-column: 1/-1; } section.storesList.loading-reset::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(2px) saturate(50%); -webkit-backdrop-filter: blur(2px) saturate(50%); z-index: 1; cursor: wait; } section.storesList.loading.loading-reset::after { position: absolute; inset: 0 0 auto; z-index: 1; cursor: wait; } section.storesList .alert { max-width: none; grid-column: 1/-1; align-self: start; } .storeListItem { text-align: left; overflow: hidden; width:100%; } .storeListItem h3 { margin: 0 0 7px; } .storeListItem h3 a { vertical-align: middle; } @media (hover: hover) { .storeListItem h3 a:hover { text-decoration: underline; text-decoration-style: dotted; } } .storeListItem h3 a:active { text-decoration: underline; } .storeListItem h3 .fav-control { margin: 0 0 0 5px; } .storeListItem h4 { margin: 0 0 7px; font-size: 0.9em; font-weight: normal; } .storeListItem .rating { margin: 0 0 15px; font-size: 0.85em; } .storeListItem .rating > div { width: 80px; } .storeListItem .itS-main { display: flex; flex-flow: row nowrap; gap: 15px; margin: 15px 0 0; } .storeListItem .itS-main .itS-image { display: block; width: 170px; height: 120px; background: rgba(0,0,0,0.08) none no-repeat center / cover; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); flex-shrink: 0; border-radius: 3px; } @media (hover: hover) { .storeListItem .itS-main .itS-image:hover { box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); } } .storeListItem .itS-main .itS-image:active { box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); } .storeListItem .itS-main .itS-image.no-image { position: relative; display: flex; flex-flow: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.08); } .storeListItem .itS-main .itS-image.no-image::before { content: "🖾"; font-size: 2em; opacity: 0.4; } .storeListItem .itS-main .itS-image.no-image::after { content: "няма снимка"; font-size: 0.6em; font-weight: bold; padding: 0 0 5px; opacity: 0.4; } .storeListItem.itS-type-online .itS-main .itS-image.no-image::before { content: "🛒"; } .storeListItem.itS-type-online .itS-main .itS-image.no-image::after { content: "онлайн магазин"; } @media (prefers-color-scheme: dark) { .storeListItem .itS-main .itS-image.no-image { background: rgba(0,0,0,0.2); } .storeListItem .itS-main .itS-image.no-image::before { opacity: 0.2; } .storeListItem .itS-main .itS-image.no-image::after { opacity: 0.2; } } .storeListItem .itS-main .itS-extras { margin: 10px 0 0; text-align: center; } .storeListItem .itS-main .itS-meta { display: flex; flex-flow: column nowrap; gap: 10px; font-size: 0.9em; overflow: hidden; } .storeListItem .itS-main .itS-meta > div { display: flex; flex-flow: row nowrap; } .storeListItem .itS-main .itS-meta > div em.icon { margin: 3px 8px 0 0; } .storeListItem .itS-main .itS-meta > div.website { } .storeListItem .itS-main .itS-meta > div.website a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .storeListItem .itS-main .itS-meta > div.website a span { vertical-align: middle; padding: 1px 0 0; } .storeListItem .itS-main .itS-meta > div.address .long { font-size: 0.85em; padding: 1px 0 0; } @media (min-width: 460px) { .storeListItem .itS-main .itS-image { width:220px; height:150px; } } @media (min-width: 1000px) { section.storesList { grid-template-columns: 1fr 1fr; gap: 50px; padding: 20px 50px !important; width: 100%; max-width: var(--max-width); } } /*@media (min-width: 1600px) { section.storesList { grid-template-columns: 1fr 1fr 1fr; } }*/ .coolMessage .storeListItem .itS-main .itS-meta > div em.icon { opacity: 0.9; }