/* Global aspect-square utility fallback */
.aspect-square {
  aspect-ratio: 1 / 1 !important;
}

/* Spacing fallbacks missing from compiled Tailwind */
.mb-10 { margin-bottom: 2.5rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.mb-14 { margin-bottom: 3.5rem !important; }
.mb-16 { margin-bottom: 4rem !important; }
.p-6\.5 { padding: 1.625rem !important; }
.gap-3\.5 { gap: 0.875rem !important; }
.gap-4\.5 { gap: 1.125rem !important; }
.gap-6\.5 { gap: 1.625rem !important; }
.gap-16 { gap: 4rem !important; }
.px-7 { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
.px-9 { padding-left: 2.25rem !important; padding-right: 2.25rem !important; }
.px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.py-3\.5 { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }
.space-y-16 > :not([hidden]) ~ :not([hidden]) { margin-top: 4rem !important; }
.space-y-14 > :not([hidden]) ~ :not([hidden]) { margin-top: 3.5rem !important; }
.space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 3rem !important; }

/**
 * Pee Six Gears — Brand & Interaction Enhancement Layer
 * Loaded after the compiled Tailwind bundle (assets/css/app.css).
 * Plain CSS on purpose: the Tailwind build is a committed artifact and is not
 * recompiled here, so every rule below has to stand on its own.
 */

:root {
  --brand-green: #1f8a43;
  --brand-green-light: #3cc06a;
  --brand-green-deep: #0c4d24;
  --brand-silver: #d3d9de;
  --brand-silver-dim: #8d979f;
  --brand-accent: #e63946;
  --brand-accent-light: #ff6b6b;
  --brand-ink: #10121d;
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring-soft: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ============================================================
   1. HEADER SHELL — opaque, matched to the dark band below it
   ============================================================ */

.main-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08) !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Static brand rule along the bottom edge — a detail, not an animation. */
.main-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(31, 138, 67, 0.6) 25%,
    rgba(230, 57, 70, 0.65) 70%,
    transparent 100%
  );
}

.main-header.scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.12) !important;
}

/* Header bar collapses on scroll — no layout shift, the header is fixed. */
.header-bar {
  height: 5rem;
  transition: height 0.3s var(--ease-out-soft);
}

.main-header.scrolled .header-bar {
  height: 4.25rem;
}

/* ============================================================
   2. BRAND LOCKUP — static. No hover state by request: the logo is
   identity, not a control surface.
   ============================================================ */

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  padding: 0.25rem 0.9rem 0.25rem 0.2rem;
  border-radius: 0.75rem;
  position: relative;
  text-decoration: none;
}

/* Keyboard focus stays visible — that is accessibility, not decoration. */
.brand-lockup:focus-visible {
  outline: 2px solid var(--brand-green-light);
  outline-offset: 3px;
}

.brand-emblem-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  flex-shrink: 0;
  transition: width 0.3s var(--ease-out-soft), height 0.3s var(--ease-out-soft);
}

.main-header.scrolled .brand-emblem-wrap {
  width: 3.6rem;
  height: 3.6rem;
}

.brand-emblem {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.brand-type {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
  min-width: 0;
}

.brand-wordmark {
  display: block;
  height: 2.1rem;
  width: auto;
  object-fit: contain;
  transition: height 0.3s var(--ease-out-soft);
}

.main-header.scrolled .brand-wordmark {
  height: 1.7rem;
}

/* Strapline, footer only — the header wordmark already carries the subline. */
.brand-since {
  font-size: 8.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}

.brand-since .brand-since-dot {
  color: var(--brand-green-light);
}

@media (max-width: 400px) {
  .brand-since { display: none; }
  .brand-wordmark { height: 1.25rem; }
  .brand-emblem-wrap { width: 2.6rem; height: 2.6rem; }
}

/* ============================================================
   3. NAVIGATION — pill hover, gradient underline, dropdown polish
   ============================================================ */

.nav-link {
  border-radius: 0.75rem;
  padding-block: 0.6rem !important;
  z-index: 1;
  color: #1a1e2d !important;
  font-weight: 700 !important;
}

.nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.05) !important;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s var(--ease-out-soft), transform 0.3s var(--ease-spring-soft);
}

.nav-link:hover::before,
.nav-link.active::before {
  opacity: 1;
  transform: scale(1);
}

.nav-link::after {
  bottom: 0.3rem !important;
  left: 0.9rem !important;
  right: 0.9rem !important;
  background: linear-gradient(90deg, var(--brand-green-light), var(--brand-accent)) !important;
}

.nav-link:hover,
.nav-link.active {
  color: #e63946 !important;
}

/* Header chevron and burger dark styling on white header */
.main-header .nav-link svg {
  color: #1a1e2d;
}
.main-header .burger-line {
  background: #1a1e2d !important;
}

/* ============================================================
   CATEGORY RANGE CARDS — Smooth Gear Rotation & Elevation
   ============================================================ */

.category-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease,
              background-color 0.3s ease !important;
  position: relative;
  width: 100%;
}

/* Eliminate dark hover inversion from legacy app.css */
.category-card::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

.category-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(230, 57, 70, 0.45) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.1) !important;
}

.category-card-icon {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 0.85rem;
  background-color: #ffffff;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
}

/* Silky smooth gear rotation on hover */
.category-card-icon img,
.category-card img.category-card-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transform-origin: 50% 50% !important;
  transform: translateZ(0) scale(1) rotate(0deg);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.category-card:hover .category-card-icon img,
.category-card:hover img.category-card-img {
  transform: translateZ(0) scale(1.08) rotate(18deg) !important;
}

.nav-link:focus-visible {
  outline: 2px solid var(--brand-green-light);
  outline-offset: 2px;
}

/* Mega menu container gets a softer entrance and a brand-tinted rim. */
.mega-menu-container > div[class*="absolute"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9),
              0 0 0 1px rgba(31, 138, 67, 0.16) inset;
  background-image: radial-gradient(900px circle at 12% 0%, rgba(31, 138, 67, 0.12), transparent 55%);
}

.category-menu-tab.active-tab {
  box-shadow: 0 6px 18px -6px rgba(230, 57, 70, 0.7);
}

/* ============================================================
   4. HEADER CTA — shine sweep
   ============================================================ */

.cta-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Shine on hover only — an idle loop in the header reads as an ad banner. */
.cta-shine::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 45%;
  height: 200%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.4) 50%,
    transparent
  );
  transform: skewX(-20deg);
}

.cta-shine:hover::after {
  animation: ctaShine 0.9s ease-out;
}

@keyframes ctaShine {
  from { left: -75%; }
  to   { left: 135%; }
}

/* ============================================================
   5. MOBILE TOGGLE — hamburger that morphs into a cross
   ============================================================ */

/* The public layout pins this button to `display: flex !important`, so centre
   it with flex properties rather than grid ones. */
.burger {
  align-items: center;
  justify-content: center;
  position: relative;
}

.burger-box {
  position: relative;
  width: 20px;
  height: 14px;
}

.burger-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease-spring-soft), opacity 0.2s ease, width 0.35s var(--ease-out-soft);
}

.burger-line:nth-child(1) { top: 0; }
.burger-line:nth-child(2) { top: 6px; width: 72%; }
.burger-line:nth-child(3) { top: 12px; }

.burger:hover .burger-line:nth-child(2) { width: 100%; }

.burger.is-open .burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open .burger-line:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.burger.is-open .burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   6. MOBILE DRAWER — staggered entrance
   ============================================================ */

/* No fill-mode on purpose. `both`/`backwards` both hold the from-state (opacity 0)
   whenever the animation is delayed or its clock is not running, which renders the
   whole drawer empty. With no fill the items are visible unless the animation is
   actively playing. */
.mobile-nav.active .mobile-stagger > * {
  animation: drawerItemIn 0.45s var(--ease-out-soft);
}

.mobile-nav.active .mobile-stagger > *:nth-child(1) { animation-delay: 0.06s; }
.mobile-nav.active .mobile-stagger > *:nth-child(2) { animation-delay: 0.12s; }
.mobile-nav.active .mobile-stagger > *:nth-child(3) { animation-delay: 0.18s; }
.mobile-nav.active .mobile-stagger > *:nth-child(4) { animation-delay: 0.24s; }

@keyframes drawerItemIn {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   7. PRELOADER — emblem lockup while the page boots
   ============================================================ */

.preloader-logo-core img {
  animation: preloaderPulse 1.6s ease-in-out infinite;
}

@keyframes preloaderPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* ============================================================
   8. FOOTER BRAND
   ============================================================ */

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  position: relative;
}

.footer-brand .brand-emblem-wrap {
  width: 3.75rem;
  height: 3.75rem;
}

.footer-brand .brand-wordmark {
  height: 1.75rem;
}

.main-footer {
  position: relative;
}

.main-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(31, 138, 67, 0.7) 30%,
    rgba(230, 57, 70, 0.7) 60%,
    transparent
  );
}

/* ============================================================
   9. GLOBAL POLISH — focus rings, scrollbar, image reveal
   ============================================================ */

.custom-scrollbar::-webkit-scrollbar,
.mobile-nav ::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.mobile-nav ::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: linear-gradient(180deg, var(--brand-green), var(--brand-accent));
}

.custom-scrollbar::-webkit-scrollbar-track,
.mobile-nav ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

/* Floating speed-dial buttons get a slow attention pulse. */
.floating-contact-btn {
  position: relative;
}

.floating-contact-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
  animation: dialPulse 3.2s ease-out infinite;
}

.floating-btn-call::after { animation-delay: 1.6s; }

@keyframes dialPulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Cards pick up a diagonal light sweep on hover. */
.product-card::after,
.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.35) 48%,
    transparent 58%
  );
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
  transition: background-position 0.75s var(--ease-out-soft), opacity 0.35s ease;
}

.product-card:hover::after,
.category-card:hover::after {
  opacity: 1;
  background-position: -30% 0;
}

/* ============================================================
   10. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .cta-shine::after,
  .floating-contact-btn::after,
  .preloader-logo-core img,
  .mobile-nav.active .mobile-stagger > * {
    animation: none !important;
  }

  .floating-contact-btn::after {
    opacity: 0 !important;
  }

  .header-bar,
  .brand-emblem-wrap,
  .brand-wordmark {
    transition: none !important;
  }
}

/* Mega menu dismissal after a click (set by brand-enhance.js). */
.mega-menu-container.menu-dismissed > div[class*="absolute"] {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(0.75rem) !important;
}

/* ============================================================
   11. BRANDED SOCIAL MEDIA BUTTONS & BADGES
   ============================================================ */

.btn-social-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff !important;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-social-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-social-badge.badge-facebook {
  background-color: #1877F2 !important;
}

.btn-social-badge.badge-facebook:hover {
  background-color: #1464c9 !important;
}

.btn-social-badge.badge-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}

.btn-social-badge.badge-instagram:hover {
  filter: brightness(1.1);
}

/* Outline/Pill style for footer & header */
.social-pill-fb {
  background-color: rgba(24, 119, 242, 0.12) !important;
  color: #1877F2 !important;
  border: 1px solid rgba(24, 119, 242, 0.35) !important;
}

.social-pill-fb:hover {
  background-color: #1877F2 !important;
  color: #ffffff !important;
  border-color: #1877F2 !important;
}

.social-pill-ig {
  background-color: rgba(225, 48, 108, 0.12) !important;
  color: #E1306C !important;
  border: 1px solid rgba(225, 48, 108, 0.35) !important;
}

.social-pill-ig:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}