/* =========================
   GHOSTWARE CORE VARS
   ========================= */
:root{
  --cl-background: 7 8 16;
  --gw-bg: #070810;
  --gw-red: #ff2a55;
  --gw-purple: #7c3aed;

  --gw-nav-h: 68px;
  --gw-nav-bg-top: rgba(7, 10, 18, 0.35);
  --gw-nav-bg: rgba(7, 10, 18, 0.72);
  --gw-nav-border: rgba(255,255,255,0.06);

  --gw-pill-bg: rgba(255,255,255,0.06);
  --gw-pill-bg-hover: rgba(255,255,255,0.10);
  --gw-pill-border: rgba(255,255,255,0.10);

  --gw-text: rgba(255,255,255,0.86);
  --gw-muted: rgba(255,255,255,0.56);
}

@media (max-width: 640px){
  :root{ --gw-nav-h: 64px; }
}

html, body{
  min-height: 100%;
}

html{
  background-color: rgb(var(--cl-background)) !important;
  background-image:
    radial-gradient(1200px 700px at 50% -10%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(1100px 650px at 50% 10%, rgba(255,42,85,.22), transparent 65%),
    radial-gradient(900px 520px at 50% 45%, rgba(124,58,237,.16), transparent 70%),
    radial-gradient(900px 650px at 50% 110%, rgba(255,42,85,.12), transparent 72%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  scroll-behavior: smooth;
}

body{
  background: transparent !important;
  position: relative;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.035) 0px,
    rgba(255,255,255,.035) 1px,
    transparent 1px,
    transparent 18px
  );
  opacity: .06;
  mix-blend-mode: overlay;
}

#app{
  position: relative;
  z-index: 1;
  isolation: auto;
}

.component,
main,
#app,
[class*="bg-background"]{
  background: transparent !important;
}

[x-cloak]{ display:none !important; }

/* Disable copying on storefront */
.no-copy,
.no-copy * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.no-copy img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Allow copying inside customer dashboard */
.gw-cdash,
.gw-cdash * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  user-select: text !important;
}

/* =========================
   HERO BASE
   ========================= */
.gw-hero{
  background: transparent !important;
  overflow: hidden;
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
}

.gw-hero-banner{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: .62;
  filter: saturate(1.08) contrast(1.05);
  pointer-events: none;
}

.gw-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,8,16,.92) 0%, rgba(7,8,16,.36) 32%, rgba(7,8,16,.36) 68%, rgba(7,8,16,.92) 100%),
    linear-gradient(180deg, rgba(7,8,16,.90) 0%, rgba(7,8,16,.28) 42%, rgba(7,8,16,.94) 100%),
    radial-gradient(700px 360px at 50% 42%, rgba(124,58,237,.20), transparent 68%),
    radial-gradient(700px 360px at 50% 46%, rgba(255,42,85,.13), transparent 70%);
}

.gw-hero::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:
    radial-gradient(closest-side at 50% 14%, rgba(124,58,237,.28) 0%, transparent 62%),
    radial-gradient(closest-side at 50% 26%, rgba(255,42,85,.18) 0%, transparent 65%),
    radial-gradient(closest-side at 50% 92%, rgba(124,58,237,.14) 0%, transparent 60%);
  filter: blur(48px);
  opacity:.85;
  pointer-events:none;
  z-index:2;
}

.gw-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.035) 0px,
    rgba(255,255,255,.035) 1px,
    transparent 1px,
    transparent 16px
  );
  opacity:.055;
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index:3;
}

.gw-hero > *{
  position: relative;
  z-index: 4;
}

.gw-hero-banner,
.gw-hero-overlay{
  position: absolute !important;
}

.gw-hero .container{
  width: 100%;
  justify-content: center !important;
}

.gw-hero .container > div:first-child{
  width: 100%;
  max-width: 900px !important;
  margin-inline: auto !important;
  text-align: center !important;
  align-items: center !important;
}

/* =========================
   HERO LABEL + SIDE LINES
   ========================= */
.gw-hero-headline,
.gw-hero .gw-hero-headline{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 18px;
}

.gw-hero-headline::before,
.gw-hero-headline::after,
.gw-hero .gw-hero-headline::before,
.gw-hero .gw-hero-headline::after{
  content:"";
  height: 1px;
  width: 110px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.22),
    transparent
  );
  opacity: .65;
}

.gw-hero-label,
.gw-hero .gw-hero-label{
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .18em;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.85),
    rgba(255,42,85,.70)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================
   HERO TITLE + SUBTITLE
   ========================= */
.gw-hero h1{
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  font-size: clamp(44px, 5vw, 78px) !important;
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
}

.gw-hero p{
  max-width: 680px;
  margin: 0 auto !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* =========================
   HERO BUTTONS
   ========================= */
.gw-hero [data-dsr]{
  justify-content: center !important;
}

.gw-hero [data-dsr] a,
.gw-hero [data-dsr] button{
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.gw-hero [data-dsr] a:first-child,
.gw-hero [data-dsr] button:first-child{
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 16px 40px rgba(124,58,237,.28);
}

.gw-hero [data-dsr] a:first-child:hover,
.gw-hero [data-dsr] button:first-child:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 46px rgba(124,58,237,.34);
  filter: brightness(1.05);
}

.gw-hero [data-dsr] a:nth-child(2),
.gw-hero [data-dsr] button:nth-child(2){
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
}

.gw-hero [data-dsr] a:nth-child(2):hover,
.gw-hero [data-dsr] button:nth-child(2):hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

/* =========================
   HERO BUTTONS – FINAL CLEAN VERSION
   ========================= */
.gw-hero-actions a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  padding: 14px 26px !important;
  border-radius: 16px !important;
  font-weight: 600 !important;
  font-size: 15px;
  min-width: 170px;
  transition: all .25s ease;
}

.gw-hero-actions a:first-child{
  background: linear-gradient(90deg, var(--gw-red), var(--gw-purple)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.gw-hero-actions a:first-child:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

.gw-hero-actions a:first-child::after{
  content: "\f07a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
}

.gw-hero-actions a:nth-child(2){
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.9) !important;
}

.gw-hero-actions a:nth-child(2):hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.30);
}

/* =========================
   SECTION LABEL
   ========================= */
.gw-section-headline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-bottom:26px;
}

.gw-section-headline::before,
.gw-section-headline::after{
  content:"";
  height:1px;
  width:75px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  opacity:.7;
}

.gw-section-label{
  font-weight:500;
  font-size:15px;
  letter-spacing:.18em;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.9),
    rgba(255,42,85,.7)
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* =========================
   MINI LABEL WITH SIDE LINES
   ========================= */
.gw-minihead{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 20px;
}

.gw-minihead::before,
.gw-minihead::after{
  content:"";
  height: 1px;
  width: 90px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  opacity: .85;
}

.gw-minilabel{
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: none;
  background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,42,85,.70));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================
   GLOBAL PRODUCT / GROUP CARDS
   ========================= */
.gw-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  border: 0 !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}

.gw-card > *{
  position: relative;
  z-index: 2;
}

.gw-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  z-index:1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.gw-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:20px;
  pointer-events:none;
  z-index:3;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  opacity: 0;
  transition: opacity .35s ease;
}

.gw-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 75px rgba(0,0,0,.50);
}

.gw-card:hover::before{
  opacity: 1;
}

.gw-card-media img{
  border-radius: 14px !important;
  filter: saturate(1.05) contrast(1.05);
  transition: transform .35s ease, filter .35s ease;
}

.gw-card:hover .gw-card-media img{
  transform: scale(1.02);
  filter: saturate(1.08) contrast(1.08);
}

.gw-card-media::after{
  content:"";
  position:absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 56px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(to bottom, transparent, rgba(7,8,16,.88));
  pointer-events:none;
}

.gw-card-body h3{
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.92) !important;
}

.gw-card-body p{
  color: rgba(255,255,255,.55) !important;
}

.gw-card-body .text-accent-500{
  color: rgba(255,42,85,.92) !important;
}

.gw-card .badges{
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 10;
  pointer-events: none;
}

.gw-card .badges > div{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  border-radius: 10px;
}

/* =========================
   SHOP PRODUCT CARDS
   ========================= */
.gw-shop-card{
  border-radius: 20px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(16,18,34,.96), rgba(10,12,26,.96)) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.42) !important;
}

.gw-shop-card .gw-card-media{
  padding: 10px !important;
  margin-bottom: 0 !important;
}

.gw-shop-card .gw-card-media img{
  width: 100%;
  display: block;
  border-radius: 14px !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.gw-shop-card__body{
  padding-top: 12px !important;
  padding-bottom: 14px !important;
  min-height: unset;
  display: flex;
  flex-direction: column;
}

.gw-shop-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.gw-shop-card__title{
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255,255,255,.94) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Homepage + navbar modal product cards only */
.gw-shop-card .gw-status-pill.gw-shop-card__status{
  padding: 4px 11px !important;
  min-height: 26px !important;
  gap: 6px !important;
  border-radius: 999px !important;
}

.gw-shop-card .gw-status-pill.gw-shop-card__status .gw-status-dot{
  width: 8px !important;
  height: 8px !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--stc) 16%, transparent) !important;
}

.gw-shop-card .gw-status-pill.gw-shop-card__status .gw-status-pulse{
  inset: -4px !important;
}

.gw-shop-card .gw-status-pill.gw-shop-card__status .gw-status-text{
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.gw-shop-card__bottom{
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.gw-shop-card__meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gw-shop-card__meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Divider line between card sections (homepage + navbar modal only) */
.gw-shop-card__bottom{
  border-top: 1px solid rgba(124,58,237,0.18);
  padding-top: 8px;
  margin-top: 8px;
}

.gw-shop-card__availability{
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: rgba(255,255,255,.92);
}

.gw-shop-card__delivery{
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255,255,255,.45);
}

.gw-shop-card__priceWrap{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex: 0 0 auto;
}

.gw-shop-card__priceLabel{
  font-size: 12px;
  line-height: 1.15;
  color: rgba(255,255,255,.40);
}

.gw-shop-card__price{
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #c084fc;
}

.gw-shop-card .gw-card-body > div:last-child > span.text-accent-500{
  display: none !important;
}

@media (max-width: 640px){
  .gw-shop-card__top{
    align-items: flex-start;
    flex-direction: column;
  }

  .gw-shop-card__status{
    align-self: flex-start;
  }

  .gw-shop-card__bottom{
    align-items: flex-start;
  }

  .gw-shop-card__priceWrap{
    align-items: flex-end;
    text-align: right;
  }
}

.gw-shop-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 25px 60px rgba(0,0,0,.55);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* =========================
   GROUP / CATEGORY CARD META
   Shared by homepage + navbar
   ========================= */
.gw-group-card__bottom{
  margin-top: 10px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.gw-group-card__meta{
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.gw-group-card__count{
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: rgba(255,255,255,.78) !important;
}

.gw-group-card__delivery{
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: rgba(255,255,255,.45) !important;
}

.gw-group-card__browse{
  flex: 0 0 auto !important;
  margin-left: auto !important;
  align-self: flex-end !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #c084fc !important;
  transform: translateY(-2px) !important;
  transition: transform .2s ease, color .2s ease !important;
}

.gw-card:hover .gw-group-card__browse,
.gw-pmodal__gcard:hover .gw-group-card__browse{
  transform: translateY(-2px) translateX(2px) !important;
  color: #d8b4fe !important;
}

/* Fix category card height / remove extra blank space */
.gw-card:has(.gw-group-card__bottom){
  display: flex;
  flex-direction: column;
}

.gw-card:has(.gw-group-card__bottom) .gw-card-body{
  min-height: unset !important;
  height: auto !important;
  flex: 0 0 auto;
  padding-bottom: 16px !important;
}

/* =========================
   NAVBAR
   ========================= */
.navbar-spacer{
  height: var(--gw-nav-h);
}

.gw-nav{
  height: var(--gw-nav-h);
  background: var(--gw-nav-bg-top);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background 180ms ease, border-color 180ms ease, backdrop-filter 180ms ease;
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 2147483647;
}

.gw-nav.is-scrolled{
  background: var(--gw-nav-bg);
  border-bottom-color: var(--gw-nav-border);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.gw-nav__row{
  height: var(--gw-nav-h);
  display: flex;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
}

.gw-nav__brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex: 0 0 auto;
}

.gw-nav__logo{
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.gw-nav__name{
  color: var(--gw-text);
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
}

.gw-nav__links{
  display:flex;
  align-items:center;
  gap: 26px;
  margin-left: 72px;
}

.gw-nav__link{
  color: var(--gw-muted);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  position: relative;
  padding: 6px 0;
  transition: color 160ms ease, transform 160ms ease;
}

.gw-nav__link:hover{
  color: var(--gw-text);
  transform: translateY(-1px);
}

.gw-nav__link.is-active{
  color: var(--gw-purple);
}

.gw-nav__link.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background: rgba(124,58,237,0.9);
  box-shadow: 0 6px 18px rgba(124,58,237,0.25);
}

.gw-nav__actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.gw-pill{
  height: 38px;
  border-radius: 12px;
  background: var(--gw-pill-bg);
  border: 1px solid var(--gw-pill-border);
  color: var(--gw-text);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 0 12px;
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.gw-pill:hover{
  background: var(--gw-pill-bg-hover);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

.gw-pill--icon{
  width: 42px;
  height: 38px;
  padding: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex: 0 0 42px;
}

.gw-cart-anchor{
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gw-ico{
  display: block;
  width: 20px;
  height: 20px;
}

.gw-ico--cart{
  transform: translateX(-1px) translateY(1px);
}

.gw-badge{
  position: absolute;
  top: -7px;
  right: -8px;

  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;

  background: var(--gw-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 10px 20px rgba(124,58,237,.28);
  z-index: 5;
}

.gw-hamburger{
  display:none;
}

@media (max-width:1024px){
  .gw-nav__links{
    display:none;
  }

  .gw-hamburger{
    display:flex;
    width:42px;
    height:38px;
    border-radius:12px;
    background: var(--gw-pill-bg);
    border:1px solid var(--gw-pill-border);
    align-items:center;
    justify-content:center;
  }

  .gw-hamburger:hover{
    background: var(--gw-pill-bg-hover);
  }
}

.gw-mnav{
  position: fixed;
  top: var(--gw-nav-h);
  left: 0;
  right: 0;
  padding: 18px 0;
  background: rgba(10,18,32,0.94);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  z-index: 2147483646;
}

.gw-mnav__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.gw-mnav__list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.gw-mnav__a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px;
  border-radius:12px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.86);
  font-weight:700;
  font-size:14px;
}

.gw-mnav__a:hover{
  background: rgba(255,255,255,0.07);
}

.gw-mnav__a.is-active{
  background: rgba(124,58,237,0.14);
  border-color: rgba(124,58,237,0.22);
  color: rgba(255,255,255,0.95);
}

@media (max-width: 1024px){
  .gw-desktop-only{ display:none !important; }
}

/* Navbar action hover gradient outline */
.gw-nav .gw-nav__actions .gw-curr__btn,
.gw-nav .gw-nav__actions .gw-pill{
  position: relative;
  border-radius: 14px;
  transform: translateZ(0);
}

.gw-nav .gw-nav__actions .gw-curr__btn > *,
.gw-nav .gw-nav__actions .gw-pill > *{
  position: relative;
  z-index: 2;
}

.gw-nav .gw-nav__actions .gw-curr__btn::after,
.gw-nav .gw-nav__actions .gw-pill::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.gw-nav .gw-nav__actions .gw-curr__btn::before,
.gw-nav .gw-nav__actions .gw-pill::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  z-index: 1;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  opacity: 0;
  transition: opacity .25s ease;
}

.gw-nav .gw-nav__actions .gw-curr__btn:hover::before,
.gw-nav .gw-nav__actions .gw-pill:hover::before,
.gw-nav .gw-nav__actions .gw-curr__btn:focus-visible::before,
.gw-nav .gw-nav__actions .gw-pill:focus-visible::before{
  opacity: 1;
}

/* =========================
   CURRENCY DROPDOWN
   ========================= */
.gw-curr{ position: relative; display: inline-flex; }

.gw-curr__btn{
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.86);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.gw-curr__btn:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

.gw-curr__icon{ opacity: .85; }
.gw-curr__caret{ opacity: .65; font-size: 12px; margin-left: 2px; }

.gw-curr__menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 240px;
  border-radius: 14px;
  background: rgba(10, 18, 32, 0.88);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
  z-index: 99999;
  display: none;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.gw-curr.is-open .gw-curr__menu,
.gw-curr[aria-expanded="true"] .gw-curr__menu,
.gw-curr__btn[aria-expanded="true"] + .gw-curr__menu,
.gw-curr__menu[style*="display: block"]{
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.gw-curr__head{
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.gw-curr__search{
  width: 100%;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
  padding: 0 10px;
  outline: none;
}

.gw-curr__search::placeholder{ color: rgba(255,255,255,0.45); }

.gw-curr__list{
  max-height: 320px;
  overflow: auto;
  padding: 8px;
}

.gw-curr__item{
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,0.86);
  cursor: pointer;
  text-align: left;
}

.gw-curr__item:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.06);
}

.gw-curr__item.is-active{
  background: rgba(124,58,237,0.14);
  border-color: rgba(124,58,237,0.22);
}

.gw-curr__sym{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 900;
}

.gw-curr__txt{ font-weight: 800; letter-spacing: .02em; }

.gw-curr__tag{
  font-size: 11px;
  font-weight: 900;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(124,58,237,0.18);
  border: 1px solid rgba(124,58,237,0.25);
  color: rgba(255,255,255,0.92);
}

.gw-curr__list::-webkit-scrollbar{ width: 10px; }

.gw-curr__list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  border: 2px solid rgba(10,18,32,0.88);
}

.gw-curr__sub{
  display:block;
  font-size: 11px;
  opacity: .55;
  margin-top: 2px;
  line-height: 1.1;
}

/* =========================
   NAVBAR PRODUCTS MODAL
   ========================= */
.gw-pmodal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.gw-pmodal__backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.60) !important;
  z-index: 0 !important;
  pointer-events: auto !important;
}

.gw-pmodal__panel{
  position: relative !important;
  z-index: 1 !important;
  width: min(1280px, 97vw) !important;
  max-height: min(860px, 92vh) !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  border: 2px solid transparent !important;
  background:
    linear-gradient(rgba(10,12,22,.96), rgba(10,12,22,.96)) padding-box,
    linear-gradient(90deg, var(--gw-purple), var(--gw-red)) border-box !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.70) !important;
}

.gw-pmodal__panel::before{ content: none !important; }

.gw-pmodal__top{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(10,12,22,.92);
}

.gw-pmodal__left,
.gw-pmodal__right{
  display:flex;
  align-items:center;
  min-width: 0;
}

.gw-pmodal__left{ justify-content:flex-start; }
.gw-pmodal__right{ justify-content:flex-end; }

.gw-pmodal__titleWrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width: 0;
}

.gw-pmodal__title{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(560px, 65vw);
}

.gw-pmodal__backBtn,
.gw-pmodal__closeBtn{
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  cursor: pointer;
  position: relative;
  z-index: 3;
  pointer-events: auto !important;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.gw-pmodal__closeBtn{
  width: 42px;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gw-pmodal__backBtn:hover,
.gw-pmodal__closeBtn:hover{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transform: translateY(-1px);
  background: linear-gradient(90deg, rgba(124,58,237,.35), rgba(239,68,68,.35));
}

.gw-pmodal__content{
  max-height: calc(min(860px, 92vh) - 64px);
  overflow: auto;
  padding: 14px 20px 18px;
  position: relative;
  z-index: 2;
}

.gw-pmodal__content::-webkit-scrollbar{ width: 0; height: 0; }
.gw-pmodal__content{ scrollbar-width: none; }

.gw-pmodal__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.gw-pmodal__gcard{
  text-align: left;
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  border: 0;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  position: relative;
  padding: 0;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
  min-height: 0;
}

.gw-pmodal__gcard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.gw-pmodal__gcard::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:22px;
  pointer-events:none;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  opacity: 0;
  transition: opacity .35s ease;
}

.gw-pmodal__gcard:hover{
  transform: translateY(-3px);
  box-shadow: 0 28px 75px rgba(0,0,0,.50);
}

.gw-pmodal__gcard:hover::before{
  opacity: 1;
}

.gw-pmodal__gmedia{
  padding: 12px 12px 0;
  position: relative;
}

.gw-pmodal__gmedia img{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  display: block;
  object-fit: cover;
}

.gw-pmodal__gempty{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.gw-pmodal__gbody{
  padding: 14px 14px 14px;
  display: flex;
  flex-direction: column;
}

.gw-pmodal__gname{
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  color: rgba(255,255,255,.94);
  margin-bottom: 12px;
}

.gw-pmodal__gsub{
  margin-top: 14px !important;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.gw-pmodal__gmedia .badges{
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 20;
  pointer-events: none;
}

.gw-pmodal__gmedia .badges > div{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: inherit;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gw-pmodal__prodGrid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 280px)) !important;
  gap: 18px !important;
  justify-content: center !important;
  align-items: start !important;
}

.gw-pmodal__prodItem{
  width: 280px;
  max-width: 100%;
}

.gw-pmodal__empty{
  margin-top: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

@media (max-width: 1200px){
  .gw-pmodal__prodGrid{
    grid-template-columns: repeat(3, minmax(0, 280px)) !important;
  }
}

@media (max-width: 1024px){
  .gw-pmodal__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .gw-pmodal__prodGrid{
    grid-template-columns: repeat(2, minmax(0, 280px)) !important;
  }
}

@media (max-width: 640px){
  .gw-pmodal{ padding: 10px !important; }
  .gw-pmodal__grid{ grid-template-columns: 1fr; }
  .gw-pmodal__title{ max-width: 52vw; }
}

@media (max-width: 520px){
  .gw-pmodal__prodGrid{
    grid-template-columns: 1fr !important;
  }

  .gw-pmodal__prodItem{
    width: 100%;
  }
}

/* =========================
   HOME PAGE CATEGORY MODAL
   ========================= */
.gw-homemodal{
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.gw-homemodal__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.60);
}

.gw-homemodal__panel{
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100vw - 40px));   /* match the group panel width behind it */
  max-height: min(780px, 88vh);
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 420px at 85% 10%, rgba(124,58,237,.12), transparent 60%),
    radial-gradient(900px 420px at 10% 95%, rgba(255,42,85,.08), transparent 60%),
    rgba(6,10,24,.96);
  box-shadow:
    0 28px 90px rgba(0,0,0,.60),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

.gw-homemodal__panel::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.gw-homemodal__top{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.gw-homemodal__left{
  display: flex;
  justify-content: flex-start;
}

.gw-homemodal__right{
  display: flex;
  justify-content: flex-end;
}

.gw-homemodal__titleWrap{
  display: flex;
  justify-content: center;
}

.gw-homemodal__title{
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  color: rgba(255,255,255,.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(560px, 65vw);
}

.gw-homemodal__backBtn,
.gw-homemodal__closeBtn{
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.gw-homemodal__backBtn{
  padding: 0 12px;
}

.gw-homemodal__closeBtn{
  width: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gw-homemodal__backBtn:hover,
.gw-homemodal__closeBtn:hover{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transform: translateY(-1px);
  background: linear-gradient(90deg, rgba(124,58,237,.35), rgba(239,68,68,.35));
}

.gw-homemodal__content{
  padding: 18px;
  max-height: calc(min(780px, 88vh) - 72px);
  overflow: auto;
}

.gw-homemodal__content::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.gw-homemodal__content{
  scrollbar-width: none;
}

.gw-homemodal__prodGrid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));   /* exactly 5 per row */
  gap: 18px;
  justify-content: start;                             /* bound to the left */
  align-items: start;
}

.gw-homemodal__prodItem{
  width: 100%;
  max-width: 100%;
}

.gw-homemodal__prodItem > a.gw-shop-card{
  width: 100%;
  max-width: 100%;
}

.gw-homemodal__empty{
  margin-top: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

@media (max-width: 1240px){
  .gw-homemodal__prodGrid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .gw-homemodal__prodGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .gw-homemodal__prodGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .gw-homemodal{
    padding: 10px;
  }

  .gw-homemodal__prodGrid{
    grid-template-columns: 1fr;
  }

  .gw-homemodal__prodItem{
    width: 100%;
  }
}

/* Show DSR content inside modals */
.gw-homemodal [data-dsr],
.gw-pmodal [data-dsr]{
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body[style*="overflow: hidden"]{
  overscroll-behavior: contain;
}

/* =========================
   SELLAUTH CUSTOMER LOGIN MODAL
   ========================= */
[role="dialog"] button[type="submit"],
[role="dialog"] form button[type="submit"],
dialog button[type="submit"],
dialog form button[type="submit"],
.fixed.inset-0 form button[type="submit"],
.fixed.inset-0 [role="dialog"] button[type="submit"],
.btn-primary,
button.btn-primary{
  background: linear-gradient(90deg, var(--gw-red), var(--gw-purple)) !important;
  background-image: linear-gradient(90deg, var(--gw-red), var(--gw-purple)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 999px !important;
  height: 56px !important;
  padding: 0 28px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.35) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

[role="dialog"] button[type="submit"][class*="bg-"]{
  background: linear-gradient(90deg, var(--gw-red), var(--gw-purple)) !important;
  background-image: linear-gradient(90deg, var(--gw-red), var(--gw-purple)) !important;
}

[role="dialog"] button[type="submit"]:hover,
dialog button[type="submit"]:hover,
.btn-primary:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.45) !important;
  filter: brightness(1.05) !important;
}

[role="dialog"] input:focus,
dialog input:focus{
  border-color: rgba(124,58,237,.8) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.22) !important;
  outline: none !important;
}

/* =========================
   WHY CHOOSE US
   ========================= */
.gw-wcu-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px){
  .gw-wcu-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

.gw-wcu-card{
  position: relative;
  border-radius: 18px;
  border: 0 !important;
  background: rgba(255,255,255,.02);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  display: flex !important;
  flex-direction: column !important;
}

.gw-wcu-card > *{
  position: relative;
  z-index: 2;
}

.gw-wcu-card::after{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.gw-wcu-card::before{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: 18px;
  pointer-events:none;
  z-index: 3;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  opacity: 0;
  transition: opacity .35s ease;
  filter: blur(.15px);
}

.gw-wcu-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
}

.gw-wcu-card:hover::before{
  opacity: 1;
}

@supports not (-webkit-mask-composite: xor){
  .gw-wcu-card::before{
    padding: 0;
    background: none;
    border: 1px solid rgba(255,255,255,.12);
  }
}

.gw-wcu-media{
  height: 200px;
  width: 100%;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.02) contrast(1.02);
  flex: 0 0 auto !important;
}

.gw-wcu-body{
  padding: 16px 18px;
  background: rgba(7,8,16,.68);
  border-top: 1px solid rgba(255,255,255,.06);
  width: 100% !important;
  display: block !important;
  flex: 1 1 auto !important;
  margin-top: auto !important;
  box-sizing: border-box !important;
}

.gw-wcu-title{
  font-weight: 700;
  font-size: 18px;
  color: rgba(255,255,255,.92);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.gw-wcu-text{
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.60);
  margin: 0;
}

.gw-wcu-grid .gw-wcu-badge,
.gw-wcu-grid .gw-wcu-icon,
.gw-wcu-grid .gw-wcu-watermark,
.gw-wcu-grid .gw-watermark{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.gw-media-delivery{
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(650px 280px at 45% 25%, rgba(255,42,85,.14), transparent 70%),
    radial-gradient(650px 280px at 55% 35%, rgba(124,58,237,.16), transparent 72%);
}

.gw-media-pricing{
  background-image: url("https://i.imgur.com/nF994fj.png");
}

.gw-media-panel{
  background-image: url("https://i.imgur.com/2Mq6Cq0.png"),
    radial-gradient(650px 280px at 60% 25%, rgba(124,58,237,.20), transparent 70%),
    radial-gradient(650px 280px at 40% 35%, rgba(255,42,85,.14), transparent 72%);
}

.gw-media-simple{
  background-image: url("https://i.imgur.com/Ynypm1h.png"),
    radial-gradient(650px 280px at 40% 25%, rgba(124,58,237,.18), transparent 70%),
    radial-gradient(650px 280px at 60% 35%, rgba(255,42,85,.12), transparent 72%);
}

.gw-media-safe{
  background-image: url("https://i.imgur.com/JYP8Du7.png");
  background-blend-mode: normal;
}

.gw-media-payments{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(650px 280px at 55% 25%, rgba(255,42,85,.14), transparent 70%),
    radial-gradient(650px 280px at 45% 35%, rgba(124,58,237,.16), transparent 72%);
}

.gw-wcu-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.1) contrast(1.05);
}

.gw-media-payments::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.25);
  pointer-events:none;
}

/* WCU delivery animation */
.gw-delivery-anim{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(5,7,14,.78), rgba(7,8,16,.90));
}

.gw-delivery-watermark{
  position: absolute;
  inset: -140px;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 1;
  opacity: .22;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gw-delivery-row{
  width: 220%;
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: .18em;
  font-size: 30px;
  line-height: 1.6;
  text-transform: uppercase;
  color: rgba(255,255,255,.085);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.gw-delivery-anim::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(260px 160px at 50% 40%, rgba(255,42,85,.15), transparent 60%),
    radial-gradient(260px 160px at 55% 45%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(400px 300px at 50% 65%, rgba(0,0,0,.55), rgba(0,0,0,.85));
}

.gw-delivery-ring{
  width: 150px;
  height: 150px;
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 0 18px rgba(124,58,237,.25))
    drop-shadow(0 0 14px rgba(255,42,85,.18));
}

.gw-delivery-ring-bg{
  stroke: rgba(120,160,255,.10);
}

.gw-delivery-ring-fg{
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-linecap: round;
  transition: stroke-dashoffset .4s ease;
}

.gw-delivery-center{
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
  z-index: 3;
}

.gw-delivery-label{
  font-size: 11px;
  color: rgba(234,241,255,.70);
  line-height: 1.2;
}

.gw-delivery-value{
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
}

.gw-delivery-icon{
  font-size: 26px;
  margin-top: 6px;
}

/* =========================
   TEXT + VIDEO BLOCK
   ========================= */
.gw-tv .gw-video-shell{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

.gw-tv lite-youtube.gw-video{
  width: 100%;
  height: 100%;
  border-radius: 18px;
}

.gw-tv .gw-video-shell:hover{
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 26px 80px rgba(0,0,0,.65);
  transform: translateY(-2px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* =========================
   FEATURED PRODUCTS ANIM
   ========================= */
.gw-products-head{
  opacity: 0;
  transform: translateY(16px) scale(.98);
  filter: blur(6px);
  transition:
    opacity .65s cubic-bezier(.2,.8,.2,1),
    transform .65s cubic-bezier(.2,.8,.2,1),
    filter .65s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform, filter;
}

.gw-products-head[style*="visibility: visible"]{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.gw-pop{
  transform: translateY(14px) scale(.98);
  opacity: 0;
  filter: blur(6px);
}

.gw-pop[style*="opacity: 1"]{
  filter: blur(0);
}

/* =========================
   REVIEWS MARQUEE
   ========================= */
.gw-reviews-title{
  text-align: center;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(34px, 4.2vw, 60px);
  color: rgba(255,255,255,.92);
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
  margin: 0;
}

.gw-reviews-sub{
  text-align: center;
  max-width: 760px;
  margin: 14px auto 0;
  color: rgba(255,255,255,.55);
  font-size: 16px;
  line-height: 1.7;
}

.gw-marquee{
  margin-top: 42px;
  display: grid;
  gap: 18px;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.gw-marquee-row{
  overflow: hidden;
  position: relative;
}

.gw-marquee-track{
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
}

@keyframes gw-marquee-left{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes gw-marquee-right{
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.gw-marquee-row--left .gw-marquee-track{
  animation: gw-marquee-left 40s linear infinite;
}

.gw-marquee-row--right .gw-marquee-track{
  animation: gw-marquee-right 44s linear infinite;
}

.gw-marquee-row:hover .gw-marquee-track{
  animation-play-state: running !important;
}

.gw-review-card{
  position: relative;
  width: 360px;
  min-width: 360px;
  border-radius: 18px;
  overflow: hidden;
  border: 0;
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  transform: none;
  transition: opacity .25s ease;
}

.gw-review-card > *{
  position: relative;
  z-index: 2;
}

.gw-review-card::after{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.gw-review-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  pointer-events:none;
  z-index: 3;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  opacity: 0;
  transition: opacity .25s ease;
  filter: blur(.15px);
}

.gw-review-card:hover::before{ opacity: 1; }
.gw-review-card:hover{ transform: none !important; }

.gw-review-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}

.gw-review-date{
  color: rgba(255,255,255,.45);
  font-size: 12px;
  font-weight: 600;
}

.gw-stars{
  display: inline-flex;
  gap: 4px;
  line-height: 1;
}

.gw-star{
  font-size: 14px;
  opacity: .25;
}

.gw-star.is-on{
  opacity: .95;
}

.gw-review-text{
  padding: 0 18px 12px;
  color: rgba(255,255,255,.62);
  font-size: 14px;
  line-height: 1.65;
  min-height: 48px;
}

.gw-review-bottom{
  padding: 14px 18px;
  background: rgba(7,8,16,.68);
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gw-review-product{
  color: rgba(255,255,255,.80);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
}

.gw-verified{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .10);
  border: 1px solid rgba(34, 197, 94, .20);
  color: rgba(34, 197, 94, .95);
  font-weight: 800;
  font-size: 12px;
}

.gw-verified-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

.gw-reviews-cta{
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.gw-reviews-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  font-weight: 700;
  font-size: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gw-reviews-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

@media (max-width: 900px){
  .gw-review-card{ width: 320px; min-width: 320px; }
}

@media (max-width: 520px){
  .gw-review-card{ width: 280px; min-width: 280px; }
  .gw-review-product{ max-width: 170px; }
}

@media (prefers-reduced-motion: reduce){
  .gw-marquee-track{ animation: none !important; }
}

/* =========================
   FAQ
   ========================= */
.gw-faq-title{
  text-align:center;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(34px, 4.2vw, 60px);
  color: rgba(255,255,255,.92);
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
  margin: 0;
}

.gw-faq-sub{
  text-align:center;
  max-width: 760px;
  margin: 14px auto 0;
  color: rgba(255,255,255,.55);
  font-size: 16px;
  line-height: 1.7;
}

.gw-faq-list{
  max-width: 980px;
  margin: 42px auto 0;
  display: grid;
  gap: 16px;
}

.gw-faq-item{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.gw-faq-item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.gw-faq-item::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:18px;
  pointer-events:none;
  z-index: 2;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  opacity: 0;
  transition: opacity .35s ease;
  filter: blur(.15px);
}

.gw-faq-item:hover::before{
  opacity: 1;
}

.gw-faq-item > *{ position: relative; z-index: 3; }

.gw-faq-q{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.gw-faq-qtext{
  font-weight: 800;
  font-size: 18px;
  color: rgba(255,255,255,.92);
}

.gw-faq-a{
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
  transition: max-height .32s ease, opacity .22s ease;
  will-change: max-height, opacity;
}

.gw-faq-ainner{
  padding: 16px 22px 22px;
  color: rgba(255,255,255,.70);
  font-size: 15px;
  line-height: 1.75;
}

.gw-faq-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.85);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  flex: 0 0 auto;
}

.gw-faq-svg{ width: 18px; height: 18px; }

.gw-faq-ico.is-open{
  transform: rotate(90deg);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
}

@media (max-width: 520px){
  .gw-faq-q{ padding: 18px 16px; }
  .gw-faq-ainner{ padding: 14px 16px 18px; }
  .gw-faq-qtext{ font-size: 16px; }
  .gw-faq-ico{ width: 32px; height: 32px; border-radius: 11px; }
}

/* =========================
   SOCIALS
   ========================= */
.gw-socials .gw-socials-panel{
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  text-align: center;
  padding: 64px 24px;
  background:
    radial-gradient(900px 380px at 50% 15%, rgba(124,58,237,.22), transparent 65%),
    radial-gradient(900px 380px at 50% 65%, rgba(255,42,85,.14), transparent 70%),
    rgba(255,255,255,.02);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  position: relative;
  border: 0;
}

.gw-socials .gw-socials-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.gw-socials .gw-socials-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 240px at 50% 0%, rgba(255,255,255,.06), transparent 70%);
  opacity: .9;
}

.gw-socials-title{
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(40px, 4.2vw, 64px);
  color: rgba(255,255,255,.92);
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
  position: relative;
  z-index: 2;
}

.gw-socials-sub{
  max-width: 760px;
  margin: 14px auto 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.55);
  position: relative;
  z-index: 2;
}

.gw-socials-actions{
  margin-top: 18px;
  display:flex;
  justify-content:center;
  position: relative;
  z-index: 2;
}

.gw-socials-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  height: 48px;
  padding: 0 26px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--gw-red), var(--gw-purple));
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  position: relative;
  overflow: hidden;
}

.gw-socials-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
  filter: brightness(1.05);
}

.gw-socials-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 14px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

.gw-socials-btn-ico{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: none;
  border: none;
  font-size: 16px;
}

/* =========================
   FOOTER
   ========================= */
.gw-footer .gw-footer__bg{
  background: rgba(0,0,0,.18);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 44px 0 28px;
  position: relative;
  overflow: hidden;
}

.gw-footer .gw-footer__bg::before{
  content:"";
  position:absolute;
  inset:-30%;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 25% 10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(255,42,85,.12), transparent 60%);
  filter: blur(40px);
  opacity: .9;
}

.gw-footer .gw-footer__top{
  position: relative;
  z-index: 1;
}

.gw-footer__grid{
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px){
  .gw-footer__grid{
    grid-template-columns: 1.1fr 1fr 1fr 1.2fr;
    gap: 34px;
  }
}

.gw-footer__title{
  font-weight: 800;
  color: rgba(255,255,255,.88);
  margin: 0 0 12px 0;
  font-size: 14px;
  letter-spacing: .02em;
}

.gw-footer__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.gw-footer__link{
  color: rgba(255,255,255,.50);
  font-weight: 650;
  font-size: 13px;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.gw-footer__link:hover{
  color: rgba(255,255,255,.86);
  transform: translateX(2px);
}

.gw-footer__brand{
  justify-self: start;
}

@media (min-width: 900px){
  .gw-footer__brand{
    justify-self: end;
    text-align: right;
  }
}

.gw-footer__brandhead{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

@media (min-width: 900px){
  .gw-footer__brandhead{
    justify-content: flex-end;
  }
}

.gw-footer__logo{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.10);
}

.gw-footer__name{
  font-weight: 900;
  color: rgba(255,255,255,.90);
  font-size: 16px;
  letter-spacing: -0.01em;
}

.gw-footer__tagline{
  margin-top: 10px;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  line-height: 1.6;
  max-width: 360px;
}

.gw-footer__copyright{
  margin-top: 10px;
  color: rgba(255,255,255,.38);
  font-size: 12px;
}

.gw-footer__socials{
  margin-top: 14px;
  display: inline-flex;
  gap: 10px;
}

.gw-footer__soc{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.70);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.gw-footer__soc:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}

.gw-footer__socico{
  width: 18px;
  height: 18px;
}

.gw-footer__divider{
  position: relative;
  z-index: 1;
  margin: 28px 0 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}

.gw-footer__bottom{
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.38);
  font-size: 12px;
}

.gw-footer__dot{
  opacity: .6;
}

@media (max-width: 900px){
  .gw-footer__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .gw-footer__title{
    font-size: 12px;
    margin-bottom: 10px;
  }

  .gw-footer__link{
    font-size: 12px;
  }

  .gw-footer__brand{
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
    margin-top: 10px;
  }

  .gw-footer__tagline{
    max-width: none;
  }
}

@media (max-width: 420px){
  .gw-footer__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gw-footer__brand{
    grid-column: 1 / -1;
  }
}

/* =========================
   PRODUCT PAGE
   ========================= */
.gw-ppage__grid{
  display: grid;
  gap: 28px;
}

@media (min-width: 1024px){
  .gw-ppage__grid{
    grid-template-columns: 1.25fr 0.75fr;
    align-items: start;
    gap: 28px;
  }
}

.gw-ppage__topRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
}

.gw-ppage__title{
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(34px, 4.2vw, 56px);
  color: rgba(255,255,255,.92);
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
  margin: 0;
  width: 100%;
  text-align: center;
  padding-right: 200px;
}

.gw-ppage .gw-status-pill.status{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 640px) {
  .gw-ppage__title {
    padding-right: 0;
    text-align: center;
  }

  .gw-ppage .gw-status-pill.status {
    position: static;
    transform: none;
    margin-top: 10px;
  }
}

.gw-ppage__status{
  display:flex;
  align-items:center;
  gap: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 4px 10px; /* thinner */
  backdrop-filter: blur(14px);
}

.gw-ppage__statusDot{
  width: 8px;   /* smaller dot */
  height: 8px;
  border-radius: 999px;
  position: relative;
}

.gw-ppage__statusText{
  font-weight: 800;
  font-size: 12px; /* slightly smaller */
  letter-spacing: .01em;
}

.gw-cardShell{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 55px rgba(0,0,0,.50);
  border: 0;
  padding: 18px;
}

.gw-cardShell--padless{ padding: 0; }

.gw-cardShell::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.gw-cardShell::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  pointer-events:none;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  opacity: 0;
  transition: opacity .35s ease;
  filter: blur(.15px);
}

.gw-cardShell:hover::before{ opacity: .75; }
.gw-cardShell > *{ position: relative; z-index: 2; }

.gw-ppage__slide{
  background: rgba(0,0,0,.20);
  border: 0;
  border-radius: 18px;
  overflow: hidden;
}

.gw-ppage__singleImg{
  background: rgba(0,0,0,.20);
  border-radius: 18px;
  overflow:hidden;
}

.gw-ppage__thumb{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  overflow:hidden;
  opacity: .55;
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
}

.gw-ppage__thumb.is-active,
.gw-ppage__thumb:hover{
  opacity: 1;
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16) !important;
}

.gw-ppage__noImg{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height: 400px;
  border-radius: 18px;
  background: rgba(0,0,0,.18);
}

.gw-ppage__tabs{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.gw-ppage__tab{
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
  font-weight: 800;
  font-size: 14px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.gw-ppage__tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
}

.gw-ppage__tab.is-active{
  background: rgba(124,58,237,.14);
  border-color: rgba(124,58,237,.24);
  color: rgba(255,255,255,.92);
}

.gw-ppage__tabBody{
  padding-top: 6px;
}

.gw-ppage__editor{
  color: rgba(255,255,255,.72);
  line-height: 1.75;
}

.gw-ppage__sticky{
  position: sticky;
  top: calc(var(--gw-nav-h) + 18px);
}

.gw-ppage__priceRow{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 18px;
}

.gw-ppage__priceWrap{
  display:flex;
  align-items:flex-end;
  gap: 10px;
}

.gw-ppage__price{
  font-size: 28px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.gw-ppage__unit{
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin-bottom: 4px;
}

.gw-ppage__stockText{
  font-weight: 900;
  font-size: 13px;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
}

.gw-ppage__stats{ padding: 16px 18px; }

.gw-ppage__right .gw-cardShell {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 22px 60px rgba(0,0,0,0.35);
}

.gw-ppage__right [class*="quantity"],
.gw-ppage__right [data-quantity],
.gw-ppage__right .quantity,
.gw-ppage__right .qty{
  justify-content: center !important;
}

.gw-ppage__right input[type="number"]{
  text-align: center !important;
}

.gw-ppage__right .gw-qty,
.gw-ppage__right .quantity-selector,
.gw-ppage__right .quantity-control{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

/* Splide arrows */
.gw-ppage .splide.main {
  position: relative;
}

.gw-ppage .splide.main .splide__arrow {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(-50%);
  transition: opacity 180ms ease, background 180ms ease, border-color 180ms ease;
  opacity: 0;
}

.gw-ppage .splide.main .splide__arrow--prev { left: 14px; }
.gw-ppage .splide.main .splide__arrow--next { right: 14px; }

.gw-ppage .splide.main .splide__arrow svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) {
  .gw-ppage .splide.main:hover .splide__arrow {
    opacity: 1;
  }

  .gw-ppage .splide.main .splide__arrow:hover {
    background: rgba(0,0,0,0.55);
    border-color: rgba(255,255,255,0.16);
  }
}

@media (hover: none) {
  .gw-ppage .splide.main .splide__arrow {
    opacity: 1;
  }
}

/* Thumbnails */
.gw-ppage .splide.thumbnails{
  background: transparent !important;
  border: 0 !important;
}

.gw-ppage .splide.thumbnails .splide__track{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.gw-ppage .gw-ppage__left .splide.thumbnails{
  margin-top: 10px !important;
  padding: 0 14px 14px !important;
}

.gw-ppage .gw-ppage__thumb{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

.gw-ppage .gw-ppage__left .gw-cardShell.gw-cardShell--padless{
  position: relative;
  overflow: visible;
  padding-bottom: 16px;
}

.gw-ppage .gw-ppage__left .gw-cardShell.gw-cardShell--padless::before{
  z-index: 5 !important;
  opacity: 0.95 !important;
}

.gw-ppage .gw-ppage__left .gw-cardShell.gw-cardShell--padless:hover::before{
  opacity: 0.95 !important;
}

.gw-ppage .gw-ppage__left .gw-cardShell.gw-cardShell--padless > *{
  position: relative;
  z-index: 1;
}

/* Interface preview */
.gw-iprev{
  margin: 18px 14px 22px;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}

.gw-iprev::before{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 35% 25%, rgba(124,58,237,.20), transparent 62%),
    radial-gradient(closest-side at 65% 35%, rgba(255,42,85,.14), transparent 65%);
  filter: blur(28px);
  opacity: .9;
}

.gw-iprev > *{ position: relative; z-index: 1; }

.gw-iprev__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.gw-iprev__title{
  margin: 0;
  font-weight: 900;
  font-size: 18px;
  color: rgba(255,255,255,.90);
  letter-spacing: -0.02em;
}

.gw-iprev__pills{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gw-iprev__pill{
  appearance: none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  padding: 8px 14px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .01em;
  cursor: pointer;
  user-select: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.gw-iprev__pill:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
}

.gw-iprev__pill.is-active{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.05);
  border-color: transparent;
  position: relative;
  overflow: hidden;
}

.gw-iprev__pill.is-active::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 12px;
  pointer-events:none;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  opacity: .95;
}

.gw-iprev__frame{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
  min-height: 240px;
}

.gw-iprev__frame::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  pointer-events:none;
  z-index: 0;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  opacity: .45;
}

.gw-iprev__frame > *{
  position: relative;
  z-index: 1;
}

.gw-iprev__imgWrap{
  width: 100%;
  height: 100%;
}

.gw-iprev__imgWrap img{
  display:block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border-radius: 18px;
  filter: saturate(1.05) contrast(1.05);
}

.gw-iprev__empty{
  min-height: 240px;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 18px;
  color: rgba(255,255,255,.65);
}

.gw-iprev__emptyTitle{
  font-weight: 900;
  color: rgba(255,255,255,.88);
}

.gw-iprev__emptySub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}

@media (max-width: 768px){
  .gw-iprev{
    margin: 14px 0 18px !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .gw-iprev__head{
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  .gw-iprev__title{
    font-size: 16px !important;
  }

  .gw-iprev__pills{
    gap: 8px !important;
  }

  .gw-iprev__pill{
    padding: 7px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  .gw-iprev__frame{
    min-height: 190px !important;
    border-radius: 16px !important;
  }

  .gw-iprev__imgWrap img{
    max-height: 360px !important;
    border-radius: 16px !important;
    object-fit: cover !important;
  }
}

@media (max-width: 1024px){
  .gw-ppage__grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .gw-ppage__right{
    order: 1 !important;
  }

  .gw-ppage__left{
    order: 2 !important;
  }

  .gw-ppage__left.px-4,
  .gw-ppage__right.px-4{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* =========================
   GLOBAL BUTTONS
   ========================= */
.gw-btn{
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
}

.gw-btn--primary{
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 16px 40px rgba(124,58,237,.28);
}

.gw-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 46px rgba(124,58,237,.34);
  filter: brightness(1.05);
}

.gw-btn--ghost{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: none;
}

.gw-btn--ghost:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.gw-btn:disabled,
.gw-btn[disabled]{
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* =========================
   CART PAGE
   ========================= */
.gw-cartpage .gw-cartpage__hero{
  padding-top: 72px;
  padding-bottom: 24px;
}

.gw-cartpage__head{
  max-width: 860px;
  margin: 0 auto;
}

.gw-cartpage__title{
  letter-spacing: -0.03em;
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
}

.gw-cartpage__grid{
  align-items: flex-start;
}

.gw-cartpage__card{
  border-radius: 18px;
}

.gw-cartitem{
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.gw-cartitem:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.10);
}

@media (max-width: 520px){
  .gw-cartpage .gw-cartpage__hero{ padding-top: 56px; }
}

/* =========================
   REVIEWS PAGE
   ========================= */
.gw-reviews{
  position: relative;
}

.gw-reviews__hero{
  padding-top: 44px;
  padding-bottom: 40px;
}

@media (min-width: 1024px){
  .gw-reviews__hero{
    padding-top: 56px;
    padding-bottom: 44px;
  }
}

.gw-reviews__glow{
  position: absolute;
  inset: -45% -25%;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 25% 10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(255,42,85,.14), transparent 60%);
  filter: blur(55px);
  opacity: .95;
}

.gw-reviews__wrap{
  padding-bottom: 120px;
}

@media (min-width: 1024px){
  .gw-reviews__wrap{
    padding-bottom: 160px;
  }
}

.gw-reviewcard{
  position: relative;
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}

.gw-reviewcard::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events:none;
  z-index: 0;
  padding: 2px;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .28s ease;
  filter: none;
}

.gw-reviewcard:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 56px rgba(0,0,0,.55);
}

.gw-reviewcard:hover::before{
  opacity: 1;
}

.gw-reviewcard > *{
  position: relative;
  z-index: 1;
}

.gw-reviewcard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.gw-reviewcard__date{
  color: rgba(255,255,255,.45);
  font-size: 12px;
  white-space: nowrap;
}

.gw-reviewcard__text{
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.gw-reviewcard__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.gw-reviewcard__product{
  color: rgba(255,255,255,.84);
  font-weight: 750;
  font-size: 12.5px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}

.gw-verified__ico{
  width: 14px;
  height: 14px;
}

/* =========================
   STATUS PAGE
   ========================= */
.gw-status__wrap{
  padding-top: 3.5rem;
  padding-bottom: 11rem;
}

@media (min-width:1024px){
  .gw-status__wrap{
    padding-bottom: 220px;
  }
}

.gw-status__group + .gw-status__group{
  margin-top: 48px;
}

@media (min-width:1024px){
  .gw-status__group + .gw-status__group{
    margin-top: 64px;
  }
}

.gw-status__single{
  margin-top: 48px;
}

.gw-status__groupTitle{
  margin-bottom: 16px;
}

/* =========================
   STATUS PILL
   ========================= */
.gw-status-pill,
.status.gw-status-pill{
  --stc: #22c55e;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  white-space: nowrap;
  background: color-mix(in srgb, var(--stc) 16%, rgba(10, 18, 32, 0.70)) !important;
  border: 1px solid color-mix(in srgb, var(--stc) 35%, rgba(255,255,255,0.14)) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.38),
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 22px color-mix(in srgb, var(--stc) 22%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.gw-status-pill:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--stc) 20%, rgba(10, 18, 32, 0.74)) !important;
  border-color: color-mix(in srgb, var(--stc) 45%, rgba(255,255,255,0.18)) !important;
}

.gw-status-dot{
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--stc);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--stc) 18%, transparent);
}

.gw-status-pulse{
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stc) 22%, transparent);
  animation: gwStatusPulse 1.6s ease-out infinite;
}

@keyframes gwStatusPulse{
  0%   { transform: scale(.72); opacity: .65; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

.gw-status-text{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--stc) 88%, white 12%);
  text-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

@supports not (background: color-mix(in srgb, white 50%, black)){
  .gw-status-pill{
    background: rgba(10, 18, 32, 0.72) !important;
    border: 1px solid rgba(34, 197, 94, 0.35) !important;
    box-shadow:
      0 10px 26px rgba(0,0,0,0.38),
      0 0 0 1px rgba(255,255,255,0.05) inset,
      0 0 22px rgba(34, 197, 94, 0.18);
  }
}

/* =========================
   TERMS / LEGAL
   ========================= */
.gw-terms{
  position: relative;
}

.gw-terms__hero{
  padding: 96px 0 34px;
  position: relative;
  overflow: hidden;
}

.gw-terms__glow{
  position: absolute;
  inset: -45%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(closest-side at 50% 14%, rgba(124,58,237,.34) 0%, transparent 62%),
    radial-gradient(closest-side at 50% 26%, rgba(255,42,85,.22) 0%, transparent 65%),
    radial-gradient(closest-side at 50% 92%, rgba(124,58,237,.14) 0%, transparent 60%);
  filter: blur(55px);
  opacity: .95;
}

.gw-terms__head{
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.gw-terms__kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  margin-bottom: 18px;
}

.gw-terms__kicker::before,
.gw-terms__kicker::after{
  content:"";
  height: 1px;
  width: 90px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  opacity: .85;
}

.gw-terms__kickerText{
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: none;
  background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,42,85,.70));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gw-terms__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(40px, 4.8vw, 70px);
  color: rgba(255,255,255,.92);
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
}

.gw-terms__sub{
  margin: 10px auto 0;
  max-width: 760px;
  color: rgba(255,255,255,.55);
  font-size: 16px;
  line-height: 1.7;
}

.gw-terms__wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 0 84px;
}

.gw-terms__panel{
  position: relative;
  border-radius: 18px;
  padding: 34px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  box-shadow:
    0 18px 55px rgba(0,0,0,.50),
    0 0 28px rgba(124,58,237,.10),
    0 0 26px rgba(255,42,85,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.gw-terms__panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.gw-terms__panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  pointer-events:none;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  opacity: .95;
  filter: blur(.15px);
}

.gw-terms__panel .editor{
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  font-size: 15px;
}

.gw-terms__panel .editor h1,
.gw-terms__panel .editor h2,
.gw-terms__panel .editor h3{
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 22px 0 10px;
}

.gw-terms__panel .editor h2{ font-size: 20px; }
.gw-terms__panel .editor h3{ font-size: 17px; }

.gw-terms__panel .editor p{
  margin: 0 0 12px;
  color: rgba(255,255,255,.62);
}

.gw-terms__panel .editor ul,
.gw-terms__panel .editor ol{
  margin: 10px 0 14px 18px;
  padding: 0;
  color: rgba(255,255,255,.62);
}

.gw-terms__panel .editor li{
  margin: 8px 0;
}

.gw-terms__panel .editor a{
  color: rgba(124,58,237,.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(124,58,237,.30);
}

.gw-terms__panel .editor a:hover{
  border-bottom-color: rgba(255,42,85,.45);
  color: rgba(255,42,85,.95);
}

@media (max-width: 768px){
  .gw-terms__hero{ padding: 84px 0 26px; }
  .gw-terms__panel{ padding: 22px; }
}

/* =========================
   CUSTOMER DASHBOARD
   ========================= */
.gw-cdash{
  padding: 56px 0 90px;
}

.gw-cdash-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.gw-cdash-hero{
  max-width: 1180px;
  margin: 0 auto 34px;
  padding: 34px 24px 12px;
  text-align: center;
}

.gw-cdash-kicker{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  color: rgba(255,255,255,.55);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
}

.gw-cdash-kicker::before,
.gw-cdash-kicker::after{
  content:"";
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity: .9;
}

.gw-cdash-title{
  margin: 14px 0 6px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(38px, 4.8vw, 64px);
  color: rgba(255,255,255,.92);
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
}

.gw-cdash-sub{
  color: rgba(255,255,255,.55);
  font-weight: 650;
}

.gw-cdash-grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 26px;
  align-items: start;
}

@media (max-width: 1024px){
  .gw-cdash-grid{
    grid-template-columns: 1fr;
  }
}

.gw-cdash-card,
.gw-cdash-sidebar{
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.50);
  position: relative;
  overflow: hidden;
}

.gw-cdash-sidebar::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.gw-cdash-card{
  position: relative;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  transition: all .35s ease;
  overflow: hidden;
  padding: 18px 18px;
}

.gw-cdash-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 20% 20%,
    rgba(255, 0, 120, 0.18),
    rgba(120, 0, 255, 0.18),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .35s ease;
}

.gw-cdash-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 0, 120, 0.6),
    rgba(120, 0, 255, 0.6)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
}

.gw-cdash-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(120, 0, 255, 0.18);
}

.gw-cdash-card:hover::before,
.gw-cdash-card:hover::after {
  opacity: 1;
}

.gw-cdash-card-label{
  color: rgba(255,255,255,.62);
  font-weight: 750;
  font-size: 13px;
  position: relative;
  z-index: 2;
}

.gw-cdash-card-value{
  margin-top: 8px;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 22px;
  position: relative;
  z-index: 2;
}

.gw-cdash-card--wide{
  min-height: 126px;
}

.gw-cdash-empty{
  margin-top: 10px;
  position: relative;
  z-index: 2;
}

.gw-cdash-empty-title{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  font-size: 18px;
}

.gw-cdash-empty-sub{
  margin-top: 6px;
  color: rgba(255,255,255,.55);
  font-size: 13px;
  line-height: 1.6;
}

.gw-cdash-cards-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1024px){
  .gw-cdash-cards-3{
    grid-template-columns: 1fr;
  }
}

.gw-cdash-cards-2{
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 14px;
}

@media (max-width: 1024px){
  .gw-cdash-cards-2{
    grid-template-columns: 1fr;
  }
}

.gw-cdash-sidebar{
  padding: 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.gw-cdash-nav{
  list-style:none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.gw-cdash-link{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  color: rgba(255,255,255,.72);
  font-weight: 750;
  text-decoration: none;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.gw-cdash-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
}

.gw-cdash-link.is-active{
  background: rgba(124,58,237,.12);
  border-color: rgba(124,58,237,.22);
  color: rgba(255,255,255,.92);
}

.gw-cdash-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.86);
}

.gw-cdash-link--split{
  justify-content: space-between;
  gap: 10px;
}

.gw-cdash-left{
  display:flex;
  align-items:center;
  gap: 12px;
}

.gw-cdash-balance{
  color: rgba(255,255,255,.82);
  font-weight: 900;
  font-size: 13px;
}

.gw-cdash-actions{
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.gw-cdash-btn{
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.gw-cdash-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}

.gw-cdash-btn--danger{
  background: rgba(255,42,85,.06);
  border-color: rgba(255,42,85,.28);
  color: rgba(255,42,85,.95);
}

.gw-cdash-btn--danger:hover{
  background: rgba(255,42,85,.10);
  border-color: rgba(255,42,85,.36);
}

/* =========================
   HERO BUTTON SCROLL TARGETS
   ========================= */
#featured-products,
#about-us,
.gw-products-head,
.gw-wcu-grid{
  scroll-margin-top: 110px;
}

/* =========================
   MOBILE POLISH / FINAL OVERRIDES
   Put this at the VERY BOTTOM of custom.css
   ========================= */
@media (max-width: 768px){

  /* ---------- Global spacing ---------- */
  .container,
  .mx-auto.max-w-screen-xl,
  .gw-cdash-wrap,
  .gw-mnav__inner{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ---------- Navbar ---------- */
  .gw-nav__row{
    padding: 0 14px !important;
    gap: 8px;
  }

  .gw-nav__brand{
    gap: 10px;
    min-width: 0;
  }

  .gw-nav__logo{
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  .gw-nav__name{
    font-size: 14px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gw-nav__actions{
    gap: 8px;
  }

  .gw-pill,
  .gw-curr__btn{
    height: 36px;
    border-radius: 11px;
    padding: 0 10px;
    font-size: 12px;
  }

  .gw-pill--icon,
  .gw-hamburger{
    width: 38px !important;
    height: 36px !important;
    flex: 0 0 38px !important;
  }

  .gw-cart-anchor{
    width: 20px;
    height: 20px;
  }

  .gw-ico{
    width: 18px;
    height: 18px;
  }

  .gw-badge{
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    top: -5px;
    right: -6px;
    padding: 0 4px;
  }

  /* ---------- Mobile nav panel ---------- */
  .gw-mnav{
    padding: 12px 0;
  }

  .gw-mnav__inner{
    padding: 0 14px;
  }

  .gw-mnav__list{
    gap: 8px;
  }

  .gw-mnav__a{
    padding: 12px 13px;
    border-radius: 12px;
    font-size: 13px;
  }

  /* ---------- Hero ---------- */
  .gw-hero{
    padding-top: 8px;
  }

  .gw-hero-headline,
  .gw-hero .gw-hero-headline{
    gap: 12px;
    margin-bottom: 12px;
  }

  .gw-hero-headline::before,
  .gw-hero-headline::after,
  .gw-hero .gw-hero-headline::before,
  .gw-hero .gw-hero-headline::after{
    width: 44px;
  }

  .gw-hero-label,
  .gw-hero .gw-hero-label{
    font-size: 11px;
    letter-spacing: .14em;
  }

  .gw-hero h1{
    font-size: clamp(31px, 9vw, 42px) !important;
    line-height: 1.04 !important;
  }

  .gw-hero p{
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 100%;
    padding: 0 4px;
  }

  .gw-hero-actions{
    gap: 10px !important;
  }

  .gw-hero-actions a{
    min-width: 0;
    width: 100%;
    padding: 13px 16px !important;
    border-radius: 14px !important;
    font-size: 14px;
  }

  /* ---------- Section labels ---------- */
  .gw-section-headline{
    gap: 12px;
    margin-bottom: 18px;
  }

  .gw-section-headline::before,
  .gw-section-headline::after{
    width: 40px;
  }

  .gw-section-label{
    font-size: 12px;
    letter-spacing: .14em;
  }

  .gw-minihead{
    gap: 12px;
  }

  .gw-minihead::before,
  .gw-minihead::after{
    width: 40px;
  }

  .gw-minilabel{
    font-size: 11px;
    letter-spacing: .14em;
  }

  /* ---------- Product cards ---------- */
  .gw-shop-card{
    border-radius: 16px !important;
  }

  .gw-shop-card .gw-card-media{
    padding: 8px !important;
  }

  .gw-shop-card .gw-card-media img{
    border-radius: 12px !important;
  }

  .gw-shop-card__body{
    padding: 10px 12px 12px !important;
  }

  .gw-shop-card__top{
    gap: 8px;
    margin-bottom: 8px;
  }

  .gw-shop-card__title{
    font-size: 15px !important;
    line-height: 1.15;
  }

  .gw-shop-card .gw-status-pill.gw-shop-card__status{
    padding: 3px 9px !important;
    min-height: 24px !important;
    gap: 5px !important;
  }

  .gw-shop-card .gw-status-pill.gw-shop-card__status .gw-status-text{
    font-size: 10px !important;
  }

  .gw-shop-card__bottom{
    gap: 10px;
    padding-top: 8px;
    margin-top: 8px;
  }

  .gw-shop-card__availability{
    font-size: 12px;
  }

  .gw-shop-card__delivery,
  .gw-shop-card__priceLabel{
    font-size: 11px;
  }

  .gw-shop-card__price{
    font-size: 15px;
  }

  .gw-card .badges{
    top: 12px;
    right: 12px;
    gap: 6px;
  }

  .gw-card .badges > div{
    border-radius: 9px;
  }

  /* ---------- Product / home modals ---------- */
  .gw-pmodal,
  .gw-homemodal{
    padding: 8px !important;
    align-items: flex-start !important;
  }

  .gw-pmodal__panel,
  .gw-homemodal__panel{
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 18px !important;
  }

  .gw-pmodal__top,
  .gw-homemodal__top{
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 12px 12px 10px;
  }

  .gw-pmodal__title,
  .gw-homemodal__title{
    font-size: 15px;
    max-width: 100%;
  }

  .gw-pmodal__backBtn,
  .gw-pmodal__closeBtn,
  .gw-homemodal__backBtn,
  .gw-homemodal__closeBtn{
    height: 36px;
    border-radius: 11px;
    font-size: 13px;
  }

  .gw-pmodal__closeBtn,
  .gw-homemodal__closeBtn{
    width: 36px;
  }

  .gw-pmodal__content{
    padding: 12px !important;
  }

  .gw-homemodal__content{
    padding: 12px !important;
  }

  .gw-pmodal__grid,
  .gw-pmodal__prodGrid,
  .gw-homemodal__prodGrid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    justify-content: stretch !important;
  }

  .gw-pmodal__prodItem,
  .gw-homemodal__prodItem{
    width: 100% !important;
  }

  .gw-pmodal__gmedia{
    padding: 10px 10px 0;
  }

  .gw-pmodal__gmedia img,
  .gw-pmodal__gempty{
    border-radius: 14px;
  }

  .gw-pmodal__gbody{
    padding: 12px;
  }

  .gw-pmodal__gname{
    font-size: 15px;
    margin-bottom: 10px;
  }

  /* ---------- Product page ---------- */
  .gw-ppage__title{
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.06;
    padding-right: 0 !important;
  }

  .gw-ppage__price{
    font-size: 24px;
  }

  .gw-ppage__stats{
    padding: 14px;
  }

  .gw-cardShell{
    padding: 14px;
    border-radius: 16px;
  }

  .gw-ppage__tabs{
    gap: 8px;
    margin-bottom: 12px;
  }

  .gw-ppage__tab{
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
  }

  .gw-ppage__sticky{
    position: static;
  }

  .gw-ppage__priceRow{
    gap: 12px;
    align-items: flex-end;
  }

  .gw-ppage__priceWrap{
    gap: 8px;
  }

  .gw-ppage__stockText{
    font-size: 12px;
  }

  /* ---------- Reviews ---------- */
  .gw-reviews-title,
  .gw-faq-title,
  .gw-socials-title{
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.08;
  }

  .gw-reviews-sub,
  .gw-faq-sub,
  .gw-socials-sub{
    font-size: 14px;
    line-height: 1.6;
  }

  .gw-marquee{
    margin-top: 28px;
    gap: 14px;
  }

  .gw-review-card{
    width: 280px;
    min-width: 280px;
  }

  /* ---------- Why choose us ---------- */
  .gw-wcu-grid{
    gap: 14px;
  }

  .gw-wcu-media{
    height: 180px;
  }

  .gw-wcu-body{
    padding: 14px 14px 15px;
  }

  .gw-wcu-title{
    font-size: 16px;
  }

  .gw-wcu-text{
    font-size: 13px;
    line-height: 1.55;
  }

  /* ---------- FAQ ---------- */
  .gw-faq-list{
    margin-top: 28px;
    gap: 12px;
  }

  .gw-faq-q{
    padding: 16px 16px;
    gap: 12px;
  }

  .gw-faq-qtext{
    font-size: 15px;
  }

  .gw-faq-ainner{
    padding: 12px 16px 16px;
    font-size: 14px;
    line-height: 1.65;
  }

  /* ---------- Socials ---------- */
  .gw-socials .gw-socials-panel{
    padding: 40px 16px;
    border-radius: 18px;
  }

  .gw-socials-actions{
    margin-top: 14px;
  }

  .gw-socials-btn{
    width: 100%;
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
  }

  /* ---------- Footer ---------- */
  .gw-footer .gw-footer__bg{
    padding: 32px 0 22px;
  }

  .gw-footer__grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 18px;
  }

  .gw-footer__brand{
    grid-column: 1 / -1;
    margin-top: 6px;
  }

  .gw-footer__brandhead{
    justify-content: flex-start !important;
  }

  .gw-footer__tagline{
    margin-top: 8px;
    font-size: 11px;
  }

  .gw-footer__copyright{
    font-size: 11px;
  }

  .gw-footer__bottom{
    gap: 6px;
    font-size: 11px;
  }
}

/* Extra-small phones */
@media (max-width: 420px){

  .gw-nav__name{
    max-width: 92px;
    font-size: 13px;
  }

  .gw-curr__btn{
    padding: 0 9px;
    font-size: 11px;
    gap: 6px;
  }

  .gw-hero h1{
    font-size: clamp(28px, 9vw, 34px) !important;
  }

  .gw-hero p{
    font-size: 13px !important;
  }

  .gw-shop-card__title{
    font-size: 14px !important;
  }

  .gw-shop-card__availability{
    font-size: 11px;
  }

  .gw-shop-card__delivery,
  .gw-shop-card__priceLabel{
    font-size: 10px;
  }

  .gw-shop-card__price{
    font-size: 14px;
  }

  .gw-pmodal__title,
  .gw-homemodal__title{
    font-size: 14px;
  }

  .gw-pmodal__content,
  .gw-homemodal__content{
    padding: 10px !important;
  }

  .gw-cardShell{
    padding: 12px;
  }

  .gw-ppage__price{
    font-size: 22px;
  }

  .gw-footer__grid{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px){
  .gw-hero{
    min-height: 620px;
    padding-top: 110px !important;
    padding-bottom: 80px !important;
  }

  .gw-hero-banner{
    background-position: center top;
    opacity: .42;
  }

  .gw-hero-overlay{
    background:
      linear-gradient(90deg, rgba(7,8,16,.96) 0%, rgba(7,8,16,.66) 50%, rgba(7,8,16,.96) 100%),
      linear-gradient(180deg, rgba(7,8,16,.92) 0%, rgba(7,8,16,.34) 45%, rgba(7,8,16,.96) 100%);
  }
}

.gw-gradient-text{
  background: linear-gradient(90deg, #ff2a55 0%, #ff4d8d 38%, #a855f7 72%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  text-shadow:
    0 0 10px rgba(255, 42, 85, 0.18),
    0 0 18px rgba(124, 58, 237, 0.10);
}

.gw-hero h1{
  color: #ffffff;
}

/* =========================
   DISCORD FLOAT BUTTON
   ========================= */

.gw-discord-float{
  position: fixed;
  bottom: 90px;
  right: 60px; /* moved slightly left */

  z-index: 99999;

  width: 60px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 16px;

  background: linear-gradient(135deg, #ff2a55, #7c3aed);

  box-shadow:
    0 12px 35px rgba(0,0,0,0.5),
    0 0 25px rgba(124,58,237,0.25);

  transition: all 0.2s ease;

  /* subtle pulse */
  animation: gw-discord-pulse 3.5s infinite;
}

.gw-discord-icon{
  width: 28px;
  height: 28px;
  color: #fff;
}

/* hover = premium feel */
.gw-discord-float:hover{
  transform: translateY(-4px) scale(1.05);

  animation: none; /* stop pulse on hover */

  box-shadow:
    0 18px 45px rgba(0,0,0,0.6),
    0 0 35px rgba(255,42,85,0.35);
}

/* =========================
   PULSE ANIMATION
   ========================= */

@keyframes gw-discord-pulse {
  0% {
    box-shadow:
      0 12px 35px rgba(0,0,0,0.5),
      0 0 0 0 rgba(124,58,237,0.35);
  }

  70% {
    box-shadow:
      0 12px 35px rgba(0,0,0,0.5),
      0 0 0 14px rgba(124,58,237,0);
  }

  100% {
    box-shadow:
      0 12px 35px rgba(0,0,0,0.5),
      0 0 0 0 rgba(124,58,237,0);
  }
}

@media (max-width: 768px){
  .gw-discord-float{
    right: 32px;
    bottom: 32px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .gw-discord-icon{
    width: 26px;
    height: 26px;
  }
}

/* =========================
   HERO ABSOLUTE CENTER FIX
   ========================= */
.gw-hero{
  min-height: 760px !important;
  padding-top: 130px !important;
  padding-bottom: 115px !important;
  position: relative !important;
}

.gw-hero-content{
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 24px !important;
}

.gw-hero-content > div:first-child{
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  text-align: center !important;
  align-items: center !important;
  transform: translateY(20px) !important;
}

.gw-hero-banner{
  opacity: .86 !important;
  filter: brightness(1.18) contrast(1.12) saturate(1.1) !important;
  background-position: center top !important;
  background-size: cover !important;
}

.gw-hero-overlay{
  background:
    linear-gradient(90deg, rgba(7,8,16,.96) 0%, rgba(7,8,16,.38) 32%, rgba(7,8,16,.38) 68%, rgba(7,8,16,.96) 100%),
    linear-gradient(180deg, rgba(7,8,16,.92) 0%, rgba(7,8,16,.22) 48%, rgba(7,8,16,.96) 100%),
    radial-gradient(700px 380px at 50% 45%, rgba(124,58,237,.18), transparent 70%),
    radial-gradient(700px 380px at 50% 50%, rgba(255,42,85,.10), transparent 72%) !important;
}

/* =========================
   NAVBAR POLISH
   ========================= */
.gw-nav{
  background: rgba(7, 8, 16, .58) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,.28);
}

.gw-nav__row{
  max-width: 1320px !important;
}

.gw-nav__link{
  font-size: 13px !important;
  font-weight: 700 !important;
}

.gw-nav__link.is-active{
  color: #a855f7 !important;
}

.gw-nav__link.is-active::after{
  bottom: -9px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red)) !important;
}

/* =========================
   PERFORMANCE PATCH
   ========================= */

/* Fixed backgrounds can feel laggy on scroll */
html{
  background-attachment: scroll !important;
}

/* Reduce heavy hero rendering */
.gw-hero::before{
  filter: blur(22px) !important;
  opacity: .55 !important;
}

.gw-hero::after{
  opacity: .035 !important;
}

/* Remove expensive filter from full-size banner */
.gw-hero-banner{
  filter: none !important;
  opacity: .82 !important;
}

/* Lighter navbar blur */
.gw-nav{
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}

.gw-nav.is-scrolled{
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
}

:root{
  --gw-announcement-h: 0px;
}

body:has(.announcement:not(.hidden)){
  --gw-announcement-h: 36px;
}

.announcement:not(.hidden){
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2147483647 !important;
}

.gw-nav{
  top: var(--gw-announcement-h) !important;
  z-index: 2147483646 !important;
  transition: top .25s ease;
}

.gw-mnav{
  top: calc(var(--gw-nav-h) + var(--gw-announcement-h)) !important;
}

.navbar-spacer{
  height: calc(var(--gw-nav-h) + var(--gw-announcement-h)) !important;
}

/* ============================================================
   HEADER REDESIGN — scroll-morph floating pill   (2026-07)
   Top / start position: wide, transparent, spread-out bar.
   On scroll: condenses into a centered, frosted, translucent
   pill. Appended last so it overrides the earlier .gw-nav rules.
   The .is-scrolled class is toggled by the existing navbar JS.
   ============================================================ */

/* Shell stays fully transparent in BOTH states — the visual bar/blur lives
   only on the inner row (.gw-nav__row). This also neutralizes the earlier
   full-width backdrop-blur on .gw-nav / .gw-nav.is-scrolled so the blur no
   longer bleeds across the whole width. */
.gw-nav,
.gw-nav.is-scrolled{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  height: auto !important;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Neutralize the intermediate max-w-screen-xl wrapper */
.gw-nav > div{
  max-width: none !important;
  padding: 0 !important;
}

/* The row is the morphing bar. Width is driven by an animatable max-width
   (fit-content is NOT animatable — that was the jerky part), so the shrink
   from wide → pill glides smoothly. flex:1 on brand/actions stays in BOTH
   states so the links remain centered and the layout interpolates cleanly. */
.gw-nav__row{
  display: grid !important;                                   /* grid = rock-solid centering */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);  /* equal sides → links never drift */
  align-items: center;
  height: auto !important;
  width: calc(100% - 40px) !important;
  max-width: 1500px !important;   /* matches the page container so the logo
                                     stays flush with the hero / group box */
  margin-inline: auto !important;
  padding: 13px 28px !important;
  gap: 20px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
  will-change: max-width, padding, background;
  transition:
    max-width .55s cubic-bezier(.16, 1, .3, 1),
    padding   .55s cubic-bezier(.16, 1, .3, 1),
    gap       .55s cubic-bezier(.16, 1, .3, 1),
    border-radius .45s cubic-bezier(.16, 1, .3, 1),
    background   .4s ease,
    border-color .4s ease,
    box-shadow   .4s ease;
}

/* Grid cells: brand (left) · links (centered) · actions (right).
   The two 1fr side columns are always mathematically equal, so the centered
   links column stays put during the whole width animation — no wobble. */
.gw-nav__brand{ min-width: 0; margin: 0 !important; justify-self: start; }
.gw-nav__links{ margin-left: 0 !important; justify-self: center; }
.gw-nav__actions{ min-width: 0; margin-left: 0 !important; justify-content: flex-end; justify-self: end; }

/* Scrolled → condensed frosted pill (only the pill itself is blurred) */
.gw-nav.is-scrolled .gw-nav__row{
  max-width: 780px !important;      /* wide enough that actions never overlap the links */
  padding: 8px 12px 8px 20px !important;
  gap: 18px !important;
  background: rgba(12, 13, 20, .58) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  border-radius: 14px !important;   /* rounded rect matching the Login button, not a full pill */
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
  backdrop-filter: blur(26px) saturate(170%) !important;
}

/* Reserve the (taller) top-state height so page content never slips under */
.navbar-spacer{
  height: calc(84px + var(--gw-announcement-h)) !important;
}

/* ---- Right-side actions: modern Login + cart ---- */
/* Remove the old gradient-outline pseudo elements on nav action pills */
.gw-nav .gw-nav__actions .gw-pill::before,
.gw-nav .gw-nav__actions .gw-pill::after{
  display: none !important;
}

/* Login — clean, high-contrast white button (matches the reference) */
.gw-nav .gw-nav__actions .gw-pill--btn{
  height: 42px;
  padding: 0 22px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #0a0b12 !important;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .01em;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s ease, background .22s ease;
}
.gw-nav .gw-nav__actions .gw-pill--btn:hover{
  background: #eef0f4 !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .36);
}

/* Cart — frosted glass icon button that matches the pill aesthetic */
.gw-nav .gw-nav__actions .gw-pill--icon{
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: rgba(255, 255, 255, .92);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), background .22s ease, border-color .22s ease;
}
.gw-nav .gw-nav__actions .gw-pill--icon:hover{
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  transform: translateY(-1px);
}

@media (max-width: 1024px){
  .gw-nav__row{
    width: calc(100% - 24px) !important;
    padding: 10px 14px !important;
  }
  .gw-nav.is-scrolled .gw-nav__row{
    max-width: calc(100% - 24px) !important;
    padding: 8px 12px !important;
    gap: 10px !important;
  }
}
/* ===================== END HEADER REDESIGN ===================== */
/* ============================================================
   MAINPAGE — hero (text left / artwork right) + product groups
   Background layers intentionally omitted for now.
   ============================================================ */

/* ---------------- HERO ---------------- */
.gw-mhero{
  /* How far the artwork drops. The hero's bottom padding is tied to the same
     value, so the artwork lands exactly ON the hero's bottom edge: it can't be
     clipped by overflow:hidden, and with .gw-groups' top padding at 0 it sits
     flush against the group box (no gap). */
  --artwork-drop: 60px;
  position: relative;
  overflow: hidden;
  padding: 72px 0 var(--artwork-drop);
}

.gw-mhero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.gw-mhero__inner{
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  max-width: 1500px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 48px;
}

.gw-mhero__text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  /* Inset by the group-box padding so the headline lines up with the panel
     heading below it (and the navbar brand) instead of sitting on the raw
     container edge and poking out to the left. */
  padding-left: 26px;
}

.gw-mhero__eyebrow{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 14px;
}

.gw-mhero__title{
  font-weight: 800;
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0;
  /* No max-width: the text column (691px @1500) already sits in the sweet spot
     between "Cheats & DMA Solutions" (621px) and "Premium Undetected Cheats"
     (748px), so the headline breaks into exactly two lines on its own. */
}

.gw-mhero__sub{
  margin: 22px 0 0;
  max-width: 620px;
  color: rgba(255, 255, 255, .52);
  font-size: 15px;
  line-height: 1.75;
}

.gw-mhero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.gw-mhero__media{
  position: relative;
  min-width: 0;
  /* Drop the artwork toward the group box. The media column is the tallest
     grid item, so align-self can't move it — a transform can, and it keeps
     the hero's height (and therefore the layout below) untouched. */
  transform: translateY(var(--artwork-drop));
}

/* Artwork trio — figures share one baseline; the centre one is largest and
   sits in front, the outer two tuck in behind it via negative margins.
   Widths are % of the stage, so the whole group scales with the column.
   Sized so the VISIBLE group spans the full stage, i.e. it ends flush with
   the group box below:  28 - 12 + 64 + 44 - 15.5 - 8.56 = 99.94%. */
.gw-mhero__stage{
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Right-aligned: the flex line's right edge is pinned to the stage edge, so
     the artwork stays flush with the group box. Any extra width (e.g. a larger
     figure 1) grows leftwards into the empty space beside the text instead of
     pushing the flush right edge out. */
  justify-content: flex-end;
  width: 100%;
}

.gw-mhero__fig{
  display: block;
  height: auto;
  position: relative;
  flex: 0 0 auto;
  /* Entrance: stay hidden (opacity/transform only — no layout shift, so the box
     below never moves) until the group box has finished revealing, then rise +
     fade in. Staggered per figure below so they arrive one after another and
     the hard bottom edge is never exposed mid-animation. */
  opacity: 0;
  /* Promote to its own compositor layer so the (filtered, large) image is
     only translated + faded on the GPU — no per-frame re-raster = smooth. */
  will-change: transform, opacity;
  animation: gwHeroFigIn 1s cubic-bezier(.22, .61, .36, 1) both;
}

.gw-mhero__fig--center{
  width: 64%;
  z-index: 3;
  filter: drop-shadow(0 22px 46px rgba(0, 0, 0, .6));
  animation-delay: .5s;     /* centre (focal figure) leads */
}

/* outer figures: smaller, dimmed a touch so the centre reads as foreground */
.gw-mhero__fig--left,
.gw-mhero__fig--right{
  z-index: 1;
  filter: brightness(.82) saturate(.92) drop-shadow(0 16px 34px rgba(0, 0, 0, .5));
}

.gw-mhero__fig--left{
  width: 34%;
  margin-right: -12%;
  animation-delay: .65s;    /* then the left flanker */
}

.gw-mhero__fig--right{
  width: 44%;
  margin-left: -15.5%;
  /* 3.png carries ~19.4% transparent padding on its right edge (content bbox
     ends at 580 of 720px). Cancelling it (0.1944 x 44%) makes the visible art
     finish flush with the stage / group box edge. */
  margin-right: -8.56%;
  animation-delay: .8s;     /* and finally the right flanker */
}

/* Hero artwork entrance keyframes — translate + fade only (no scale, so the
   drop-shadow filter isn't re-rasterised every frame). */
@keyframes gwHeroFigIn{
  from{ opacity: 0; transform: translateY(26px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* Shared fade-up used by the hero text and the group cards */
@keyframes gwFadeUp{
  from{ opacity: 0; transform: translateY(16px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* Hero copy fades up first (top of the load waterfall) */
.gw-mhero__eyebrow,
.gw-mhero__title,
.gw-mhero__sub,
.gw-mhero__actions{
  opacity: 0;
  animation: gwFadeUp .85s cubic-bezier(.22, .61, .36, 1) both;
}
.gw-mhero__eyebrow{ animation-delay: .05s; }
.gw-mhero__title  { animation-delay: .12s; }
.gw-mhero__sub    { animation-delay: .26s; }
.gw-mhero__actions{ animation-delay: .40s; }

/* Respect users who prefer no motion: show everything immediately. */
@media (prefers-reduced-motion: reduce){
  .gw-mhero__fig,
  .gw-mhero__eyebrow,
  .gw-mhero__title,
  .gw-mhero__sub,
  .gw-mhero__actions,
  .gw-groups__card{ opacity: 1 !important; animation: none !important; }
}

/* ---------------- PRODUCT GROUPS PANEL ---------------- */
.gw-groups{
  position: relative;
  /* top padding 0 -> the panel butts straight up against the dropped artwork */
  padding: 0 0 88px;
}

/* keep the panel flush with the hero text column */
.gw-groups .container{
  width: calc(100% - 40px) !important;
  max-width: 1500px !important;
  margin-inline: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.gw-groups__panel{
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 18px;
  padding: 26px 26px 30px;
}

.gw-groups__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.gw-groups__headText{ min-width: 0; }

.gw-groups__title{
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -.01em;
}

.gw-groups__sub{
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .45);
  line-height: 1.6;
}

.gw-groups__more{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.gw-groups__more:hover{
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .2);
  transform: translateY(-1px);
}

.gw-groups__moreIco{ width: 15px; height: 15px; }

.gw-groups__rule{
  height: 1px;
  background: rgba(255, 255, 255, .07);
  margin: 22px 0 24px;
}

.gw-groups__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.gw-groups__card{
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .02);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .25s ease, box-shadow .25s ease;
  /* Staggered fade-up, sequenced after the artwork (--gi = card index, set in
     the template). `backwards` fill hides each card only during its delay and
     then reverts to the base state, so the hover-lift transform keeps working. */
  animation: gwFadeUp .75s cubic-bezier(.22, .61, .36, 1) backwards;
  animation-delay: calc(.55s + min(var(--gi, 0), 11) * .06s);
}

.gw-groups__card:hover{
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
}

.gw-groups__img{
  display: block;
  width: 100%;
  aspect-ratio: var(--group-card-image-aspect-ratio, 16 / 9);
  object-fit: var(--group-image-fit, cover);
}

.gw-groups__ph{
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--group-card-image-aspect-ratio, 16 / 9);
  background: linear-gradient(135deg, rgba(184, 46, 75, .35), rgba(124, 58, 237, .25));
}

.gw-groups__phLabel{
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
  padding: 0 10px;
  text-align: center;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1180px){
  .gw-groups__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px){
  .gw-mhero{
    --artwork-drop: 0px;                /* artwork sits above the text here */
    padding: 48px 0 64px;
  }
  .gw-mhero__inner{
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .gw-mhero__sub{ max-width: none; }
  .gw-mhero__text{ padding-left: 0; }   /* single column: no inset needed */
  .gw-mhero__media{ order: -1; }
  /* full-width stage: re-centre and keep the line <=100% so nothing clips */
  .gw-mhero__stage{ justify-content: center; }
  .gw-mhero__fig--left{ width: 28%; }
}

@media (max-width: 760px){
  .gw-groups__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gw-groups__panel{ padding: 20px 16px 22px; }
  .gw-groups__more{ width: 100%; justify-content: center; }
}
/* ===================== END MAINPAGE ===================== */

/* ============================================================
   WHY CHOOSE US — reference-style header + staggered scroll reveal
   ============================================================ */
.gw-wcu-head{
  text-align: center;
  max-width: 660px;
  margin: 0 auto 52px;
}

.gw-wcu-eyebrow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.gw-wcu-eyebrow > span{
  background: linear-gradient(90deg, var(--gw-red), var(--gw-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gw-wcu-eyebrow::before,
.gw-wcu-eyebrow::after{
  content: "";
  height: 1px;
  width: 46px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}

.gw-wcu-heading{
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0;
}

.gw-wcu-subtitle{
  margin: 16px auto 0;
  max-width: 540px;
  color: rgba(255, 255, 255, .5);
  font-size: 15px;
  line-height: 1.7;
}

/* ---- scroll reveal ----
   Armed only when JS is present (.gw-reveal-ready), revealed when the section
   scrolls into view (.is-in). Entrance uses opacity + the `translate` property;
   the card hover keeps `transform`, so the two never collide. */
.gw-wcu .gw-reveal{
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1),
    translate .7s cubic-bezier(.22, .61, .36, 1);
}
.gw-wcu-head .gw-reveal:nth-child(1){ transition-delay: 0ms; }
.gw-wcu-head .gw-reveal:nth-child(2){ transition-delay: 90ms; }
.gw-wcu-head .gw-reveal:nth-child(3){ transition-delay: 180ms; }

.gw-wcu-card{
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1) calc(var(--i, 0) * 80ms + 260ms),
    translate .7s cubic-bezier(.22, .61, .36, 1) calc(var(--i, 0) * 80ms + 260ms),
    transform .25s ease,
    box-shadow .25s ease;
}

.gw-wcu.gw-reveal-ready .gw-reveal,
.gw-wcu.gw-reveal-ready .gw-wcu-card{
  opacity: 0;
  translate: 0 24px;
}
.gw-wcu.gw-reveal-ready.is-in .gw-reveal,
.gw-wcu.gw-reveal-ready.is-in .gw-wcu-card{
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce){
  .gw-wcu.gw-reveal-ready .gw-reveal,
  .gw-wcu.gw-reveal-ready .gw-wcu-card{
    opacity: 1 !important;
    translate: none !important;
  }
}
/* ===================== END WHY CHOOSE US ===================== */

/* ============================================================
   STATUS PAGE — panel + legend + product rows (GhostWare colors)
   ============================================================ */
.gw-st-panel{
  position: relative;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(184, 46, 75, .06), transparent 60%),
    rgba(255, 255, 255, .02);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  overflow: hidden;
}

/* ---- top bar: title + legend ---- */
.gw-st-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .015);
}
.gw-st-top__title{
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}
.gw-st-legend{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gw-st-legend__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--stc) 82%, white 18%);
  background: color-mix(in srgb, var(--stc) 12%, rgba(255, 255, 255, .015));
  border: 1px solid color-mix(in srgb, var(--stc) 30%, rgba(255, 255, 255, .08));
}
.gw-st-legend__dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--stc);
  box-shadow: 0 0 8px color-mix(in srgb, var(--stc) 60%, transparent);
}

/* ---- body / groups ---- */
.gw-st-body{ padding: 20px 22px 24px; }

.gw-st-group + .gw-st-group{ margin-top: 26px; }

.gw-st-group__label{
  display: inline-block;
  margin: 6px 2px 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--gw-red), var(--gw-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* rows sit in one bordered container, separated by thin divider lines */
.gw-st-group__rows{
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, .012);
}

/* ---- row: grid so every column lines up across rows, with vertical
   divider lines (Trennstriche) between the columns ---- */
.gw-st-row{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 216px 158px 162px;
  align-items: stretch;                                 /* cells full height -> uniform dividers */
  border-bottom: 1px solid rgba(255, 255, 255, .06);    /* horizontal line between rows */
  background: transparent;
  transition: background .22s ease;
}
.gw-st-row:last-child{ border-bottom: 0; }
.gw-st-row:hover{ background: rgba(255, 255, 255, .035); }

/* accent bar slides in on hover */
.gw-st-row::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gw-red), var(--gw-purple));
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .25s cubic-bezier(.22, .61, .36, 1);
  z-index: 1;
}
.gw-st-row:hover::before{ transform: scaleY(1); }

.gw-st-row__name{
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 16px 22px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* each right-hand column is a centered cell with a vertical divider on its left */
.gw-st-cell{
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 20px;
}
.gw-st-cell::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, .09);
}

.gw-st-cell--support{
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  text-align: right;
  line-height: 1.25;
}
.gw-st-row__supportLabel{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}
.gw-st-row__supportValue{
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
}

.gw-st-cell--status{ justify-content: flex-start; }
.gw-st-cell--buy{ justify-content: flex-end; }

/* compact status pill inside a row */
.gw-st-row__status.gw-status-pill{
  padding: 7px 14px !important;
  min-height: 34px !important;
  gap: 8px;
}
.gw-st-row__status .gw-status-dot{ width: 11px; height: 11px; }
.gw-st-row__status .gw-status-text{ font-size: 12.5px; }

/* purchase button (fills its cell so all buttons share one width) */
.gw-st-row__buy{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: rgba(184, 46, 75, .14);
  border: 1px solid rgba(184, 46, 75, .32);
  transition: transform .2s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.gw-st-row__buy:hover{
  transform: translateY(-1px);
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(184, 46, 75, .32);
}

/* ---- responsive: drop the fixed grid + dividers, stack cleanly ---- */
@media (max-width: 920px){
  .gw-st-row{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 20px;
  }
  .gw-st-row__name{ padding: 0; white-space: normal; }
  .gw-st-cell{ padding: 0; }
  .gw-st-cell::before{ display: none; }               /* no vertical dividers when stacked */
  .gw-st-cell--support{ align-items: flex-start; text-align: left; }
  .gw-st-cell--status{ justify-content: flex-start; }
  .gw-st-cell--buy{ justify-content: flex-start; }
  .gw-st-row__buy{ width: auto; align-self: flex-start; padding: 9px 18px; }
}

@media (max-width: 520px){
  .gw-st-body{ padding: 16px 14px 20px; }
  .gw-st-top{ padding: 16px 16px; }
}
/* ---- scroll reveal (armed only when JS runs; each item observed on its own) ---- */
.gw-status .gw-st-reveal{
  transition:
    opacity .6s cubic-bezier(.22, .61, .36, 1),
    translate .6s cubic-bezier(.22, .61, .36, 1);
}
.gw-status.gw-reveal-ready .gw-st-reveal{
  opacity: 0;
  translate: 0 18px;
}
.gw-status.gw-reveal-ready .gw-st-reveal.is-in{
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce){
  .gw-status.gw-reveal-ready .gw-st-reveal{
    opacity: 1 !important;
    translate: none !important;
  }
}
/* ===================== END STATUS PAGE ===================== */

/* ============================================================
   CUSTOMER PANEL — unified shell + redesigned sidebar (GhostWare)
   The sidebar sits in the exact same place on every tab because all
   customer pages now share one grid and the aside is sticky.
   ============================================================ */
.gw-cdash-grid{
  grid-template-columns: 300px minmax(0, 1fr) !important;
  gap: 26px !important;
  align-items: start !important;
}

.gw-cdash-aside{
  position: sticky;
  top: calc(var(--gw-nav-h) + var(--gw-announcement-h, 0px) + 16px);
  align-self: start;
}

@media (max-width: 1024px){
  .gw-cdash-grid{ grid-template-columns: 1fr !important; }
  .gw-cdash-aside{ position: static; }
}

/* ---------------- sidebar ---------------- */
.gw-side{
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

.gw-side__id{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  margin-bottom: 14px;
}
.gw-side__avatar{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--gw-red), var(--gw-purple));
  box-shadow: 0 8px 20px rgba(184, 46, 75, .35);
}
.gw-side__idText{ min-width: 0; }
.gw-side__idName{
  font-weight: 700;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gw-side__idRole{
  font-size: 11px;
  color: rgba(255, 255, 255, .42);
  margin-top: 2px;
  letter-spacing: .04em;
}

.gw-side__nav{ display: flex; flex-direction: column; gap: 6px; }

.gw-side__link{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, .68);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.gw-side__link:hover{
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .92);
}
.gw-side__link.is-active{
  background: linear-gradient(90deg, rgba(184, 46, 75, .16), rgba(124, 58, 237, .12));
  border-color: rgba(184, 46, 75, .28);
  color: #fff;
}
.gw-side__link.is-active .gw-side__ico{
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .14);
}

.gw-side__ico{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .7);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.gw-side__label{ flex: 1 1 auto; min-width: 0; }

.gw-side__link--split{ justify-content: space-between; }
.gw-side__linkMain{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.gw-side__balance{
  font-weight: 800;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
}

.gw-side__foot{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.gw-side__link--logout{ color: rgba(255, 90, 120, .92); }
.gw-side__link--logout:hover{ background: rgba(255, 42, 85, .08); color: #ff6b88; }
.gw-side__link--logout .gw-side__ico{
  color: rgba(255, 90, 120, .92);
  border-color: rgba(255, 42, 85, .25);
  background: rgba(255, 42, 85, .06);
}

/* ---------------- dashboard content ---------------- */
.gw-cdash-head{ margin-bottom: 22px; }
.gw-cdash-head__eyebrow{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--gw-red), var(--gw-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gw-cdash-head__title{
  margin: 8px 0 4px;
  font-weight: 800;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #fff;
}
.gw-cdash-head__sub{ color: rgba(255, 255, 255, .5); font-size: 14px; }
.gw-cdash-head__sub span{ color: rgba(255, 255, 255, .82); font-weight: 600; }

.gw-cdash-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 720px){ .gw-cdash-stats{ grid-template-columns: 1fr; } }

.gw-stat{ display: flex; align-items: center; gap: 14px; }
.gw-stat__ico{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(184, 46, 75, .18), rgba(124, 58, 237, .16));
  border: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
}
.gw-stat__body{ min-width: 0; }
.gw-cdash-card-value--sm{ font-size: 16px; }

.gw-cdash-inlineBtn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: rgba(184, 46, 75, .14);
  border: 1px solid rgba(184, 46, 75, .3);
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.gw-cdash-inlineBtn:hover{
  transform: translateY(-1px);
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  border-color: transparent;
}
/* ===================== END CUSTOMER PANEL ===================== */

/* ============================================================
   WHY CHOOSE US — self-built media widgets + 24/7 support box
   ============================================================ */

/* ---- 3) Customer Panel: mini dashboard preview ---- */
.gw-media-dash{
  padding: 16px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(124, 58, 237, .16), transparent 60%),
    rgba(10, 11, 18, .55);
}
.gw-mini{ display: flex; gap: 10px; width: 100%; height: 100%; }
.gw-mini__side{
  flex: 0 0 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
}
.gw-mini__avatar{
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--gw-red), var(--gw-purple));
}
.gw-mini__nav{ width: 22px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.gw-mini__nav.is-active{ width: 26px; background: linear-gradient(90deg, var(--gw-red), var(--gw-purple)); }
.gw-mini__main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.gw-mini__head{ display: flex; flex-direction: column; gap: 6px; }
.gw-mini__bar{ height: 8px; border-radius: 5px; background: rgba(255, 255, 255, .12); }
.gw-mini__bar--title{ width: 58%; height: 11px; }
.gw-mini__bar--sub{ width: 38%; background: rgba(255, 255, 255, .07); }
.gw-mini__stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gw-mini__stat{
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
}
.gw-mini__stat b{ font-size: 13px; font-weight: 800; color: #fff; }
.gw-mini__stat i{ width: 70%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.gw-mini__wide{
  flex: 1 1 auto; min-height: 22px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(184, 46, 75, .16), rgba(124, 58, 237, .14));
  border: 1px solid rgba(255, 255, 255, .06);
}

/* ---- 4) Simple to Use: interactive demo menu ---- */
.gw-media-menu{
  padding: 10px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 42, 85, .13), transparent 60%),
    rgba(10, 11, 18, .55);
}
.gw-menu{
  width: 100%; max-width: 290px;
  border-radius: 14px; overflow: hidden;
  background: rgba(12, 13, 20, .72);
  border: 1px solid rgba(255, 42, 85, .28);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 42, 85, .1);
}
.gw-menu__head{
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.gw-menu__dots{ display: flex; gap: 5px; }
.gw-menu__dots i{ width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.gw-menu__dots i:first-child{ background: var(--gw-red); }
.gw-menu__brand{
  margin-left: auto; font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.gw-menu__body{ padding: 7px; display: flex; flex-direction: column; gap: 2px; }
.gw-menu__row{
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px; border-radius: 9px;
  cursor: pointer; transition: background .18s ease;
  user-select: none;
}
.gw-menu__row:hover{ background: rgba(255, 255, 255, .04); }
.gw-menu__mico{
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  color: #ff5f7e;
  background: rgba(255, 42, 85, .1);
  border: 1px solid rgba(255, 42, 85, .22);
}
.gw-menu__mico svg{ width: 15px; height: 15px; }
.gw-menu__name{ flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .82); }

/* toggle */
.gw-tgl__in{ position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gw-tgl{
  position: relative; flex: 0 0 auto;
  width: 38px; height: 20px; border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background .22s ease, border-color .22s ease;
}
.gw-tgl__knob{
  position: absolute; top: 1px; left: 1px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
  transition: transform .22s cubic-bezier(.22, .61, .36, 1);
}
.gw-tgl__in:checked ~ .gw-tgl{
  background: linear-gradient(90deg, var(--gw-red), var(--gw-purple));
  border-color: transparent;
}
.gw-tgl__in:checked ~ .gw-tgl .gw-tgl__knob{ transform: translateX(18px); }

/* range */
.gw-rng{
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; height: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
}
.gw-rng::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gw-red), var(--gw-purple));
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 2px 8px rgba(255, 42, 85, .5);
  cursor: pointer;
}
.gw-rng::-moz-range-thumb{
  width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%;
  background: linear-gradient(135deg, var(--gw-red), var(--gw-purple));
  box-shadow: 0 2px 8px rgba(255, 42, 85, .5); cursor: pointer;
}

/* ---- 5) Undetected & Safe: animated shield ---- */
.gw-media-shield{
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(184, 46, 75, .18), rgba(124, 58, 237, .1) 42%, transparent 70%),
    rgba(10, 11, 18, .55);
}
.gw-safe{ position: relative; width: 160px; height: 160px; display: grid; place-items: center; }
.gw-safe__ring{
  position: absolute; inset: 0; margin: auto;
  width: 64px; height: 64px; border-radius: 50%;
  border: 1.5px solid rgba(255, 42, 85, .45);
  animation: gwSafePing 2.8s cubic-bezier(.22, .61, .36, 1) infinite;
}
.gw-safe__ring--2{ animation-delay: .9s; border-color: rgba(124, 58, 237, .45); }
.gw-safe__ring--3{ animation-delay: 1.8s; }
@keyframes gwSafePing{
  0%   { transform: scale(.9); opacity: .85; }
  100% { transform: scale(2.35); opacity: 0; }
}
.gw-safe__core{
  position: relative; z-index: 2;
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--gw-red), var(--gw-purple));
  box-shadow:
    0 0 0 12px rgba(255, 42, 85, .05),
    0 0 0 26px rgba(255, 42, 85, .035),
    0 0 34px rgba(255, 42, 85, .5),
    inset 0 2px 6px rgba(255, 255, 255, .25);
}
.gw-safe__core svg{ width: 34px; height: 34px; }
@media (prefers-reduced-motion: reduce){
  .gw-safe__ring{ animation: none; opacity: .35; }
}

/* ---- 24/7 support box (full width under the grid) ---- */
.gw-support{
  margin-top: 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 24px 28px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(184, 46, 75, .12), transparent 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(124, 58, 237, .12), transparent 55%),
    rgba(255, 255, 255, .02);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
/* reveal after the cards */
.gw-wcu .gw-support.gw-reveal{ transition-delay: .45s; }
.gw-support__left{ display: flex; align-items: center; gap: 18px; min-width: 0; }
.gw-support__ico{
  flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--gw-red), var(--gw-purple));
  box-shadow: 0 8px 22px rgba(184, 46, 75, .35);
}
.gw-support__ico svg{ width: 26px; height: 26px; }
.gw-support__title{ font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.gw-support__sub{ margin-top: 4px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .55); max-width: 560px; }
.gw-support__btn{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px; border-radius: 12px;
  font-weight: 700; font-size: 14px; color: #fff;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 10px 28px rgba(184, 46, 75, .3);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.gw-support__btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 38px rgba(184, 46, 75, .42); filter: brightness(1.06); }
.gw-support__btn svg{ width: 22px; height: 22px; }

@media (max-width: 560px){
  .gw-support{ padding: 20px; }
  .gw-support__btn{ width: 100%; justify-content: center; }
}
/* ===================== END WHY CHOOSE US WIDGETS ===================== */

/* ============================================================
   NAVBAR — active link: gradient text, no underline
   ============================================================ */
.gw-nav__link.is-active::after,
.gw-nav__link.is-active::before{
  display: none !important;
  content: none !important;
}
.gw-nav__link.is-active{
  background: linear-gradient(90deg, var(--gw-red), var(--gw-purple)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
/* keep the gradient on hover of the active item too */
.gw-nav__link.is-active:hover{
  -webkit-text-fill-color: transparent !important;
  filter: brightness(1.08);
}
/* ===================== END NAVBAR ACTIVE ===================== */

/* ============================================================
   CUSTOMER DASHBOARD — fixes (2026-07)
   ============================================================ */
/* 1) Kill the brief white flash: don't transition backdrop-filter/background.
   Only transform + box-shadow animate — the hover effect stays identical. */
.gw-cdash-card{
  transition: transform .35s ease, box-shadow .35s ease !important;
}

/* 2) Logout / Delete buttons: boxier radius matching the rest of the panel */
.gw-cdash-btn{
  border-radius: 12px !important;
}

/* 3) Stat cards: tighten the label + value so the text block lines up flush
   with the icon edges. */
.gw-stat__ico{ width: 46px; height: 46px; }
.gw-stat .gw-cdash-card-label{ line-height: 1.15; }
.gw-stat .gw-cdash-card-value{ margin-top: 3px; line-height: 1.12; }
/* ===================== END CUSTOMER DASHBOARD FIXES ===================== */

/* ============================================================
   CUSTOMER DASHBOARD — flash fix (layer promotion) + grid align
   ============================================================ */
/* Promote backdrop-filter cards to their own compositor layer up front, so the
   blur composites correctly on first paint. (Chrome otherwise shows a light
   flash until the first hover promotes the layer.) */
.gw-cdash-card,
.gw-cdash [class*="backdrop-blur"]{
  will-change: transform;          /* reliably forces its own layer */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
/* keep the hover lift (retain the 3D layer so the blur never re-flashes) */
.gw-cdash-card:hover{
  transform: translate3d(0, -4px, 0) !important;
}

/* Put both dashboard rows on one shared 3-column grid so every box lines up */
.gw-cdash-cards-2{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.gw-cdash-card--wide{ grid-column: span 2; }
@media (max-width: 720px){
  .gw-cdash-cards-2{ grid-template-columns: 1fr !important; }
  .gw-cdash-card--wide{ grid-column: auto; }
}
/* ===================== END DASHBOARD FLASH + ALIGN ===================== */

/* ============================================================
   FOOTER — rebuilt (grouped links left · brand right)
   ============================================================ */
.gw-foot{
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  padding: 56px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .008);
}

/* soft accent glow in the corners */
.gw-foot::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 130% at 100% 100%, rgba(124, 58, 237, .09), transparent 60%),
    radial-gradient(45% 120% at 0% 0%, rgba(184, 46, 75, .06), transparent 55%);
}
/* faint diagonal line texture, bottom-right, masked to fade out */
.gw-foot::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 65%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 24px);
  -webkit-mask: radial-gradient(120% 130% at 100% 100%, #000, transparent 60%);
  mask: radial-gradient(120% 130% at 100% 100%, #000, transparent 60%);
}

.gw-foot__inner{
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  max-width: 1280px;
  margin: 0 auto;
}

.gw-foot__main{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

/* link columns grouped on the left */
.gw-foot__cols{
  display: flex;
  gap: 72px;
  flex-wrap: wrap;
}
.gw-foot__col{ min-width: 120px; }
.gw-foot__h{
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.gw-foot__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gw-foot__a{
  font-size: 14px;
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}
.gw-foot__a:hover{ color: #fff; padding-left: 3px; }

/* brand block on the right */
.gw-foot__brand{
  margin-left: auto;
  max-width: 340px;
  text-align: right;
}
.gw-foot__brandhead{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
.gw-foot__name{
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}
.gw-foot__logo{
  width: 30px;
  height: 30px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .12);
}
.gw-foot__tag{
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
}
.gw-foot__copy{
  margin: 12px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .38);
}

.gw-foot__socials{
  margin-top: 18px;
  display: inline-flex;
  gap: 10px;
  justify-content: flex-end;
}
.gw-foot__soc{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .2s ease, background .25s ease, border-color .25s ease, color .2s ease;
}
.gw-foot__soc:hover{
  transform: translateY(-2px);
  color: #fff;
  background: linear-gradient(135deg, rgba(184, 46, 75, .28), rgba(124, 58, 237, .24));
  border-color: rgba(255, 255, 255, .18);
}
.gw-foot__soc svg{ width: 18px; height: 18px; }

/* bottom line */
.gw-foot__base{
  position: relative;
  z-index: 1;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, .4);
}
.gw-foot__heart{ color: var(--gw-red); }
.gw-foot__dot{ color: rgba(255, 255, 255, .25); }

/* responsive */
@media (max-width: 900px){
  .gw-foot__main{ flex-direction: column; gap: 36px; }
  .gw-foot__brand{ margin-left: 0; text-align: left; max-width: none; }
  .gw-foot__brandhead{ justify-content: flex-start; }
  .gw-foot__socials{ justify-content: flex-start; }
}
@media (max-width: 560px){
  .gw-foot__cols{ gap: 40px; }
  .gw-foot__base{ flex-direction: column; gap: 6px; }
  .gw-foot__dot{ display: none; }
}
/* ===================== END FOOTER ===================== */

/* ============================================================
   STAY IN THE LOOP — full-width Discord CTA band
   ============================================================ */
.gw-connect{
  position: relative;
  overflow: hidden;
  padding: 92px 24px;
  text-align: center;
}
/* soft accent glow toward the top centre */
.gw-connect::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 85% at 50% 0%, rgba(184, 46, 75, .13), transparent 60%),
    radial-gradient(52% 72% at 50% 8%, rgba(124, 58, 237, .11), transparent 66%);
}
/* faint diagonal line texture, faded at the edges */
.gw-connect::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .6;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 26px);
  -webkit-mask: radial-gradient(78% 100% at 50% 45%, #000, transparent 78%);
  mask: radial-gradient(78% 100% at 50% 45%, #000, transparent 78%);
}

.gw-connect__inner{
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.gw-connect__title{
  margin: 0;
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.06;
  color: #fff;
}
.gw-connect__hl{
  background: linear-gradient(90deg, var(--gw-red), var(--gw-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gw-connect__sub{
  margin: 18px auto 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .55);
}
.gw-connect__btn{
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 26px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(90deg, var(--gw-purple), var(--gw-red));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 12px 30px rgba(184, 46, 75, .32);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.gw-connect__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(184, 46, 75, .42);
  filter: brightness(1.06);
}
.gw-connect__btn svg{ width: 22px; height: 22px; }
/* ===================== END STAY IN THE LOOP ===================== */

/* ============================================================
   PRODUCT PAGE — premium rework (layout + design, GhostWare)
   Additive CSS only — no markup/functionality removed.
   ============================================================ */

/* ---- clean product header: title left, status right, divider ---- */
.gw-ppage__top{
  padding-bottom: 20px;
  margin-bottom: 26px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.gw-ppage__topRow{
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px;
}
.gw-ppage__title{
  width: auto !important;
  max-width: 100%;
  text-align: left !important;
  padding-right: 0 !important;
  font-size: clamp(28px, 3.1vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  text-shadow: none !important;
}
.gw-ppage .gw-status-pill.status{
  position: static !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto;
}
@media (max-width: 640px){
  .gw-ppage__topRow{ align-items: flex-start !important; }
}

/* ---- cards: unified, refined ---- */
.gw-cardShell{
  border-radius: 20px;
  background: rgba(255, 255, 255, .022);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .45);
}
.gw-cardShell::after{ border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.gw-cardShell::before{ border-radius: 20px; }
.gw-ppage__right .gw-cardShell{
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .4);
}

/* ---- price card: more prominent hero ---- */
.gw-ppage__priceRow{ align-items: center !important; }
.gw-ppage__price{
  font-size: 34px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .78));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gw-ppage__stockText{
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .82);
  font-weight: 700;
  font-size: 12px;
}

/* ---- section label ("Variant" / "Quantity" / "Addons") a touch cleaner ---- */
.gw-ppage__right label,
.gw-ppage__right .block{ letter-spacing: .01em; }

/* ---- variant / addon rows: soft cards with clear hover ---- */
.gw-ppage__right form button[type="button"]{
  border-radius: 12px !important;
  transition: background .2s ease, border-color .2s ease, transform .15s ease !important;
}

/* ---- primary (Add to Cart) & ghost (Buy Now) buttons ---- */
.gw-btn{ height: 52px; display: inline-flex; align-items: center; justify-content: center; }
.gw-btn--primary{
  box-shadow: 0 14px 34px rgba(184, 46, 75, .30) !important;
}
.gw-btn--primary:hover{ box-shadow: 0 20px 44px rgba(184, 46, 75, .40) !important; }

/* ---- tabs (Description / Features / Requirements) ---- */
.gw-ppage__tab.is-active{
  background: linear-gradient(90deg, rgba(184, 46, 75, .16), rgba(124, 58, 237, .14)) !important;
  border-color: rgba(184, 46, 75, .28) !important;
  color: #fff !important;
}

/* ---- live stats card ---- */
.gw-ppage__stats{
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 16px;
}

/* ---- sticky column keeps clear of the navbar ---- */
.gw-ppage__sticky{
  top: calc(var(--gw-nav-h) + var(--gw-announcement-h, 0px) + 18px);
}
/* ===================== END PRODUCT PAGE ===================== */

/* ============================================================
   PRODUCT PAGE — clean rebuild (gw-pdp)
   ============================================================ */
.gw-pdp{ padding: 36px 0 80px; }
.gw-pdp__wrap{
  width: calc(100% - 40px);
  max-width: 1340px;
  margin: 0 auto;
}

/* header */
.gw-pdp__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.gw-pdp__title{
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.08;
  color: #fff;
}
.gw-pdp__statusPill{ position: static !important; transform: none !important; flex: 0 0 auto; }

/* grid */
.gw-pdp__grid{ display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1024px){
  .gw-pdp__grid{ grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr); align-items: start; }
}
.gw-pdp__col--side{ align-self: start; }
@media (min-width: 1024px){
  .gw-pdp__col--side{
    position: sticky;
    top: calc(var(--gw-nav-h) + var(--gw-announcement-h, 0px) + 18px);
  }
}

/* unified card */
.gw-pdp__card{
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
  padding: 20px;
}
.gw-pdp__card--flush{ padding: 0; overflow: hidden; }

/* left column spacing (margins, not flex-gap, so <script> tags don't add phantom gaps) */
.gw-pdp__gallery{ margin-bottom: 20px; }
.gw-pdp .gw-iprev{ margin: 0 0 20px; }   /* align flush with the other left-column cards */

/* gallery */
.gw-pdp__gallery .splide.main{ position: relative; }
.gw-pdp__gallery .gw-ppage__noImg{
  display: grid; place-items: center; aspect-ratio: var(--product-page-image-aspect-ratio, 16/9);
}
.gw-pdp .splide.main .splide__arrow{
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .12);
  opacity: 0; transition: opacity .2s ease, background .2s ease;
}
.gw-pdp .splide.main:hover .splide__arrow{ opacity: 1; }
.gw-pdp .splide.main .splide__arrow:hover{ background: rgba(0, 0, 0, .72); }
.gw-pdp .splide.main .splide__arrow--prev{ left: 14px; }
.gw-pdp .splide.main .splide__arrow--next{ right: 14px; }
.gw-pdp .splide.main .splide__arrow svg{ fill: #fff; width: 15px; height: 15px; }

/* tabs */
.gw-pdp__tabs{
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.gw-pdp__tab{
  padding: 8px 16px; border-radius: 10px;
  font-weight: 700; font-size: 14px;
  color: rgba(255, 255, 255, .6);
  background: transparent; border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gw-pdp__tab:hover{ color: #fff; background: rgba(255, 255, 255, .04); }
.gw-pdp__tab.is-active{
  color: #fff;
  background: linear-gradient(90deg, rgba(184, 46, 75, .16), rgba(124, 58, 237, .14));
  border-color: rgba(184, 46, 75, .28);
}
.gw-pdp__editor{ color: rgba(255, 255, 255, .72); line-height: 1.75; font-size: 14px; }
.gw-pdp__editor p{ margin: 0 0 10px; }
.gw-pdp__editor ul{ list-style: disc; padding-left: 20px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 4px; }
.gw-pdp__editor h2, .gw-pdp__editor h3{ color: #fff; font-weight: 700; margin: 12px 0 6px; }
.gw-pdp__editor a{ color: #ff5f7e; }

/* right column stack */
.gw-pdp__buy{ display: flex; flex-direction: column; gap: 16px; }

/* price card */
.gw-pdp__priceRow{ display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gw-pdp__price{ font-size: 32px; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.gw-pdp__stock{
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
}
.gw-pdp__stock--out{ color: #ff6b88; background: rgba(255, 42, 85, .1); border-color: rgba(255, 42, 85, .25); }

/* badges (inside the price card) */
.gw-pdp__badges{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.gw-pdp__badge{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 9px;
  font-size: 12.5px; font-weight: 700; color: #fff;
}

/* purchase form host — the snippet already draws its own card; restyle it to
   match, and strip its trailing margin so the stack spacing stays even. */
.gw-pdp__formCard{ padding: 0; border: 0; background: transparent; box-shadow: none; }
.gw-pdp__formCard > form > div{
  margin-bottom: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  background: rgba(255, 255, 255, .025) !important;
  padding: 20px !important;
}

/* live stats */
.gw-pdp__stats{ padding: 16px 18px; }

/* upsells */
.gw-pdp__upsells{ margin-top: 4px; }
.gw-pdp__upsellsTitle{ font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 12px; }

@media (max-width: 640px){
  .gw-pdp__header{ align-items: flex-start; flex-direction: column; }
  .gw-pdp__price{ font-size: 28px; }
}
/* ===================== END PRODUCT PAGE ===================== */

/* Footer socials: icon only — no box/border */
.gw-foot__soc{
  width: auto;
  height: auto;
  padding: 4px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .55);
}
.gw-foot__soc:hover{
  background: transparent !important;
  border: 0 !important;
  color: #fff;
  transform: translateY(-2px);
}
.gw-foot__soc svg{ width: 22px; height: 22px; }


/* ============================================================
   GHOSTWARE — MOBILE / TABLET FINAL OVERRIDES (2026-08)
   Keep this section at the VERY END of custom.css.
   ============================================================ */

/* Prevent accidental horizontal scrolling from wide/fixed children. */
html,
body,
#app{
  max-width: 100%;
  overflow-x: clip;
}

img,
video,
iframe,
svg{
  max-width: 100%;
}

/* Better tap behaviour on mobile browsers. */
a,
button,
input,
select,
textarea,
[role="button"]{
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------
   TABLET / MOBILE NAV
   ------------------------------------------------------------ */
@media (max-width: 1024px){
  .gw-nav,
  .gw-nav.is-scrolled{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .gw-nav__row,
  .gw-nav.is-scrolled .gw-nav__row{
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-height: 58px !important;
    padding: 8px 10px 8px 12px !important;
    gap: 8px !important;
    border-radius: 14px !important;
  }

  .gw-nav.is-scrolled .gw-nav__row{
    background: rgba(12, 13, 20, .72) !important;
    -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
  }

  .gw-nav__brand{
    gap: 9px !important;
    min-width: 0 !important;
  }

  .gw-nav__logo{
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px;
  }

  .gw-nav__name{
    min-width: 0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gw-nav__actions{
    gap: 7px !important;
    min-width: 0;
  }

  .gw-nav .gw-nav__actions .gw-pill--btn,
  .gw-nav .gw-nav__actions .gw-pill--icon,
  .gw-hamburger,
  .gw-curr__btn{
    min-height: 44px !important;
  }

  .gw-nav .gw-nav__actions .gw-pill--btn{
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 11px !important;
  }

  .gw-nav .gw-nav__actions .gw-pill--icon,
  .gw-hamburger{
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }

  .gw-curr__btn{
    height: 44px !important;
    padding-inline: 11px !important;
  }

  .gw-mnav{
    max-height: calc(100dvh - var(--gw-nav-h) - var(--gw-announcement-h, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  }

  .gw-mnav__inner{
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  .gw-mnav__a{
    min-height: 46px;
  }

  /* Customer dashboard becomes a true single-column layout earlier. */
  .gw-cdash-grid{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .gw-cdash-aside{
    position: static !important;
  }
}

/* ------------------------------------------------------------
   PHONE LAYOUT
   ------------------------------------------------------------ */
@media (max-width: 768px){
  :root{
    --gw-nav-h: 74px;
  }

  body:has(.announcement:not(.hidden)){
    --gw-announcement-h: 44px;
  }

  .announcement:not(.hidden){
    min-height: 44px;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  .navbar-spacer{
    height: calc(var(--gw-nav-h) + var(--gw-announcement-h, 0px)) !important;
  }

  /* Consistent phone gutters. */
  .container,
  .mx-auto.max-w-screen-xl,
  .gw-cdash-wrap{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Prevent iOS Safari zooming into fields on focus. */
  input,
  select,
  textarea,
  [role="dialog"] input,
  [role="dialog"] select,
  [role="dialog"] textarea{
    font-size: 16px !important;
  }

  button,
  a.gw-btn,
  .gw-btn,
  .gw-cdash-btn,
  .gw-cdash-inlineBtn,
  .gw-support__btn,
  .gw-connect__btn,
  .gw-socials-btn{
    min-height: 44px;
  }

  /* ---------- Legacy/full-width hero ---------- */
  .gw-hero{
    min-height: max(560px, 78svh) !important;
    padding: 0 !important;
    display: block !important;
  }

  .gw-hero-content{
    position: relative !important;
    inset: auto !important;
    min-height: max(560px, 78svh) !important;
    width: 100% !important;
    padding:
      calc(var(--gw-nav-h) + var(--gw-announcement-h, 0px) + 22px)
      16px
      52px !important;
  }

  .gw-hero-content > div:first-child{
    max-width: 620px !important;
    transform: none !important;
  }

  .gw-hero h1{
    font-size: clamp(30px, 9.4vw, 42px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
  }

  .gw-hero p{
    max-width: 520px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .gw-hero-headline,
  .gw-hero .gw-hero-headline{
    gap: 10px !important;
  }

  .gw-hero-headline::before,
  .gw-hero-headline::after,
  .gw-hero .gw-hero-headline::before,
  .gw-hero .gw-hero-headline::after{
    width: 34px !important;
  }

  .gw-hero-actions{
    width: min(100%, 420px);
    margin-inline: auto;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .gw-hero-actions a{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px;
  }

  .gw-hero-banner{
    background-position: center top !important;
    opacity: .52 !important;
  }

  /* ---------- New main-page hero ---------- */
  .gw-mhero{
    --artwork-drop: 0px !important;
    padding: 34px 0 46px !important;
  }

  .gw-mhero__inner{
    width: calc(100% - 24px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  .gw-mhero__text{
    padding-left: 0 !important;
    align-items: center !important;
    text-align: center !important;
  }

  .gw-mhero__eyebrow{
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: .15em;
  }

  .gw-mhero__title{
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.06 !important;
  }

  .gw-mhero__sub{
    margin-top: 16px !important;
    max-width: 560px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .gw-mhero__actions{
    width: min(100%, 440px);
    margin-top: 22px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .gw-mhero__actions > *{
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .gw-mhero__media{
    order: 0 !important;
    transform: none !important;
  }

  .gw-mhero__stage{
    max-width: 560px;
    margin-inline: auto;
    justify-content: center !important;
  }

  /* ---------- Product group panel ---------- */
  .gw-groups{
    padding-bottom: 56px !important;
  }

  .gw-groups .container{
    width: calc(100% - 24px) !important;
  }

  .gw-groups__panel{
    padding: 18px 14px 20px !important;
    border-radius: 16px !important;
  }

  .gw-groups__head{
    gap: 14px !important;
  }

  .gw-groups__title{
    font-size: 17px !important;
  }

  .gw-groups__sub{
    font-size: 13px !important;
  }

  .gw-groups__rule{
    margin: 18px 0 !important;
  }

  .gw-groups__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .gw-groups__card{
    border-radius: 12px !important;
  }

  /* ---------- Product/category cards ---------- */
  .gw-shop-card,
  .gw-card{
    max-width: 100%;
  }

  .gw-shop-card__top{
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .gw-shop-card__title{
    font-size: 15px !important;
  }

  .gw-shop-card__bottom{
    align-items: flex-end !important;
    gap: 8px !important;
  }

  .gw-shop-card__meta{
    flex: 1 1 auto;
    min-width: 0;
  }

  .gw-shop-card__priceWrap{
    flex: 0 0 auto;
  }

  /* ---------- Product/category modals ---------- */
  .gw-pmodal,
  .gw-homemodal{
    align-items: stretch !important;
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left)) !important;
  }

  .gw-pmodal__panel,
  .gw-homemodal__panel{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 16px !important;
  }

  .gw-pmodal__top,
  .gw-homemodal__top{
    flex: 0 0 auto;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 11px 10px !important;
  }

  .gw-pmodal__title,
  .gw-homemodal__title{
    max-width: 100% !important;
    font-size: 14px !important;
  }

  .gw-pmodal__backBtn,
  .gw-pmodal__closeBtn,
  .gw-homemodal__backBtn,
  .gw-homemodal__closeBtn{
    min-height: 44px !important;
    height: 44px !important;
  }

  .gw-pmodal__closeBtn,
  .gw-homemodal__closeBtn{
    width: 44px !important;
  }

  .gw-pmodal__content,
  .gw-homemodal__content{
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px !important;
  }

  .gw-pmodal__grid,
  .gw-pmodal__prodGrid,
  .gw-homemodal__prodGrid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    justify-content: stretch !important;
  }

  .gw-pmodal__prodItem,
  .gw-homemodal__prodItem{
    width: 100% !important;
    max-width: none !important;
  }

  /* Generic SellAuth dialogs/login/payment modals. */
  [role="dialog"],
  dialog{
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }

  [role="dialog"] form,
  dialog form{
    max-width: 100%;
  }

  /* ---------- Current product page (gw-pdp) ---------- */
  .gw-pdp{
    padding: 24px 0 54px !important;
  }

  .gw-pdp__wrap{
    width: calc(100% - 24px) !important;
  }

  .gw-pdp__header{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
    padding-bottom: 16px !important;
  }

  .gw-pdp__title{
    font-size: clamp(28px, 8vw, 38px) !important;
    overflow-wrap: anywhere;
  }

  .gw-pdp__grid{
    gap: 16px !important;
  }

  .gw-pdp__card{
    padding: 14px !important;
    border-radius: 15px !important;
  }

  .gw-pdp__card--flush{
    padding: 0 !important;
  }

  .gw-pdp__formCard > form > div{
    padding: 14px !important;
    border-radius: 15px !important;
  }

  .gw-pdp__priceRow{
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .gw-pdp__price{
    font-size: 28px !important;
  }

  .gw-pdp__tabs{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
  }

  .gw-pdp__tabs::-webkit-scrollbar{
    display: none;
  }

  .gw-pdp__tab{
    flex: 0 0 auto;
    min-height: 42px;
    padding: 9px 13px !important;
  }

  .gw-pdp__editor{
    font-size: 14px !important;
    line-height: 1.7 !important;
    overflow-wrap: anywhere;
  }

  /* Legacy product page still used by some SellAuth views. */
  .gw-ppage__topRow{
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .gw-ppage__title{
    width: 100% !important;
    text-align: left !important;
    font-size: clamp(28px, 8vw, 38px) !important;
    overflow-wrap: anywhere;
  }

  .gw-ppage__sticky{
    position: static !important;
    top: auto !important;
  }

  .gw-ppage__tabs{
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  .gw-ppage__tabs::-webkit-scrollbar{
    display: none;
  }

  .gw-ppage__tab{
    flex: 0 0 auto;
  }

  /* ---------- Customer dashboard ---------- */
  .gw-side{
    padding: 12px !important;
    border-radius: 15px !important;
  }

  .gw-side__id{
    padding-bottom: 12px !important;
    margin-bottom: 10px !important;
  }

  .gw-side__nav{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .gw-side__link{
    min-width: 0;
    min-height: 46px;
    padding: 8px 9px !important;
    gap: 8px !important;
    font-size: 13px !important;
  }

  .gw-side__linkMain{
    gap: 8px !important;
  }

  .gw-side__ico{
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
  }

  .gw-side__label,
  .gw-side__idName{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gw-cdash-head{
    margin-bottom: 16px !important;
  }

  .gw-cdash-head__title{
    font-size: clamp(25px, 7vw, 32px) !important;
  }

  .gw-cdash-stats,
  .gw-cdash-cards-2{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .gw-cdash-card--wide{
    grid-column: auto !important;
  }

  .gw-cdash-card{
    min-width: 0;
  }

  .gw-cdash-actions{
    justify-content: stretch !important;
    gap: 9px !important;
  }

  .gw-cdash-actions .gw-cdash-btn{
    flex: 1 1 160px;
    justify-content: center;
  }

  .gw-cdash table{
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- Why choose us / support ---------- */
  .gw-wcu-head{
    margin-bottom: 30px !important;
  }

  .gw-wcu-heading{
    font-size: clamp(28px, 8vw, 38px) !important;
  }

  .gw-support{
    padding: 18px 14px !important;
    gap: 16px !important;
  }

  .gw-support__left{
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .gw-support__ico{
    width: 46px !important;
    height: 46px !important;
  }

  .gw-support__btn{
    width: 100%;
    justify-content: center;
  }

  /* ---------- Footer (current + legacy selectors) ---------- */
  .gw-foot{
    margin-top: 28px !important;
    padding: 38px 0 calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .gw-foot__inner{
    width: calc(100% - 24px) !important;
  }

  .gw-foot__main{
    gap: 30px !important;
  }

  .gw-foot__cols{
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 22px !important;
  }

  .gw-foot__col{
    min-width: 0 !important;
  }

  .gw-foot__brand{
    width: 100%;
    margin-left: 0 !important;
    text-align: left !important;
  }

  .gw-foot__brandhead,
  .gw-foot__socials{
    justify-content: flex-start !important;
  }

  .gw-foot__soc{
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
  }

  .gw-foot__base{
    margin-top: 28px !important;
    padding-top: 18px !important;
    text-align: center;
  }

  .gw-footer .gw-footer__bg{
    padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important;
  }

  /* ---------- Floating Discord button ---------- */
  .gw-discord-float{
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)) !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
  }

  .gw-discord-icon{
    width: 24px !important;
    height: 24px !important;
  }
}

/* ------------------------------------------------------------
   SMALL PHONES
   ------------------------------------------------------------ */
@media (max-width: 560px){
  .gw-nav__name{
    display: none !important;
  }

  .gw-nav__row,
  .gw-nav.is-scrolled .gw-nav__row{
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    padding-inline: 9px !important;
  }

  .gw-nav .gw-nav__actions .gw-pill--btn{
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .gw-curr__btn{
    padding-inline: 9px !important;
    font-size: 11px !important;
  }

  .gw-curr__caret{
    display: none !important;
  }

  .gw-mhero__inner,
  .gw-groups .container,
  .gw-pdp__wrap,
  .gw-foot__inner{
    width: calc(100% - 20px) !important;
  }

  .gw-groups__grid{
    grid-template-columns: 1fr !important;
  }

  .gw-groups__more{
    width: 100% !important;
    min-height: 44px;
    justify-content: center !important;
  }

  .gw-shop-card__title{
    font-size: 16px !important;
  }

  .gw-shop-card__availability{
    font-size: 12px !important;
  }

  .gw-shop-card__price{
    font-size: 16px !important;
  }

  .gw-side__nav{
    grid-template-columns: 1fr 1fr !important;
  }

  .gw-foot__cols{
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 18px !important;
  }
}

@media (max-width: 390px){
  .gw-nav .gw-nav__actions .gw-pill--btn{
    padding-inline: 10px !important;
  }

  .gw-curr__txt{
    display: none !important;
  }

  .gw-curr__btn{
    width: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .gw-hero h1,
  .gw-mhero__title{
    font-size: 30px !important;
  }

  .gw-foot__cols{
    grid-template-columns: 1fr !important;
  }
}

/* Touch devices do not have hover; keep controls visible and avoid fake lift. */
@media (hover: none), (pointer: coarse){
  .gw-card:hover,
  .gw-shop-card:hover,
  .gw-groups__card:hover,
  .gw-pmodal__gcard:hover,
  .gw-cdash-card:hover,
  .gw-support__btn:hover,
  .gw-discord-float:hover{
    transform: none !important;
  }

  .gw-pdp .splide.main .splide__arrow{
    opacity: .92 !important;
  }
}

/* Accessibility + battery/performance improvement for reduced-motion users. */
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* ===================== END MOBILE / TABLET FINAL OVERRIDES ===================== */