html,
body {
  overflow-x: hidden; /* prevents accidental horizontal */
  scroll-behavior: smooth;
}
body {
  font-family:
    "Jost",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  overflow-y: auto; /* keep normal page scroll */
  scrollbar-gutter: stable; /* avoids layout jump; safe if supported */
}
/* =======================================
   WordPress Admin Bar Offset (FULL HEADER)
   Applies to your fixed <header> + bottom bar
======================================= */

/* Your fixed header element */
body.admin-bar header.fixed {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}

/* Because your header-bottom bar is separately fixed */
body.admin-bar #headerBottomBar {
  top: calc(90px + var(--wp-admin--admin-bar--height, 32px)) !important;
}

/* Mobile admin bar is taller sometimes */
@media (max-width: 782px) {
  body.admin-bar header.fixed {
    top: var(--wp-admin--admin-bar--height, 46px) !important;
  }
  body.admin-bar #headerBottomBar {
    top: calc(90px + var(--wp-admin--admin-bar--height, 46px)) !important;
  }
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/Figtree-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/Figtree-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/Figtree-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
.font-figtree {
  font-family:
    Figtree,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}
.tabs-row::-webkit-scrollbar {
  height: 0;
}
.tabs-row {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.thumb-btn {
  font-size: 0;
}

.spec-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 12px 0;
  align-items: center;
}
.spec-label {
  color: #6b7280; /* gray-500 */
  font-size: 14px;
}
.spec-value {
  color: #111827; /* gray-900 */
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.spec-tab {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 16px;
  font-size: 14px;
  color: #6b7280;
  /* gray-500 */
  background: transparent;
  border-bottom: 1px solid #e5e7eb;
  /* gray-200 */
  position: relative;
  text-align: left;
}

.spec-tab:last-child {
  border-bottom: none;
}

.spec-tab:hover {
  color: #111827;
}

/* gray-900 */

/* Active: orange bar + right pointer */
.spec-tab.is-active {
  background: #f59e0b;
  /* orange */
  color: #fff;
  font-weight: 600;
}

.spec-tab.is-active::after {
  content: "";
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 16px solid #f59e0b;
}

/* font  */
.font-jost {
  font-family:
    "Jost",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
}
.font-sulphur-point {
  font-family:
    "Sulphur Point",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family:
    "Outfit",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
}
/* Hero image micro interaction */
.hero-img {
  transform: scale(1);
  transition: transform 0.7s ease;
}
.hero-img:hover {
  transform: scale(1.03);
}
/* Skeleton shimmer */
.skel {
  position: relative;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.06); /* slate-ish */
}

.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-60%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  animation: skelShimmer 1.1s infinite;
}

@keyframes skelShimmer {
  100% {
    transform: translateX(60%);
  }
}

/* When loaded, remove shimmer cleanly */
.skel.is-loaded::after {
  display: none;
}
.skel.is-loaded {
  background: transparent;
}
.acc-panel { transition: max-height 280ms ease; will-change: max-height; }
.acc-ic { transition: transform 220ms ease; }
.acc-btn[aria-expanded="true"] .acc-ic { transform: rotate(180deg); }

.vf-preview-video {
  opacity: 0;
  transition: opacity .25s ease;
}

.vf-preview-video[src] {
  opacity: 1;
}

.step-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    
    transition: width .35s cubic-bezier(.4,0,.2,1);
    will-change: opacity, transform;
}

.step-panel.is-active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.step-panel.is-enter {
    opacity: 0;
    transform: translateY(10px);
}

.step-panel.is-leave {
    opacity: 0;
    transform: translateY(-10px);
}

.step-panel[hidden] {
    display: none !important;
}