/* ============================================================================
   HIGHLAND VAULT — [hv_draw_tabs] CATEGORY TABS
   Heading + dark pill tabs + AJAX product area. The product grid inside the
   panel is WooCommerce's own ul.products output — untouched here beyond the
   fade wrapper. Colours are deliberately explicit (spec: #111111 pills on the
   white page, brand blue accents) so the component is self-contained; the
   brand blue follows the theme token with a hard fallback.
   ========================================================================== */

.hv-draw-tabs {
  --dt-blue: var(--hv-primary, #065BE0);
  --dt-blue-light: var(--hv-primary-strong, #0A6BFF);
  padding-block: clamp(2rem, 1.2rem + 3.5vw, 4rem);
  /* clips the stuck bar's viewport-wide backdrop without creating a scroll
     container — position:sticky keeps working (clip, not hidden) */
/*   overflow-x: clip; */
}

/* ---------------------------------------------------------------------------
   HEADING
   --------------------------------------------------------------------------- */
.hv-draw-tabs__head { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.hv-draw-tabs__eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: var(--hv-fs-sm, .875rem); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dt-blue);
}
.hv-draw-tabs__eyebrow::before,
.hv-draw-tabs__eyebrow::after { content: ""; width: 34px; height: 2px; background: var(--dt-blue); border-radius: 2px; }
.hv-draw-tabs__title {
  margin: .35em 0 .3em; font-size: var(--hv-fs-h1, 2.5rem);
  font-weight: var(--hv-fw-black, 700); line-height: 1.1; letter-spacing: -.01em;
  color: var(--hv-ink, #111827); text-wrap: balance;
}
.hv-draw-tabs__title .accent { color: var(--dt-blue); }
.hv-draw-tabs__sub {
  margin: 0 auto; max-width: 52ch;
  font-size: var(--hv-fs-lead, 1.125rem); line-height: 1.55;
  color: var(--hv-muted, #6B7280);
}

/* ---------------------------------------------------------------------------
   TABS — dark pills, centered on desktop, swipeable strip on smaller screens
   --------------------------------------------------------------------------- */
/* Sticky within the section only: position:sticky pins the bar below the site
   header while its parent (.hv-draw-tabs) is in view, and releases it naturally
   at the section's end. The offset is MEASURED from the real header by
   draw-tabs.js (--hv-dt-sticky-top); 65px is only the no-JS fallback.
   The pinned backdrop is a viewport-wide ::before layer (see below) — the bar
   itself carries no background, border or shadow, so pinning never shifts
   layout or shows box edges. */
.hv-draw-tabs__nav {
  position: -webkit-sticky; /* iOS Safari */
  position: sticky; top: var(--hv-dt-sticky-top, 65px); z-index: 90; /* under the header (100) */
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding: 10px 0 0;
}
/* Backdrop for the pinned state: spans the FULL viewport (no left/right edges,
   no border, no shadow) so on the white page it reads as if there is no bar at
   all — it only masks the cards scrolling underneath. */
.hv-draw-tabs__nav::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: 50%; margin-left: -50vw; width: 100vw;
  background: transparent; z-index: -1;
  transition: background .3s ease;
  pointer-events: none;
}
.hv-draw-tabs__nav.is-stuck::before {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* Zero-footprint marker draw-tabs.js watches to know when the bar is pinned */
.hv-draw-tabs__sentinel { position: relative; height: 0; }

/* position:sticky dies inside any ancestor that clips overflow — Elementor
   wrappers commonly set overflow:hidden and silently break sticky on mobile.
   Un-clip only the wrappers that actually contain this shortcode. */
.elementor-widget:has(.hv-draw-tabs),
.elementor-widget-container:has(.hv-draw-tabs),
.elementor-section:has(.hv-draw-tabs),
.e-con:has(.hv-draw-tabs),
.e-con-inner:has(.hv-draw-tabs) { overflow: visible !important; }
/* overflow:clip clips (border-radius, shape dividers stay intact) WITHOUT
   creating a scroll container, so position:sticky keeps working — strictly
   better than visible where supported. */
/* @supports (overflow: clip) {
  .elementor-widget:has(.hv-draw-tabs),
  .elementor-widget-container:has(.hv-draw-tabs),
  .elementor-section:has(.hv-draw-tabs),
  .e-con:has(.hv-draw-tabs),
  .e-con-inner:has(.hv-draw-tabs) { overflow: clip !important; }
} */
.hv-draw-tabs__track {
  position: relative;
  display: flex; align-items: stretch; gap: 16px;
  padding: 2px 2px 14px; /* room for the sliding underline */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;              /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.hv-draw-tabs__track::-webkit-scrollbar { display: none; } /* WebKit */
/* Desktop: centered via auto-margins — unlike `justify-content: safe center`
   (unsupported in Safari) this centres when the tabs fit and degrades to a
   start-aligned scrollable row when they overflow, in every browser. */
@media (min-width: 1025px) {
  .hv-draw-tabs__tab:first-child { margin-inline-start: auto; }
  .hv-draw-tabs__tab:last-of-type { margin-inline-end: auto; }
}

/* Every state pinned (!important): the Elementor kit's global button styles
   paint <button>s pink on hover/active — same defence as the theme's own
   .hv-icon-btn / .hv-entry-toggle. */
.hv-draw-tabs__tab {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 22px !important;
  font-family: var(--hv-font, inherit) !important;
  font-size: var(--hv-fs-body, 1rem) !important;
  font-weight: 700 !important; line-height: 1 !important;
  letter-spacing: normal !important; text-transform: none !important;
  background: #111111 !important;
  color: #FFFFFF !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 10px !important;
  box-shadow: none !important; /* flat design — no elevation in any state */
  cursor: pointer; white-space: nowrap;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.hv-draw-tabs__tab:hover,
.hv-draw-tabs__tab:focus {
  background: #1B1B1B !important;
  color: #FFFFFF !important;
  border-color: var(--dt-blue) !important;
  transform: translateY(-2px);
  outline: none;
}
/* Flat focus ring (outline, not a shadow glow) — overrides the theme's global
   box-shadow focus ring for these buttons */
.hv-draw-tabs__tab:focus-visible {
  box-shadow: none !important;
  outline: 2px solid var(--dt-blue); outline-offset: 2px;
}
.hv-draw-tabs__tab.is-active,
.hv-draw-tabs__tab.is-active:hover,
.hv-draw-tabs__tab.is-active:focus {
  background: var(--dt-blue) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

.hv-draw-tabs__icon { display: inline-flex; flex: 0 0 auto; }
.hv-draw-tabs__icon svg { display: block; }
.hv-draw-tabs__count {
  display: inline-grid; place-items: center;
  min-width: 34px; padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  font-size: var(--hv-fs-sm, .8125rem); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Sliding underline — positioned by JS (left/width), lives inside the
   scrolling track so it moves with the tabs. */
.hv-draw-tabs__indicator {
  position: absolute; bottom: 4px; left: 0;
  width: 0; height: 4px; border-radius: 999px;
  background: var(--dt-blue);
  transition: transform .3s ease, width .3s ease;
  will-change: transform, width;
  pointer-events: none;
}

/* Mobile: same sticky bar, full-bleed where the theme container guarantees the
   side padding (inside an Elementor widget with narrower padding the bleed
   would overflow the viewport, so it is scoped to .hv-container). Swipe,
   momentum, snap and the hidden scrollbar all come from the base track rules. */
@media (max-width: 768px) {
  .hv-container .hv-draw-tabs__nav {
    margin-inline: calc(-1 * var(--hv-space-5, 1.5rem));
    padding-inline: var(--hv-space-5, 1.5rem);
  }
  /* Compact pills on mobile: 44px keeps the touch target comfortable while
     the strip reads much lighter. Icon/badge/radius scale down to match. */
  .hv-draw-tabs__track { gap: 10px; padding-bottom: 12px; }
  .hv-draw-tabs__tab {
    min-height: 44px; padding: 0 14px !important;
    font-size: var(--hv-fs-xs, .75rem) !important;
    gap: 7px; border-radius: 10px !important;
  }
  .hv-draw-tabs__icon svg { width: 16px; height: 16px; }
  .hv-draw-tabs__count { min-width: 26px; padding: 3px 7px; font-size: 11px; }
  .hv-draw-tabs__indicator { height: 3px; }
}

/* ---------------------------------------------------------------------------
   SECTIONS — every category stacked (overview model). Headings echo the
   theme's section-head language; the grids inside are the theme's own.
   scroll-margin-top keeps native anchor jumps (e.g. #jackpot-prizes links)
   clear of the sticky chrome too.
   --------------------------------------------------------------------------- */
.hv-draw-tabs__section {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  /* --hv-dt-scroll-offset is published by draw-tabs.js (header + nav + 12px)
     so native #anchor jumps land exactly where JS scrolls do */
  scroll-margin-top: var(--hv-dt-scroll-offset, calc(var(--hv-dt-sticky-top, 65px) + 101px));
}
.hv-draw-tabs__section:last-child { margin-bottom: 0; }
.hv-draw-tabs__section-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--hv-space-5, 1.5rem);
  padding-bottom: var(--hv-space-3, .75rem);
  border-bottom: 1px solid var(--hv-line, #E7EAF0);
}
.hv-draw-tabs__section-icon { display: inline-flex; flex: 0 0 auto; color: var(--dt-blue); }
.hv-draw-tabs__section-icon svg { width: 24px; height: 24px; display: block; }
.hv-draw-tabs__section-title {
  margin: 0; font-size: var(--hv-fs-h2, 1.75rem);
  font-weight: var(--hv-fw-black, 700); color: var(--hv-ink, #111827);
  line-height: 1.15;
}
.hv-draw-tabs__section-count {
  display: inline-grid; place-items: center;
  min-width: 34px; padding: 5px 10px; border-radius: 999px;
  background: #111111; color: #FFFFFF;
  font-size: var(--hv-fs-sm, .8125rem); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Lazy-loaded content enters with a soft fade + slide (no flashing) */
.hv-draw-tabs__section-body { transition: opacity .3s ease, transform .3s ease; }
.hv-draw-tabs__section-body.is-entering { opacity: 0; transform: translateY(10px); }

/* ---------------------------------------------------------------------------
   FLAT SECTION — the cards carry their own design; every container AROUND them
   stays completely flat. Kills edge fades, gradient overlays, masks and
   pseudo-element shadow effects that the theme, Elementor or plugins might
   paint on these wrappers. Card shadows themselves are untouched.
   --------------------------------------------------------------------------- */
.hv-draw-tabs,
.hv-draw-tabs__sections,
.hv-draw-tabs__section,
.hv-draw-tabs__section-body,
.hv-draw-tabs__section-body .woocommerce,
.hv-draw-tabs__section-body ul.products {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.hv-draw-tabs__sections::before, .hv-draw-tabs__sections::after,
.hv-draw-tabs__section::before, .hv-draw-tabs__section::after,
.hv-draw-tabs__section-body::before, .hv-draw-tabs__section-body::after,
.hv-draw-tabs__section-body ul.products::before,
.hv-draw-tabs__section-body ul.products::after {
  content: none !important;
  display: none !important;
}

.hv-draw-tabs__empty {
  padding: var(--hv-space-7, 3rem) var(--hv-space-5, 1.5rem);
  text-align: center; color: var(--hv-muted, #6B7280);
  border: 1px dashed var(--hv-line, #E7EAF0); border-radius: var(--hv-radius-lg, 18px);
}
/* ---------------------------------------------------------------------------
   LOADING SKELETON — grid mirrors the product columns (JS sets --hv-dt-cols)
   --------------------------------------------------------------------------- */
/* Mirrors the REAL product grid exactly (woocommerce.css hardcodes ul.products
   to 4 / 3 @≤1100px / 2 @≤768px regardless of the columns attribute) so the
   skeleton never snaps to a different column count when content lands. */
.hv-draw-tabs__skeleton {
  display: grid; gap: var(--hv-space-5, 1.5rem);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .hv-draw-tabs__skeleton { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .hv-draw-tabs__skeleton { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .hv-draw-tabs__skeleton { gap: var(--hv-space-3, .75rem); } } /* gap compacts where ul.products does */

.hv-draw-tabs__skel-card {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--hv-radius-lg, 18px);
  background: #0A0A0A; overflow: hidden;
}
.hv-draw-tabs__skel-card::before {
  content: ""; display: block; aspect-ratio: 1 / 1;
  background: linear-gradient(100deg, #141414 40%, #1F1F1F 50%, #141414 60%);
  background-size: 220% 100%;
  animation: hv-dt-shimmer 1.3s ease-in-out infinite;
}
.hv-draw-tabs__skel-card::after {
  content: ""; display: block; height: 148px; margin: 16px;
  border-radius: 12px;
  background: linear-gradient(100deg, #141414 40%, #1F1F1F 50%, #141414 60%);
  background-size: 220% 100%;
  animation: hv-dt-shimmer 1.3s ease-in-out infinite;
}
@keyframes hv-dt-shimmer { to { background-position: -120% 0; } }

@media (prefers-reduced-motion: reduce) {
  .hv-draw-tabs__tab, .hv-draw-tabs__indicator, .hv-draw-tabs__panel { transition: none; }
  .hv-draw-tabs__skel-card::before, .hv-draw-tabs__skel-card::after { animation: none; }
}