*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#060508;color:#f6eff8;font-family:Arial,sans-serif;background-image:radial-gradient(circle at 75% 12%,#31003d 0,transparent 26%)}a{color:inherit;text-decoration:none}header{height:72px;padding:0 3vw;display:flex;align-items:center;gap:30px;position:sticky;top:0;background:#08070bed;z-index:20;border-bottom:1px solid #6d187e}.brand{display:flex;align-items:center;gap:9px}.brand img{width:48px;height:48px;object-fit:cover}.brand b{font-size:18px}.brand span,.title p{color:#db10ff}nav{display:flex;gap:24px;margin:auto}nav a{font-size:13px;text-transform:uppercase}.login,.btn{display:inline-block;padding:12px 18px;border:1px solid #ec2dff;background:linear-gradient(90deg,#74118b,#cd0cec);font-weight:bold;color:white;cursor:pointer}.hero{height:520px;position:relative;overflow:hidden}.hero>img,.hero>video{width:100%;height:100%;object-fit:cover;filter:brightness(.58) saturate(1.15)}.hero>.heroBanner{display:block;background:#000;object-fit:cover;object-position:center;width:100%;height:100%;margin:0}.cover{position:absolute;inset:0;background:linear-gradient(90deg,#000b,transparent 55%,#0009),linear-gradient(0deg,#060508,transparent 45%)}.heroText{position:absolute;left:5vw;top:150px}.heroText p{color:#e029ff;font-weight:bold}.heroText h1{font-size:58px;line-height:.95;margin:10px 0 25px}.heroText h1 span{color:#d794ff}.status{position:absolute;right:3vw;top:100px;background:#08070beF;border:1px solid #74218a;width:390px;padding:18px}.status>div{display:flex;justify-content:space-between}.status h2{margin:0;color:#ec26ff}.green{color:#2dff69}.status section{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:16px}.status span{font-size:10px;color:#afa2b5;background:#120e15;padding:10px}.status strong{display:block;color:white;font-size:15px;margin-top:6px}.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px 3vw}.tiles div{border:1px solid #4f2059;background:#0e0b11;padding:20px;color:#dc26ff}.tiles b{margin-left:8px}.tiles small{display:block;margin:8px 0 0 28px;color:#bdb1c1}main,.panel{padding:20px 3vw}.title{border-bottom:1px solid #3a1b42;margin:10px 0 15px}.title p{font-weight:bold;letter-spacing:2px;margin:0}.title h2{font-size:30px;text-transform:uppercase;margin:4px 0 8px}.title small{color:#b6a9ba}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.products.custom{grid-template-columns:repeat(5,1fr)}.card{border:1px solid #44224d;background:linear-gradient(#100d13,#09070a);padding:16px;position:relative}.card.popular{border-color:#ad7100}.art{height:125px;display:grid;place-items:center;background:radial-gradient(circle,#3c0950,transparent 60%),#0b080e;font-size:40px;color:#e02bff}.card h3{text-transform:uppercase;text-align:center}.price{color:#ee30ff;text-align:center;font-size:26px;font-weight:bold}.card ul{columns:2;padding-left:20px;color:#c6bacb;font-size:12px;line-height:1.7}.card .btn{width:100%;text-align:center;margin-top:8px}.panel{margin:20px 3vw;border:1px solid #3d2144;background:#0b090d}.order{display:grid;grid-template-columns:120px 1fr auto;gap:15px;padding:14px;margin:8px 0;background:#131016;border-left:3px solid #d718fa}.order small{color:#b6abb9}.badge{font-size:11px;padding:8px;background:#572065;text-align:center}.modal{display:none;position:fixed;inset:0;background:#000c;z-index:100;place-items:center;padding:20px}.modal.open{display:grid}.modal form{position:relative;width:min(540px,100%);background:#0d0a10;border:1px solid #a92cc2;padding:25px}.modal textarea{width:100%;background:#151019;color:white;border:1px solid #412449;margin:8px 0 16px;padding:12px}.x{position:absolute;right:10px;top:8px;background:none;color:white;border:0;font-size:28px;cursor:pointer}@media(max-width:950px){nav{display:none}.hero{height:760px}.status{top:auto;bottom:25px;left:20px;right:20px;width:auto}.tiles{grid-template-columns:1fr 1fr}.products,.products.custom{grid-template-columns:1fr 1fr}}@media(max-width:600px){.brand b{display:none}.heroText h1{font-size:42px}.status section{grid-template-columns:1fr 1fr}.tiles,.products,.products.custom{grid-template-columns:1fr}.order{grid-template-columns:1fr}}
.rowTitle{display:flex;justify-content:space-between;align-items:end;gap:20px}.filters{display:flex;flex-wrap:wrap;gap:7px}.filter{background:#130e16;color:#d8cddd;border:1px solid #43214d;padding:8px 10px;cursor:pointer}.filter.active,.filter:hover{background:#6f1681;color:white}.clickable{cursor:pointer}.clickable:hover{border-left-color:#ff3fff;background:#18111d}.ticketLink{color:#ec34ff;font-weight:bold;cursor:pointer}.ticketWindow{position:relative;width:min(1150px,96vw);height:min(800px,92vh);background:#0a080c;border:1px solid #a628c1;overflow:hidden;box-shadow:0 0 55px #68007a55}.ticketTop{height:100px;padding:20px 55px 18px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #43214c;background:linear-gradient(90deg,#120b16,#0b080e)}.ticketTop p{color:#e526ff;font-weight:bold;letter-spacing:2px;margin:0}.ticketTop h2{font-size:28px;margin:5px 0}.statusPill,.statusMini{background:#562065;border:1px solid #9b32b4;padding:8px 11px;text-transform:uppercase;font-size:11px;font-weight:bold}.ticketLayout{display:grid;grid-template-columns:300px 1fr;height:calc(100% - 100px)}.ticketInfo{padding:20px;border-right:1px solid #3a1b42;overflow:auto;background:#0d0a10}.ticketInfo h3{text-transform:uppercase;color:#df25ff}.detail{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #27152d}.detail small{display:block;color:#9f91a5;text-transform:uppercase;font-size:10px}.detail b{display:block;margin-top:4px}.ticketInfo label{display:block;color:#bcaec0;font-size:11px;text-transform:uppercase;margin-top:15px}.ticketInfo select{width:100%;background:#151019;color:white;border:1px solid #492452;padding:10px;margin-top:5px}.ticketInfo .btn{width:100%;margin-top:8px}.btn.secondary{background:#211128}.btn.approve{background:linear-gradient(90deg,#126b42,#20a85c);border-color:#33d57b}.btn.revision{background:linear-gradient(90deg,#742133,#b1304a);border-color:#eb526d}.conversation{display:grid;grid-template-rows:1fr auto;min-width:0}.messages{padding:20px;overflow:auto;background:radial-gradient(circle at 80% 20%,#25002d55,transparent 30%),#08060a}.msg{display:flex;gap:10px;margin:13px 0;max-width:82%}.msg.mine{margin-left:auto;flex-direction:row-reverse}.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#2a1830}.avatar.fallback{display:grid;place-items:center;color:#e622ff;font-weight:bold}.bubble{background:#151019;border:1px solid #342039;padding:11px 13px;min-width:120px}.msg.mine .bubble{border-color:#79248c;background:#1a1020}.bubbleHead{font-size:11px;color:#cfbed4;margin-bottom:6px}.bubble p{margin:0;white-space:pre-wrap;line-height:1.4}.bubble a{display:block;color:#e839ff;margin-top:8px;word-break:break-all}.bubble img{display:block;max-width:320px;max-height:260px;object-fit:contain;margin-top:8px;border:1px solid #4a2753}.time{font-size:9px;color:#807386;margin-top:7px}#messageForm{padding:14px;border-top:1px solid #3a1b42;background:#0d0a10;display:grid;grid-template-columns:1fr 260px auto;gap:8px}#messageForm textarea,#messageForm input,#revisionForm textarea{background:#151019;color:white;border:1px solid #43224b;padding:11px;resize:vertical}.staffTicket{display:grid;grid-template-columns:110px 1fr 180px auto;gap:15px;align-items:center;padding:14px;margin:8px 0;background:#131016;border-left:3px solid #d718fa}.staffTicket:hover{background:#19111d}.staffTicket.revision_requested{border-left-color:#ff3d5f}.staffTicket.complete{border-left-color:#39d477}.staffTicket small{display:block;color:#aa9caf;margin-top:4px}.emptyState{padding:30px;text-align:center;color:#a99dae;border:1px dashed #4b2a54}.order .btnTiny{background:#30133a;border:1px solid #752b85;color:#fff;padding:8px 11px;cursor:pointer}.modal form#revisionForm{width:min(560px,96vw)}@media(max-width:850px){.ticketLayout{grid-template-columns:1fr}.ticketInfo{display:none}.ticketWindow{height:94vh}.ticketTop{height:90px}.ticketLayout{height:calc(100% - 90px)}#messageForm{grid-template-columns:1fr}.staffTicket{grid-template-columns:1fr}.rowTitle{display:block}.filters{margin-top:12px}}

/* v0.4 composer improvements */
#messageForm{
  grid-template-columns:minmax(360px,1fr) 320px 170px;
  align-items:stretch;
}
#messageForm textarea{
  min-height:118px;
  font-size:16px;
  line-height:1.45;
  padding:14px;
}
.uploadBox{
  min-height:118px;
  border:1px solid #4c2855;
  background:#141018;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
.uploadLabel{
  color:#f1e8f4;
  font-size:15px;
  font-weight:700;
}
.uploadBox input[type=file]{
  width:100%;
  color:#cfc1d3;
  font-size:13px;
}
.uploadBox small{color:#918397}
#uploadPreview img{
  max-height:88px;
  max-width:100%;
  display:block;
  border:1px solid #6b2b79;
  margin-top:4px;
}
#messageForm .btn{
  min-height:118px;
  font-size:15px;
}
@media(max-width:950px){
  #messageForm{grid-template-columns:1fr}
  #messageForm .btn{min-height:52px}
}

/* =========================================================
   v0.5 Ticket UI fit / viewport fixes
   ========================================================= */

#ticketModal{
  padding:18px;
  overflow:hidden;
}

.ticketWindow{
  width:min(1240px, calc(100vw - 36px));
  height:min(860px, calc(100vh - 36px));
  max-width:1240px;
  max-height:calc(100vh - 36px);
  margin:auto;
  display:flex;
  flex-direction:column;
}

.ticketTop{
  flex:0 0 auto;
  min-height:96px;
}

.ticketLayout{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  grid-template-columns:300px minmax(0,1fr);
}

.ticketInfo{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

.conversation{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:18px 22px;
}

.msg{
  max-width:88%;
  align-items:flex-start;
}

.msg.mine{
  margin-left:auto;
}

.avatar{
  flex:0 0 40px;
  width:40px;
  height:40px;
  object-fit:cover;
  position:relative;
  z-index:1;
}

.bubble{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}

.bubble img{
  width:auto;
  max-width:min(520px, 100%);
  max-height:360px;
  object-fit:contain;
}

#messageForm{
  flex:0 0 auto;
  width:100%;
  min-width:0;
  padding:14px;
  border-top:1px solid #3a1b42;
  background:#0d0a10;
  display:grid;
  grid-template-columns:minmax(260px,1.5fr) minmax(250px,1fr) 160px;
  gap:10px;
  align-items:stretch;
}

#messageForm textarea{
  width:100%;
  min-width:0;
  min-height:104px;
  max-height:180px;
  resize:vertical;
  font-size:16px;
  line-height:1.45;
}

.uploadBox{
  width:100%;
  min-width:0;
  min-height:104px;
}

#messageForm .btn{
  width:100%;
  min-width:0;
  min-height:104px;
  padding:12px;
  white-space:normal;
}

/* Keep long content and controls inside left sidebar */
.ticketInfo select,
.ticketInfo .btn{
  max-width:100%;
}

.detail b{
  overflow-wrap:anywhere;
}

/* Smaller desktop screens / 1080p-safe */
@media (max-width:1200px), (max-height:800px){
  .ticketWindow{
    width:calc(100vw - 20px);
    height:calc(100vh - 20px);
    max-height:calc(100vh - 20px);
  }

  #ticketModal{
    padding:10px;
  }

  .ticketTop{
    min-height:82px;
    padding:14px 52px 12px 18px;
  }

  .ticketTop h2{
    font-size:24px;
  }

  .ticketLayout{
    grid-template-columns:280px minmax(0,1fr);
  }

  .ticketInfo{
    padding:14px;
  }

  .messages{
    padding:14px 16px;
  }

  #messageForm{
    grid-template-columns:minmax(220px,1.4fr) minmax(220px,1fr) 145px;
    padding:10px;
  }

  #messageForm textarea,
  .uploadBox,
  #messageForm .btn{
    min-height:92px;
  }

  .bubble img{
    max-height:300px;
  }
}

/* Tablet */
@media (max-width:900px){
  .ticketWindow{
    width:calc(100vw - 12px);
    height:calc(100vh - 12px);
  }

  #ticketModal{
    padding:6px;
  }

  .ticketLayout{
    grid-template-columns:240px minmax(0,1fr);
  }

  #messageForm{
    grid-template-columns:1fr;
  }

  #messageForm .btn{
    min-height:50px;
  }

  .uploadBox{
    min-height:auto;
  }
}

/* Mobile */
@media (max-width:700px){
  .ticketTop{
    min-height:96px;
    align-items:flex-start;
    gap:8px;
  }

  .ticketTop h2{
    font-size:20px;
    padding-right:8px;
  }

  .statusPill{
    margin-top:24px;
    flex:0 0 auto;
  }

  .ticketLayout{
    display:flex;
    flex-direction:column;
  }

  .ticketInfo{
    flex:0 0 auto;
    max-height:210px;
    border-right:0;
    border-bottom:1px solid #3a1b42;
    display:block;
  }

  .conversation{
    flex:1 1 auto;
    min-height:0;
  }

  .messages{
    min-height:150px;
  }

  .msg{
    max-width:96%;
  }

  .bubble img{
    max-width:100%;
    max-height:240px;
  }
}

.imageLightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:300;
  background:rgba(0,0,0,.92);
  align-items:center;
  justify-content:center;
  padding:30px;
}
.imageLightbox.open{display:flex}
.imageLightbox img{
  max-width:94vw;
  max-height:92vh;
  object-fit:contain;
  border:1px solid #8d2ca0;
  box-shadow:0 0 50px rgba(210,20,255,.25);
}
.lightboxClose{
  position:fixed;
  right:22px;
  top:14px;
  width:44px;
  height:44px;
  border:1px solid #9e2bb5;
  background:#120d16;
  color:white;
  font-size:30px;
  cursor:pointer;
  z-index:301;
}
.previewImage{
  cursor:zoom-in;
}

.ticketLockedNotice{
  flex:0 0 auto;
  margin:0;
  padding:14px 18px;
  border-top:1px solid #5d2268;
  background:#160d19;
  color:#d7c8db;
  font-size:14px;
  line-height:1.4;
}

/* v0.10 owner / staff management */
.ownerStats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:14px 0;
}
.ownerStats>div{
  background:#141018;
  border:1px solid #3c2144;
  padding:16px;
}
.ownerStats strong{
  display:block;
  color:#ec2dff;
  font-size:30px;
}
.ownerUsers{display:grid;gap:8px}
.ownerUser{
  display:grid;
  grid-template-columns:minmax(260px,1fr) 120px minmax(170px,220px) 130px;
  gap:12px;
  align-items:center;
  background:#121015;
  border:1px solid #37203e;
  padding:12px;
}
.ownerIdentity{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.ownerIdentity b,.ownerIdentity small{display:block}
.ownerIdentity small{color:#9d8fa2;margin-top:4px}
.ownerAvatar{
  width:42px;height:42px;border-radius:50%;object-fit:cover;background:#2a1830;flex:0 0 42px;
}
.roleChip{
  text-align:center;
  padding:8px 10px;
  border:1px solid #5e2a69;
  text-transform:uppercase;
  font-size:11px;
  font-weight:800;
}
.role-owner{background:#6d4b00;border-color:#ad7a00;color:#ffd76b}
.role-admin{background:#5d176b}
.role-designer{background:#173e5f;border-color:#246b9c}
.role-customer{background:#25202a}
.ownerRoleSelect{
  width:100%;
  background:#151019;
  border:1px solid #492452;
  color:white;
  padding:10px;
}
.ownerLocked{color:#9e929f;font-size:12px}
.ownerSaveRole{width:100%}
@media(max-width:800px){
  .ownerStats{grid-template-columns:1fr 1fr}
  .ownerUser{grid-template-columns:1fr}
}

/* v0.12.0 product + package item icons */
.productArt{
  font-size:52px;
  overflow:hidden;
  position:relative;
}
.productArt span{
  display:grid;
  place-items:center;
  width:82px;
  height:82px;
  border:1px solid #8e2ba4;
  border-radius:18px;
  background:linear-gradient(145deg,#201225,#0a080c);
  box-shadow:0 0 26px rgba(218,31,255,.22),inset 0 0 18px rgba(255,255,255,.025);
  filter:drop-shadow(0 4px 8px #000);
}
.designIncluded{
  margin:12px 0 8px;
  padding:8px 10px;
  border:1px solid #7f278f;
  background:#25102c;
  color:#ef69ff;
  text-align:center;
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
}
.card ul.gearList{
  columns:2;
  column-gap:14px;
  list-style:none;
  padding-left:0;
}
.gearList li{
  display:flex;
  align-items:center;
  gap:6px;
  break-inside:avoid;
  min-height:23px;
}
.itemIcon{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:inline-grid;
  place-items:center;
  border:1px solid #4b2853;
  border-radius:5px;
  background:#120c15;
  font-size:12px;
}
@media(max-width:700px){
  .card ul.gearList{columns:1}
}

/* v0.12.1 BrokeVibez black + purple/blue item icon treatment */
.productArt{
  background:
    radial-gradient(circle at 50% 45%,rgba(188,35,255,.20),transparent 38%),
    radial-gradient(circle at 70% 70%,rgba(31,137,255,.15),transparent 38%),
    #050507 !important;
}
.productArt .neonItemIcon{
  width:92px;
  height:92px;
  border:1px solid rgba(191,45,255,.72);
  border-radius:16px;
  background:
    linear-gradient(145deg,rgba(21,9,29,.96),rgba(3,7,14,.98));
  box-shadow:
    0 0 10px rgba(203,39,255,.48),
    0 0 25px rgba(117,35,255,.25),
    inset 0 0 18px rgba(32,131,255,.10);
  position:relative;
  overflow:hidden;
}
.productArt .neonItemIcon:before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(32,140,255,.36);
  border-radius:11px;
}
.productArt .neonItemIcon:after{
  content:"";
  position:absolute;
  width:65px;
  height:2px;
  left:14px;
  bottom:18px;
  background:linear-gradient(90deg,transparent,#c52cff,#218cff,transparent);
  box-shadow:0 0 9px #8d32ff;
}
.productArt .neonItemIcon b{
  z-index:1;
  max-width:76px;
  text-align:center;
  font-size:13px;
  line-height:1.05;
  letter-spacing:1.2px;
  color:#f6efff;
  text-shadow:
    0 0 5px #c328ff,
    0 0 10px #742fff,
    0 0 16px #168cff;
}

/* v0.12.2 actual product images from supplied item artwork */
.productArt{
  min-height:170px;
  padding:0 !important;
  background:#030407 !important;
  border-bottom:1px solid rgba(171,37,255,.38);
}
.productItemImage{
  width:100%;
  height:170px;
  display:block;
  object-fit:cover;
  object-position:center;
  background:#030407;
  filter:saturate(1.08) contrast(1.06);
  box-shadow:inset 0 0 24px rgba(0,0,0,.7);
}
.card:hover .productItemImage{
  filter:saturate(1.16) contrast(1.08) brightness(1.05);
}

/* v0.12.3 approved BrokeVibez custom-product artwork */
#customProducts .productArt{
  min-height:190px;
  background:#030307 !important;
  overflow:hidden;
}
#customProducts .productItemImage{
  width:100%;
  height:190px;
  object-fit:cover;
  object-position:center top;
  display:block;
  background:#030307;
  filter:saturate(1.06) contrast(1.04);
}
#customProducts .card:hover .productItemImage{
  filter:saturate(1.12) contrast(1.06) brightness(1.04);
}

/* v0.12.4 — Responsive store cards for desktop/tablet/phone */

/* Let product grids adapt naturally instead of forcing fixed-width cards */
#customProducts,
#gearProducts,
.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 16px !important;
  width: 100%;
  align-items: stretch;
}

/* Prevent any card from overflowing its column */
#customProducts .card,
#gearProducts .card,
.products .card {
  min-width: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  overflow: hidden;
}

/* Keep all product images proportional and centered */
#customProducts .productArt,
#gearProducts .productArt,
.products .productArt {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden;
  background: #030307 !important;
}

#customProducts .productItemImage,
#gearProducts .productItemImage,
.products .productItemImage {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #030307;
}

/* Keep text/buttons readable without forcing horizontal overflow */
.products .card h3,
#customProducts .card h3,
#gearProducts .card h3 {
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.15;
}

.products .card .btn,
#customProducts .card .btn,
#gearProducts .card .btn {
  width: 100%;
  box-sizing: border-box;
}

/* Tablets */
@media (max-width: 1100px) {
  #customProducts,
  #gearProducts,
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* Phones */
@media (max-width: 680px) {
  #customProducts,
  #gearProducts,
  .products {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #customProducts .productArt,
  #gearProducts .productArt,
  .products .productArt {
    aspect-ratio: 4 / 3;
  }

  .products .card,
  #customProducts .card,
  #gearProducts .card {
    margin: 0 !important;
  }

  .products .card h3,
  #customProducts .card h3,
  #gearProducts .card h3 {
    font-size: clamp(18px, 5vw, 24px);
    text-align: center;
  }

  .products .price,
  #customProducts .price,
  #gearProducts .price {
    font-size: clamp(20px, 6vw, 28px);
    text-align: center;
  }
}

/* Very small phones */
@media (max-width: 420px) {
  #customProducts,
  #gearProducts,
  .products {
    gap: 10px !important;
  }

  #customProducts .productArt,
  #gearProducts .productArt,
  .products .productArt {
    aspect-ratio: 1 / 1;
  }
}

/* v0.12.5 — Never crop custom product artwork */
#customProducts .productArt {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #030307 !important;
}

#customProducts .productItemImage {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  background: #030307 !important;
}

/* Keep the product grid responsive without changing image framing */
@media (max-width: 1100px) {
  #customProducts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  #customProducts {
    grid-template-columns: 1fr !important;
  }

  #customProducts .productArt {
    aspect-ratio: 1 / 1 !important;
  }
}

/* v0.12.6 — Correct custom item thumbnail framing */
#customProducts .productArt{
  width:100% !important;
  aspect-ratio:16 / 9 !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#050409 !important;
}

#customProducts .productItemImage{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  background:#050409 !important;
}

/* Keep identical thumbnail proportions on tablets and phones */
@media (max-width:1100px){
  #customProducts .productArt{aspect-ratio:16 / 9 !important;}
}

@media (max-width:680px){
  #customProducts .productArt{aspect-ratio:16 / 9 !important;}
}

/* v0.12.7 — Larger custom item artwork */
#customProducts .productArt{
  aspect-ratio:16 / 9 !important;
}
#customProducts .productItemImage{
  object-fit:cover !important;
  object-position:center !important;
}

/* v0.12.8 — Preserve every custom icon edge */
#customProducts .productArt{
  aspect-ratio:16 / 9 !important;
  overflow:hidden !important;
  background:#050409 !important;
}

#customProducts .productItemImage{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#050409 !important;
}

/* Same full-icon framing at every breakpoint */
@media (max-width:1100px){
  #customProducts .productArt{aspect-ratio:16 / 9 !important;}
}
@media (max-width:680px){
  #customProducts .productArt{aspect-ratio:16 / 9 !important;}
}

/* v0.12.9 — final custom product image framing */
#customProducts .productArt{
  width:100% !important;
  aspect-ratio:4 / 3 !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  display:block !important;
  background:#050409 !important;
}

#customProducts .productItemImage{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  background:#050409 !important;
}

/* Preserve the exact same image framing on every screen size */
@media (max-width:1100px){
  #customProducts .productArt{aspect-ratio:4 / 3 !important;}
}
@media (max-width:680px){
  #customProducts .productArt{aspect-ratio:4 / 3 !important;}
}
@media (max-width:420px){
  #customProducts .productArt{aspect-ratio:4 / 3 !important;}
}

/* v0.12.10 — native tall icon framing, no cropping */
#customProducts .productArt{
  width:100% !important;
  aspect-ratio:15 / 14 !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#040308 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#customProducts .productItemImage{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  background:#040308 !important;
}

/* Keep the same complete-icon framing at all screen sizes */
@media (max-width:1100px){
  #customProducts .productArt{aspect-ratio:15 / 14 !important;}
}
@media (max-width:680px){
  #customProducts .productArt{aspect-ratio:15 / 14 !important;}
}
@media (max-width:420px){
  #customProducts .productArt{aspect-ratio:15 / 14 !important;}
}

/* v0.13.1 owner-only ticket delete */
#deleteTicketBtn.danger{
  background:#651326;
  border:1px solid #ff426d;
  color:#fff;
}
#deleteTicketBtn.danger:hover{
  background:#8b1934;
}


/* v0.13.2 — definitive custom product image sizing */
#customProducts .productArt {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #050409 !important;
  display: block !important;
}

#customProducts .productItemImage {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep exactly the same image ratio on desktop, tablet, and phone. */
@media (max-width: 1100px) {
  #customProducts .productArt { aspect-ratio: 4 / 3 !important; }
}
@media (max-width: 680px) {
  #customProducts .productArt { aspect-ratio: 4 / 3 !important; }
}
@media (max-width: 420px) {
  #customProducts .productArt { aspect-ratio: 4 / 3 !important; }
}

/* v0.13.3 — Full-bleed custom product artwork, no visible image edges */
#customProducts .productArt{
  width:100% !important;
  aspect-ratio:41 / 39 !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-bottom:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#customProducts .productItemImage{
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
}

/* Same framing on every screen size */
@media (max-width:1100px){
  #customProducts .productArt{aspect-ratio:41 / 39 !important;}
}
@media (max-width:680px){
  #customProducts .productArt{aspect-ratio:41 / 39 !important;}
}
@media (max-width:420px){
  #customProducts .productArt{aspect-ratio:41 / 39 !important;}
}

/* v0.13.4 — final standalone product artwork */
#customProducts .productArt{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#040308 !important;
  border:0 !important;
  box-shadow:none !important;
}

#customProducts .productItemImage{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:#040308 !important;
}

/* Preserve the exact same item size/framing on all screen sizes */
@media (max-width:1100px){
  #customProducts .productArt{aspect-ratio:1 / 1 !important;}
}
@media (max-width:680px){
  #customProducts .productArt{aspect-ratio:1 / 1 !important;}
}
@media (max-width:420px){
  #customProducts .productArt{aspect-ratio:1 / 1 !important;}
}

/* v0.13.5 — exact approved standalone artwork, full-card fit */
#customProducts .productArt{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  box-shadow:none !important;
  background:#050409 !important;
}

#customProducts .productItemImage{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:#050409 !important;
}

/* Keep identical framing on all screen sizes */
@media (max-width:1100px){
  #customProducts .productArt{aspect-ratio:1 / 1 !important;}
}
@media (max-width:680px){
  #customProducts .productArt{aspect-ratio:1 / 1 !important;}
}
@media (max-width:420px){
  #customProducts .productArt{aspect-ratio:1 / 1 !important;}
}


/* v0.13.6 — BrokeVibez gear package artwork */
#gearProducts .productArt{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#050409 !important;
  border:0 !important;
  box-shadow:none !important;
}

#gearProducts .productItemImage{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:#050409 !important;
}

@media (max-width:1100px){
  #gearProducts .productArt{aspect-ratio:1 / 1 !important;}
}
@media (max-width:680px){
  #gearProducts .productArt{aspect-ratio:1 / 1 !important;}
}
@media (max-width:420px){
  #gearProducts .productArt{aspect-ratio:1 / 1 !important;}
}


/* v0.13.7 — approved gear package artwork, scaled down 15% */
#gearProducts .productArt{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#040308 !important;
  border:0 !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#gearProducts .productItemImage{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:scale(.85) !important;
  transform-origin:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:#040308 !important;
}

@media (max-width:1100px){
  #gearProducts .productArt{aspect-ratio:1 / 1 !important;}
}
@media (max-width:680px){
  #gearProducts .productArt{aspect-ratio:1 / 1 !important;}
}
@media (max-width:420px){
  #gearProducts .productArt{aspect-ratio:1 / 1 !important;}
}

/* v0.14.0 — gear package image fit */
#gearProducts .productArt{
  width:100% !important;
  aspect-ratio:4 / 3 !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#050409 !important;
  border:0 !important;
  box-shadow:none !important;
  display:block !important;
}

#gearProducts .productItemImage{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:#050409 !important;
}

/* Individual item cards */
#individualProducts{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
  gap:16px !important;
  width:100%;
}

#individualProducts .card{
  min-width:0;
  width:100%;
  box-sizing:border-box;
}

#individualProducts .art{
  display:none !important;
}

@media(max-width:1100px){
  #gearProducts .productArt{aspect-ratio:4 / 3 !important;}
  #individualProducts{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

@media(max-width:680px){
  #gearProducts .productArt{aspect-ratio:4 / 3 !important;}
  #individualProducts{grid-template-columns:1fr !important;}
}

/* v0.14.1 compact individual store */
.individualStoreTitle{margin-top:28px!important;margin-bottom:10px!important}
#individualProducts{
 display:grid!important;
 grid-template-columns:repeat(5,minmax(0,1fr))!important;
 gap:10px!important;width:100%!important
}
#individualProducts .card{
 width:100%!important;min-width:0!important;min-height:0!important;
 padding:9px!important;box-sizing:border-box!important
}
#individualProducts .productArt,
#individualProducts .art,
#individualProducts .productItemImage{display:none!important}
#individualProducts .card h3{
 font-size:13px!important;line-height:1.15!important;margin:3px 0 5px!important
}
#individualProducts .price{
 font-size:18px!important;line-height:1!important;margin:5px 0 7px!important
}
#individualProducts .orderBtn,
#individualProducts button{
 height:30px!important;min-height:30px!important;padding:3px 7px!important;
 font-size:10px!important;line-height:1!important
}
#individualProducts .desc,
#individualProducts .productDescription{
 font-size:10px!important;line-height:1.2!important;margin:3px 0!important
}
@media(max-width:1200px){#individualProducts{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:900px){#individualProducts{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:650px){#individualProducts{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}}
@media(max-width:420px){#individualProducts{grid-template-columns:1fr!important}}

/* v0.14.2 separate route pages */
body[data-page="server"] main#store,
body[data-page="server"] #orders,
body[data-page="server"] #staff,
body[data-page="server"] #owner,
body[data-page="server"] #pageAccess{display:none!important}

body[data-page="store"] .hero,
body[data-page="store"] .tiles,
body[data-page="store"] #orders,
body[data-page="store"] #staff,
body[data-page="store"] #owner,
body[data-page="store"] #pageAccess{display:none!important}

body[data-page="orders"] .hero,
body[data-page="orders"] .tiles,
body[data-page="orders"] main#store,
body[data-page="orders"] #staff,
body[data-page="orders"] #owner{display:none!important}

body[data-page="design-team"] .hero,
body[data-page="design-team"] .tiles,
body[data-page="design-team"] main#store,
body[data-page="design-team"] #orders,
body[data-page="design-team"] #owner{display:none!important}

body[data-page="owner"] .hero,
body[data-page="owner"] .tiles,
body[data-page="owner"] main#store,
body[data-page="owner"] #orders,
body[data-page="owner"] #staff{display:none!important}

header nav a.active{
 color:#ff21ff!important;
 border-bottom:2px solid #c91cff
}
body[data-page="store"] main#store,
body[data-page="orders"] #orders,
body[data-page="design-team"] #staff,
body[data-page="owner"] #owner,
body[data-page="design-team"] #pageAccess,
body[data-page="owner"] #pageAccess{margin-top:22px}


/* v0.14.4 — BrokeVibez Server Systems */
.serverSystems{
  position:relative;
  padding:64px 5vw 76px;
  background:
    radial-gradient(circle at 18% 0%,rgba(204,0,255,.12),transparent 34%),
    radial-gradient(circle at 88% 80%,rgba(40,70,255,.09),transparent 30%),
    linear-gradient(180deg,#08070a 0%,#050507 100%);
  border-top:1px solid rgba(225,0,255,.25);
  border-bottom:1px solid rgba(225,0,255,.18);
  overflow:hidden;
}
.serverSystems:before{
  content:"BROKEVIBEZ";
  position:absolute;
  right:-25px;top:8px;
  font-weight:900;
  font-size:clamp(70px,10vw,180px);
  letter-spacing:-7px;
  color:rgba(255,255,255,.018);
  pointer-events:none;
}
.serverSystemsInner{max-width:1515px;margin:0 auto;position:relative;z-index:1}
.serverSystemsEyebrow{
  color:#ff16ee;
  font-weight:900;
  letter-spacing:4px;
  font-size:12px;
  margin-bottom:16px;
}
.serverSystems h2{
  margin:0;
  max-width:1000px;
  font-size:clamp(36px,5vw,72px);
  line-height:.96;
  letter-spacing:-2px;
  color:#fff;
  text-transform:uppercase;
}
.serverSystemsLead{
  max-width:760px;
  color:#b9afc2;
  line-height:1.55;
  margin:18px 0 34px;
  font-size:15px;
}
.serverSystemsGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-left:1px solid rgba(230,0,255,.22);
  border-top:1px solid rgba(230,0,255,.22);
}
.serverSystemCard{
  position:relative;
  min-height:225px;
  padding:32px 32px 28px;
  background:linear-gradient(145deg,rgba(20,16,24,.84),rgba(8,7,10,.94));
  border-right:1px solid rgba(230,0,255,.22);
  border-bottom:1px solid rgba(230,0,255,.22);
  overflow:hidden;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.serverSystemCard:hover{
  background:linear-gradient(145deg,rgba(40,13,49,.92),rgba(9,7,12,.97));
  border-color:rgba(255,24,238,.5);
  transform:translateY(-2px);
}
.serverSystemNumber{
  display:block;
  color:#bd55ff;
  font-weight:900;
  font-size:12px;
  letter-spacing:1px;
  margin-bottom:36px;
}
.serverSystemIcon{
  position:absolute;
  right:26px;top:22px;
  color:rgba(255,19,238,.22);
  font-size:46px;
  font-weight:900;
}
.serverSystemCard h3{
  margin:0 0 10px;
  color:#fff;
  font-size:22px;
  line-height:1.05;
  text-transform:uppercase;
}
.serverSystemCard p{
  margin:0;
  max-width:390px;
  color:#bdb3c5;
  line-height:1.5;
  font-size:14px;
}
.serverSystemsFooter{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-top:30px;
}
.serverSystemsFooter div{
  font-size:16px;
  letter-spacing:2px;
}
.serverSystemsFooter b{color:#fff;margin-right:8px}
.serverSystemsFooter span{color:#ff16ee;font-weight:900}
.serverSystemsFooter .btn{min-width:190px;text-align:center}

@media(max-width:900px){
  .serverSystems{padding:48px 24px 56px}
  .serverSystemsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .serverSystemCard{min-height:210px;padding:26px 24px}
}
@media(max-width:600px){
  .serverSystems{padding:38px 16px 46px}
  .serverSystems h2{font-size:38px;letter-spacing:-1px}
  .serverSystemsLead{font-size:14px;margin-bottom:24px}
  .serverSystemsGrid{grid-template-columns:1fr}
  .serverSystemCard{min-height:0;padding:24px 20px}
  .serverSystemNumber{margin-bottom:24px}
  .serverSystemCard h3{font-size:20px}
  .serverSystemsFooter{align-items:stretch;flex-direction:column}
  .serverSystemsFooter .btn{width:100%}
}

body:not([data-page="server"]) #serverSystems{display:none!important}


/* v0.14.5 — Info page */
body:not([data-page="info"]) #infoPage{display:none!important}

.infoPage{
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 10%,rgba(213,0,255,.13),transparent 28%),
    radial-gradient(circle at 85% 18%,rgba(46,94,255,.10),transparent 25%),
    #060507;
  color:#fff;
}

.infoHero{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  padding:70px 5vw;
  background:
    linear-gradient(90deg,rgba(5,4,7,.98) 0%,rgba(5,4,7,.82) 42%,rgba(5,4,7,.35) 75%,rgba(5,4,7,.75) 100%),
    radial-gradient(circle at 75% 45%,rgba(176,0,255,.25),transparent 30%),
    linear-gradient(145deg,#0a0710,#15051f 58%,#061324);
  border-bottom:1px solid rgba(235,0,255,.28);
  overflow:hidden;
}
.infoHero:after{
  content:"BROKEVIBEZ";
  position:absolute;
  right:-25px;
  bottom:-34px;
  font-size:clamp(95px,14vw,235px);
  font-weight:900;
  letter-spacing:-10px;
  color:rgba(255,255,255,.025);
  pointer-events:none;
}
.infoHeroInner{max-width:820px;position:relative;z-index:1}
.infoEyebrow{
  color:#ff21ed;
  font-size:12px;
  letter-spacing:3px;
  font-weight:900;
  margin:0 0 12px;
}
.infoHero h1{
  font-size:clamp(48px,7vw,96px);
  line-height:.92;
  margin:0;
  letter-spacing:-3px;
  text-transform:uppercase;
}
.infoHero h1 span{color:#ff23e8}
.infoHeroLead{
  max-width:760px;
  margin:24px 0 28px;
  color:#c6bdcd;
  font-size:16px;
  line-height:1.65;
}
.infoHeroActions{display:flex;gap:12px;flex-wrap:wrap}
.ghostBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.025);
  text-decoration:none;
  font-weight:800;
}
.ghostBtn:hover{border-color:#d929ff;background:rgba(217,41,255,.08)}

.infoWrap{max-width:1515px;margin:0 auto;padding:46px 5vw 80px}
.infoPanel{
  display:grid;
  grid-template-columns:1.6fr .8fr;
  gap:28px;
  padding:30px;
  border:1px solid rgba(223,35,255,.23);
  background:linear-gradient(145deg,rgba(19,14,22,.94),rgba(8,7,10,.96));
  margin-bottom:24px;
}
.infoPanel h2{
  font-size:clamp(30px,4vw,54px);
  line-height:.98;
  margin:0 0 18px;
}
.infoPanel p{color:#bcb3c4;line-height:1.6}
.commitmentCard{
  border:1px solid rgba(223,35,255,.28);
  padding:22px;
  background:rgba(17,9,20,.82);
}
.checkList{list-style:none;padding:0;margin:12px 0 0}
.checkList li{
  position:relative;
  padding:10px 0 10px 30px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:#eee;
}
.checkList li:before{
  content:"✓";
  position:absolute;left:0;
  color:#ff27ee;font-weight:900;
}

.noticePanel{
  grid-template-columns:auto 1fr;
  align-items:center;
}
.noticeIcon{
  width:54px;height:54px;
  display:grid;place-items:center;
  border:1px solid #ff2be8;
  color:#ff2be8;
  font-size:28px;font-weight:900;
  border-radius:50%;
}
.noticePanel h3{margin:0 0 8px;font-size:22px}

.rewardsSection{padding:28px 0 18px}
.sectionHead{max-width:850px;margin-bottom:24px}
.sectionHead h2{
  font-size:clamp(34px,4.6vw,62px);
  line-height:.95;
  margin:0 0 14px;
}
.sectionHead p{color:#bcb3c4;line-height:1.6}
.rewardGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.rewardCard{
  border:1px solid rgba(223,35,255,.25);
  padding:24px;
  min-height:100%;
  background:
    radial-gradient(circle at 85% 10%,rgba(217,35,255,.10),transparent 28%),
    linear-gradient(150deg,rgba(20,14,24,.96),rgba(8,7,10,.98));
}
.rewardIcon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid rgba(223,35,255,.45);
  color:#ff25ec;
  font-size:23px;
  margin-bottom:18px;
}
.rewardCard h3{font-size:21px;margin:0 0 16px}
.rewardCard ul{margin:0;padding-left:18px;color:#c7bdcd}
.rewardCard li{margin:8px 0;line-height:1.4}

.importantPanel{
  margin-top:28px;
  grid-template-columns:.7fr 1.3fr;
}
.importantList p{
  margin:0;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.thankYouPanel{
  margin-top:26px;
  padding:44px;
  text-align:center;
  border:1px solid rgba(223,35,255,.28);
  background:
    radial-gradient(circle at 50% 0%,rgba(216,30,255,.15),transparent 42%),
    linear-gradient(180deg,#100814,#08070a);
}
.thankYouPanel h2{
  font-size:clamp(36px,5vw,68px);
  margin:0 auto 14px;
  max-width:1000px;
  line-height:.95;
}
.thankYouPanel p{
  max-width:800px;
  margin:0 auto 24px;
  color:#c4bbc9;
  line-height:1.6;
}

@media(max-width:900px){
  .infoPanel{grid-template-columns:1fr}
  .rewardGrid{grid-template-columns:1fr}
  .importantPanel{grid-template-columns:1fr}
  .infoHero{min-height:440px;padding:54px 24px}
  .infoWrap{padding:34px 24px 60px}
}
@media(max-width:600px){
  .infoHero{padding:42px 16px;min-height:390px}
  .infoHero h1{font-size:46px;letter-spacing:-2px}
  .infoHeroLead{font-size:14px}
  .infoWrap{padding:26px 16px 48px}
  .infoPanel{padding:20px}
  .thankYouPanel{padding:28px 18px}
  .infoHeroActions{flex-direction:column}
  .infoHeroActions .btn,.ghostBtn{width:100%;box-sizing:border-box}
}


/* v0.14.6 — Info page isolation fix */
body[data-page="info"] .hero,
body[data-page="info"] .tiles,
body[data-page="info"] main#store,
body[data-page="info"] #orders,
body[data-page="info"] #staff,
body[data-page="info"] #owner,
body[data-page="info"] #pageAccess,
body[data-page="info"] #serverSystems{
  display:none !important;
}

body[data-page="info"] #infoPage{
  display:block !important;
}


/* v0.14.7 — Player Services page */
body:not([data-page="services"]) #servicesPage{display:none!important}
body[data-page="services"] .hero,
body[data-page="services"] .tiles,
body[data-page="services"] main#store,
body[data-page="services"] #orders,
body[data-page="services"] #staff,
body[data-page="services"] #owner,
body[data-page="services"] #pageAccess,
body[data-page="services"] #serverSystems,
body[data-page="services"] #infoPage{display:none!important}
body[data-page="services"] #servicesPage{display:block!important}

.servicesPage{background:#060507;color:#fff;min-height:100vh}
.servicesHero{
  min-height:500px;display:flex;align-items:center;padding:65px 5vw;
  border-bottom:1px solid rgba(225,25,255,.28);
  background:
    linear-gradient(90deg,rgba(5,4,7,.98),rgba(8,4,12,.82) 52%,rgba(5,9,19,.70)),
    radial-gradient(circle at 76% 36%,rgba(36,86,255,.22),transparent 25%),
    radial-gradient(circle at 60% 65%,rgba(229,0,255,.22),transparent 30%),
    linear-gradient(135deg,#070509,#16051e 58%,#071325);
  position:relative;overflow:hidden;
}
.servicesHero:after{
  content:"SERVICES";position:absolute;right:-18px;bottom:-38px;
  font-size:clamp(100px,17vw,280px);font-weight:950;letter-spacing:-12px;
  color:rgba(255,255,255,.025);pointer-events:none
}
.servicesHeroCopy{max-width:900px;position:relative;z-index:1}
.svcEyebrow{color:#ff20eb;font-size:12px;font-weight:900;letter-spacing:3px;margin:0 0 12px}
.servicesHero h1{font-size:clamp(50px,7.3vw,104px);line-height:.9;letter-spacing:-4px;margin:0;text-transform:uppercase}
.servicesHero h1 span{color:#e828ff}
.servicesLead{max-width:760px;color:#c8bece;line-height:1.65;font-size:17px;margin:25px 0}
.servicePills{display:flex;gap:8px;flex-wrap:wrap}
.servicePills span{border:1px solid rgba(232,40,255,.42);background:rgba(232,40,255,.07);padding:9px 14px;font-size:12px;font-weight:900;letter-spacing:1px}

.servicesWrap{max-width:1515px;margin:auto;padding:50px 5vw 80px}
.servicesIntro{max-width:1000px;margin-bottom:30px}
.servicesIntro h2,.serviceSystemPanel h2,.howServicesWork h2,.servicesFooterCallout h2{font-size:clamp(34px,4.5vw,62px);line-height:.95;margin:0 0 15px}
.servicesIntro>p:last-child,.systemCopy>p:last-child,.servicesFooterCallout>p:last-child{color:#bfb5c5;line-height:1.65}

.teamGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.teamCard{
  position:relative;overflow:hidden;padding:28px;min-height:510px;
  border:1px solid rgba(220,34,255,.25);
  background:linear-gradient(145deg,rgba(18,13,21,.98),rgba(7,6,9,.98));
}
.teamCard:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#f322ee,#5428ff,#24a8ff)}
.teamNumber{position:absolute;right:20px;top:12px;font-size:72px;font-weight:950;color:rgba(255,255,255,.035)}
.teamBadge{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(235,40,255,.48);color:#ff27ec;font-size:24px;font-weight:950;margin-bottom:24px;background:rgba(229,20,255,.06)}
.teamType{color:#8f8298;font-size:11px;font-weight:900;letter-spacing:2px;margin:0 0 7px}
.teamCard h2{font-size:42px;margin:0 0 8px}
.teamLead{color:#d2c9d5;font-size:16px;line-height:1.45;max-width:620px}
.teamCard ul{padding-left:18px;color:#bdb3c3;line-height:1.5}
.teamCard li{margin:9px 0}
.teamRoster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0 18px}
.teamMember{min-width:0;text-align:center;border:1px solid rgba(235,40,255,.24);background:#050506;padding:12px}
.teamMember img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border:1px solid rgba(235,40,255,.42);margin-bottom:10px;background:#000}
.teamMember strong{display:block;color:#f3eafa;font-size:13px;overflow-wrap:anywhere}
.staffTeamCopy{color:#bdb3c3;line-height:1.55;margin:8px 0 0}
.teamCallout{margin-top:20px;border:1px solid rgba(235,35,255,.25);padding:10px 12px;color:#f17bff;background:rgba(235,35,255,.055);font-size:11px;font-weight:900;letter-spacing:1px}
.priceRows{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}
.priceRows>div{border:1px solid rgba(255,255,255,.1);padding:14px;display:flex;flex-direction:column;gap:5px}
.priceRows span{font-size:11px;color:#a99daf;font-weight:900}
.priceRows strong{font-size:22px;color:#ff29ee}.priceRows small{font-size:10px;color:#aaa}

.serviceSystemPanel{margin-top:42px;border:1px solid rgba(225,31,255,.26);padding:30px;background:radial-gradient(circle at 0 0,rgba(225,30,255,.11),transparent 35%),#0b080d}
.systemFeatures{display:grid;grid-template-columns:repeat(4,1fr);margin-top:25px;border:1px solid rgba(255,255,255,.07)}
.systemFeatures>div{padding:20px;border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:8px}
.systemFeatures>div:last-child{border-right:0}
.systemFeatures b{color:#ff29ee;font-size:12px}
.systemFeatures strong{font-size:14px}
.systemFeatures span{font-size:12px;color:#a99ead;line-height:1.5}

.howServicesWork{padding:55px 0 25px}
.stepsRow{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(225,31,255,.2);margin-top:25px}
.stepsRow>div{padding:24px;border-right:1px solid rgba(225,31,255,.16)}
.stepsRow>div:last-child{border-right:0}
.stepsRow span{color:#ff29ee;font-weight:950;font-size:13px}
.stepsRow h3{font-size:16px;margin:18px 0 8px}
.stepsRow p{font-size:13px;color:#aaa0af;line-height:1.5}

.servicesFooterCallout{text-align:center;margin-top:35px;padding:50px 30px;border:1px solid rgba(225,31,255,.27);background:radial-gradient(circle at 50% 0,rgba(225,31,255,.13),transparent 43%),#0a080c}
.servicesFooterCallout>p:last-child{max-width:800px;margin:0 auto}

@media(max-width:950px){
  .teamGrid{grid-template-columns:1fr}
  .systemFeatures,.stepsRow{grid-template-columns:repeat(2,1fr)}
  .systemFeatures>div:nth-child(2),.stepsRow>div:nth-child(2){border-right:0}
}
@media(max-width:600px){
  .servicesHero{min-height:410px;padding:45px 18px}
  .servicesHero h1{font-size:48px;letter-spacing:-2px}
  .servicesWrap{padding:34px 16px 55px}
  .teamCard{padding:21px;min-height:auto}
  .priceRows{grid-template-columns:1fr}
  .systemFeatures,.stepsRow{grid-template-columns:1fr}
  .systemFeatures>div,.stepsRow>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}
}


/* v0.14.8 — Free service + F7 callout */
.freeService{
  display:inline-block;
  vertical-align:middle;
  margin-left:10px;
  padding:5px 9px;
  border:1px solid #36ff91;
  background:rgba(54,255,145,.08);
  color:#36ff91;
  font-size:12px;
  line-height:1;
  letter-spacing:1.5px;
  font-weight:950;
}
.f7Callout{
  margin-top:22px;
  padding:18px 20px;
  border:1px solid rgba(232,40,255,.48);
  border-left:4px solid #ff27ec;
  background:linear-gradient(90deg,rgba(229,20,255,.12),rgba(40,73,255,.06));
  display:grid;
  grid-template-columns:auto 1fr;
  gap:5px 18px;
  align-items:center;
}
.f7Callout span{
  grid-row:1/3;
  color:#ff29ee;
  font-size:11px;
  font-weight:950;
  letter-spacing:1.5px;
}
.f7Callout strong{font-size:22px;letter-spacing:.5px}
.f7Callout small{color:#bdb3c3;line-height:1.4}
@media(max-width:600px){
  .f7Callout{grid-template-columns:1fr}
  .f7Callout span{grid-row:auto}
  .freeService{font-size:10px}
}


/* v0.14.9 — earned-in-game cosmetic notice */
.earnedInGameNotice{
  max-width:780px;
  margin:20px 0 26px;
  padding:16px 18px;
  border:1px solid rgba(255,38,235,.5);
  border-left:4px solid #ff26eb;
  background:linear-gradient(90deg,rgba(226,22,255,.13),rgba(44,78,255,.07));
}
.earnedInGameNotice strong{
  display:block;
  color:#ff35ef;
  font-size:13px;
  font-weight:950;
  letter-spacing:1.3px;
  margin-bottom:7px;
}
.earnedInGameNotice p{
  margin:0;
  color:#ddd4e2;
  font-size:14px;
  line-height:1.55;
}
.earnedInGameNotice b{color:#fff}

.earnedInGameNotice .donationCosmeticAccess{
  margin:12px 0 0;
  color:#ff35ef;
  font-size:13px;
  font-weight:950;
  line-height:1.45;
  letter-spacing:.45px;
}


/* v0.15.0 — Multi-server live status dashboard */
body:not([data-page="server"]) #serverDashboard{display:none!important}
.serverDashboard{
  max-width:1515px;
  margin:34px auto 26px;
  padding:30px;
  color:#fff;
  border:1px solid rgba(225,31,255,.26);
  background:
    radial-gradient(circle at 8% 0,rgba(226,28,255,.13),transparent 28%),
    radial-gradient(circle at 92% 0,rgba(45,90,255,.12),transparent 28%),
    linear-gradient(145deg,#100a13,#08070a 66%);
}
.serverDashHead{
  display:flex;justify-content:space-between;gap:25px;align-items:flex-end;margin-bottom:23px
}
.serverDashEyebrow{color:#ff26eb;font-size:11px;font-weight:950;letter-spacing:2.4px;margin:0 0 8px}
.serverDashHead h2{font-size:clamp(34px,4.5vw,60px);line-height:.95;margin:0 0 9px}
.serverDashHead p{color:#aaa0b0;margin:0}
.serverDashRefresh{display:flex;align-items:center;gap:12px}
.serverDashRefresh span{color:#887e8d;font-size:10px;font-weight:900;letter-spacing:1.2px}
.serverDashRefresh button,.copyServerAddress{
  border:1px solid rgba(234,38,255,.36);
  background:rgba(234,38,255,.07);
  color:#ef69ff;
  padding:9px 12px;
  font-size:10px;font-weight:950;letter-spacing:1px;cursor:pointer
}
.serverDashRefresh button:hover,.copyServerAddress:hover{background:rgba(234,38,255,.15)}
.serverCardGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.serverLiveCard{
  border:1px solid rgba(255,255,255,.085);
  padding:22px;
  background:linear-gradient(150deg,rgba(19,13,22,.96),rgba(7,6,9,.98));
  position:relative;overflow:hidden
}
.serverLiveCard:before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#ff23e9,#692eff,#2798ff)
}
.serverCardTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}
.serverCardNumber{font-size:10px;color:#786f7d;font-weight:950;letter-spacing:1.5px}
.serverStatus{display:inline-flex;gap:7px;align-items:center;font-size:10px;font-weight:950;letter-spacing:1.2px}
.serverStatus i{width:8px;height:8px;border-radius:50%;background:#ffd84a;box-shadow:0 0 10px currentColor}
.serverStatus.checking{color:#ffd84a}
.serverStatus.online{color:#45ff9c}
.serverStatus.online i{background:#45ff9c}
.serverStatus.offline{color:#ff5d70}
.serverStatus.offline i{background:#ff5d70}
.serverLiveCard h3{font-size:25px;margin:0 0 5px}
.serverAddressText{font-family:monospace;color:#ee72ff;margin:0 0 20px}
.serverLiveStats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.07)}
.serverLiveStats div{padding:15px;border-right:1px solid rgba(255,255,255,.07)}
.serverLiveStats div:last-child{border-right:0}
.serverLiveStats span{display:block;color:#7f7585;font-size:9px;font-weight:950;letter-spacing:1.2px;margin-bottom:7px}
.serverLiveStats strong{font-size:14px;color:#dcd4df;word-break:break-word}
.serverCardActions{margin-top:14px}
.serverStatusNote{font-size:11px;color:#786e7e;line-height:1.5;margin:17px 0 0}
@media(max-width:800px){
  .serverDashHead{flex-direction:column;align-items:flex-start}
  .serverCardGrid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .serverDashboard{margin:22px 16px;padding:19px}
  .serverLiveStats{grid-template-columns:1fr}
  .serverLiveStats div{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}
  .serverLiveStats div:last-child{border-bottom:0}
}


/* v0.15.1 — Most populated server feature */
.featuredServer{
  margin:0 0 16px;
  border:1px solid rgba(255,39,236,.48);
  background:
    radial-gradient(circle at 85% 20%,rgba(39,119,255,.15),transparent 30%),
    linear-gradient(110deg,rgba(225,25,255,.13),rgba(14,9,17,.98) 48%,rgba(7,8,13,.98));
  box-shadow:inset 0 0 35px rgba(218,30,255,.035);
}
.featuredServerLabel{
  padding:9px 16px;
  border-bottom:1px solid rgba(255,39,236,.22);
  color:#ff36ee;
  font-size:10px;font-weight:950;letter-spacing:1.8px;
}
.featuredServerLabel span{margin-right:6px}
.featuredServerBody{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:25px;
  align-items:center;
  padding:20px;
}
.featuredStatus{color:#49ff9e;font-size:10px;font-weight:950;letter-spacing:1.2px}
.featuredServerBody h3{font-size:25px;margin:5px 0 3px}
.featuredServerBody p{margin:0;color:#d66de3;font-family:monospace}
.featuredPlayerCount{min-width:130px}
.featuredPlayerCount span{display:block;color:#817686;font-size:9px;font-weight:950;letter-spacing:1.2px;margin-bottom:5px}
.featuredPlayerCount strong{font-size:27px;color:#ff36ee}
#featuredCopyBtn{
  border:1px solid rgba(234,38,255,.4);
  background:rgba(234,38,255,.08);
  color:#ef69ff;
  padding:10px 13px;
  font-size:10px;font-weight:950;cursor:pointer;
}
@media(max-width:650px){
  .featuredServerBody{grid-template-columns:1fr}
  .featuredPlayerCount{min-width:0}
  #featuredCopyBtn{width:max-content}
}


/* v0.15.2 — Hero status now represents the busiest live server */
.heroBusiestServer{
  color:#c46ad0;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
  margin-top:4px;
  margin-bottom:8px;
}
#heroServerStatus.heroOnline{color:#45ff9c!important}
#heroServerStatus.heroOffline{color:#ff6070!important}


/* v0.16.0 — Community Gallery */
body:not([data-page="gallery"]) #galleryPage{display:none!important}
body[data-page="gallery"] .hero,
body[data-page="gallery"] .tiles,
body[data-page="gallery"] main#store,
body[data-page="gallery"] #orders,
body[data-page="gallery"] #staff,
body[data-page="gallery"] #owner,
body[data-page="gallery"] #pageAccess,
body[data-page="gallery"] #serverSystems,
body[data-page="gallery"] #serverDashboard,
body[data-page="gallery"] #servicesPage,
body[data-page="gallery"] #infoPage{display:none!important}
body[data-page="gallery"] #galleryPage{display:block!important}

.galleryPage{min-height:100vh;background:#060507;color:#fff}
.galleryHero{
  min-height:470px;
  display:flex;align-items:center;
  padding:60px 5vw;
  position:relative;overflow:hidden;
  border-bottom:1px solid rgba(233,31,255,.3);
  background:
    linear-gradient(90deg,rgba(5,4,7,.97),rgba(8,5,12,.78) 55%,rgba(5,8,15,.88)),
    radial-gradient(circle at 75% 30%,rgba(217,26,255,.22),transparent 27%),
    radial-gradient(circle at 86% 70%,rgba(40,94,255,.18),transparent 28%),
    linear-gradient(145deg,#09060d,#19051f 55%,#07101d);
}
.galleryHero:after{
  content:"GALLERY";
  position:absolute;right:-30px;bottom:-45px;
  font-size:clamp(110px,18vw,285px);
  font-weight:950;letter-spacing:-12px;
  color:rgba(255,255,255,.025);
  pointer-events:none
}
.galleryHeroInner{max-width:920px;position:relative;z-index:1}
.galleryEyebrow{color:#ff25eb;font-size:11px;font-weight:950;letter-spacing:2.6px;margin:0 0 10px}
.galleryHero h1{
  margin:0;
  font-size:clamp(58px,8vw,112px);
  line-height:.86;
  letter-spacing:-5px;
  text-transform:uppercase
}
.galleryHero h1 span{color:#ff2aee}
.galleryHeroInner>p:not(.galleryEyebrow){max-width:760px;color:#c5bac9;font-size:16px;line-height:1.65;margin:24px 0}
.galleryHeroStats{display:flex;gap:10px;flex-wrap:wrap}
.galleryHeroStats div{
  min-width:150px;
  padding:13px 15px;
  border:1px solid rgba(234,36,255,.25);
  background:rgba(10,7,12,.55)
}
.galleryHeroStats strong{display:block;color:#ff35ef;font-size:18px}
.galleryHeroStats span{display:block;color:#897d8f;font-size:9px;font-weight:950;letter-spacing:1.1px;margin-top:4px}

.galleryWrap{max-width:1515px;margin:0 auto;padding:46px 5vw 80px}
.galleryRules{
  border:1px solid rgba(234,36,255,.25);
  background:linear-gradient(145deg,rgba(17,12,20,.97),rgba(8,7,10,.98));
  padding:28px;
  margin-bottom:20px
}
.galleryRulesTitle h2,.galleryUploadPanel h2,.galleryWallHead h2{
  font-size:clamp(30px,4vw,52px);line-height:.95;margin:0
}
.galleryRuleGrid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid rgba(255,255,255,.07)
}
.galleryRuleGrid>div{padding:18px;border-right:1px solid rgba(255,255,255,.07)}
.galleryRuleGrid>div:last-child{border-right:0}
.galleryRuleGrid b{display:block;color:#ff2eed;font-size:11px;margin-bottom:13px}
.galleryRuleGrid strong{display:block;font-size:13px;margin-bottom:7px}
.galleryRuleGrid span{color:#a99eae;font-size:12px;line-height:1.5}

.galleryUploadPanel{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:30px;
  padding:28px;
  margin-bottom:35px;
  border:1px solid rgba(45,108,255,.2);
  background:
    radial-gradient(circle at 0 0,rgba(222,28,255,.09),transparent 34%),
    linear-gradient(145deg,#0d0a10,#08070a)
}
.galleryUploadPanel>div>p:last-child{color:#aa9fae;line-height:1.6}
.galleryUploadForm{display:grid;gap:13px}
.galleryUploadForm label>span{display:block;font-size:10px;font-weight:950;letter-spacing:1.2px;color:#a99ead;margin-bottom:7px}
.galleryUploadForm input[type="text"],
.galleryUploadForm input:not([type]){
  width:100%;box-sizing:border-box
}
#galleryCaption{
  width:100%;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.12);
  background:#0c0910;color:#fff;
  padding:12px 13px;outline:none
}
#galleryCaption:focus{border-color:rgba(232,37,255,.5)}
.galleryFileDrop{
  padding:17px;
  border:1px dashed rgba(232,37,255,.38);
  background:rgba(232,37,255,.045);
  cursor:pointer
}
.galleryFileDrop input{display:none}
.galleryFileDrop>span{color:#f06cff!important;font-size:13px!important;margin-bottom:5px!important}
.galleryFileDrop small{color:#8d818f}
.galleryRulesCheck{display:flex!important;gap:9px;align-items:flex-start}
.galleryRulesCheck input{margin-top:3px}
.galleryRulesCheck span{font-size:11px!important;line-height:1.45!important;color:#b4a9b8!important;margin:0!important}
.galleryUploadBtn,#galleryRefreshBtn,.galleryDeleteBtn{
  border:1px solid rgba(234,37,255,.4);
  background:rgba(234,37,255,.08);
  color:#ef6cff;
  padding:11px 14px;
  font-size:10px;font-weight:950;letter-spacing:1px;
  cursor:pointer
}
.galleryUploadBtn:hover,#galleryRefreshBtn:hover,.galleryDeleteBtn:hover{background:rgba(234,37,255,.16)}
.galleryUploadBtn:disabled{opacity:.45;cursor:not-allowed}
.galleryUploadMessage{min-height:16px;font-size:11px;color:#bcb2c1}
.galleryUploadMessage.error{color:#ff6b78}
.galleryUploadMessage.success{color:#49ff9d}

.galleryWallHead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}
.galleryGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.galleryCard{
  border:1px solid rgba(255,255,255,.08);
  background:#0c090e;
  overflow:hidden;
  position:relative
}
.galleryImageBtn{
  display:block;width:100%;
  padding:0;border:0;background:#050406;
  cursor:zoom-in;
  aspect-ratio:4/3;
  overflow:hidden
}
.galleryImageBtn img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.galleryImageBtn:hover img{transform:scale(1.025)}
.galleryCardInfo{padding:13px}
.galleryCardCaption{display:block;font-size:13px;line-height:1.4;color:#e5dce8;min-height:18px}
.galleryCardMeta{display:flex;justify-content:space-between;gap:8px;margin-top:9px;color:#817684;font-size:9px}
.galleryCardStaff{display:flex;justify-content:flex-end;padding:0 13px 13px}
.galleryDeleteBtn{color:#ff7584;border-color:rgba(255,78,95,.32);background:rgba(255,78,95,.05)}
.galleryEmpty{
  border:1px dashed rgba(255,255,255,.12);
  padding:45px 20px;
  text-align:center;
  color:#867b89
}
.galleryEmpty strong{display:block;color:#b7acbb;margin-bottom:6px}
.galleryEmpty span{font-size:12px}
.galleryEmpty[hidden]{display:none!important}

.galleryLightbox{
  position:fixed;inset:0;z-index:9999;
  background:rgba(2,2,3,.94);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:35px;box-sizing:border-box
}
.galleryLightbox[hidden]{display:none!important}
.galleryLightbox img{max-width:min(1200px,92vw);max-height:78vh;object-fit:contain}
.galleryLightboxClose{
  position:absolute;top:18px;right:22px;
  width:42px;height:42px;border:1px solid rgba(255,255,255,.18);
  background:#0c0910;color:#fff;font-size:28px;cursor:pointer
}
.galleryLightboxText{width:min(1200px,92vw);padding-top:12px}
.galleryLightboxText strong{display:block;font-size:14px}
.galleryLightboxText span{display:block;color:#8f8494;font-size:10px;margin-top:5px}

@media(max-width:1050px){
  .galleryRuleGrid{grid-template-columns:repeat(2,1fr)}
  .galleryRuleGrid>div:nth-child(2){border-right:0}
  .galleryGrid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:800px){
  .galleryUploadPanel{grid-template-columns:1fr}
  .galleryGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .galleryHero{min-height:390px;padding:44px 18px}
  .galleryHero h1{font-size:55px;letter-spacing:-3px}
  .galleryWrap{padding:30px 16px 55px}
  .galleryRules,.galleryUploadPanel{padding:20px}
  .galleryRuleGrid{grid-template-columns:1fr}
  .galleryRuleGrid>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}
  .galleryRuleGrid>div:last-child{border-bottom:0}
  .galleryGrid{grid-template-columns:1fr}
  .galleryHeroStats div{min-width:calc(50% - 6px);box-sizing:border-box}
}


/* v0.16.3 — Owner real test-order tool */
.ownerTestOrder{
  margin:18px 0 22px;
  padding:20px;
  border:1px solid rgba(225,31,255,.26);
  background:linear-gradient(145deg,rgba(221,30,255,.07),rgba(8,7,10,.98));
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
}
.ownerTestOrder p{
  margin:0 0 4px;
  color:#ff2beb;
  font-size:10px;
  font-weight:950;
  letter-spacing:1.4px;
}
.ownerTestOrder h3{margin:0 0 6px;font-size:20px}
.ownerTestOrder small{color:#968b9b;line-height:1.45}
.ownerTestOrderControls{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.ownerTestOrderControls select{
  min-width:220px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.13);
  background:#0d0910;
  color:#fff;
}
#testOrderMsg{grid-column:1/-1;min-height:15px}
#testOrderMsg.ok{color:#45ff9a}
#testOrderMsg.err{color:#ff6b78}
@media(max-width:800px){
  .ownerTestOrder{grid-template-columns:1fr}
  .ownerTestOrderControls{align-items:stretch}
  .ownerTestOrderControls select,.ownerTestOrderControls .btn{width:100%}
}

/* v0.16.5 - front-page Discord CTA */
.heroActions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.heroActions .btn{min-width:145px;text-align:center}
.discordBtn{background:linear-gradient(90deg,#3f47a8,#7254dc);border-color:#8c79ff;box-shadow:0 0 18px #6f57ff33}
.discordBtn:hover{filter:brightness(1.12);box-shadow:0 0 24px #8a6cff66}
@media(max-width:600px){.heroActions{align-items:stretch}.heroActions .btn{width:100%;max-width:230px}}

@media(max-width:600px){.teamRoster{grid-template-columns:1fr}.teamMember img{max-width:220px;margin:0 auto 10px}}


/* v0.16.8 — BrokeVibez staff category + owner/founder */
.staffCategorySection{margin-top:42px}
.staffCategoryHead{max-width:1050px;margin:0 0 24px}
.staffCategoryHead h2{font-size:clamp(34px,4.5vw,62px);line-height:.95;margin:0 0 14px}
.staffCategoryHead>p:last-child{color:#bfb5c5;line-height:1.65;margin:0}
.staffTeamsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.staffTeamsGrid .teamCard{min-height:560px;background:#070708}
.founderCard{margin-top:16px;display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:30px;align-items:stretch;border:1px solid rgba(220,34,255,.30);background:#050506;position:relative;overflow:hidden;padding:28px}
.founderCard:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#2588ff,#6628ff,#f322ee)}
.founderImageWrap{background:#000;border:1px solid rgba(66,132,255,.42);padding:10px}
.founderImageWrap img{display:block;width:100%;height:100%;max-height:430px;object-fit:cover;background:#000}
.founderContent{display:flex;flex-direction:column;justify-content:center;min-width:0}
.founderContent h2{font-size:clamp(46px,6vw,82px);line-height:.88;margin:4px 0 8px}
.founderRole{color:#39a0ff;font-size:13px;font-weight:950;letter-spacing:2px;margin:0 0 22px}
.ownerMessage{border:1px solid rgba(232,40,255,.30);border-left:4px solid #2e8dff;background:linear-gradient(90deg,rgba(26,96,255,.08),rgba(225,20,255,.07));padding:20px}
.ownerMessage span{display:block;color:#ff29ee;font-size:11px;font-weight:950;letter-spacing:1.7px;margin-bottom:10px}
.ownerMessage p{color:#d8cedc;line-height:1.7;font-size:15px;margin:0 0 12px}
.ownerMessage strong{color:#fff;font-size:13px;letter-spacing:.7px}
@media(max-width:950px){.staffTeamsGrid{grid-template-columns:1fr}.founderCard{grid-template-columns:1fr}.founderImageWrap img{max-height:560px;object-fit:contain}}
@media(max-width:600px){.founderCard{padding:20px;gap:20px}.staffCategorySection{margin-top:34px}.staffTeamsGrid .teamCard{min-height:auto}}

/* v0.17.1 — show the full height of the front-page banner below the sticky navigation */
body[data-page="server"] .hero{
  height:clamp(520px,40vw,760px);
  background:#000;
}
body[data-page="server"] .hero>.heroBanner{
  object-fit:cover;
  object-position:center top;
}
@media(max-width:950px){
  body[data-page="server"] .hero{height:clamp(560px,62vw,760px)}
}
@media(max-width:600px){
  body[data-page="server"] .hero{height:620px}
  body[data-page="server"] .hero>.heroBanner{object-position:center top}
}

/* v0.17.2: compact hero banner + centered neon CTA buttons */
body[data-page="server"] .hero{
  height:clamp(330px,31vw,500px)!important;
  min-height:330px;
  background:#000;
}
body[data-page="server"] .hero>.heroBanner{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center!important;
  filter:brightness(.78) saturate(1.12) contrast(1.03);
}
body[data-page="server"] .hero>.cover{
  background:linear-gradient(0deg,rgba(6,5,8,.80) 0%,rgba(6,5,8,0) 28%),
             linear-gradient(90deg,rgba(0,0,0,.22),transparent 26%,transparent 74%,rgba(0,0,0,.22));
  pointer-events:none;
}
body[data-page="server"] .heroCtas{
  left:50%!important;
  top:auto!important;
  bottom:10.5%;
  transform:translateX(-50%);
  width:min(620px,80vw);
  z-index:4;
}
body[data-page="server"] .heroCtas .heroActions{
  justify-content:center;
  gap:24px;
  flex-wrap:nowrap;
}
body[data-page="server"] .heroCtas .btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-width:230px;
  min-height:58px;
  padding:13px 24px;
  border:2px solid #ef20ff;
  background:linear-gradient(180deg,rgba(15,8,20,.97),rgba(4,3,7,.98));
  color:#fff;
  font-weight:900;
  font-size:17px;
  letter-spacing:.5px;
  text-shadow:0 0 9px rgba(255,255,255,.18);
  box-shadow:0 0 0 3px rgba(210,0,255,.11),0 0 20px rgba(226,0,255,.75),inset 0 0 18px rgba(199,0,255,.14);
  clip-path:polygon(4% 0,96% 0,100% 18%,97% 82%,91% 100%,8% 100%,0 82%,3% 17%);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,border-color .18s ease;
}
body[data-page="server"] .heroCtas .btn::before,
body[data-page="server"] .heroCtas .btn::after{
  content:"";
  position:absolute;
  pointer-events:none;
  background:#ed20ff;
  box-shadow:0 0 12px #ed20ff;
}
body[data-page="server"] .heroCtas .btn::before{left:-8px;right:-8px;height:2px;top:4px}
body[data-page="server"] .heroCtas .btn::after{left:-5px;right:-5px;height:2px;bottom:4px}
body[data-page="server"] .heroCtas .btn:hover{
  transform:translateY(-3px) scale(1.025);
  border-color:#ff5cff;
  filter:brightness(1.17);
  box-shadow:0 0 0 4px rgba(236,32,255,.22),0 0 18px rgba(255,52,255,.95),0 0 40px rgba(174,0,255,.9),inset 0 0 26px rgba(214,0,255,.28);
}
body[data-page="server"] .heroBtnIcon{
  color:#f026ff;
  font-size:22px;
  line-height:1;
  filter:drop-shadow(0 0 8px rgba(240,38,255,.95));
}
body[data-page="server"] .heroDiscordBtn .heroBtnIcon{font-size:20px}
@media(max-width:950px){
  body[data-page="server"] .hero{height:clamp(360px,58vw,520px)!important;min-height:360px}
  body[data-page="server"] .heroCtas{bottom:9%;width:92vw}
  body[data-page="server"] .heroCtas .btn{min-width:190px;min-height:52px;font-size:15px}
}
@media(max-width:600px){
  body[data-page="server"] .hero{height:410px!important;min-height:410px}
  body[data-page="server"] .heroCtas{bottom:7%;width:90vw}
  body[data-page="server"] .heroCtas .heroActions{gap:10px;align-items:center}
  body[data-page="server"] .heroCtas .btn{width:50%;min-width:0;max-width:none;padding:11px 9px;font-size:12px;min-height:48px}
  body[data-page="server"] .heroBtnIcon{font-size:18px}
}


/* v0.17.3: user-supplied video banner + solid reliable CTA buttons */
body[data-page="server"] .hero{
  height:clamp(330px,31vw,500px)!important;
  min-height:330px;
  background:#000;
}
body[data-page="server"] .hero>.heroBanner{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center!important;
  background:#000;
  filter:brightness(.82) saturate(1.08) contrast(1.02);
}
body[data-page="server"] .heroCtas{
  left:50%!important;
  top:auto!important;
  bottom:8%!important;
  transform:translateX(-50%);
  width:min(620px,82vw);
  z-index:5;
}
body[data-page="server"] .heroCtas .heroActions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  flex-wrap:nowrap;
}
body[data-page="server"] .heroCtas .btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:240px;
  min-width:240px;
  min-height:58px;
  padding:13px 22px;
  border:2px solid #ef20ff;
  border-radius:2px;
  background:#100914!important;
  background-image:linear-gradient(180deg,#1c0d24 0%,#0b0710 100%)!important;
  clip-path:none!important;
  overflow:hidden;
  color:#fff;
  font-weight:900;
  font-size:17px;
  letter-spacing:.6px;
  text-shadow:0 1px 2px #000;
  box-shadow:0 0 16px rgba(238,32,255,.65),inset 0 0 18px rgba(180,0,220,.18);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
body[data-page="server"] .heroCtas .btn::before,
body[data-page="server"] .heroCtas .btn::after{display:none!important;content:none!important}
body[data-page="server"] .heroCtas .btn:hover{
  transform:translateY(-2px);
  border-color:#ff62ff;
  background:#190b20!important;
  background-image:linear-gradient(180deg,#281034 0%,#0e0713 100%)!important;
  box-shadow:0 0 14px #ef20ff,0 0 32px rgba(214,0,255,.9),inset 0 0 22px rgba(221,31,255,.25);
}
@media(max-width:600px){
  body[data-page="server"] .heroCtas{width:94vw;bottom:5%!important}
  body[data-page="server"] .heroCtas .heroActions{gap:10px}
  body[data-page="server"] .heroCtas .btn{width:50%;min-width:0;min-height:48px;padding:10px 8px;font-size:12px}
}

/* v0.17.4 - expanded homepage highlights + cosmetic notice */
.homeHighlights{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px 3vw 10px}
.homeHighlights .homeHighlightCard{border:1px solid #6b1d78;background:linear-gradient(145deg,#100c13,#08070a);padding:22px;color:#eee7f2;min-height:300px;display:flex;flex-direction:column;box-shadow:inset 0 1px 0 #e129ff22}
.homeHighlightTitle{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.homeHighlightTitle .homeHighlightIcon{font-size:27px;line-height:1;padding-top:2px}
.homeHighlightTitle b{display:block;margin:0;font-size:20px;color:#fff;line-height:1.1}
.homeHighlightTitle b em{font-style:normal;color:#ec2dff}
.homeHighlightTitle small{display:block;margin:6px 0 0;color:#d4c8d8;font-size:12px;text-transform:uppercase;letter-spacing:.7px}
.homeHighlights .homeHighlightCard p{margin:8px 0;color:#d3c8d8;font-size:14px;line-height:1.5}
.homeHighlights .homeHighlightCard ul{margin:8px 0 16px;padding-left:20px;color:#d3c8d8;font-size:13px;line-height:1.65}
.homeHighlights .homeHighlightCard li::marker{color:#ec2dff}
.homeLearnMore{margin-top:auto;align-self:flex-start;border:1px solid #ec2dff;background:#120b16;padding:10px 16px;color:#fff;font-size:12px;font-weight:800;letter-spacing:.5px;box-shadow:0 0 0 1px #65116f inset;transition:.18s ease}
.homeLearnMore:hover{background:#240c2b;box-shadow:0 0 14px #e629ff88,0 0 0 1px #ec2dff inset;transform:translateY(-1px)}
.homeLegalNotice{margin:4px 3vw 22px;border:1px solid #ec2dff;background:linear-gradient(90deg,#150918,#09070c);padding:16px 20px;display:grid;grid-template-columns:48px minmax(280px,.85fr) 1.55fr;align-items:center;gap:18px;box-shadow:inset 4px 0 0 #ec2dff}
.homeLegalBadge{width:42px;height:42px;border:3px solid #ec2dff;display:grid;place-items:center;color:#ec2dff;font-weight:900;font-size:24px;transform:rotate(45deg);border-radius:6px}.homeLegalBadge::first-letter{transform:rotate(-45deg)}
.homeLegalTitle{font-weight:900;font-size:18px;color:#fff;letter-spacing:.4px}.homeLegalTitle span{color:#ec2dff}
.homeLegalNotice p{margin:0;color:#e0d6e4;font-size:14px;line-height:1.45;border-left:1px solid #8f318f;padding-left:18px}
@media(max-width:1050px){.homeHighlights{grid-template-columns:1fr}.homeHighlights .homeHighlightCard{min-height:0}.homeLegalNotice{grid-template-columns:44px 1fr}.homeLegalNotice p{grid-column:1/-1;border-left:0;border-top:1px solid #6b1d78;padding:12px 0 0}}
@media(max-width:600px){.homeHighlights{padding-left:18px;padding-right:18px}.homeLegalNotice{margin-left:18px;margin-right:18px;grid-template-columns:38px 1fr;padding:14px}.homeLegalTitle{font-size:15px}.homeLegalNotice p{font-size:13px}.homeHighlightTitle b{font-size:18px}}


/* v0.17.5 — exact donation cosmetic availability notice on every page */
.siteLegalExact{display:block;margin-top:9px;color:#ff39f6;font-weight:900;letter-spacing:.35px;font-size:12px;line-height:1.35}
.sitewideLegalNotice{margin:28px auto 34px;width:min(94vw,1500px);box-sizing:border-box;border:1px solid #d72be9;border-left:4px solid #f22cff;background:linear-gradient(90deg,#140817,#09070c);padding:15px 18px;text-align:center;color:#ff39f6;font-size:13px;line-height:1.45;letter-spacing:.45px;box-shadow:0 0 22px rgba(215,43,233,.10)}
.sitewideLegalNotice strong{font-weight:900}
body[data-page="server"] .sitewideLegalNotice,
body[data-page="info"] .sitewideLegalNotice{display:none!important}
@media(max-width:650px){.sitewideLegalNotice{width:calc(100% - 36px);margin:20px 18px 26px;padding:13px 12px;font-size:11px}.siteLegalExact{font-size:11px}}
\n\n/* v0.17.6 — Store ordering instructions */\n.storeHowTo{\n  max-width:1460px;\n  margin:0 auto 42px;\n  padding:30px;\n  border:1px solid rgba(245,27,255,.35);\n  border-top:3px solid #f51bff;\n  background:linear-gradient(145deg,rgba(17,11,20,.98),rgba(7,7,11,.98));\n  box-shadow:0 18px 50px rgba(0,0,0,.28);\n}\n.storeHowToHead p{margin:0 0 8px;color:#f51bff;font-weight:900;letter-spacing:.16em;font-size:.76rem}\n.storeHowToHead h2{margin:0 0 8px;font-size:clamp(1.65rem,2.4vw,2.7rem);line-height:1}\n.storeHowToHead small{color:#c8bfd1;font-size:.98rem}\n.storeSteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}\n.storeStep{position:relative;min-height:190px;padding:22px 20px 20px;border:1px solid rgba(245,27,255,.24);background:rgba(10,8,13,.88);overflow:hidden}\n.storeStep>span{position:absolute;right:14px;top:4px;font-size:3.6rem;font-weight:950;color:rgba(255,255,255,.035);line-height:1}\n.storeStep h3{margin:0 0 11px;color:#fff;font-size:1rem;letter-spacing:.04em}\n.storeStep h3:before{content:'✦';color:#f51bff;margin-right:9px}\n.storeStep p{margin:0;color:#cfc7d6;line-height:1.58;font-size:.92rem}\n.storeStep strong{color:#fff}\n.storeWorkflowNote{margin-top:16px;padding:18px 20px;border:1px solid rgba(245,27,255,.45);background:linear-gradient(90deg,rgba(245,27,255,.08),rgba(61,50,255,.05))}\n.storeWorkflowNote>div{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:10px}\n.storeWorkflowNote strong{color:#f51bff;font-size:.76rem;letter-spacing:.14em}\n.storeWorkflowNote span{font-weight:800;font-size:.82rem;letter-spacing:.035em;color:#fff}\n.storeWorkflowNote p{margin:0 0 10px;color:#ddd4e3;line-height:1.5}\n.storeWorkflowNote b{display:block;color:#f51bff;font-size:.82rem;letter-spacing:.045em}\n@media(max-width:980px){.storeSteps{grid-template-columns:repeat(2,minmax(0,1fr))}}\n@media(max-width:640px){.storeHowTo{padding:20px 15px;margin-bottom:28px}.storeSteps{grid-template-columns:1fr}.storeStep{min-height:auto}.storeWorkflowNote{padding:15px}}\n
/* v0.17.7 — polished store order guide */
.storeHowTo{
  max-width:1540px;
  margin:0 auto 42px;
  padding:24px 22px 22px;
  border:1px solid rgba(245,27,255,.36);
  border-top:3px solid #f51bff;
  background:linear-gradient(145deg,#0d0a10,#070609);
  box-shadow:0 18px 55px rgba(0,0,0,.34),inset 0 0 45px rgba(208,0,255,.025)
}
.storeHowToHead{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:18px}
.storeHowToHead p{margin:0 0 7px;color:#f51bff;font-weight:900;letter-spacing:.18em;font-size:.72rem}
.storeHowToHead h2{margin:0 0 7px;font-size:clamp(1.65rem,2.1vw,2.45rem);line-height:1;text-transform:uppercase}
.storeHowToHead h2 span{color:#f51bff}
.storeHowToHead small{color:#c9bfd0;font-size:.9rem}
.storeHowToHead>strong{color:#f51bff;font-size:.86rem;letter-spacing:.08em;font-style:italic;white-space:nowrap}
.storeSteps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.storeStep{position:relative;min-height:270px;padding:48px 14px 16px;border:1px solid rgba(245,27,255,.34);background:linear-gradient(180deg,rgba(25,15,30,.94),rgba(8,7,10,.96));overflow:hidden}
.storeStep:after{content:'';position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,#f51bff,transparent);opacity:.55}
.storeStep .stepNo{position:absolute;left:10px;top:9px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid #f51bff;background:#7d138f;color:#fff;font-weight:900;font-size:.82rem;box-shadow:0 0 16px rgba(245,27,255,.28)}
.storeStep .stepIcon{height:42px;display:grid;place-items:center;color:#f51bff;font-size:2rem;margin-bottom:8px;text-shadow:0 0 18px rgba(245,27,255,.5)}
.storeStep h3{margin:0 0 11px;text-align:center;color:#fff;font-size:.84rem;letter-spacing:.03em;line-height:1.2}
.storeStep h3:before{content:none}
.storeStep p{margin:0;color:#cec5d4;line-height:1.5;font-size:.79rem;text-align:left}
.storeStep strong{color:#fff}
.storeOrderFlow{display:grid;grid-template-columns:280px 1fr;align-items:center;gap:18px;margin-top:14px;padding:13px 16px;border:1px solid rgba(245,27,255,.38);background:#0b080d}
.flowTitle{display:flex;align-items:center;gap:13px;border-right:1px solid rgba(245,27,255,.48);padding-right:16px}
.flowTitle>span{font-size:1.7rem}.flowTitle strong{display:block;color:#f51bff;letter-spacing:.08em}.flowTitle small{display:block;color:#bfb4c6;margin-top:3px;font-size:.76rem}
.flowSteps{text-align:center;font-weight:800;font-size:.75rem;letter-spacing:.025em;color:#eee7f2;line-height:1.6}.flowSteps b{color:#8d7e95;margin:0 7px}.flowSteps em{color:#f51bff;font-style:normal}
.storeLegalNotice{display:grid;grid-template-columns:52px minmax(280px,1fr) 1.45fr;gap:18px;align-items:center;margin-top:14px;padding:14px 18px;border:1px solid rgba(245,27,255,.58);background:linear-gradient(90deg,rgba(245,27,255,.08),rgba(31,15,37,.35),rgba(6,6,9,.95));box-shadow:0 0 30px rgba(245,27,255,.05)}
.legalIcon{width:42px;height:42px;display:grid;place-items:center;border:3px solid #f51bff;color:#f51bff;font-weight:900;font-size:1.5rem;clip-path:polygon(50% 0,100% 100%,0 100%)}
.legalTitle{font-weight:950;color:#f51bff;font-size:1rem;line-height:1.2;text-transform:uppercase;border-right:1px solid rgba(245,27,255,.42);padding-right:18px}.legalTitle span{color:#fff}
.legalCopy{color:#d8cfde;font-size:.82rem;line-height:1.45}.legalCopy strong{color:#f51bff}
@media(max-width:1280px){.storeSteps{grid-template-columns:repeat(4,minmax(0,1fr))}.storeStep{min-height:220px}.storeOrderFlow{grid-template-columns:1fr}.flowTitle{border-right:0;border-bottom:1px solid rgba(245,27,255,.28);padding:0 0 10px}}
@media(max-width:820px){.storeHowToHead{display:block}.storeHowToHead>strong{display:block;margin-top:10px}.storeSteps{grid-template-columns:repeat(2,minmax(0,1fr))}.storeLegalNotice{grid-template-columns:44px 1fr}.legalTitle{border-right:0}.legalCopy{grid-column:1/-1}}
@media(max-width:520px){.storeHowTo{padding:18px 12px}.storeSteps{grid-template-columns:1fr}.storeStep{min-height:auto}.storeLegalNotice{grid-template-columns:1fr}.legalIcon{display:none}.legalCopy{grid-column:auto}.flowSteps{text-align:left}.flowSteps b{margin:0 3px}}