/* VEXZY_REDESIGN_V4_POLISH — additive layer only. Base design CSS remains unchanged. */
:root{--v4-ease:cubic-bezier(.22,.8,.26,1);--v4-spring:cubic-bezier(.16,1,.3,1)}

/* Header: brand + navigation are a left-aligned cluster, actions stay on the right. */
@media (min-width:901px){
  .navbar,.page-navbar{display:flex;align-items:center}
  .navbar>.brand,.page-navbar>.brand{flex:0 0 auto}
  .navbar>.nav-links,.page-navbar>.nav-links{position:static!important;left:auto!important;transform:none!important;margin-left:46px!important;margin-right:auto!important;display:flex;align-items:center;gap:34px}
  .navbar>.nav-actions,.page-navbar>.nav-actions{margin-left:auto;flex:0 0 auto}
}
.nav-links a{position:relative;transition:color .24s ease,transform .24s var(--v4-ease)}
.nav-links a::after{content:"";position:absolute;left:50%;right:50%;bottom:-8px;height:1px;background:#8b5cf6;box-shadow:0 0 12px rgba(139,92,246,.55);transition:left .28s var(--v4-ease),right .28s var(--v4-ease),opacity .2s;opacity:0}
.nav-links a:hover{color:#fff;transform:translateY(-1px)}
.nav-links a:hover::after,.nav-links a.is-active::after{left:0;right:0;opacity:1}
.profile-btn{white-space:nowrap}

/* Hero scroll hint moves as one rigid unit. */
.scroll-indicator{animation:v4ScrollHint 2.15s ease-in-out infinite!important;will-change:transform}
.scroll-indicator>span,.scroll-indicator>img{animation:none!important;transform:none!important}
@keyframes v4ScrollHint{0%,100%{transform:translateY(0);opacity:.78}50%{transform:translateY(8px);opacity:1}}

/* Trust icons are deliberately white; only subtle violet aura remains on hover. */
.trust-point img{filter:brightness(0) invert(1)!important;opacity:.96;transition:filter .25s,transform .25s var(--v4-spring)}
.trust-point:hover img{transform:translateY(-2px) scale(1.06);filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(139,92,246,.35))!important}

/* Product groups and subcategory identity. */
.product-group>h3{display:flex;align-items:center;gap:12px}
.product-group__icon{width:30px;height:30px;border-radius:9px;object-fit:cover;background:#151224;border:1px solid #26213a;padding:4px;box-sizing:border-box}
.product-card{display:flex!important;flex-direction:column;min-height:212px;overflow:hidden;transition:border-color .28s ease,transform .32s var(--v4-spring),box-shadow .32s ease,background .3s ease}
.product-card::before,.payment-method::before,.btn::before,.buy-btn::before,.primary-action::before,.cdk-submit::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.08) 46%,rgba(139,92,246,.14) 50%,rgba(255,255,255,.06) 54%,transparent 72%);transform:translateX(-115%);transition:transform .65s var(--v4-ease)}
.product-card:hover{transform:translateY(-5px);border-color:rgba(139,92,246,.62);box-shadow:0 22px 45px rgba(0,0,0,.28),0 0 0 1px rgba(139,92,246,.05) inset}
.product-card:hover::before,.payment-method:hover::before,.btn:hover::before,.buy-btn:hover::before,.primary-action:hover::before,.cdk-submit:hover::before{transform:translateX(115%)}
.product-card__top{display:flex;flex-direction:column;gap:10px}
.product-title-row{display:flex;align-items:flex-start;gap:10px;min-width:0}
.product-title-row h4{min-width:0;flex:1;margin:0}
.product-title-row .popular-badge{position:static!important;inset:auto!important;transform:none!important;flex:0 0 auto;white-space:nowrap;margin-top:0}
.product-card__description{white-space:pre-line;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.5!important;max-height:3em;margin:0!important;word-break:break-word}
.price-row{margin-top:auto!important;padding-top:18px}
.buy-btn{position:relative;overflow:hidden;margin-top:18px;transition:transform .23s var(--v4-spring),border-color .23s,box-shadow .23s,background .23s}
.buy-btn:hover:not(:disabled){transform:translateY(-2px);border-color:#8b5cf6;box-shadow:0 10px 24px rgba(91,57,169,.22)}
.buy-btn:active:not(:disabled){transform:translateY(0) scale(.992)}
.product-period{white-space:nowrap}

/* Checkout payment choices. */
.payment-method{position:relative;overflow:hidden;display:grid!important;grid-template-columns:48px minmax(0,1fr) 24px!important;align-items:center!important;column-gap:16px!important;text-align:left!important;opacity:.66;filter:saturate(.7);transition:opacity .24s,filter .24s,border-color .28s,background .28s,transform .28s var(--v4-spring),box-shadow .28s}
.payment-method:hover{opacity:.9;filter:saturate(.9);transform:translateX(3px)}
.payment-method.is-selected{opacity:1;filter:none;background:linear-gradient(90deg,rgba(139,92,246,.075),rgba(21,18,36,.62));box-shadow:0 0 0 1px rgba(139,92,246,.12) inset,0 10px 30px rgba(0,0,0,.12)}
.payment-method .method-icon{grid-column:1;width:44px;height:44px;display:grid;place-items:center;margin:0!important}
.payment-method .method-copy{grid-column:2;justify-self:start;text-align:left!important;margin:0!important;padding:0!important;min-width:0}
.payment-method .method-copy strong,.payment-method .method-copy small{display:block;text-align:left!important}
.payment-method .method-radio{grid-column:3;width:18px;height:18px;border:1.5px solid #575168;border-radius:50%;position:relative;justify-self:end;transition:border-color .22s,box-shadow .22s,transform .3s var(--v4-spring)}
.payment-method .method-radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#8b5cf6;box-shadow:0 0 12px rgba(139,92,246,.9);transform:scale(0);transition:transform .28s var(--v4-spring)}
.payment-method.is-selected .method-radio{border-color:#aa82ff;box-shadow:0 0 0 3px rgba(139,92,246,.09);transform:scale(1.08)}
.payment-method.is-selected .method-radio::after{transform:scale(1)}

/* Checkout summary uses square product/site icons, never banner proportions. */
.summary-product{align-items:center}
.summary-thumb,.summary-product img{object-fit:cover!important;aspect-ratio:1/1!important;flex:0 0 auto}
#summaryDescription{white-space:pre-line;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;line-height:1.42;max-height:4.26em}
.topup-method-description{white-space:pre-line;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* CDK sidebar spacing. */
.how-card .side-kicker{margin-bottom:22px!important}

/* Profile avatar editor. */
.avatar-editor{display:flex;flex-direction:column;align-items:center;gap:10px}
.avatar-button{position:relative;padding:0;cursor:pointer;overflow:hidden;background:#0e0c15;border:0}
.avatar-button img{width:100%;height:100%;object-fit:cover}
.avatar-edit-mark{position:absolute;right:7px;bottom:7px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#8b5cf6;color:#fff;border:3px solid #0e0c15;font-size:12px;box-shadow:0 5px 18px rgba(139,92,246,.35);transform:translateY(5px);opacity:0;transition:.24s var(--v4-spring)}
.avatar-button:hover .avatar-edit-mark,.avatar-button:focus-visible .avatar-edit-mark{transform:none;opacity:1}
.avatar-reset{border:0;background:transparent;color:#9e97b1;font:inherit;font-size:12px;cursor:pointer}.avatar-reset:hover{color:#fff}

/* Delivered data is interactive. */
.live-order-content{display:flex!important;align-items:center;gap:10px;min-width:0}
.live-order-content code{flex:1;min-width:0;white-space:pre-wrap;word-break:break-all}
.copy-delivery{width:34px;height:34px;border:1px solid #2b2540;border-radius:10px;background:#151224;color:#fff;cursor:pointer;transition:.22s var(--v4-spring)}
.copy-delivery:hover{border-color:#8b5cf6;transform:translateY(-2px);box-shadow:0 8px 18px rgba(139,92,246,.16)}
.live-order-note a{color:#aa82ff;text-decoration:none;border-bottom:1px solid rgba(170,130,255,.35)}.live-order-note a:hover{color:#cbb6ff;border-color:#cbb6ff}

/* Button/card micro-interactions shared across pages. */
.btn,.primary-action,.secondary-action,.cdk-submit,.support-btn,.profile-btn,.balance-chip,.category-tab{position:relative;overflow:hidden;transition:transform .25s var(--v4-spring),border-color .25s,box-shadow .25s,background .25s,color .25s}
.btn:hover,.primary-action:hover,.cdk-submit:hover,.support-btn:hover,.profile-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(89,55,165,.18)}
.balance-chip:hover{border-color:#3a3156;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.category-tab:hover{transform:translateY(-1px);border-color:#4b3b75}.category-tab.is-active{box-shadow:0 0 22px rgba(139,92,246,.12)}

/* Admin list clamps and product editor helpers. */
.admin-product-description{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:pre-line;line-height:1.42;max-width:360px}
.admin-site-icon-box{display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:center;padding:14px;border:1px solid #26213a;background:#0e0c15;border-radius:14px}
.admin-site-icon-preview{width:76px;height:76px;border-radius:16px;object-fit:cover;background:#151224;border:1px solid #2b2540}
.admin-site-icon-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-tier-price-grid{grid-template-columns:repeat(5,minmax(120px,1fr))!important}
.admin-v4-section{border:1px solid #26213a;border-radius:16px;background:linear-gradient(180deg,rgba(21,18,36,.82),rgba(14,12,21,.92));padding:18px;margin:12px 0}

@media (max-width:900px){
  .payment-method{grid-template-columns:44px minmax(0,1fr) 22px!important;column-gap:12px!important}
  .admin-tier-price-grid{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* VEXZY_REDESIGN_V4_1_UI_POLISH — catalog micro-fixes from production review. */
/* 1) Subcategory icon: more visible, still proportional to the heading. */
.product-group>h3{gap:14px}
.product-group__icon{
  width:46px!important;
  height:46px!important;
  padding:5px!important;
  border-radius:13px!important;
  flex:0 0 46px;
  box-shadow:0 8px 24px rgba(0,0,0,.24),0 0 0 1px rgba(139,92,246,.05) inset;
}

/* 2) Both POPULAR and NEW badges are magnetized to the card's right edge. */
.product-title-row{width:100%;align-items:flex-start}
.product-title-row h4{flex:1 1 auto;min-width:0;padding-right:10px}
.product-title-row .popular-badge{
  margin-left:auto!important;
  margin-right:0!important;
  align-self:flex-start!important;
  flex:0 0 auto!important;
}

/* 3) Every purchasable product uses the primary violet CTA. Disabled stock stays muted. */
.buy-btn:not(:disabled){
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(139,92,246,.10);
}
.buy-btn:hover:not(:disabled){
  background:#9567f7!important;
  border-color:#a477ff!important;
  box-shadow:0 12px 28px rgba(139,92,246,.25),0 0 0 1px rgba(255,255,255,.06) inset!important;
}
.buy-btn:disabled{
  background:var(--surface-2)!important;
  border-color:var(--border)!important;
  color:var(--muted)!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}

/* 4) Admin chip gets the same living hover language as the other header actions. */
.admin-chip{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .25s var(--v4-spring),border-color .25s ease,background .25s ease,box-shadow .25s ease!important;
}
.admin-chip::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.07) 46%,rgba(139,92,246,.16) 50%,rgba(255,255,255,.05) 54%,transparent 72%);
  transform:translateX(-120%);
  transition:transform .62s var(--v4-ease);
}
.admin-chip:hover{
  transform:translateY(-2px);
  border-color:#5a438c!important;
  background:#19142a!important;
  box-shadow:0 12px 28px rgba(89,55,165,.18),0 0 0 1px rgba(139,92,246,.06) inset;
}
.admin-chip:hover::before{transform:translateX(120%)}
.admin-chip:active{transform:translateY(0) scale(.985)}
.admin-chip:focus-visible{outline:2px solid rgba(139,92,246,.8);outline-offset:3px}

@media (max-width:900px){
  .product-group__icon{width:40px!important;height:40px!important;flex-basis:40px;padding:4px!important;border-radius:11px!important}
}


/* VEXZY_REDESIGN_V4_2_FINAL_UI — production review fixes. */
/* Re-enable each subcategory as a real layout group. integration.css used
   display:contents during the first dynamic-catalog integration, which made the
   heading visually detach from its own cards. The outer catalog still keeps
   the larger gap between separate subcategories. */
.product-group{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
}
.product-group>h3{
  margin:0!important;
  padding:0 0 2px!important;
}

/* A deterministic two-column title row makes BOTH badges align to the card's
   right edge. It does not depend on title width, wrapping or badge type. */
.product-card.is-popular .product-card__top{padding-right:0!important}
.product-title-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) max-content!important;
  align-items:start!important;
  column-gap:16px!important;
  width:100%!important;
  min-width:0!important;
}
.product-title-row h4{
  grid-column:1!important;
  min-width:0!important;
  margin:0!important;
  padding-right:0!important;
}
.product-title-row .popular-badge{
  grid-column:2!important;
  justify-self:end!important;
  align-self:start!important;
  position:static!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  margin:0!important;
  flex:none!important;
  white-space:nowrap!important;
}

/* Product description disclosure in checkout. Collapsed text remains compact;
   expanded text preserves administrator-authored line breaks exactly. */
.summary-description-toggle{
  width:max-content;
  max-width:100%;
  margin-top:8px;
  padding:0;
  border:0;
  background:transparent;
  color:#a987ff;
  font:inherit;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  cursor:pointer;
  text-align:left;
  transition:color .2s ease,transform .22s var(--v4-spring),text-shadow .2s ease;
}
.summary-description-toggle:hover{
  color:#c4adff;
  transform:translateX(2px);
  text-shadow:0 0 14px rgba(139,92,246,.24);
}
.summary-description-toggle:focus-visible{outline:2px solid rgba(139,92,246,.75);outline-offset:4px;border-radius:4px}
.summary-description-toggle[hidden]{display:none!important}
#summaryDescription.is-expanded{
  display:block!important;
  overflow:visible!important;
  max-height:none!important;
  -webkit-line-clamp:unset!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere;
}

@media (max-width:480px){
  .product-title-row{column-gap:10px!important}
}