in the header, chips in the drawer */
.lang {
position: relative;
}
.lang__btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 44px;
min-height: 44px;
padding: 0 10px;
border-radius: var(--r-m);
color: var(--text);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
list-style: none;
}
.lang__btn::-webkit-details-marker {
display: none;
}
.lang__btn:hover,
.lang[open] .lang__btn {
background: var(--chip);
}
.lang__btn .lang__name {
display: none;
}
.lang__menu {
position: absolute;
z-index: 60;
top: calc(100% + 8px);
right: 0;
min-width: 260px;
padding: 8px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
box-shadow: var(--shadow);
white-space: normal;
}
.lang__menu .lang__item {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
min-height: 44px;
padding: 0 10px;
border: 0;
border-radius: var(--r-s);
background: transparent;
color: var(--text);
font: inherit;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.lang__menu .lang__item:hover {
background: var(--soft);
color: var(--link);
}
.lang__menu .lang__item.active {
background: var(--soft);
color: var(--link);
cursor: default;
}
.lang__item small {
color: var(--muted);
font-size: 12px;
font-weight: 600;
}
.lang-drawer .lang__form {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 6px 16px 8px;
}
.lang-drawer .lang__item {
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--card);
color: var(--text);
font: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.lang-drawer .lang__item:hover {
border-color: var(--primary);
color: var(--link);
}
.lang-drawer .lang__item.active {
border-color: var(--primary);
background: var(--soft);
color: var(--link);
cursor: default;
}
/* Cart button: main2.min.js writes the count into every `.basket-btn span` */
.basket-btn {
background: var(--primary);
color: #fff;
}
.basket-btn:hover,
.basket-btn.active {
background: var(--primary-hover);
color: #fff;
}
.basket-btn.disabled {
cursor: default;
}
.basket-btn__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.basket-btn span {
position: absolute;
top: -5px;
right: -5px;
min-width: 20px;
padding: 0 5px;
border: 2px solid var(--card);
border-radius: 10px;
background: var(--accent);
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 16px;
text-align: center;
}
.basket-btn.disabled span {
display: none;
}
/* Search: one form for every width (main2.min.js binds `.search-panel input`) */
.fixed-menu .search-panel {
/* main2.min.js hides .search-panel with inline display:none on every document click */
display: flex !important;
position: relative;
order: 5;
flex: 1 1 100%;
align-items: center;
min-width: 0;
min-height: 44px;
margin: 0;
padding: 0 4px;
border-radius: var(--r-m);
background: var(--chip);
color: var(--muted);
}
.fixed-menu .search-panel:focus-within {
box-shadow: inset 0 0 0 2px var(--primary);
}
.fixed-menu .search-panel input {
flex: 1 1 0;
min-width: 0;
padding: 10px 4px;
border: 0;
background: transparent;
color: var(--text);
outline: none;
}
.fixed-menu .search-panel input::placeholder {
color: var(--muted);
opacity: 1;
}
/* the magnifier is the form's submit button; no .search class: main2.min.js cancels clicks on .fixed-menu .simple .search */
.fixed-menu .search-panel .search-panel__submit {
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
cursor: pointer;
}
.fixed-menu .search-panel .search-panel__submit,
.fixed-menu .search-panel .gear {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 44px;
min-height: 44px;
border-radius: var(--r-s);
color: var(--muted);
}
.fixed-menu .search-panel .search-panel__submit:hover,
.fixed-menu .search-panel .gear:hover {
color: var(--link);
}
.fixed-menu .search-panel .search-panel__submit .i,
.fixed-menu .search-panel .gear .i {
width: 18px;
height: 18px;
}
/* Search suggestions, built by main2.min.js: a#sugN > span(price), a.show-more */
.game-list {
display: none;
position: absolute;
z-index: 60;
top: calc(100% + 6px);
left: 0;
right: 0;
max-height: 60vh;
overflow-y: auto;
padding: 6px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
box-shadow: var(--shadow);
}
.game-list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 44px;
padding: 8px 10px;
border-radius: var(--r-s);
color: var(--text);
font-weight: 600;
line-height: 1.3;
}
.game-list a span {
flex: none;
font-weight: 800;
white-space: nowrap;
}
.game-list a:hover,
.game-list a.selected {
background: var(--soft);
color: var(--link);
}
.game-list a.show-more {
justify-content: center;
color: var(--link);
font-weight: 700;
}
/* Profile dropdown (main2.min.js toggles .header-user-profile-popup) */
.header-user,
.header-user-profile {
position: relative;
}
.header-user-profile__login {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.header-user-profile__btn > i {
position: absolute;
top: 2px;
left: 22px;
min-width: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--accent);
color: #fff;
font-size: 11px;
font-style: normal;
font-weight: 800;
line-height: 18px;
text-align: center;
}
.header-user-profile-popup {
display: none;
position: absolute;
z-index: 60;
top: calc(100% + 8px);
right: 0;
min-width: 260px;
padding: 8px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
box-shadow: var(--shadow);
white-space: normal;
}
.header-user-info {
margin: 0 0 6px;
padding: 6px 10px 10px;
border-bottom: 1px solid var(--line);
font-size: 13px;
color: var(--muted);
}
.header-user-info__login {
display: block;
overflow: hidden;
color: var(--text);
font-size: 15px;
font-weight: 800;
text-overflow: ellipsis;
}
.header-user-level,
.header-user-medal,
.header-user-cup {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
}
.header-user-level b {
color: var(--text);
}
.header-user-vip b {
color: var(--warn);
}
.header-user-profile-popup a {
display: flex;
align-items: center;
min-height: 44px;
padding: 0 10px;
border-radius: var(--r-s);
color: var(--text);
font-weight: 700;
}
.header-user-profile-popup a:hover {
background: var(--soft);
color: var(--link);
}
.header-user-profile-popup .header-user-profile-exit,
.burger-menu .drawer__section .drawer__auth,
.account__link.account__link--exit {
color: var(--accent);
}
.header-user-profile-popup .header-user-profile-exit:hover,
.burger-menu .drawer__section .drawer__auth:hover,
.account__link.account__link--exit:hover {
background: #fdecef;
color: var(--accent);
}
/* Cart dropdown; items are built by main2.min.js */
.basket-menu {
display: none;
position: absolute;
z-index: 60;
top: calc(100% - 4px);
left: 8px;
right: 8px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r-l);
background: var(--card);
box-shadow: var(--shadow);
}
.basket-menu.active {
display: block;
}
.basket-menu .main_spinner {
display: none;
justify-content: center;
padding: 16px;
}
.basket-menu.main_loader .main_spinner {
display: flex;
}
.basket-menu.main_loader .nano {
opacity: .4;
}
.basket-menu .nano {
position: relative;
}
/* Native scrolling instead of nanoScroller's absolute layout (it would need a fixed height) */
.basket-menu .nano-content {
max-height: min(55vh, 360px);
overflow-y: auto;
overscroll-behavior: contain;
padding: 4px 8px;
}
.basket-menu .nano-pane {
display: none;
}
.basket-menu .catalog-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 4px 8px 8px;
border-bottom: 1px solid var(--line);
}
.basket-menu .catalog-item__name {
flex: 1 1 auto;
min-width: 0;
font-weight: 700;
line-height: 1.3;
}
.basket-menu .catalog-item__name a {
color: var(--text);
}
.basket-menu .catalog-item__name a:hover {
color: var(--link);
}
.basket-menu .catalog-item__price {
flex: none;
font-weight: 800;
white-space: nowrap;
}
.catalog-item__delete--cart {
display: flex;
flex: none;
border-radius: var(--r-s);
cursor: pointer;
}
.catalog-item__delete--cart:hover {
background: var(--chip);
}
/* main2.min.js listens on the svg itself, so the svg is the whole hit area */
.catalog-item__delete--cart svg {
width: 36px;
height: 36px;
padding: 12px;
}
.basket-menu--footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 12px;
padding: 12px 16px 16px;
}
.basket-menu--total {
font-weight: 700;
}
.basket-menu--total span {
font-weight: 800;
white-space: nowrap;
}
.basket-menu--btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 18px;
border-radius: var(--r-m);
background: var(--primary);
color: #fff;
font-weight: 800;
}
.basket-menu--btn:hover {
background: var(--primary-hover);
color: #fff;
}
@media (min-width: 600px) {
.basket-menu {
left: auto;
right: var(--gutter);
width: 380px;
}
.fixed-menu .logo small {
display: block;
}
}
@media (min-width: 900px) {
.fixed-menu .simple {
flex-wrap: nowrap;
gap: 16px;
padding-top: 14px;
padding-bottom: 14px;
}
.fixed-menu .logo {
flex: none;
gap: 10px;
}
.fixed-menu .logo .pic {
width: 40px;
height: 40px;
}
.fixed-menu .logo .text {
font-size: 19px;
}
.fixed-menu .logo small {
display: none;
}
.fixed-menu .search-panel {
order: 0;
flex: 1 1 0;
padding: 0 4px 0 6px;
}
.burger-btn {
order: 0;
margin: 0 -10px 0 0;
}
.site-header__actions .register-btn,
.site-header__actions .header-user,
.site-header__actions .purchase-btn {
display: inline-flex;
}
.site-header__actions .lang {
display: block;
}
.basket-btn {
padding: 0 12px 0 16px;
}
.basket-btn .i {
display: none;
}
.basket-btn__label {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
}
.basket-btn span,
.basket-btn.disabled span {
display: inline-block;
position: static;
border: 0;
background: #fff;
color: var(--primary);
font-size: 12px;
line-height: 18px;
}
}
@media (min-width: 1200px) {
.fixed-menu .logo small {
display: block;
}
.header-user-profile__login {
position: static;
width: auto;
max-width: 140px;
height: auto;
overflow: hidden;
clip: auto;
text-overflow: ellipsis;
}
.lang__btn .lang__name {
display: inline;
}
.lang__btn .lang__code {
display: none;
}
}
/* Desktop section links under the header bar */
.site-nav {
display: none;
background: var(--card);
border-bottom: 1px solid var(--line);
}
.site-nav .wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0 16px;
}
.site-nav ul {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 0;
padding: 6px 0;
list-style: none;
}
.site-nav ul:first-child {
margin-left: -12px;
}
.site-nav ul:last-child {
margin-right: -12px;
}
.site-nav a {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 12px;
border-radius: 10px;
color: var(--muted);
font-weight: 700;
}
.site-nav a:hover,
.site-nav a.active {
background: var(--soft);
color: var(--link);
}
.site-nav__extra a {
font-weight: 600;
}
@media (min-width: 900px) {
.site-nav {
display: block;
}
}
.bounce {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 12px;
font-style: normal;
font-weight: 800;
line-height: 1;
}
/* ---------- Drawer (.burger-menu is toggled by main2.min.js, extras in site.js) ---------- */
.burger-menu {
position: fixed;
z-index: 90;
top: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
width: min(86vw, 360px);
overflow-y: auto;
overscroll-behavior: contain;
padding-bottom: env(safe-area-inset-bottom, 0px);
background: var(--card);
box-shadow: 0 0 32px rgba(20, 26, 37, .2);
transform: translateX(-100%);
visibility: hidden;
transition: transform .25s ease, visibility 0s linear .25s;
}
.burger-menu.active {
transform: none;
visibility: visible;
transition: transform .25s ease;
}
@media (min-width: 900px) {
.burger-menu {
left: auto;
right: 0;
transform: translateX(100%);
}
}
.drawer-backdrop {
position: fixed;
z-index: 89;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(20, 26, 37, .5);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0s linear .25s;
}
.burger-menu.active + .drawer-backdrop {
opacity: 1;
visibility: visible;
transition: opacity .25s ease;
}
html.drawer-open,
html.drawer-open body {
overflow: hidden;
}
.drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 8px 8px 16px;
border-bottom: 1px solid var(--line);
}
.drawer__brand {
display: flex;
align-items: center;
gap: 8px;
font-size: 17px;
font-weight: 800;
letter-spacing: .5px;
}
.drawer__mascot {
display: flex;
flex: none;
width: 28px;
height: 28px;
}
.drawer__mascot svg {
width: 100%;
height: 100%;
}
.drawer__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
border-radius: var(--r-m);
background: transparent;
color: var(--text);
}
.drawer__close:hover {
background: var(--chip);
}
.drawer__section {
padding: 8px 0;
border-bottom: 1px solid var(--line);
}
.drawer__section:last-child {
border-bottom: 0;
}
.drawer__title {
margin: 0;
padding: 8px 16px 4px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.burger-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.burger-menu .drawer__section a {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 16px;
color: var(--text);
font-weight: 700;
}
.burger-menu .drawer__section a:hover {
background: var(--soft);
color: var(--link);
}
/* ---------- Bottom nav (phone) ---------- */
.bottom-nav {
position: fixed;
z-index: 40;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-bottom: env(safe-area-inset-bottom, 0px);
border-top: 1px solid var(--line);
background: var(--card);
}
.bottom-nav a {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 56px;
padding: 6px 4px;
color: var(--muted);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
text-align: center;
}
.bottom-nav a::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 22px;
height: 4px;
margin-left: -11px;
border-radius: 0 0 2px 2px;
background: transparent;
}
.bottom-nav a:hover,
.bottom-nav a.active {
color: var(--link);
}
.bottom-nav a.active::before {
background: var(--primary);
}
.bottom-nav .i {
width: 22px;
height: 22px;
}
@media (min-width: 900px) {
.bottom-nav {
display: none;
}
}
/* ---------- Footer ---------- */
.site-footer {
margin-top: 36px;
background: var(--foot);
color: var(--foot-text);
font-size: 14px;
}
.site-footer a {
color: var(--foot-text);
}
.site-footer a:hover {
color: #fff;
}
.site-footer :focus-visible {
outline-color: #fff;
}
.footer-info {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 24px 0;
border-bottom: 1px solid var(--foot-line);
}
/* phones: two per row; a single last button takes the whole row */
.footer-info a {
display: flex;
flex: 1 0 calc((100% - 8px) / 2);
min-width: 0;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 12px;
border-radius: var(--r-m);
background: rgba(255, 255, 255, .04);
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.footer-info a:hover {
background: rgba(255, 255, 255, .08);
}
.footer-info .i {
width: 22px;
height: 22px;
color: var(--brand);
}
.footer-menu-container {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
padding: 24px 0;
}
.footer-menu__title {
margin: 0 0 6px;
color: var(--foot-muted);
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.footer-menu {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.footer-menu a {
display: flex;
align-items: center;
min-height: 44px;
overflow-wrap: break-word;
hyphens: auto;
}
.footer-social {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.footer-social .btn {
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--foot-line);
border-radius: 22px;
background: transparent;
color: var(--foot-text);
font-size: 14px;
font-weight: 700;
}
.footer-social .btn:hover {
border-color: var(--foot-muted);
color: #fff;
}
.footer-social .btn.email {
border-color: var(--primary);
background: var(--primary);
color: #fff;
}
.footer-social .btn.email:hover {
background: var(--primary-hover);
}
.copyright-zone {
padding: 20px 0 24px;
border-top: 1px solid var(--foot-line);
color: var(--foot-muted);
font-size: 12px;
}
.footer-text p {
margin: 0 0 12px;
}
.footer-copyright {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
color: var(--foot-text);
}
@media (min-width: 600px) {
.footer-info a {
flex: 0 0 calc((100% - 16px) / 3);
}
.footer-menu-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
}
@media (min-width: 900px) {
.footer-menu-container {
grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr);
padding: 28px 0;
}
.footer-menu {
grid-template-columns: minmax(0, 1fr);
}
.footer-menu a {
display: inline-block;
min-height: 0;
padding: 4px 0;
}
}
@media (min-width: 1200px) {
.footer-info a {
flex: 1 1 0;
}
}
/* ---------- Popups (markup unchanged; .active / .modal__loader set by main2.min.js) ---------- */
.popup {
position: fixed;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
}
.popup.active {
display: flex;
}
.popup .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(20, 26, 37, .55);
}
.popup .modal {
position: relative;
width: 100%;
max-width: 520px;
/* mailSubscribe() sets an inline pixel height on .modal */
height: auto !important;
max-height: calc(100vh - 32px);
overflow-y: auto;
padding: 20px;
border-radius: var(--r-l);
background: var(--card);
box-shadow: var(--shadow);
}
.popup .title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.popup .title .logo::before {
content: "ZAKA-ZAKA";
font-size: 17px;
font-weight: 800;
letter-spacing: .5px;
}
.popup .close {
position: relative;
flex: none;
width: 44px;
height: 44px;
margin: -10px -10px 0 auto;
border-radius: var(--r-m);
cursor: pointer;
}
.popup .close:hover {
background: var(--chip);
}
.popup .close::before,
.popup .close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2px;
margin: -1px 0 0 -9px;
border-radius: 1px;
background: var(--muted);
transform: rotate(45deg);
}
.popup .close::after {
transform: rotate(-45deg);
}
.popup .btns {
margin-bottom: 12px;
}
.popup .btns .register {
font-size: 18px;
font-weight: 800;
}
.popup.email .column > * {
margin: 0 0 12px;
}
.popup.email input[type="text"] {
display: block;
width: 100%;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
}
.popup.email input[type="checkbox"] {
width: 20px;
height: 20px;
margin: 0 8px 0 0;
vertical-align: middle;
}
.popup.email label {
font-size: 14px;
}
.popup.email .error {
color: var(--accent);
font-size: 13px;
}
.popup.email .error:empty {
display: none;
}
.popup.email button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
border: 0;
border-radius: var(--r-m);
background: var(--primary);
color: #fff;
font-size: 15px;
font-weight: 800;
}
.popup.email button:hover {
background: var(--primary-hover);
}
.popup.email .subscribe button {
margin-top: 16px;
}
.popup.email .subs .favorites {
border: 1px solid var(--line);
background: transparent;
color: var(--text);
}
.popup.message .positive p {
color: var(--good);
}
.popup.message .negative p {
color: var(--accent);
}
.popup.message.new .modal {
padding-right: 56px;
}
.popup.message.new .close {
position: absolute;
top: 8px;
right: 8px;
margin: 0;
}
.popup.message.new .messages-container > div {
margin: 0 0 8px;
}
/* Confirm dialog (profile/subscribe.php): a question and two buttons; closed like every popup (.overlay, .close, [data-dismiss="modal"] in main2.min.js) */
.popup.confirm .modal {
max-width: 420px;
}
.popup.confirm .confirm__text {
margin: 0 0 16px;
font-size: 16px;
line-height: 1.4;
}
.popup.confirm .confirm__btns {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
/* Add-to-cart popup */
.popup.buy .modal {
max-width: 560px;
}
.popup.buy.modal__loader .modal {
min-height: 160px;
}
.popup.buy.modal__loader .modal > * {
visibility: hidden;
}
.popup.buy.modal__loader .modal::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 36px;
height: 36px;
margin: -18px 0 0 -18px;
border: 3px solid var(--line);
border-top-color: var(--primary);
border-radius: 50%;
animation: zz-spin .8s linear infinite;
}
@keyframes zz-spin {
to {
transform: rotate(360deg);
}
}
.popup.buy .modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.popup.buy .modal-title {
margin: 0;
font-size: 18px;
}
.popup.buy .cart-total-main {
display: block;
margin-top: 4px;
color: var(--muted);
font-size: 13px;
font-weight: 600;
}
.popup.buy .modal-error--hidden {
display: none;
}
.code-alert__title {
color: var(--accent);
font-size: 18px;
font-weight: 800;
}
.code-alert__description {
margin: 8px 0 0;
}
.main-header__dropdown--products-btns,
.main-header__dropdown--products-btns > div {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.main-header__dropdown--products-btns {
margin-top: 16px;
}
.catalog--cart-success .catalog-item {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 4px 12px;
align-items: start;
}
.catalog--cart-success .catalog-item__img {
grid-row: span 2;
}
.catalog--cart-success .catalog-item__img img {
display: block;
width: 100%;
aspect-ratio: 185 / 107;
object-fit: cover;
border-radius: var(--r-s);
}
.catalog--cart-success .catalog-item__name {
font-weight: 700;
line-height: 1.3;
}
.catalog-item__genres {
margin-top: 2px;
color: var(--muted);
font-size: 13px;
font-weight: 500;
}
.catalog-item__platforms {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
}
.catalog--cart-success .catalog-item__platforms span {
padding: 1px 6px;
border-radius: 6px;
background: var(--chip);
color: var(--muted);
font-size: 11px;
font-weight: 700;
}
/* Cart.php sends empty icon spans; label them in text */
.catalog--cart-success .catalog-item__platforms .steam::before { content: "Steam"; }
.catalog--cart-success .catalog-item__platforms .origin::before { content: "Origin"; }
.catalog--cart-success .catalog-item__platforms .uplay::before { content: "Uplay"; }
.catalog--cart-success .catalog-item__platforms .battlenet::before { content: "Battle.net"; }
.catalog--cart-success .catalog-item__platforms .windows::before { content: "Windows"; }
.catalog--cart-success .catalog-item__platforms .apple::before { content: "macOS"; }
.catalog--cart-success .catalog-item__platforms .linux::before { content: "Linux"; }
.catalog--cart-success .catalog-item__price {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 8px;
}
.catalog--cart-success .game-block-discount {
padding: 2px 8px;
border-radius: var(--r-s);
background: var(--accent);
color: #fff;
font-size: 13px;
font-weight: 800;
}
.catalog--cart-success .game-block-discount-sum {
margin-right: 8px;
color: var(--muted);
font-size: 13px;
}
.catalog-item__price-span {
font-size: 18px;
font-weight: 800;
}
@media (min-width: 600px) {
.catalog--cart-success .catalog-item {
grid-template-columns: 120px minmax(0, 1fr) auto;
}
.catalog--cart-success .catalog-item__img {
grid-row: auto;
}
.catalog--cart-success .catalog-item__price {
flex-direction: column;
align-items: flex-end;
}
}
/* ---------- Shared components for the page stages ---------- */
.card {
padding: 16px;
border-radius: var(--r-xl);
background: var(--card);
}
.card__title {
margin: 0 0 8px;
font-size: 16px;
font-weight: 800;
}
@media (min-width: 900px) {
.card {
padding: 18px;
}
}
.section-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
margin: 0 0 14px;
}
.section-head__title {
flex: 1 1 auto;
margin: 0;
font-size: 20px;
font-weight: 800;
line-height: 1.25;
}
.section-head__link {
font-weight: 700;
}
.segmented {
display: flex;
flex-wrap: wrap;
gap: 4px;
max-width: 100%;
padding: 4px;
border-radius: var(--r-m);
background: var(--card);
}
.segmented > * {
display: inline-flex;
flex: none;
align-items: center;
min-height: 44px;
padding: 0 10px;
white-space: nowrap;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--muted);
font-weight: 700;
cursor: pointer;
}
.segmented > :hover {
color: var(--link);
}
.segmented > .active {
background: var(--primary);
color: #fff;
}
.section-head > .segmented {
flex: 1 1 100%;
}
.section-head > .segmented > * {
flex: 1 1 auto;
justify-content: center;
padding: 0 6px;
font-size: 13px;
}
@media (min-width: 600px) {
.section-head > .segmented {
flex: 0 1 auto;
}
.section-head > .segmented > * {
flex: none;
padding: 0 10px;
font-size: inherit;
}
}
@media (min-width: 900px) {
.section-head__title {
font-size: 22px;
}
.segmented > *,
.section-head > .segmented > * {
min-height: 36px;
padding: 0 14px;
}
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0 0 4px;
list-style: none;
}
.chip {
display: inline-flex;
flex: none;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--card);
color: var(--text);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
}
.chip:hover {
border-color: var(--primary);
color: var(--link);
}
.chip.active,
.chip[aria-current],
.chip[aria-pressed="true"] {
border-color: var(--primary);
background: var(--soft);
color: var(--link);
}
@media (min-width: 900px) {
.chip {
min-height: 40px;
padding: 9px 14px;
}
}
.tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.tile {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
overflow: hidden;
padding-bottom: 10px;
border: 1px solid var(--line);
border-radius: var(--r-l);
background: var(--card);
color: var(--text);
text-decoration: none;
transition: box-shadow .15s ease;
}
.tile:hover,
.tile.hover {
box-shadow: var(--shadow);
color: var(--text);
}
.tile__cover {
position: relative;
display: block;
aspect-ratio: 273 / 112;
overflow: hidden;
margin-bottom: 2px;
background: var(--chip);
}
.tile__cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.tile__cover--contain img {
object-fit: contain;
}
.tile--series .tile__cover {
aspect-ratio: 185 / 107;
}
.tile__badge {
position: absolute;
padding: 2px 7px;
border-radius: var(--r-s);
font-size: 12px;
font-weight: 800;
line-height: 1.4;
}
.tile__badge--pre {
top: 8px;
left: 8px;
background: var(--preorder);
color: var(--text);
font-size: 11px;
text-transform: uppercase;
}
.tile__badge--pre + .tile__badge--pre {
top: 34px;
}
/* Tile content is flat (no body wrapper): profile/subscribe.php reads .game-block-unsubscribe.next() as the name and removes its parent */
.tile__title,
.tile__sub,
.tile__price,
.tile__meta,
.tile__lucky {
padding: 0 10px;
}
.tile__title {
display: -webkit-box;
overflow: hidden;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.tile__sub {
overflow: hidden;
color: var(--muted);
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
text-overflow: ellipsis;
}
.tile__price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 8px;
margin-top: auto;
}
.tile__price-now {
font-size: 16px;
font-weight: 800;
}
.tile__price-old {
color: var(--muted);
font-size: 13px;
text-decoration: line-through;
}
/* the chip's filled box reads by its middle: centre it on the price digits, the two prices keep their common baseline */
.tile__discount {
align-self: center;
padding: 0 6px;
border-radius: 6px;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 800;
line-height: 1.5;
white-space: nowrap;
}
/* narrow tiles (phones, 3 columns at 600-719px): with the chip shown, the old price would push the price row onto a second line */
.tile__discount + .tile__price-old {
display: none;
}
@media (min-width: 720px) {
.tile__discount + .tile__price-old {
display: inline;
}
}
.tile__price--na {
color: var(--muted);
font-size: 13px;
font-weight: 700;
}
.tile__meta {
overflow: hidden;
color: var(--muted);
font-size: 11px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
text-overflow: ellipsis;
}
.tile__meta > span + span::before {
content: "·";
margin-right: 4px;
}
.tile__lucky {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
margin-top: auto;
color: var(--muted);
font-size: 10px;
font-weight: 800;
text-align: center;
}
.tile__lucky b {
display: block;
color: var(--text);
font-size: 13px;
}
.tile--more {
align-items: center;
justify-content: center;
min-height: 120px;
padding: 16px;
border: 2px dashed var(--line);
background: transparent;
color: var(--link);
font-weight: 800;
}
.tile--more:hover {
border-color: var(--primary);
color: var(--link);
}
.game-block-unsubscribe {
position: absolute;
z-index: 2;
top: 6px;
right: 6px;
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 10px;
border-radius: var(--r-s);
background: rgba(20, 26, 37, .78);
color: #fff;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
@media (min-width: 600px) {
.tiles {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.tile {
gap: 8px;
padding-bottom: 14px;
}
.tile__title,
.tile__sub,
.tile__price,
.tile__meta,
.tile__lucky {
padding: 0 14px;
}
.tile__title {
font-size: 15px;
}
.tile__price-now {
font-size: 19px;
}
}
@media (min-width: 1200px) {
.tiles {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* ---------- Lists: tabs, pagination, "show more" ---------- */
.tabs-content {
display: none;
}
.tabs-content.active {
display: block;
}
/* news/list.php tabs are plain div.tabs-btn: same look as .segmented */
.tabs > .tabs-btns:not(.section-head) {
display: flex;
flex-wrap: wrap;
gap: 4px;
max-width: 100%;
margin: 0 0 14px;
padding: 4px;
border-radius: var(--r-m);
background: var(--card);
}
.tabs > .tabs-btns:not(.section-head) > .tabs-btn {
display: inline-flex;
flex: none;
align-items: center;
min-height: 44px;
padding: 0 12px;
border-radius: 9px;
color: var(--muted);
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
.tabs > .tabs-btns:not(.section-head) > .tabs-btn.active {
background: var(--primary);
color: #fff;
}
.pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
margin: 24px 0 0;
}
.pagination a {
display: flex;
border-radius: var(--r-m);
color: var(--text);
}
.pagination-page,
.pagination-arrow-r,
.pagination-arrow-l {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
font-weight: 700;
}
.pagination a:hover > div {
border-color: var(--primary);
color: var(--link);
}
.pagination-page.active,
.pagination a:hover > .pagination-page.active {
border-color: var(--primary);
background: var(--primary);
color: #fff;
}
/* Pager2: arrow-r is the "previous" link, arrow-l the "next" one */
.pagination-arrow-r::before,
.pagination-arrow-l::before {
content: "";
width: 9px;
height: 9px;
border: solid currentColor;
border-width: 0 2px 2px 0;
}
.pagination-arrow-r::before {
margin-left: 4px;
transform: rotate(135deg);
}
.pagination-arrow-l::before {
margin-right: 4px;
transform: rotate(-45deg);
}
.pagination-dots {
padding: 0 4px;
color: var(--muted);
letter-spacing: 2px;
}
/* phones: one row - compact buttons; in a long list (it has dots) only the first and last pages, the current one with its neighbours
and the pages next to the first/last stay. :has() is an enhancement: without it the row wraps as before */
@media (max-width: 599.98px) {
.pagination {
gap: 2px;
}
.pagination-page,
.pagination-arrow-r,
.pagination-arrow-l {
min-width: 32px;
padding: 0 2px;
font-size: 14px;
}
.pagination-dots {
padding: 0 2px;
font-size: 12px;
letter-spacing: 0;
}
.pagination:has(> .pagination-dots) > a:has(> .pagination-page):not(:nth-child(2)):not(:nth-child(3)):not(:nth-last-child(2)):not(:nth-last-child(3)):not(:has(> .active)):not(:has(+ a > .active)):not(:has(> .active) + a) {
display: none;
}
}
@media (max-width: 359.98px) {
.pagination {
gap: 1px;
}
}
.gifts-users-show-more {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 18px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
color: var(--link);
font-weight: 800;
cursor: pointer;
}
.gifts-users-show-more:hover {
border-color: var(--primary);
}
.search-results > .gifts-users-show-more {
grid-column: 1 / -1;
}
.catalog-more {
display: flex;
justify-content: center;
margin: 24px 0 0;
}
.catalog-more .btn {
width: 100%;
}
@media (min-width: 600px) {
.catalog-more .btn {
width: auto;
}
}
/* ---------- Filters row (components/views/MenuChips.php) ---------- */
/* <900: the chips take the whole width and «Все разделы» follows them, so its dropdown (.filters__panel) opens right under it;
the 4px row gap plus the chips' 4px bottom padding make the 8px of the chip rows. >=900: one row, «Все разделы» on the right */
.filters {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 4px 8px;
margin: 0 0 20px;
}
.filters__chips {
flex: 1 1 100%;
min-width: 0;
}
.filters__all {
flex: none;
}
.filters__all > summary {
list-style: none;
}
.filters__all > summary::-webkit-details-marker {
display: none;
}
.filters__all > summary .i {
width: 16px;
height: 16px;
transition: transform .15s ease;
}
.filters__all[open] > summary {
border-color: var(--primary);
background: var(--soft);
color: var(--link);
}
.filters__all[open] > summary .i {
transform: rotate(180deg);
}
.filters__panel {
position: absolute;
z-index: 30;
top: calc(100% + 6px);
left: 0;
right: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0 24px;
max-height: min(70vh, 560px);
overflow-y: auto;
overscroll-behavior: contain;
padding: 4px 16px 12px;
border: 1px solid var(--line);
border-radius: var(--r-l);
background: var(--card);
box-shadow: var(--shadow);
}
.filters__title {
margin: 12px 0 2px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.filters__group ul {
margin: 0;
padding: 0;
list-style: none;
}
.filters__group a {
display: flex;
align-items: center;
min-height: 44px;
color: var(--text);
font-weight: 600;
}
.filters__group a:hover {
color: var(--link);
}
@media (min-width: 900px) {
.filters {
flex-wrap: nowrap;
margin-bottom: 24px;
}
.filters__chips {
flex: 1 1 auto;
}
.filters__panel {
padding: 8px 24px 16px;
}
.filters__group a {
min-height: 32px;
}
}
/* ---------- Hero: components/views/Slider.php + bxSlider (fade) ---------- */
.hero {
margin: 0 0 16px;
}
.top-slider-container {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--r-xl);
background: #26324a;
color: #fff;
}
.top-slider-subview-bg,
.bx-loading {
display: none;
}
.top-slider {
margin: 0;
padding: 0;
list-style: none;
}
.top-slider > li {
position: relative;
}
.top-slider-slide {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
color: #fff;
}
.top-slider-slide:hover {
color: #fff;
}
.top-slider-pic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.top-slider-shadow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to top, rgba(10, 14, 21, .88), rgba(10, 14, 21, .2) 55%, rgba(10, 14, 21, 0));
}
.top-slider-platforms {
position: absolute;
top: 12px;
left: 16px;
display: flex;
gap: 6px;
}
.top-slider-platforms span {
padding: 2px 8px;
border-radius: 6px;
background: rgba(10, 14, 21, .6);
font-size: 11px;
font-weight: 700;
}
.top-slider-name {
position: absolute;
left: 16px;
right: 16px;
bottom: 46px;
display: -webkit-box;
overflow: hidden;
font-size: 19px;
font-weight: 800;
line-height: 1.2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.top-slider-prices {
position: absolute;
left: 16px;
bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.top-slider-discount {
order: 1;
padding: 2px 8px;
border-radius: var(--r-s);
background: var(--accent);
font-size: 13px;
font-weight: 800;
}
.top-slider-price {
font-size: 18px;
font-weight: 800;
}
.top-slider-subview {
display: none;
}
.bx-wrapper {
position: relative;
}
.bx-controls-direction a {
position: absolute;
z-index: 60;
top: 50%;
width: 44px;
height: 44px;
margin-top: -22px;
border-radius: 50%;
background: rgba(10, 14, 21, .55);
color: #fff;
}
.bx-controls-direction a:hover {
background: rgba(10, 14, 21, .8);
}
.bx-controls-direction a::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border: solid currentColor;
border-width: 0 2px 2px 0;
}
.bx-prev {
left: 8px;
}
.bx-prev::before {
margin: -5px 0 0 -3px;
transform: rotate(135deg);
}
.bx-next {
right: 8px;
}
.bx-next::before {
margin: -5px 0 0 -7px;
transform: rotate(-45deg);
}
@media (min-width: 900px) {
.hero {
margin-bottom: 20px;
}
.top-slider-slide {
width: 66.667%;
aspect-ratio: 2 / 1;
}
.top-slider-name {
left: 24px;
right: 24px;
bottom: 56px;
font-size: 28px;
}
.top-slider-prices {
left: 24px;
bottom: 20px;
}
.top-slider-platforms {
left: 24px;
}
.top-slider-subview {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
width: 33.333%;
overflow: hidden;
padding: 24px;
background: #1b2436;
}
.top-slider-subview-title {
margin-bottom: 8px;
font-size: 19px;
font-weight: 800;
line-height: 1.25;
}
.top-slider-subview-desc {
display: -webkit-box;
overflow: hidden;
color: var(--foot-text);
font-size: 14px;
-webkit-line-clamp: 8;
-webkit-box-orient: vertical;
}
.top-slider-subview-props {
margin-top: auto;
padding-top: 12px;
color: var(--foot-muted);
font-size: 13px;
}
.top-slider-subview-props span {
color: #fff;
}
.bx-next {
right: calc(33.333% + 8px);
}
}
/* phones: banner arrows go to the top-right corner so they never cover the slide title */
@media (max-width: 899.98px) {
.hero .bx-controls-direction a {
top: 10px;
margin-top: 0;
}
.hero .bx-prev {
left: auto;
right: 62px;
}
.hero .bx-next {
right: 10px;
}
}
/* ---------- Side widgets: cards with vertical Swiper lists of mini-cards ---------- */
.side-widgets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin: 32px 0 0;
}
.side-widgets > .card,
.side-widgets .card {
position: relative;
min-width: 0;
}
.card .card__title {
display: flex;
align-items: center;
min-height: 44px;
margin: -6px 0 8px;
}
.card .card__title a {
color: var(--text);
}
.card .card__title a:hover {
color: var(--link);
}
.right-slider-container .card__title,
.top-right-slider-container .card__title,
.bottom-slider-container .card__title {
padding-right: 100px;
}
.card .swiper-button-prev,
.card .swiper-button-next {
position: absolute;
top: 12px;
left: auto;
width: 44px;
height: 44px;
margin: 0;
border-radius: 50%;
background: var(--chip);
color: var(--text);
}
.card .swiper-button-prev {
right: 64px;
}
.card .swiper-button-next {
right: 14px;
}
.card .swiper-button-prev:hover,
.card .swiper-button-next:hover {
background: var(--soft);
color: var(--link);
}
.side-widgets .swiper-button-disabled,
.side-widgets .swiper-button-disabled:hover {
background: var(--chip);
color: var(--text);
opacity: .4;
cursor: default;
}
.card .swiper-button-prev::before,
.card .swiper-button-next::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
margin: -3px 0 0 -5px;
border: solid currentColor;
border-width: 2px 0 0 2px;
transform: rotate(45deg);
}
.card .swiper-button-next::before {
margin-top: -7px;
transform: rotate(225deg);
}
.bottom-slider-container.card .swiper-button-prev::before {
margin: -5px 0 0 -3px;
transform: rotate(-45deg);
}
.bottom-slider-container.card .swiper-button-next::before {
margin: -5px 0 0 -7px;
transform: rotate(135deg);
}
/* Vertical Swiper sizes its slides from the container height: 3 rows of 72px with 3px gaps */
.right-slider3,
.right-gifts-slider-main {
height: 222px;
}
.bottom-slider-container {
position: relative;
overflow: hidden;
}
.bottom-slider {
margin: 0;
padding: 0;
list-style: none;
}
/* ---------- Mini card (components/views/_mini.php) ---------- */
.mini {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
height: 100%;
padding: 4px;
border-radius: var(--r-m);
color: var(--text);
}
.mini:hover,
.mini.hover {
background: var(--soft);
color: var(--text);
}
.mini__cover {
position: relative;
flex: none;
width: 96px;
aspect-ratio: 273 / 112;
overflow: hidden;
border-radius: var(--r-s);
background: var(--chip);
}
.mini__cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.mini__badge {
align-self: center;
padding: 0 5px;
border-radius: 6px;
background: var(--accent);
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 16px;
white-space: nowrap;
}
.mini__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.mini__title {
display: -webkit-box;
overflow: hidden;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.mini__price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 6px;
}
.mini__price-now {
font-size: 14px;
font-weight: 800;
}
.mini__price-now--down {
color: var(--good);
}
.mini__price-old {
color: var(--muted);
font-size: 12px;
}
.mini--col {
flex-direction: column;
align-items: stretch;
height: auto;
}
.mini--col .mini__cover {
width: 100%;
}
/* phones: the bottom sliders' cards are narrow, so the chip goes under the price on every card (rows stay even) */
.mini--col .mini__price {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
/* in the column a centred chip would move to the middle of the card */
.mini--col .mini__badge {
align-self: flex-start;
}
@media (min-width: 600px) {
.mini--col .mini__price {
flex-direction: row;
align-items: baseline;
gap: 0 6px;
}
.mini--col .mini__badge {
align-self: center;
}
}
.game-miniblock-time {
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.mini__sub {
color: var(--muted);
font-size: 12px;
}
/* ---------- Product page, "Игры из серии" tab (components/views/GameSeries.php) ---------- */
.product-detail-tab-games {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
/* main2.min.js positions this preview by 117px list rows; in the tile grid site.js opens the lightbox instead */
.product-detail-game-preview,
.product-detail-game-preview.active {
display: none;
}
.product-detail-game-container {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.product-detail-game,
.product-detail-game > .tile {
flex: 1 1 auto;
}
.product-detail-game {
display: flex;
}
.product-detail-game-screen {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 4px;
}
/* GameSeries.php writes the first screenshots as an inline `background` shorthand */
.product-detail-game-screen > div {
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 6px;
background-color: var(--chip);
background-position: center !important;
background-size: cover !important;
cursor: zoom-in;
}
@media (min-width: 600px) {
.product-detail-tab-games {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
}
/* ---------- Product page (views/game/view.php) ---------- */
/* Phone: one column, media first; the buy bar is fixed above the bottom nav. >=900: two columns, sticky buy box */
.product-detail {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
align-items: start;
}
/* .product-main only wraps media + buy box; its children join the page grid */
.product-main {
display: contents;
}
.product-detail .product-preview {
order: -2;
}
.product-detail > .header {
order: -1;
min-width: 0;
}
.product-detail > .header .subtitle {
color: var(--muted);
font-size: 12px;
font-weight: 600;
}
/* inline padding widens the tap area without changing the line */
.product-detail > .header .subtitle a {
padding: 13px 0;
color: var(--muted);
}
.product-detail > .header .subtitle a:hover {
color: var(--link);
}
.product-detail .title {
margin: 4px 0 0;
font-size: 26px;
line-height: 1.2;
overflow-wrap: anywhere;
}
.product-detail .title--long {
font-size: 21px;
}
/* Media: big picture/video + thumbnails (Swiper, main2.min.js) */
.product-preview {
display: grid;
gap: 10px;
min-width: 0;
}
.product-preview-items {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: var(--r-l);
background: #232c3d;
}
.product-preview-item {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}
.product-preview-item.active {
display: block;
}
.product-preview-item.picture {
cursor: zoom-in;
}
.product-preview-item > div {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.product-preview-item iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.product-mini-preview-container {
position: relative;
min-width: 0;
}
.product-mini-preview {
overflow: hidden;
}
/* the width is a fallback until Swiper writes its own */
.product-mini-preview .item {
position: relative;
width: calc(25% - 10px);
height: auto;
aspect-ratio: 16 / 9;
border-radius: var(--r-s);
background-color: var(--chip);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
.product-mini-preview .item:hover {
box-shadow: 0 0 0 2px var(--primary);
}
.product-mini-preview .item.video::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -8px 0 0 -5px;
border-style: solid;
border-width: 8px 0 8px 13px;
border-color: transparent transparent transparent #fff;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}
/* phone: thumbnails are swiped */
.product-mini-preview-prev,
.product-mini-preview-next {
display: none;
}
/* Buy box */
.specification {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
padding: 16px;
border-radius: var(--r-l);
background: var(--card);
}
.specification > .buy-zone {
order: -1;
}
.product-detail-timer {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 5px;
padding: 10px 12px 10px 38px;
border-radius: var(--r-m);
background: var(--soft);
color: var(--link);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
}
.product-detail-timer::before {
content: "";
position: absolute;
top: 10px;
left: 12px;
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.product-detail-timer .timer-item {
display: inline-flex;
gap: 3px;
}
.product-detail-timer .timer-time {
font-variant-numeric: tabular-nums;
}
.product-detail-timer .timer-time-type {
font-weight: 600;
}
.buy-zone {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.buy-price {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
}
.buy-price .price {
order: -1;
font-size: 32px;
font-weight: 800;
line-height: 1.1;
}
.buy-price .discount,
.buy-bar__discount {
padding: 2px 8px;
border-radius: 7px;
background: var(--accent);
color: #fff;
font-size: 13px;
font-weight: 800;
}
.buy-price .old-price {
order: 1;
color: var(--muted);
text-decoration: line-through;
}
.notavailable-price {
color: var(--muted);
font-size: 15px;
font-weight: 700;
}
.product-economy {
position: relative;
align-self: flex-start;
color: var(--good);
font-size: 13px;
font-weight: 700;
cursor: help;
}
.product-economy-notice {
display: none;
position: absolute;
z-index: 6;
top: 100%;
left: 0;
width: 240px;
margin-top: 6px;
padding: 8px 10px;
border-radius: var(--r-s);
background: var(--text);
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
}
.product-economy:hover .product-economy-notice {
display: block;
}
/* Buy bar: price + wishlist + main button */
.buy-bar {
position: fixed;
z-index: 39;
right: 0;
bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
left: 0;
display: flex;
align-items: center;
gap: 10px;
min-height: 65px;
padding: 8px var(--gutter);
border-top: 1px solid var(--line);
background: var(--card);
box-shadow: 0 -4px 16px rgba(20, 26, 37, .06);
}
body.has-buy-bar {
padding-bottom: calc(var(--bottom-nav-h) + 65px + env(safe-area-inset-bottom, 0px));
}
/* price + discount chip: takes only the room the buttons leave (basis 0), never less than its widest item, so the price is never cut and
the buttons keep their width; when price and chip don't fit side by side (320px, long prices) the chip wraps under the price */
.buy-bar__price {
display: flex;
flex: 1 1 0;
flex-wrap: wrap;
align-items: center;
gap: 0 8px;
min-width: min-content;
font-size: 20px;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
}
.buy-bar__now {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.buy-bar__discount {
flex: none;
line-height: 1.4;
}
.buy-bar > .product-wish {
order: 1;
}
.buy-bar > a {
order: 2;
}
.buy-bar > .notavailable-btn,
.buy-bar > .product-detail-download-btn {
flex: 1 1 auto;
}
.simple-buy-btn,
.notavailable-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
min-height: 48px;
padding: 4px 20px;
border-radius: 14px;
font-size: 16px;
font-weight: 800;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.simple-buy-btn {
background: var(--primary);
color: #fff;
cursor: pointer;
}
.simple-buy-btn:hover {
background: var(--primary-hover);
color: #fff;
}
.product-detail-buy-btn:not(.product-preorder-btn) {
flex-direction: row;
gap: 8px;
}
.product-buy-btn--click.in_cart {
background: var(--soft);
color: var(--link);
}
.product-buy-btn--click.in_cart:hover {
background: #d9e8f7;
color: var(--link);
}
.notavailable-btn {
background: var(--chip);
color: var(--text);
cursor: default;
}
.notavailable-notice {
color: var(--link);
font-size: 12px;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
}
.product-detail-download-btn .notavailable-notice {
color: #fff;
text-decoration: none;
cursor: inherit;
}
.product-preorder-notice {
font-size: 12px;
font-weight: 600;
text-decoration: underline;
}
/* main2.min.js swaps in the long text and adds .full; on the phone it opens above the bar */
.product-preorder-notice.full {
position: absolute;
z-index: 6;
right: var(--gutter);
bottom: calc(100% + 8px);
left: var(--gutter);
padding: 10px 12px;
border-radius: var(--r-m);
background: var(--text);
color: #fff;
font-size: 13px;
font-weight: 500;
line-height: 1.45;
text-align: left;
text-decoration: none;
box-shadow: var(--shadow);
}
/* Wishlist: main2.min.js rewrites the inner , so the heart is drawn in CSS */
.product-wish .subscribe {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--card);
color: var(--text);
font-size: 15px;
font-weight: 700;
}
.product-wish .subscribe:hover {
border-color: var(--muted);
}
.product-wish .subscribe::before {
content: "";
flex: none;
width: 20px;
height: 20px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.product-wish .subscribe.done {
color: var(--accent);
}
.product-wish .subscribe.done::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z'/%3E%3C/svg%3E");
}
.product-wish .subscribe p {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.subscribe-panel {
display: none;
}
.subscribe-panel.active {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
padding: 14px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
}
.buy-bar .subscribe-panel.active {
position: absolute;
right: var(--gutter);
bottom: calc(100% + 8px);
left: var(--gutter);
box-shadow: var(--shadow);
}
/* copies of the main wishlist button, kept for main2.min.js */
.subscribe-panel .subscribe {
display: none;
}
.subscribe-panel-notice,
.subscribe-panel-email {
grid-column: 1 / -1;
}
.subscribe-panel-notice {
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
/* shown by main2.min.js for guests */
.subscribe-panel-email {
display: none;
}
.subscribe-panel-email input {
display: block;
width: 100%;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
}
.subscribe-panel-btn {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 14px;
border: 1px solid transparent;
border-radius: var(--r-m);
background: var(--primary);
color: #fff;
font-weight: 800;
text-align: center;
cursor: pointer;
}
.subscribe-panel-btn:hover {
background: var(--primary-hover);
}
.make-subscribe .subscribe-panel-btn {
grid-column: 1 / -1;
}
.subscribe-panel-btn.unsub,
.subscribe-panel-btn.subed {
border-color: var(--line);
background: transparent;
color: var(--text);
}
.subscribe-panel-btn.unsub:hover,
.subscribe-panel-btn.subed:hover {
border-color: var(--muted);
background: transparent;
}
/* Notices, spec list, help links */
.detail-happy-hour {
display: flex;
align-items: center;
min-height: 44px;
padding: 0 12px;
border-radius: var(--r-m);
background: var(--warn-bg);
color: var(--warn);
font-size: 13px;
font-weight: 800;
}
.detail-happy-hour:hover {
color: var(--warn);
text-decoration: underline;
}
.product-warn {
margin: 0;
padding: 10px 12px;
border-radius: var(--r-m);
background: var(--warn-bg);
color: var(--warn);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
cursor: help;
}
.specification .description {
display: grid;
grid-template-columns: 104px minmax(0, 1fr);
gap: 10px 12px;
margin: 0;
font-size: 13px;
line-height: 1.45;
}
.description dt {
color: var(--muted);
}
.description dd {
margin: 0;
font-weight: 600;
overflow-wrap: anywhere;
}
.description dd a:not(.link-activation) {
padding: 13px 0;
}
.description__links a + a {
margin-left: 6px;
}
/* getActivation() prints icon-only links */
.description a.icon-steam:empty::before { content: "Steam"; }
.description a.icon-origin:empty::before { content: "Origin"; }
.description a.icon-uplay:empty::before { content: "Uplay"; }
.description a.icon-battlenet:empty::before { content: "Battle.net"; }
.description a.icon-xbox:empty::before { content: "Xbox"; }
.description a.icon-playstation:empty::before { content: "PlayStation"; }
.link-activation {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--soft);
color: var(--link);
font-size: 12px;
font-weight: 800;
vertical-align: 1px;
}
.link-activation::after {
content: "";
position: absolute;
top: -11px;
right: -11px;
bottom: -11px;
left: -11px;
}
.stock--high { color: var(--good); }
.stock--mid { color: var(--text); }
.stock--low { color: var(--warn); }
.stock--none { color: var(--accent); }
.product-desc-btns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 8px;
}
.product-detail-garantee,
.product-detail-howbuy {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 6px 10px;
border-radius: 10px;
background: var(--chip);
color: var(--text);
font-size: 13px;
font-weight: 700;
text-align: center;
}
.product-detail-garantee:hover,
.product-detail-howbuy:hover {
background: var(--soft);
color: var(--link);
}
.product-detail-simple {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
color: var(--muted);
font-size: 12px;
font-weight: 600;
text-align: center;
}
.product-detail-simple:hover {
color: var(--link);
}
/* Feature chips (GameController::getCategory prints supported features only) */
.product-detail > .types {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.types > div {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--card);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
}
.types > div::before {
content: "";
flex: none;
width: 14px;
height: 14px;
background: var(--good);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Purchase bonus (models/Coupon.php) */
.product-bonus-wrap {
display: grid;
gap: 10px;
}
.product-bonus {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 2px 12px;
padding: 14px;
border: 1px solid #f3c1cc;
border-radius: var(--r-l);
background: #fdecef;
}
.product-bonus-coupon {
grid-row: span 2;
display: flex;
align-items: center;
justify-content: center;
min-width: 56px;
height: 56px;
padding: 0 8px;
border-radius: var(--r-m);
background: var(--accent);
color: #fff;
font-size: 18px;
font-weight: 800;
}
.product-bonus-coupon .steam::before {
content: "Steam";
font-size: 13px;
}
.product-bonus-title {
font-weight: 800;
}
.product-bonus-desc {
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
/* Tabs: main2.min.js hides/shows the panels with inline display */
.product-detail-desc {
min-width: 0;
border-radius: var(--r-l);
background: var(--card);
}
.product-detail-tabs-btns {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 8px;
border-bottom: 1px solid var(--line);
}
.product-detail-tabs-btns > div {
display: inline-flex;
flex: none;
align-items: center;
min-height: 44px;
padding: 0 14px;
border-radius: 10px;
color: var(--muted);
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
.product-detail-tabs-btns > div:hover {
color: var(--link);
}
.product-detail-tabs-btns > .active {
background: var(--soft);
color: var(--link);
}
.product-detail-tabs {
padding: 16px;
}
.product-detail-tabs > div:not(.active) {
display: none;
}
/* jQuery .show() writes display:block inline; this panel is a grid */
.product-detail-tabs > .product-detail-tab-games[style*="block"] {
display: grid !important;
}
.product-detail-tab-desc {
line-height: 1.6;
overflow-wrap: break-word;
}
.product-detail-tab-desc p {
margin: 0 0 12px;
}
.product-detail-tab-desc img,
.product-detail-tab-desc iframe,
.product-detail-tab-desc video {
max-width: 100%;
}
.product-detail-tab-desc img {
height: auto;
}
.product-detail-tab-desc table {
display: block;
max-width: 100%;
overflow-x: auto;
}
.product-detail-tab-desc hr,
.product-detail-tab-description hr {
margin: 16px 0;
border: 0;
border-top: 1px solid var(--line);
}
.pink-panel {
margin: 0 0 14px;
padding: 12px 14px;
border-radius: var(--r-m);
background: var(--warn-bg);
color: var(--warn);
font-weight: 600;
line-height: 1.5;
}
.white-panel {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
align-items: start;
gap: 4px 12px;
margin: 0 0 14px;
padding: 14px;
border-radius: var(--r-m);
background: var(--chip);
font-size: 14px;
}
.product-detail-tabs .white-panel:last-child {
margin: 16px 0 0;
}
.white-panel h3 {
margin: 3px 0 4px;
font-size: 15px;
}
.white-panel ul {
grid-column: 2;
margin: 0;
padding-left: 18px;
}
.white-panel > span {
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.white-panel--warn {
background: var(--warn-bg);
}
.white-panel--warn > span {
color: var(--warn);
font-weight: 600;
}
.white-panel-pic {
grid-row: span 2;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--card);
position: relative;
}
.white-panel-pic::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 18px;
height: 18px;
background: var(--link);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11' rx='1.5'/%3E%3Cpath d='M12 9v11M3 9h18M12 9C10 5 6.5 4.5 6.5 7S10 9 12 9zm0 0c2-4 5.5-4.5 5.5-2S14 9 12 9z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11' rx='1.5'/%3E%3Cpath d='M12 9v11M3 9h18M12 9C10 5 6.5 4.5 6.5 7S10 9 12 9zm0 0c2-4 5.5-4.5 5.5-2S14 9 12 9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.white-panel-pic.attention::before {
background: var(--muted);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.5'/%3E%3C/svg%3E");
}
.white-panel--warn .white-panel-pic.attention::before {
background: var(--warn);
}
.white-panel-text {
margin: 0 0 12px;
line-height: 1.6;
}
/* hard line breaks from the template read badly at phone width */
.white-panel-text br {
display: none;
}
.product-intab-text {
margin: 12px 0 8px;
font-weight: 700;
}
.product-intab-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 18px;
border: 1px solid var(--line);
border-radius: var(--r-m);
color: var(--link);
font-weight: 800;
}
.product-intab-btn:hover {
border-color: var(--primary);
color: var(--link);
}
.product-sys-req-tabs-btns {
display: inline-flex;
gap: 4px;
margin: 0 0 8px;
padding: 4px;
border-radius: var(--r-m);
background: var(--chip);
}
.product-sys-req-tabs-btns > div {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 16px;
border-radius: 9px;
color: var(--muted);
font-weight: 700;
cursor: pointer;
}
.product-sys-req-tabs-btns > .active {
background: var(--card);
color: var(--link);
box-shadow: 0 1px 2px rgba(20, 26, 37, .08);
}
.product-sys-req-tabs > div {
display: none;
}
.product-sys-req-tabs > .active {
display: block;
}
.sys-req {
display: grid;
gap: 2px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
}
.sys-req > span {
color: var(--muted);
font-size: 13px;
}
.sys-req > div {
font-weight: 600;
overflow-wrap: anywhere;
}
.product-detail-tab-system-req .product-intab-text {
margin-top: 14px;
font-weight: 600;
}
/* Tags under the tabs; the rest opens with .detail-tags-btn (main2.min.js toggles ul.active) */
.detail-tags {
padding: 0 16px 16px;
}
.detail-tags ul {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.detail-tags-title {
flex: 1 1 100%;
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
}
.detail-tags li a,
.detail-tags-btn {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 6px 12px;
border-radius: 22px;
background: var(--chip);
color: var(--text);
font-size: 13px;
font-weight: 600;
}
.detail-tags li a:hover {
background: var(--soft);
color: var(--link);
}
.detail-tags-btn {
background: transparent;
color: var(--link);
font-weight: 800;
cursor: pointer;
}
.detail-tags ul:not(.active) .detail-tags-btn ~ li {
display: none;
}
.detail-tags ul.active .detail-tags-btn {
order: 1;
}
/* Picture viewer, built by main2.min.js (imagePopup); it writes the picture as an inline `background` shorthand */
.image-popup {
position: fixed;
z-index: 110;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
}
.image-popup.image-popup-flex {
display: flex;
}
.image-popup-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(20, 26, 37, .88);
}
.image-popup-container {
position: relative;
width: min(1100px, 100%);
aspect-ratio: 16 / 9;
max-height: calc(100vh - 32px);
background-position: center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
.image-popup-prev,
.image-popup-next,
.image-popup-close {
position: absolute;
z-index: 1;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
color: var(--text);
cursor: pointer;
}
.image-popup-prev,
.image-popup-next {
top: 50%;
margin-top: -22px;
}
.image-popup-prev {
left: 8px;
}
.image-popup-next {
right: 8px;
}
.image-popup-close {
top: 8px;
right: 8px;
}
.image-popup-prev::before,
.image-popup-next::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
margin: -5px 0 0 -3px;
border: solid currentColor;
border-width: 2px 0 0 2px;
transform: rotate(-45deg);
}
.image-popup-next::before {
margin-left: -7px;
transform: rotate(135deg);
}
.image-popup-close::before,
.image-popup-close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2px;
margin: -1px 0 0 -9px;
border-radius: 1px;
background: currentColor;
transform: rotate(45deg);
}
.image-popup-close::after {
transform: rotate(-45deg);
}
/* Under the product (views/game/_aside.php): similar games grid, advantages chips, then the giveaways slider (layouts/_game.php) */
.product-detail-aside {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin: 32px 0 0;
}
.product-advantages__title {
margin: 0 0 10px;
font-size: 15px;
font-weight: 800;
}
.product-detail-aside ~ .bottom-slider-container {
margin-top: 16px;
}
/* «Name / Все …»: each part stays whole; when both don't fit beside the arrows, the link goes under the name */
.bottom-slider-container .card__title {
flex-wrap: wrap;
gap: 0 6px;
white-space: nowrap;
}
.bottom-slider-container .card__title a {
padding: 10px 0;
}
@media (min-width: 600px) {
.sys-req {
grid-template-columns: 180px minmax(0, 1fr);
gap: 12px;
}
}
@media (min-width: 900px) {
.product-detail {
grid-template-columns: minmax(0, 1fr) 360px;
grid-template-areas:
"head head"
"media buy"
"feat buy"
"bonus buy"
"tabs buy";
gap: 16px 24px;
}
.product-detail > .header {
grid-area: head;
}
.product-detail .product-preview {
grid-area: media;
}
.product-detail .specification {
grid-area: buy;
position: sticky;
top: 16px;
gap: 14px;
padding: 22px;
border-radius: var(--r-xl);
}
.product-detail > .types {
grid-area: feat;
}
.product-detail > .product-bonus-wrap {
grid-area: bonus;
}
.product-detail > .product-detail-desc {
grid-area: tabs;
}
.product-detail .title {
font-size: 34px;
}
.product-detail .title--long {
font-size: 26px;
}
.product-preview-items {
border-radius: var(--r-xl);
}
.product-mini-preview-prev,
.product-mini-preview-next {
position: absolute;
z-index: 2;
top: 50%;
display: block;
width: 32px;
height: 32px;
margin-top: -16px;
border-radius: 50%;
background: rgba(255, 255, 255, .94);
box-shadow: var(--shadow);
color: var(--text);
cursor: pointer;
}
.product-mini-preview-prev {
left: 6px;
}
.product-mini-preview-next {
right: 6px;
}
.product-mini-preview-prev::before,
.product-mini-preview-next::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -4px 0 0 -2px;
border: solid currentColor;
border-width: 2px 0 0 2px;
transform: rotate(-45deg);
}
.product-mini-preview-next::before {
margin-left: -6px;
transform: rotate(135deg);
}
.product-mini-preview-prev.swiper-button-disabled,
.product-mini-preview-next.swiper-button-disabled {
display: none;
}
.specification > .buy-zone {
order: 0;
}
.buy-price {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"price badge"
"price old";
align-items: end;
gap: 4px 12px;
}
.buy-price .price {
grid-area: price;
font-size: 38px;
line-height: 1;
}
.buy-price .discount {
grid-area: badge;
justify-self: start;
}
.buy-price .old-price {
grid-area: old;
}
.buy-bar {
position: static;
flex-direction: column;
align-items: stretch;
gap: 10px;
min-height: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
body.has-buy-bar {
padding-bottom: 0;
}
.buy-bar__price {
display: none;
}
.buy-bar > .product-wish {
order: 3;
}
.buy-bar > .subscribe-panel {
order: 4;
}
.buy-bar .subscribe-panel.active {
position: static;
box-shadow: none;
}
.simple-buy-btn,
.notavailable-btn {
min-height: 56px;
font-size: 17px;
}
.product-preorder-btn {
position: relative;
}
.product-preorder-notice.full {
right: 0;
left: 0;
}
.product-wish .subscribe {
width: 100%;
}
.product-wish .subscribe p {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
.types > div {
padding: 8px 12px;
font-size: 13px;
}
.product-detail-desc {
border-radius: var(--r-xl);
}
.product-detail-tabs-btns > div,
.product-sys-req-tabs-btns > div {
min-height: 40px;
}
.product-detail-tabs {
padding: 20px 24px;
}
.detail-tags {
padding: 0 24px 20px;
}
.detail-tags li a,
.detail-tags-btn {
min-height: 36px;
}
}
@media (min-width: 1200px) {
.product-detail {
grid-template-columns: minmax(0, 1fr) 380px;
}
}
/* ---------- Cart (views/buy/cart.php) ---------- */
/* Phone: one column, total + checkout button stick above the bottom nav. >=900: form | sticky summary */
.cart-page {
max-width: 1120px;
margin: 0 auto;
}
.cart > * + * {
margin-top: 14px;
}
.cart .payment-types-title {
margin: 0;
}
.cart__main {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
min-width: 0;
}
.cart .card .title {
margin: 0 0 10px;
font-size: 16px;
font-weight: 800;
}
.cart .clear {
display: none;
}
.cart .alert {
display: none;
margin-top: 8px;
padding: 10px 12px;
border: 1px solid #f3c1cc;
border-radius: var(--r-m);
background: #fdecef;
color: var(--accent);
font-size: 13px;
font-weight: 600;
}
.cart .alert--show {
display: block;
}
/* Items: the row and its direct children are read by the page script (delete, quantity) */
.pay-product-main.card {
padding-top: 4px;
padding-bottom: 4px;
}
.pay-product-main--row {
display: grid;
grid-template-columns: 88px minmax(0, 1fr) auto auto;
grid-template-areas:
"img name name name"
"qty qty price del";
align-items: center;
gap: 8px 12px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
.pay-product-main--row:last-child {
border-bottom: 0;
}
.pay-product-main--item.catalog-item__img {
grid-area: img;
align-self: start;
}
.pay-product-main .catalog-item__img a {
display: block;
overflow: hidden;
border-radius: var(--r-s);
}
.pay-product-main .catalog-item__img img {
display: block;
width: 100%;
aspect-ratio: 185 / 107;
object-fit: cover;
border-radius: var(--r-s);
background: var(--chip);
}
.pay-product-main--item.catalog-item__name {
grid-area: name;
align-self: start;
min-width: 0;
font-weight: 800;
line-height: 1.3;
}
.pay-product-main .catalog-item__name > a {
color: var(--text);
}
.pay-product-main .catalog-item__name > a:hover {
color: var(--link);
}
.pay-product-main .catalog-item__regions {
margin-top: 4px;
color: var(--muted);
font-size: 12px;
font-weight: 500;
line-height: 1.4;
}
.pay-product-main .catalog-item__error {
display: inline-block;
margin-top: 6px;
padding: 3px 8px;
border-radius: var(--r-s);
background: #fdecef;
color: var(--accent);
font-size: 12px;
font-weight: 700;
}
.pay-product-main--item.digit-field {
grid-area: qty;
justify-self: start;
}
.digit-field {
display: inline-flex;
align-items: stretch;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
}
.digit-field-button {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
min-height: 44px;
color: var(--text);
font-size: 20px;
font-weight: 700;
cursor: pointer;
user-select: none;
}
.digit-field-button:hover {
background: var(--chip);
}
.digit-field-button.inactive {
background: none;
color: #9aa4b2;
cursor: default;
}
.digit-field .quant_value {
width: 40px;
padding: 0;
border: 0;
background: transparent;
font-size: 16px;
font-weight: 700;
text-align: center;
}
.pay-product-main--item.catalog-item__price {
grid-area: price;
justify-self: end;
font-size: 17px;
font-weight: 800;
white-space: nowrap;
}
.pay-product-main--item.product__delete {
grid-area: del;
justify-self: end;
margin-right: -10px;
}
/* the page script listens on the svg itself, so the svg is the whole hit area */
.product__delete svg {
display: block;
width: 44px;
height: 44px;
padding: 15px;
border-radius: 50%;
cursor: pointer;
}
.product__delete svg path {
fill: var(--muted);
}
.product__delete svg:hover {
background: var(--chip);
}
/* Payment method: pseudo select; the list is wrapped by jquery.scrollbar (.scroll-wrapper > .scroll-content, both keep the classes) */
.pay-options {
display: grid;
gap: 4px;
}
.payment-method-container {
position: relative;
}
.payment-method-container > label {
display: block;
margin: 0 0 10px;
font-size: 16px;
font-weight: 800;
}
.pseudo-selector {
position: relative;
display: flex;
align-items: center;
min-height: 52px;
padding: 0 44px 0 10px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
cursor: pointer;
}
.pseudo-selector:hover {
border-color: var(--muted);
}
.pseudo-selector::after {
content: "";
position: absolute;
top: 50%;
right: 18px;
width: 8px;
height: 8px;
margin-top: -6px;
border: solid var(--muted);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.pseudo-selector.opened::after {
margin-top: -2px;
transform: rotate(-135deg);
}
.payment-method {
display: flex;
align-items: center;
min-height: 44px;
padding-left: 52px;
background-position: left center;
background-repeat: no-repeat;
background-size: 38px 25px;
font-weight: 600;
line-height: 1.3;
}
.pseudo-selector-list {
display: none;
position: absolute;
z-index: 35;
top: 100%;
right: 0;
left: 0;
max-height: 320px;
margin-top: 4px;
overflow-y: auto;
padding: 4px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
box-shadow: var(--shadow);
}
.pseudo-selector-list.scroll-content {
max-height: 310px;
box-shadow: none;
}
.pseudo-selector-list .payment-method {
min-height: 48px;
padding: 0 12px 0 64px;
border-radius: var(--r-s);
background-position: 14px center;
cursor: pointer;
}
.pseudo-selector-list .payment-method:hover,
.pseudo-selector-list .payment-method.selected {
background-color: var(--soft);
}
.payment-method.bln { background-image: url(/images/paysystems/icon-beeline.svg); }
.payment-method.s2pc { background-image: url(/images/paysystems/icon-bankcard.svg); }
.payment-method.rcc { background-image: url(/images/paysystems/icon-bankcard.svg); }
.payment-method.sbp { background-image: url(/images/paysystems/icon-sbp.svg); }
.payment-method.tbank { background-image: url(/images/paysystems/icon-tbank.svg); }
.payment-method.atm { background-image: url(/images/paysystems/icon-terminal.svg); }
.payment-method.megafon { background-image: url(/images/paysystems/icon-megafon.svg); }
.payment-method.mts { background-image: url(/images/paysystems/icon-mts.svg); }
.payment-method.qiwi { background-image: url(/images/paysystems/icon-qiwi.svg); }
.payment-method.tl2 { background-image: url(/images/paysystems/icon-tele2.svg); }
.payment-method.yandex { background-image: url(/images/paysystems/icon-yandex.svg); }
.payment-method.wmr { background-image: url(/images/paysystems/icon-webmoney.svg); }
.payment-method.moneta { background-image: url(/images/paysystems/icon-moneta.svg); }
.payment-method.alipay { background-image: url(/images/paysystems/icon-alipay.svg); }
.payment-method.unionpay { background-image: url(/images/paysystems/icon-unionpay.svg); }
.payment-method.wechat { background-image: url(/images/paysystems/icon-wechat.svg); }
.payment-method.sberpay { background-image: url(/images/paysystems/icon-sberpay.svg); }
.payment-method.yoomoney { background-image: url(/images/paysystems/icon-yoomoney.svg); }
.payment-method.account {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIyIDQgMjEgMTYiIGhlaWdodD0iMTlweCIgd2lkdGg9IjE5cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2Y2MzI1YyIgZD0iTTE5LDRINUEzLDMsMCwwLDAsMiw3VjE3YTMsMywwLDAsMCwzLDNIMTlhMywzLDAsMCwwLDMtM1Y3QTMsMywwLDAsMCwxOSw0Wm0xLDEwLjNIMTdhMi4zLDIuMywwLDAsMSwwLTQuNmgzWk0yMCw4SDE3YTQsNCwwLDAsMCwwLDhoM3YxYTEsMSwwLDAsMS0xLDFINWExLDEsMCwwLDEtMS0xVjdBMSwxLDAsMCwxLDUsNkgxOWExLDEsMCwwLDEsMSwxWm0tNCw0YTEsMSwwLDEsMCwxLTFBMSwxLDAsMCwwLDE2LDEyWiI+PC9wYXRoPjwvc3ZnPg==");
background-size: 36px 22px;
}
.payment-method-hint {
padding: 12px 14px;
border-radius: var(--r-m);
background: var(--soft);
font-size: 13px;
line-height: 1.5;
}
.payment-method-hint p {
margin: 0 0 4px;
}
.payment-method-hint .payment-method-hint__img {
margin-top: 8px;
}
.payment-method-hint img {
max-width: 100%;
height: auto;
}
/* Promo code and loyalty discount */
.promocode-hint {
margin: 0 0 10px;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.promocode-error-hint {
display: none;
margin: 0 0 10px;
color: var(--accent);
font-size: 13px;
}
.promocode-form {
display: flex;
gap: 8px;
}
.promocode-form input {
flex: 1 1 auto;
min-width: 0;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
}
.promocode-button {
display: inline-flex;
flex: none;
align-items: center;
min-height: 44px;
padding: 0 18px;
border-radius: var(--r-m);
background: var(--primary);
color: #fff;
font-weight: 800;
cursor: pointer;
}
.promocode-button:hover {
background: var(--primary-hover);
}
.promocode-value {
display: flex;
flex: 1 1 auto;
align-items: center;
min-width: 0;
min-height: 44px;
padding: 0 14px;
border: 1px dashed var(--good);
border-radius: var(--r-m);
background: #eef8f1;
color: var(--good);
font-weight: 800;
overflow-wrap: anywhere;
}
.promocode-remove-button {
position: relative;
flex: none;
width: 44px;
height: 44px;
border-radius: var(--r-m);
background: var(--chip);
cursor: pointer;
}
.promocode-remove-button::before,
.promocode-remove-button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 2px;
margin: -1px 0 0 -8px;
border-radius: 1px;
background: var(--muted);
transform: rotate(45deg);
}
.promocode-remove-button::after {
transform: rotate(-45deg);
}
.discount-text {
margin: 0 0 6px;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.discount-list > br {
display: none;
}
.discount-list {
display: grid;
margin: 0 0 10px;
}
.discount-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid var(--line);
font-size: 14px;
}
.discount-value {
font-weight: 800;
}
.discount-hint {
padding: 10px 12px;
border-radius: var(--r-m);
background: var(--soft);
font-size: 13px;
line-height: 1.5;
}
/* Guest: e-mail, terms, captcha */
.tools--main {
display: grid;
gap: 16px;
}
.email-container input {
display: block;
width: 100%;
min-height: 48px;
margin: 0 0 8px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
}
.email-container p {
margin: 0;
font-weight: 700;
overflow-wrap: anywhere;
}
.email-container #prev_button {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-left: 6px;
color: var(--link);
text-decoration: underline;
cursor: pointer;
}
.custom-checkbox__checkbox {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.custom-checkbox__content {
display: flex;
align-items: flex-start;
gap: 10px;
}
.custom-checkbox__custom {
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: -10px -6px -10px -10px;
cursor: pointer;
}
.custom-checkbox__custom-box {
display: block;
width: 24px;
height: 24px;
border: 2px solid var(--muted);
border-radius: 6px;
background: var(--card);
}
.custom-checkbox__checkbox:checked + .custom-checkbox__content .custom-checkbox__custom-box {
border-color: var(--primary);
background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.custom-checkbox__checkbox:focus-visible + .custom-checkbox__content .custom-checkbox__custom-box {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.custom-checkbox__label {
font-size: 13px;
line-height: 1.5;
}
/* Summary: sticks to the bottom on the phone, to the top of the right column from 900px */
.cart__summary {
position: sticky;
z-index: 30;
bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 12px;
margin: 14px calc(var(--gutter) * -1) 0;
padding: 10px var(--gutter);
border-top: 1px solid var(--line);
background: var(--card);
box-shadow: 0 -4px 16px rgba(20, 26, 37, .06);
}
.cart__summary > .cart-error-container {
grid-column: 1 / -1;
order: -1;
}
.cart__summary .cart-error-container .alert {
margin-top: 0;
}
.total-container {
min-width: 0;
}
.total-container .title {
margin: 0;
font-size: 18px;
font-weight: 800;
line-height: 1.25;
}
.total-container .title span {
margin-left: 6px;
}
.service-charge,
.promocode--notification,
.discount--notification,
.payment-fee--notification {
margin: 2px 0 0;
color: var(--muted);
font-size: 12px;
font-weight: 500;
line-height: 1.35;
}
.service-charge {
margin: 0 0 2px;
}
.pay-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 24px;
border: 0;
border-radius: 14px;
background: var(--primary);
color: #fff;
font-size: 16px;
font-weight: 800;
}
.pay-button:hover {
background: var(--primary-hover);
}
.cart-empty {
margin: 0;
padding: 48px 16px;
border-radius: var(--r-xl);
background: var(--card);
color: var(--muted);
font-size: 18px;
font-weight: 800;
text-align: center;
}
@media (min-width: 600px) {
.pay-product-main--row {
grid-template-columns: 120px minmax(0, 1fr) auto auto 44px;
grid-template-areas: "img name qty price del";
}
.pay-product-main--item.catalog-item__name {
align-self: center;
}
.pay-product-main--item.product__delete {
margin: 0;
}
}
@media (min-width: 900px) {
.cart {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
grid-template-areas:
"title title"
"main sum";
gap: 20px 24px;
}
.cart > * + * {
margin-top: 0;
}
.cart .payment-types-title {
grid-area: title;
}
.cart__main {
grid-area: main;
gap: 16px;
}
.cart__summary {
grid-area: sum;
align-self: start;
top: 16px;
bottom: auto;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
margin: 0;
padding: 20px;
border: 0;
border-radius: var(--r-xl);
box-shadow: none;
}
.total-container .title {
font-size: 24px;
}
.pay-button {
width: 100%;
min-height: 56px;
font-size: 17px;
}
.digit-field-button {
width: 36px;
min-height: 36px;
}
}
/* ---------- Catalog (views/site/search.php; FullSearch in main2.min.js drives the filters) ---------- */
/* Phone: filters sit in a full-height panel (site.js opens it). >=900: sticky left column 280px */
.catalog__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 12px;
margin: 0 0 12px;
}
.catalog__title {
margin: 0;
}
.catalog__found {
margin: 0;
color: var(--muted);
font-weight: 600;
}
.catalog__found .search-items {
color: var(--text);
font-weight: 800;
}
.catalog__search {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
}
.catalog__search-field {
position: relative;
display: flex;
flex: 1 1 auto;
align-items: center;
min-width: 0;
min-height: 48px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
color: var(--muted);
}
.catalog__search-field:focus-within {
border-color: var(--primary);
box-shadow: inset 0 0 0 1px var(--primary);
}
.catalog__search-field .i {
position: absolute;
left: 14px;
pointer-events: none;
}
.catalog__search-field input {
width: 100%;
min-width: 0;
min-height: 46px;
padding: 0 14px 0 44px;
border: 0;
border-radius: var(--r-m);
background: transparent;
color: var(--text);
outline: none;
}
.catalog__search-field input::placeholder,
.filter-search::placeholder,
.filter-select-input::placeholder {
color: var(--muted);
opacity: 1;
}
.catalog__search .search-page-top-reset {
flex: none;
padding: 0 12px;
}
/* Filters panel */
.catalog__filters {
position: fixed;
z-index: 90;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
width: min(100%, 420px);
background: var(--card);
box-shadow: 0 0 32px rgba(20, 26, 37, .2);
transform: translateX(100%);
visibility: hidden;
transition: transform .25s ease, visibility 0s linear .25s;
}
.catalog__filters.is-open {
transform: none;
visibility: visible;
transition: transform .25s ease;
}
.catalog__filters.is-open + .drawer-backdrop {
opacity: 1;
visibility: visible;
transition: opacity .25s ease;
}
.catalog__filters-title {
margin: 0;
font-size: 18px;
}
.catalog__filters-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 16px 16px;
}
.catalog__filters-foot {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 8px;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--line);
background: var(--card);
}
.catalog__apply {
gap: .25em;
}
.filter-group {
padding: 16px 0;
border-bottom: 1px solid var(--line);
}
.filter-group:last-child {
border-bottom: 0;
}
.filter-group__title {
display: block;
margin: 0 0 10px;
font-size: 14px;
font-weight: 800;
}
/* Toggles: / with .active, set by main2.min.js (aria-pressed follows in site.js) */
.filter-toggles {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.filter-toggles > .chip,
.search-result-sort-types > .chip {
font-style: normal;
user-select: none;
}
.filter-toggles > .chip.active,
.search-result-sort-types > .chip.active {
border-color: var(--primary);
background: var(--primary);
color: #fff;
}
.filter-toggles > .chip.active::before {
content: "";
width: 10px;
height: 6px;
margin: -3px 0 0;
border: solid currentColor;
border-width: 0 0 2px 2px;
transform: rotate(-45deg);
}
/* Checkboxes: label > text + input + i; the input stays focusable, the draws the box (tags: the chip) */
.filter-cb {
position: relative;
}
.filter-cb label {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
.filter-cb input {
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 20px;
margin: -10px 0 0;
opacity: 0;
}
.filter-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 12px;
margin-top: 10px;
}
.filter-cb120 label {
min-height: 44px;
padding-left: 30px;
font-weight: 600;
line-height: 1.25;
}
.filter-cb120 i {
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 20px;
margin-top: -10px;
border: 2px solid var(--muted);
border-radius: 6px;
background: var(--card);
}
.filter-cb120 input:checked + i {
border-color: var(--primary);
background: var(--primary);
}
.filter-cb120 input:checked + i::after {
content: "";
position: absolute;
top: 1px;
left: 5px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.filter-cb input:focus-visible + i {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Tags: built by main2.min.js from ?tags= JSON (.filter-cb175, .hidden over 14, "Показать больше") */
.filter-search,
.filter-select-input {
width: 100%;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
color: var(--text);
}
.filter-search:focus,
.filter-select-input:focus {
border-color: var(--primary);
outline: none;
box-shadow: inset 0 0 0 1px var(--primary);
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.filter-search + .tags-list:not(:empty) {
margin-top: 12px;
}
.tags-list .filter-cb.hidden {
display: none;
}
.filter-cb175 label {
z-index: 0;
min-height: 44px;
padding: 0 14px;
border-radius: 22px;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
.filter-cb175 i {
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid var(--line);
border-radius: inherit;
background: var(--card);
}
.filter-cb175 label:hover i {
border-color: var(--primary);
}
.filter-cb175 input:checked + i {
border-color: var(--primary);
background: var(--soft);
}
/* white text needs :has(); without it the checked tag stays on the light fill above */
@supports selector(:has(*)) {
.filter-cb175 input:checked + i {
background: var(--primary);
}
.filter-cb175 label:has(input:checked) {
color: #fff;
}
}
.tags-list .gifts-users-show-more {
min-height: 44px;
border: 0;
background: transparent;
}
/* Price: jQuery UI slider; main2.min.js puts