/*
 * Custom CSS
 * Copyright:
 * ─────────────────────────────────────────────
*/

/* ================================================
   0. DESIGN TOKENS
   ================================================ */
:root {
  --r-sm:   8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 999px;

  --s1: rgba(255,255,255,.02);
  --s2: rgba(255,255,255,.04);
  --s3: rgba(255,255,255,.07);

  --b-subtle:  rgba(255,255,255,.05);
  --b-default: rgba(255,255,255,.09);
  --b-strong:  rgba(255,255,255,.16);

  --sh-sm: 0  2px  8px rgba(0,0,0,.35);
  --sh-md: 0  8px 24px rgba(0,0,0,.45);
  --sh-lg: 0 20px 50px rgba(0,0,0,.55);
  --sh-xl: 0 32px 80px rgba(0,0,0,.65);

  --glow-sm: 0 0 18px rgba(var(--cl-accent-rgb),.22);
  --glow-md: 0 0 36px rgba(var(--cl-accent-rgb),.28);

  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --ease-out:    cubic-bezier(.4,0,.2,1);
}

/* ================================================
   1. BASE — scrollbar, selection, focus, body
   ================================================ */

/* Scrollbar */
::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--cl-accent-rgb),.3);
  border-radius: var(--r-full);
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--cl-accent-rgb),.55); }

/* Selection */
::selection { background: rgba(var(--cl-accent-rgb),.25); color:#fff; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--cl-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Input number arrows */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; }

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

/* ================================================
   2. BODY — grid + mouse glow
   ================================================ */
body {
  position: relative;
  background: var(--cl-background-primary);
}

/* Grid — vignette mask so edges fade cleanly */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 30%, transparent 100%);
}

/* Mouse glow */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    circle 580px at var(--mouse-x, -9999px) var(--mouse-y, -9999px),
    rgba(var(--cl-accent-rgb),.11),
    transparent 70%
  );
}

/* ================================================
   3. TYPOGRAPHY HELPERS
   ================================================ */
.text-accent    { color: var(--cl-accent) !important; }
.text-dim-1     { color: rgba(255,255,255,.25); }
.text-dim-2     { color: rgba(255,255,255,.45); }
.text-dim-3     { color: rgba(255,255,255,.65); }

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, #fff 25%, rgba(var(--cl-accent-rgb),.8) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ================================================
   4. SECTION HEADERS
   ================================================ */

/* Centered */
.global-header-liquid {
  text-align: center;
  margin-bottom: 5rem;
}

.global-header-liquid p {
  color: var(--cl-accent);
  text-transform: uppercase;
  letter-spacing: 6px;
  font-weight: 800;
  font-size: 0.8rem;
  margin-bottom: .65rem;
}

.global-header-liquid h2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 950;
  color: #fff;
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 0;
}

/* Left-aligned */
.liquid-header {
  text-align: left;
  margin-bottom: 5rem;
  border-left: 4px solid var(--cl-accent);
  padding-left: 1.75rem;
}

.liquid-header p {
  color: var(--cl-accent);
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 800;
  font-size: 0.82rem;
  margin-bottom: .5rem;
}

.liquid-header h1,
.liquid-header h2 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 950;
  color: #fff;
  line-height: .92;
  letter-spacing: -3px;
  margin: 0;
}

@media (max-width: 991.98px) {
  .liquid-header {
    text-align: center;
    border-left: none;
    padding-left: 0;
    border-bottom: 2px solid rgba(var(--cl-accent-rgb),.3);
    padding-bottom: 1rem;
  }
}

/* ================================================
   5. CHIPS / STATUS BADGES
   ================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .26rem .72rem;
  border-radius: var(--r-full);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
}

.chip-accent  { background:rgba(var(--cl-accent-rgb),.1);  border-color:rgba(var(--cl-accent-rgb),.28); color:rgba(255,255,255,.9); }
.chip-success { background:rgba(34,197,94,.08);  border-color:rgba(34,197,94,.28);  color:#4ade80; }
.chip-warning { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.28); color:#fbbf24; }
.chip-danger  { background:rgba(239,68,68,.08);  border-color:rgba(239,68,68,.28);  color:#f87171; }
.chip-neutral { background:var(--s2);            border-color:var(--b-default);     color:rgba(255,255,255,.6); }

.chip-dot {
  width:6px; height:6px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}

/* ================================================
   6. PRODUCT CARDS
   ================================================ */
.liquid-product-card {
  position: relative;
  background: var(--s1);
  backdrop-filter: saturate(130%) blur(16px);
  -webkit-backdrop-filter: saturate(130%) blur(16px);
  border: 1px solid var(--b-subtle);
  border-radius: 50px 12px 50px 12px;
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    border-radius  .55s var(--ease-bounce),
    transform      .55s var(--ease-bounce),
    box-shadow     .35s var(--ease-out),
    border-color   .35s var(--ease-out),
    background     .35s var(--ease-out);
  text-decoration: none !important;
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto;
  will-change: transform;
}

/* Gradient border sweep */
.liquid-product-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  z-index: -1;
  background: linear-gradient(135deg,
    rgba(var(--cl-accent-rgb),.3),
    transparent 55%,
    rgba(255,255,255,.04));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  pointer-events: none;
}

/* Shimmer sweep */
.liquid-product-card::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -60%;
  width: 40%;
  height: 300%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.045), transparent);
  transform: rotate(30deg);
  transition: left .7s var(--ease-out);
  pointer-events: none;
}

.liquid-product-card:hover {
  border-radius: 12px 50px 12px 50px;
  background: var(--s2);
  border-color: rgba(var(--cl-accent-rgb),.25);
  transform: translateY(-8px);
  box-shadow: var(--sh-lg), var(--glow-sm);
}

.liquid-product-card:hover::before { opacity: 1; }
.liquid-product-card:hover::after  { left: 160%; }

/* Image */
.liquid-product-image-wrapper {
  position: relative;
  border-radius: 38px 8px 38px 8px;
  overflow: hidden;
  margin-bottom: 1.35rem;
  aspect-ratio: var(--product-card-image-aspect-ratio, 1/1);
  background: rgba(0,0,0,.18);
  transition: border-radius .55s var(--ease-bounce);
}

.liquid-product-card:hover .liquid-product-image-wrapper {
  border-radius: 8px 38px 8px 38px;
}

.liquid-product-image {
  width: 100%;
  height: 100%;
  object-fit: var(--product-image-fit, cover);
  transition: transform .55s var(--ease-out);
  will-change: transform;
}

.liquid-product-card:hover .liquid-product-image { transform: scale(1.08); }

/* Badges */
.liquid-product-badges {
  position: absolute;
  top: .7rem;
  right: .7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
  z-index: 10;
  pointer-events: none;
}

.liquid-product-badge {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .3rem .75rem;
  border-radius: var(--r-full);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--sh-sm);
}

/* Info */
.liquid-product-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.liquid-product-name {
  color: #fff;
  font-size: 1.08rem;
  font-weight: 900;
  margin-bottom: .45rem;
  letter-spacing: -.4px;
  line-height: 1.22;
}

.liquid-product-price-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .9rem;
}

.liquid-product-price {
  font-size: 1.22rem;
  font-weight: 900;
  color: var(--cl-accent);
  letter-spacing: -.5px;
}

.liquid-product-price-slash {
  font-size: .88rem;
  color: rgba(255,255,255,.28);
  text-decoration: line-through;
}

/* Discount pill */
.liquid-product-discount {
  font-size: .68rem;
  font-weight: 800;
  color: #fff;
  background: rgba(var(--cl-accent-rgb),.7);
  border-radius: var(--r-full);
  padding: .18rem .55rem;
  letter-spacing: .03em;
}

/* Meta row */
.liquid-product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--b-subtle);
}

.liquid-product-stock {
  font-size: .68rem;
  font-weight: 800;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.liquid-product-stock i          { font-size:.75rem; color:var(--cl-accent); }
.liquid-product-stock.low  i     { color:#f59e0b; }
.liquid-product-stock.out  i     { color:#ef4444; }

/* Star rating */
.liquid-product-rating {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
}

.liquid-product-rating .stars { color:#f59e0b; letter-spacing:-.5px; }

/* CTA button */
.liquid-product-btn {
  margin-top: 1.1rem;
  width: 100%;
  padding: .82rem;
  background: var(--s1);
  border: 1px solid var(--b-default);
  border-radius: var(--r-md);
  color: rgba(255,255,255,.65);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition:
    background   .35s var(--ease-out),
    color        .35s var(--ease-out),
    border-color .35s var(--ease-out),
    box-shadow   .35s var(--ease-out),
    transform    .35s var(--ease-bounce);
  cursor: pointer;
}

.liquid-product-card:hover .liquid-product-btn {
  background: var(--cl-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--cl-accent-rgb),.38);
  transform: translateY(-2px);
}

/* ================================================
   7. SKELETON LOADERS
   ================================================ */
@keyframes sk-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 75%);
  background-size: 800px 100%;
  animation: sk-shimmer 1.6s infinite linear;
  border-radius: var(--r-sm);
}

.skeleton-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--b-subtle);
  padding: 1.5rem;
  overflow: hidden;
}

.skeleton-img           { width:100%; aspect-ratio:1/1; border-radius:var(--r-md); margin-bottom:1rem; }
.skeleton-line          { height:13px; margin-bottom:.6rem; }
.skeleton-line.short    { width:52%; }
.skeleton-line.medium   { width:74%; }
.skeleton-line.full     { width:100%; }

/* ================================================
   8. PRODUCT PAGE
   ================================================ */
.liquid-product-container {
  background: var(--s1);
  backdrop-filter: saturate(130%) blur(12px);
  -webkit-backdrop-filter: saturate(130%) blur(12px);
  border-radius: 40px;
  padding: 3rem;
  border: 1px solid var(--b-subtle);
  box-shadow: var(--sh-lg);
  margin-top: 2rem;
}

.liquid-product-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 950;
  color: #fff;
  letter-spacing: -2px;
  line-height: 1.02;
  margin-bottom: 1.35rem;
}

.liquid-price-tag {
  font-size: 2.1rem;
  font-weight: 950;
  color: var(--cl-accent);
  letter-spacing: -1px;
  text-shadow: var(--glow-sm);
}

/* Variants */
.liquid-variant-card {
  background: var(--s1) !important;
  border: 1px solid var(--b-default) !important;
  border-radius: var(--r-md) !important;
  padding: 1.2rem 1.35rem !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background   .25s var(--ease-out),
    border-color .25s var(--ease-out),
    box-shadow   .25s var(--ease-out),
    transform    .25s var(--ease-bounce) !important;
}

.liquid-variant-card:hover:not(.active) {
  background: var(--s2) !important;
  border-color: var(--b-strong) !important;
  transform: translateX(3px);
}

.liquid-variant-card.active {
  background: rgba(var(--cl-accent-rgb),.08) !important;
  border-color: rgba(var(--cl-accent-rgb),.5) !important;
  box-shadow: 0 0 0 1px rgba(var(--cl-accent-rgb),.18), var(--glow-sm) !important;
}

.liquid-variant-card.active::after {
  content: '✓';
  position: absolute;
  top: .6rem;
  right: .75rem;
  font-size: .72rem;
  font-weight: 900;
  color: var(--cl-accent);
}

/* Tabs */
.liquid-tab-btn {
  background: var(--s1) !important;
  border: 1px solid var(--b-subtle) !important;
  border-radius: var(--r-md) !important;
  padding: .75rem 1.5rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  font-size: .78rem !important;
  color: rgba(255,255,255,.4) !important;
  transition:
    background   .25s var(--ease-out),
    color        .25s var(--ease-out),
    box-shadow   .25s var(--ease-out),
    border-color .25s var(--ease-out) !important;
}

.liquid-tab-btn:hover:not(.active) {
  background: var(--s2) !important;
  color: rgba(255,255,255,.72) !important;
  border-color: var(--b-default) !important;
}

.liquid-tab-btn.active {
  background: var(--cl-accent) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(var(--cl-accent-rgb),.35) !important;
}

/* Gallery */
.liquid-image-main {
  border-radius: 30px;
  border: 1px solid var(--b-default);
  overflow: hidden;
  box-shadow: var(--sh-xl);
}

.liquid-thumb {
  border-radius: var(--r-md) !important;
  overflow: hidden;
  border: 2px solid transparent !important;
  opacity: .45;
  transition:
    opacity      .25s var(--ease-out),
    border-color .25s var(--ease-out),
    transform    .25s var(--ease-bounce);
  cursor: pointer;
}

.liquid-thumb:hover  { opacity:.72; transform:translateY(-2px); }
.liquid-thumb.active {
  border-color: var(--cl-accent) !important;
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: var(--glow-sm);
}

.liquid-stats-item {
  background: rgba(var(--cl-accent-rgb),.05);
  border-left: 2px solid rgba(var(--cl-accent-rgb),.55);
  padding: .7rem 1rem;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-weight: 600;
  transition: background .2s var(--ease-out);
}

.liquid-stats-item:hover { background: rgba(var(--cl-accent-rgb),.09); }

/* Trust badges */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .9rem;
  background: var(--s1);
  border: 1px solid var(--b-subtle);
  border-radius: var(--r-full);
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  transition:
    background   .2s var(--ease-out),
    border-color .2s var(--ease-out),
    color        .2s var(--ease-out);
}

.trust-badge i,
.trust-badge svg { color:var(--cl-accent); font-size:.82rem; }

.trust-badge:hover {
  background: var(--s2);
  border-color: rgba(var(--cl-accent-rgb),.28);
  color: rgba(255,255,255,.85);
}

/* Quantity stepper */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--s1);
  border: 1px solid var(--b-default);
  border-radius: var(--r-md);
  overflow: hidden;
}

.qty-stepper button {
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.55);
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .18s var(--ease-out), color .18s var(--ease-out);
}

.qty-stepper button:hover {
  background: rgba(var(--cl-accent-rgb),.12);
  color: var(--cl-accent);
}

.qty-stepper input {
  width: 44px;
  text-align: center;
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  outline: none;
}

/* Sticky buy bar (mobile) */
.sticky-buy-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  padding: .85rem 1.25rem;
  background: rgba(10,10,10,.88);
  border-top: 1px solid var(--b-subtle);
  backdrop-filter: saturate(130%) blur(20px);
  -webkit-backdrop-filter: saturate(130%) blur(20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transform: translateY(100%);
  transition: transform .35s var(--ease-bounce);
}

.sticky-buy-bar.visible { transform: translateY(0); }

/* ================================================
   9. STATUS PAGE
   ================================================ */
.liquid-status-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.75rem;
  background: var(--s1);
  backdrop-filter: blur(12px);
  border: 1px solid var(--b-subtle);
  border-radius: var(--r-lg);
  text-decoration: none !important;
  transition:
    background   .25s var(--ease-out),
    border-color .25s var(--ease-out),
    transform    .25s var(--ease-bounce),
    box-shadow   .25s var(--ease-out);
  margin-bottom: .75rem;
}

.liquid-status-card:hover {
  background: var(--s2);
  border-color: rgba(var(--cl-accent-rgb),.24);
  transform: translateX(6px);
  box-shadow: var(--sh-sm);
}

.liquid-status-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.liquid-status-group-title {
  font-size: 1.4rem;
  font-weight: 950;
  color: #fff;
  margin: 2.5rem 0 1.25rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--cl-accent);
  letter-spacing: -.5px;
}

/* ================================================
   10. FOOTER
   ================================================ */
.liquid-footer {
  position: relative;
  background: rgba(var(--cl-background-secondary-rgb),.25);
  backdrop-filter: saturate(130%) blur(28px);
  -webkit-backdrop-filter: saturate(130%) blur(28px);
  border-top: 1px solid var(--b-subtle);
  padding: 5rem 0 0;
  overflow: hidden;
}

.liquid-footer-glow {
  position: absolute;
  bottom: -30%;
  right: -8%;
  width: 65%;
  height: 110%;
  background: radial-gradient(circle at center,
    rgba(var(--cl-accent-rgb),.14) 0%,
    transparent 70%);
  z-index: 0;
  pointer-events: none;
  filter: blur(80px);
  border-radius: 50%;
  opacity: .7;
}

.liquid-footer > * { position:relative; z-index:1; }

.liquid-footer-brand p {
  color: rgba(255,255,255,.42);
  font-size: .9rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.liquid-footer h5 {
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 1.5rem;
  position: relative;
}

.liquid-footer h5::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--cl-accent);
  border-radius: var(--r-full);
}

.liquid-footer .nav-link {
  color: rgba(255,255,255,.38) !important;
  font-size: .88rem;
  font-weight: 500;
  padding: .4rem 0 !important;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: color .2s var(--ease-out), transform .2s var(--ease-bounce) !important;
}

.liquid-footer .nav-link:hover {
  color: rgba(255,255,255,.88) !important;
  transform: translateX(4px);
}

.liquid-footer .nav-link i { transition: all .25s var(--ease-out); }
.liquid-footer .nav-link.discord:hover   i { color:#5865F2 !important; filter:drop-shadow(0 0 6px #5865F2); }
.liquid-footer .nav-link.telegram:hover  i { color:#26A5E4 !important; filter:drop-shadow(0 0 6px #26A5E4); }
.liquid-footer .nav-link.instagram:hover i { color:#E4405F !important; filter:drop-shadow(0 0 6px #E4405F); }
.liquid-footer .nav-link.tiktok:hover    i { color:#00f2ea !important; filter:drop-shadow(0 0 6px #00f2ea); }
.liquid-footer .nav-link.youtube:hover   i { color:#FF0000 !important; filter:drop-shadow(0 0 6px #FF0000); }

.liquid-footer-bottom {
  margin-top: 4rem;
  padding: 1.25rem 0;
  background: rgba(0,0,0,.18);
  border-top: 1px solid rgba(255,255,255,.03);
}

.liquid-footer-copyright {
  font-size: .82rem;
  color: rgba(255,255,255,.25);
  margin: 0;
}

.liquid-footer-copyright a {
  color: var(--cl-accent);
  text-decoration: none;
  font-weight: 700;
  transition: opacity .2s;
}

.liquid-footer-copyright a:hover { opacity: .7; }

/* Visitor badge */
.visitor-badge {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  background: var(--s1);
  border: 1px solid var(--b-subtle);
  padding: .45rem 1rem;
  border-radius: var(--r-md);
  backdrop-filter: blur(10px);
}

.visitor-dot {
  width: 7px; height: 7px;
  background: #22c55e;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 8px #22c55e;
  flex-shrink: 0;
}

.visitor-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #22c55e;
  border-radius: 50%;
  animation: visitor-pulse 2.2s var(--ease-out) infinite;
}

@keyframes visitor-pulse {
  0%   { transform:scale(1);   opacity:.7; }
  100% { transform:scale(3.2); opacity:0;  }
}

.visitor-text  { font-size:.82rem; font-weight:700; color:rgba(255,255,255,.75); letter-spacing:.2px; }
.visitor-count { color: var(--cl-accent); }

/* ================================================
   11. MISC
   ================================================ */

/* Pulsating ring */
.pulsating {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: pulsating 2.2s var(--ease-out) infinite;
}

@keyframes pulsating {
  0%   { opacity:.75; transform:scale(1); }
  100% { opacity:0;   transform:scale(3); }
}

/* Divider with label */
.divider-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(255,255,255,.22);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--b-subtle);
}

/* Hide scrollbar utility */
.hide-scrollbar                    { -ms-overflow-style:none; scrollbar-width:none; }
.hide-scrollbar::-webkit-scrollbar { display:none; }

/* Aspect ratio helpers */
.aspect-product-card-image { aspect-ratio:var(--product-card-image-aspect-ratio); }
.aspect-product-page-image { aspect-ratio:var(--product-page-image-aspect-ratio); }
.aspect-group-card-image   { aspect-ratio:var(--group-card-image-aspect-ratio);   }
.aspect-blog-card-image    { aspect-ratio:var(--blog-card-image-aspect-ratio);    }
.object-product-image      { object-fit:contain; }
.object-group-image        { object-fit:var(--group-image-fit); }

/* Policy pages */
.policy-section-liquid { padding-top:14rem !important; padding-bottom:5rem; }

@media (max-width:991.98px) { .policy-section-liquid { padding-top:12rem !important; } }
@media (max-width:575.98px) { .policy-section-liquid { padding-top:10rem  !important; } }
@media (max-width:991px)    { .liquid-product-container { padding:1.5rem; border-radius:20px; } }

/* Bootstrap overrides */
.card.p-4 {
  background: rgba(var(--cl-background-secondary-rgb),.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--b-subtle);
  border-radius: var(--r-lg);
}

button.w-100.mt-4.btn.btn-outline-primary {
  color: #fff;
  border-color: rgba(255,255,255,.25);
}

/* ================================================
   12. SNOW
   ================================================ */
#snow {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
}

#snow .snowflake {
  position: absolute;
  width: 10px; height: 10px;
  margin-top: -10px;
  border-radius: 50%;
  background: rgba(var(--cl-snow,255,255,255),1);
  box-shadow: 0 0 18px rgba(var(--cl-snow,255,255,255),1);
}