/* TheNexus Riot gifting: implementation of the October 2026 product mockup.
   Real catalog art/pricing/fulfillment and existing checkout are authoritative.
   Scoped to confirmed Riot gift product pages, not normal top-up, gift cards,
   the account store, or order/payment routes. Zero JS dependencies. */
.nx-riot-gift-product{
  --nxg-bg:#080e0b;
  --nxg-surface:#101b16;
  --nxg-surface-2:#14231a;
  --nxg-edge:rgba(139,211,157,.20);
  --nxg-edge-active:rgba(89,248,144,.72);
  --nxg-muted:#a8bdb0;
  --nxg-ink:#f1fcf4;
  --nxg-accent:#45f882;
}
.nx-riot-gift-product #nx-bg{opacity:.14}
.nx-riot-gift-product .breadcumb-wrapper.nxp-head{
  isolation:isolate;position:relative;
  padding:clamp(26px,4.5vw,58px) 0 clamp(25px,3vw,38px)!important;
  min-height:300px;overflow:hidden;
  background:linear-gradient(105deg,#06100b,#0a1a11 70%,#07130d)!important;
  border-bottom:1px solid rgba(89,235,137,.19);
}
/* The artwork fills the band edge to edge and the shared scrim (buy-v4.css, .nxp-head--art::after) darkens the copy
   side. It used to be a 68%-wide picture pinned to the physical right with a left-to-right :before wash that
   buy-v4.css hid (display:none), so the title sat on raw art and, in Arabic, the copy moved to the right
   under the picture while a dark empty block was left on the left. Focus point mirrors in RTL. */
.nx-riot-gift-product .nxp-head .nxp-head-art{
  position:absolute;inset:0;
  width:100%;height:100%;max-width:none;object-fit:cover;object-position:72% 36%;
  opacity:1;filter:saturate(1.12) contrast(1.04);
}
[dir="rtl"] .nx-riot-gift-product .nxp-head .nxp-head-art{object-position:28% 36%}
.nx-riot-gift-product .nxp-head :is(.nxc-product-h1,.nxg-hero-lead,.nxg-hero-caption,.breadcumb-menu){text-shadow:0 1px 14px rgba(3,6,4,.85),0 1px 2px rgba(3,6,4,.9)}
.nx-riot-gift-product .nxp-head .container,
.nx-riot-gift-product .nxp-head .breadcumb-content{position:relative;z-index:1}
.nx-riot-gift-product .nxp-head .breadcumb-content{
  display:flex;flex-direction:column;align-items:flex-start;gap:11px;
  max-width:1240px;min-height:225px;justify-content:center;
}
.nx-riot-gift-product .nxp-head .nxp-head-img{
  width:48px!important;height:48px!important;
  border-radius:13px;border:1px solid rgba(150,232,175,.3);
  padding:6px;background:rgba(10,30,19,.87);object-fit:contain;
}
.nx-riot-gift-product .nxp-head .nxc-product-h1{
  max-width:650px;margin:0!important;font-size:clamp(29px,3.7vw,45px)!important;
  line-height:1.09!important;letter-spacing:-.035em!important;
  font-weight:800;color:var(--nxg-ink)!important;text-align:start!important;
}
.nx-riot-gift-product .nxp-head .nxc-h1-game{
  display:inline-block;font-size:clamp(13px,1.25vw,17px);font-weight:620;
  color:#8feab3;letter-spacing:0;vertical-align:middle;margin-inline-start:6px;
}
.nx-riot-gift-product .nxg-hero-lead{
  margin:0;color:#83f1aa;font-size:clamp(17px,2vw,23px);
  line-height:1.25;font-weight:750;letter-spacing:-.02em;
}
.nx-riot-gift-product .nxg-hero-caption{
  margin:0;max-width:530px;color:#c1d4c6;font-size:14px;line-height:1.6;
}
.nx-riot-gift-product .nxg-hero-benefits{
  list-style:none;margin:6px 0 0;padding:0;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.nx-riot-gift-product .nxg-hero-benefits>li{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 11px;border:1px solid rgba(106,205,135,.22);
  background:rgba(10,28,17,.79);border-radius:999px;
  color:#d4e9da;font-size:11px;font-weight:650;line-height:1.2;
}
.nx-riot-gift-product .nxg-hero-benefits .nx-i{width:14px;height:14px;color:#60ed96}
.nx-riot-gift-product .nxp-head .breadcumb-menu{
  margin:3px 0 0!important;color:#92b39c;font-size:11px;opacity:.9;
}
.nx-riot-gift-product #product-sec .container{max-width:1264px}
.nx-riot-gift-product #product-sec{padding-top:clamp(17px,2.5vw,34px)!important}
.nx-riot-gift-product #prod-view .nx4b{gap:clamp(18px,2.4vw,29px)!important}
.nx-riot-gift-product #prod-view .nx4b-step,
.nx-riot-gift-product #prod-view .nx4b-head,
.nx-riot-gift-product #prod-view .nx4-how,
.nx-riot-gift-product #prod-view .nx4-dg,
.nx-riot-gift-product #prod-view .prod-about{
  border:1px solid var(--nxg-edge)!important;border-radius:18px!important;
  background:linear-gradient(142deg,rgba(25,64,39,.18),rgba(12,26,17,.93) 53%)!important;
  box-shadow:inset 0 1px 0 rgba(219,255,230,.035),0 14px 35px rgba(0,0,0,.12);
}
.nx-riot-gift-product #prod-view :is(.nx4b-step-h,.nx4-sec-h,.nx4b-step-h){
  color:var(--nxg-ink);font-size:clamp(16px,1.7vw,19px);
  font-weight:760;line-height:1.28;letter-spacing:-.018em;
}
.nx-riot-gift-product #prod-view .nx4b-num{
  display:inline-grid;place-items:center;
  min-width:32px;min-height:32px;width:32px;height:32px;
  background:#49ed87;color:#062113;border:0;
  box-shadow:0 3px 12px rgba(37,178,90,.18);
  font-size:13px;font-weight:850;
}
.nx-riot-gift-product #prod-view .nx4-packs{
  gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.nx-riot-gift-product #prod-view .nx4-pack{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:122px!important;padding:15px!important;
  border:1px solid rgba(162,209,176,.20)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(39,86,51,.27),rgba(7,21,12,.90))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.032)!important;
  transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease,background .17s ease;
}
.nx-riot-gift-product #prod-view .nx4-pack:after{
  content:"";position:absolute;inset:auto -18px -33px auto;
  width:110px;height:110px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(51,214,110,.12),transparent 73%);
}
.nx-riot-gift-product #prod-view .nx4-pack.on,
.nx-riot-gift-product #prod-view .nx4-pack[aria-checked="true"]{
  border-color:var(--nxg-edge-active)!important;
  background:linear-gradient(145deg,rgba(48,139,76,.32),rgba(10,36,20,.91))!important;
  box-shadow:inset 0 0 0 1px rgba(81,244,144,.15),0 5px 19px rgba(28,115,53,.17)!important;
}
.nx-riot-gift-product #prod-view .nx4-pack .nx4-pack-art{
  width:32px;height:32px;max-width:32px;max-height:32px;
  object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.2));
}
.nx-riot-gift-product #prod-view .nx4-pack-name{
  display:block;color:#ecfcf0;font-weight:750;line-height:1.35;
  font-size:14px;white-space:normal;overflow-wrap:anywhere;
}
.nx-riot-gift-product #prod-view .nx4-pack-price{
  display:block;color:#72f2a5;font-weight:800;font-size:16px;
  font-variant-numeric:tabular-nums;margin-top:7px;
}
.nx-riot-gift-product #prod-view .nx4b-box{
  border:1px solid rgba(89,248,144,.41)!important;
  border-radius:19px!important;
  padding:clamp(17px,2.2vw,25px)!important;
  background:linear-gradient(150deg,rgba(32,81,48,.25),rgba(13,29,19,.98) 48%)!important;
  box-shadow:0 20px 54px rgba(0,0,0,.26)!important;
}
.nx-riot-gift-product #prod-view .nx4b-sel{
  gap:12px;padding-bottom:15px;border-bottom:1px solid var(--nxg-edge);
}
.nx-riot-gift-product #prod-view .nx4b-sel-art{
  width:57px;height:57px;flex:0 0 57px;border-radius:13px;overflow:hidden;
}
.nx-riot-gift-product #prod-view .nx4b-sel-copy strong{
  font-size:15px;line-height:1.3;color:#ecf8ef;
}
.nx-riot-gift-product #prod-view .prod-total-row{
  padding:13px 15px;border-radius:13px;
  border:1px solid rgba(111,208,144,.18);
  background:rgba(3,19,9,.37);
}
.nx-riot-gift-product #prod-view .ck-methods{gap:9px}
.nx-riot-gift-product #prod-view .ck-method-card{
  min-height:78px;border-radius:13px;align-items:center;
  background:rgba(9,26,16,.74);border-color:rgba(175,222,191,.18);
}
.nx-riot-gift-product #prod-view .ck-method input:checked+.ck-method-card{
  background:linear-gradient(138deg,rgba(56,150,87,.25),rgba(12,41,24,.88))!important;
  border-color:#5df599!important;
}
.nx-riot-gift-product #prod-view .ck-method-meta{
  font-size:12px;line-height:1.42;color:#a7c1b0;white-space:normal;
}
.nx-riot-gift-product #prod-view .ck-submit-btn{
  width:100%;min-height:52px;max-width:none;
  border-radius:12px;background:#45f882!important;
  color:#072411!important;font-weight:850;letter-spacing:0;
  box-shadow:0 11px 26px rgba(43,172,86,.18)!important;
}
.nx-riot-gift-product #prod-view .ck-submit-btn:focus-visible,
.nx-riot-gift-product #prod-view :is(.nx4-pack,.ck-method,.nxj-gift-accounts>summary):focus-visible{
  outline:2px solid #b0ffd4!important;outline-offset:3px!important;
}
.nx-riot-gift-product #prod-view .nx-gift-guide{
  padding:clamp(17px,2vw,24px)!important;background:rgba(11,28,17,.9)!important;
}
.nx-riot-gift-product #prod-view .nx-gift-facts{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
}
.nx-riot-gift-product #prod-view .nx-gift-facts>[role=listitem]{
  grid-column:auto;min-height:111px;padding:13px;
  background:rgba(5,19,11,.52);border:1px solid rgba(107,187,133,.18);
  border-radius:12px;
}
.nx-riot-gift-product #prod-view .nx-gift-facts strong{font-size:12px;color:#e7f8ed}
.nx-riot-gift-product #prod-view .nx-gift-facts span{font-size:12px;line-height:1.5;color:#a7bcae}
.nx-riot-gift-product #prod-view .nxj-gift-accounts{
  margin-top:15px;border-radius:12px;border:1px solid rgba(133,226,164,.21);
  background:rgba(14,40,25,.66);
}
.nx-riot-gift-product #prod-view .nx4-trust{border-top:1px solid rgba(120,201,148,.20)}
@media(hover:hover) and (pointer:fine){
  .nx-riot-gift-product #prod-view .nx4-pack:hover{transform:translateY(-2px);border-color:rgba(103,239,152,.45)!important}
  .nx-riot-gift-product #prod-view .ck-submit-btn:hover{filter:brightness(1.06)}
}
@media(max-width:991px){
  .nx-riot-gift-product .nxp-head .nxp-head-art,[dir="rtl"] .nx-riot-gift-product .nxp-head .nxp-head-art{object-position:50% 30%}
  .nx-riot-gift-product .nxp-head .breadcumb-content{min-height:210px}
}
@media(max-width:720px){
  .nx-riot-gift-product .nxp-head{min-height:260px!important}
  .nx-riot-gift-product .nxp-head .breadcumb-content{min-height:210px;gap:8px}
  .nx-riot-gift-product .nxp-head .nxc-product-h1{font-size:clamp(26px,7vw,35px)!important;max-width:90%}
  .nx-riot-gift-product .nxg-hero-lead{font-size:18px}
  .nx-riot-gift-product .nxg-hero-caption{font-size:12px;max-width:92%}
  .nx-riot-gift-product .nxg-hero-benefits{gap:5px}
  .nx-riot-gift-product .nxg-hero-benefits>li{font-size:10px;padding:6px 8px}
  .nx-riot-gift-product #prod-view .nx4-packs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .nx-riot-gift-product #prod-view .nx4-pack{min-height:104px!important;padding:11px!important}
  .nx-riot-gift-product #prod-view .nx4-pack-name{font-size:12.5px}
  .nx-riot-gift-product #prod-view .nx4-pack-price{font-size:14px}
  .nx-riot-gift-product #prod-view .nx-gift-facts{grid-template-columns:1fr}
  .nx-riot-gift-product #prod-view .nx-gift-facts>[role=listitem]{min-height:0;grid-column:auto}
  .nx-riot-gift-product #prod-view .nx4b-box{padding:16px!important}
}
/* Gift checkout column (owner, Oct 2026): every row spans the box (the delivery card used to stop at the first grid track),
   quantity and total share one row, the payment methods are one readable list with a clear selected mark, and the
   points note is a quiet info line. Specificity is by id so the older layers do not need !important fights. */
body.nx-riot-gift-product #nx4b-box{column-gap:16px}
body.nx-riot-gift-product #nx4b-box>*{grid-column:1/-1}
body.nx-riot-gift-product #nx4b-box>.prod-qty-row{grid-column:1}
body.nx-riot-gift-product #nx4b-box>.prod-total-row{grid-column:2}
body.nx-riot-gift-product #nx4b-box>.ck-delivery-details{padding:14px 16px;border:1px solid var(--nxg-edge);border-radius:13px;background:rgba(5,19,11,.42)}
body.nx-riot-gift-product #nx4b-box>.ck-delivery-details .nx4b-step-h{margin-bottom:6px}
body.nx-riot-gift-product #nx4b-box .ck-delivery-head small{display:block;font-size:13px!important;line-height:1.6!important;color:var(--nx-text-2)}
body.nx-riot-gift-product #nx4b-box>.prod-qty-row,body.nx-riot-gift-product #nx4b-box>.prod-total-row{align-self:stretch;padding-top:14px!important;border-top:1px solid var(--nxg-edge)!important}
body.nx-riot-gift-product #nx4b-box #qty-hint{color:var(--nx-text-3)!important}
body.nx-riot-gift-product #nx4b-box .prod-total-row{align-items:flex-end;justify-content:flex-start;text-align:end}
body.nx-riot-gift-product #nx4b-box .prod-total{font-size:28px;line-height:32px;color:var(--nx-price);font-variant-numeric:tabular-nums}
body.nx-riot-gift-product #nx4b-box #prod-cashback{margin:0!important;padding:10px 12px!important;border:1px solid rgba(255,190,24,.28)!important;border-radius:12px;background:rgba(255,190,24,.06)!important;font-size:12.5px!important;line-height:1.55!important;color:#ffd466!important}
body.nx-riot-gift-product #nx4b-box #prod-cashback span{color:var(--nx-text-2)!important}
body.nx-riot-gift-product #nx4b-box .ck-payment-head p{display:block;margin-top:2px;font-size:12.5px;color:var(--nx-text-2)}
body.nx-riot-gift-product #nx4b-box .ck-methods{grid-template-columns:minmax(0,1fr)!important}
body.nx-riot-gift-product #nx4b-box .ck-method-card{position:relative;min-height:64px!important;padding:12px 52px 12px 14px!important;padding-inline:14px 52px!important}
body.nx-riot-gift-product #nx4b-box .ck-method-card::after{content:"";position:absolute;inset-block-start:50%;inset-inline-end:16px;width:20px;height:20px;margin-top:-10px;border:2px solid var(--nx-line-strong);border-radius:50%}
body.nx-riot-gift-product #nx4b-box .ck-method input:checked+.ck-method-card::after{border-color:var(--nx-signal);background:var(--nx-signal);box-shadow:inset 0 0 0 4px #0d1d13}
body.nx-riot-gift-product #nx4b-box #ck-deals-label{min-height:44px;align-items:center!important}
body.nx-riot-gift-product #nx4b-box #ck-deals{width:20px;height:20px;margin-top:0!important}
@media(prefers-reduced-motion:reduce){
  .nx-riot-gift-product #prod-view :is(.nx4-pack,.ck-method-card,.ck-submit-btn){transition:none!important;animation:none!important}
  .nx-riot-gift-product #prod-view .nx4-pack:hover{transform:none!important}
}