:root{--bg:#f3f5f7;--card:#fff;--text:#0f172a;--muted:#64748b;--accent:#16a34a;--danger:#ef4444;--border:#e5e7eb;}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text);}
.topbar{position:sticky;top:0;z-index:10;background:#fff;}
.container{max-width:1200px;margin:0 auto;padding: 12px 10px 0px 10px;}
.brand{text-decoration:none;font-family: "Orbitron", system-ui, sans-serif;font-weight:990;font-size:clamp(22px, 2.6vw, 26px);text-transform: uppercase;}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;background:#fff;}
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:20px;}
.select,.input{padding:6px 4px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#fff;}

/* Results bar (счётчик слева + сортировка справа) */
.resultsBar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:2px 2px;}
.resultsCount{font-size:13px;color:var(--text);}
.resultsSort{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);}
.resultsSortLabel{color:#262a36;}
.sortSelect{border:0;background:transparent;color:#262a36;font-size:13px;cursor:pointer;padding:1px 8px 0px 3px;border-radius:8px;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%230f172a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0px center;background-size:12px 12px;}
.sortSelect:focus{outline:2px solid rgba(15,23,42,.18);outline-offset:2px;}
@media (max-width:640px){
  .resultsBar{flex-wrap:wrap;gap:10px;}
  .resultsSort{margin-left:auto;}
}
.body-bar1 {
    padding: 12px 10px 6px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Search (top-right icon + раскрывающаяся строка поиска) */
.topbarInner{position:relative;}
.topbarHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.headerActions{display:flex;align-items:center;}
.searchWrap{display:flex;align-items:center;gap:8px;}
.searchToggle{width:33px;height:33px;border-radius:15px;background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.searchToggle svg{width:18px;height:18px;fill:currentColor;opacity:.85;}
.searchToggle:active{transform:translateY(1px);}
.searchPanel{max-width:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-width .25s ease, opacity .2s ease;}
.searchWrap.open .searchPanel{max-width:320px;opacity:1;pointer-events:auto;}
.searchInput{min-width:240px; background: #1452e7 !important;}
.colorA{font-size:clamp(12px, 1.8vw, 18px); padding:0 0 3px 0;}
@media (max-width:640px){
  .topbarHeader{flex-wrap:nowrap;}
  .searchPanel{position:absolute;left:16px;right:16px;top:52px;max-width:none;opacity:0;transform:translateY(-8px);transition:opacity .2s ease, transform .2s ease;overflow:visible;}
  .searchWrap.open .searchPanel{opacity:1;transform:translateY(0);}
  .searchInput{width:100%;min-width:0;}
}
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding:16px 0 28px;}
@media (max-width:1200px){.grid{grid-template-columns:repeat(4,1fr);}}
@media (max-width:900px){.grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.grid{grid-template-columns:repeat(2,1fr);}}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,.03);display: flex;flex-direction: column;height: 100%;}
.coverWrap{position:relative;width:100%;background:#111827;display:flex;align-items:center;justify-content:center;color:#fff;}
.coverWrap img{width:100%;height:100%;object-fit:cover;display:block;}
.platformStrip{position:absolute;border-radius: 2px 0px 20px 2px;left:0px;top:0px;color:#fff;font-weight:600;padding:6px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1.4px;background:#1452e7;}
.body{padding:12px;flex:1;display:flex;flex-direction:column;}
.title{color: #3f3532;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;font-weight:600;font-size:14px;line-height:1.25;margin:0 0 5px;min-height:36px;}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin: 0 0 8px;display: flex;align-items: center;justify-content: space-between;margin-top: auto;}
.discount{background: #cc3444;font-weight:600;border-radius: 6px;padding: 3px 6px;color:#fff;font-size:12px;}
.until{font-size:12px;color:var(--muted);}
.price{font-weight:650;font-size:18px;}
.buyBtn{border:none;background:var(--accent);color:#fff;font-weight:900;padding:10px 12px;border-radius:12px;cursor:pointer;font-size:11px;}

/* Preorders card (separate styling, same structure as regular cards) */
.card--preorder .preorderBadge{
  align-items:center;
  color:#262a36;
  font-weight:500;
  font-size:8px;
  letter-spacing:.6px;
  text-transform:uppercase;
  margin:0 0 4px 0;
}

/* On preorders list: price should be left-aligned */
.card--preorder .priceRow{
  justify-content:flex-start;
}
.card--preorder .priceRow .price{
  margin-right:auto;
}

/* Modal: RU status */
.modalRu.ruUnknown{opacity:.9;}

/* Modal: release date line */
.modalRelease{
  margin: 0px 0px 10px 0px;
  font-size:13px;
  color:var(--muted);
}
.pager{display:flex;gap:8px;justify-content:center;padding:10px 0 30px;flex-wrap:wrap;}
.pager button{border:1px solid var(--border);background:#fff;padding:8px 12px;border-radius:18px;cursor:pointer;}
.pager button[disabled]{opacity:.55;cursor:not-allowed;}
.layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh;}
.side{background:#0b1220;color:#e5e7eb;padding:18px;position:sticky;top:0;height:100vh;}
.side h2{margin:0 0 14px;font-size:16px; color: #fff !important;}
.selecColor{background: rgba(255, 255, 255, .03) !important;border: 1px solid var(--border) !important;color: #0f172a !important;padding: 6px 4px;border-radius: 10px;}
.selecColor1{box-shadow: 0 6px 14px rgba(15, 23, 42, .10);font-size: clamp(11px, 1.8vw, 14px);background: rgb(249 250 254) !important;border: 1px solid #e0e6ef !important;color: #262a36 !important;padding: 6px 8px 6px 8px;border-radius: 10px;}
.colValue{background:#f9fafe;}
.nav a{display:block;color:#fff !important;text-decoration:none;padding:10px 10px;border-radius:10px;margin:6px 0;}
.nav a.active,.nav a:hover{background:#111b31; color:#fff !important}
.main{padding:18px;}
.adminCard{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;margin-bottom:14px;}
.btnDark{background:#111827;color:#fff;border:none;padding:10px 12px;border-radius:12px;font-weight:900;cursor:pointer;}
.btnGhost{background:rgba(255,255,255,.04);color:#111827;border:0px solid var(--border);padding:8px 7px;border-radius:12px;cursor:pointer;}
table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
th,td{padding:10px;border-bottom:1px solid var(--border);font-size:13px;text-align:left;}
th{background:#f8fafc;font-weight:900;}
tr:last-child td{border-bottom:none;}
.small{font-size:12px;color:var(--muted);}
.update-info,
.last-update,
.badge{display: none !important;}
.btnDanger{background:#ef4444;color:#fff !important;border:none;border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer}
.btnDanger:hover{filter:brightness(0.95)}
.selectAdm{color:#000000 !important;}
.bottom{margin-top:auto;}

/* Admin: groups by discount date */
.groupCard{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px;margin-bottom:12px;}
.groupHead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.groupTitle{font-weight:950;font-size:14px;}


}

}

}

/* Discount date buttons (adaptive) */
.discountTabs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:stretch;
  margin:12px 0 16px 0;
}
.discountTabBtn{
  appearance:none;
  border:1px solid var(--border);
  background:#0e192b;
  border-radius:14px;
  padding:10px 12px;
  min-height:44px;
  cursor:pointer;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  text-align:center;
  user-select:none;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
}
.discountTabBtn:hover{
  box-shadow:0 10px 26px rgba(15,23,42,.10);
  transform:translateY(-1px);
}
.discountTabBtn.active{
  background:#ef4444;
  color:#fff;
  border-color:#ef4444;
}
.discountTabBtn .dtText{
  font-size:13px;
  font-weight:850;
  letter-spacing:.2px;
  line-height:1.1;
  opacity:.95;
}
.discountTabs.two .discountTabBtn{
  flex:1 1 calc(50% - 12px);
  min-width:260px;
}
@media(max-width:560px){
  .discountTabs{gap:10px;margin:26px 0 14px 0;}
  .discountTabs.two .discountTabBtn{flex:1 1 100%;min-width:0;}
  .discountTabBtn{width:100%;}
  .discountTabBtn{padding:10px 8px;}
  .discountTabBtn .dtText{font-size:11px;}
}


.modalOpen{overflow:hidden;}
.modalOverlay{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.55);
  z-index:9999;
}
.modalCard{
  width:min(780px, 96vw);
  background:#f4f7fc;
  color:#474f62;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  position:relative;
  padding:16px;
}
.modalClose{
  position:absolute;
  top:5px;
  right:5px;
  width:29px;
  height:29px;
  border-radius:14px;
  border:1px solid #d5dbe7;
  background:rgba(255,255,255,.06);
  color:#071f43;
  font-size:20px;
  line-height:26px;
  cursor:pointer;
}
.modalGrid{display:flex;gap:16px;align-items:flex-start;}
.modalLeft{width:220px;flex:0 0 220px;}
.modalCover{width:220px;height:220px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;}
.modalCover img{width:100%;height:100%;object-fit:cover;display:block;}
.noCoverBox{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;opacity:.9;}
.modalPlatforms{margin-top:10px;opacity:.8;font-size:12px;}
.modalRight{flex:1;min-width:0;padding-top:2px;}
.modalTitle{font-size:22px;font-weight:600;line-height:1.15;margin-bottom:5px;}
.modalEdition{opacity:.75;font-size:14px;margin-bottom:12px;}
.modalMetaRow{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.modalDiscount{font-weight:650;}
.modalUntil{opacity:.85;font-size:13px;}
.modalBuyRow{display:flex;gap:12px;align-items:center;flex-wrap:nowrap;}
.modalPrice{font-size:20px;font-weight:900;}
@media (max-width:560px){
  .modalGrid{flex-direction:row;}
  .modalLeft{width:100%;flex:0 0 auto;display:flex;gap:12px;align-items:flex-start;}
  .modalCover{width:120px;height:120px;}
  .modalPlatforms{margin-top:0;}
}

.modalRu{opacity:.95;font-size:13px;margin-bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:10px;border:1px solid rgba(154 208 182);/*background:rgba(22,163,74,.08);*/color:#2cb55d;font-weight:600;}
.modalRu.noRu{border-color:rgba(100,116,139,.35);background:rgba(100,116,139,.08);color:var(--muted);font-weight:700;}

.modalSub{opacity:.85;font-size:13px;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.modalSub .subIcon{height:18px;max-width:120px;object-fit:contain;display:block;}

/* modal responsive typography */
.modalTitle{font-size:clamp(18px, 4.8vw, 24px);}
.modalEdition{font-size:clamp(12px, 3.5vw, 14px);}
.modalRu,.modalSub,.modalUntil{font-size:clamp(12px, 3.4vw, 13px);}
.modalPrice{font-size:clamp(18px, 4.2vw, 20px);}
@media (max-width:560px){
  .modalCard{padding:12px;}
  .modalBuyRow{justify-content:space-between;}
  .modalPlatforms{font-size:12px;}
}

/* modal layout fixed on mobile */
.modalGrid{display:flex;gap:16px;align-items:flex-start;flex-wrap:nowrap;}
.modalCoverWrap{width:240px;flex:0 0 240px;}
.modalCoverWrap img{width:100%;height:auto;border-radius:14px;display:block;}
.modalPlatforms{letter-spacing: 0.06em;display:inline-block;padding:6px 10px;border-radius:12px;background:#1452e7;/*border:1px solid rgba(255,255,255,.10);*/font-weight:600;opacity:1;}
.modalDiscount{color:#f44a50;}
.modalDiscount1{color: #eaedf4;}
@media (max-width:560px){
  .modalCard{padding:12px;}
  .modalCoverWrap{width:150px;flex:0 0 150px;}
  .modalBuyRow{flex-wrap:nowrap;}
  .buyBtn{padding:10px 14px;font-size:14px;}
}


/* --- modal 360px hotfix --- */
.modalOverlay *{box-sizing:border-box;}
.modalCard{width:min(920px, 94vw); max-height:90vh; overflow:auto;}
.modalGrid{width:100%;}
.modalRight{flex:1; min-width:0;}
.modalRight *{min-width:0;}
@media (max-width:400px){
  .modalCoverWrap{width:120px;flex:0 0 120px;}
  .modalGrid{gap:12px;}
  .modalPlatforms{padding:5px 8px;font-size:14px;}
}


/* --- modal mobile keep 2 columns (fix overflow) --- */
.modalCard{overflow-x:hidden;}
.modalGrid{flex-wrap:nowrap;}
.modalLeft{display:flex;flex-direction:column;align-items:flex-start;}
.modalRight{overflow:hidden;}
.modalTitle{word-break:break-word;}
.modalEdition,.modalRu,.modalSub,.modalUntil,.modalPrice{word-break:break-word;}
.modalPlatforms{max-width:100%;text-align:center;align-self:flex-start;}

@media (max-width:400px){
  .modalLeft{width:120px;flex:0 0 120px;}
  .modalCover{width:120px;height:120px;}
  .modalPlatforms{width:120px;display:block;padding:8px 7px;}
}


/* --- modal responsive width bands: keep layout stable from 400px to 560px --- */
.modalCard{width:min(650px, 94vw); overflow-x:hidden; max-height:90vh; overflow-y:auto;}
.modalGrid{display:flex;align-items:flex-start;gap:16px;flex-wrap:nowrap;}
.modalLeft{display:flex;flex-direction:column;align-items:flex-start;flex:0 0 220px; width:220px;}
.modalCover{width:220px;height:220px;object-fit:cover;border-radius:14px;display:block;}
.modalPlatforms{color: #ffffff;width:220px;max-width:100%;display:flex;justify-content:center;align-items:center;}
.modalRight{flex:1;min-width:0;overflow:hidden;}
.modalTitle,.modalEdition,.modalRu,.modalSub,.modalUntil,.modalPrice{min-width:0;word-break:break-word;}

/* 560px and below: shrink left column but keep 2 columns */
@media (max-width:560px){
  .modalLeft{flex:0 0 150px; width:150px;}
  .modalCover{width:150px;height:150px;}
  .modalPlatforms{width:150px;}
  .modalGrid{gap:12px;}
}

/* 400px and below: further shrink */
@media (max-width:400px){
  .modalLeft{flex:0 0 120px; width:120px;}
  .modalCover{width:120px;height:140px;}
  .modalPlatforms{width:120px;}
}


/* === Buy button modifiers === */
.buyBtn {
  border-radius: 8px;
  font-weight: 550;
  white-space: nowrap;
}

.buyBtn--card {
  width: 100%;
  padding: 8px 6px;
  font-size: 11px;
}

.buyBtn--modal {
  padding: 8px 5px;
  font-size: 11px;
  /*min-width: 120px;*/
  flex-shrink: 1;
}

/* keep price and button on one line in modal */
.modalBuyRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.modalPrice {
  white-space: nowrap;
  flex-shrink: 0;
}



/* =========================================================
   Timeweb Cloud – inspired DARK theme (high contrast)
   (Overrides only; keeps existing layout/styling)
   ========================================================= */
:root{
  /* surfaces */
  --bg:#0b1220;          /* page background */
  --card:#0f1a2b;        /* cards / panels */
  --text:#e6edf6;        /* primary text */
  --muted:#9aaec6;       /* secondary text */
  --border:#1b2a41;      /* borders */

  /* accents */
  --accent:#4da3ff;      /* primary action */
  --danger:#ff5a66;
}

/* global */
body{background:#ebf1fd !important;color:#262a36 !important;}

a{color:var(--accent);}
a:hover{filter:brightness(1.07);}

/* top bar */
.topbar{
  background:rgb(235 241 253) !important;
  backdrop-filter:saturate(140%) blur(10px);
}
.brand{color:#1452e7 !important;opacity:.95;}

/* filters + inputs */
.badge,
.select,.input{
  background:rgba(255,255,255,.03);
  border:1px solid #e5e7eb!important;
}
.select::placeholder,.input::placeholder{color:var(--muted)!important;}
.select:focus,.input:focus{
  outline:none;
  border-color:rgba(77,163,255,.6)!important;
  box-shadow:0 0 0 3px rgba(77,163,255,.15);
}

/* results bar text */
.resultsCount{color:var(--text)!important;}

/* cards */
.gameCard,
.card{
  background:#eef5ff !important;
  border:1px solid #d5dbe7 !important;
  color:#262a36;
  /*box-shadow:0 10px 30px rgba(0,0,0,.25);*/
}
.gameCard .meta,
.gameCard .desc,
.muted{color:var(--muted)!important;}

/* modal */
.modalOverlay{background:rgba(0,0,0,.6)!important;}
.modal,
.modalContent{
  background:linear-gradient(180deg, rgba(15,26,43,.96), rgba(11,18,32,.96))!important;
  border:1px solid var(--border)!important;
  color:var(--text)!important;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
}

/* price visibility */
.price,
.modalPrice{color:#1452e7 !important;/*text-shadow:0 1px 0 rgba(0,0,0,.25);*/}

/* buttons (keep “buy” close to original, but Timeweb-ish blue) */
.buyBtn{
  background:linear-gradient(180deg, #66b3ff 0%, #2f7dff 100%)!important;
  color:#06101f!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 10px 18px rgba(47,125,255,.22);
}
.buyBtn:hover{filter:brightness(1.06);}
.buyBtn:active{transform:translateY(1px);}

/* secondary buttons if any */
button, .btn{
  color:inherit;
}

/* separators / lines */
hr{border-color:var(--border)!important;}

/* scrollbars (subtle) */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:10px;}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03);}



/* =========================================================
   Timeweb Cloud – DARK theme (v2, contrast & controls)
   ========================================================= */

/* Snow canvas overlay */
.snowCanvas{
  position:fixed;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:.45;
}
/* layering: snow above page, modal above snow */
.topbar, .container{ position:relative; z-index:3; }
.modalOverlay{ z-index:10 !important; }
.modal{ z-index:11 !important; }


/* Titles */
.title{
  color: #262a36 !important;
  opacity: .98;
}
.title:hover{ color: #262a36 !important; }

/* Search icon button */
.searchToggle{
  background: rgb(246 250 251) !important;
  border: 1px solid #d5dbe7 !important;
  color: #1452e7 !important;
}
.searchToggle:hover{
  color:#f6fafb !important;
  background: #1452e7 !important;
  border-color: rgba(77,163,255,.45) !important;
  box-shadow: 0 0 0 3px rgba(77,163,255,.12);
}
.searchToggle svg{ opacity: .9 !important; }

/* Reset button */
.btnGhost{
  color: #1452e7 !important;
  border: 0px solid #0b1220 !important;
}
.btnGhost:hover{
  border-color: rgba(77,163,255,.35) !important;
}
.btnGhost:active{ transform: translateY(1px); }
.btnGhost1{
  box-shadow: 0 6px 14px rgba(15, 23, 42, .10);
  font-size: clamp(11px, 1.8vw, 14px);
  background: rgb(249 250 254) !important;
  color: #262a36 !important;
  border: 1px solid #d5dbe7 !important;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.btnGhost1:hover{
  color:#f6fafb !important;
  background: #224bc0 !important;
  border-color: rgba(77,163,255,.35) !important;
}
.btnGhost1:active{ transform: translateY(1px); }

/* Pager buttons */
.pager button{
  background: #ebf1fd;
  color:#;
  border: 1px solid #d5dbe7;
}
.pager button:hover{
  color:#262a36 !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(77,163,255,.35) !important;
}
.pager button:disabled{
  opacity: .75;
  cursor: default;
  box-shadow: none !important;
}

/* Buy button redesign (Timeweb-like CTA) */
.buyBtn{
  letter-spacing: 0.06em;
  background: #1452e7 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 18px rgba(47,125,255,.25);
}
.buyBtn:hover{
  filter: brightness(1.06);
  box-shadow: 0 14px 26px rgba(47,125,255,.32);
}
.buyBtn:active{
  transform: translateY(1px);
  filter: brightness(0.98);
}

/* Modal typography */
.modalTitle{ color: #102248 !important; }
.modalText, .modalDesc, .modalMeta{ color: var(--muted) !important; }

/* Modal inner panels if present */
.modalContent .card,
.modalContent .gameCard{
  box-shadow: none !important;
}





/* ---------------- Cart UI ---------------- */
.headerActions{gap:8px;}
.cartToggle{
  color: #1452e7 !important;
  width:33px;height:33px;
  border-radius:15px;
  border:1px solid #d5dbe7;
  background:#f6fbff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.cartToggle:hover {
    color: #f6fafb !important;
    background: #1452e7 !important;
    border-color: rgba(77, 163, 255, .45) !important;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, .12);
}
.cartToggle svg{width:18px;height:18px;fill:currentColor;opacity:.85;}
.cartToggle:active{transform:translateY(1px);}
.cartCount{
  position:absolute;
  top:-6px;right:-6px;
  min-width:18px;height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-size:11px;
  font-weight:900;
  display:none;
  align-items:center;
  justify-content:center;
  border:1px solid #fff;
}

.cartOverlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.cartDrawer{
  width:min(650px, 94vw);
  /* behave like game modal card (no full-screen feel) */
  max-height:90vh;
  height:auto;
  background:#f7f8fd;
  color:#262a36;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:14px;
  position:relative;
  border-radius:16px;
}
.cartHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.cartTitle{
  color: #000;
  font-weight:650;
  font-size:18px;
  letter-spacing:.2px;
}
.cartRegion{opacity:.75;font-weight:600;}
.cartHeadActions{display:flex;align-items:center;gap:8px;}
.cartClearBtn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;}
.cartClearBtn:disabled{/*opacity:.5;*/cursor:not-allowed;}
.cartClose{
  width:28px;height:28px;
  border-radius:10px;
  border:1px solid #d5dbe7;
  background:rgba(255,255,255,.06);
  color:#1452e7;
  font-size:18px;
  line-height:24px;
  cursor:pointer;
}
.cartBody{
  padding:12px 2px 12px 2px;
  overflow:auto;
  flex:1;
}
.cartEmpty{
  padding:14px 10px;
  /*opacity:.85;*/
  font-size:14px;
}
.cartItem{
  display:flex;
  gap:12px;
  padding:10px;
  border:1px solid #d5dbe7;
  border-radius:14px;
  background:rgb(249 250 254);
  margin-bottom:10px;
}
.cartItemLeft{width:92px;flex:0 0 92px;}
.cartCover{
  width:92px;height:92px;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.cartCover img{width:100%;height:100%;object-fit:cover;display:block;}
.cartPlatforms{
    color: #fff;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    opacity: .85;
    text-align: center;
    /* border: 1px solid rgba(255, 255, 255, .12); */
    border-radius: 10px;
    padding: 6px;
    background: #1452e7;
}
.cartItemRight{flex:1;min-width:0;}
.cartItemTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.cartItemTitle{
  Color: #122449;
  font-weight:630;
  font-size:16px;
  line-height:1.2;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.cartRemove{
  width:28px;height:28px;
  border-radius:10px;
  border:1px solid #d5dbe7;
  background:rgba(255,255,255,.06);
  color:#1452e7;
  font-size:18px;
  cursor:pointer;
  line-height: 24px;
  flex:0 0 auto;
}
.cartEdition{color: #474f62;opacity:.75;font-size:12px;margin-top:4px;margin-bottom:6px;}
.cartSub{opacity:.9;font-size:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.cartSub .subIcon{height:16px;max-width:120px;object-fit:contain;display:block;}
.cartMeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px;margin-bottom:8px;}
.cartDisc{font-weight:650;color:#f44a50;font-size:14px;}
.cartUntil{color: #474f62;opacity:.85;font-size:14px;}
.cartPriceRow{display:flex;align-items:center;justify-content:space-between;}
.cartPrice{color: #1b2535;font-size:18px;font-weight:750;}
.cartFoot{
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:10px;
}
.cartTotalRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.cartTotalLabel{color: #000000;/*opacity:.85;*/font-size:14px;}
.cartTotalValue{color: #1b2535;font-weight:750;font-size:18px;}
.cartBuyBtn{font-weight: 630;width:100%;font-size:16px;padding:14px 14px;border-radius:10px;letter-spacing: 0.06em;}
.cartBuyBtn:disabled{opacity:.55;cursor:not-allowed;}
.cartHint{margin-top:8px;font-size:11px;opacity:.75;line-height:1.25;}

@media (max-width:560px){
  .cartOverlay{padding:10px;}
  .cartDrawer{width:94vw;border-radius:16px;padding:12px;}
  .cartItem{padding:9px;}
  .cartItemLeft{width:86px;flex:0 0 86px;}
  .cartCover{width:86px;height:86px;}
}

/* Buy button states (toggle add/remove without opening cart) */
.buyBtn.isInCart{
  /* override global .buyBtn gradient rules (they use !important) */
  background:#04cd15 !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 10px 18px rgba(22,163,74,.22) !important;
}
.buyBtn.isInCart:hover{
  filter:brightness(1.04);
  box-shadow:0 14px 26px rgba(22,163,74,.28) !important;
}
/* ---------------- end Cart UI ---------------- */


/* --- Site section tabs (PS Store-like) --- */
.siteTabsShell{
  max-width:1200px;
  margin-top: 20px;
  background: #f5f8ff;
  border-radius: 15px;
  padding:10px 16px 14px 16px;
  position:relative;
}
.siteTabs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  padding: 6px 46px;
  scrollbar-width:none;
}
.siteTabs::-webkit-scrollbar{display:none;}

.siteTab{
  appearance:none;
  border:1px solid var(--border);
  background:#0e192b;
  color:#fff;
  border-radius:999px;
  padding:10px 14px;
  min-height:40px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  font-weight:850;
  letter-spacing:.2px;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
}
.siteTab:hover{
  box-shadow:0 10px 26px rgba(15,23,42,.10);
  transform:translateY(-1px);
}
.siteTab.isActive{
  background:#ef4444;
  border-color:#ef4444;
}

.tabsArrow{
  font-size: 18px;
  font-weight: 600;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid #d5dbe7;
  background:#ebf1fd;
  color:#1a2345;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  box-shadow:0 10px 26px rgba(15,23,42,.10);
}
.tabsArrowLeft{ left:16px; }
.tabsArrowRight{ right:16px; }
.tabsArrow:active{ transform:translateY(-50%) scale(0.98); }

/* =========================================================
   Navigation (desktop + mobile)
   Desktop: centered text tabs with blue active state (like the first screenshot)
   Mobile: swipeable pill bar with arrows (like PlayStation Store)
   ========================================================= */

.siteTabsShell{
  box-shadow: 0 6px 14px rgba(15, 23, 42, .10);
  /*padding: 10px 16px 14px 16px;*/
}

.siteTabs{
  padding: 6px 0;
  gap: 26px;
  justify-content: center;
}

.siteTab{
  border: 0;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 8px 6px;
  min-height: unset;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 500;
  letter-spacing: .2px;
  box-shadow: none;
  transform: none;
  color: rgb(38 42 54);
}

.siteTab:hover{
  background: rgba(255,255,255,.04);
  box-shadow: none;
  transform: none;
  color: #1452e7;
}

.siteTab.isActive{
  background: transparent;
  border: 0;
  color: #1452e7;
  position: relative;
}

.siteTab.isActive::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: #1452e7;
  opacity: .95;
}

/* Arrows are hidden on desktop */
.tabsArrow{ display:none; }

/*
  Mobile: keep the SAME look as desktop (no white pill background),
  but allow horizontal swipe/scroll if tabs don't fit.
*/
@media (max-width: 720px){
  .siteTabsShell{ background: #f5f8ff;border-radius: 15px;padding:0px; margin-top:20px;}

  .siteTabs{
    justify-content: flex-start;
    gap: 18px;
    /* Leave room for overlay arrows */
    margin:0 8px;
    padding: 6px 0px 8px 0px;
  }

  /* Show arrows on mobile (while keeping the same visual style as desktop tabs) */
  .tabsArrow{ display:flex; }

  .tabsArrowLeft{ left:6px; }
  .tabsArrowRight{ right:6px; }
}



/* Subscriptions page */

/* Hide game-specific controls on subscriptions section */
body[data-tab="subs"] .resultsBar{ display:none; }

/* Reuse the main #grid container but switch it into a subscriptions grid */
.grid.gridSubs{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px;
}

/* --- Subscriptions: detail pages (Essential/Extra/Deluxe/EA Play) --- */
.subsDetail{ grid-column: 1 / -1; width: 100%; }
.subsDetailHead{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 4px 0 16px; }
.subsDetail .subsPageTitle{ font-size: 20px; font-weight: 600; letter-spacing: 0.2px; }
.subOfferGrid{
  display:flex;
  justify-content:center;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  align-items: stretch;
  margin-bottom: 18px;
}
.subOfferCard{
  max-height: 400px;
  max-width: 292px;
  background: rgb(252 254 253);
  border: 1px solid rgb(239 241 248);
  border-radius: 15px;
  /*padding: 14px;*/
  box-shadow: 0 6px 14px rgba(15, 23, 42, .10);
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.subOfferImg{
  border-radius: 15px;
  overflow:hidden;
  background: rgba(0,0,0,0.20);
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio: 1 / 1;
}
.subOfferImg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.subOfferTitle{font-size: 16px; margin-left: 10px;}
.subOfferTitle span{ opacity: 0.85; }
.subOfferPrice{ font-size: 18px; font-weight: 700; margin: 0px 0px 0px 10px; }
.subOfferCard .buyBtn{ margin: 0px 10px 10px 10px; font-size: clamp(14px, 1.6vw, 16px); }
.subsInfoBox{
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  background: rgb(252 254 253);
  border: 1px solid rgb(243 246 251);
  border-radius: 10px;
  padding: 10px;
}
.subsInfoTitle{ font-size: 18px; font-weight: 650; margin-bottom: 8px; }
.subsInfoText{ opacity: 0.85; line-height: 1.45; font-size: 14px;}

.subsGamesBlock{ margin-top: 18px; }
.subsGamesHead{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding: 14px 0 8px; }
.subsGamesTitle{ font-size: 14px; font-weight: 600; }
.subsGamesCount{ opacity: 0.8; font-size: 14px; font-weight: 700; }
.subsGamesGrid{ padding: 0 0 10px; }

@media (max-width: 900px){
  .subOfferGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .subOfferGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
/*.subOfferCard{ padding: 7px;}*/
  .subOfferPrice{ font-size: 18px; }
  .subsDetail .subsPageTitle{ font-size: 16px; }
}
.subsCard{
  box-shadow: 0 6px 14px rgba(15,23,42,.10);
  background: rgb(250 251 253);
  border: 0px solid rgba(11 18 32);
  border-radius: 15px;
  padding: 1px 1px 10px 1px;
  text-align:left;
  color: #fff;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.subsCard:hover{
  transform: translateY(-2px);
  border-color: rgba(11 18 32);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  background: rgb(250 251 253);
}
.subsImgWrap{
  border-radius: 15px;
  overflow:hidden;
  aspect-ratio: 1/1;
  background: rgba(0,0,0,0.25);
}
.subsImgWrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.subsName{
  color: #000;
  margin: 16px 12px 6px 12px;
  font-size: 15px;
  letter-spacing: 0.2px;
}
.subsPage{
  grid-column: 1 / -1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 16px;
}
.subsPageHead{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 10px;
}
.subsBackBtn{
  font-size: clamp(16px, 2.0vw, 20px);
  padding: 4px 8px;
}
.subsPageTitle{
  font-weight: 900;
  font-size: 18px;
}
.subsEmpty{
  padding: 26px 10px;
  opacity: 0.9;
}
@media (max-width: 980px){
  .grid.gridSubs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .grid.gridSubs{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
  .subsCard{ /*padding: 8px;*/ border-radius: 15px; }
  .subsName{ font-size: 16px; }
}

/* Подписки: тарифы (1/3/12) — на мобилке 2 колонки */
@media (max-width: 720px) {
  .subOfferGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    justify-content: center !important;
  }

  /* чтобы карточки нормально влезали в 2 колонки */
  .subOfferCard {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ===== Discounts (PlayStation-like overview) ===== */
/* On the Discounts overview page we don't show count/sort bar */
body[data-tab="discounts"][data-discounts-view="overview"] .resultsBar{
  display:none;
}

.discountBannersGrid{
  display: grid;
  width: 100%;
  gap: 18px;
  justify-content: center;
  align-items: start;
  margin-top: 14px;

  /* Desktop: 3 columns, each can grow up to 450px */
  grid-template-columns: repeat(3, minmax(135px, 450px));
}

/* Banner card fills its grid column */
.discountBannerCard{
  display:flex;
  flex-direction:column;
  gap:10px;
  text-decoration:none;
  color:inherit;
  width: 100%;
}

/* <= 900px: 2 columns */
@media (max-width: 900px){
  .discountBannersGrid{
    grid-template-columns: repeat(2, minmax(135px, 450px));
  }
}

/* <= 480px: strict 2x135px grid */
@media (max-width: 480px){
  .discountBannersGrid{
    grid-template-columns: repeat(2, 135px);
  }
  .discountBannerCard{
    width: 135px;
  }
}

.discountBannerImgWrap{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 15px;
  overflow:hidden;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 12px 19px rgba(15, 23, 42, .10);
}

.discountBannerImgWrap img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.discountBannerPlaceholder{
  width:100%;
  height:100%;
  background: radial-gradient(100% 100% at 50% 0%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.02) 100%);
}

.discountBannerCaption{
  font-weight: 600;
  font-size: clamp(12px, 1.6vw, 18px);
  padding: 12px 10px;
  opacity: .95;
}

/* Hide count/sort on Discounts overview (banner page) */
body[data-tab="discounts"][data-discounts-view="overview"] .resultsBar{ display:none; }

.allDeals{
  margin-top: 50px;
}

.allDealsHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 10px;
}

.allDealsTitle{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .2px;
}

.allDealsViewAll{
  font-size: 16px;
  color: #1452e7;
  text-decoration:none;
  font-weight: 600;
}

.allDealsShell{
  position: relative;
}

.allDealsTrack{
  --gap: 14px;
  --perView: 6;
  position: relative;
  overflow: hidden; /* no scrollbar */
  /* Arrows are overlayed, so do not reserve space.
     Reserving space makes cards smaller and can reveal a partial extra card. */
  padding: 6px 0;
  touch-action: pan-y;
}

/* Responsive per-view counts like PS Store */
@media (max-width: 1280px){ .allDealsTrack{ --perView: 4; } }
@media (max-width: 980px){ .allDealsTrack{ --perView: 3; } }
@media (max-width: 640px){ .allDealsTrack{ --perView: 2; } }

.allDealsInner{
  display:flex;
  gap: var(--gap);
  /* Prevent vertical stretching of items which creates empty space in shorter cards */
  align-items: flex-start;
  /* Make percentage widths for .allDealsItem resolve against the track width */
  width: 100%;
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform .35s ease;
}

.allDealsItem{
  flex: 0 0 auto;
  width: calc((100% - (var(--perView) - 1) * var(--gap)) / var(--perView));
  min-width: 0;
  display:flex;
}

/* Carousel cards: keep widths uniform; let height be natural to avoid empty bottom gaps */
.allDealsItem .card{ height: auto; width: 100%; }
.allDealsItem .title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em; /* reserve space for 2 lines */
}

/* Carousel cards should be compact: don't push the price block to the bottom */
.allDealsItem .bottom{
  margin-top: 6px;
}

.allDealsArrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 1px solid #dce0eb;
  border-radius: 999px;
  background: rgb(238 245 255);
  color: #2e3650;
  font-size: 28px;
  cursor:pointer;
  z-index: 2;
}
/* Place arrows inside the carousel, on top of крайних карточек */
.allDealsArrow.left{ left: 8px; }
.allDealsArrow.right{ right: 8px; }

.allDealsViewCard{
  display:block;
  width: 100%;
  height: 100%;
  text-decoration:none;
  color: inherit;
}

.allDealsViewCardInner{
  height: 100%;
  min-height: 340px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.16);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .4px;
  background: rgba(255,255,255,0.03);
}

@media (max-width: 700px){
  .allDealsTrack{ padding: 6px 0; }
  .allDealsViewCardInner{ min-height: 300px; }
}


/* Banner tiles (Discounts overview) — responsive size */
.discountBannersGrid{
  display: grid;
  gap: 18px;
  justify-items: center;
  align-items: start;
  /* 3 columns on wide screens when possible, otherwise auto-wrap */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.discountBannerCard{
  /* banner square size between 135 and 450, but not oversized on phones */
  --banner-size: clamp(135px, 28vw, 450px);
  width: var(--banner-size);
  max-width: 450px;
  min-width: 135px;
}

@media (max-width: 640px){
  .discountBannerCard{
    --banner-size: clamp(135px, 80vw, 320px);
  }
}

.discountBannerCard .bannerImgWrap{
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 18px;
}

.discountBannerCard img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.discountBannerCard .bannerCaption{
  margin-top: 10px;
  font-size: clamp(14px, 2.3vw, 22px);
  line-height: 1.1;
  text-align: center;
  font-weight: 700;
}



/* === Fix banners layout: make grid fill row and prevent flex shrink on overview === */
body[data-tab="discounts"][data-discounts-view="overview"] .discountTabs{
  display:block;
}

/* Mobile: force banner size down to 135px and keep them in rows (not a single column) */


/* === FIX: Discount banners responsive grid (authoritative override) === */
#discountBannersGrid.discountBannersGrid{
  display: grid !important;
  width: 100% !important;
  gap: 18px !important;
  justify-content: center !important;
  align-items: start !important;
  margin-top: 14px !important;
  grid-template-columns: repeat(3, minmax(135px, 450px)) !important;
}

/* Banner card should fill its grid cell, keep square image, and never use vw-based clamp */
#discountBannersGrid .discountBannerCard{
  width: 100% !important;
  max-width: 450px !important;
  min-width: 135px !important;
}

#discountBannersGrid .discountBannerImgWrap{
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
}

@media (max-width: 900px){
  #discountBannersGrid.discountBannersGrid{
    grid-template-columns: repeat(2, minmax(135px, 450px)) !important;
  }
}

@media (max-width: 480px){
  /* Strict: 2 columns of 135px on phones */
  #discountBannersGrid.discountBannersGrid{
    grid-template-columns: repeat(2, 135px) !important;
  }
  #discountBannersGrid .discountBannerCard{
    width: 135px !important;
    max-width: 135px !important;
    min-width: 165px !important;
  }
  /* Slightly smaller caption on very small screens */
  #discountBannersGrid .discountBannerCaption{
    font-size: 10px !important;
    padding: 8px 10px;
  }
}


/* === Banner blocks: fluid, smooth scaling from 340px to desktop ===
   Goal:
   - No hard jumps between breakpoints
   - Works down to 340px layout width
   - Banner size scales proportionally, min 135px, max 450px
   - Centers as a group and wraps naturally (2 on small, 3 on medium/large)
*/
#discountBannersGrid.discountBannersGrid{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
}

/* Each banner takes a square "tile" that scales smoothly with container width.
   The middle term is (container - gaps for 3 tiles) / 3, so on medium widths it fits 3.
   When space is smaller, it clamps to 135px and naturally wraps to 2 / 1 tiles.
*/
#discountBannersGrid.discountBannersGrid .discountBannerCard{
  flex: 0 0 clamp(135px, calc((100% - 48px) / 3), 450px) !important;
  max-width: 450px !important;
  aspect-ratio: 1 / 1;
}

#discountBannersGrid.discountBannersGrid .discountBannerCard img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*border-radius: 18px;*/
  display: block;
}

/* Adaptive caption under banner */
#discountBannersGrid.discountBannersGrid .discountBannerCaption{
  box-shadow: 0 6px 14px rgba(15, 23, 42, .10);
  border-radius: 10px;
  background: #f3f8fe;
  text-align: center;
  color: #262a36;
  font-size: clamp(10px, 1.8vw, 16px);
  line-height: 1.2;
}



/* pager improvements */
.pagerBtn.active{background:rgb(54 134 255) !important; color:#ebf1fd !important;}
.pagerDots{display:inline-block; padding:0 10px; opacity:0.7;}


/* === Wishlist + exact small icon additions (no layout rewrite) === */
.wishToggle{
  color:#1452e7 !important;
  width:33px;height:33px;
  border-radius:15px;
  border:1px solid #d5dbe7;
  background:#f6fbff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.wishToggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.9;}
.wishToggle:hover{
  color:#f6fafb !important;
  background:#1452e7 !important;
  border-color:rgba(77,163,255,.45) !important;
  box-shadow:0 0 0 3px rgba(77,163,255,.12);
}
.wishToggle:active{transform:translateY(1px);}
.wishCount{
  position:absolute;
  top:-6px;right:-6px;
  min-width:18px;height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:900;
  display:none;
  align-items:center;
  justify-content:center;
  border:1px solid #fff;
}
.cardActions{
  display:flex !important;
  gap:6px !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin-top:auto !important;
}
.cardActions .buyBtn--card{
  flex:1 1 auto;
  min-width:0;
}
.btnCartIcon{
  width:21px;
  height:21px;
  flex:0 0 21px;
  display:block;
}
.buyBtn[data-cart-game],
.cartBuyBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.wishBtn{
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:999px;
  border:1px solid #d9e2f4;
  background:#f8fbff;
  color:#1452e7;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(20,82,231,.10);
  transition:transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.wishBtn svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wishBtn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(20,82,231,.16);}
.wishBtn.isInWishlist{
  background:#ef4444;
  border-color:#ef4444;
  color:#fff;
  box-shadow:0 10px 22px rgba(239,68,68,.25);
}
.wishBtn.isInWishlist svg{fill:currentColor;}
.wishBtn--modal{
  width:54px;
  height:54px;
  min-width:54px;
}
.modalBuyRow{
  gap:12px;
}
.dateIcon{
  width:22px;
  height:22px;
  min-width:22px;
  color:#2f6bff;
  vertical-align:middle;
}
.discountBannerCaption,
.cartUntil,
.modalUntil{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.cartUntil .dateIcon,
.modalUntil .dateIcon{
  width:18px;
  height:18px;
  min-width:18px;
}
.wishDrawer{max-width:650px;}
.wishPriceRow{gap:12px;}
.wishAddCartBtn{
  width:auto;
  min-width:132px;
  padding:10px 12px;
  border-radius:10px;
  font-size:13px;
  letter-spacing:0;
}
.wishToast{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:10020;
  max-width:min(360px, calc(100vw - 36px));
  padding:13px 16px;
  border-radius:16px;
  background:rgba(248,251,255,.96);
  border:1px solid #d9e2f4;
  color:#102248;
  box-shadow:0 18px 40px rgba(20,82,231,.18);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.wishToast.show{
  opacity:1;
  transform:translateY(0);
}
.wishToastTitle{
  font-weight:600;
  font-size:16px !important;
  margin-bottom:3px;
  color:#1452e7;
}
.wishToastText{
  color:#475569;
  font-size:13px;
  line-height:1.35;
}
@media (max-width:560px){
  .wishBtn{width:36px;height:36px;min-width:36px;}
  .wishAddCartBtn{min-width:116px;font-size:12px;}
  .btnCartIcon{width:16px;height:16px;flex-basis:16px;}
}

/* === Final wishlist-only adjustments === */
.filters .wishToggle--filters{
  margin-left:auto;
  flex:0 0 auto;
}
.wishToggle--filters{
  width:33px;
  height:33px;
  border-radius:15px;
}
.wishToggle--filters svg,
.wishBtn svg{
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wishToggle--filters svg{
  width:19px;
  height:19px;
}
.wishBtn svg{
  width:20px;
  height:20px;
}
.wishBtn.isInWishlist svg{
  fill:currentColor;
}
.wishToastTitle{
  margin:0;
  font-size:14px;
  line-height:1.35;
}
@media (max-width:560px){
  .filters .wishToggle--filters{
    margin-left:auto;
  }
}


/* ===== PS adaptive background + hidden snow ===== */
html{
  min-width:360px;
  background:#eef5ff;
}
body{
  min-width:360px;
  background:
    radial-gradient(circle at 78% 8%, rgba(82, 140, 255, .20) 0 16%, transparent 34%),
    radial-gradient(circle at 14% 34%, rgba(255,255,255,.95) 0 18%, transparent 42%),
    radial-gradient(circle at 88% 72%, rgba(179, 213, 255, .26) 0 18%, transparent 44%),
    linear-gradient(135deg, #f9fcff 0%, #edf5ff 42%, #e7f1ff 100%) !important;
  background-attachment: fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.56;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%232f6bff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' opacity='.16'%3E%3Ccircle cx='305' cy='72' r='14'/%3E%3Crect x='46' y='264' width='22' height='22' rx='4' transform='rotate(24 57 275)'/%3E%3Cpath d='M220 46l15 29h-30z'/%3E%3Cpath d='M82 88l24 24M106 88l-24 24'/%3E%3Cpath d='M300 244l24 24M324 244l-24 24'/%3E%3Ccircle cx='118' cy='304' r='12'/%3E%3Crect x='286' y='154' width='24' height='24' rx='4' transform='rotate(18 298 166)'/%3E%3Cpath d='M150 178l13 25h-26z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:clamp(230px, 52vw, 420px) clamp(230px, 52vw, 420px);
  background-position:center top;
}
.snowCanvas{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}
.topbar,
.container,
footer{
  position:relative;
  z-index:1;
}
.topbar{
  background:rgb(235 241 253 / 0%) !important;
}
@media (max-width:480px){
  body::before{background-size:260px 260px;opacity:.48;}
}

/* Subscription info icons */
.subsInfoText .subsInfoItem{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin: 0 0 14px;
}
.subsInfoText .subsInfoItem:last-child{ margin-bottom:0; }
.subsInfoIcon{
  width:28px;
  height:28px;
  min-width:28px;
  color:#1f64f2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
}
.subsInfoIcon svg{
  width:100%;
  height:100%;
  display:block;
}
.subsInfoCopy{ flex:1; min-width:0; }
.subsInfoIconPngSlot{
  border-radius:8px;
  /*background: rgba(31,100,242,.08);
  border:1px dashed rgba(31,100,242,.38);*/
  position:relative;
  background: url('/img/psplus-logo.png') center/contain no-repeat;
}
.subsInfoIconPngSlot::after{
  content:"";
  width:14px;
  height:14px;
  border-radius:4px;
  /*border:2px solid rgba(31,100,242,.65);*/
  display:block;
}
/* To add your own PS Plus PNG later: set background-image on .subsInfoIconPngSlot */
.subsInfoIconPngSlot.has-img,
.subsInfoIconPngSlot[style*="background-image"]{
  border:0;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.subsInfoIconPngSlot.has-img::after,
.subsInfoIconPngSlot[style*="background-image"]::after{ display:none; }
@media (max-width:520px){
  .subsInfoText .subsInfoItem{ gap:10px; margin-bottom:12px; }
  .subsInfoIcon{ width:24px; height:24px; min-width:24px; }
}

/* Logo PNG placeholder before PLAYSTORE 95 */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.brandIcon{
  display:inline-block;
  flex:0 0 auto;
  width:30px;
  height:30px;
  background:url('/img/playstation_logo.png') center/contain no-repeat;
}
.brandText{display:inline-block;}
@media (max-width:480px){
  .brand{gap:8px;}
  .brandIcon{width:26px;height:26px;}
}