/* XYLO 2.7 — Deep violet detailing, single-row sections, and spotlight products.
   Homepage presentation only. Dark, opaque surfaces preserved; no glassmorphism,
   no payment/order logic. Decorative layers must not intercept touch or clicks. */
:root{--x27-a:#7040D8;--x27-b:#A050EC;--x27-edge:rgba(160,80,236,.42)}
body.xylo-command-home .xylo-home-hero-layout .hero-card,
body.xylo-command-home .xylo-home-hero-layout .xylo-corex-access{
  position:relative; isolation:isolate;
  background-color:#120b1d!important;
  background-image:
    radial-gradient(ellipse 78% 90% at 4% 10%,rgba(112,64,216,.17),transparent 72%),
    radial-gradient(ellipse 70% 95% at 100% 100%,rgba(160,80,236,.09),transparent 75%),
    linear-gradient(145deg,#171022,#100b19 55%,#110b19)!important;
  box-shadow:0 20px 48px rgba(2,0,8,.43),inset 0 1px 0 rgba(202,158,255,.07),0 0 24px rgba(112,64,216,.07)!important;
  border-color:rgba(160,80,236,.48)!important;
}
/* Thin architected lines and a small accent at the corner, not a solid purple fill. */
body.xylo-command-home .xylo-home-hero-layout .hero-card::after,
body.xylo-command-home .xylo-home-hero-layout .xylo-corex-access::after{
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
 background:
   linear-gradient(90deg,transparent 18%,rgba(160,80,236,.065) 18.08%,transparent 18.18%) 0 0 / 140px 140px,
   linear-gradient(0deg,transparent 24%,rgba(160,80,236,.055) 24.08%,transparent 24.18%) 0 0 / 140px 140px,
   linear-gradient(135deg,rgba(160,80,236,.39) 0 2px,transparent 3px) top right / 60px 60px no-repeat;
 opacity:.8;
}
body.xylo-command-home .xylo-home-hero-layout .hero-card>* ,
body.xylo-command-home .xylo-home-hero-layout .xylo-corex-access>*{position:relative;z-index:1}
body.xylo-command-home .xylo-home-hero-layout .xylo-corex-access .xylo-access-head{
 background:linear-gradient(95deg,rgba(112,64,216,.16),rgba(160,80,236,.035) 75%);
 border-bottom:1px solid rgba(160,80,236,.24);
}
body.xylo-command-home .xylo-home-hero-layout .xylo-corex-access .xylo-access-body{
 background:radial-gradient(ellipse 75% 58% at 100% 35%,rgba(112,64,216,.105),transparent 80%);
}
body.xylo-command-home .xylo-home-hero-layout .xylo-corex-access .xylo-access-head>span{
 background:linear-gradient(155deg,#31204b,#1a112b);box-shadow:inset 0 1px 0 rgba(219,177,255,.13),0 0 18px rgba(112,64,216,.13);
}
/* FEATURED: single uninterrupted row. Native overflow when it cannot fit. */
body.xylo-command-home #featured-products .xylo-v26-featured-grid{
 display:flex!important;flex-flow:row nowrap!important;justify-content:center!important;
 align-items:stretch!important;gap:clamp(20px,2.5vw,32px)!important;
 max-width:1330px!important;width:100%;box-sizing:border-box;
 overflow-x:auto!important;overflow-y:hidden!important;
 scroll-snap-type:x proximity;scroll-padding-inline:22px;
 overscroll-behavior-x:contain;overscroll-behavior-y:auto;
 touch-action:auto;-webkit-overflow-scrolling:touch;
 padding:42px 23px 55px!important;
 background:transparent!important;border:0!important;box-shadow:none!important;
 scrollbar-width:thin;scrollbar-color:rgba(160,80,236,.52) transparent;
}
body.xylo-command-home #featured-products .xylo-v26-featured-card{
 flex:0 0 clamp(240px,25vw,293px)!important;
 width:clamp(240px,25vw,293px)!important;min-width:0;
 scroll-snap-align:center;animation-duration:5.2s;
}
/* Stronger cinematic glow but keep the product image and text clear. */
body.xylo-command-home #featured-products .xylo-v26-featured-card::before{
 inset:-17px!important;border-radius:31px;
 background:radial-gradient(ellipse at center,rgba(160,80,236,.85) 0%,rgba(112,64,216,.55) 40%,transparent 75%)!important;
 opacity:.8;filter:blur(20px);
 animation:xyloV27Aura 4.6s ease-in-out infinite alternate!important;
 pointer-events:none!important;
}
body.xylo-command-home #featured-products .xylo-v26-featured-card:nth-child(2)::before{animation-delay:-1.5s!important}
body.xylo-command-home #featured-products .xylo-v26-featured-card:nth-child(3)::before{animation-delay:-3s!important}
body.xylo-command-home #featured-products .xylo-v26-featured-link{
 background:#140d20!important;
 background-image:linear-gradient(160deg,rgba(112,64,216,.16),transparent 55%)!important;
 border:1px solid rgba(188,123,255,.85)!important;
 box-shadow:0 0 0 1px rgba(160,80,236,.2) inset,
 0 0 22px rgba(112,64,216,.38),0 0 50px rgba(160,80,236,.26),0 21px 44px rgba(2,0,9,.56)!important;
}
body.xylo-command-home #featured-products .xylo-v26-featured-link:hover,
body.xylo-command-home #featured-products .xylo-v26-featured-link:focus-visible{
 box-shadow:0 0 0 1px rgba(215,181,255,.45) inset,0 0 45px rgba(160,80,236,.65),
 0 0 75px rgba(112,64,216,.4),0 24px 50px rgba(0,0,0,.58)!important;
}
body.xylo-command-home #featured-products .xylo-v26-featured-info{
 background:linear-gradient(120deg,#271638,#140b20 67%,#21112f)!important;
 border-top:1px solid rgba(160,80,236,.24);
}
@keyframes xyloV27Aura{0%{opacity:.66;filter:blur(18px)}100%{opacity:1;filter:blur(29px)}}
/* Social links: branded, fine-line decorative corners. Never become a vertical grid. */
body.xylo-command-home .xylo-v26-links-grid,
body.xylo-command-home .xylo-v26-payment-grid,
body.xylo-command-home .xylo-v24-benefits-grid{
 display:flex!important;flex-flow:row nowrap!important;align-items:stretch!important;
 gap:14px!important;min-width:0;width:100%;box-sizing:border-box;
 overflow-x:auto!important;overflow-y:hidden!important;
 touch-action:auto;overscroll-behavior-x:contain;overscroll-behavior-y:auto;
 -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
 scrollbar-width:thin;scrollbar-color:rgba(160,80,236,.45) transparent;
 padding:9px 5px 21px!important;
}
body.xylo-command-home .xylo-v26-link-card{
 isolation:isolate;overflow:hidden;flex:1 0 0;min-width:0;
 scroll-snap-align:start;min-height:175px;
 background:linear-gradient(145deg,#1c132a,#120d1a 68%,#211330)!important;
 border:1px solid rgba(160,80,236,.44)!important;
 box-shadow:inset 0 1px 0 rgba(212,181,255,.08),0 13px 26px rgba(0,0,0,.27),0 0 18px rgba(112,64,216,.08);
}
body.xylo-command-home .xylo-v26-link-card::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse 86% 72% at 0% 0%,rgba(112,64,216,.20),transparent 70%),
 linear-gradient(145deg,transparent 88%,rgba(160,80,236,.11) 88.1%,transparent 90%);
}
body.xylo-command-home .xylo-v26-link-card::after{
 content:"";position:absolute;top:-50px;right:-55px;width:155px;height:155px;
 border:1px solid rgba(160,80,236,.26);border-radius:34px;transform:rotate(32deg);pointer-events:none;
}
body.xylo-command-home .xylo-v26-link-card:hover,
body.xylo-command-home .xylo-v26-link-card:focus-visible{
 background:linear-gradient(145deg,#28183e,#171021)!important;
 border-color:rgba(191,131,255,.83)!important;
 box-shadow:0 15px 31px #0006,0 0 25px rgba(160,80,236,.24);
}
body.xylo-command-home .xylo-v26-link-logo{
 position:relative;z-index:1;
 background:linear-gradient(145deg,#322147,#1b1326);border-color:rgba(160,80,236,.6);
 box-shadow:0 0 19px rgba(112,64,216,.12),inset 0 1px 0 rgba(240,220,255,.13);
}
/* Payment tiles: distinct semantic logo colors, framed patterned surfaces. */
body.xylo-command-home .xylo-v26-payment-card{
 position:relative;isolation:isolate;overflow:hidden;
 flex:0 0 239px!important;width:239px!important;min-width:0!important;
 scroll-snap-align:start;border-radius:19px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 11px 25px rgba(1,0,7,.27);
}
body.xylo-command-home .xylo-v26-payment-card::after{
 content:"";position:absolute;right:-44px;top:-44px;width:110px;height:110px;
 border:1px solid currentColor;border-radius:24px;transform:rotate(35deg);opacity:.12;pointer-events:none;
}
body.xylo-command-home .xylo-v26-payment-gcash{background:linear-gradient(110deg,#15253c,#13101f 72%)!important}
body.xylo-command-home .xylo-v26-payment-binance{background:linear-gradient(110deg,#29200f,#15101f 72%)!important}
body.xylo-command-home .xylo-v26-payment-paymongo{background:linear-gradient(110deg,#132a24,#14101f 72%)!important}
body.xylo-command-home .xylo-v26-payment-logo{
 background:linear-gradient(140deg,#1c1327,#0e0b15);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 12px rgba(112,64,216,.07);
}
/* Benefits: retain CoreX-like height and message but more considered panel details. */
body.xylo-command-home .xylo-v24-benefit{
 flex:1 0 0;min-width:0;scroll-snap-align:start;isolation:isolate;
 background-image:
 radial-gradient(ellipse 85% 80% at 100% 0%,rgba(160,80,236,.23),transparent 79%),
 linear-gradient(145deg,#291a39,#160e23 75%)!important;
 box-shadow:inset 0 1px 0 rgba(221,191,255,.08),0 16px 35px rgba(0,0,0,.25);
 border-color:rgba(160,80,236,.55)!important;
}
body.xylo-command-home .xylo-v24-benefit::after{
 content:"";position:absolute;inset:15px;pointer-events:none;border-radius:13px;
 border-top:1px solid rgba(209,161,255,.11);border-left:1px solid rgba(209,161,255,.08);
}
body.xylo-command-home .xylo-v24-benefit-icon{background:linear-gradient(145deg,#40245d,#241533);border-color:rgba(160,80,236,.6);box-shadow:0 0 20px rgba(112,64,216,.15)}
body.xylo-command-home .xylo-v24-benefit > *{position:relative;z-index:1}
/* Consistent one-row rails at every breakpoint. On phones show the next card edge. */
@media(max-width:900px){
 body.xylo-command-home #featured-products .xylo-v26-featured-grid{justify-content:flex-start!important}
 body.xylo-command-home .xylo-v26-link-card{flex:0 0 275px!important}
 body.xylo-command-home .xylo-v24-benefit{flex:0 0 300px!important}
}
@media(max-width:600px){
 body.xylo-command-home #featured-products .xylo-v26-featured-grid{
   flex-wrap:nowrap!important;justify-content:flex-start!important;
   gap:22px!important;padding:34px 18px 50px!important;
   scroll-padding-inline:18px;
 }
 body.xylo-command-home #featured-products .xylo-v26-featured-card{
   flex:0 0 min(72vw,265px)!important;width:min(72vw,265px)!important;
   min-height:0!important;
 }
 body.xylo-command-home .xylo-v26-links-grid,
 body.xylo-command-home .xylo-v26-payment-grid,
 body.xylo-command-home .xylo-v24-benefits-grid{
   flex-flow:row nowrap!important;gap:12px!important;
   padding:8px 9px 18px!important;
 }
 body.xylo-command-home .xylo-v26-link-card{flex:0 0 min(72vw,290px)!important;min-height:164px}
 body.xylo-command-home .xylo-v26-payment-card{flex:0 0 min(65vw,245px)!important;width:min(65vw,245px)!important;min-height:105px!important}
 body.xylo-command-home .xylo-v24-benefit{flex:0 0 min(78vw,315px)!important;min-height:225px!important}
}
@media(prefers-reduced-motion:reduce){
 body.xylo-command-home #featured-products .xylo-v26-featured-card::before{animation:none!important}
 body.xylo-command-home #featured-products .xylo-v26-featured-card{animation:none!important}
}