/* Product art is kept above the CSS fallback gradients. */
.art::before { z-index: 1; background: linear-gradient(140deg, rgba(0,0,0,.08), transparent 45%, rgba(0,0,0,.76)); }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-title { z-index: 2; }
.art i { z-index: 3; }

.load-more {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 30px 0 46px;
}
.load-more .primary[disabled] { opacity: .7; cursor: wait; }
.load-more span { color: var(--muted); font-size: 11px; }

/* Cart and checkout */
.cart-list { padding: 0; overflow: hidden; }
.cart-list-head { display: grid; grid-template-columns: 1fr 100px 90px; gap: 14px; padding: 14px 18px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.cart-list-head span:nth-child(2), .cart-list-head span:nth-child(3) { text-align: center; }
.cart-row { margin: 0 18px; padding: 16px 0; grid-template-columns: 128px minmax(0,1fr) 100px 90px; }
.cart-row .art { height: 82px; border-radius: 7px; }
.cart-row > strong { text-align: right; font-size: 15px; }
.cart-product { min-width: 0; display: grid; align-content: center; gap: 4px; }
.cart-product h3 { margin: 0; }
.cart-product p, .cart-product small { margin: 0; color: var(--muted); font-size: 11px; }
.cart-product button { width: max-content; margin-top: 5px; color: #aeb8c7; }
.cart-product button:hover { color: #fff; }
.summary { box-shadow: 0 12px 36px rgba(0,0,0,.14); }
.summary-note { color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; margin: 13px 0 0; }
.checkout-step { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 18px; }
.checkout-step > span { display: grid; place-items: center; width: 27px; height: 27px; flex: none; border-radius: 50%; background: rgba(184,250,53,.14); color: var(--acid); font: 800 10px/1 monospace; }
.checkout-step h2 { margin: 0 0 4px; }
.checkout-step p { margin: 0; color: var(--muted); font-size: 11px; }
.payment-step { margin-top: 31px; }
.checkout-submit { margin-top: 24px; }
.checkout-summary h2 { display: flex; justify-content: space-between; align-items: baseline; }
.checkout-summary h2 span { color: var(--muted); font-size: 11px; font-weight: 500; }
.checkout-summary.summary > .checkout-order-items:not(.mini-order) { display: grid; grid-template-columns: 1fr; justify-content: initial; gap: 12px; margin: 0; color: inherit; }
.checkout .checkout-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 26px; }
.checkout-summary { padding: 17px; }
.order-item { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 9px; align-items: center; }
.order-item .art { height: 50px; padding: 5px; border-radius: 5px; }
.order-item .art-title { display: none; }
.order-item > div { display: grid; gap: 3px; min-width: 0; }
.order-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.order-item span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.order-item > strong { font-size: 12px; white-space: nowrap; }
.payments { grid-template-columns:repeat(2,minmax(0,1fr)); }
.payment { height:72px; display:flex; align-items:center; gap:11px; padding:11px 13px; text-align:left; }
.payment > span:nth-child(2) { display:grid; gap:4px; min-width:0; }.payment b { color:#e9edf3; font-size:12px; }.payment small { color:var(--muted); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.payment-icon { display:grid; place-items:center; flex:none; width:32px; height:32px; border:1px solid #3b4555; border-radius:8px; color:#c9d4e7; font-size:16px; }.payment .sbp-icon { color:var(--acid); font-size:21px; }.payment i { display:grid; place-items:center; width:17px; height:17px; margin-left:auto; flex:none; border:1px solid #4a5361; border-radius:50%; color:transparent; font-size:10px; font-style:normal; }.payment.selected { background:linear-gradient(110deg,#202b18,#1a2218); }.payment.selected .payment-icon { border-color:var(--acid); background:rgba(184,250,53,.1); color:var(--acid); }.payment.selected i { border-color:var(--acid); background:var(--acid); color:#18200e; }
@media(max-width:780px) {
  .cart-list-head { display: none; }
  .cart-row { margin: 0 13px; grid-template-columns: 92px minmax(0,1fr) 74px; gap: 10px; }
  .cart-row .art { height: 66px; }
  .cart-row > strong { grid-column: 2; text-align: left; }
  .qty { justify-self: end; }
  .cart-product small { display: none; }
  .checkout .checkout-grid { grid-template-columns:1fr; }
  .payments { grid-template-columns:1fr; }
}

/* Rich game information on the product page */
.game-about { max-width: 860px; margin-top: 52px; }
.about-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; }
.about-heading > div > p { margin: 0 0 6px; color: var(--acid); font-weight: 800; font-size: 10px; letter-spacing: .08em; }
.about-heading h2 { margin: 0; }
.game-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.game-tags span { padding: 5px 8px; border: 1px solid #2d3542; border-radius: 999px; color: #bac3d1; font-size: 10px; white-space: nowrap; }
.about-text { max-width: 780px; color: #c2cad5 !important; font-size: 13px; line-height: 1.8 !important; }
.game-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 25px 0; border: 1px solid var(--line); background: var(--line); }
.game-facts-1 { grid-template-columns: minmax(0, 285px); background: transparent; border: 0; }
.game-facts-1 > div { border: 1px solid var(--line); border-radius: 7px; }
.game-facts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.game-facts > div { min-width: 0; padding: 14px; background: var(--panel); display: grid; gap: 6px; }
.game-facts small { color: var(--muted); font-size: 10px; }
.game-facts b { overflow: hidden; color: #eff2f6; font-size: 11px; line-height: 1.35; }
.requirements { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 15px 0; }
.requirements summary { cursor: pointer; color: #eef2f5; font-size: 12px; font-weight: 800; }
.requirements p { margin: 13px 0 2px; color: var(--muted) !important; font-size: 11px; line-height: 1.65 !important; white-space: pre-line; }
.key-includes { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(180px, .8fr); gap: 12px; align-items: center; margin-top: 24px; padding: 16px; border: 1px solid rgba(184,250,53,.3); border-radius: 8px; background: linear-gradient(100deg, rgba(184,250,53,.09), rgba(184,250,53,.015)); }
.key-includes > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #15200b; background: var(--acid); font-size: 16px; }
.key-includes div { display: grid; gap: 4px; }.key-includes small { color: #accd78; font-size: 9px; font-weight: 800; letter-spacing: .06em; }.key-includes b { font-size: 12px; }.key-includes p { margin: 0 !important; color: #c8d2c3 !important; font-size: 10px !important; line-height: 1.45 !important; }
@media(max-width:780px) { .about-heading { display: grid; align-items: start; }.game-tags { justify-content: flex-start; }.game-facts { grid-template-columns: repeat(2, 1fr); }.key-includes { grid-template-columns: 36px 1fr; }.key-includes p { grid-column: 1 / -1; } }
.checkout-error{min-height:20px;margin:12px 0 0;color:#ff9b9b;font-size:13px;text-align:center}
