/* ════════════════════════════════════════════

   VK COLLECTION GRID — ULTRA PREMIUM v2

   ════════════════════════════════════════════ */



.vk-grid{

  --lime:#AAFF00;--lime06:rgba(170,255,0,0.06);--lime08:rgba(170,255,0,0.08);

  --lime12:rgba(170,255,0,0.12);--lime15:rgba(170,255,0,0.15);--lime25:rgba(170,255,0,0.25);

  --bg:#000;--b1:#161616;--b2:#1a1a1a;--b3:#111;

  --w02:rgba(255,255,255,0.02);--w03:rgba(255,255,255,0.03);--w04:rgba(255,255,255,0.04);

  --g1:#999;--g2:#777;--g3:#555;--g4:#444;--g5:#333;

  --r:12px;--ease:cubic-bezier(0.22,1,0.36,1);--easeBounce:cubic-bezier(0.25,0.46,0.45,0.94);

}



.vk-grid{

  position:relative;background:var(--bg);

  padding:0 0 64px;overflow:hidden;

  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  -webkit-font-smoothing:antialiased;color:#fff;

}

.vk-grid *,.vk-grid *::before,.vk-grid *::after{box-sizing:border-box;}



/* ── Ambient ── */

.vk-grid__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}

.vk-grid__orb{

  position:absolute;border-radius:50%;filter:blur(120px);opacity:0;

  width:500px;height:500px;top:30%;right:-120px;

  background:radial-gradient(circle,rgba(170,255,0,0.05) 0%,transparent 70%);

  animation:vkGorb 14s ease-in-out infinite 2s;

}

@keyframes vkGorb{0%,100%{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}



.vk-grid__noise{

  position:absolute;inset:0;z-index:1;opacity:0.02;pointer-events:none;

  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");

  background-repeat:repeat;background-size:200px 200px;

}



/* ── Inner ── */

.vk-grid__inner{

  max-width:1200px;margin:0 auto;padding:0 24px;

  position:relative;z-index:3;

}



/* ═══════════════════════════════════

   TOOLBAR — COUNT + SORT + FILTERS

   ═══════════════════════════════════ */

.vk-grid__bar{

  display:flex;flex-direction:column;gap:16px;

  padding:20px 0 24px;

  border-bottom:1px solid var(--b2);margin-bottom:24px;

}

.vk-grid__bar-top{

  display:flex;align-items:center;justify-content:space-between;gap:12px;

}

.vk-grid__count{

  font-size:11px;font-weight:600;color:var(--g3);letter-spacing:.04em;

}

.vk-grid__count strong{color:var(--lime);font-weight:800;}



/* ── Sort Dropdown ── */

.vk-grid__sort{position:relative;}

.vk-grid__sort-btn{

  display:flex;align-items:center;gap:8px;

  padding:9px 16px;

  background:linear-gradient(145deg,rgba(170,255,0,.03),var(--w02));

  border:1px solid rgba(170,255,0,.08);border-radius:8px;

  font-family:'Inter',sans-serif;font-size:10px;font-weight:700;

  color:var(--g1);letter-spacing:.06em;text-transform:uppercase;

  cursor:pointer;transition:all .25s var(--ease);

  -webkit-appearance:none;appearance:none;

}

.vk-grid__sort-btn:hover{

  border-color:var(--lime25);color:var(--lime);

  background:linear-gradient(145deg,rgba(170,255,0,.06),var(--w03));

}

.vk-grid__sort-btn svg{flex-shrink:0;transition:transform .2s ease;}

.vk-grid__sort.is-open .vk-grid__sort-btn svg{transform:rotate(180deg);}

.vk-grid__sort.is-open .vk-grid__sort-btn{

  border-color:var(--lime25);color:var(--lime);

}



.vk-grid__sort-drop{

  position:absolute;top:calc(100% + 6px);right:0;

  min-width:200px;z-index:20;

  background:#0A0A0A;border:1px solid rgba(170,255,0,.1);

  border-radius:10px;padding:6px;

  opacity:0;visibility:hidden;transform:translateY(-6px);

  transition:all .2s var(--ease);

  box-shadow:0 12px 40px rgba(0,0,0,.6);

  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);

}

.vk-grid__sort.is-open .vk-grid__sort-drop{

  opacity:1;visibility:visible;transform:translateY(0);

}

.vk-grid__sort-opt{

  display:block;width:100%;padding:10px 14px;

  background:transparent;border:none;border-radius:6px;

  font-family:'Inter',sans-serif;font-size:11px;font-weight:600;

  color:var(--g1);text-align:left;cursor:pointer;

  transition:all .15s ease;

}

.vk-grid__sort-opt:hover{

  background:rgba(170,255,0,.06);color:#fff;

}

.vk-grid__sort-opt.is-active{

  color:var(--lime);background:rgba(170,255,0,.08);

}



/* ── Tag Filters ── */

.vk-grid__tags{

  display:flex;align-items:center;gap:8px;

  overflow-x:auto;overflow-y:hidden;

  -webkit-overflow-scrolling:touch;

  scrollbar-width:none;padding:2px 0;

  mask-image:linear-gradient(90deg,#000 92%,transparent);

  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);

}

.vk-grid__tags::-webkit-scrollbar{display:none;}



.vk-grid__tag{

  display:inline-flex;align-items:center;gap:5px;

  padding:7px 16px;white-space:nowrap;

  background:linear-gradient(145deg,rgba(170,255,0,.02),var(--w02));

  border:1px solid rgba(170,255,0,.06);border-radius:20px;

  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;

  color:var(--g2);text-decoration:none;

  transition:all .25s var(--ease);cursor:pointer;flex-shrink:0;

}

.vk-grid__tag:hover{

  border-color:var(--lime25);color:#fff;

  background:linear-gradient(145deg,rgba(170,255,0,.06),var(--w03));

}

.vk-grid__tag.is-active{

  background:var(--lime);border-color:var(--lime);

  color:#000;font-weight:800;

  box-shadow:0 0 12px rgba(170,255,0,.2);

}

.vk-grid__tag.is-active:hover{

  background:#CCFF44;border-color:#CCFF44;

}

.vk-grid__tag-icon{display:flex;align-items:center;}



/* ═══════════════════════════════════

   PRODUCT GRID

   ═══════════════════════════════════ */

.vk-grid__products{

  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;

}



/* ═══════════════════════════════════

   PRODUCT CARD

   ═══════════════════════════════════ */

.vk-gc{

  background:linear-gradient(145deg,rgba(170,255,0,.02),var(--w02) 50%,rgba(170,255,0,.01));

  border:1px solid rgba(170,255,0,.05);

  border-radius:var(--r);overflow:hidden;

  display:flex;flex-direction:column;

  transition:all .35s var(--easeBounce);

  position:relative;

}



/* Top lime bar — slides in on hover */

.vk-gc::before{

  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:5;

  background:linear-gradient(90deg,var(--lime),rgba(170,255,0,.6));

  transform:scaleX(0);transform-origin:left;

  transition:transform .35s var(--ease);

}



/* Shimmer sweep */

.vk-gc::after{

  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;z-index:2;

  background:linear-gradient(90deg,transparent,rgba(170,255,0,.03),transparent);

  transition:left .7s ease;pointer-events:none;

}



.vk-gc:hover{

  border-color:var(--lime25);

  transform:translateY(-4px);

  box-shadow:0 0 20px rgba(170,255,0,.07),0 8px 32px rgba(0,0,0,.4);

}

.vk-gc:hover::before{transform:scaleX(1);}

.vk-gc:hover::after{left:100%;}



/* Sold out state */

.vk-gc--sold{opacity:.6;}

.vk-gc--sold:hover{opacity:.75;}



/* ── Image ── */

.vk-gc__img-wrap{

  position:relative;display:block;aspect-ratio:1/1;

  overflow:hidden;background:#0d0d0d;

  text-decoration:none;

}

.vk-gc__img{

  width:100%;height:100%;object-fit:cover;

  transition:opacity .4s ease,transform .5s var(--ease);

}

.vk-gc__img--hover{position:absolute;inset:0;opacity:0;}

.vk-gc:hover .vk-gc__img--hover{opacity:1;}

.vk-gc:hover .vk-gc__img:not(.vk-gc__img--hover){opacity:0;}

.vk-gc:hover .vk-gc__img{transform:scale(1.06);}



.vk-gc__no-img{

  width:100%;height:100%;display:flex;align-items:center;justify-content:center;

  background:linear-gradient(135deg,#0a0a0a,var(--b1));

}

.vk-gc__no-img svg{width:36px;height:36px;opacity:.12;stroke:var(--g3);}



/* ── Badges ── */

.vk-gc__badges{

  position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;z-index:3;

}

.vk-gc__badge{

  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;

  padding:4px 10px;border-radius:5px;line-height:1.2;

  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);

}

.vk-gc__badge--sale{

  background:rgba(255,59,59,.85);color:#fff;

  box-shadow:0 2px 8px rgba(255,59,59,.3);

}

.vk-gc__badge--new{

  background:rgba(170,255,0,.9);color:#000;

  box-shadow:0 2px 8px rgba(170,255,0,.3);

}

.vk-gc__badge--sold{

  background:rgba(30,30,30,.85);color:var(--g1);

  border:1px solid var(--b2);

}



/* ── Quick Add Overlay ── */

.vk-gc__quick{

  position:absolute;bottom:0;left:0;right:0;padding:12px;z-index:4;

  background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 60%,transparent 100%);

  transform:translateY(100%);opacity:0;

  transition:transform .3s var(--ease),opacity .25s ease;

  display:flex;

}

.vk-gc:hover .vk-gc__quick{transform:translateY(0);opacity:1;}



.vk-gc__atc{

  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;

  padding:11px 16px;

  background:var(--lime);color:#000;

  font-family:'Inter',sans-serif;font-size:10px;font-weight:800;

  letter-spacing:.1em;text-transform:uppercase;

  border:none;border-radius:7px;cursor:pointer;

  transition:background .2s,box-shadow .2s,transform .15s;

  -webkit-appearance:none;appearance:none;

  position:relative;overflow:hidden;

}

.vk-gc__atc:hover{

  background:#CCFF44;

  box-shadow:0 0 16px rgba(170,255,0,.3);

  transform:translateY(-1px);

}

.vk-gc__atc:active{transform:translateY(0);}

/* ATC shimmer */

.vk-gc__atc::after{

  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;

  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);

  transition:left .5s ease;pointer-events:none;

}

.vk-gc__atc:hover::after{left:100%;}



/* ATC states */

.vk-gc__atc--loading{background:var(--g4);pointer-events:none;}

.vk-gc__atc--success{background:#00C853;pointer-events:none;}

.vk-gc__atc--error{background:#FF3B3B;pointer-events:none;}

.vk-gc__atc svg{flex-shrink:0;}



/* ── Card Body ── */

.vk-gc__body{

  padding:14px 16px 18px;display:flex;flex-direction:column;gap:5px;flex:1;

}

.vk-gc__vendor{

  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;

  color:var(--lime);opacity:.65;transition:opacity .2s;

}

.vk-gc:hover .vk-gc__vendor{opacity:1;}



.vk-gc__title{

  font-size:13px;font-weight:700;color:#fff;line-height:1.4;

  text-decoration:none;transition:color .2s ease;

  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;

  overflow:hidden;text-overflow:ellipsis;

}

.vk-gc:hover .vk-gc__title{color:var(--lime);}



.vk-gc__price-row{

  display:flex;align-items:baseline;gap:8px;

  margin-top:auto;padding-top:6px;

}

.vk-gc__price{

  font-family:'Bebas Neue',sans-serif;font-size:22px;

  color:#fff;letter-spacing:.02em;line-height:1;

}

.vk-gc__price--sale{color:#FF3B3B;}

.vk-gc__price--cmp{

  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;

  color:var(--g3);text-decoration:line-through;

}

.vk-gc__price--sold{color:var(--g3);}



.vk-gc__opts{

  font-size:10px;font-weight:600;color:var(--g3);letter-spacing:.04em;

  margin-top:2px;

}



/* ═══════════════════════════════════

   PAGINATION

   ═══════════════════════════════════ */

.vk-grid__pag{

  display:flex;flex-direction:column;align-items:center;gap:14px;

  margin-top:48px;padding-top:32px;

  border-top:1px solid var(--b2);

}

.vk-grid__pag-row{display:flex;align-items:center;gap:6px;}



.vk-grid__pg{

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

  min-width:40px;height:40px;padding:0 14px;

  background:linear-gradient(145deg,rgba(170,255,0,.02),var(--w02));

  border:1px solid rgba(170,255,0,.06);border-radius:8px;

  font-size:12px;font-weight:700;color:var(--g1);

  text-decoration:none;cursor:pointer;

  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);

  transition:all .3s var(--ease);position:relative;overflow:hidden;

}

/* Shimmer on hover */

.vk-grid__pg::after{

  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;

  background:linear-gradient(90deg,transparent,rgba(170,255,0,.06),transparent);

  transition:left .5s ease;pointer-events:none;

}

.vk-grid__pg:hover{

  border-color:var(--lime25);color:var(--lime);

  background:linear-gradient(145deg,rgba(170,255,0,.06),var(--w03));

  transform:translateY(-1px);

  box-shadow:0 4px 12px rgba(0,0,0,.3);

}

.vk-grid__pg:hover::after{left:100%;}



.vk-grid__pg--cur{

  background:var(--lime)!important;border-color:var(--lime)!important;

  color:#000!important;font-weight:900;cursor:default;

  box-shadow:0 0 16px rgba(170,255,0,.2);

}

.vk-grid__pg--cur::after{display:none;}

.vk-grid__pg--off{opacity:.3;cursor:not-allowed;pointer-events:none;}

.vk-grid__pg--dots{background:transparent;border-color:transparent;cursor:default;color:var(--g3);}

.vk-grid__pg--arr{padding:0;width:40px;}



.vk-grid__pag-info{

  font-size:10px;font-weight:600;color:var(--g3);letter-spacing:.06em;

}



/* ═══════════════════════════════════

   EMPTY STATE

   ═══════════════════════════════════ */

.vk-grid__empty{

  text-align:center;padding:80px 24px;

}

.vk-grid__empty-icon{

  width:48px;height:48px;margin:0 auto 16px;opacity:.15;stroke:var(--g3);

}

.vk-grid__empty-text{

  font-size:14px;font-weight:600;color:var(--g2);margin-bottom:4px;

}

.vk-grid__empty-sub{

  font-size:12px;color:var(--g3);

}

.vk-grid__empty-link{

  display:inline-flex;align-items:center;gap:6px;

  margin-top:16px;padding:10px 24px;

  background:var(--lime);color:#000;

  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;

  text-decoration:none;border-radius:8px;

  transition:background .2s,transform .15s;

}

.vk-grid__empty-link:hover{background:#CCFF44;transform:translateY(-1px);}



/* ═══════════════════════════════════

   REVEAL

   ═══════════════════════════════════ */

.vk-grid__rv{

  opacity:0;transform:translateY(16px);

  transition:opacity .6s var(--ease),transform .6s var(--ease);

}

.vk-grid__rv.is-vis{opacity:1;transform:translateY(0);}



/* Staggered cards */

.vk-gc{

  opacity:0;transform:translateY(20px);

  transition:opacity .5s var(--ease),transform .5s var(--ease),

    border-color .35s var(--easeBounce),box-shadow .35s var(--easeBounce);

}

.vk-grid__products.is-vis .vk-gc{opacity:1;transform:translateY(0);}

.vk-grid__products.is-vis .vk-gc:nth-child(1){transition-delay:.05s}

.vk-grid__products.is-vis .vk-gc:nth-child(2){transition-delay:.1s}

.vk-grid__products.is-vis .vk-gc:nth-child(3){transition-delay:.15s}

.vk-grid__products.is-vis .vk-gc:nth-child(4){transition-delay:.2s}

.vk-grid__products.is-vis .vk-gc:nth-child(5){transition-delay:.25s}

.vk-grid__products.is-vis .vk-gc:nth-child(6){transition-delay:.3s}

.vk-grid__products.is-vis .vk-gc:nth-child(7){transition-delay:.35s}

.vk-grid__products.is-vis .vk-gc:nth-child(8){transition-delay:.4s}

.vk-grid__products.is-vis .vk-gc:nth-child(n+9){transition-delay:.45s}

/* Once visible, instant hover */

.vk-grid__products.is-vis .vk-gc:hover{

  transition:transform .35s var(--easeBounce),border-color .35s var(--easeBounce),box-shadow .35s var(--easeBounce);

}



/* ═══════════ TABLET — 1024 ═══════════ */

@media(max-width:1024px){

  .vk-grid__products{grid-template-columns:repeat(3,1fr);gap:14px;}

  .vk-grid__sort-drop{min-width:180px;}

}



/* ═══════════ MOBILE — 749 ═══════════ */

@media(max-width:749px){

  .vk-grid{padding:0 0 48px;}

  .vk-grid__inner{padding:0 16px;}

  .vk-grid__products{grid-template-columns:repeat(2,1fr);gap:10px;}

  .vk-grid__bar{padding:16px 0 18px;margin-bottom:18px;gap:12px;}

  .vk-grid__bar-top{flex-wrap:wrap;gap:8px;}

  .vk-grid__count{font-size:12px;}

  .vk-grid__sort-btn{padding:7px 12px;font-size:12px;}

  .vk-grid__sort-drop{min-width:170px;}

  .vk-grid__sort-opt{padding:9px 12px;font-size:12px;}

  .vk-grid__tags{gap:6px;}

  .vk-grid__tag{padding:6px 12px;font-size:12px;}



  /* Quick add always visible on mobile */

  .vk-gc__quick{

    transform:translateY(0);opacity:1;

    background:linear-gradient(to top,rgba(0,0,0,.85),transparent);

    padding:8px;

  }

  .vk-gc__atc{padding:9px 10px;font-size:11px;border-radius:6px;gap:6px;}

  .vk-gc__atc svg{width:12px;height:12px;}

  /* No hover lift on touch */

  .vk-gc:hover{transform:none;box-shadow:none;}



  .vk-gc__body{padding:10px 12px 14px;gap:4px;}

  .vk-gc__vendor{font-size:11px;letter-spacing:.1em;}

  .vk-gc__title{font-size:12px;}

  .vk-gc__price{font-size:18px;}

  .vk-gc__price--cmp{font-size:12px;}

  .vk-gc__opts{font-size:12px;}

  .vk-gc__badge{font-size:11px;padding:3px 8px;border-radius:4px;}



  .vk-grid__pag{margin-top:36px;padding-top:24px;}

  .vk-grid__pg{min-width:36px;height:36px;font-size:12px;border-radius:7px;}

  .vk-grid__pg--arr{width:36px;}

  .vk-grid__pg:hover{transform:none;}



  .vk-grid__orb{width:350px;height:350px;}

}



/* ═══════════ SMALL — 480 ═══════════ */

@media(max-width:480px){

  .vk-grid__inner{padding:0 14px;}

  .vk-grid__products{gap:8px;}

  .vk-gc{border-radius:10px;}

  .vk-gc__body{padding:8px 10px 12px;}

  .vk-gc__vendor{font-size:11px;}

  .vk-gc__title{font-size:12px;-webkit-line-clamp:2;}

  .vk-gc__price{font-size:16px;}

  .vk-gc__price--cmp{font-size:12px;}

  .vk-gc__quick{padding:6px;}

  .vk-gc__atc{padding:8px 8px;font-size:11px;letter-spacing:.08em;}

  .vk-gc__badge{font-size:11px;padding:3px 7px;}

  .vk-grid__pg{min-width:32px;height:32px;font-size:12px;padding:0 10px;border-radius:6px;}

  .vk-grid__pg--arr{width:32px;}

  .vk-grid__tag{padding:5px 10px;font-size:12px;}

}



/* ═══════════ TINY — 360 ═══════════ */

@media(max-width:360px){

  .vk-grid__inner{padding:0 12px;}

  .vk-grid__products{gap:6px;}

  .vk-gc__body{padding:7px 8px 10px;}

  .vk-gc__title{font-size:12px;}

  .vk-gc__price{font-size:15px;}

  .vk-gc__atc{padding:7px 6px;font-size:11px;}

}



/* ═══════════ REDUCED MOTION ═══════════ */

@media(prefers-reduced-motion:reduce){

  .vk-grid__orb{animation:none!important;}

  .vk-grid__rv,.vk-gc{transition-duration:.01s!important;transition-delay:0s!important;}

  .vk-gc::before,.vk-gc::after,.vk-gc__quick,.vk-gc__img,

  .vk-gc__atc::after,.vk-grid__pg::after{transition-duration:.01s!important;}

}


.vk-gc__rating{display:flex;align-items:center;gap:5px;margin:1px 0 1px;line-height:1;}
.vk-gc__stars{font-size:12px;letter-spacing:1px;color:var(--lime);line-height:1;}
.vk-gc__star-o{color:var(--g3);}
.vk-gc__rnum{font-size:10px;font-weight:600;color:var(--g3);letter-spacing:.03em;}

/* -------------------------------------------------------------------------
   Archive grid — never a carousel
   -------------------------------------------------------------------------
   vk-product-grid.css turns .vk-pg__grid into a horizontal, scroll-snapping,
   flex-nowrap carousel below 520px. That is the right shape for the homepage
   "Best Sellers" strip, where a swipeable row of eight is the point.

   On a collection archive it is wrong and it hides stock: the cards sit in one
   row, .vk-grid clips at overflow:hidden, and a shopper on a phone sees 2 of 23
   products with no indication the other 21 exist. Most vape traffic is mobile,
   so that was the whole catalogue hidden on the device most people use.

   The archive container carries BOTH classes (.vk-pg__grid for the card styling,
   .vk-grid__items to mark it as an archive), so this two-class selector outranks
   the single-class carousel rules on specificity and wins regardless of the
   order the two stylesheets happen to load in.
   ------------------------------------------------------------------------- */

.vk-grid__items.vk-pg__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  overflow: visible !important;
  scroll-snap-type: none !important;
  flex-wrap: wrap;
}

.vk-grid__items.vk-pg__grid > .vk-pg__card {
  min-width: 0 !important;
  max-width: none !important;
  flex-shrink: 1 !important;
  scroll-snap-align: none !important;
}

@media (max-width: 1024px) {
  .vk-grid__items.vk-pg__grid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 768px) {
  .vk-grid__items.vk-pg__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
}

/* One column only when two would leave the card too narrow to read. */
@media (max-width: 360px) {
  .vk-grid__items.vk-pg__grid { grid-template-columns: 1fr !important; }
}

/* The section clips its decorative orbs; the card grid must not be clipped
   with them now that it is tall instead of wide. */
.vk-grid { overflow: clip visible; }

/* Pagination sits under the grid, centred, with room from the last row. */
.vk-grid__pager {
  margin: 28px 0 0;
  display: flex;
  justify-content: center;
}
.vk-grid__pager .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.vk-grid__pager .page-numbers li { margin: 0; }
.vk-grid__pager .page-numbers a,
.vk-grid__pager .page-numbers span {
  display: inline-block;
  min-width: 38px;
  padding: 9px 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  color: #fff;
  font: 700 13px/1 'Inter', system-ui, sans-serif;
  text-decoration: none;
}
.vk-grid__pager .page-numbers a:hover { border-color: #aaff00; color: #aaff00; }
.vk-grid__pager .page-numbers .current {
  background: #aaff00;
  border-color: #aaff00;
  color: #0a0a0a;
}

/* The sort options are anchors now, not buttons, so they need the button's
   layout back and a visible marker on the one in force. */
.vk-grid__sort-drop a.vk-grid__sort-opt {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
.vk-grid__sort-opt.is-active {
  color: #aaff00;
  background: rgba(170, 255, 0, 0.08);
}