/* Brand overrides — loaded AFTER css/styles.min.css so it wins specificity.
 * Heading font is Rajdhani (condensed, industrial look — matches the
 * "COMMITTED TO SERVE / BEYOND MACHINERY" treatment shared by the user).
 * Body stays on Inter so long-form text doesn't lose readability.
 *
 * The font is also applied to "chip" UI — category chips, product tags,
 * power-source badges — anywhere a short uppercase label appears.
 *
 * If a tenant configures `webthemefont` in Store Settings, the theme
 * bridge in data.js can later override --font-heading at runtime; the
 * Google Fonts import is the default fallback. */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

/* Footer gallery — v6 ships .gallery-item at height:120px with default
 * object-fit:cover on the <img>, which crops the top + bottom of every
 * machine photo. Switch to contain + a darker backdrop so the full
 * silhouette of each lift reads at the small footer size. Bumped the
 * tile height to 180px so the machines aren't squeezed. */
.footer-gallery { background: var(--dark); padding: 12px 0 !important; gap: 4px; }
.footer-gallery .gallery-item { height: 180px !important; background: transparent; }
.footer-gallery .gallery-item img,
.footer-gallery img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
}

/* Drop v6's 1240px page cap — site spans full viewport now.
 * Bumped horizontal padding so content has breathing room against the
 * screen edge now that we're full-bleed. Top-bar + header inherit. */
.container {
  max-width: none !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.top-bar .container,
.header .container {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.header .container { min-height: 56px !important; flex-wrap: nowrap !important; padding-top: 6px !important; padding-bottom: 6px !important; }
/* Push the nav-menu to the right edge — brand stays anchored left,
 * menu items hug the right side of the header. */
.header .container > .brand { margin-right: auto !important; }
.header .container > .nav-menu { margin-left: auto !important; justify-content: flex-end !important; }
.header .brand img { height: 70px !important; }
.top-bar { padding: 6px 0 !important; font-size: 13px !important; }
.top-bar .container { min-height: 0 !important; }

/* Desktop defaults for the home-page card grids (mobile rules in the
 * @media block below stack them to 1 column). These were inline
 * `style="display:grid;grid-template-columns:repeat(4,1fr);gap:24px"`
 * originally — refactored to classes so the mobile media query can
 * actually override them. Without a desktop default here, the class
 * has no grid styling and the section collapses to one-column on
 * desktop too. */
.commitment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 980px) {
  .commitment-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .container,
  .top-bar .container,
  .header .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Top-bar: stack phone/email/address and centre. Default flex-row
   * crams everything into one cramped line that bleeds off-screen on
   * iPhone widths. */
  .top-bar .container { flex-direction: column !important; gap: 6px !important; }
  .top-bar-left, .top-bar-right { flex-wrap: wrap !important; justify-content: center !important; gap: 14px !important; }
  .top-bar-left a, .top-bar-left span { white-space: nowrap; }
  .top-bar { font-size: 12px !important; }
  /* Header: smaller logo, hamburger visible. */
  .header .brand img { height: 48px !important; }
  .header-actions { display: none !important; }
  /* Mobile nav: hide by default, show as full-width dropdown when toggled. */
  .header .nav-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 16px !important;
    gap: 4px !important;
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 999;
    white-space: normal !important;
  }
  .header .nav-menu.open { display: flex !important; }
  .header .nav-menu a {
    padding: 12px 8px !important;
    font-size: 15px !important;
    border-bottom: 1px solid var(--gray-100);
  }
  .header .nav-menu a:last-child { border-bottom: 0; }
  /* Kill the desktop-only underline ::after pseudo on mobile. It was
   * absolute-positioned for a horizontal row (bottom:24px / left:0 /
   * width on hover) and looks like a stray orange dash across menu
   * rows in the dropdown. */
  .header .nav-menu a::after { display: none !important; }
  .header .nav-menu a.active,
  .header .nav-menu a:hover { background: var(--gray-100) !important; }

  /* Home-page card grids — stack to 1 column on mobile so cards take
   * full width instead of being squeezed into 2-up. Targets every grid
   * inside the marketing sections that uses inline grid-template-columns.
   * Order matters: more specific selectors with !important win over the
   * inline `style="..."` attribute. */
  .commitment-grid,
  .benefit-grid,
  .steps-grid,
  .tier-grid,
  .why-grid,
  .industries-grid,
  .footer-grid,
  #commitment .container > div[style*="grid-template-columns"],
  #value-we-deliver .container > div[style*="grid-template-columns"],
  #upgrade-benefits .container > div[style*="grid-template-columns"],
  #stats .stats-grid,
  #why .why-grid,
  section[id] > .container > div[style*="grid-template-columns:repeat("],
  section[id] > .container > div[style*="grid-template-columns: repeat("] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Inner nested grids inside value-we-deliver should also stack. */
  #value-we-deliver .container div[style*="grid-template-columns:1fr 1fr 1fr"],
  #value-we-deliver .container .vwd-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Card padding/margins tighten on narrow screens so the wider cards
   * don't bleed off the viewport. */
  .product-card, .benefit, .step, .tier, .vwd-stat, .ub-col {
    width: 100% !important;
    box-sizing: border-box;
  }
}

:root {
  --font-heading: 'Rajdhani', 'Cardo', serif;
  --font-chip:    'Rajdhani', 'Inter', sans-serif;
}

/* Headings */
h1, h2, h3, h4,
.hero-title,
.section-title,
.pd-title,
.sel-steptitle,
.equip-content h2,
.about-content h2,
.cta-content h2,
.testimonial-card blockquote {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Bigger, broader stroke for the hero + section titles so they read like
 * the "COMMITTED TO SERVE" sample — condensed industrial. */
.hero-title,
.section-title,
.pd-title {
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* The "highlight" run inside hero/section titles in v6 uses the primary
 * colour — when paired with Rajdhani an outline-style accent matches the
 * "BEYOND MACHINERY" treatment. Tenants who don't want outline can drop
 * this by overriding webheroslides' accent text. */
.hero-title .highlight,
.section-title span {
  color: var(--primary);
  -webkit-text-stroke: 1px var(--primary);
  font-weight: 700;
}

/* Chips, tags, badges — short uppercase pieces that benefit from
 * Rajdhani's tight tracking. Also covers main + footer nav links so the
 * whole menu reads as a cohesive Rajdhani block. */
.pd-chip,
.pc-tag,
.card-tag,
.section-label,
.hero-badge,
.sel-stepnum,
.nav-menu a,
.top-bar a,
.footer-nav a,
.hover-btn,
.header-cta {
  font-family: var(--font-chip);
  letter-spacing: 1.5px;
  font-weight: 600;
}

/* Filter rail labels stay in the default body font (Inter) so they read
 * as regular form labels — same family as the "Reset Filters" button.
 * Only the h4 section headings (Category, Power Source, Working Height)
 * stay in Rajdhani via the .catalog-filters h4 rule in products.html. */
.filter-chip {
  font-family: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Header nav — slightly larger + uppercase for v6's industrial feel.
 * !important is the seatbelt: v6's style.css ships with its own
 * .nav-menu rule that uses a lower-specificity selector, but on a
 * brand-css cache miss the browser falls back to that older rule.
 * The flag keeps the Rajdhani treatment locked even mid-rollout. */
.header .nav-menu a,
header.header nav.nav-menu a {
  font-family: 'Rajdhani', 'Inter', sans-serif !important;
  text-transform: uppercase !important;
  font-size: 16px !important;
  letter-spacing: 1.5px !important;
  font-weight: 600 !important;
}

/* "Get a Quote" header CTA — same size as the nav links so the top
 * row reads as one consistent typography block. */
/* "Get a Quote" header CTA — sleeker:
 *   - smaller padding (10×22 vs v6's 15×36) so the button hugs its text
 *   - 16px text, 600 weight — still uppercase Rajdhani but less heavy
 *   - 999px radius for a pill silhouette
 *   - 1px ring + crisp shadow on hover instead of v6's scaleX slab */
.header .header-cta,
.header .hover-btn.header-cta,
.header .hover-btn.primary.header-cta {
  font-family: 'Rajdhani', 'Inter', sans-serif !important;
  text-transform: uppercase !important;
  font-size: 16px !important;
  letter-spacing: 1.2px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  border: 1px solid var(--primary) !important;
  background: var(--primary) !important;
  color: var(--white) !important;
  box-shadow: 0 2px 6px rgba(242,99,2,0.25);
  transition: all .2s ease;
}
.header .header-cta:hover,
.header .hover-btn.primary.header-cta:hover {
  background: var(--white) !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(242,99,2,0.35);
  transform: translateY(-1px);
}
/* Mute v6's hover-bx scale animation on the header CTA — competes with
 * the pill hover above and feels gimmicky next to the cleaner button. */
.header .header-cta .hover-bx { display: none !important; }

/* Header row needs to allow wrapping at smaller widths so the bigger
 * 20px nav + CTA don't overflow the container. Without this v6's
 * .header .container is a strict flex row that clips overflow. */
.header .container {
  flex-wrap: nowrap !important;
  row-gap: 0;
  gap: 16px;
}
.header .nav-menu {
  flex-wrap: nowrap;
  row-gap: 0;
  white-space: nowrap;
}

/* Mobile-style rounded chip variant — used on products.html filters and
 * selector wizard buttons. v6's CSS already gives `.filter-chip` a flex
 * row with checkbox; here we just nudge font + size. */
.filter-chip { font-size: 14px; }
.pd-chip     { font-size: 11px; padding: 4px 14px; }

/* ─── Hero slider — content cycles, dots sit below stats inside the
   left .hero-content column (in-flow so they always render in view). */
@keyframes hsFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* Slider dots — pinned to the bottom-centre of the hero, full width,
   so they sit centred regardless of the left-aligned hero text. */
.hero-slider-dots { display: flex !important; justify-content: center !important; gap: 14px !important; position: absolute !important; left: 50% !important; bottom: 28px !important; transform: translateX(-50%) !important; margin: 0 !important; z-index: 5 !important; }
.hero { position: relative !important; }
.hero-slider-dots .hs-dot { width: 12px !important; height: 12px !important; border-radius: 50% !important; border: 0 !important; padding: 0 !important; background: rgba(15,23,42,0.25) !important; cursor: pointer; transition: background .2s, transform .2s; }
.hero-slider-dots .hs-dot:hover { background: rgba(15,23,42,0.55) !important; }
.hero-slider-dots .hs-dot.active { background: var(--primary, #F26302) !important; transform: scale(1.3); }

/* Hero text — now dark on the white background (gradient overlay was
   removed so the prior white text was invisible on white). */
.hero .hero-content { color: var(--dark, #1a1a1a) !important; }
.hero .hero-title { color: var(--dark, #1a1a1a) !important; }
.hero .hero-desc { color: var(--gray-700, #495057) !important; }
.hero .hero-stats { border-top-color: var(--gray-200, #e9ecef) !important; }
.hero .hero-stat-label { color: var(--gray-600, #6c757d) !important; }
.hero .hero-badge { background: rgba(242,99,2,0.10) !important; border-color: rgba(242,99,2,0.25) !important; }

/* Hide hero slider prev/next chevrons — dots are enough for navigation. */
.hero-slider-nav, .hero-slider-nav .hs-prev, .hero-slider-nav .hs-next { display: none !important; }

/* Hero product photo — white card backdrop instead of cover-cropped image. */
.hero .hero-image-wrap { background: #fff !important; }
.hero .hero-image-wrap img { object-fit: contain !important; background: #fff !important; padding: 18px !important; height: 500px !important; }
.hero .hero-image-wrap .overlay { display: none !important; }

/* Hero float-card labels — dark text on white card, not grey. */
.hero .hero-float-card.card-1 small,
.hero .hero-float-card.card-2 small { color: var(--dark, #0f172a) !important; font-weight: 600 !important; }

/* Push the stats block up so it sits closer to the buttons. */
.hero .hero-stats { margin-top: 0 !important; }